A simple responsive grid system written in SASS , compiled by pyScss.
Install pyScss:
$ pip install pyScssGNU make <http://www.gnu.org/software/make/> can be used to compile scss to css:
$ makeOr you can use Python to compile scss to css:
$ python build.pyTwo 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.
Please check my blog on Github Pages.
Released in public domain. See UNLICENSE.
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?