superior-scss v3.0.3
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
@import "~superior";
...
Default Variables
$superior-cols : 12 !default;
$superior-gutter : 1rem !default;
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:
@mixin cols($flex: flex, $dir: row, $wrap: wrap, $justify: flex-start, $align-items: flex-start)
Example:
// scss
.my-div {
@include cols();
}
// compiled css
.my-div {
margin: 0 -0.5rem;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
}
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:
@mixin make-flex($span, $cols: $cols, $order: null)
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 {
@include make-flex(3);
}
// compiled css
.my-div {
flex: 0 1 25%;
max-width: 25%;
padding: 0 0.5rem;
box-sizing: border-box;
}
// scss
.my-div {
@include make-flex(6, $order: 2);
}
// compiled css
.my-div {
flex: 0 1 50%;
max-width: 50%;
padding: 0 0.5rem;
box-sizing: border-box;
order: 2;
}
Update flexbox columns
To add new flex dimensions on an element that already has makeFlex
use updateFlex
.
Mixin:
@mixin update-flex($span, $cols: $cols)
Example:
// scss
.my-div {
@include make-flex(3);
@media(...) {
@include update-flex(12);
}
}
// compiled css
.my-div {
flex: 0 1 25%;
max-width: 25%;
padding: 0 0.5rem;
box-sizing: border-box;
}
@media(...) {
.my-div {
flex: 0 1 100%
max-width: 100%;
}
}
Floated Columns
Mixin:
@mixin make-float($span, $cols: $cols, $float: left)
Example:
// scss
.my-div {
@include make-float(4);
}
// compiled css
.my-div {
width: 25%;
padding: 0 0.5rem;
box-sizing: border-box;
float: left;
}
Functions
Span
span($span, $cols: $cols)
Example:
// scss
.my-div {
width: span(4);
}
.my-other-div {
flex: 0 1 span(3, 6);
}
// compiled css
.my-div {
width: 25%;
}
.my-other-div {
flex: 0 1 50%;
}
Utility Mixins
Offset
Mixin:
@mixin offset($span, $direction: left, $cols: $cols)
Example:
// scss
.my-div {
@include offset(3);
}
// compiled css
.my-div {
margin-left: 25%;
}
Clearfix
The clearfix mixin is already included in the cols()
mixin if $flex: false
Mixin:
@include clearfix;
Bonus
Make Classes
Don't want to use the mixins? Use makeClasses()
to output a class for every column size.
Mixin:
@include make-classes($flex: true);
Flexbox Example:
// scss
@include make-classes;
// compiled css
.cols {
margin: 0 -0.5rem;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
}
.col-1 {
flex: 0 1 8.3333333333%;
max-width: 8.3333333333%;
padding: 0 0.5rem;
box-sizing: border-box;
}
.col-2 {...}
.col-3 {...}
.col-4 {...}
...
Floated Example:
Prefer floated columns? Set $flex
to false.
// scss
@include make-classes(false);
// compiled css
.cols {
margin: 0 -0.5rem;
}
.cols::after {
content: '';
display: table;
clear: both;
}
.col-1 {
width: 8.3333333333%;
padding: 0 0.5rem;
box-sizing: border-box;
float: left;
}
.col-2 {...}
.col-3 {...}
.col-4 {...}
...
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
7 years ago
7 years ago