FRWD

A responsive, proportional, nestable, customizable, and mobile-first approach for responsive web design.

1. Responsive:

   • Flexible grid defined in percentages
   • Flexible media that proportionally scale down when needed
   • Media queries defined in ems

2. Proportional: create layouts using proportions (1/2, 2/3, 1/4, etc.), not predefined non-semantic classes or a rigid column grid.

3. Nestable - Easily create complex layouts.

4. Customizable - Don't like something? Change it. Define your own proportions, breakpoints, and everything else.

5. Mobile-first - The small screen experience is the baseline, with additional styles added using media queries.

Getting Started

1. Have the following requirements installed: Node, NPM, Bower, and the Grunt CLI

2. Clone the repo: git clone https://github.com/curtisj44/FRWD.git

3. Run npm install

4. Run bower install

5. Run grunt serve

Tasks

• grunt or grunt serve → runs the development site using the “app” folder
• grunt serve:dist → runs the production-ready site using the “dist” folder
• grunt build → builds the production-ready site into the “dist” folder

Style Guide

FRWD is set up to generate a style guide / pattern library using kss-node.