TIP: By changing the order of the divs in your mark up and adding alpha & omega classes, you can change the order in which the columns collapse on mobile.

Build scalable web apps that work on everything

Getting Started

If you're not familiar with Sass / Compass (while I strongly suggest you learn), Spice is ready to go out of the box. Just ignore the sass files and use the .css files. By default the grid is set to 1140 pixels to perfectly fit a 1280 monitor and scale down to fit anything smaller. Familiarize yourself with the HTML markup. ( section > row > columns structure ). Open the grid.scss. This is where you can change the max-width and margin size.

Classes

alpha Sets the left margin to 0

omega Floats column right

last Sets the right margin to 0

hide Sets element to display : none

centerImg Centers image to the parent element

Columns

Standard Standard example code for responsive grid


<div class="section">
    <div class="row">
        <div class="seven columns">
            <p>7 columns</p>
        </div>
    <div class="five columns">
            <p>5 columns</p>
        </div>
    </div>
</div>

Centered Columns are positioned in the middle of the row by adding the class "center" to the column


<div class="section">
    <div class="row">
        <div class="ten columns center">
            <p>10 Columns Centered</p>
        </div>
    </div>
</div>

Pushed Pushed columns provide additional space between columns in a row


<div class="section">
    <div class="row">
        <div class="columns seven">
            <p>7 Columns</p>
        </div>
            <div class="columns push_one four">
        <p>4 Columns Pushed 1</p>
        </div>
    </div>	
</div>

Nested Create rows inside of rows


<div class="section">
    <div class="row">
        <div class="columns six">
            <p>6 Columns</p>
            <div class="row">
                <div class="six columns">
                     <p>6 Columns Nested</p>
                </div>
                <div class="six columns">
                    <p>6 Columns Nested</p>
                </div>
            </div>
        </div>

        <div class="columns six">
            <p>6 Columns</p>
            <div class="row">
                <div class="six columns">
                    <p>6 Columns Nested</p>
                </div>
                <div class="six columns">
                    <p>6 Columns Nested</p>
                </div>
            </div>
        </div>
    </div>	
</div>

Navigation

Nav The header > Nav does not follow the section > row > columns structure




<header>
    <div class="navigation">

        <div class="nav-button transition">
            <span></span>
            <span></span>
            <span></span>
        </div>
    
        <div class="inner">
            <a class="smoothFont five columns logo" href="index.php">HTML<img src="images/html5logo.png" alt=""> <span>SPICE</span></a>
            <div class="link-holder" id="nav">
                <ul>
                    <li class="current"><a href="index.php">Home</a></li>
                    <li><a href="index.php#demo">Demo</a></li>
                    <li><a href="docs.php">Docs</a></li>
                    <li><a href="html5_spice.zip" class="last">Download</a></li>
                </ul>
            </div>
        </div>		
    </div>
</header>

Form Fields

Inputs, Textareas Wrap form elements with a field class named div



<form action="#" method="post">
    <div class="field">
        <input type="text" class="input">
    </div>
</form>