intégration de (auto)grid dans Grillade
This commit is contained in:
parent
383160ac70
commit
e580d2e311
10 changed files with 57 additions and 64 deletions
|
@ -11,7 +11,7 @@
|
|||
$tiny: 480px !default;
|
||||
$medium: 768px !default;
|
||||
|
||||
|
||||
// classic Grid
|
||||
[class*=" grid-"],
|
||||
[class^="grid-"] {
|
||||
@media (min-width: $tiny) {
|
||||
|
@ -33,6 +33,29 @@ $medium: 768px !default;
|
|||
}
|
||||
}
|
||||
|
||||
// autogrid
|
||||
.autogrid,
|
||||
.grid {
|
||||
@media (min-width: $tiny) {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: 1fr;
|
||||
|
||||
// gutters
|
||||
@if variable_exists(grid-gutters) {
|
||||
$gutter: $grid-gutters !global;
|
||||
|
||||
} @else {
|
||||
$gutter: ( '': 1rem, '-l': 2rem, '-xl': 4rem ) !global;
|
||||
}
|
||||
@each $affix, $size in $gutter {
|
||||
&.has-gutter#{$affix} {
|
||||
grid-column-gap: $size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// grid constructor (.grid-2 to .grid-12)
|
||||
@for $i from 2 through 12 {
|
||||
[class*="grid-#{$i}"] {
|
||||
|
|
|
@ -1,27 +0,0 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Autogrid object */
|
||||
/* ----------------------------- */
|
||||
/* recommanded HTML : <div class="autogrid">... some elements ...</div> */
|
||||
/* see https://codepen.io/raphaelgoetter/pen/zzwxEE */
|
||||
|
||||
.autogrid,
|
||||
.grid {
|
||||
@media (min-width: $tiny) {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: 1fr;
|
||||
|
||||
// gutters
|
||||
@if variable_exists(grid-gutters) {
|
||||
$gutter: $grid-gutters !global;
|
||||
|
||||
} @else {
|
||||
$gutter: ( '': 1rem, '-l': 2rem, '-xl': 4rem ) !global;
|
||||
}
|
||||
@each $affix, $size in $gutter {
|
||||
&.has-gutter#{$affix} {
|
||||
grid-column-gap: $size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,5 +1,5 @@
|
|||
/*!
|
||||
* www.KNACSS.com v7.0.1 (december,22 2017) @author: Alsacreations, Raphael Goetter
|
||||
* www.KNACSS.com v7.0.2 (januar, 4 2017) @author: Alsacreations, Raphael Goetter
|
||||
* Licence WTFPL http://www.wtfpl.net/
|
||||
*/
|
||||
|
||||
|
@ -54,7 +54,6 @@
|
|||
|
||||
// Components
|
||||
@import "components/media"; // media object
|
||||
@import "components/autogrid"; // media autogrid
|
||||
@import "components/skip-links"; // skip links
|
||||
@import "components/tables"; // data tables consistency
|
||||
@import "components/forms"; // forms consistency and styles
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue