Project: simplest - The Ruby Toolbox

#SIMPLEST GRID SYSTEM

The Semantic gridsystem

Responsive
Fixed or fluid layout
Nested columns

#Install

gem install simplest

#Setup

###Edit your project file (config.rb)

# Require any additional compass plugins here.
require 'simplest'

# Sets the right amount of decimals for rounding numbers
Sass::Script::Number.precision = 8

###Import Simplest gridsystem

@import simplest

###Configure the SASS variables

$simplest-grid-content  : 940px
$simplest-gutter-width  : 20px
$simplest-margin-width  : 20px
$simplest-grid-columns  : 12
$simplest-fluid-grid    : true

#Usage

HTML

<div class="wrapper">
  <div class="content">
      <div class="main">
        <section>
          <article></article>
          <aside></aside>
        </section>
        <nav></nav>
      </div>
  </div>
</div>

SASS

@import simplest

$simplest-grid-content  : 940px
$simplest-gutter-width  : 20px
$simplest-margin-width  : 20px
$simplest-grid-columns  : 12
$simplest-fluid-grid    : true

.wrapper
  +grid-wrapper
  .content
    +grid-content
    .main
      +row
      section
        +row
        +col(8)
        +first
        article
          +col(2, 4, parent(8))
          +first
        aside
          +col(2, 4, parent(8))
          +last
      nav
        +col(4)
        +last

simplest

Runtime