Website Design Tools – 978.GS

Exploring further into the wonderful world of web page designs, i find that more work has been expended by Stephen Bau based on the 960.GS system of Nathan Smith. Sorry cannot find any further references to Stephen’s original GS 978 page, though there is an old link from the Web Designer’s Wall about the limitations of the 960.GS structure. Read more here.

The home page of the later design tool is http://978.gs/and you will find a tidy entry point into this design tool. It looks like this:

Home Page for 978.GS
Home Page for 978.GS

From here, we can hit the download button to choose a grid system that matches our requirements, or those of our target audience and their display device.

I’ve also found 978.GS to be more simple to code as you can see below. Because the gutter widths are more generous at 30px between columns and an overall increase of a further 38px in content width, the result is more pleasing to the eye than 960.GS. Also a bonus is the simpler HTML markup that no longer needs the alpha and omega class attributes to identify the first and final column of each row. One added declaration is needed on the first column, where the ‘first’ class designation serves to identify the start of a new row.  Here is a test, doing some sample column layouts.

Test Page Using 978.GS Grid System
Test Page Using 978.GS Grid System
/*
	978 Grid System ~ Core CSS.
	Learn more ~ http://960.gs/

	Licensed under GPL and MIT.

	Use in place of the gs960 grid to allow 30px gutters plus an additional   38px of content. There is no need for containers. The only requirement is that
the first grid of a new line will have class= .first
*/

.d1 {background: #E14678;}
.d2 {background: #0EFEBF;}
.d3 {background: #00F;}
.d4 {background: #fff;}

.container {
	width: 978px;
	margin: 0 auto;
}
.grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10, .grid11 {
	float: left;
	margin-left: 30px;
}
.grid1 {
	width: 54px;
}
.grid2 {
	width: 138px;
}
.grid3 {
	width: 222px;
}
.grid4 {
	width: 306px;
}
.grid5 {
	width: 390px;
}
.grid6 {
	width: 474px;
}
.grid7 {
	width: 558px;
}
.grid8 {
	width: 642px;
}
.grid9 {
	width: 726px;
}
.grid10 {
	width: 810px;
}
.grid11 {
	width: 894px;
}
.first {
	margin-left: 0;
	clear: left;
}

The CSS for this test is shown above. The HTML for the test page follows :

<!doctype html>
<html>
<head>
	<title>Test Page using GS978 Grid</title>
	<link rel="stylesheet" href="gs978.css" type="text/css" media="screen" />
</head>
<body>
<div class="container d4">
	<header class="grid11 first d2">
		<h1>HTML5 + CSS3 Test in a GS978 px Grid</h1>
	</header>

<div class="grid4 first d3">
This is the first column of this row. So i have declared a class of .first and a grid of .grid4.
For this example :
<code><pre><div class="grid4 first"></pre></code>
</div>
	<section id="intro" class="grid4 d2">
		<!-- Introduction -->
		<p>This is the introduction section. It shows how to use the gs978.css features.</p>
	</section>

<div class="grid11 first d1">
	<section>
		<!-- Main content area -->
		<div id="content">
			<div id="mainContent">
				<section>
				This test page uses the less complex gs978 grid rather than the
gs960 grid system. It  is simpler as it allows a 30px gutter and a 38px additional content.
The first column for a row must have a .first class. So
<code><pre>
<footer class="grid11 first">
		<p>This is a footer line</p>
</footer>
</pre></code>
				</section>
				<section id="comments">
					<!-- Comments -->
				</section>
				<form>
					<!-- Comment form -->
				</form>
			</div>
			<aside>
				<!-- Sidebar -->
			</aside>
		</div>

	</section>

	<aside>
		<!-- Sidebar -->
		<p><a href="http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/">Read This Tutorial on HTML5</a></p>
		<p><a href="http://www.css3.info/preview/multiple-backgrounds/">Multiple Background images tutorial</a></p>
	</aside>
</div>

	<footer class="grid11 first d3">
		<p>This is a footer line</p>
	</footer>
</div>

</body>
</html>

Note that i’ve made four extra class declarations for the color aspects, so we can see where the boundaries of each column are drawn. The first DIV has a ‘container’ class which effectively holds the whole of this web page’s contents. Everything content-wise will be placed within this DIV, of course nothing would stop us from writing extra markup after the final DIV.

Remember that since i’m writing up HTML5 markup, the HEADER declaration acts as a large text placement point. The class on this element is declared as ‘grid11’ plus ‘first’ since the HEADER markup is the initial column on the row. This is the only column so a ‘grid11’ class forces this element to span the entire 894px width of the page.

The next row of the page starts at DIV class=”grid4 first d3″. This column effectively spans four columns and is the first column of this row and is colored ‘d3’

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s