mise à jour de gulp-css-minify et suppression des underscores
This commit is contained in:
Raphael Goetter
parent
2fe096dc77
commit
2a403d0acb
14 changed files with 58 additions and 476 deletions
1
css/grillade-flex.css
Normal file
1
css/grillade-flex.css
Normal file
File diff suppressed because one or more lines are too long
1
css/grillade-grid.css
Normal file
1
css/grillade-grid.css
Normal file
|
|
@ -0,0 +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}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
|||
@media (min-width:480px){[class*=" grid-"],[class^=grid-]{display:-ms-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]{-ms-grid-columns:(1fr) [1];grid-template-columns:repeat(1,1fr)}[class*=grid-2]{-ms-grid-columns:(1fr) [2];grid-template-columns:repeat(2,1fr)}[class*=grid-3]{-ms-grid-columns:(1fr) [3];grid-template-columns:repeat(3,1fr)}[class*=grid-4]{-ms-grid-columns:(1fr) [4];grid-template-columns:repeat(4,1fr)}[class*=grid-5]{-ms-grid-columns:(1fr) [5];grid-template-columns:repeat(5,1fr)}[class*=grid-6]{-ms-grid-columns:(1fr) [6];grid-template-columns:repeat(6,1fr)}[class*=grid-7]{-ms-grid-columns:(1fr) [7];grid-template-columns:repeat(7,1fr)}[class*=grid-8]{-ms-grid-columns:(1fr) [8];grid-template-columns:repeat(8,1fr)}[class*=grid-9]{-ms-grid-columns:(1fr) [9];grid-template-columns:repeat(9,1fr)}[class*=grid-10]{-ms-grid-columns:(1fr) [10];grid-template-columns:repeat(10,1fr)}[class*=grid-11]{-ms-grid-columns:(1fr) [11];grid-template-columns:repeat(11,1fr)}[class*=grid-12]{-ms-grid-columns:(1fr) [12];grid-template-columns:repeat(12,1fr)}[class*=col-1]{-ms-grid-column-span:1;-ms-grid-column:auto;grid-column:auto/span 1}[class*=row-1]{-ms-grid-row-span:1;-ms-grid-row:auto;grid-row:auto/span 1}[class*=col-2]{-ms-grid-column-span:2;-ms-grid-column:auto;grid-column:auto/span 2}[class*=row-2]{-ms-grid-row-span:2;-ms-grid-row:auto;grid-row:auto/span 2}[class*=col-3]{-ms-grid-column-span:3;-ms-grid-column:auto;grid-column:auto/span 3}[class*=row-3]{-ms-grid-row-span:3;-ms-grid-row:auto;grid-row:auto/span 3}[class*=col-4]{-ms-grid-column-span:4;-ms-grid-column:auto;grid-column:auto/span 4}[class*=row-4]{-ms-grid-row-span:4;-ms-grid-row:auto;grid-row:auto/span 4}[class*=col-5]{-ms-grid-column-span:5;-ms-grid-column:auto;grid-column:auto/span 5}[class*=row-5]{-ms-grid-row-span:5;-ms-grid-row:auto;grid-row:auto/span 5}[class*=col-6]{-ms-grid-column-span:6;-ms-grid-column:auto;grid-column:auto/span 6}[class*=row-6]{-ms-grid-row-span:6;-ms-grid-row:auto;grid-row:auto/span 6}[class*=col-7]{-ms-grid-column-span:7;-ms-grid-column:auto;grid-column:auto/span 7}[class*=row-7]{-ms-grid-row-span:7;-ms-grid-row:auto;grid-row:auto/span 7}[class*=col-8]{-ms-grid-column-span:8;-ms-grid-column:auto;grid-column:auto/span 8}[class*=row-8]{-ms-grid-row-span:8;-ms-grid-row:auto;grid-row:auto/span 8}[class*=col-9]{-ms-grid-column-span:9;-ms-grid-column:auto;grid-column:auto/span 9}[class*=row-9]{-ms-grid-row-span:9;-ms-grid-row:auto;grid-row:auto/span 9}[class*=col-10]{-ms-grid-column-span:10;-ms-grid-column:auto;grid-column:auto/span 10}[class*=row-10]{-ms-grid-row-span:10;-ms-grid-row:auto;grid-row:auto/span 10}[class*=col-11]{-ms-grid-column-span:11;-ms-grid-column:auto;grid-column:auto/span 11}[class*=row-11]{-ms-grid-row-span:11;-ms-grid-row:auto;grid-row:auto/span 11}[class*=col-12]{-ms-grid-column-span:12;-ms-grid-column:auto;grid-column:auto/span 12}[class*=row-12]{-ms-grid-row-span:12;-ms-grid-row:auto;grid-row:auto/span 12}@media (min-width:480px) and (max-width:767px){[class*=grid-][class*="-small-1"]{-ms-grid-columns:(1fr) [1];grid-template-columns:repeat(1,1fr)}[class*=col-][class*="-small-1"]{-ms-grid-column-span:1;-ms-grid-column:auto;grid-column:auto/span 1}[class*=grid-][class*="-small-2"]{-ms-grid-columns:(1fr) [2];grid-template-columns:repeat(2,1fr)}[class*=col-][class*="-small-2"]{-ms-grid-column-span:2;-ms-grid-column:auto;grid-column:auto/span 2}[class*=grid-][class*="-small-3"]{-ms-grid-columns:(1fr) [3];grid-template-columns:repeat(3,1fr)}[class*=col-][class*="-small-3"]{-ms-grid-column-span:3;-ms-grid-column:auto;grid-column:auto/span 3}[class*=grid-][class*="-small-4"]{-ms-grid-columns:(1fr) [4];grid-template-columns:repeat(4,1fr)}[class*=col-][class*="-small-4"]{-ms-grid-column-span:4;-ms-grid-column:auto;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,95 +0,0 @@
|
|||
/* --------------------------------------- */
|
||||
/* ==Grillade : ultra light Grid System */
|
||||
/* --------------------------------------- */
|
||||
/* Doc : @TODO */
|
||||
// WARNING: THIS IS NOT A COMPLETE GRID FRAMEWORK, just ultra light Grid System
|
||||
// if you need complex Grid :
|
||||
// 1- use vanilla CSS Grid Layout spec (perfect for you)
|
||||
// 2- use Bootstrap (good luck)
|
||||
|
||||
@if (not variable_exists(tiny)) or (not variable_exists(small)) or (not variable_exists(medium))
|
||||
{
|
||||
$tiny: 480px !global;
|
||||
$small: 576px !global;
|
||||
$medium: 768px !global;
|
||||
}
|
||||
|
||||
[class*=" grid-"],
|
||||
[class^="grid-"] {
|
||||
@media (min-width: $tiny) {
|
||||
display: grid;
|
||||
grid-auto-flow: dense;
|
||||
|
||||
// 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-gap: $size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// grid constructor (.grid-2 to .grid-12)
|
||||
@for $i from 1 through 12 {
|
||||
[class*="grid-#{$i}"] {
|
||||
grid-template-columns: repeat(#{$i}, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
// grid items constructor (.col-1 to .col-12, .row-1 to .row-12)
|
||||
@for $i from 1 through 12 {
|
||||
[class*="col-#{$i}"] {
|
||||
grid-column: auto / span #{$i};
|
||||
}
|
||||
|
||||
[class*="row-#{$i}"] {
|
||||
grid-row: auto / span #{$i};
|
||||
}
|
||||
}
|
||||
|
||||
/* intermediate breakpoint */
|
||||
// -small-X suffix means "X columns when < small screen"
|
||||
// example : .grid-4-small-2 will be 1 column (< tiny) then 2 columns (< small) then 4 columns
|
||||
@media (min-width: $tiny) and (max-width: ($medium - 1)) {
|
||||
@for $i from 1 through 4{
|
||||
[class*="grid-"][class*="-small-#{$i}"] {
|
||||
grid-template-columns: repeat(#{$i}, 1fr);
|
||||
}
|
||||
|
||||
[class*="col-"][class*="-small-#{$i}"] {
|
||||
grid-column: auto / span #{$i};
|
||||
}
|
||||
}
|
||||
[class*="-small-all"] {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
// grid order
|
||||
.item-first {
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.item-last {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
// grid offset
|
||||
.grid-offset {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
// spanning all collumns or rows
|
||||
.col-all {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.row-all {
|
||||
grid-row: 1 / -1;
|
||||
}
|
||||
|
|
@ -1619,7 +1619,6 @@ ul.is-unstyled, ul.unstyled {
|
|||
}
|
||||
.media-figure--center {
|
||||
-ms-flex-item-align: center;
|
||||
-ms-grid-row-align: center;
|
||||
align-self: center;
|
||||
}
|
||||
.media--reverse {
|
||||
|
|
@ -1637,7 +1636,6 @@ ul.is-unstyled, ul.unstyled {
|
|||
/* see https://codepen.io/raphaelgoetter/pen/zzwxEE */
|
||||
@media (min-width: 480px) {
|
||||
.autogrid {
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-column: 1fr;
|
||||
|
|
@ -2561,11 +2559,9 @@ button:focus {
|
|||
/* --------------------------------------- */
|
||||
/* ==Grillade : ultra light Grid System */
|
||||
/* --------------------------------------- */
|
||||
/* Doc : @TODO */
|
||||
@media (min-width: 480px) {
|
||||
[class*=" grid-"],
|
||||
[class^="grid-"] {
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
grid-auto-flow: dense;
|
||||
}
|
||||
|
|
@ -2584,245 +2580,173 @@ button:focus {
|
|||
}
|
||||
|
||||
[class*="grid-1"] {
|
||||
-ms-grid-columns: (1fr)[1];
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
|
||||
[class*="grid-2"] {
|
||||
-ms-grid-columns: (1fr)[2];
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
[class*="grid-3"] {
|
||||
-ms-grid-columns: (1fr)[3];
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
[class*="grid-4"] {
|
||||
-ms-grid-columns: (1fr)[4];
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
[class*="grid-5"] {
|
||||
-ms-grid-columns: (1fr)[5];
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
}
|
||||
|
||||
[class*="grid-6"] {
|
||||
-ms-grid-columns: (1fr)[6];
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
}
|
||||
|
||||
[class*="grid-7"] {
|
||||
-ms-grid-columns: (1fr)[7];
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
}
|
||||
|
||||
[class*="grid-8"] {
|
||||
-ms-grid-columns: (1fr)[8];
|
||||
grid-template-columns: repeat(8, 1fr);
|
||||
}
|
||||
|
||||
[class*="grid-9"] {
|
||||
-ms-grid-columns: (1fr)[9];
|
||||
grid-template-columns: repeat(9, 1fr);
|
||||
}
|
||||
|
||||
[class*="grid-10"] {
|
||||
-ms-grid-columns: (1fr)[10];
|
||||
grid-template-columns: repeat(10, 1fr);
|
||||
}
|
||||
|
||||
[class*="grid-11"] {
|
||||
-ms-grid-columns: (1fr)[11];
|
||||
grid-template-columns: repeat(11, 1fr);
|
||||
}
|
||||
|
||||
[class*="grid-12"] {
|
||||
-ms-grid-columns: (1fr)[12];
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
}
|
||||
|
||||
[class*="col-1"] {
|
||||
-ms-grid-column-span: 1;
|
||||
-ms-grid-column: auto;
|
||||
grid-column: auto/span 1;
|
||||
}
|
||||
|
||||
[class*="row-1"] {
|
||||
-ms-grid-row-span: 1;
|
||||
-ms-grid-row: auto;
|
||||
grid-row: auto/span 1;
|
||||
}
|
||||
|
||||
[class*="col-2"] {
|
||||
-ms-grid-column-span: 2;
|
||||
-ms-grid-column: auto;
|
||||
grid-column: auto/span 2;
|
||||
}
|
||||
|
||||
[class*="row-2"] {
|
||||
-ms-grid-row-span: 2;
|
||||
-ms-grid-row: auto;
|
||||
grid-row: auto/span 2;
|
||||
}
|
||||
|
||||
[class*="col-3"] {
|
||||
-ms-grid-column-span: 3;
|
||||
-ms-grid-column: auto;
|
||||
grid-column: auto/span 3;
|
||||
}
|
||||
|
||||
[class*="row-3"] {
|
||||
-ms-grid-row-span: 3;
|
||||
-ms-grid-row: auto;
|
||||
grid-row: auto/span 3;
|
||||
}
|
||||
|
||||
[class*="col-4"] {
|
||||
-ms-grid-column-span: 4;
|
||||
-ms-grid-column: auto;
|
||||
grid-column: auto/span 4;
|
||||
}
|
||||
|
||||
[class*="row-4"] {
|
||||
-ms-grid-row-span: 4;
|
||||
-ms-grid-row: auto;
|
||||
grid-row: auto/span 4;
|
||||
}
|
||||
|
||||
[class*="col-5"] {
|
||||
-ms-grid-column-span: 5;
|
||||
-ms-grid-column: auto;
|
||||
grid-column: auto/span 5;
|
||||
}
|
||||
|
||||
[class*="row-5"] {
|
||||
-ms-grid-row-span: 5;
|
||||
-ms-grid-row: auto;
|
||||
grid-row: auto/span 5;
|
||||
}
|
||||
|
||||
[class*="col-6"] {
|
||||
-ms-grid-column-span: 6;
|
||||
-ms-grid-column: auto;
|
||||
grid-column: auto/span 6;
|
||||
}
|
||||
|
||||
[class*="row-6"] {
|
||||
-ms-grid-row-span: 6;
|
||||
-ms-grid-row: auto;
|
||||
grid-row: auto/span 6;
|
||||
}
|
||||
|
||||
[class*="col-7"] {
|
||||
-ms-grid-column-span: 7;
|
||||
-ms-grid-column: auto;
|
||||
grid-column: auto/span 7;
|
||||
}
|
||||
|
||||
[class*="row-7"] {
|
||||
-ms-grid-row-span: 7;
|
||||
-ms-grid-row: auto;
|
||||
grid-row: auto/span 7;
|
||||
}
|
||||
|
||||
[class*="col-8"] {
|
||||
-ms-grid-column-span: 8;
|
||||
-ms-grid-column: auto;
|
||||
grid-column: auto/span 8;
|
||||
}
|
||||
|
||||
[class*="row-8"] {
|
||||
-ms-grid-row-span: 8;
|
||||
-ms-grid-row: auto;
|
||||
grid-row: auto/span 8;
|
||||
}
|
||||
|
||||
[class*="col-9"] {
|
||||
-ms-grid-column-span: 9;
|
||||
-ms-grid-column: auto;
|
||||
grid-column: auto/span 9;
|
||||
}
|
||||
|
||||
[class*="row-9"] {
|
||||
-ms-grid-row-span: 9;
|
||||
-ms-grid-row: auto;
|
||||
grid-row: auto/span 9;
|
||||
}
|
||||
|
||||
[class*="col-10"] {
|
||||
-ms-grid-column-span: 10;
|
||||
-ms-grid-column: auto;
|
||||
grid-column: auto/span 10;
|
||||
}
|
||||
|
||||
[class*="row-10"] {
|
||||
-ms-grid-row-span: 10;
|
||||
-ms-grid-row: auto;
|
||||
grid-row: auto/span 10;
|
||||
}
|
||||
|
||||
[class*="col-11"] {
|
||||
-ms-grid-column-span: 11;
|
||||
-ms-grid-column: auto;
|
||||
grid-column: auto/span 11;
|
||||
}
|
||||
|
||||
[class*="row-11"] {
|
||||
-ms-grid-row-span: 11;
|
||||
-ms-grid-row: auto;
|
||||
grid-row: auto/span 11;
|
||||
}
|
||||
|
||||
[class*="col-12"] {
|
||||
-ms-grid-column-span: 12;
|
||||
-ms-grid-column: auto;
|
||||
grid-column: auto/span 12;
|
||||
}
|
||||
|
||||
[class*="row-12"] {
|
||||
-ms-grid-row-span: 12;
|
||||
-ms-grid-row: auto;
|
||||
grid-row: auto/span 12;
|
||||
}
|
||||
|
||||
/* intermediate breakpoints */
|
||||
@media (min-width: 480px) and (max-width: 767px) {
|
||||
[class*="grid-"][class*="-small-1"] {
|
||||
-ms-grid-columns: (1fr)[1];
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
[class*="col-"][class*="-small-1"] {
|
||||
-ms-grid-column-span: 1;
|
||||
-ms-grid-column: auto;
|
||||
grid-column: auto/span 1;
|
||||
}
|
||||
[class*="grid-"][class*="-small-2"] {
|
||||
-ms-grid-columns: (1fr)[2];
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
[class*="col-"][class*="-small-2"] {
|
||||
-ms-grid-column-span: 2;
|
||||
-ms-grid-column: auto;
|
||||
grid-column: auto/span 2;
|
||||
}
|
||||
[class*="grid-"][class*="-small-3"] {
|
||||
-ms-grid-columns: (1fr)[3];
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
[class*="col-"][class*="-small-3"] {
|
||||
-ms-grid-column-span: 3;
|
||||
-ms-grid-column: auto;
|
||||
grid-column: auto/span 3;
|
||||
}
|
||||
[class*="grid-"][class*="-small-4"] {
|
||||
-ms-grid-columns: (1fr)[4];
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
[class*="col-"][class*="-small-4"] {
|
||||
-ms-grid-column-span: 4;
|
||||
-ms-grid-column: auto;
|
||||
grid-column: auto/span 4;
|
||||
}
|
||||
[class*="-small-all"] {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
17
gulpfile.js
17
gulpfile.js
|
|
@ -5,8 +5,7 @@ var gulp = require('gulp');
|
|||
var sass = require('gulp-sass');
|
||||
var concat = require('gulp-concat');
|
||||
var rename = require('gulp-rename');
|
||||
var minifycss = require('gulp-minify-css');
|
||||
// var sourcemaps = require('gulp-sourcemaps');
|
||||
var minifycss = require('gulp-clean-css');
|
||||
var autoprefixer = require('gulp-autoprefixer');
|
||||
|
||||
|
||||
|
|
@ -16,28 +15,24 @@ gulp.task('css', function () {
|
|||
.pipe(sass({
|
||||
outputStyle: 'expanded' // CSS non minifiée plus lisible ('}' à la ligne)
|
||||
}))
|
||||
.pipe(autoprefixer({ grid: true }))
|
||||
.pipe(autoprefixer())
|
||||
.pipe(rename('knacss-unminified.css'))
|
||||
.pipe(gulp.dest('./css/'))
|
||||
.pipe(rename('knacss.css'))
|
||||
//.pipe(sourcemaps.init())
|
||||
.pipe(minifycss())
|
||||
//.pipe(sourcemaps.write('.', {includeContent: false}))
|
||||
.pipe(gulp.dest('./css/'));
|
||||
});
|
||||
|
||||
gulp.task('grillade', function() {
|
||||
return gulp.src('./sass/components/_grillade.scss')
|
||||
.pipe(gulp.dest('./css/'))
|
||||
return gulp.src('./sass/components/grillade-grid.scss')
|
||||
.pipe(sass())
|
||||
.pipe(autoprefixer({ grid: true }))
|
||||
.pipe(autoprefixer())
|
||||
.pipe(minifycss())
|
||||
.pipe(gulp.dest('./css/'));
|
||||
});
|
||||
|
||||
gulp.task('grillade-v6', function() {
|
||||
return gulp.src('./sass/components/_grillade-v6.scss')
|
||||
.pipe(gulp.dest('./css/'))
|
||||
gulp.task('grillade-flex', function() {
|
||||
return gulp.src('./sass/components/grillade-flex.scss')
|
||||
.pipe(sass())
|
||||
.pipe(autoprefixer())
|
||||
.pipe(minifycss())
|
||||
|
|
|
|||
|
|
@ -32,9 +32,8 @@
|
|||
"gulp-rename": "latest",
|
||||
"gulp-sass": "latest",
|
||||
"gulp-concat": "latest",
|
||||
"gulp-minify-css": "latest",
|
||||
"gulp-autoprefixer": "latest",
|
||||
"gulp-sourcemaps": "latest"
|
||||
"gulp-clean-css": "latest",
|
||||
"gulp-autoprefixer": "latest"
|
||||
},
|
||||
"engines": {}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,145 +0,0 @@
|
|||
/* ---------------------------------- */
|
||||
/* ==Grillade v6 */
|
||||
/* ---------------------------------- */
|
||||
/* IMPORTANT : this is the KNACSS v6 old Grid System based on Flexbox */
|
||||
/* You only need it for projects on older browsers (IE11-) */
|
||||
|
||||
// Responsive breakpoints variables
|
||||
|
||||
// Warning : you should use your own values, regardless of the devices
|
||||
// Best practise : (max-width: ($BP - 1)) and (min-width: $BP)
|
||||
|
||||
$tiny: 480px !default; // or 'em' if you prefer, of course
|
||||
$small: 576px !default;
|
||||
$medium: 768px !default;
|
||||
$large: 992px !default;
|
||||
$extra-large: 1200px !default;
|
||||
|
||||
// gutter values for grid layouts. Unit can be: %, px, em, rem
|
||||
$grid-gutters: ( '': 1rem, '-l': 2rem, '-xl': 4rem );
|
||||
// IEfixing, see
|
||||
// https://github.com/alsacreations/KNACSS/issues/133;
|
||||
$iefix: 0.01px;
|
||||
@media (min-width: $small) {
|
||||
[class*=" grid-"],
|
||||
[class^="grid-"] {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
& > * {
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Multi-line grid constructor
|
||||
// example : .grid-perso { @include grid(12, 3rem); }
|
||||
@mixin grid($grid-number: 1, $own-gutter: 0) {
|
||||
& > * {
|
||||
width: calc(100% / #{$grid-number} - #{$iefix});
|
||||
}
|
||||
@each $affix, $size in $grid-gutters {
|
||||
&.has-gutter#{$affix} {
|
||||
margin-right: -$size / 2;
|
||||
margin-left: -$size / 2;
|
||||
|
||||
& > * {
|
||||
width: calc(100% / #{$grid-number} - #{$size} - #{$iefix});
|
||||
margin-right: $size / 2;
|
||||
margin-left: $size / 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
@if ($own-gutter != 0) {
|
||||
margin-right: -$own-gutter / 2;
|
||||
margin-left: -$own-gutter / 2;
|
||||
|
||||
& > * {
|
||||
width: calc(100% / #{$grid-number} - #{$own-gutter} - #{$iefix});
|
||||
margin-right: $own-gutter / 2;
|
||||
margin-left: $own-gutter / 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mono-line grid constructor (.grid)
|
||||
@media (min-width: $small) {
|
||||
.grid,
|
||||
.grid--reverse {
|
||||
display: flex;
|
||||
|
||||
& > * {
|
||||
flex: 1 1 0%;
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
@each $affix, $size in $grid-gutters {
|
||||
&.has-gutter#{$affix} > * + * {
|
||||
margin-left: calc(#{$size} - #{$iefix});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Constructing grids : will be compiled in CSS
|
||||
@media (min-width: $small) {
|
||||
@for $i from 2 through 12 {
|
||||
[class*="grid-#{$i}"] {
|
||||
@include grid(#{$i}, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Grid offsets
|
||||
.push {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
||||
.pull {
|
||||
margin-right: auto !important;
|
||||
}
|
||||
|
||||
// Grid order
|
||||
.item-first {
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.item-last {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
[class*="grid-"][class*="--reverse"] {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
// sizing individual children
|
||||
@media (min-width: $small) {
|
||||
@each $flow, $divider in ("full" "1"), ("one-half" "2"), ("one-third" "3"), ("one-quarter" "4"), ("one-fifth" "5"), ("one-sixth" "6"), ("two-thirds" "3 * 2"), ("three-quarters" "4 * 3"), ("five-sixths" "6 * 5") {
|
||||
.#{$flow} {
|
||||
flex: 0 0 auto;
|
||||
width: calc(100% / #{$divider} - #{$iefix});
|
||||
}
|
||||
@each $affix, $size in $grid-gutters {
|
||||
.has-gutter#{$affix} > .#{$flow} {
|
||||
width: calc(100% / #{$divider} - #{$size} - #{$iefix});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/* Responsive Small Breakpoint */
|
||||
// -small-X suffix means "X columns on small-medium screen"
|
||||
// example : .grid-4-small-2 will be 1 column (tiny and down) then 2 columns (until medium) then 4 columns
|
||||
@media (min-width: $small) and (max-width: ($medium - 1)) {
|
||||
@for $i from 1 through 4 {
|
||||
[class*="-small-#{$i}"] {
|
||||
& > * {
|
||||
width: calc(100% / #{$i} - #{$iefix});
|
||||
}
|
||||
@each $affix, $size in $grid-gutters {
|
||||
&.has-gutter#{$affix} > * {
|
||||
width: calc(100% / #{$i} - #{$size} - #{$iefix});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,96 +0,0 @@
|
|||
/* --------------------------------------- */
|
||||
/* ==Grillade : ultra light Grid System */
|
||||
/* --------------------------------------- */
|
||||
/* Doc : @TODO */
|
||||
// WARNING: THIS IS NOT A COMPLETE GRID FRAMEWORK, just ultra light Grid System
|
||||
// if you need complex Grid :
|
||||
// 1- use vanilla CSS Grid Layout spec (perfect for you)
|
||||
// 2- use Bootstrap (good luck)
|
||||
|
||||
@if (not variable_exists(tiny)) or (not variable_exists(small)) or (not variable_exists(medium)) or (not variable_exists(large))
|
||||
{
|
||||
$tiny: 480px !global;
|
||||
$small: 576px !global;
|
||||
$medium: 768px !global;
|
||||
$large: 992px !global;
|
||||
}
|
||||
|
||||
[class*=" grid-"],
|
||||
[class^="grid-"] {
|
||||
@media (min-width: $tiny) {
|
||||
display: grid;
|
||||
grid-auto-flow: dense;
|
||||
|
||||
// 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-gap: $size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// grid constructor (.grid-2 to .grid-12)
|
||||
@for $i from 1 through 12 {
|
||||
[class*="grid-#{$i}"] {
|
||||
grid-template-columns: repeat(#{$i}, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
// grid items constructor (.col-1 to .col-12, .row-1 to .row-12)
|
||||
@for $i from 1 through 12 {
|
||||
[class*="col-#{$i}"] {
|
||||
grid-column: auto / span #{$i};
|
||||
}
|
||||
|
||||
[class*="row-#{$i}"] {
|
||||
grid-row: auto / span #{$i};
|
||||
}
|
||||
}
|
||||
|
||||
/* intermediate breakpoints */
|
||||
// -small-X suffix means "X columns when < medium screen"
|
||||
// example : .grid-4-small-2 will be 1 column (< tiny) then 2 columns (< medium) then 4 columns
|
||||
@media (min-width: $tiny) and (max-width: ($medium - 1)) {
|
||||
@for $i from 1 through 4{
|
||||
[class*="grid-"][class*="-small-#{$i}"] {
|
||||
grid-template-columns: repeat(#{$i}, 1fr);
|
||||
}
|
||||
|
||||
[class*="col-"][class*="-small-#{$i}"] {
|
||||
grid-column: auto / span #{$i};
|
||||
}
|
||||
}
|
||||
[class*="-small-all"] {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
// grid order
|
||||
.item-first {
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.item-last {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
// grid offset
|
||||
.grid-offset {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
// spanning all collumns or rows
|
||||
.col-all {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.row-all {
|
||||
grid-row: 1 / -1;
|
||||
}
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
/* --------------------------------------- */
|
||||
/* ==Grillade : ultra light Grid System */
|
||||
/* --------------------------------------- */
|
||||
/* Doc : @TODO */
|
||||
// WARNING: THIS IS NOT A COMPLETE GRID FRAMEWORK, just ultra light Grid System
|
||||
// if you need complex Grid :
|
||||
// 1- use vanilla CSS Grid Layout spec (perfect for you)
|
||||
|
|
@ -63,8 +63,9 @@
|
|||
@import "components/_badges.scss"; // badges styles
|
||||
@import "components/_alerts.scss"; // alerts styles
|
||||
|
||||
// New Grid System by default (Grid Layout). If you prefer old "Flexbox" Grid System, replace file with "components/_grillade-flex.scss"
|
||||
@import "components/_grillade-grid.scss"; // grid system with Grid Layout
|
||||
// New Grid System by default (Grid Layout). If you prefer old "Flexbox" Grid System, replace file with "components/grillade-flex.scss"
|
||||
// Note that none of these file is prefixed by an underscore, in order to compile them.
|
||||
@import "components/grillade-grid.scss"; // grid system with Grid Layout
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue