A responsive, proportional, nestable, customizable, and mobile-first approach.
JavaScript CSS HTML
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
app
.bowerrc
.gitignore
Gruntfile.js
README.md
bower.json
frwd.sublime-project
package.json

README.md

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.