Nathan

Internet, Tips, Web Design

Web Design

Now you’re really spiced up to create your own site from scratch. Layouting is a real pain especially if you are just starting out. Even with experienced web designers, it’s still a chore, especially when you create multiple sites in weeks. Here’s the 960 Grid System to help.

The basic concept of this system is dividing the page into grids, either 12-column or 16-column. Recently, they have experimented on 24-column layouts as well.

Creating and styling nested divs and keeping track of their positions and margins is difficult enough. But I assure you that using the downloadable files from their site will make your life easier. Using the defined CSS files, you can easily create divs that span the number of columns you want, whether you want to place them on the left or right side of the screen. Here’s an example code:

<div class="container_12 clearfix">
<div class="grid_6 alpha"> left side content here </div>
<div class="grid_6 omega"> right side content here </div>
</div>

Using the code above results to a 2-column layout with 6 grids each. Pretty straightforward. The framework is versatile enough to handle multiple nests.

To see the 960 Grid System in action, here are sample sites:

• WooThemes
• Four Kitchens
• Onehub

You can also go to the 960 Grid System home page to view a more comprehensive demo and more sample sites. Their home page also features a grid site overlay to help you visualize how the grids are utilized in the featured sites.

I found this very useful in creating my new layout/template for Martian Footprints, which I will upload soon.

Related posts:

1. How to Use Custom Google Search in Wordpress Using a custom Google search in your Wordpress is easy...
2. Try Out Any Open Source CMS Before Use Creating a website, but unsure of the options out there?...
3. Create and Host Your Own Domain for Free in Less Than 10 Steps For personal sites, it's often not a priority to create...
4. Allow Wordpress Blogs to Update in Real-Time through PuSH/PubSubHubbub The PuSH protocol is gaining more and more recognition nowadays....
5. Guide on How and When to Use What Social Media With the growing number of social media sites out there,...

Related posts brought to you by Yet Another Related Posts Plugin.