CSS Systems, a new term that to define a top-down approach to architecting a site’s CSS.

A CSS System is a reusable set of content-oriented markup patterns and associated CSS created to express a site’s individual design. It is the end result of a process that emphasizes up-front planning, loose coupling between CSS and markup, pre-empting browser bugs and overall robustness. It also incorporates a shared vocabulary for developers to communicate the intent of the code.

Read full article

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.

Read full article

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.

Read full article

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.

Read full article

What is a CSS Grid Framework?

Layout grids have been used in print publishing long before the Web. They’re an invisible foundation used to achieve visual cohesion in magazine and newspaper page design and layout. They essentially amount to a lattice that divides horizontal and vertical space in consistent units where text, headlines, images, and advertising can be placed.

The same concept has been adapted for web page design for much the same reason, using CSS (Cascading StyleSheets) code to position HTML elements. In fact, many editorial sites run by large print media publishers do apply grids to achieve a look on their websites that’s similar to their print content. Note that the vertical axis is not as well supported in CSS Grid systems, since a web page’s height is not as much of an issue as for a printed page. (Still, that’s a minor issue in web page design, unless you expect the same features as with Desktop Publishing – aka DTP – systems, which is difficult to support without a PostScript-like language for browsers to implement and support.)

Read full article

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.

Read full article

The main idea behind grid-based designs is a solid visual and structural balance of web-sites you can create with them. Sophisticated layout structures offer more flexibility and enhance the visual experience of visitors. In fact, users can easier follow the consistency of the page, while developers can update the layout in a well thought-out, consistent way. However, it’s quite hard to find your way through all the theory behind grid systems: it isn’t easy at all. Some important notions and related key-facts can help to learn basics and keep essential techniques in mind.

And this is what this article is all about. Inspired by Khoi Vinn’s and Mark Boulton’s presentation Grids are Good, we’ve decided to take a deep look in the articles about grid-based designs. We’ve read through over 50 articles and selected some of the most important and interesting facts web-developers should know about the grid-based approach. Besides, we’ve listed the most useful references, tutorials and tools we found – with precise descriptions of what the articles are about

Read full article

Every design you make should have a clear grid system whether its print or for the web because they help to organize information into a clear easy to follow layout. Here we roundup the best articles and resources on the subject.

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 .

Read full article

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

Read full article