Not Just A Grid - A flexible and modular CSS Framework for the rapid prototyping and development of standards compliant websites.
Take Me Home Demos of Not Just a Grid Documentation Licensing Information Download Not Just a Grid Beer Buddies Who Have Donated To Not Just a Grid

Documentation

The documentation section will be expanded over time. For now you can find a basic introduction to get you up and running and give you a feel for the grid system and framework.

Installation

All files for Not Just a Grid reside in two folders :

/css/ - all css files
/images/notjustagrid/ - all image files and folders

Unzipping notjustagrid.zip in the root of your site will create these folders.

Once all the files are in place, use the following code betwteen your <head> tags to include all the stylesheets. Note: if you are developing for browsers that don't yet support media queries, you can use javascript to include the correct grid css file.

<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" media="screen" href="css/grid960.css" />
<link rel="stylesheet" media="screen and (min-device-width: 1281px)" href="css/grid1200.css" />
<link rel="stylesheet" media="screen and (min-device-width: 1400px)" href="css/grid1380.css" />
<link rel="stylesheet" media="screen and (min-device-width: 1550px)" href="css/grid1500.css" />
<link rel="stylesheet" type="text/css" href="css/type.css" />
<link rel="stylesheet" type="text/css" href="css/tables.css" />
<link rel="stylesheet" type="text/css" href="css/forms.css" />
<link rel="stylesheet" type="text/css" href="css/helpers.css" />
<link rel="stylesheet" type="text/css" href="css/ux.css" />

back to top

Included Files

The following CSS files are included :

Additionally, there is a collection of image files that pertain to form, table and button and other styling. These are all located in the images/framework/ folder

back to top

HTML Structure

The structure of the site is surrounded by a container <div> with the aptly named class .container. This holds everything together and keeps the site width correct.

<div class="container">
   Everything else goes in here.
</div>

Within the container is where you would build your site structure using the various grid classes - View sample page structure

<div class="container">
   <div class="full">Masthead</div>
   <div class="quarter">Left Column</div>
   <div class="half">Content Area</div>
   <div class="quarter">Right Column</div>
   <div class="full">Footer</div>
</div>

You can also nest columns within each other by using the .first and .last classes to prevent double margins - View sample page structure with nested columns

<div class="container">
   <div class="full">Masthead</div>
   <div class="quarter">Left Column</div>
   <div class="threequarter">
      <div class="threequarter first last">Content Area</div>
      <div class="quarter first">box 1</div>
      <div class="quarter">box 2</div>
      <div class="quarter last">box 3</div>
   </div>
   <div class="full">Footer</div>
</div>

back to top

Grid System

The grid system is based upon 12 classes which should give you the flexibility to create just about any layout. All grid classes have 10px margins on the left and right to provide a pleasing gutter size between columns. The classes are :

All widths are based on the size of thee container <div> which can be 960px, 1200px, 1380px or 1500px wide depending on the grid stylesheet being used.

In addition to the main grid classes, there are two special classes .first and .last which will remove the 10px left or right margin from a column/div - this is useful when nesting columns within other columns

View a sample of the grid - View a sample of the grid system.

back to top

Typography

The typographic styles that are defined by Not Just a Grid are meant as a baseline from which to work. They give good cross browsers styling to common HTML elements. The type.css file also contains the base font stacks that are used throughout, so you will need to edit these depending on your font preferences.

Three font stacks are defined :

  1. body - used for all type that isn't otherwise assigned a font stack
  2. h1, h2,h3,h4,h5,h6 - a font stack common to all headings
  3. code, pre, var, samp - a monospaced font stack.

back to top

Forms

Two form layouts are defined in the forms stylesheet, along with some styling for form fields and buttons.

Both form styles use the exact same markup, so you can easily switch from one to another simply by changing the class (either vertical_form or horizontal_form) on the form tag.

The base markup for a vertical form is as follows - View an example of a vertical form

