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

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.