tripwire magazine

In this article tripwire magazine presents a large collection of CSS Grid Systems, online generators and tutorial on how to use these in your design. Using a CSS Grid System is really worth considering if you’re planning to create a complex magazine web design. This article will give you the overview and tools you need to get started.

Introduction

Cascading Style Sheets (CSS) is used to describe the presentation of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document.

Cascading Style Sheets offer significant advantages compared to the other option available – table-layouts. First of all CSS provides a strict separation between layout, design of the page, and the information, presented on the page. This means that the layout of all pages in a website can be changed at one by editing style definitions in one .css-file that all the web pages link to. The separation of layout and information also means that loading different .css files with the same content pages one can completely change the aspect of the site, making it perfectly suitable for immediate user needs fx. screen, printing or mobile devices.

While CSS may offer many advantages and gives the developer very high level of control of the layout it is still quite hard to implement complex designs correctly and fast from bottom up and without having experience and good tool support. This is where this article comes in handy and provides you with the tools and tutorials needed. Lets start with an overview of the Grid Systems available.

Grid Systems

Layout grids have been used in print publishing long before the Web ever existed. Grids are the invisible foundation used to achieve visual cohesion in magazine and newspaper page design and layout. Grids offer an effective design approach for layouts and assist in communicating main messages clearly to the reader. They created ordered hierarchies, proportional relationships, and clear visual paths for the eye to travel. The same concept has been adapted for web page design for much the same reason, using CSS (Cascading StyleSheets) code to position HTML elements.

Regardless, of whether you use CSS grids for prototyping or production systems, there are multiple benefits:

• Grids provide uniformity and consistency in placement of HTML elements
• They more or less liminates the need to use nested HTML tables.
• Gives visual design cohesion between page elements.
• Nested sub-grids, for very complex designs that are relatively simple to produce.
• Easier to apply the “rule of thirds” and the “golden section” to design, which results in a visually appealing layout to most human eyes.
• Easier to apply images and text callouts to produce asymmetric layouts for visual texture.
• Reduced future effort if you need to reposition elements or change rendering characteristics (typography, margins, etc.) for related elements en masse.
• Cross-browser support, so less screaming and hair pulling when you get around to testing for that bane of designers, IE. (Bill Gates must have felt so unloved as a child to have produced so much software that does what it wants, in defiance of standards that MSFT supposedly supports.)
• Reduced effort for producing slicker web page layouts, compared to coding the necessary CSS from scratch.

Blueprint: A CSS Framework

Blueprint includes a CSS reset that eliminates the discrepancies across different browsers. There are a lot of external tools and templates to aid your web development with Blueprint. See some live Demos

960 Grid System

CSS Framework that worth a look. The download includes templates for Fireworks, Photoshops, Inkscape and etc. so that you can start designing your web template immediately. The PSD file that comes with guides ready save designers a lot of time.

Tripoli Framework

Tripoli had been tested and supports virtually all available browsers, including IE5! It comes with some base files, and some plugins such as “Layout”, “Visual”, “Type”, and “Negative”. Tripoli completly resets all default browser standards and rebuilds them quietly with modern web development in mind.

Tripoli is not a CSS framework. It doesn’t tell you how to code your web site. Instead, it forms a solid HTML rendering engine and a base for creating dynamic layouts without interfering with typographic measurements.

YAML – Yet Another Multicolumn Layout

YAML is another bulletproof CSS Framework that has a very good documentation. You can easily get started by downloading the PDF documentation and the sample project from the official site. There are some tools that will help you on your development too. For example, the YAML Builder can visually create YAML-based CSS layouts.

BlueTrip

BlueTrip is a full featured and beautiful framework that combines advantages from different CSS Framework. The official site has a complete Documentation and Demos.

YUI Grid CSS

YUI Grids CSS support fluid-width layouts as well as fixed-width layouts. This is the advantage of YUI Grids CSS over the other CSS Frameworks. To get started with YUI Grids CSS, you can download the cheat sheet and YUI Grids Builder from the official site.

Elastic CSS Framework

Elastic provides a declarative language to define the layout structure and behavior. This is a young framework, and the best site to demo the usage of Elastic is the official site itself. The Elastic CSS Framework has a lot of classes and helpers that will aid in the process of webdesign.

SenCSS

SenCSS doesn’t include a layout system, but it does provide other things such as baseline, fonts, paddings, margins and more. It comes with a commented version and a minified version which suitable for production use.

The Golden Grid

The Golden Grid is a web grid system. It ’s a product of the search for the perfect modern grid system. It ’s meant to be a CSS tool for grid based web sites.

Content With Style