<form class="vertical_form">
   <fieldset>
      <legend>Personal Information</legend>
      <ul>
         <li>
            <label for="name">Your Name</label>
            <input name="name" type="text" class="requiredfield" id="name" size="35">
            <div class="form_input_notes" id="name-notes">Please enter your full name.</div>
         </li>
      </ul>
   </fieldset>
   <fieldset class="fieldsetbuttons">
      <div>
         <button type="submit" class="confirm_button grey styled_button">Submit Form</button>
      </div>
   </fieldset>
</form>

And foo a horizontal form it is as follows - View an example of a horizontal form

<form class="horizontal_form">
   <fieldset>
      <legend>Personal Information</legend>
      <ul>
         <li>
            <label for="name">Your Name</label>
            <input name="name" type="text" class="requiredfield" id="name" size="35">
            <div class="form_input_notes" id="name-notes">Please enter your full name.</div>
         </li>
      </ul>
   </fieldset>
   <fieldset class="fieldsetbuttons">
      <div>
         <button type="submit" class="confirm_button grey styled_button">Submit Form</button>
      </div>
   </fieldset>
</form>

Form fields are contained within an unordered list. First you have the <label> tag for the field, then you have the form field itself and finally you have an optional <div class="form_input_notes"> where you can add notes about the form field such as if it is a required field etc. You can build you form by simply adding additional <li></li> tags with additional form fields between them.

After you have added all your form fields, there is final <fieldset> with the class of fieldsetbuttons where the submit button will go. This class simply aligns the buttons to the right ( my personal preference).

Usually when I am creating a form I will use the <div class="form_input_notes"> as a target for realtime feedback for the user using AJAX so I make sure to give each on a unique id.

back to top

Tables

The table styling provides two basic table styles - one a plain styled table, the second with additional styling for data lists. Both use the same markup for the table, so it's just a case of changing class to display a differenly styled table.

For the plain table - View an example of a basic styled table

<table class="plain" width="100%">
   <caption>
      iPhone Specifications
   </caption>
   <thead>
      <tr>
         <th>&nbsp;</th>
         <th scope="col">iPhone 4</th>
         <th scope="col">iPhone 3GS </th>
         <th scope="col">iPhone 3G</th>
         <th scope="col">iPhone</th>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <th>&nbsp;</th>
         <td>*Not Spcified</td>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
      </tr>
   </tfoot>
   <tbody>
      <tr>
         <th scope="row">Storage</th>
         <td>16 or 32GB</td>
         <td>8, 16, 32GB</td>
         <td> 8 or 16GB</td>
         <td>4, 8 or 16GB</td>
      </tr>
      <tr>
         <th scope="row">Memory</th>
         <td>512MB</td>
         <td>256MB</td>
         <td>128MB</td>
         <td>128MB</td>
      </tr>
      <tr>
         <th scope="row">Screen Resolution</th>
         <td>640x960</td>
         <td>320x480</td>
         <td>320x480</td>
         <td>320x480</td>
      </tr>
   </tbody>
</table>

And for the datalist styled table - View an example of a datalist styled table

<table class="datalist" width="100%">
   <caption>
      iPhone Specifications
   </caption>
   <thead>
      <tr>
         <th>&nbsp;</th>
         <th scope="col">iPhone 4</th>
         <th scope="col">iPhone 3GS </th>
         <th scope="col">iPhone 3G</th>
         <th scope="col">iPhone</th>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <th>&nbsp;</th>
         <td>*Not Spcified</td>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
      </tr>
   </tfoot>
   <tbody>
      <tr>
         <th scope="row">Storage</th>
         <td>16 or 32GB</td>
         <td>8, 16, 32GB</td>
         <td> 8 or 16GB</td>
         <td>4, 8 or 16GB</td>
      </tr>
      <tr>
         <th scope="row">Memory</th>
         <td>512MB</td>
         <td>256MB</td>
         <td>128MB</td>
         <td>128MB</td>
      </tr>
      <tr>
         <th scope="row">Screen Resolution</th>
         <td>640x960</td>
         <td>320x480</td>
         <td>320x480</td>
         <td>320x480</td>
      </tr>
   </tbody>
</table>

back to top

User Experience

The User Experience module currently contains three different elements :

  1. Alert Boxes - a set of four styles for displaying clear visual alerts within your pages for errors, success messages, warnings and questions.
  2. Pagination - a set of classes designed to create a consistant styling of pagination buttons.
  3. Link Hints - a set of styles designed to highlight with images what a link is linking to.
