Site Blog - Design
03
Feb  OverviewThe 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem (source http://960.gs) In addition to this I need to say that you can use this great grid system not only with 12 or 16 columns grid. You can also create your own grid based on 18, 20, 22, 24 ... XX columns. The point of 960px is that it subdivides nicely into lots of equal column sizes so is a very versatile width. It also happens to be slightly less than the minimum width you can actually use when a browser is maximized on a 1024 pixel wide display. As you might have heard, we've already created an e107 theme Blue City using this great concept. In this blog post I'll try to explain you how to use 960 Grid System in your e107 themes. All modern monitors support at least 1024 × 768 pixel resolution. 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly flexible base number to work with. Why using a grid sytem?The answer is very simple. It saves time when writing your HTML and CSS code and is easy to use. It is also very useful in creating the graphic design for your theme. ToolsYou can use various tools in your theme creation process.
Graphic DesignWell I'm not a guru in creating graphic concepts, because we have one of the best designers in e107 (and not only e107) Stoewarius, nevertheless I'll show you how to use 960 Grid System in your graphic design. I my all day work I prefer to use Adobe Fireworks for slicing but you can also us Adobe Photoshop. Go to http://960.gs and download the template package.  Inside this package you can find useful templates for your preferred graphic software. I'll use the 12 column one for Fireworks. Browse the package to /templates/fireworks and open 960_grid_12_col.png. As you can see there are 12 red columns and this is your working grid. Every column is 60px wide with 10px left and 10px right margin. The whole width is 960px and the real content width is 940px.  With this template you can easy create you layout. Let say you need in your header logo and banner areas, left column, center column and two menu areas after the header area. I'll not create a real design for a theme, I'll only show you how to use this grid system for your layout.  Using 960.cssThe ZIP you've already downloaded (download again) comes with a lot of stuff to help you design with the 960 system, including PDF grid paper, templates for Fireworks, OmniGraffle, Photoshop, Visio, and CSS framework with demo HTML. We'll only used the CSS files, which is all you need for coding your site. The system comes with 3 CSS files.
960.css uses the following classes to structure the page:
There are lot of tutorials over the web on how to combine and use all this classes. 960 in actionNow it is a time to start creating your first 960gs based theme. Copy 960.css to your theme folder. Open theme.php and add these lines to the theme_head function.
function theme_head() {
echo '
<link rel="stylesheet" href="'.THEME_ABS.'960.css" type="text/css" media="all" />
';
}
Because theme_head function will load after the main style.css file we need to put the contents of reset.css at the top of your style.css. Copy the code from reset.css and paste it to the top of style.css The last step is to create your $HEADER and $FOOTER. You can easy create your HTML code for the layout without any line of CSS code. Everthing is don by 960.css. //In the code below remove the empty space after the " { " (left curly brace )
$HEADER = '
<div class="container_12 clearfix">
<!-- HEADER BOF -->
<div class="grid_5">
<!-- Add your LOGO and SITENAME content here -->
</div>
<div class="grid_7">
<!-- Add your BANNER SHORCODE here -->
</div>
<div class="clear"></div>
<!-- HEADER EOF -->
<!-- AREA 2 BOF -->
<div class="grid_6">
{ SETSTYLE=menu_area}
{ MENU=2}
</div>
<!-- AREA 2 EOF -->
<!-- AREA 3 BOF -->
<div class="grid_6">
{ SETSTYLE=menu_area}
{ MENU=3}
</div>
<!-- AREA 3 EOF -->
<div class="clear"></div>
<!-- AREA 1 BOF -->
<div class="grid_4">
{ SETSTYLE=menu_area}
{ MENU=1}
</div>
<!-- AREA 1 EOF -->
<!-- MAIN CONTENT BOF -->
<div class="grid_8">
{ SETSTYLE=center}
';
$FOOTER = '
</div>
<!-- MAIN CONTENT EOF -->
<div class="clear"></div>
<!-- FOOTER BOF -->
<div class="grid_12">
<!-- Add your footer content here -->
</div>
<div class="clear"></div>
<!-- FOOTER EOF -->
</div>
';
As you can see your layout is done by these few lines. The only thing you need to remember is that you always need to add DIV with class CLEAR after every grid column combination. Every grid_xx is floated to the left and you need to clear these floats to start a new "row" with columns. I hope this post was helpful. Just try 960.gs and you'll find how easy to use is this grid system and how many time you'll save when writing your code. Happy coding !!! Showing posts 1 to 1 from 1 |
Blog categories |
Member Login
|
|
