CSS Grid systems/frameworks are a potentially divisive subject. Some designers swear by them, others swear at them. In a bid to minimize hate mail, I'm going to say I sit entirely on the fence. Whilst I can understand why some developers think they are superfluous and in certain instances create extraneous code, I can also appreciate their value for rapidly prototyping layouts.
Here are a few CSS frameworks that offer varying degrees of "responsive" support:
- Semantic (http://semantic.gs)
- Skeleton (http://getskeleton.com)
- Less Framework (http://lessframework.com)
- 1140 CSS Grid (http://cssgrid.net)
- Columnal (http://www.columnal.com)
Of these, I personally favor the Columnal grid system as it has a fluid grid built-in alongside media queries and also uses similar CSS classes as 960.gs, the popular fixed-width grid system that most developers and designers are familiar with.
Tip
Alpha, Omega, and other common grid classes
Many CSS grid systems use specific CSS classes to perform everyday layout tasks. The row and container classes are self-explanatory but there are often many more. Therefore, always check any grid system's documentation for any other classes that will make life easier. For example, other typical de facto classes used in CSS Grid systems are alpha and omega—for the first and last items in a row respectively (the alpha and omega classes remove padding or margin) and .col_x where x is the number for the amount of columns the item should span (for example, col_6 for six columns).
Let's suppose we hadn't already built our fluid grid, nor had we written any media queries. We're handed the original And the winner isn't... homepage composite PSD and told to get the basic layout structure up and running in HTML and CSS as quickly as possible. Let's see if the Columnal grid system will help us achieve that goal.
In our original PSD, it was easy to see the layout was based on 16 columns. The Columnal grid system however only supports up to 12 columns so let's overlay 12 columns over the PSD instead of the original 16:
Having downloaded Columnal and extracted the contents of the ZIP file, we'll duplicate the existing page and then link to columnal.css rather than main.css in the <head>. To create visual structure using Columnal, the key is in adding the correct div classes in the markup. Here is the full markup of the page up to this point:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>And the winner isn't…</title>
<script type="text/javascript">document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script>
<link href="css/columnal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<!-- the header and navigation -->
<div id="header">
<div id="logo">And the winner is<span>n't...</span></div>
<div id="navigation">
<ul>
<li><a href="#">Why?</a></li>
<li><a href="#">Synopsis</a></li>
<li><a href="#">Stills/Photos</a></li>
<li><a href="#">Videos/clips</a></li>
<li><a href="#">Quotes</a></li>
<li><a href="#">Quiz</a></li>
</ul>
</div>
</div>
<!-- the content -->
<div id="content">
<img class="oscarMain" src="img/oscar.png" alt="atwi_oscar" />
<h1>Every year <span>when I watch the Oscars I'm annoyed...</span></h1>
<p>that films like King Kong, Moulin Rouge and Munich get the statue whilst the real cinematic heroes lose out. Not very Hollywood is it?</p>
<p>We're here to put things right. </p>
<a href="#">these should have won »</a>
</div>
<!-- the sidebar -->
<div id="sidebar">
<div class="sideBlock unSung">
<h4>Unsung heroes...</h4>
<a href="#"><img src="img/midnightRun.jpg" alt="Midnight Run" /></a>
<a href="#"><img class="sideImage" src="img/wyattEarp.jpg" alt="Wyatt Earp" /></a>
</div>
<div class="sideBlock overHyped">
<h4>Overhyped nonsense...</h4>
<a href="#"><img src="img/moulinRouge.jpg" alt="Moulin Rouge" /></a>
<a href="#"><img src="img/kingKong.jpg" alt="King Kong" /></a>
</div>
</div>
<!-- the footer -->
<div id="footer">
<p>Note: our opinion is absolutely correct. You are wrong, even if you think you are right. That's a fact. Deal with it.</p>
</div>
</div>
</body>
</html>First of all, we need to specify that our #wrapper div is the container for all elements so we'll add the .container class to it:
<div id="wrapper" class="container">
Working down the page we can see that our
AND THE WINNER ISN'T text is the first row. Therefore, we'll add the.row class to that element:
<div id="header" class="row">
Our logo, although just text, sits within this row and spans the entire 12 columns. Therefore we'll add .col_12 to it:
<div id="logo" class="col_12">And the winner is<span>n't...</span></div>
Then the navigation is the next row so we'll add a .row class to that:
<div id="navigation" class="row">
And on the process goes, adding .row and .col_x classes as necessary. We'll jump ahead at this point, as I'm concerned the repetition of this process may have you nodding off. Instead, here is the entire amended markup. Note, it was also necessary to move the Oscar image and set it in its own column. Plus add a wrapping .row div around our #content and #sidebar.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <title>And the winner isn't…</title> <script type="text/javascript">document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script> <link href="css/columnal.css" rel="stylesheet" type="text/css" /> <link href="css/custom.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper" class="container"> <!-- the header and navigation --> <div id="header" class="row"> <div id="logo" class="col_12">And the winner is<span>n't...</span></div> <div id="navigation" class="row"> <ul> <li><a href="#">Why?</a></li> <li><a href="#">Synopsis</a></li> <li><a href="#">Stills/Photos</a></li> <li><a href="#">Videos/clips</a></li> <li><a href="#">Quotes</a></li> <li><a href="#">Quiz</a></li> </ul> </div> </div> <div class="row"> <!-- the content --> <div id="content" class="col_9 alpha omega"> <img class="oscarMain col_3" src="img/oscar.png" alt="atwi_oscar" /> <div class="col_6 omega"> <h1>Every year <span>when I watch the Oscars I'm annoyed...</span></h1> <p>that films like King Kong, Moulin Rouge and Munich get the statue whilst the real cinematic heroes lose out. Not very Hollywood is it?</p> <p>We're here to put things right. </p> <a href="#">these should have won »</a> </div> </div> <!-- the sidebar --> <div id="sidebar" class="col_3"> <div class="sideBlock unSung"> <h4>Unsung heroes...</h4> <a href="#"><img src="img/midnightRun.jpg" alt="Midnight Run" /></a> <a href="#"><img class="sideImage" src="img/wyattEarp.jpg" alt="Wyatt Earp" /></a> </div> <div class="sideBlock overHyped"> <h4>Overhyped nonsense...</h4> <a href="#"><img src="img/moulinRouge.jpg" alt="Moulin Rouge" /></a> <a href="#"><img src="img/kingKong.jpg" alt="King Kong" /></a> </div> </div> </div> <!-- the footer --> <div id="footer" class="row"> <p>Note: our opinion is absolutely correct. You are wrong, even if you think you are right. That's a fact. Deal with it.</p> </div> </div> </body> </html>
It was also necessary to add some extra CSS styles into a custom.css file. The content of this file is as follows:
#navigation ul li {
display: inline-block;
}
#content {
float: right;
}
#sidebar {
float: left;
}
.sideBlock {
width: 100%;
}
.sideBlock img {
max-width: 45%;
float:left;
}
.footer {
float: left;
}With these basic changes done, a quick look in the browser window shows that our basic structure is in place and scales with the browser viewport:
There's obviously a lot of detail work to still be done (I know, that's more than a slight understatement) but if you need a fast way of creating a basic responsive structure, CSS Grid systems such as Columnal are worthy of consideration.