Alert Boxes

The markup to display an alert box is straightforward and consists of two <div>'s - one of which is optional as it only displays a speech bubble like tail below the alert.

For a success box - Success Box - View Example

<div class="success">
   <p>Your content goes here</p>
   <div></div>
</div>

For a error box - Error Box - View Example

<div class="error">
   <p>Your error message goes here</p>
   <div></div>
</div>

For a warning box - Warnign Box - View Example

<div class="warning">
   <p>Your warning message goes here</p>
   <div></div>
</div>

For a question box - Question Box - View Example

<div class="question">
   <p>Your question or notice goes here</p>
   <div></div>
</div>

Note : the <div></div> is optional and can be removed if you don't want the small speech bubble like tail below the alert.

Link Hints

The link hint classes automatically insert a small icon to the right of links that point to certain file types. The supported file types are :

Pagination

The pagination classes are styles for displaying consistent styled pagination links on a page. There are classes for clickable links, the current page being displayed and ghost classes to grey out unclickable links. The basic structure for displaying pagination is :

<div class="pagescontainer">
   <span class="ghost">First</span>
   <span class="ghost">Prev</span>
   <span class="current">1</span>
   <a href="http://www.yoursite.com/pagename?page=2">2</a>
   <a href="http://www.yoursite.com/pagename?page=3">3</a>
   <a href="http://www.yoursite.com/pagename?page=4">4</a>
   <a href="http://www.yoursite.com/pagename&amp;page=2">Next</a>
   <a href="http://www.yoursite.com/pagename&amp;page=4">Last</a>
</div>

The pagescontainer class is used to surround the entire pagination block. All links within the pagination block will be styled automatically. To show the current page, add the class current. To grey out an unclickable link, add the class ghost ( useful when you are on the first or last page and don't want to have a clickable Previous, First, Next or Last buttons.)

back to top

Helpers

The helpers CSS file doesn't really require much documentation as most of the classes contained in it should speak for themselves. Having said that, here is a break down of what is contained.

.text_center .text_right
These simply align the text within the current container either to the center or to the right
.obj_left .obj_right
Used to float any block level object to the left or right of its current container.
.top_margin_xx .bottom_margin_xx .left_margin_x .right_margin_xx
Used to add a 10 or 20 pixel margin to an object.
.vpad_10 .vpad_20
Used to add 10 or 20 pixel padding to the top and bottom of an object.
.bg_xxxxxx
Quick ways to add a background colour to an object. Great for visually laying out your grid and identifying any problems.
.round_xx
Quick way to add 5, 10, 15 or 20 pixel CSS3 rounded corners to an object.
.blackborder .blackborder_dotted
Adds a 1px solid or dotted border to an object.
.blackborder_inner
uses CSS3 inset drop shadows to add a 1px black border to the inside of an object - warning: browser results vary!
.hiddentext
useful for text replacement. Simply shifts the text 10000px off to the left.
.shadow_out_xx .shadow_in_xx
Used to add a quick CSS3 box shadow to an object. shadow_out draws a regular shadow, shadow_in draws an inset shadow.

back to top

Credits

Not Just a Grid is developed by Al Redpath / Outrageous Creations!

Licensing

Not just a Grid is licenced under the MIT licence.

Thanks & Inspiration

The work of the following people and projects has been the inspiration behind Not Just a Grid, a great deal of thanks go out to all of them.

Eric Meyer for his CSS reset, Nathan Smith for 960.gs, Olav Bjørkøy for Blueprint CSS, Harry Roberts for Typogridphy, Stéphane Curzi for Baseline, Jeff Croft for interesting discussions, Veerle Pieters for CSS Inspiration, Mark James for the Silk iconset, Chris Coyier of CSS-Tricks, plus anyone else who I may have forgotten.

Download

Visit the downloads page to get Not Just a Grid plus supporting files.

Donate

Like Not Just A Grid?

Donate with PayPal

this site and it's contents are copyright © 2014 al redpath / outrageous creations!