waltz / exygy-patterns-test

Boilerplate framework for front end code challenge

#Exygy Boilerplate Pattern Libary

Includes:

• Fabricator
• Gulp
• Foundation

Getting Started

1. Install Node
2. Install gulp-sass

npm install gulp-sass

1. Clone this repo
2. Start your server

$ npm start

##Interface Inventory

Using the starter framework and visual comps conduct an Interface Inventory and identify all the major components across the screens.

• Categorize and name each component meaningfully.
• How would you present your findings to the team?

##Sass Architecture

Draft a modular sass architecture using folders and nested scss files based on your interface inventory.

• How would you organize all of these files in a meaningful way in order to find stuff later when you and other developers come back to the code?

##Component Design

Detail a number of key components.

• Give attention to the naming conventions of each component, its variants, modifiers and states.
• Use semantic markup wherever possible (html5 tags, class names, etc)
• Also outline the styles for any descendent elements as needed.
• Ensure your components are responsive and designed with mobile first breakpoints.

###Example:

• Buttons
• List Elements - Suggested