Tooling

Stylus

The CSS is created using the stylus preprocessor and uses standard SASS syntax (the official docs show python syntax but it's not used here to reduce the learning curve for those used to SASS), there are a few minor differences between SASS and Stylus, they are available to read in the official stylus documentation.

Jeet

Jeet is used for the grid, it is a classless semantic grid and avoids the horrible bootstrap-like practice of putting classes like .col-lg-12 .col-md-12 .col-sm-12 all over the page. Instead it appears in the css as a fractional width.

e.g.

.l-primary-column {
  column(1/2)
}

This specifies that the primary column should span 1/2 the page. The official documentation is available to read here.

Rupture

Rupture is a great way to write media queries, it uses a simplified syntax to make responsive layouts fast and easy to code.

e.g.

.l-primary-column {
  column(1)
  +above(m) {
    column(1/2)
  }
}

This alters the primary column to say that by default, it spans the full width of the page until it reaches the 'm' breakpoint (specified in the '_variables' file) and then after that it changes to a half, column.

The official documentation is available to read here.

JS

The JavaScript is written using ES6 but it compiles to standard ES5 using the Babel Transpiler. This will happen automatically provided that the 'gulp' task is running.