flxa/frontend-challenge

Frontend Challenge

This challenge is designed to give you a peek into our workflow at PNX and to test your skills with the following technologies:

• Sass
• Twig
• jQuery
• kss-node

Inside the design folder there is a PSD file.

Inside src/components is a very light-weight Sass scaffold in the form of a handful of base components, some very simple utility classes and one example button component.

We'd like you to have a go at implementing as many of the components from design/pnx.psd as you can in an hour, into a living style guide (kss-node).

It's OK if you aren't familiar with kss-node or Twig, the button example in src/components/modules/button/ is your friend, follow it's lead.

Outcome

We just want to see your code! Ideally you won't use a CSS framework but can demonstrate at least some of the following:

• Understanding of SMACCS architecture.
• Understanding of BEM naming.
• Ability to reference kss-node specification when writing component documentation.
• Use of common Sass functions like breakpoint
• Ability to self-learn new Sass modules like typey and chroma.
• Use of HTML5 markup
• Use of jQuery where necessary

Bonus points for:

• Use of flexbox
• Understanding of SVG scaling issues
• Having fun!!

Getting started

Firstly, please fork this repo so you can share the results of your work.

To setup your development environment, make sure you have nvm and yarn installed locally.

Then run the setup tasks:

nvm install
yarn

Once all packages are installed, you can start developing the component library inside the style guide. Run:

gulp watch

This will build all the files inside the src/components directory and start the Browsersync server, opening it in your default browser.

When you make changes to a scss, js, or twig file the watch task will lint, rebuild and refresh Browsersync for you.

Good luck!