A simple, clean, open-source grid system for your next responsive web project

Sometimes, all you need is a simple grid system without the extras, for faster web development. Spice provides just that, plus the ability to quickly customize the important things.

Download

About Spice

Spice is a 12 column, configurable, nestable, responsive grid system that handles the main structure and does not provide any styles. Spice provides built in classes to easily hide, center, position and size elements that works on all screen sizes.

Built With

HTML5, Compass, Sass and Normalize.css
Easily change the overall maximum width or margin size by updating one variable in the grid.scss file. Avoid code full of bloated vendor prefixes by using Compass. Consistently render elements across all browsers with normalize.css.

Features

  • Set your width to full-screen, 1140 or any size
  • Responsive nav, images, text and form fields
  • Nested and centered columns
  • Built in classes to easily hide, center, position and size elements

Typography

HTML5 SPICE

HTML5 SPICE

HTML5 SPICE

Form Elements

Images

Grid

12 columns

9 columns

3 columns

10 Columns Centered

4 Columns

4 Columns

4 Columns

6 Columns

6 Columns Nested

6 Columns Nested

6 Columns

6 Columns Nested

6 Columns Nested

7 Columns

4 Columns Pushed 1

...and any other configuration with the sum of 12