smpl.grd

What is it?

smpl.grd is a stupidly simple responsive grid system built with flexbox. it's meant to be an easy-to-customize grid solution for those looking to avoid a bloated front-end framework.

How do I get it?

view source code on github. compiled css is available with standard options, or the source .scss file may be edited to customize the grid. options include column count, gutter size and breakpoints. either include the .scss file in your build process or yarn run sass to build your new css file.

Where are the missing features?

some call them features, others call them excess code. smpl.grd is meant to provide the bare necessities in a grid system. if your project needs more feel free to build on top of what this framework provides.

How do I use it?

the markup uses familiar row and column class names by default, but these are customizable. start with a .{row} and add .{col}-{bp-size}-{col-count}. here are some examples using the default options. resize your browser to see the columns stack at each breakpoint.

$row-name: row;
$col-name: col;
$cols: 12;
$gutter: 1rem;
$sizes: (
  xs: null,
  sm: 40em,
  md: 60em,
  lg: 80em
);

<div class="row">
  <div class="col-xs-6 col-md-3">.col-xs-6 .col-md-3</div>
  <div class="col-xs-6 col-md-3">.col-xs-6 .col-md-3</div>
  <div class="col-sm-6 col-md-3">.col-sm-6 .col-md-3</div>
  <div class="col-sm-6 col-md-3">.col-sm-6 .col-md-3</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-lg-6">.col-lg-6</div>
  <div class="col-lg-6">.col-lg-6</div>
  <div class="col-lg-12">.col-lg-12</div>
</div>

.col-xs-6 .col-md-3

.col-sm-6 .col-md-3

.col-md-4

.col-lg-6

.col-lg-12

Why should I use it?

you shouldn't. use css grid instead.