JSPM

sass-griddy

2.1.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1
  • Score
    100M100P100Q12778F
  • License MIT

Simple grid framework for Sass

Package Exports

  • sass-griddy

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (sass-griddy) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

griddy

Simple grid framework for Sass.

Getting Started

First off you'll need to import griddy to use it:

@import 'path/to/griddy';

To define a row element of your layout:

.some-row {
  @include griddy-row;
}

And to define a column element:

.some-column {
  @include griddy-column(1 of 2);
}

Columns can also be offset:

.some-column {
  @include griddy-column(1 of 2);
  @include griddy-offset(1 of 4);
}

The width parameter in griddy-column and griddy-offset can be a percentage (i.e. 25%), a human readable fraction (i.e. 1 of 4) or unitless number (i.e. 0.25):

.some-column {
  @include griddy-column(1 of 4);
  @include griddy-column(25%);
  @include griddy-column(1/4);
}

You can also define gutters for your grid layout:

.some-row {
  @include griddy-row($gutter: 20px);
}

.some-column {
  @include griddy-column(1 of 2, $gutter: 20px);
}

.some-offset-column {
  @include griddy-column(1 of 4, $gutter: 20px);
  @include griddy-offset(1 of 4, $gutter: 20px);
}

Or globally define your gutter width:

$griddy-gutter: 20px;

.generic-row {
  @include griddy-row;
}

.generic-column {
  @include griddy-column(1 of 2);
}

.special-row {
  @include griddy-row($gutter: 40px);
}

.special-column {
  @include griddy-column(1 of 2, $gutter: 40px);
}

Or have no gutter:

$griddy-gutter: 0;

If you need to clear the preceding column in your layout:

.some-column:nth-child(3n+1) {
  @include griddy-clear;
}

By default griddy's direction is left-to-right, however you can change this by setting:

$griddy-direction: right;

Browser Support

Works on all modern browsers which support box-sizing and calc().

If you need support Internet Explorer 8, you might want to check out version 1.0.2.

License

MIT - see license