Grid Style Sheets 2.0

GSS reimagines CSS layout & replaces the browser’s layout engine with one that harnesses the Cassowary Constraint Solver — the same algorithm Apple uses to compute native layout.

Install Source Documentation

Demos

GSS in action

Profile card demo

View conditionals and VFL cushions in action

View demo

GSS Hello World

Create your first layout using GSS

Tutorial

Relative Positioning & Sizing

Center stuff w/ a 1-liner

Notice how you naturally would describe the nearby layout of iOS devices:

"Horizontally center the devices, & the bottom of the iPhone & iPad should be equal."

GSS stays true to our intentions:

#iphone[center-x] == #ipad[center-x];
#iphone[bottom] == #ipad[bottom];

AI websites that design themselves

Join the evolution

Become a founding member

Polyfills from a Better Future

Flexbox? Meh

Web developers are expected to build increasingly sophisticated UIs faster, cheaper, with tools that have not evolved with the times. Why is the trivial task of centering an element with CSS so obtusely complex? CSS was designed to separate presentation from content, but even with Flexbox, a trivial change in layout can require deep changes in both the HTML content and the CSS presentation. CSS layout primitives are not expressive enough - it doesn’t really matter that some div is 720px wide - what matters is how it relates to other elements in the layout. WTF, why can’t we position & size elements relative to each other, not just relative to their positioned parents? For more than a decade, web developers have been asking for this, but the W3C refuses to tackle the engineering problems associated with the “cyclic dependencies” that naturally arise in relative layout logic. Sounds like a classic constraint satisfaction problem - JavaScript to the rescue!

"center any element within any other with a one-liner... Boom."

GSS is a CSS preprocessor & JS runtime that harnesses Cassowary.js, the JS port of the same constraint solving algorithm Apple uses in Cocoa Autolayout for iOS & OS X. GSS & Cassowary are based on “Constraint Programming” - a paradigm where developers focus on declaring the “what” and relying on a mathematical solver to figure out the “how”. With more traditional Object-Oriented Programming, developers focus more on the “how”. This makes Constraint Programming a natural fit for declarative languages like CSS.

GSS polyfills layout languages from an alternate CSS future; including Greg Badros’s Constraint CSS (CCSS) and Apple’s Visual Format Language (VFL). GSS levels up CSS with relative positioning & sizing and true source order independence - which means developers can center any element within any other with a one-liner: #any[center] == #anyother[center]; Boom.

Install GSS or check out the source code.

Video

O'Reilly | Fluent Conf' 2014

Kid

Since this talk GSS 2.0 has been released!

For updates and improvements view our documentation

Made with ♥ by TheGrid

Open source b/c we believe

GSS was created by Dan Tocchini, leader of the TheGrid, the first AI website platform. GSS is an scrumptious piece of TheGrid's platform, hence the name Grid Style Sheets.

GSS would not be possible without:

privacy policy