This is a fixed width layout and the zip files contains a few layouts such as vertical navigation with 1 content column, vertical navigation with 2 content columns, and etc.

CSS-boilerplate

As one of the original authors of Blueprint CSS I’ve decided to re-factor my ideas into a stripped down framework which provides the bare essentials to begin any project. This framework will be lite and strive not to suggest un-semantic naming conventions. You’re the designer and your craft is important.

Typogridphy

Typogridphy is a CSS framework constructed to allow web designers and front-end developers to quickly code typograhically pleasing grid layouts.

Based on the popular 960 Grid System, Typogridphy allows you to create grid layouts which are versatile and great looking. Typogridphy is made of fully validate, semantic and strict xHTML, and validate CSS.

Logicss

The Logic CSS framework is a collection of CSS files and a toolset designed to cut development times for web-standards compliant web layouts and templates.

• Common cross-browser rendering behavior approach (not a reset).
• Beautiful font stacks.
• Typography with text resizing capabilities and vertical baseline/rhythm.
• Three totally flexible layout grid templates, customizable with the toolset.
  • Elastic layout using EMs.
  • Liquid layout with percentages.
  • Fixed layout using pixel dimensions.

Grid and CSS Generators

Grid Designer 2.6b

This tool enables you to create a grid by specifying the number of columns and the widths of the columns, gutters and margins. You can also specify typography in the same tool and export the final CSS and (X)HTML markup. You can also bookmark your grid and typography settings and create designs with spanning columns. Created by Rasmus Schultz.

YUI CSS Grid Builder

YAML Builder

Gridnator

I haven’t investigated this tool in detail yet but it looks really cool.

Grid Generator by netProtozo

Grid Generator Use it to design a layout structure, specifying column, margin and gutter sizes, all referencing a core unit (in pixels). The resulting css is then ready for use in your next html layout.

Grid System Generator

The grid system generator will create fixed grid systems in valid css / xhtml for rapid prototyping, development and production environments.

In addition to the css framework, it creates a background file (sample) that you can use in Fireworks, Illustrator, OmniGraffle, Photoshop, Visio (etc.) to aid in prototyping and design.

Grid Generator by DesignByGrid

Use this tool to create grids in PNG format.

Grid Layout Generator by Pagecolumn

Blueprint Grid CSS Generator

This tool will help you generate more flexible versions of Blueprint’s grid.css and compressed.css and grid.png files. Whether you prefer 8, 10,16 or 24 columns in your design, this generator now enables you that flexibility with Blueprint.

Fisheye

Variable Grid System

CSS Source Ordered Variable Border 1-3 Columned Page Maker

CSSFly

CSSFly is a web 2.0 tool for easy editing websites direct and in real-time in your browser. Simply edit the (X)HTML-code and the external Style-Sheet files : what you code is what you get! This tool is designed for developers. Use it for developing, testing or checking your web-project or take a look behind the scenerys of your favourite websites.

gridfox

GridFox is a Firefox extension that overlays a grid on any website. If you can open it in Firefox, you can put a grid on top of it. It’s easy to customize, allowing you to create the exact grid you designed your layout around.

Constructyourcss.com

Construct, a visual layout editor based on Blueprint & jQuery!

Tutorials and tips

Prototype a Magazine-Style Home Page Template with the Blueprint CSS Framework

When Collis launched this site and asked readers for tutorial requests, a common one was for a “magazine themes” how-to for blog platforms. This tutorial focuses on the first part of the process: applying a CSS grid to the design to prototype a home page template.

Prototyping With The Grid 960 CSS Framework

Grid 960 is a CSS Framework that enables developers to rapidly prototype designs. They are excellent tools for creating mock ups. Why? Because they do all the heavy lifting allowing you to get faster results.

Build a Newspaper Theme With WP_Query and the 960 CSS Framework

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!

thegridsystem

Absolute Positioning Inside Relative Positioning

A page element with relative positioning gives you the control to absolutely position children elements inside of it.

To some, this is obvious. To others, this may be one of those CSS “Ah-ha!” Moments. I remember it being a big deal for me when I first “got it”.

CSS Grid Positioning Module Level 3

This module describes integration of grid-based layout (similar to the grids traditionally used in books and newspapers) with CSS sizing and positioning.

Grid Design Basics – Grids for web page layouts

Since tables were co-opted for layout purposes, columns have become key to many Web design layouts, and this thinking continued when CSS took over from tables (at least in the minds of savvy designers) for Web-page presentation. However, other fields of layout design don’t think in arbitrary columns, they work with grids, and these form the basis for the structure of page designs. This article will provide the lowdown on grid design for Web pages.

Grid-Based Design 101

