Girder

A minimalistic grid targeted at modern web apps with a lean and nimble UI. 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.
  • A ton of utility but it doesn't have to generate any extra CSS
  • Uses document flow, box-sizing and adjustable gutters
  • Semantic & concise. Its a layout helper with just the essentials.
  • Integrates easily, works with Node-Sass or Ruby.

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.