Girder

A minimalistic grid for building awesome Websites for the modern browser. It uses Sass silent classes (placeholders) to structure content in HTML and keeps your Markup free of excess presentational classes like "unit_1of4", "small-2", "grid4".

Why I use it:

  • Its fast and simple to use with Sass or plain CSS.
  • Flexible, responsive and scalable; It likes relative units.
  • Uses document flow, box-sizing and adjustable gutters
  • Semantic & concise. Its a layout helper with just the essentials.

Simple Grid Units

unit(golden-small)
unit(golden-large)
unit(half)
unit(half)
unit(three-fourths)
(fourth)
(fourth)
(fourth)
(fourth)
(fourth)
.push-one
(golden-small)

Setup

Copy the Scss folder and files directly into your project's path. Get them from Github or from the downloaded examples.

With Bower just use: "bower install girder --save" and add a reference to either scss/_girder.scss or girder.css inside the components folder.

Using Scss

@import the _girder.scss partial which should reside next to its modules in your project.

Standard CSS

Simply include girder.css in your document along with the site's styles. Here's an Example.