intégration de (auto)grid dans Grillade
This commit is contained in:
Raphael Goetter
parent
383160ac70
commit
e580d2e311
10 changed files with 57 additions and 64 deletions
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "KNACSS",
|
||||
"version": "7.0.1",
|
||||
"version": "7.0.2",
|
||||
"homepage": "http://www.knacss.com/",
|
||||
"authors": [
|
||||
"Raphaël GOETTER, Alsacreations"
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
# changelog v7.0.2 (04 janvier 2018)
|
||||
- intégration de (auto)grid dans Grillade
|
||||
|
||||
# changelog v7.0.1 (22 décembre 2017)
|
||||
- meilleure gestion des hyphens
|
||||
- mise en commentaire du fix SVG our IE11
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
@media (min-width:480px){[class*=" grid-"],[class^=grid-]{display:grid;grid-auto-flow:dense}[class*=" grid-"].has-gutter,[class^=grid-].has-gutter{grid-gap:1rem}[class*=" grid-"].has-gutter-l,[class^=grid-].has-gutter-l{grid-gap:2rem}[class*=" grid-"].has-gutter-xl,[class^=grid-].has-gutter-xl{grid-gap:4rem}}[class*=grid-1]{grid-template-columns:repeat(1,1fr)}[class*=grid-2]{grid-template-columns:repeat(2,1fr)}[class*=grid-3]{grid-template-columns:repeat(3,1fr)}[class*=grid-4]{grid-template-columns:repeat(4,1fr)}[class*=grid-5]{grid-template-columns:repeat(5,1fr)}[class*=grid-6]{grid-template-columns:repeat(6,1fr)}[class*=grid-7]{grid-template-columns:repeat(7,1fr)}[class*=grid-8]{grid-template-columns:repeat(8,1fr)}[class*=grid-9]{grid-template-columns:repeat(9,1fr)}[class*=grid-10]{grid-template-columns:repeat(10,1fr)}[class*=grid-11]{grid-template-columns:repeat(11,1fr)}[class*=grid-12]{grid-template-columns:repeat(12,1fr)}[class*=col-1]{grid-column:auto/span 1}[class*=row-1]{grid-row:auto/span 1}[class*=col-2]{grid-column:auto/span 2}[class*=row-2]{grid-row:auto/span 2}[class*=col-3]{grid-column:auto/span 3}[class*=row-3]{grid-row:auto/span 3}[class*=col-4]{grid-column:auto/span 4}[class*=row-4]{grid-row:auto/span 4}[class*=col-5]{grid-column:auto/span 5}[class*=row-5]{grid-row:auto/span 5}[class*=col-6]{grid-column:auto/span 6}[class*=row-6]{grid-row:auto/span 6}[class*=col-7]{grid-column:auto/span 7}[class*=row-7]{grid-row:auto/span 7}[class*=col-8]{grid-column:auto/span 8}[class*=row-8]{grid-row:auto/span 8}[class*=col-9]{grid-column:auto/span 9}[class*=row-9]{grid-row:auto/span 9}[class*=col-10]{grid-column:auto/span 10}[class*=row-10]{grid-row:auto/span 10}[class*=col-11]{grid-column:auto/span 11}[class*=row-11]{grid-row:auto/span 11}[class*=col-12]{grid-column:auto/span 12}[class*=row-12]{grid-row:auto/span 12}@media (min-width:480px) and (max-width:767px){[class*=grid-][class*="-small-1"]{grid-template-columns:repeat(1,1fr)}[class*=col-][class*="-small-1"]{grid-column:auto/span 1}[class*=grid-][class*="-small-2"]{grid-template-columns:repeat(2,1fr)}[class*=col-][class*="-small-2"]{grid-column:auto/span 2}[class*=grid-][class*="-small-3"]{grid-template-columns:repeat(3,1fr)}[class*=col-][class*="-small-3"]{grid-column:auto/span 3}[class*=grid-][class*="-small-4"]{grid-template-columns:repeat(4,1fr)}[class*=col-][class*="-small-4"]{grid-column:auto/span 4}[class*="-small-all"]{grid-column:1/-1}}.item-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.item-last{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.grid-offset{visibility:hidden}.col-all{grid-column:1/-1}.row-all{grid-row:1/-1}
|
||||
@media (min-width:480px){[class*=" grid-"],[class^=grid-]{display:grid;grid-auto-flow:dense}[class*=" grid-"].has-gutter,[class^=grid-].has-gutter{grid-gap:1rem}[class*=" grid-"].has-gutter-l,[class^=grid-].has-gutter-l{grid-gap:2rem}[class*=" grid-"].has-gutter-xl,[class^=grid-].has-gutter-xl{grid-gap:4rem}}@media (min-width:480px){.autogrid,.grid{display:grid;grid-auto-flow:column;grid-auto-columns:1fr}.autogrid.has-gutter,.grid.has-gutter{grid-column-gap:1rem}.autogrid.has-gutter-l,.grid.has-gutter-l{grid-column-gap:2rem}.autogrid.has-gutter-xl,.grid.has-gutter-xl{grid-column-gap:4rem}}[class*=grid-2]{grid-template-columns:repeat(2,1fr)}[class*=grid-3]{grid-template-columns:repeat(3,1fr)}[class*=grid-4]{grid-template-columns:repeat(4,1fr)}[class*=grid-5]{grid-template-columns:repeat(5,1fr)}[class*=grid-6]{grid-template-columns:repeat(6,1fr)}[class*=grid-7]{grid-template-columns:repeat(7,1fr)}[class*=grid-8]{grid-template-columns:repeat(8,1fr)}[class*=grid-9]{grid-template-columns:repeat(9,1fr)}[class*=grid-10]{grid-template-columns:repeat(10,1fr)}[class*=grid-11]{grid-template-columns:repeat(11,1fr)}[class*=grid-12]{grid-template-columns:repeat(12,1fr)}[class*=col-1]{grid-column:auto/span 1}[class*=row-1]{grid-row:auto/span 1}[class*=col-2]{grid-column:auto/span 2}[class*=row-2]{grid-row:auto/span 2}[class*=col-3]{grid-column:auto/span 3}[class*=row-3]{grid-row:auto/span 3}[class*=col-4]{grid-column:auto/span 4}[class*=row-4]{grid-row:auto/span 4}[class*=col-5]{grid-column:auto/span 5}[class*=row-5]{grid-row:auto/span 5}[class*=col-6]{grid-column:auto/span 6}[class*=row-6]{grid-row:auto/span 6}[class*=col-7]{grid-column:auto/span 7}[class*=row-7]{grid-row:auto/span 7}[class*=col-8]{grid-column:auto/span 8}[class*=row-8]{grid-row:auto/span 8}[class*=col-9]{grid-column:auto/span 9}[class*=row-9]{grid-row:auto/span 9}[class*=col-10]{grid-column:auto/span 10}[class*=row-10]{grid-row:auto/span 10}[class*=col-11]{grid-column:auto/span 11}[class*=row-11]{grid-row:auto/span 11}[class*=col-12]{grid-column:auto/span 12}[class*=row-12]{grid-row:auto/span 12}@media (min-width:480px) and (max-width:767px){[class*=grid-][class*="-small-1"]{grid-template-columns:repeat(1,1fr)}[class*=col-][class*="-small-1"]{grid-column:auto/span 1}[class*=grid-][class*="-small-2"]{grid-template-columns:repeat(2,1fr)}[class*=col-][class*="-small-2"]{grid-column:auto/span 2}[class*=grid-][class*="-small-3"]{grid-template-columns:repeat(3,1fr)}[class*=col-][class*="-small-3"]{grid-column:auto/span 3}[class*=grid-][class*="-small-4"]{grid-template-columns:repeat(4,1fr)}[class*=col-][class*="-small-4"]{grid-column:auto/span 4}[class*="-small-all"]{grid-column:1/-1}}.item-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.item-last{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.grid-offset{visibility:hidden}.col-all{grid-column:1/-1}.row-all{grid-row:1/-1}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
@charset "UTF-8";
|
||||
/*!
|
||||
* 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/
|
||||
*/
|
||||
/* ----------------------------- */
|
||||
|
|
@ -1667,6 +1667,27 @@ ul.is-unstyled, ul.unstyled {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
.autogrid,
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: 1fr;
|
||||
}
|
||||
.autogrid.has-gutter,
|
||||
.grid.has-gutter {
|
||||
grid-column-gap: 1rem;
|
||||
}
|
||||
.autogrid.has-gutter-l,
|
||||
.grid.has-gutter-l {
|
||||
grid-column-gap: 2rem;
|
||||
}
|
||||
.autogrid.has-gutter-xl,
|
||||
.grid.has-gutter-xl {
|
||||
grid-column-gap: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
[class*="grid-2"] {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
|
@ -1893,32 +1914,6 @@ ul.is-unstyled, ul.unstyled {
|
|||
}
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==Autogrid object */
|
||||
/* ----------------------------- */
|
||||
/* recommanded HTML : <div class="autogrid">... some elements ...</div> */
|
||||
/* see https://codepen.io/raphaelgoetter/pen/zzwxEE */
|
||||
@media (min-width: 480px) {
|
||||
.autogrid,
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: 1fr;
|
||||
}
|
||||
.autogrid.has-gutter,
|
||||
.grid.has-gutter {
|
||||
grid-column-gap: 1rem;
|
||||
}
|
||||
.autogrid.has-gutter-l,
|
||||
.grid.has-gutter-l {
|
||||
grid-column-gap: 2rem;
|
||||
}
|
||||
.autogrid.has-gutter-xl,
|
||||
.grid.has-gutter-xl {
|
||||
grid-column-gap: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==skip links */
|
||||
/* ----------------------------- */
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -24,7 +24,7 @@ gulp.task('css', function () {
|
|||
});
|
||||
|
||||
gulp.task('grillade', function() {
|
||||
return gulp.src('./sass/components/grillade-grid.scss')
|
||||
return gulp.src('./sass/_library/grillade-grid.scss')
|
||||
.pipe(sass())
|
||||
.pipe(autoprefixer())
|
||||
.pipe(minifycss())
|
||||
|
|
@ -32,7 +32,7 @@ gulp.task('grillade', function() {
|
|||
});
|
||||
|
||||
gulp.task('grillade-flex', function() {
|
||||
return gulp.src('./sass/components/grillade-flex.scss')
|
||||
return gulp.src('./sass/_library/grillade-flex.scss')
|
||||
.pipe(sass())
|
||||
.pipe(autoprefixer())
|
||||
.pipe(minifycss())
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "knacss",
|
||||
"version": "7.0.1",
|
||||
"version": "7.0.2",
|
||||
"homepage": "http://www.knacss.com/",
|
||||
"bugs": "https://github.com/alsacreations/KNACSS/issues",
|
||||
"author": [
|
||||
|
|
|
|||
|
|
@ -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…
Reference in a new issue