Grid System Generator » Grid system tutorials

Todd Nienkerk on Getting Started with the 960 Grid System

admin — Sun, 04 Apr 2010 12:58:30 +0000

Todd Nienkerk of Four Kitchens explains the concept of CSS grid systems and gives some tips on how to get started with working with the 960 grid system. He talks a bit about the 960 Grid System Drupal theme as developed by dvessel, who was actually able to get some of his content-first innovations ported back into the 960 framework. He also briefly mentions the 960 Gridder module that sets up a javascript overlay to verify that your design is properly lining up. He talks about the general trends of CSS grids and some specific resources that help with getting started on creating a grid-based design.

960 CSS Framework – Learn the Basics

admin — Sun, 05 Jul 2009 13:45:26 +0000

CSS frameworks have been here for some time. About the usefulness of these frameworks has been discussed for numerous times. Some say CSS isn’t advanced enough, others say these frameworks saved them many hours of developing time. We will not repeat this discussion here.

I have discovered CSS frameworks just a while back. After experimenting with the Malo CSS framework, the Blueprint framework and 960, I came to the conclusion I like the 960 CSS framework most.

This tutorial will explain the basics of this framework so you can start developing with 960 pretty fast.

1kb grid system – The Details

admin — Sun, 05 Jul 2009 13:33:29 +0000

Though simple, The 1KB CSS Grid packs the punch of a heavyweight. Nested rows? Piece of cake! A fluid grid rather than a fixed one? No problem! Explores some of the finer details of implementing the grid.

Using the 1kb grid system for templating

admin — Sun, 05 Jul 2009 13:32:16 +0000

When server-side options for templating and sub-templating are limited, the grid can be used as an alternative page templating engine. The 1KB CSS Grid’s convenient row and column syntax provide all the necessary scaffolding.

1kb grid introduction

admin — Sun, 05 Jul 2009 13:31:18 +0000

Other CSS frameworks try to do everything—grid system, style reset, basic typography, form styles. But complex systems are, well, complex. Looking for a simple, lightweight approach that doesn’t require a PhD? Meet The 1KB CSS Grid.

Golden grid introduction / tutorial

admin — Sun, 05 Jul 2009 13:17:52 +0000

For some time now I’m devoted completely to Web Grid Design. First I built Emastic then Malo and now The Golden Grid.

Emastic is a very complete CSS Framework integrating various CSS construction techniques like floats, absolute positioning, complete freedom of your default width, extra usability with em based grid system plus possibility of fluid columns and extra % based grid system and many more features. Then the question is why build another grid system.

I was searching for the prefect web grid, playing with golden proportions, rule of thirds, symmetry, asymmetry, usability, monitor proportions, typography and the result came spontaneous – The Golden Grid. Why not share it with you .

Golden grid mini tutorial

admin — Sun, 05 Jul 2009 13:16:03 +0000

The Golden Grid is a CSS based grid system.

There are two CSS systems called golden-base(golden.css) and golden-extend(reset.css, golden.css , typography.css)

Golden Base = min css reset + grid system

Golden Extend = complete css reset + grid system + typography

960 Grid System – A powerful CSS framework for building websites quickly

admin — Sun, 05 Jul 2009 13:08:17 +0000

CSS is beauty. Yes that is because it adds beauty to your roughly built html pages and texts. It is not harder to beautify a web page by using graphics, but sometimes graphics are expensive when we are talking about overall page load time.

There is always been a big war between CSS and tables. In simple words war between tables based html web pages and tables html web pages. Both of their own pros/cons but CSS make the things simple and better.

When we talk about building multiple column web pages by using table based code or CSS then float theory and floating the elements (columns) in their proper place is always a headache.

960 Grid systems will make these things simpler and cleaner. 960 Grid system is a CSS framework, very easy to use and flexible for making as many as 12 up to 16 column design.

960 basically have predefined Div sections and containers. You don’t need to worry about any floating problems. All you have to do is to use either 12 column container or 16 column container depending on your needs. Then make your own columns by using their grid classes.

A Closer Look At the Blueprint CSS Framework

admin — Sun, 05 Jul 2009 13:06:59 +0000

Blueprint is a CSS framework that can save you time and headaches when working on any project that involves HTML and CSS, whether it be with Rails, PHP, or just laying out an HTML page. In this tutorial you will get a look at the inner workings of Blueprint and we’ll take a look at demo application that uses Blueprint to get a better idea of how to use actually use the framework.

Which CSS Grid Framework Should You Use for Web Design?

admin — Sun, 05 Jul 2009 12:54:58 +0000

Ever wondered how all those slick “magazine” themes for WordPress and other platforms were created? Many, if not all, were designed using a CSS Grid Framework – at least in essence if not in actual fact. That is, you can use an existing CSS framework or build your own from scratch. While it’s possible to design complex web page layouts without a framework, it’s arguably an act in masochism. In this article you’ll get an overview of the current batch of Frameworks and which you should choose to use.