jig

jig

This is jig's example page, showcasing grid examples of different complexities, using the provided mixins and helper functions in various manners to create responsive grid configurations.

Each example is implemented individually using all available preprocessor libraries, which should result in exactly the same styling result in all different implementations for one example, proving, that all implementations function alike and are capable of creating the same grids.

Hover over an example grid, to better see the grid's outline, without images and effects.

Have a look at the source code of these examples at:

Examples

Basic Grid

This example demonstrates basic grid definitions, like responsive column sizes, gutters and responsive properties like background-colors. It also includes simple cases of alignment.

SCSS (Dart Sass)

SCSS Legacy (LibSass)

Stylus

Advanced Grid

This example includes advanced grid concepts, like rows, item alignments, item reordering. It also includes responsive spacing and demonstrates overlaying concepts like positioning and transforms on grid elements.

SCSS (Dart Sass)

SCSS Legacy (LibSass)

Stylus

Real World Grid

This example tries to emulate a (rather elaborate) grid, which may be used to construct a real world website, including breakout elements, overlapping elements and subgrids.

SCSS (Dart Sass)

SCSS Legacy (LibSass)

Stylus