Index
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" />
Included Files
The following CSS files are included :
- reset.css - a standard CSS reset to ensure we start from an even base.
- grid960.css - the 960px wide grid
- grid1200.css - the 1200px wide grid
- grid1380.css - the 1380px wide grid
- grid1500.css - the 1500px wide grid
- type.css - base typography set up
- tables.css - basic table styling
- forms.css - basic form styling
- ux.css - user experience enhancements
- helpers.css - a collection of helpful classes to assist with rapid prototyping and development.
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
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 -
<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 -
<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>
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 :
.full- will span the full width of the container div with a 10px left and right margin..threequarter- will span three quarters of the width of the container..half- will span half the width..quarter- will span quarter the width..twothird- will span two thirds of the width..third- will span one third of the width..fifth- will span a fifth..twofifth- will span two fifths..threefifth- will span three fifths..fourfifth- will span four fifths..sixth- will span one sixth..fivesixth- will span five sixths.
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 -
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 :
- body - used for all type that isn't otherwise assigned a font stack
- h1, h2,h3,h4,h5,h6 - a font stack common to all headings
- code, pre, var, samp - a monospaced font stack.
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 -
<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 -
<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.
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 -
<table class="plain" width="100%">
<caption>
iPhone Specifications
</caption>
<thead>
<tr>
<th> </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> </th>
<td>*Not Spcified</td>
<td> </td>
<td> </td>
<td> </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 -
<table class="datalist" width="100%">
<caption>
iPhone Specifications
</caption>
<thead>
<tr>
<th> </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> </th>
<td>*Not Spcified</td>
<td> </td>
<td> </td>
<td> </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>
User Experience
The User Experience module currently contains three different elements :
- Alert Boxes - a set of four styles for displaying clear visual alerts within your pages for errors, success messages, warnings and questions.
- Pagination - a set of classes designed to create a consistant styling of pagination buttons.
- 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 -
<div class="success">
<p>Your content goes here</p>
<div></div>
</div>
For a error box -
<div class="error">
<p>Your error message goes here</p>
<div></div>
</div>
For a warning box -
<div class="warning">
<p>Your warning message goes here</p>
<div></div>
</div>
For a question box -
<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 :
- Word
- Excel
- Powerpoint
- Video ( .wmv, .flv, .f4v, .mov, .rm, .avi, .mpg & .swf )
- Text ( .txt & .rtf )
- RSS
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&page=2">Next</a>
<a href="http://www.yoursite.com/pagename&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.)
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.