Solid Grid

Solid Grid is a mobile first, responsive, twelve column grid that's designed to make it easy to create mobile friendly websites and accellerate your development process.

Standard Grid

The grid is maintained by the .row class, this defines the overall width of the grid and acts as a container for your columns or by adding the class .column acts as a full width column itself. Once the .row has been created you can add any combination of .column or .columns, up to a maximum of twelve, to create your layout.

<div class="row column">
    Row Column
</div>
<div class="row">
    <div class="eleven columns">
        Eleven
    </div>
    <div class="one column">
        One
    </div>
</div>
				

Nested Grid

You can also nest grids inside a column by adding a new .row and then add up to twelve .column or .columns. Nested columns retain the same ratio and gutter width so care must be taken when nesting as columns can potentially become very small.

<div class="row">
    <div class="six columns">
        <div class="row">
            <div class="three columns">
                Three
            </div>
            <div class="three columns">
                Three
            </div>
        </div>
    </div>
    <div class="six columns">
        Six
    </div>
</div>
			

Offset Grid

You can add space to your grid by using the .offset-by-xxx class to your .column or.columns and the appropriate margin will be added to the column.

<div class="row">
    <div class="five columns offset-by-one">
        Five
    </div>
    <div class="six columns">
        Six
    </div>
</div>
				

Re-ordered Grid

You can change the order that columns are displayed in a row by using the .push-by-xxx or .pull-by-xxx classes, this allows you to give precedence to content in your code but not when it is displayed on the screen aiding search engine optimisation.

<div class="row">
    <div class="six columns push-by-six re-order-last">
        First Column
    </div>
    <div class="three columns pull-by-six re-order-first">
        Second Column
    </div>
    <div class="three columns pull-by-six re-order-middle">
        Third Column
    </div>
</div>

Typography

Typography is built on a base font size of 14px and line-height of 28px, the padding and margins of all standard elements set at multiples of 14px to ensure that your content has a natural vertical rhythm. The base stylesheet is entirely optional but we feel that it gives you an excellent starting point for some great typography.

this is a preformatted text block

There are a number of additional classes that can also be applied to your content to add unique formatting, a full list of these classes is below:

• .text-left
• .text-centre
• .text-right
• .quiet
• .loud
• .highlight
• .removed

There are also four classes that you can add to an image to change the way that they are displayed and can be combined in any combination.

• The .scale class ensures that the image will not exceed the bounds of its container.
• The .bordered class adds a white border and subtle drop shadow to the image.
• The .rounded class adds rounded corners to the image.
• The .circular class makes the image circular by adding a 50% radius border.

Tables

By default there are no formatting styles associated with the table tag this is to ensure that no styling is improperly associated with tables created by third party plugins such as calendars. However, by adding the class .table to a table its captions, headers and columns will all be styled as well and by adding the class .zebra alternate rows will be highlighted.

Forms

Elements within a form should be laid out using an ordered or unordered list and by default all form inputs except checkboxes and radio buttons are designed to utilise the full width of their parent element with labels being positioned above their related input.

<form id="email-form">
    <fieldset>
        <legend>Email</legend>
        <ol>
            <li>
                <label for="email-form-title" class="left">Title</label>
                <select id="email-form-title" name="select">
                    <option value="1">Mr</option>
                    <option value="2">Miss</option>
                    <option value="2">Mrs</option>
                </select>
            </li>
            <li>
                <label for="email-form-name">Name</label>
                <input id="email-form-name" name="name" type="text" maxlength="255" />
            </li>
            <li>
                <label for="email-form-email">Email</label>
                <input id="email-form-email" name="email" type="text" maxlength="255" />
            </li>
            <li>
                <label for="email-form-subject">Subject</label>
                <input id="email-form-subject" name="subject" type="text" maxlength="255" />
            </li>
            <li>
                <label for="email-form-message">Message</label>
                <textarea id="email-form-message" name="message" row="5" cols="50"></textarea>
            </li>
            <li class="text-right">
                <button name="cancel" type="button">Cancel</button>
                <input name="submit" type="submit" value="Submit" class="primary" />
                <input name="disabled" type="submit" value="Disabled" disabled="disabled" class="primary" />
            </li>
        </ol>
    </fieldset>
</form>

Responsive Forms

You can easily structure your forms in a responsive grid by converting the list elements into rows by assigning them the class .row and wrapping the label and form inputs with your desired number of .column or .columns .

<form id="topic-form">
    <fieldset>
        <legend>New Topic</legend>
        <ul>
            <li class="row">
                <div class="two columns">
                    <label for="topic-subject">Subject</label>
                </div>
                <div class="ten columns">
                    <input id="topic-subject" name="subject" type="text" maxlength="255"/>
                </div>
            </li>
            <li class="row">
                <div class="two columns">
                    <label for="topic-message">Message</label>
                </div>
                <div class="ten columns">
                    <textarea id="topic-message" name="message" cols="10"></textarea>
                </div>
            </li>
            <li class="row">
                <div class="two columns">
                    <label for="topic-tags">Tags</label>
                </div>
                <div class="ten columns">
                    <input id="topic-tags" name="tags" type="text" maxlength="255" />
                </div>
            </li>
            <li class="row">
                <div class="two columns"></div>
                <div class="ten columns text-right">
                    <input name="submit" type="submit" value="Submit" class="primary" />
                </div>
            </li>
        </ul>
    </fieldset>
</form>

Inline Forms

Forms can also be displayed inline by adding the class .inline to the parent fieldset, as all form inputs have a default width of 100% you will also need to specify a width for all inputs when working with an inline form. Inline forms will only be displayed on medium screen sizes or higher, when viewed on small or extra small screens will be displayed as a standard form.

<form id="login-form">
    <fieldset class="inline">
        <legend>Login</legend>
        <ol>
            <li>
                <label for="user-login">Username</label>
                <input id="user-login" name="login" type="text" maxlength="255" style="width: 150px;" />
            </li>
            <li>
                <label for="user-password">Password</label>
                <input id="user-password" name="password" type="password" maxlength="255" style="width: 150px;" />
            </li>
            <li>
                <input name="submit" type="submit" value="Submit" class="primary" />
            </li>
        </ol>
    </fieldset>
</form>

Customisation

Solid Grid is built with {Less}, a CSS pre-processor that extends the CSS language to make your stylesheets more maintainable, extendable and themable. The grid.mixins.less file that is included with the download can be incorporated in to your projects and allows you to extend your own classes, the main ones can be seen below.

Mixins and Helpers

.articles{
    .makeRow();
    
    
}

.article{
    .makeColumn(6);
    
    
}

.tags{
    .makeColumn(3);
    .offsetBy(3);
    
}

.comments{
    .makeColumn(3);
    .pushBy(3);
    
}

.links{
    .makeColumn(3);
    .pullBy(3);
    
}

@gutterWidth: 20px

@smallWidth: 550px;

@mediumWidth: 720px;

@largeWidth: 960px;

@extraLargeWidth: 1200px;

Compiling Stylesheets

Solid Grid uses Grunt as its build system, if you've not heard of it before Grunt is a JavaScript Task Runner that simplifies your build process, we use it to compile, minify and combine the Solid Grid stylesheets and the download includes everything you need to get building your customised Solid Grid stylesheets. To get started with Grunt we recommend that you read through the getting started guide which will teach you how to install and run grunt commands.

Available Commands

• Less: Compiles your less customised files in to CSS.
• Cssmin: Minifies and combines the CSS stylesheets.
• Watch: Monitors the less files and automatically compiles and minifies the stylesheets whenever theres a change.