diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..2477938 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,13 @@ +# editorconfig.org +root = true + +[*] +indent_style = space +indent_size = 2 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = false + +[*.md] +trim_trailing_whitespace = false \ No newline at end of file diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..727b779 --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +node_modules +dist +lib +package-lock.json \ No newline at end of file diff --git a/.stylelintrc b/.stylelintrc new file mode 100644 index 0000000..178d395 --- /dev/null +++ b/.stylelintrc @@ -0,0 +1,3 @@ +{ + "extends": "@wide/stylelint-config" +} diff --git a/README.md b/README.md new file mode 100644 index 0000000..8bcb11d --- /dev/null +++ b/README.md @@ -0,0 +1,1175 @@ +# 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](#variables) +- [container](#container) +- [row](#row) +- [col](#col) + +
+
+ +## 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. + +```scss +$grid-prefix: '' !default; +``` + +#### `$grid-prefix` + +Grid gutter length. **Must be a pixel value.** + +```scss +$grid-gutter: 15px !default; +``` + +
+
+ +## container + +- [Variables](#container-variables) + - [`$containers`](#container-variables-containers) + - [`$containers-prefix`](#container-variables-containers-prefix) +- [Mixins](#container-mixins) + - [`container-helper()`](#container-helper) + - [`container-helper-with-bp()`](#container-helper-with-bp) + - [`container()`](#container-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. + +```scss +$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. + +```scss +$containers-prefix: $grid-prefix !default; +``` + +
+ +### Mixins + +#### `container-helper()` + +Set all container classes. + +```scss +@use '@wide/styles-grid' as grid; + +@include grid.container-helper; +``` + +##### Output +```css +.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. + +```scss +@use '@wide/styles-grid' as grid; + +@include grid.container-helper-with-bp; +``` + +##### Output +```css +@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`](#container-helper) and [`container-helper-with-bp`](#container-helper-with-bp) helpers in one helper. + +```scss +@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`](#container-helper) and [`container-helper-with-bp`](#container-helper-with-bp) outputs. + +
+
+ +## row + +- [Variables](#row-variables) + - [`$rows-cols-max-columns`](#row-variables-rows-cols-max-columns) + - [`$rows-prefix`](#row-variables-rows-prefix) +- [Mixins](#row-mixins) + - [`row-helper()`](#row-helper) + - [`row-helper-with-bp()`](#row-helper-with-bp) + - [`row()`](#row-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. + +```scss +$rows-cols-max-columns: 6 !default; +``` + +#### `$rows-prefix` +Row classes prefix. + +```scss +$rows-prefix: $grid-prefix !default; +``` + +
+ +### Mixins + +#### `row-helper()` + +Set row class. + +```scss +@use '@wide/styles-grid' as grid; + +@include grid.row-helper; +``` + +##### Output +```css +.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`](#row-variables-rows-cols-max-columns) variable. +Specify on a parent element (e.g., `.row`) to force immediate children into NN numberof columns. + +```scss +@use '@wide/styles-grid' as grid; + +@include grid.row-cols-helper; +``` + +##### Output +```css +.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. + +```scss +@use '@wide/styles-grid' as grid; + +@include grid.row-cols-helper-with-bp; +``` + +##### Output +```css +@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-helper), [`row-cols-helper`](#row-cols-helper) and [`row-cols-helper-with-bp`](#row-cols-helper-with-bp) helpers in one helper. + +```scss +@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-helper), [`row-cols-helper`](#row-cols-helper) and [`row-cols-helper-with-bp`](#row-cols-helper-with-bp) outputs. + +
+
+ + +## col + +- [Variables](#col-variables) + - [`$cols`](#col-variables-cols) + - [`$cols-prefix`](#col-variables-cols-prefix) + - [`$offset-prefix`](#col-variables-offset-prefix) +- [Mixins](#col-mixins) + - [`col-helper()`](#col-helper) + - [`cols-helper()`](#cols-helper) + - [`cols-helper-with-bp()`](#cols-helper-with-bp) + - [`col()`](#col-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. + +```scss +$cols: 12 !default; +``` + +#### `$cols-prefix` + +Col classes prefix. + +```scss +$cols-prefix: $grid-prefix !default; +``` + +#### `$offset-prefix` + +Offset classes prefix. + +```scss +$offset-prefix: $grid-prefix !default; +``` + +
+ +### Mixins + +#### `col-helper()` + +Set col class. + +```scss +@use '@wide/styles-grid' as grid; + +@include grid.col-helper; +``` + +##### Output +```css +.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`](#col-variables-cols) variable. + +```scss +@use '@wide/styles-grid' as grid; + +@include grid.cols-helper; +``` + +##### Output +```css +.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`](#col-variables-cols) variable with breakpoints media queries. + +```scss +@use '@wide/styles-grid' as grid; + +@include grid.cols-helper-with-bp; +``` + +##### Output +```css +@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`](#col-helper), [`cols-helper`](#cols-helper) and [`cols-helper-with-bp`](#cols-helper-with-bp) helpers in one helper. + +```scss +@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`](#col-helper), [`cols-helper`](#cols-helper) and [`cols-helper-with-bp`](#cols-helper-with-bp) outputs. + +
+
+ +## Authors + +- **Aymeric Assier** - [github.com/myeti](https://github.com/myeti) +- **Julien Martins Da Costa** - [github.com/jdacosta](https://github.com/jdacosta) + +
+ +### Contributors + +- **Sébastien Robillard** - [github.com/robiseb](https://github.com/robiseb) + +
+
+ +## Resources +- [Bootstrap](https://github.com/twbs/bootstrap) + +
+
+ +## License + +This project is licensed under the MIT License - see the [licence](licence) file for details \ No newline at end of file diff --git a/index.scss b/index.scss new file mode 100644 index 0000000..702707c --- /dev/null +++ b/index.scss @@ -0,0 +1,5 @@ +@use 'src/common'; + +@forward 'src/grids/container'; +@forward 'src/grids/row'; +@forward 'src/grids/col'; diff --git a/licence b/licence new file mode 100644 index 0000000..74f59ff --- /dev/null +++ b/licence @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2020, Aymeric Assier and Julien Martins Da Costa. + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..80098de --- /dev/null +++ b/package.json @@ -0,0 +1,32 @@ +{ + "name": "@wide/styles-grid", + "version": "2.0.0", + "description": "SCSS Modulus UI Grid", + "license": "MIT", + "author": "Sébastien Robillard (https://github.com/robiseb)", + "contributors": [ + "Aymeric Assier (https://github.com/myeti)", + "Julien Martins Da Costa (https://github.com/jdacosta)", + "Sébastien Robillard (https://github.com/robiseb)" + ], + "repository": { + "type": "git", + "url": "https://github.com/wide/styles-grid.git" + }, + "scripts": { + "lint": "stylelint *.scss src --formatter verbose" + }, + "engines": { + "node": ">=10.13.0" + }, + "dependencies": { + "@wide/styles-utils": "^2.0.0" + }, + "devDependencies": { + "@wide/stylelint-config": "^2.0.0", + "stylelint": "^13.5.0", + "stylelint-config-property-sort-order-smacss": "^6.3.0", + "stylelint-order": "^4.0.0", + "stylelint-scss": "^3.17.2" + } +} diff --git a/src/common.scss b/src/common.scss new file mode 100644 index 0000000..1236d8e --- /dev/null +++ b/src/common.scss @@ -0,0 +1,3 @@ +* { + box-sizing: border-box; +} diff --git a/src/grids/col.scss b/src/grids/col.scss new file mode 100644 index 0000000..1997067 --- /dev/null +++ b/src/grids/col.scss @@ -0,0 +1,102 @@ +@use 'sass:list'; +@use 'sass:map'; +@use 'sass:meta'; +@use '@wide/styles-utils' as utils; +@use '../variables' as *; + +/// +/// Common rules. +/// +@mixin col-common-rules() { + position: relative; + width: 100%; + padding-right: utils.rem($grid-gutter); + padding-left: utils.rem($grid-gutter); +} + +/// +/// Set col class. +/// +@mixin col-helper() { + .#{$cols-prefix}col { + @include col-common-rules; + + flex-basis: 0; + flex-grow: 1; + max-width: 100%; + } +} + +/// +/// Set all cols classes. +/// +@mixin cols-helper($bp: '') { + .#{$cols-prefix}col-auto#{$bp} { + @include col-common-rules; + + flex: 0 0 auto; + width: auto; + max-width: 100%; + } + + @for $i from 1 through $cols { + $percent: 100% / ($cols / $i); + + .#{$cols-prefix}col-#{$i}#{$bp} { + @include col-common-rules; + + flex: 0 0 $percent; + max-width: $percent; + } + + @if $i != $cols { + .#{$offset-prefix}offset-#{$i}#{$bp} { + margin-left: $percent; + } + } + } +} + +/// +/// Set all cols classes with breakpoints media queries. +/// +/// @requires {mixin} utils-bp-up +/// @requires {string} utils-delimiter-breakpoint +/// +/// @see cols-helper +/// +@mixin cols-helper-with-bp() { + @each $breakpoint, $value in utils.$breakpoints { + $index: list.index(map.keys(utils.$breakpoints), $breakpoint); + + @if $index > 1 { + @include utils.bp-up($breakpoint) { + @include cols-helper(#{utils.$delimiter-breakpoint}#{$breakpoint}); + } + } + + @include utils.bp-only($breakpoint) { + @include cols-helper('#{utils.$delimiter-breakpoint}#{$breakpoint}-only'); + } + } +} + +/// +/// Helper `col` entry point +/// +/// Combine `col-helper`, `cols-helper` and `cols-helper-with-bp` helpers in one helper. +/// +/// @param {boolean} $with-bp - Add breakpoint classes. +/// +/// @see col-helper +/// @see cols-helper +/// @see cols-helper-with-bp +/// +@mixin col($with-bp: true) { + @include col-helper; + @include cols-helper; + + @if $with-bp { + @include cols-helper-with-bp; + } +} diff --git a/src/grids/container.scss b/src/grids/container.scss new file mode 100644 index 0000000..e980112 --- /dev/null +++ b/src/grids/container.scss @@ -0,0 +1,83 @@ +@use 'sass:list'; +@use 'sass:map'; +@use 'sass:meta'; +@use '@wide/styles-utils' as utils; +@use '../variables' as *; + +/// +/// Set all container classes. +/// +/// @param {string} $bp - Breakpoint string key. +/// +@mixin container-helper($bp: '') { + @if meta.variable-exists(grid-gutter) { + .#{$containers-prefix}container#{$bp}, .#{$containers-prefix}container-fluid { + width: 100%; + margin-right: auto; + margin-left: auto; + padding-right: utils.rem($grid-gutter); + padding-left: utils.rem($grid-gutter); + } + } @else { + @error '[style-grids -> styles-grid -> container] : The variable $grid-gutter is undefined'; + } +} + +/// +/// Set all container classes with breakpoints media queries. +/// +/// @requires {mixin} utils-bp-up +/// @requires {string} utils-delimiter-breakpoint +/// +/// @see container-helper +/// +@mixin container-helper-with-bp() { + @if meta.variable-exists(containers) { + $containers-classes: ''; + + @each $breakpoint, $properties in $containers { + // set breakpoint properties + @if $containers-classes != '' { + // output: .container\@sm, .container\@md, ... + $containers-classes: '#{$containers-classes}, .#{$containers-prefix}container#{utils.$delimiter-breakpoint}#{$breakpoint}'; + } @else { + // output: @sm + $containers-classes: #{utils.$delimiter-breakpoint}#{$breakpoint}; + } + + @each $property in $properties { + // security: check there are two properties (css attribute and value) + @if list.length($property) == 2 { + @include utils.bp-up($breakpoint) { + .#{$containers-prefix}container, .#{$containers-prefix}container#{$containers-classes} { + #{list.nth($property, 1)}: list.nth($property, 2); + } + } + } + } + } + + // set default properties + @include container-helper($containers-classes); + } @else { + @error '[style-grids -> styles-grid -> container] : The variable $containers is undefined'; + } +} + +/// +/// Helper `container` entry point +/// +/// Combine both `container-helper` and `container-helper-with-bp` helpers in one helper. +/// +/// @param {boolean} $with-bp - Add breakpoint classes. +/// +/// @see container-helper +/// @see container-helper-with-bp +/// +@mixin container($with-bp: true) { + @include container-helper; + + @if $with-bp { + @include container-helper-with-bp; + } +} diff --git a/src/grids/row.scss b/src/grids/row.scss new file mode 100644 index 0000000..61a4ba8 --- /dev/null +++ b/src/grids/row.scss @@ -0,0 +1,90 @@ +@use 'sass:list'; +@use 'sass:map'; +@use 'sass:meta'; +@use '@wide/styles-utils' as utils; +@use '../variables' as *; + +/// +/// Set row class. +/// +@mixin row-helper() { + @if meta.variable-exists(grid-gutter) { + .#{$rows-prefix}row { + display: flex; + flex-wrap: wrap; + margin-right: -#{utils.rem($grid-gutter)}; + margin-left: -#{utils.rem($grid-gutter)}; + } + } @else { + @error '[style-grids -> styles-grid -> row] : The variable $grid-gutter is undefined'; + } +} + +/// +/// Set all row-cols classes. +/// Specify on a parent element(e.g., .row) to force immediate children +/// into NN numberof columns. +/// +/// @requires {number} rows-cols-max-columns +/// +@mixin row-cols-helper($bp: '') { + @if meta.type-of($rows-cols-max-columns) != number { + @error '`#{$rows-cols-max-columns}` needs to be a number.'; + } + + @for $i from 1 through $rows-cols-max-columns { + $percent: 100% / $i; + + .#{$rows-prefix}row-cols-#{$i}#{$bp} { + > *, + > .#{$cols-prefix}col { + flex: 0 0 $percent; + max-width: $percent; + } + } + } +} + +/// +/// Set all row-cols classes with breakpoints media queries. +/// +/// @requires {mixin} utils-bp-up +/// @requires {string} utils-delimiter-breakpoint +/// +/// @see row-cols-helper +/// +@mixin row-cols-helper-with-bp() { + @each $breakpoint, $value in utils.$breakpoints { + $index: list.index(map.keys(utils.$breakpoints), $breakpoint); + + @if $index > 1 { + @include utils.bp-up($breakpoint) { + @include row-cols-helper(#{utils.$delimiter-breakpoint}#{$breakpoint}); + } + } + + @include utils.bp-only($breakpoint) { + @include row-cols-helper('#{utils.$delimiter-breakpoint}#{$breakpoint}-only'); + } + } +} + +/// +/// Helper `row` entry point +/// +/// Combine `row-helper`, `row-cols-helper` and `row-cols-helper-with-bp` helpers in one helper. +/// +/// @param {boolean} $with-bp - Add breakpoint classes. +/// +/// @see row-helper +/// @see row-cols-helper +/// @see row-cols-helper-with-bp +/// +@mixin row($with-bp: true) { + @include row-helper; + @include row-cols-helper; + + @if $with-bp { + @include row-cols-helper-with-bp; + } +} diff --git a/src/variables.scss b/src/variables.scss new file mode 100644 index 0000000..7e383b1 --- /dev/null +++ b/src/variables.scss @@ -0,0 +1,115 @@ +/// +/// Prefix for all grid classes. +/// +/// @type string +/// +/// @access private +/// +$grid-prefix: '' !default; + +/// +/// Grid gutter length. +/// Must be a pixel value. +/// +/// @type Length +/// +/// @access private +/// +$grid-gutter: 15px !default; + +/// +/// ----------------------------------------------------------------------------------------------- +/// CONTAINER +/// ----------------------------------------------------------------------------------------------- +/// + +/// +/// Container's breakpoints list. +/// +/// @type List +/// @prop {string} value - css properties +/// +/// @access private +/// +$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 +/// +/// @type string +/// +/// @access private +/// +$containers-prefix: $grid-prefix !default; + +/// +/// ----------------------------------------------------------------------------------------------- +/// ROWS +/// ----------------------------------------------------------------------------------------------- +/// + +/// +/// Max columns for basic provided `.row-col-{bp}-{col}` classes. +/// +/// @type number +/// +/// @access private +/// +$rows-cols-max-columns: 6 !default; + +/// +/// Rows prefix +/// +/// @type string +/// +/// @access private +/// +$rows-prefix: $grid-prefix !default; + +/// +/// ----------------------------------------------------------------------------------------------- +/// COLS +/// ----------------------------------------------------------------------------------------------- +/// + +/// +/// Number of columns in the grid. +/// +/// @type number +/// +/// @access private +/// +$cols: 12 !default; + +/// +/// Cols prefix +/// +/// @type string +/// +/// @access private +/// +$cols-prefix: $grid-prefix !default; +$offset-prefix: $grid-prefix !default; + +/// +/// ----------------------------------------------------------------------------------------------- +///