simpl-grid

simple responsive flexbox grid

DEMO: https://nihlton.github.io/simple-grid/

DOCS: https://nihlton.github.io/simple-grid/docs.html

Setup

In the console

npm add simpl-grid

In your project

import 'simpl-grid';

Notes

Version 2 Brings some small changes to gutter classes, and introduces responsive gutters.

gutters sizes are as follows:

• none: 0
• close: 0.125rem
• default: 0.5rem
• open: 1.5rem

None responsive gutters: .gutter-[size]

Responsive gutters: .gutter-[break-point]-[size]

Break points

Simpl-grid is opinionated about your break points, which is kind of unavoidable for a CSS only package.

• small: starts at 0px and ends at 720px
• medium: starts at 721px and ends at 1023px
• large: starts at 1024px

Import Grid Values

you can import the break-point configurations from simpl-grid should you need these values in your own SASS, or even javascript.

  import * as grid_vars from 'simpl-grid/vars';
  console.log(grid_vars)

@use 'simpl-grid/dist/vars.module.scss' as gridVars;

$small-and-medium: '(max-width: #{map.get(gridVars.$breakPoints, large) - 1px})';

@media (hover: none) and (#{$small-and-medium}) {
  .my-class {
    ...
  }
}

@media #{gridVars.$mediumOnly} {
  .my-class {
    ...
  }
}

The Future

Near future

add an xlarge break point.

allow custom break-point configurations using css variables. perhaps something like:

:root {
  --simpl-grid-small-start: 0px;
  --simpl-grid-small-end: 720px;
  --simpl-grid-medium-start: 721px;
  --simpl-grid-medium-end: 1023px;
  --simpl-grid-large-start: 1024px;
  --simpl-grid-large-end: 1500px;
  --simpl-grid-xlarge-start: 1501px;
  --simpl-grid-xlarge-end: 9999px;
}

Distant future

Would like to figure out a way to allow arbitrary break-points. perhaps convert to a JS package, and accept break point config before writting out the CSS style sheets programatically? Seems janky. ...something to think about.