Introducing GSS: Grid Style Sheets

You may have recently heard of Grid Style Sheets (GSS) in the world of HTML and CSS. GSS re-imagines CSS layout and replaces the browser’s layout engine with one that harnesses the Cassowary Constraint Solver. Those of you who didn’t understand a word of that…hello, and welcome!

GSS promises a better future. GSS promises relative positioning and sizing. GSS promises to center any element inside another with one line of code. And GSS delivers. The question is: How?

In this article, I’ll cover a brief history of GSS and an in-depth overview of the features it has to offer. I’ll also look at GSS for constraint-based layouts, the Cassowary constraint algorithm, and walk you through the process of installing and using GSS.

Those of you who’d rather not wait around for the W3C or browsers to catch up, I urge you to hang in there and pay close attention while I explain the mystery that is GSS. On that note, let’s start with a little history.

A Brief History

GSS is a creation of The Grid with Dan Tocchini as its founder and CEO. This answers why the not-so-grid-based style sheets are called Grid Style Sheets.

The war between web developers and front-end technology to present ideas onto the web has been going on for years. CSS has proved to be triumphant for the past decade. However, building increasingly complex user interfaces with tools that haven’t evolved with time is something web developers are expected to do on a regular basis. For example, vertically centering an element with CSS has not been the simplest of tasks, especially with variable-height elements.

Flexbox is one of the most recent solutions, but even small changes there require you to go deep within your HTML content and CSS presentation and make changes.

It’s time for GSS to take the arena. GSS tackles these problems and many more — problems that developers have had for over a decade.

Essentially, GSS is a CSS preprocessor and JavaScript runtime that exploits Cassowary.js. Those of you who don’t already know, Cassowary.js is the JavaScript port Apple uses in Cocoa Autolayout.

Both GSS and Cassowary are founded on constraint programming, making it ideal for empowering declarative languages like CSS. Constraint programming is a paradigm by which web developers are concerned with declaring the “what” and leaving the “how” up to a mathematical solver.

Constraint programming focuses on intentions, not implementation.

Now that we’ve established some background information, let’s move on to the features GSS offers.

Overview of GSS

One of the biggest problems with CSS is relativity. You can expect any CSS element to have an unending list of properties — padding, height, width, float, margins, borders, outlines — but none of this information tells us where the element will be located with reference to other elements on the page (or even the page as a whole). The endless list also doesn’t answer where the element will be displayed with different screen sizes.

This brings us to the first Feature of GSS: You define what you want the layout to be. Gone are the days of spending countless hours of trial-and-error, strategizing how the layout should be constructed.

Since we already discussed that GSS utilizes Cassowary.js, here is another great feature of GSS: An element can be centered within any other with one line of code. This makes a lot of workarounds unnecessary and things of the past.

For instance, if you want to add a Subscribe button in line vertically with, say, a heading on the right side of your site’s page, you would use the following code:

[code language="css"]
.subscribe-button[right] == ::window[width];
.subscribe-button[center-y] == .header[center-y];
[/code]

Another feature: GSS makes floats, table cells, clearfix, and horizontal/vertical centering obsolete. Bid farewell to the perilous pitfall that is a float because we’ve got the W3C itself saying that floats are not ideal for application layouts.

“As websites evolved from simple documents into complex, interactive applications, tools for document layout, e.g. floats, were not necessarily well suited for application layout.”
- W3C Grid Layout Module (working draft)

What about CSS features like !important? The fourth feature of GSS does something similar: GSS employs constraint hierarchy to prioritize constraints with strengths. We’re talking about four built-in strength levels here:

Continue reading %Introducing GSS: Grid Style Sheets%

by Rafay Saeed Ansari via SitePoint