Five simple steps to designing grid systems – Part 1. – July 4th, 2005 – 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. Starting with a blank canvas It’s always easier in these kinds of tutorials to put the example in context, in some kind of real world scenario. Subdividing ratios The grid system we are going to design is a simple symmetrical grid based on a continuous division of the paper size in the ratio 1:1414. This is one of the easiest ways to create a balanced grid. Diagrams kindly updated by Michael Spence Getting creative Many have said grid systems can stifle creativity, but I disagree.
So, we have our grid. Short but sweet. Grid Computing… and Design. The layout grid I used for Subtraction Six.5 was improvised and inconsistent — I hobbled it together without much consideration or foresight, more interested in getting something finished than building something that would continue to make sense as I got more and more serious about the writing I post here. Over time, by virtue of repeated use, I became increasingly and lamentably invested in its tremendous shortcomings.
When you make fairly liberal use of illustrations in your posts, you essentially wed yourself to the particulars of the CSS you’ve established, creating graphics of a certain width or ordering content in a particular method. It works in the short term, but it presents problems when you sit down to redesign. Boxed In By late this year, it pained me to know that I had written over three hundred posts that relied, in varying degrees, on that dodgy framework.
Below: Everybody fall in line. The Old Ways Are Dead. Blueprint: A CSS Framework | Spend your time innovating, not replicating. 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. That sounds nice, but how do we do that? There are a lot of articles on the internet blasting or supporting CSS frameworks, but none have any content to help inexperienced readers decide. This one is different. This article covers the entire prototyping process. Grid 960 works by using classes through inheritance. 60px140px220px300px380px460px540px620px700px780px860px940px Each width corresponds to a class name formed like this: grid_X where X is a number from the above list.
When creating a row in the grid, make sure all the child grid_X numbers add up to the number of columns you're using. Visualizing the design's grid is easy. After checking out the visual, you should understand how to create the mockup's grid. The skeleton is ready. The middle columns don't require any effects. A Detailed Look at the 960 CSS Framework.
CSS frameworks are bloated. CSS frameworks are for people who don't know how to code. CSS is too simple to implement a framework. If you've ever read a tutorial on a CSS framework, I can guarantee that many comments mimic the previous statements. My guess is that the majority of these comments are stemmed from slight ignorance. Once you take the opportunity to spend some time with 960, you'll be amazed at how much time can potentially be saved when developing your web applications. At the very least, take ten minutes to review the framework. Pros Rapidly speeds up development time. Cons It's named "960" for a reason. Usage Let's imagine that we want to work with the "12 column" structure to create the extremely simple layout seen below. Specifying an id here isn't required by any means. Grids Now we want to create a simple header and two column structure. I'm going to choose a header width of "940px" (+ 20px margins = 960), a sidebar width of "220px", and a main content width of "700px".
Fight Div-itis and Class-itis With the 960 Grid System. Years ago, HTML tables were the standard for laying out web pages. CSS and semantic thinking changed that, and today CSS frameworks make designing relatively easy. But they can also generate a surprising number of superfluous elements. The 960 Grid System encourages the addition of <div> elements and class attributes, especially on complicated pages. Is this really an improvement over nested tables? Creating cleaner code means going beyond the framework and thinking about what it really represents. CSS frameworks provide a workflow solution, namely a rapid deployment of grid-based web layouts. Before CSS saw widespread use, tables provided all the layout a web designer needed. As designers learned to use CSS, div elements replaced tables. The Spread of Class-itis and Div-itis Clear, lean code offers many advantages.
Other than the semantics, the great advantage of using <div>…</div> over <table><tr><td>…</td></tr></table> is that we end up with less code to do the same job. Solutions.