960 grid system
Post on 05-Dec-2014
3.531 Views
Preview:
DESCRIPTION
TRANSCRIPT
the 960 grid systemEasy codes, complex layouts
What is it?
• Ready-made CSS file
• Make grid-based layouts within 960px
• Cross-browser compatible
• Three versions: 12-col, 16-col, 24-col
• No need to compute widths
How to get started• Create mock-up wireframes for your site,
using either 12, 16, or 24 columns
• Link the reset CSS file <link rel="stylesheet" href="css/reset.css" />
• Link the CSS file of the 960 grid <link rel="stylesheet" href="css/960.css" />
choose a container grid
<div class=“container_12”>
<div class=“container_16”>
use class names to give
column widths
<div class=“grid_12”>
<div class=“grid_11”>
<div class=“grid_2”>
<div class=“grid_7”>
<div class=“grid_4”>
use class names to give
column widths
<div class=“grid_12”>
<div class=“grid_11”>
<div class=“grid_2”>
<div class=“grid_7”>
<div class=“grid_4”>
use class names to give
column widths
<div class=“grid_12”>
<div class=“grid_11”>
<div class=“grid_2”>
<div class=“grid_7”>
<div class=“grid_4”>
use class names to give
column widths
<div class=“grid_12”>
<div class=“grid_11”>
<div class=“grid_2”>
<div class=“grid_7”>
<div class=“grid_4”>
use class names to give
column widths
<div class=“grid_12”>
<div class=“grid_11”>
<div class=“grid_2”>
<div class=“grid_7”>
<div class=“grid_4”>
use class names to give
column widths
<div class=“grid_12”>
<div class=“grid_11”>
<div class=“grid_2”>
<div class=“grid_7”>
<div class=“grid_4”>
use class names to give
column widths
<div class=“grid_12”>
<div class=“grid_11”>
<div class=“grid_2”>
<div class=“grid_7”>
<div class=“grid_4”>
use class names to give
column widths
<div class=“grid_12”>
<div class=“grid_11”>
<div class=“grid_2”>
<div class=“grid_7”>
<div class=“grid_4”>
use class names to give
column widths
<div class=“grid_12”>
<div class=“grid_11”>
<div class=“grid_2”>
<div class=“grid_7”>
<div class=“grid_4”>
use class names to give
column widths
<div class=“grid_12”>
<div class=“grid_11”>
<div class=“grid_2”>
<div class=“grid_7”>
<div class=“grid_4”>
use class names to give
column widths
<div class=“grid_12”>
<div class=“grid_11”>
<div class=“grid_2”>
<div class=“grid_7”>
<div class=“grid_4”>
use class names to give
column widths
<div class=“grid_12”>
<div class=“grid_11”>
<div class=“grid_2”>
<div class=“grid_7”>
<div class=“grid_4”>
use class names to give
column widths
<div class=“grid_12”>
<div class=“grid_11”>
<div class=“grid_2”>
<div class=“grid_7”>
<div class=“grid_4”>
use class names to give
column widths
<div class=“grid_12”>
<div class=“grid_11”>
<div class=“grid_2”>
<div class=“grid_7”>
<div class=“grid_4”>
use class names to give
column widths
<div class=“grid_12”>
<div class=“grid_11”>
<div class=“grid_2”>
<div class=“grid_7”>
<div class=“grid_4”>
use class names to give
column widths
<div class=“grid_12”>
<div class=“grid_11”>
<div class=“grid_2”>
<div class=“grid_7”>
<div class=“grid_4”>
use class names to give
column widths
<div class=“grid_12”>
<div class=“grid_11”>
<div class=“grid_2”>
<div class=“grid_7”>
<div class=“grid_4”>
use class names to give
column widths
<div class=“grid_12”>
<div class=“grid_11”>
<div class=“grid_2”>
<div class=“grid_7”>
<div class=“grid_4”>
use class names to give
column widths
<div class=“grid_12”>
<div class=“grid_11”>
<div class=“grid_2”>
<div class=“grid_7”>
<div class=“grid_4”>
use class names to give
column widths
<div class=“grid_12”>
<div class=“grid_11”>
<div class=“grid_2”>
<div class=“grid_7”>
<div class=“grid_4”>
use class names to give
column widths
<div class=“grid_12”>
<div class=“grid_11”>
<div class=“grid_2”>
<div class=“grid_7”>
<div class=“grid_4”>
ADD a CLEAR DIV after each row
<div class=“clear”>
<div class=“clear”>
move divs by pulling and pushing
<div class=“grid_3 pull_1”><div class=“grid_3 push_1”>
Add white spaces by using prefix/suffix
<div class=“grid_3 prefix_3”><div class=“grid_6 suffix_3”> OR
3-column space
Avoid double-margins using alpha/omega
Avoid double-margins using alpha/omega
<div class="grid_4"> <div class="grid_4"> <h1>4-‐col</h1> </div> <div class="grid_4"> <h1>4-‐col</h1> </div></div>
<div class="grid_5"> <div class="grid_3"> <h1>3-‐col</h1> </div> <div class="grid_2"> <h1>2-‐col</h1> </div> <div class="grid_1"> <h1>1-‐col</h1> </div> <div class="grid_4"> <h1>4-‐col</h1> </div></div>
<div class="grid_3"> <h1>3-‐col</h1></div>
Avoid double-margins using alpha/omega
<div class="grid_4"> <div class="grid_4"> <h1>4-‐col</h1> </div> <div class="grid_4"> <h1>4-‐col</h1> </div></div>
<div class="grid_5"> <div class="grid_3"> <h1>3-‐col</h1> </div> <div class="grid_2"> <h1>2-‐col</h1> </div> <div class="grid_1"> <h1>1-‐col</h1> </div> <div class="grid_4"> <h1>4-‐col</h1> </div></div>
<div class="grid_3"> <h1>3-‐col</h1></div>
Avoid double-margins using alpha/omega
<div class="grid_4"> <div class="grid_4"> <h1>4-‐col</h1> </div> <div class="grid_4"> <h1>4-‐col</h1> </div></div>
<div class="grid_5"> <div class="grid_3"> <h1>3-‐col</h1> </div> <div class="grid_2"> <h1>2-‐col</h1> </div> <div class="grid_1"> <h1>1-‐col</h1> </div> <div class="grid_4"> <h1>4-‐col</h1> </div></div>
<div class="grid_3"> <h1>3-‐col</h1></div>
Avoid double-margins using alpha/omega
<div class="grid_4"> <div class="grid_4"> <h1>4-‐col</h1> </div> <div class="grid_4"> <h1>4-‐col</h1> </div></div>
<div class="grid_5"> <div class="grid_3"> <h1>3-‐col</h1> </div> <div class="grid_2"> <h1>2-‐col</h1> </div> <div class="grid_1"> <h1>1-‐col</h1> </div> <div class="grid_4"> <h1>4-‐col</h1> </div></div>
<div class="grid_3"> <h1>3-‐col</h1></div>
double margins!!
Avoid double-margins using alpha/omega
<div class="grid_4"> <div class="grid_4 alpha omega"> <h1>4-‐col</h1> </div> <div class="grid_4 alpha omega"> <h1>4-‐col</h1> </div></div>
Avoid double-margins using alpha/omega
<div class="grid_4"> <div class="grid_4 alpha omega"> <h1>4-‐col</h1> </div> <div class="grid_4 alpha omega"> <h1>4-‐col</h1> </div></div>
Avoid double-margins using alpha/omega
<div class="grid_4"> <div class="grid_4 alpha omega"> <h1>4-‐col</h1> </div> <div class="grid_4 alpha omega"> <h1>4-‐col</h1> </div></div>
alpha:no left marginomega: no right margin
Avoid double-margins using alpha/omega
<div class="grid_5"> <div class="grid_3 alpha"> <h1>3-‐col</h1> </div> <div class="grid_2 omega"> <h1>2-‐col</h1> </div>
<div class="grid_1 alpha"> <h1>1-‐col</h1> </div> <div class="grid_4 omega"> <h1>4-‐col</h1> </div></div>
Avoid double-margins using alpha/omega
<div class="grid_5"> <div class="grid_3 alpha"> <h1>3-‐col</h1> </div> <div class="grid_2 omega"> <h1>2-‐col</h1> </div>
<div class="grid_1 alpha"> <h1>1-‐col</h1> </div> <div class="grid_4 omega"> <h1>4-‐col</h1> </div></div>
Avoid double-margins using alpha/omega
<div class="grid_5"> <div class="grid_3 alpha"> <h1>3-‐col</h1> </div> <div class="grid_2 omega"> <h1>2-‐col</h1> </div>
<div class="grid_1 alpha"> <h1>1-‐col</h1> </div> <div class="grid_4 omega"> <h1>4-‐col</h1> </div></div>
Avoid double-margins using alpha/omega
<div class="grid_5"> <div class="grid_3 alpha"> <h1>3-‐col</h1> </div> <div class="grid_2 omega"> <h1>2-‐col</h1> </div>
<div class="grid_1 alpha"> <h1>1-‐col</h1> </div> <div class="grid_4 omega"> <h1>4-‐col</h1> </div></div>
Avoid double-margins using alpha/omega
<div class="grid_5"> <div class="grid_3 alpha"> <h1>3-‐col</h1> </div> <div class="grid_2 omega"> <h1>2-‐col</h1> </div>
<div class="grid_1 alpha"> <h1>1-‐col</h1> </div> <div class="grid_4 omega"> <h1>4-‐col</h1> </div></div>
Avoid double-margins using alpha/omega
<div class="grid_5"> <div class="grid_3 alpha"> <h1>3-‐col</h1> </div> <div class="grid_2 omega"> <h1>2-‐col</h1> </div>
<div class="grid_1 alpha"> <h1>1-‐col</h1> </div> <div class="grid_4 omega"> <h1>4-‐col</h1> </div></div>
Avoid double-margins using alpha/omega
<div class="grid_5"> <div class="grid_3 alpha"> <h1>3-‐col</h1> </div> <div class="grid_2 omega"> <h1>2-‐col</h1> </div>
<div class="grid_1 alpha"> <h1>1-‐col</h1> </div> <div class="grid_4 omega"> <h1>4-‐col</h1> </div></div>
Avoid double-margins using alpha/omega
<div class="grid_5"> <div class="grid_3 alpha"> <h1>3-‐col</h1> </div> <div class="grid_2 omega"> <h1>2-‐col</h1> </div>
<div class="grid_1 alpha"> <h1>1-‐col</h1> </div> <div class="grid_4 omega"> <h1>4-‐col</h1> </div></div>
Avoid double-margins using alpha/omega
<div class="grid_5"> <div class="grid_3 alpha"> <h1>3-‐col</h1> </div> <div class="grid_2 omega"> <h1>2-‐col</h1> </div>
<div class="grid_1 alpha"> <h1>1-‐col</h1> </div> <div class="grid_4 omega"> <h1>4-‐col</h1> </div></div>
everything adds up
everything adds up• All row widths should always add up to its
container div
everything adds up• All row widths should always add up to its
container div• For a 12-col grid:
<div class=“grid_3 suffix_1”><div class=“grid_7”><div class=“grid_1”>
everything adds up• All row widths should always add up to its
container div• For a 12-col grid:
<div class=“grid_3 suffix_1”><div class=“grid_7”><div class=“grid_1”>
3+1+7+1=12
everything adds up• All row widths should always add up to its
container div• For a 12-col grid:
<div class=“grid_3 suffix_1”><div class=“grid_7”><div class=“grid_1”>
• For a 16-col grid:<div class=“grid_5”><div class=“grid_2 prefix_1”><div class=“grid_2 prefix_1”><div class=“grid_2”><div class=“grid_3”>
3+1+7+1=12
everything adds up• All row widths should always add up to its
container div• For a 12-col grid:
<div class=“grid_3 suffix_1”><div class=“grid_7”><div class=“grid_1”>
• For a 16-col grid:<div class=“grid_5”><div class=“grid_2 prefix_1”><div class=“grid_2 prefix_1”><div class=“grid_2”><div class=“grid_3”>
3+1+7+1=12
5+2+1+2+1+2+3
=16
REVIEW 960• Link your HTML to the 960 CSS files
• Choose your container grid type<div class=“container_12”>
• Add widths to your divs using grid<div class=“grid_5”> <div class=“grid_12”>
• Use clear divs after each row<div class=“clear”>
REVIEW 960• Move divs using push and pull
<div class=“grid_5 push_2”><div class=“grid_7 pull_1”>
• Add white space using prefix and suffix<div class=“grid_11 prefix_1”><div class=“grid_9 suffix_3”>
• Remove margins using alpha and omega<div class=“grid_6 alpha”><div class=“grid_3 omega”>
Speedtest 01
<!-‐-‐ CONTAINER -‐-‐><div class="container_16">
Speedtest 02
<!-‐-‐ SIDEBAR -‐-‐><div class="grid_4">
<!-‐-‐ ALL CONTENT -‐-‐><div class="grid_12">
Speedtest 03
div.container_16{background:#CCCCCC;}
Speedtest 04
<!-‐-‐ PHOTO -‐-‐><div class="grid_4 prefix_8 alpha omega">
Speedtest 05<!-‐-‐ SUB1 -‐-‐><div class="grid_4 alpha">
<!-‐-‐ SUB2 -‐-‐><div class="grid_4">
<!-‐-‐ SUB3 -‐-‐><div class="grid_4 omega">
top related