semantic_grid

#Semantic Grid

This is a simple 16-column semantic grid for Sass based on the popular 960.gs.

To use the grid, simply mixin in the following:

body +body

Then any element that you wish to user the grid on:

content +grid-container

You now have access to all the standard 960 grid features: grid(n), push(n), pull(n), prefix(n), suffix(n). Mixin 'alpha' and 'omega' to first and last columns, respectively.

A typical centered layout will look like this:

%body #outer_header .outer_grid %header #outer_content .outer_grid %content #outer_footer .outer_grid %footer

With the following mixins:

body +body

.outer_grid +grid-container

Semantic Grid also includes a sticky footer. To use it add this mixin to the top of your stylesheet:

+sticky-footer(YOUR_FOOTER_HEIGHT)

and modified your layout:

%body #sticky_footer_top_wrapper #outer_header .outer_grid %header #outer_content .outer_grid %content #push_sticky_footer #outer_footer.sticky_footer_bottom_wrapper .outer_grid %footer

This grid plays nice with html5-boilerplate.

#Requirements Sass 3.1+

#Install for Rails Update your Gemfile

gem 'semantic_grid'

bundle install

##Rails 3.1.x Semantic Grid needs the sass files to be imported in a specific order to function properly—therefore you will need to disabled the require_tree sprocket directive.
Comment-out the following sprocket directive in /application.css.scss (Remove the =)

* require_tree .

Import the mixins at the beginning of your stylesheet

@import 'semantic_grid';
@import 'semantic_gird/sticky_footer';  # If you want to use it.

#Install without Rails The following script will generate a semantic_grid directory and convert all .css.scss to .scss extensions. The semantic_grid directory is for 'sass --watch' use outside of rails.

Preliminary step: clone this repo and cd into the directory.

Step 1: Make script executable by changing file permission

chmod a+x generate-semantic_grid.sh

Step 2: Generate files

./generate-semantic_grid.sh

Step 3: Move the new semantic_grid directory into your project's sass directory. e.g. stylesheets/sass/

Step 4: Semantic Grid requires an additional sass extension to output properly. You must watch your sass files with the following flag appended:
-r ./semantic_grid/lib/semantic_grid.rb

# Example (project root directory)
sass --watch stylesheets/sass:stylesheets -r ./stylesheets/sass/semantic_grid/lib/semantic_grid.rb

##Help Out

Currently the project is a work in progress. Feel free to help out.

Credits

Semantic Grid is maintained and by Gavin Hughes

License

Semantic Grid is Copyright © 2011 Gavin Hughes. It is free software, and may be redistributed under the terms specified in the LICENSE file.