Semantic Grid Systems, or “The .gs Domain Finally Becomes Useful”
I cannot, unfortunately, claim credit for the following Thing of Beauty (TM).
When Tyler Tate first released the 1KB CSS Grid system, I fell in love with his code. Unlike the other grid frameworks I’d encountered up until that point, the 1KB CSS Grid gave me just one thing. A grid.
It didn’t try to style my text for me, or my forms. It didn’t try to give me lots of handy button styles or anything else, really. It was a grid. And it introduced me to the concept of overflow: hidden as a float-clearing technique.
It revolutionized the way I wrote code, by giving me just enough structure to make my life easier, without making me re-write or delete a bunch of code every time I wanted to start a new project.
Then, as I decided I wanted to try different things, the Grid System Generator allowed me to expand on the original concept, and bring more variety into my work.
Then Ethan Marcotte wrote a book, and life became more complicated. Yes, I’m totally blaming Ethan for this.
The simplistic and beautiful 1KB CSS Grid became semi-obsolete, as elastic layouts became all the rage. Oh, it’s still useful enough if you make websites that use multiple fixed layouts, there’s no denying that. Still…
Now Tyler has outdone himself. He’s released Semantic.gs, a LESS-CSS-based framework that takes all of the best things about the 1KB CSS Grid (its sheer simplicity, especially), and adds extra features like fluid and elastic layouts.
Now I could go on describing the benefits… but allow me to give you an example.
If you combine this:
<div class="center">
<header>Page Header</header>
<section>Page Content
<ul>
<li>Nest</li>
<li>Nest</li>
<li>Nest</li>
<li>Nest</li>
<li>Nest</li>
<li>Nest</li>
<li>Nest</li>
<li>Nest</li>
<li>Nest</li>
</ul>
</section>
<aside>Page Aside</aside>
<footer>Page Footer</footer>
</div>
With this:
@import 'css/reset.less';
@import 'css/grid.less';
//////////
// GRID //
//////////
// Specify the number of columns and set column and gutter widths
@columns: 12;
@column-width: 60;
@gutter-width: 40;
// Remove the definition below for a pixel-based layout
@total-width: 100%;
div.center {
max-width: 1200px;
min-width: 720px;
margin: 0 auto;
overflow: hidden;
}
header, section, aside, footer {
padding-top: 36px;
padding-bottom: 36px;
text-align: center;
background: #f3f3f3;
}
header {
.column(12);
margin-bottom: 24px;
}
section {
.column(8);
}
section ul {
margin-top: 24px;
}
section li {
.column(6);
padding-top: 24px;
padding-bottom: 24px;
margin-top: 24px;
background: #414141;
}
aside {
.column(4);
}
footer {
.column(12);
margin-top: 24px;
}
You get this: See example here…
As I’m sure you can guess, the above example didn’t take me too long to make. Now to juuuust get it working in WordPress…