The grid serves as the framework for page layout. It divides the page horizontally and vertically into columns and rows which work to order the elements of the design. The text and images used on the page fit into place and align with one another according to the grid. The lines of the grid themselves are not necessarily visible (although in some designs they are) but they are used by the designer to create the proper width and height of elements to align the page.

Grid-based Layout

A grid is a technique that comes from print design but easily be applied to web design as well. In its strictest form a grid is literally a grid of X by Y pixels. The elements on the page are then placed on the cell border lines and overall aligned on horizontal and vertical lines.

Designing Grid Systems For Flash

the process of creating a grid for a Flash based site that will work for screen resolutions of 1024×768 and up. The beauty of creating a grid for Flash is that you can create a fixed grid and don’t have to be concerned with the user changing type sizes and screwing up the entire grid of the site. The only time you have to be concerned with a fixed grid is if you build a Flash site where the contents of the site repositions based on the size of the browser window, in which case you would have to figure out a fluid grid which is something I haven’t done yet but plan to do in the future.

Grids: Order Out of Chaos

Invisible Structures: When and Why to Use Grids in Page Layout. Many of the pages that you see everyday have a grid. You may not see it but it is there, holding up the design, establishing structure, guiding the page elements.

Five simple steps to designing grid systems – Part 1

The first part of this Five Simple Steps series is taking some of the points discussed in the preface and putting it to practice.

Ratios are at the core of any well designed grid system. Sometimes those ratios are rational, such as 1:2 or 2:3, others are irrational such as the 1:1.414 (the proportion of A4). This first part is about how to combine those ratios to create simple, balanced grids which in turn will help you create harmonious compositions.

Five simple steps to designing grid systems – Part 2

one of this Simple Steps series I talked about how to use a simple ratio, that of the paper size you are using, to create a symmetrical grid on which to create your designs. This, the second part in the series, will deal with other ratios and how they can be combined to create more complex grid systems.

Five simple steps to designing grid systems – Part 3

The third installment to this series is going to be a little different. The previous installments have been talking through some of the basics of grid construction using ratios as the primary device.

Five simple steps to designing grid systems – Part 4

For the purposes of this article, I’m going to be focussing on the theory of creating the grid rather than the implementation. I did mention in the last series that I would cover implementation using CSS, well I’m not going to.

Five simple steps to designing grid systems – Part 5

Flexible vs Fixed. Which one to choose? Why choose one over the other? Well you won’t find the answers to those questions here. What I’m aiming to do with this article is to investigate how the theory of grid design can be applied to a flexible web page.

Design A Fresh Blog Theme On The 960 Grid

Grid-Based Design: Six Creative Column Techniques

One of the new trends among web designers has to be grid design. While grid design is a simple concept, there are now so many tools and ways of doing it that it might get confusing for newcomers. So here is my way of doing things, i.e. how I would explain grid design to someone who’s never heard about it.

Typographic Grid

This is not a “framework” or anything, I was just screwing around with typography and getting things to line up according to a strict horizontal and vertical grid. It is inspired by the Compose to a Vertical Rhythm article by Richard Rutter a few years ago, except uses unitless line height.

GridControl: A Grid Overlay System for Design Development

transparent grid paper we could lay right over the screen. We can do that. The tools are easy: repeating transparent PNG with lines, page element the size of the entire screen, some magic to turn it on and off at will. Let’s give ourselves some options and provide the user with the option of vertical lines, horizontal lines, or both.

Hacking Technique: Yahoo’s Grid System (Part 1)

“And what Yahoo! UI CSS Grid has to do with us? Well, I tried to integrate Yahoo! Grid into Blogger Beta, and the result was sweet. By injecting some additional CSS code and some div tags into the simplified version of the Beta template, one can rearrange one’s layout without any CSS knowledge. This article will show you how to do that.”

Hacking Technique: Yahoo’s Grid System (Part 2)

In this post, I get into some technical details, and it also serves as a note for myself in finding interesting things about the Yahoo! CSS Grid system. Read on if you curious on how 3, 4, or 5 columns can be achieved.

Related posts

1. 75+ Awesome Font and Typography Tools, Tutorials, Generators and Inspiration Typography and Font are really essential elements of good...
2. 10 Essential On-line Generators for Designers Inventing the wheel every time you need a ride...
3. 155+ Mega CSS Roundup of Tools, Tutorials, Cheat Sheets etc. In this article you will get access to one...
4. Hand Picked Photoshop Web Design Tutorials to Sharpen Your Skills Tutorials on how to create Web designs in tools...
5. 50+ Online CSS Tools for Web Developers and Designers For web developers and designers CSS is like a...

Please remember to share this post!