GSS: Layout Reimagined

Layout on the web is certainly an extremely time consuming process and the most outdated. Floats and such still don’t cut it. At it’s core, Grid Style Sheets (GSS) reimagines CSS layout and harnesses the Cassowary Constraint Solver – the same algorithm Apple uses to compute native layout. OK sounds good, but is it a pre-processor? Well… no not exactly.

GSS enables far better layout control through building relational rules between different elements. Let’s take CSS and bend it to our will as we look into the layout capabilities of the GSS project.

Test Drive GSS on GitHub

github project

The example above can be downloaded on GitHub in order to test locally. You can also follow along with the similar example used in this video by GSS partner in crime Dan Tocchini.

Please be aware the version I’ve posted on GitHub alleviates the Flash Of Unstyled Content (FOUC) through the use of JavaScript detection and a CSS opacity transition via the ready state class provided by GSS. This ensures content is still visible should JavaScript fail.

The Purpose of GSS

Ever tried to center something in CSS? The plethora of techniques and methods are astounding! Current centering methods in CSS use approaches such as flexbox, table display, inline-block, transforms, absolute positioning…the list goes on and on when all we want to do is center something!

I’m also sure you’ve all heard of element queries, but why are they so difficult to obtain right now? The answer is cyclic dependencies that naturally arise in relative layout logic and arithmetic. That means if we have 3 boxes and each box depends on the width of the previous one we end up in a never ending loop. For example…Read the full article on Web Design Weekly

Dennis Gaebel

Design Technologist passionate for Open Source, SVG, Typography, Web Animation, Interaction Development & Pattern Based Design. http://droidpinkman.io.

Leave a Reply

Your email address will not be published. Required fields are marked *

show formatting examples
<pre class="language-[markup | sass | css | php | javascript | ruby | clike | bash]"><code>
…code example goes here…
</code></pre>

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comment Preview

  1. John Doe shouted this comment preview:
    2015/01/21