Grid Style Sheets

Grid Style Sheets (GSS) uses the Cassowary Constraint Solver to change the way elements are displayed on the Web.

GSS uses an intertwining relational rules between various DOM elements to build layouts that display differently based on the conditions the page has been loaded.

Via the CCSS and VFL components, GSS allows constraints to be put into place based on the element's DOM properties like size and position (CCSS), and based on vertical and spacing (VFL).

The principles and notions behind the Grid Style Sheets has also been presented at O'Reilly's Fluent 2014 conference. You can see a video of it below:

What is new in this release:

• Variable hoisting (unscoped variables and virtuals point to topmost instance)
• :visible, :visible-y, :visible-x pseudo classes that fire up when element is visible
• computed- pseudo property family which acts like intrinsic- without resetting original property
• ^, ^^, ^^^... and $ combinators that point to parent/root scopes
• Conditions now have a passable support for plural selectors. Atleast it wont hang
• Simplistic units support (not in parser yet), em, rem, vh, vw, vmax, vmin.
• One-way binding through px unit. Allows for some non-linear expressions not possible otherwise
• max, min functions that also provide some indirection
• Buffered console that outputs input and output next to each other keeping tree structure
• $scroll-top, $computed-height now work in a similar way to ::window[scroll-top] and ::window[height]
• Better scoped stylesheets support (no emulation for css dumping yet),
• Hoisted variables in top root scope are not global anymore, they are attached to stylesheet
• Scoped stylesheets in , or define global variables in top scope, otherwise they attach to scope element.
• @import support (css dumping support is not reliable yet there). importing sheet multiple times is only parsed once.

What is new in version 2.0.0:

• Variable hoisting (unscoped variables and virtuals point to topmost instance)
• :visible, :visible-y, :visible-x pseudo classes that fire up when element is visible
• computed- pseudo property family which acts like intrinsic- without resetting original property
• ^, ^^, ^^^... and $ combinators that point to parent/root scopes
• Conditions now have a passable support for plural selectors. Atleast it wont hang
• Simplistic units support (not in parser yet), em, rem, vh, vw, vmax, vmin.
• One-way binding through px unit. Allows for some non-linear expressions not possible otherwise
• max, min functions that also provide some indirection
• Buffered console that outputs input and output next to each other keeping tree structure
• $scroll-top, $computed-height now work in a similar way to ::window[scroll-top] and ::window[height]
• Better scoped stylesheets support (no emulation for css dumping yet),
• Hoisted variables in top root scope are not global anymore, they are attached to stylesheet
• Scoped stylesheets in , or define global variables in top scope, otherwise they attach to scope element.
• @import support (css dumping support is not reliable yet there). importing sheet multiple times is only parsed once.

What is new in version 1.0.3-beta:

• 2D sugar props: size, position, center, intrinsic-size, top-left, top-right, bottom-left, bottom-right
• Selectors other than id, class & tag can now be used in CCSS when surrounded by parans
• Support for plural selectors on either side of a constraint operator

What is new in version 1.0.2-beta:

• VGL:
• @grid-template empty zones can be defined with.
• Added in() to @grid-template.
• Added h/v/top/right/bottom/left-gap() to @grid-template.

Requirements:

• JavaScript enabled on client side