Inviz

body, .document, html {
  min-height: 100%;
  line-height: 1.5; }

p, h1, h2, h3, ol, li, ul, dt, dd, dl, .document, body {
  padding: 0;
  margin: 0; }
  

.document {

Inviz

body, .document, html {
  min-height: 100%;
  line-height: 1.5; }

p, h1, h2, h3, ol, li, ul, dt, dd, dl, .document, body {
  padding: 0;
  margin: 0; }
  

.document {

Inviz

body, .document, html {
  min-height: 100%;
  line-height: 1.5; }

p, h1, h2, h3, ol, li, ul, dt, dd, dl, .document, body {
  padding: 0;
  margin: 0; }
  

.document {

Inviz

1st project: CCSS parser

Overview: CCSS is a CSS superset with a syntax to link selectors with constraints which later is solved by GSS and Cassowary constraint solver. It takes text input and outputs simple Abstract Syntax Tree. Most of the features are described in CCSS documentation on official site: (http://gridstylesheets.org/guides/ccss/

Goal: Rewrite CCSS parser in conformance with existing specs (https://github.com/gss/parser/tree/master/spec). The new parser should avoid using intermediate abstractions (like PEGs) for best performance, but still should retain extensibility. It should be friendly to developer and produce information needed for debugging.

Parsing:

• CSS3 Values, should parse 99% of modern CSS grammar into AST (including things like gradients, units, and calc expressions)
• Selectors. All CSS3 selectors + GSS virtuals
• CSS3 constructs (rules and media queries, font face, conditions).

Inviz

Overview: CCSS is a CSS superset with a syntax to link selectors with constraints which later is solved by GSS and Cassowary constraint solver. It takes text input and outputs simple Abstract Syntax Tree. Most of the features are described in CCSS documentation on official site: (http://gridstylesheets.org/guides/ccss/

Goal: Rewrite CCSS parser in conformance with existing specs (https://github.com/gss/parser/tree/master/spec). The new parser should avoid using intermediate abstractions (like PEGs) for best performance, but still should retain extensibility. It should be friendly to developer and produce information needed for debugging.

Parsing:

• CSS3 Values, should parse 99% of modern CSS grammar into AST (including things like gradients, units, and calc expressions)
• Selectors. All CSS3 selectors + GSS virtuals
• CSS3 constructs (rules and media queries, font face, conditions).
• Constraints and variables definition (free-form expressions)

Inviz

Styleverse mini-doc:

Styleverse is a system to generate, harmonize and assign gss-specific styles on GOM elements. It resembles JSON and CSS at the same time.

Terms

• Styleverse loads multiple sheets
• finds element by kind (like tag in HTML)
• and filters them by index (like class in HTML)
• to match against rules

Inviz

describe 'Scaffold', ->
  structure = 
    stack:
      'font-size': {'big','small'}
      'v-align': {'top','bottom'}
    group:
      'v-align': {'top','bottom'}
      'h-align': {'left','right'}
      'line-height': ['1md', '2md']
    aside:

Inviz

<script>
var styles = document.getElementsByClassName('static-solution')
var currentHeight = document.documentElement.scrollHeight
window.addEventListener('resize', function() {
  currentHeight = document.documentElement.scrollHeight
})
for (var i = 0, style; style = styles[i++];) {
    text = style.textContent || style.innerText
    var animations = []

Inviz

engine = new GSS({
	A: 1,
	B: 2,
	LIMIT: 10
});

e.solve([
	['==', ['get', 'C'], ['+', ['get', 'B'], 2]],
	['==', ['get', 'E'], ['/', ['get', 'C'], 2]],
	['<=', ['get', 'E'], ['get', 'LIMIT']]

Inviz

small-font-size = (window[width] ... 400) => {14, 18, 22};
small-font-size = (window[width] ... 400) quad in-out => {14, 18, 22};


->  // clip
=>  // extend

~> // alternate
|> // repeat