What is this?
A General Overview
A 12 Column 960 Grid
Based on Skeleton's stripped-down version of the 960 grid, it has 12 columns with semantic class labels such as:
- one-half
- one-third
- two-thirds
- one-fourth
- three-fourths
- one-fifth
- two-fifths
- three-fifths
- four-fifths
A Responsive Grid
Yes, it's responsive - go ahead and resize your browser. All of the math has been done for you in advance (it's actually quite simple). It uses two break points to target three screen sizes:
- Destop (960px fixed width with columns)
- Tablet (768px fixed width with columns)
- Mobile (767px and below fluid-width with no columns (stacked)
The Code
A Few Examples of How it Works
HTML:
<section>
<div class="row group">
<div class="twelve columnn">
<p>twelve column</p>
</div>
</div>
</section>
<section>
<div class="row group">
<div class="one-half column">
<p>one-half column</p>
</div>
<div class="one-half column">
<p>one-half column</p>
</div>
</div>
</section>
<section>
<div class="row group">
<div class="one column">
<p>one column</p>
</div>
<div class="eleven columns">
<p>eleven columns</p>
</div>
</div>
</section>
<section>
<div class="row group">
<div class="two columns">
<p>two columns</p>
</div>
<div class="ten columns">
<p>ten columns</p>
</div>
</div>
</section>
<section>
<div class="row group">
<div class="three columns">
<p>three columns</p>
</div>
<div class="nine columns">
<p>nine columns</p>
</div>
</div>
</section>
Etc...
CSS:
.container {
width: 960px;
margin: 0 auto;
}
.row {
margin: 1em 0;
}
.column, .columns {
float: left;
margin: 0 10px;
}
/* Base Grid */
.container .one.column,
.container .one.columns { width: 60px; }
.container .two.columns { width: 140px; }
.container .three.columns { width: 220px; }
.container .four.columns { width: 300px; }
.container .five.columns { width: 380px; }
.container .six.columns { width: 460px; }
.container .seven.columns { width: 540px; }
.container .eight.columns { width: 620px; }
.container .nine.columns { width: 700px; }
.container .ten.columns { width: 780px; }
.container .eleven.columns { width: 860px; }
.container .twelve.columns { width: 940px; }
Media Queries:
/* Desktop */
/* FIXED WIDTH (default 960 Grid) */
/* Tablet */
@media (min-width: 768px) and (max-width: 959px) {
/* FLUID w/ columns */
}
/* Mobile */
@media (max-width: 767px) {
/* FLUID w/o columns (stacked) */
}
Clearfix:
.group:after {
content: "";
display: table;
clear: both;
}