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!
- 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
- SASS linter
- 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
componentsand map colors, and paddings to vars.
- Start adding app specific
- 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.
- 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
- 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
.editorconfigadhered, with 2 spaces and no tabs?
- Is it following our sass conventions of modules, components etc?
- Are there no hard coded sizes in
- Are there no hard coded
- Does the naming of the files make sense?
- No global scopes except for the components?