What is this?
A General Overview
A 16 Column 960 Grid
Based on Skeleton's stripped-down version of the 960 grid, it has 16 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="sixteen columnn">
<p>sixteen 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="fifteen columns">
<p>fifteen columns</p>
</div>
</div>
</section>
<section>
<div class="row group">
<div class="two columns">
<p>two columns</p>
</div>
<div class="fourteen columns">
<p>fourteen columns</p>
</div>
</div>
</section>
<section>
<div class="row group">
<div class="three columns">
<p>three columns</p>
</div>
<div class="thirteen columns">
<p>thirteen columns</p>
</div>
</div>
</section>
Etc...
CSS:
.container {
width: 960px;
margin: 0 auto;
}
.row {
margin: 1em 0;
}
.column, .columns {
float: left;
margin: 0 10px;
}
.container .one.column,
.container .one.columns { width: 40px; }
.container .two.columns { width: 100px; }
.container .three.columns { width: 160px; }
.container .four.columns { width: 220px; }
.container .five.columns { width: 280px; }
.container .six.columns { width: 340px; }
.container .seven.columns { width: 400px; }
.container .eight.columns { width: 460px; }
.container .nine.columns { width: 520px; }
.container .ten.columns { width: 580px; }
.container .eleven.columns { width: 640px; }
.container .twelve.columns { width: 700px; }
.container .thirteen.columns { width: 760px; }
.container .fourteen.columns { width: 820px; }
.container .fifteen.columns { width: 880px; }
.container .sixteen.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;
}