Grid System Generator » Tutorials

Popular CSS Frameworks + Tutorials & Tools for Getting Started

admin — Thu, 09 Jul 2009 10:44:26 +0000

CSS frameworks have grown in popularity recently, enabling developers to rapidly prototype designs. The idea of CSS Frameworks is to do all the heavy lifting of the repetitive tasks you do over and over again on each site, allowing you to get faster results and get to the fun stuff designers love.

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.

Build a Newspaper Theme With WP_Query and the 960 CSS Framework

admin — Sun, 05 Jul 2009 12:52:30 +0000

WP_Query is a powerful tool to control what comes out of your loop. Today I’m going to teach you all how to use it to make a 3 columned newspaper theme that has all your main blog posts in the main column, and off to the side a set of posts with a certain category. We’ll be using the 960 CSS framework for the basic layout and reset of our theme, it will chop a lot of work off what’s needed!