From ed5fb63553b6bb69e05bf1f4d1114c707679938b Mon Sep 17 00:00:00 2001 From: Robillard Sebastien Date: Tue, 1 Sep 2020 14:13:27 +0200 Subject: [PATCH] Initial commit --- .editorconfig | 13 + .gitignore | 4 + .stylelintrc | 3 + README.md | 1175 ++++++++++++++++++++++++++++++++++++++ index.scss | 5 + licence | 21 + package.json | 32 ++ src/common.scss | 3 + src/grids/col.scss | 102 ++++ src/grids/container.scss | 83 +++ src/grids/row.scss | 90 +++ src/variables.scss | 115 ++++ 12 files changed, 1646 insertions(+) create mode 100644 .editorconfig create mode 100644 .gitignore create mode 100644 .stylelintrc create mode 100644 README.md create mode 100644 index.scss create mode 100644 licence create mode 100644 package.json create mode 100644 src/common.scss create mode 100644 src/grids/col.scss create mode 100644 src/grids/container.scss create mode 100644 src/grids/row.scss create mode 100644 src/variables.scss 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; + +/// +/// ----------------------------------------------------------------------------------------------- +///