Simple pyScss Responsive Grid

A simple responsive grid system written in SASS , compiled by pyScss.

Quick Start

Install pyScss:

$ pip install pyScss

GNU make <http://www.gnu.org/software/make/> can be used to compile scss to css:

$ make

Or you can use Python to compile scss to css:

$ python build.py

Two css class are provided: .row and .spanX-of-12, where X is the number of columns in a row of total 12 columns.

Because display: inline-block is used for .spanX-of-12, there is whitespace issue in such design. Please refer to this article for solution.

The following is an example to use the grid in your website:

<div class="row"><!--
  --><div class="span9-of-12">
    main content here
  </div><!--
  --><div class="span3-of-12">
    sidebar here
  </div><!--
--></div>

Note that <!-- and --> is used to prevent whitespace issue.

Demo

Please check my blog on Github Pages.

UNLICENSE

Released in public domain. See UNLICENSE.

References

What’s the Deal With Display: Inline-Block?

Fighting the Space Between Inline Block Elements

Should You Use Inline-Blocks As A Substitute For Floats?

FLUID AND RESPONSIVE GRID LAYOUTS

Yet Another CSS Grid System