Superior is a complete grid system powered by scss mixins that reduce code bloat and allow more flexibility! Highly influenced and inspired by Susy and Bootstrap.
Superior does not include browser prefixes. Superior was created under the assumption most developers use autoprefixers for the most control of browser support.
Install
NPM
npm install superior-scss --save
Yarn
yarn add superior-scss
CDN
https://cdn.jsdelivr.net/npm/superior-scss/superior.scss"
Import into scss
// scss ;...
Default Variables
;;
Superior defaults to a 12 column grid system with 16px gutters. Gutters can be set to pixel, em, rem etc. although percentage gutters are not recommended due to issues when nesting.
Column Wrapper (row)
All columns need to be wrapped with a div
that uses the cols()
mixin. It is NOT recommended to use cols()
directly on your .container
element.
Mixin:
Example:
// scss .my-div // compiled css .my-div
Don't want to use flexbox? Set $flex: false
to use floated columns.
Columns
The total number of columns is defaulted to the $cols
variable but can be changed to any number.
Flexbox columns
Mixin:
If $order
is left null it will not be included in the compiled css. Note: The column count passed to the mixin can be a decimal number (ex: make-flex(4.5)
).
Example:
// scss .my-div // compiled css .my-div // scss .my-div // compiled css .my-div
Update flexbox columns
To add new flex dimensions on an element that already has makeFlex
use updateFlex
.
Mixin:
Example:
// scss .my-div // compiled css .my-div @media(...)
Floated Columns
Mixin:
Example:
// scss .my-div // compiled css .my-div
Functions
Span
span($span,
Example:
// scss .my-div .my-other-div // compiled css .my-div .my-other-div
Utility Mixins
Offset
Mixin:
Example:
// scss .my-div // compiled css .my-div
Clearfix
The clearfix mixin is already included in the cols()
mixin if $flex: false
Mixin:
Bonus
Make Classes
Don't want to use the mixins? Use makeClasses()
to output a class for every column size.
Mixin:
Flexbox Example:
// scss // compiled css .cols .col-1 .col-2 .col-3 .col-4 ...
Floated Example:
Prefer floated columns? Set $flex
to false.
// scss // compiled css .cols .cols::after .col-1 .col-2 .col-3 .col-4 ...