A responsive, proportional, nestable, customizable, and mobile-first approach.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



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
  1. Proportional: create layouts using proportions (1/2, 2/3, 1/4, etc.), not predefined non-semantic classes or a rigid column grid.

  2. Nestable - Easily create complex layouts.

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

  4. 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


  • 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.