SSGS — Super Simple Grid System

What's special about SSGS?

With SSGS, creating a responsive grid system is easy. You set your breakpoints, your gutters, include the file and then you're done. Yeah, it's really that easy. However, if you're happy with the default options you don't even have to set anything at all, just including the file is enough.

SSGS uses something similar to the AMCSS syntax for its components. You create grids using data-grid and columns using data-col. Modifiers are passed as the attribute value. Once you see an example you'll understand it right away.

To keep things small and efficient, SSGS's CSS output is optimised to be as small as possible so you don't have to worry about code bloat.

Usage

The following example creates a grid in which the columns span half the width on small screens and a quarter of the width on larger screens.

Column definitions follow the format {n}-{x}, meaning a column spanning {n} units of {x}. The prefixes are defined in your Sass inside the $ssgs-prefixes variable.

HTML

<div data-grid>
  <div data-col="1-2 M1-4">
  <div data-col="1-2 M1-4">
  <div data-col="1-2 M1-4">
  <div data-col="1-2 M1-4">
</div>

SCSS

$ssgs-columns: 2 4;
$ssgs-prefixes: (
  'M': '(min-width: 30em)'
);

@import 'ssgs';

Options

In your HTML

Grids have two modifiers. You can remove the gutters using gutterless or you can reverse the column order using rev. Of course, you can also combine the two or leave them out. If you combine them, make sure you always separate them with spaces.

<div data-grid="gutterless rev"></div>

Columns don't really have any options, apart from the column definition itself, of course. Leaving the attribute value out will give you a full-width column.

<div data-col="1-2 M1-4 L1-6"></div>

In your Sass

The following options are available:

$ssgs-namespace

By default, you use SSGS grids with data-grid. Using this option you can change this to something else, e.g. data-ssgs.

$ssgs-columns-namespa

Same as $ssgs-namespace, but for grid columns (elements inside data-grid).

$ssgs-prefixes

Use this option to enable responsive behaviour. This option expects a map, consisting of pairs of prefixes (e.g. 'M') and media queries (e.g. '(min-width: 30em)'). This will tell SSGS to set up all fractions with the given prefix inside the given media query. This map can contain 0-to-n key-value pairs.

$ssgs-columns

Use this option to tell SSGS which columns to set up. This option expects either a one-dimensional or a two-dimensional list. Passing '2 3 4' would set up all columns (i.e. from '1-2' to '4-4'). If you pass a two dimensional list (e.g. '2 (1), 3 (1), 4 (3)'), SSGS would only set up the columns '1-2', '1-3' and '3-4'.

$ssgs-gutters

This option tells SSGS how wide gutters should be. Gutters in SSGS are fixed, while columns are fully flexible. That means you should pass values like px or em to this option.