Work with us as a frontender
Hey welcome aboard as a frontender! 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.
- Explore and find new tools to be even a better frontend designer.
Your essential tooling
- Sublime text
- SASS knowledge
- JS Prettier
- Autoprefixer
- SASS linter
- Figma
- Sketch
- Zeplin for getting colors and measurements etc
- Chrome Dev tools with options
- 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 color pallets 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 padding’s 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?