Hey welcome aboard as a front-ender! So happy you’re here! Let’s get you started up and running quickly.

Before you begin

  • Read the conventions on SASS and our modular SCSS
  • Get the tools mentioned below
  • Clone our sample SASS repository and study it
  • Read a typical frontend journey and lets get going!

Your responsibilities

  • Delivering a smooth and pixel perfect drop dead gorgeous front-end for the crazy things our designer think of.
  • Write pretty code and be happy doing it.
  • Think and help the teams on how to be better in UX/design and whatnot.

Your essential tooling

  • Sublime text
  • SASS knowledge
  • Chrome dev tools /w phone options
  • JS Prettier
  • Autoprefixer
  • SASS linter
  • Sketch
  • Zeplin for getting colors and measurements etc
  • Gulp/webpack/sprockets build pipeline
  • A good understanding of our SASS conventions

Your typical journey

  • Get Sketch file from a designer
  • Upload to Zeplin for getting measurements and colour palletes etc.
  • Begin by making a branch for instance add-profile-page (check our PR guidelines).
  • Copy the SASS structure /w conventions from a existing project or make your own.
  • Add a build pipeline (or copy from existing project).
  • Adapt the components and map colors, and paddings to vars.
  • Start adding app specific modules.
  • Do the rest of the design, make sure it adheres to SASS lint.
  • Check it in, make sure it builds.
  • Ask for a pull-request from the team.

Your guidelines

  • 2 spaces for tabs via editor config
  • Write your HTML in SLIM where possible.
  • Write your CSS in SASS (the indented version or SCSS) we prefer SASS
  • Use ES6 for javascript
  • Always test your code on multiple devices
  • Use screenshot tooling

How you’ll be reviewed in a pull-request

  • Does the design look good, is it pixel perfect?
  • Is it responsive? Does it scale well across devices?
  • Is the .editorconfig adhered, with 2 spaces and no tabs?
  • Is it following our sass conventions of modules, components etc?
  • Are there no hard coded sizes in paddings?
  • Are there no hard coded colors?
  • Does the naming of the files make sense?
  • No global scopes except for the components?