Using css frameworks

Using css frameworks

Yeah yeah, I know the drill, css frameworks are pointless, blah blah. Well, I'm always looking for a good way to cut a corner... I mean save some time. I've just started playing around with the 960 grid system and I have to say, for what it is, it's pretty damn nice.

It allows me to mock up a new theme very quickly, basically it uses either a 12 column (12 x 60 px, 10px margins) or 16 column layout (16 x 40 px, 10px margins), there's a simple way to clear floats on child divs and add extra column spacing before or after a column. I just whipped this quick little layout up in a matter of a couple minutes using the basic 960 framework and the included text and reset style sheets.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>960 Grid Test</title>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/960.css" />
<style type="text/css" media="all">
body 
{
    background: #234;
}
.container_16
{
    background: #fff url(img/16_col.gif) repeat-y;
}
p
{
    border: 1px solid #666;
    overflow: hidden;
    padding: 10px 0;
    text-align: center;
}

</style>
</head>
<body>
<div class="container_16">
    <!-- start header -->
    <div class="grid_8"><p>header #1 - 460px</p></div>
    <div class="grid_4"><p>header #2 - 220px </p></div>
    <div class="grid_4"><p>header #3 - 220px</p></div>
    <div class="clear"></div>
    <!-- end header -->
    
    <!-- start navigation -->
    <div id="navigation" class="grid_16"><p>Navigation - 940px</p></div>
    <div class="clear"></div>
    <!-- end navigation -->
    
    <!-- start left, main content -->
    <div class="grid_10">
        <div id="breadcrumb"><p>Breadcrumb menu - 580px</p></div>
        <div id="content"><p>Main content - 580px</p></div>
        <div class="clear"></div>
    </div>
    <!-- end left, main content -->

    <!-- start right column -->
    <div class="grid_6"><p>right column, 340px</p></div>
    <div class="clear"></div>
        <!-- end right column -->

    <!-- start footer -->
        <div class="grid_16"><p>footer - 940px</p></div>
    <div class="clear"></div>
        <!-- end footer -->
</div>
</body>
</html>

I can see the limits of this framework for sure, but thus far I'm impressed by the usefulness. We'll see how it goes with my next theme.

Tags

 

You might like

Comments

No comments have been posted to this page.

Comments are closed. No new comments allowed.

Copyleft 2002 - 2017 Matt Jones
Hand crafted with HTML5 & CSS3
↑ Back to top