SCSS UI Grid
Install
npm install @wide/styles-grid --save
Note
Please, note that more you add helper mixins, more your CSS compiled file will be heavy.
So add helpers you really need.
Usage
Variables
All those variables could be customized depending on what you need in your variables.scss
file.
Here are the default values.
$grid-prefix
Prefix for all grid classes.
$grid-prefix: '' !default;
$grid-prefix
Grid gutter length. Must be a pixel value.
$grid-gutter: 15px !default;
container
Variables
All those variables could be customized depending on what you need in your variables.scss
file.
Here are the default values.
$containers
Container's breakpoints list.
$containers: (
'xs': (
max-width: 320px
),
'sm': (
max-width: 540px
),
'md': (
max-width: 720px
),
'lg': (
max-width: 960px
),
'xl': (
max-width: 1140px
),
'xxl': (
max-width: 1540px
)
) !default;
$containers-prefix
Container classes prefix.
$containers-prefix: $grid-prefix !default;
Mixins
container-helper()
Set all container classes.
@use '@wide/styles-grid' as grid;
@include grid.container-helper;
Output
.container,
.container-fluid {
width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: 0.9375rem;
padding-left: 0.9375rem;
}
container-helper-with-bp()
Set all container classes with breakpoints media queries.
@use '@wide/styles-grid' as grid;
@include grid.container-helper-with-bp;
Output
@media (min-width: 20.375em) {
.container, .container\@xs {
max-width: 320px;
}
}
@media (min-width: 36em) {
.container, .container\@xs, .container\@sm {
max-width: 540px;
}
}
@media (min-width: 48em) {
.container, .container\@xs, .container\@sm, .container\@md {
max-width: 720px;
}
}
@media (min-width: 64em) {
.container, .container\@xs, .container\@sm, .container\@md, .container\@lg {
max-width: 960px;
}
}
@media (min-width: 75em) {
.container, .container\@xs, .container\@sm, .container\@md, .container\@lg, .container\@xl {
max-width: 1140px;
}
}
@media (min-width: 100em) {
.container, .container\@xs, .container\@sm, .container\@md, .container\@lg, .container\@xl, .container\@xxl {
max-width: 1540px;
}
}
.container\@xs, .container\@sm, .container\@md, .container\@lg, .container\@xl, .container\@xxl, .container-fluid {
width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: 0.9375rem;
padding-left: 0.9375rem;
}
container()
Grid container
entry point
Combine both container-helper
and container-helper-with-bp
helpers in one helper.
@use '@wide/styles-grid' as grid;
@include grid.container;
Parameters
Type | Description | Mandatory | Default |
---|---|---|---|
Boolean |
Use container-helper-with-bp()
|
false |
true |
Output
See container-helper
and container-helper-with-bp
outputs.
row
Variables
All those variables could be customized depending on what you need in your variables.scss
file.
Here are the default values.
$rows-cols-max-columns
Max columns for basic provided .row-col-{col}@{breakpoint}
classes.
$rows-cols-max-columns: 6 !default;
$rows-prefix
Row classes prefix.
$rows-prefix: $grid-prefix !default;
Mixins
row-helper()
Set row class.
@use '@wide/styles-grid' as grid;
@include grid.row-helper;
Output
.row {
display: flex;
flex-wrap: wrap;
margin-right: -0.9375rem;
margin-left: -0.9375rem;
}
row-cols-helper()
Set all row-cols classes from the $rows-cols-max-columns
variable.
Specify on a parent element (e.g., .row
) to force immediate children into NN numberof columns.
@use '@wide/styles-grid' as grid;
@include grid.row-cols-helper;
Output
.row-cols-1 > *,
.row-cols-1 > .col {
flex: 0 0 100%;
max-width: 100%;
}
.row-cols-2 > *,
.row-cols-2 > .col {
flex: 0 0 50%;
max-width: 50%;
}
.row-cols-3 > *,
.row-cols-3 > .col {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
}
.row-cols-4 > *,
.row-cols-4 > .col {
flex: 0 0 25%;
max-width: 25%;
}
.row-cols-5 > *,
.row-cols-5 > .col {
flex: 0 0 20%;
max-width: 20%;
}
.row-cols-6 > *,
.row-cols-6 > .col {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%;
}
row-cols-helper-with-bp()
Set all row-cols classes with breakpoints media queries.
@use '@wide/styles-grid' as grid;
@include grid.row-cols-helper-with-bp;
Output
@media (min-width: 20.375em) and (max-width: 35.99875em) {
.row-cols-1\@xs-only > *,
.row-cols-1\@xs-only > .col {
flex: 0 0 100%;
max-width: 100%;
}
.row-cols-2\@xs-only > *,
.row-cols-2\@xs-only > .col {
flex: 0 0 50%;
max-width: 50%;
}
.row-cols-3\@xs-only > *,
.row-cols-3\@xs-only > .col {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
}
.row-cols-4\@xs-only > *,
.row-cols-4\@xs-only > .col {
flex: 0 0 25%;
max-width: 25%;
}
.row-cols-5\@xs-only > *,
.row-cols-5\@xs-only > .col {
flex: 0 0 20%;
max-width: 20%;
}
.row-cols-6\@xs-only > *,
.row-cols-6\@xs-only > .col {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%;
}
}
/* and so on */
@media (min-width: 36em) {
/*
* .row-cols-1\@sm > *
* .row-cols-1\@sm > .col
* .row-cols-2\@sm > *
* .row-cols-2\@sm > .col
* .row-cols-3\@sm > *
* .row-cols-3\@sm > .col
* .row-cols-4\@sm > *
* .row-cols-4\@sm > .col
* .row-cols-5\@sm > *
* .row-cols-5\@sm > .col
* .row-cols-6\@sm > *
* .row-cols-6\@sm > .col
*/
}
@media (min-width: 36em) and (max-width: 47.99875em) {
/*
* .row-cols-1\@sm-only > *
* .row-cols-1\@sm-only > .col
* .row-cols-2\@sm-only > *
* .row-cols-2\@sm-only > .col
* .row-cols-3\@sm-only > *
* .row-cols-3\@sm-only > .col
* .row-cols-4\@sm-only > *
* .row-cols-4\@sm-only > .col
* .row-cols-5\@sm-only > *
* .row-cols-5\@sm-only > .col
* .row-cols-6\@sm-only > *
* .row-cols-6\@sm-only > .col
*/
}
@media (min-width: 48em) {
/*
* .row-cols-1\@md > *
* .row-cols-1\@md > .col
* .row-cols-2\@md > *
* .row-cols-2\@md > .col
* .row-cols-3\@md > *
* .row-cols-3\@md > .col
* .row-cols-4\@md > *
* .row-cols-4\@md > .col
* .row-cols-5\@md > *
* .row-cols-5\@md > .col
* .row-cols-6\@md > *
* .row-cols-6\@md > .col
*/
}
@media (min-width: 48em) and (max-width: 63.99875em) {
/*
* .row-cols-1\@md-only > *
* .row-cols-1\@md-only > .col
* .row-cols-2\@md-only > *
* .row-cols-2\@md-only > .col
* .row-cols-3\@md-only > *
* .row-cols-3\@md-only > .col
* .row-cols-4\@md-only > *
* .row-cols-4\@md-only > .col
* .row-cols-5\@md-only > *
* .row-cols-5\@md-only > .col
* .row-cols-6\@md-only > *
* .row-cols-6\@md-only > .col
*/
}
@media (min-width: 64em) {
/*
* .row-cols-1\@lg > *
* .row-cols-1\@lg > .col
* .row-cols-2\@lg > *
* .row-cols-2\@lg > .col
* .row-cols-3\@lg > *
* .row-cols-3\@lg > .col
* .row-cols-4\@lg > *
* .row-cols-4\@lg > .col
* .row-cols-5\@lg > *
* .row-cols-5\@lg > .col
* .row-cols-6\@lg > *
* .row-cols-6\@lg > .col
*/
}
@media (min-width: 64em) and (max-width: 74.99875em) {
/*
* .row-cols-1\@lg-only > *
* .row-cols-1\@lg-only > .col
* .row-cols-2\@lg-only > *
* .row-cols-2\@lg-only > .col
* .row-cols-3\@lg-only > *
* .row-cols-3\@lg-only > .col
* .row-cols-4\@lg-only > *
* .row-cols-4\@lg-only > .col
* .row-cols-5\@lg-only > *
* .row-cols-5\@lg-only > .col
* .row-cols-6\@lg-only > *
* .row-cols-6\@lg-only > .col
*/
}
@media (min-width: 75em) {
/*
* .row-cols-1\@xl > *
* .row-cols-1\@xl > .col
* .row-cols-2\@xl > *
* .row-cols-2\@xl > .col
* .row-cols-3\@xl > *
* .row-cols-3\@xl > .col
* .row-cols-4\@xl > *
* .row-cols-4\@xl > .col
* .row-cols-5\@xl > *
* .row-cols-5\@xl > .col
* .row-cols-6\@xl > *
* .row-cols-6\@xl > .col
*/
}
@media (min-width: 75em) and (max-width: 99.99875em) {
/*
* .row-cols-1\@xl-only > *
* .row-cols-1\@xl-only > .col
* .row-cols-2\@xl-only > *
* .row-cols-2\@xl-only > .col
* .row-cols-3\@xl-only > *
* .row-cols-3\@xl-only > .col
* .row-cols-4\@xl-only > *
* .row-cols-4\@xl-only > .col
* .row-cols-5\@xl-only > *
* .row-cols-5\@xl-only > .col
* .row-cols-6\@xl-only > *
* .row-cols-6\@xl-only > .col
*/
}
@media (min-width: 100em) {
/*
* .row-cols-1\@xxl > *
* .row-cols-1\@xxl > .col
* .row-cols-2\@xxl > *
* .row-cols-2\@xxl > .col
* .row-cols-3\@xxl > *
* .row-cols-3\@xxl > .col
* .row-cols-4\@xxl > *
* .row-cols-4\@xxl > .col
* .row-cols-5\@xxl > *
* .row-cols-5\@xxl > .col
* .row-cols-6\@xxl > *
* .row-cols-6\@xxl > .col
*/
}
@media (min-width: 100em) {
/*
* .row-cols-1\@xxl-only > *
* .row-cols-1\@xxl-only > .col
* .row-cols-2\@xxl-only > *
* .row-cols-2\@xxl-only > .col
* .row-cols-3\@xxl-only > *
* .row-cols-3\@xxl-only > .col
* .row-cols-4\@xxl-only > *
* .row-cols-4\@xxl-only > .col
* .row-cols-5\@xxl-only > *
* .row-cols-5\@xxl-only > .col
* .row-cols-6\@xxl-only > *
* .row-cols-6\@xxl-only > .col
*/
}
row()
Grid row
entry point
Combine row-helper
, row-cols-helper
and row-cols-helper-with-bp
helpers in one helper.
@use '@wide/styles-grid' as grid;
@include grid.row;
Parameters
Type | Description | Mandatory | Default |
---|---|---|---|
Boolean |
Use row-cols-helper-with-bp()
|
false |
true |
Output
See row-helper
, row-cols-helper
and row-cols-helper-with-bp
outputs.
col
Variables
All those variables could be customized depending on what you need in your variables.scss
file.
Here are the default values.
$cols
Number of columns for basic provided .col-{col}@{breakpoint}
and .offset-{col}@{breakpoint}
classes.
$cols: 12 !default;
$cols-prefix
Col classes prefix.
$cols-prefix: $grid-prefix !default;
$offset-prefix
Offset classes prefix.
$offset-prefix: $grid-prefix !default;
Mixins
col-helper()
Set col class.
@use '@wide/styles-grid' as grid;
@include grid.col-helper;
Output
.col {
position: relative;
width: 100%;
padding-right: 0.9375rem;
padding-left: 0.9375rem;
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
}
cols-helper()
Set all cols classes from the $cols
variable.
@use '@wide/styles-grid' as grid;
@include grid.cols-helper;
Output
.col-auto {
position: relative;
width: 100%;
padding-right: 0.9375rem;
padding-left: 0.9375rem;
flex: 0 0 auto;
width: auto;
max-width: 100%;
}
.col-1 {
position: relative;
width: 100%;
padding-right: 0.9375rem;
padding-left: 0.9375rem;
flex: 0 0 8.3333333333%;
max-width: 8.3333333333%;
}
.offset-1 {
margin-left: 8.3333333333%;
}
/* and so on */
/*
* .col-2
* .offset-2
* .col-3
* .offset-3
* .col-4
* .offset-4
* .col-5
* .offset-5
* .col-6
* .offset-6
* .col-7
* .offset-7
* .col-8
* .offset-8
* .col-9
* .offset-9
* .col-10
* .offset-10
* .col-11
* .offset-11
* .col-12
*/
cols-helper-with-bp()
Set all cols classes from the $cols
variable with breakpoints media queries.
@use '@wide/styles-grid' as grid;
@include grid.cols-helper-with-bp;
Output
@media (min-width: 20.375em) and (max-width: 35.99875em) {
.col-auto\@xs-only {
position: relative;
width: 100%;
padding-right: 0.9375rem;
padding-left: 0.9375rem;
flex: 0 0 auto;
width: auto;
max-width: 100%;
}
.col-1\@xs-only {
position: relative;
width: 100%;
padding-right: 0.9375rem;
padding-left: 0.9375rem;
flex: 0 0 8.3333333333%;
max-width: 8.3333333333%;
}
.offset-1\@xs-only {
margin-left: 8.3333333333%;
}
.col-2\@xs-only {
position: relative;
width: 100%;
padding-right: 0.9375rem;
padding-left: 0.9375rem;
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%;
}
.offset-2\@xs-only {
margin-left: 16.6666666667%;
}
.col-3\@xs-only {
position: relative;
width: 100%;
padding-right: 0.9375rem;
padding-left: 0.9375rem;
flex: 0 0 25%;
max-width: 25%;
}
.offset-3\@xs-only {
margin-left: 25%;
}
.col-4\@xs-only {
position: relative;
width: 100%;
padding-right: 0.9375rem;
padding-left: 0.9375rem;
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
}
.offset-4\@xs-only {
margin-left: 33.3333333333%;
}
.col-5\@xs-only {
position: relative;
width: 100%;
padding-right: 0.9375rem;
padding-left: 0.9375rem;
flex: 0 0 41.6666666667%;
max-width: 41.6666666667%;
}
.offset-5\@xs-only {
margin-left: 41.6666666667%;
}
.col-6\@xs-only {
position: relative;
width: 100%;
padding-right: 0.9375rem;
padding-left: 0.9375rem;
flex: 0 0 50%;
max-width: 50%;
}
.offset-6\@xs-only {
margin-left: 50%;
}
.col-7\@xs-only {
position: relative;
width: 100%;
padding-right: 0.9375rem;
padding-left: 0.9375rem;
flex: 0 0 58.3333333333%;
max-width: 58.3333333333%;
}
.offset-7\@xs-only {
margin-left: 58.3333333333%;
}
.col-8\@xs-only {
position: relative;
width: 100%;
padding-right: 0.9375rem;
padding-left: 0.9375rem;
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%;
}
.offset-8\@xs-only {
margin-left: 66.6666666667%;
}
.col-9\@xs-only {
position: relative;
width: 100%;
padding-right: 0.9375rem;
padding-left: 0.9375rem;
flex: 0 0 75%;
max-width: 75%;
}
.offset-9\@xs-only {
margin-left: 75%;
}
.col-10\@xs-only {
position: relative;
width: 100%;
padding-right: 0.9375rem;
padding-left: 0.9375rem;
flex: 0 0 83.3333333333%;
max-width: 83.3333333333%;
}
.offset-10\@xs-only {
margin-left: 83.3333333333%;
}
.col-11\@xs-only {
position: relative;
width: 100%;
padding-right: 0.9375rem;
padding-left: 0.9375rem;
flex: 0 0 91.6666666667%;
max-width: 91.6666666667%;
}
.offset-11\@xs-only {
margin-left: 91.6666666667%;
}
.col-12\@xs-only {
position: relative;
width: 100%;
padding-right: 0.9375rem;
padding-left: 0.9375rem;
flex: 0 0 100%;
max-width: 100%;
}
}
/* and so on */
@media (min-width: 36em) {
/*
* .col-auto\@sm
* .col-1\@sm
* .offset-1\@sm
* .col-2\@sm
* .offset-2\@sm
* .col-3\@sm
* .offset-3\@sm
* .col-4\@sm
* .offset-4\@sm
* .col-5\@sm
* .offset-5\@sm
* .col-6\@sm
* .offset-6\@sm
* .col-7\@sm
* .offset-7\@sm
* .col-8\@sm
* .offset-8\@sm
* .col-9\@sm
* .offset-9\@sm
* .col-10\@sm
* .offset-10\@sm
* .col-11\@sm
* .offset-11\@sm
* .col-12\@sm
*/
}
@media (min-width: 36em) and (max-width: 47.99875em) {
/*
* .col-auto\@sm-only
* .col-1\@sm-only
* .offset-1\@sm-only
* .col-2\@sm-only
* .offset-2\@sm-only
* .col-3\@sm-only
* .offset-3\@sm-only
* .col-4\@sm-only
* .offset-4\@sm-only
* .col-5\@sm-only
* .offset-5\@sm-only
* .col-6\@sm-only
* .offset-6\@sm-only
* .col-7\@sm-only
* .offset-7\@sm-only
* .col-8\@sm-only
* .offset-8\@sm-only
* .col-9\@sm-only
* .offset-9\@sm-only
* .col-10\@sm-only
* .offset-10\@sm-only
* .col-11\@sm-only
* .offset-11\@sm-only
* .col-12\@sm-only
*/
}
@media (min-width: 48em) {
/*
* .col-auto\@md
* .col-1\@md
* .offset-1\@md
* .col-2\@md
* .offset-2\@md
* .col-3\@md
* .offset-3\@md
* .col-4\@md
* .offset-4\@md
* .col-5\@md
* .offset-5\@md
* .col-6\@md
* .offset-6\@md
* .col-7\@md
* .offset-7\@md
* .col-8\@md
* .offset-8\@md
* .col-9\@md
* .offset-9\@md
* .col-10\@md
* .offset-10\@md
* .col-11\@md
* .offset-11\@md
* .col-12\@md
*/
}
@media (min-width: 48em) and (max-width: 63.99875em) {
/*
* .col-auto\@md-only
* .col-1\@md-only
* .offset-1\@md-only
* .col-2\@md-only
* .offset-2\@md-only
* .col-3\@md-only
* .offset-3\@md-only
* .col-4\@md-only
* .offset-4\@md-only
* .col-5\@md-only
* .offset-5\@md-only
* .col-6\@md-only
* .offset-6\@md-only
* .col-7\@md-only
* .offset-7\@md-only
* .col-8\@md-only
* .offset-8\@md-only
* .col-9\@md-only
* .offset-9\@md-only
* .col-10\@md-only
* .offset-10\@md-only
* .col-11\@md-only
* .offset-11\@md-only
* .col-12\@md-only
*/
}
@media (min-width: 64em) {
/*
* .col-auto\@lg
* .col-1\@lg
* .offset-1\@lg
* .col-2\@lg
* .offset-2\@lg
* .col-3\@lg
* .offset-3\@lg
* .col-4\@lg
* .offset-4\@lg
* .col-5\@lg
* .offset-5\@lg
* .col-6\@lg
* .offset-6\@lg
* .col-7\@lg
* .offset-7\@lg
* .col-8\@lg
* .offset-8\@lg
* .col-9\@lg
* .offset-9\@lg
* .col-10\@lg
* .offset-10\@lg
* .col-11\@lg
* .offset-11\@lg
* .col-12\@lg
*/
}
@media (min-width: 64em) and (max-width: 74.99875em) {
/*
* .col-auto\@lg-only
* .col-1\@lg-only
* .offset-1\@lg-only
* .col-2\@lg-only
* .offset-2\@lg-only
* .col-3\@lg-only
* .offset-3\@lg-only
* .col-4\@lg-only
* .offset-4\@lg-only
* .col-5\@lg-only
* .offset-5\@lg-only
* .col-6\@lg-only
* .offset-6\@lg-only
* .col-7\@lg-only
* .offset-7\@lg-only
* .col-8\@lg-only
* .offset-8\@lg-only
* .col-9\@lg-only
* .offset-9\@lg-only
* .col-10\@lg-only
* .offset-10\@lg-only
* .col-11\@lg-only
* .offset-11\@lg-only
* .col-12\@lg-only
*/
}
@media (min-width: 75em) {
/*
* .col-auto\@xl
* .col-1\@xl
* .offset-1\@xl
* .col-2\@xl
* .offset-2\@xl
* .col-3\@xl
* .offset-3\@xl
* .col-4\@xl
* .offset-4\@xl
* .col-5\@xl
* .offset-5\@xl
* .col-6\@xl
* .offset-6\@xl
* .col-7\@xl
* .offset-7\@xl
* .col-8\@xl
* .offset-8\@xl
* .col-9\@xl
* .offset-9\@xl
* .col-10\@xl
* .offset-10\@xl
* .col-11\@xl
* .offset-11\@xl
* .col-12\@xl
*/
}
@media (min-width: 75em) and (max-width: 99.99875em) {
/*
* .col-auto\@xl-only
* .col-1\@xl-only
* .offset-1\@xl-only
* .col-2\@xl-only
* .offset-2\@xl-only
* .col-3\@xl-only
* .offset-3\@xl-only
* .col-4\@xl-only
* .offset-4\@xl-only
* .col-5\@xl-only
* .offset-5\@xl-only
* .col-6\@xl-only
* .offset-6\@xl-only
* .col-7\@xl-only
* .offset-7\@xl-only
* .col-8\@xl-only
* .offset-8\@xl-only
* .col-9\@xl-only
* .offset-9\@xl-only
* .col-10\@xl-only
* .offset-10\@xl-only
* .col-11\@xl-only
* .offset-11\@xl-only
* .col-12\@xl-only
*/
}
@media (min-width: 100em) {
/*
* .col-auto\@xxl
* .col-1\@xxl
* .offset-1\@xxl
* .col-2\@xxl
* .offset-2\@xxl
* .col-3\@xxl
* .offset-3\@xxl
* .col-4\@xxl
* .offset-4\@xxl
* .col-5\@xxl
* .offset-5\@xxl
* .col-6\@xxl
* .offset-6\@xxl
* .col-7\@xxl
* .offset-7\@xxl
* .col-8\@xxl
* .offset-8\@xxl
* .col-9\@xxl
* .offset-9\@xxl
* .col-10\@xxl
* .offset-10\@xxl
* .col-11\@xxl
* .offset-11\@xxl
* .col-12\@xxl
*/
}
@media (min-width: 100em) {
/*
* .col-auto\@xxl-only
* .col-1\@xxl-only
* .offset-1\@xxl-only
* .col-2\@xxl-only
* .offset-2\@xxl-only
* .col-3\@xxl-only
* .offset-3\@xxl-only
* .col-4\@xxl-only
* .offset-4\@xxl-only
* .col-5\@xxl-only
* .offset-5\@xxl-only
* .col-6\@xxl-only
* .offset-6\@xxl-only
* .col-7\@xxl-only
* .offset-7\@xxl-only
* .col-8\@xxl-only
* .offset-8\@xxl-only
* .col-9\@xxl-only
* .offset-9\@xxl-only
* .col-10\@xxl-only
* .offset-10\@xxl-only
* .col-11\@xxl-only
* .offset-11\@xxl-only
* .col-12\@xxl-only
*/
}
col()
Grid col
entry point
Combine col-helper
, cols-helper
and cols-helper-with-bp
helpers in one helper.
@use '@wide/styles-grid' as grid;
@include grid.col;
Parameters
Type | Description | Mandatory | Default |
---|---|---|---|
Boolean |
Use cols-helper-with-bp()
|
false |
true |
Output
See col-helper
, cols-helper
and cols-helper-with-bp
outputs.
Authors
- Aymeric Assier - github.com/myeti
- Julien Martins Da Costa - github.com/jdacosta
Contributors
- Sébastien Robillard - github.com/robiseb
Resources
License
This project is licensed under the MIT License - see the licence file for details