Big, Brainy CSS

Posted on by Nathan

The raw CSS generated by Gridset can be large, but that’s because it’s much smarter than your average stylesheet. An even 12 column grid can weigh in at about 105kb when generated by Gridset (just big enough to make any developer cough in her latte) but trust us: the benefits far outweigh the costs.

Where’s the Beef?

The math involved in responsive web design can be painful, especially when strictly adhering to a grid. Main layout block computations aren’t that troublesome, but accounting for gutters and nested measurements can really complicate matters, leading to Inspector noodling and “good enough” numbers. Gridset takes care of all of this for you, with machine precision, and writes it all to your CSS.

Gridset does not assume that all of your columns are the same width, so it must account for all of the possible column combinations when giving you measurements. This is why our syntax looks a bit different than most frameworks. An element spanning column 1 to column 7 is written g1-g7 (where the prefix is set to “g”), rather than grid7, which assumes 7 even column widths. Next, Gridset determines all of the possible margins for offsets, allowing you to place a d7 after a d1 and not think about how many columns are in between.

Gridset also calculates infinite nesting of element widths. Placing percentage width elements within containers of another percentage width causes a compounding of percentages that leads to the nested element being much smaller than intended. It’s comparable to the compounding em problem many others have noted, but without a rem bailout. Therefore, we must adjust each nested width by its possible parent’s width.

Repeat this process for every responsive breakpoint and your CSS can begin packing on some serious KBs.

Brainy Selectors

Another aspect of Gridset that add to the bulk of its CSS files is that it uses selectors imbued with a bit of logic. By making liberal use of CSS 2 selector advancements, and being a bit verbose, Gridset’s styles anticipate your layout needs. The trick is in its class syntax. Take these two layout elements, for example:

<article class="g1-g3"></article>
<aside class="g5-g6"></article>

By using attribute selectors ([class=g1-g3]) to target these classes, rather than just writing class selectors (.g1-g3), we can determine more about each element in our CSS and provide more specific styles for different cases. For example:

[class*=-g3]

…matches any element ends in column three, and…

[class*=-g3] + [class*=g5-]

…matches any element spanning more than one column that begins in column 5 that directly follows an element that ends in column 3. From this, we can determine the needed offset margin without any further classes being applied. We use this method throughout the CSS to make smart assumptions about which styles you need. Best part: they work in IE 7 and up!

Fat and Happy

In the end, you may have a rather large CSS file (though we do a quite a bit of optimization), but as you apply these generated classes to your HTML, you will save a load of time and effort that would normally be burned trying to account for these measurements. Efficiencies such as auto-calculating offsets may seem trivial, but our goal is to remove any impediment to rapid development. The less you have to think about your grid, the more time you have to focus on content and page structure; to play and experience happy accidents; to get on with the business of design, not arithmetic.

By defining selectors that are more aware of their surroundings, and measurements generated with machine precision, Gridset’s raw CSS output represents a new way to think of our stylesheets: smarter, more verbose, and packed with possibilities. Gridset extends the potential of any designer or developer, as any good tool should, allowing for spontaneous layout experimentation that was only until recently ridiculously difficult and impractical.

Options, Options, Options… Options

Gridset is built for design, iteration, prototyping, and experimentation. By the end of this beta, Gridset will be built for final site production, as well. Our goal is not to only generate CSS, but provide a tool that allows you to plan truly custom layouts, and then generate your grid in whatever format you need, whenever you need it. Currently, our embedded CSS option gzips any CSS file down to roughly 20% of its original size, and we are building tools to help you further whittle the CSS output down to only what you need. Stay tuned.