new grillade in grid layout
This commit is contained in:
Raphael Goetter
parent
7bd7fb9807
commit
838f77cb6d
7 changed files with 587 additions and 888 deletions
|
|
@ -1,5 +1,7 @@
|
||||||
# changelog v7.0.0beta (1er août 2017)
|
# changelog v7.0.0beta (1er août 2017)
|
||||||
- architecture globale revisitée (vendor, config, library, components)
|
- architecture globale revisitée (vendor, config, library, components)
|
||||||
|
- refonte complète du système de grille (dorénavant basé sur Grid Layout)
|
||||||
|
- création d'un mixin de grille
|
||||||
- normalize.css v7.0.0
|
- normalize.css v7.0.0
|
||||||
- refonte complète des boutons, avec possibilités de variantes (primary, success, warning, etc.)
|
- refonte complète des boutons, avec possibilités de variantes (primary, success, warning, etc.)
|
||||||
- ajout des badges (tags), avec possibilités de variantes (primary, success, warning, etc.)
|
- ajout des badges (tags), avec possibilités de variantes (primary, success, warning, etc.)
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
// Responsive breakpoints variables
|
// Responsive breakpoints variables
|
||||||
|
|
||||||
// Warning : you should use your own values, regardless of the devices
|
// Warning : you should use your own values, regardless of the devices
|
||||||
// Best practise : (max-width: ($BP - 1)) and (min-width: $BP)
|
// Best practise is Mobile First: (max-width: ($BP - 1)) and (min-width: $BP)
|
||||||
|
|
||||||
$tiny: 480px !default; // or 'em' if you prefer, of course
|
$tiny: 480px !default; // or 'em' if you prefer, of course
|
||||||
$small: 576px !default;
|
$small: 576px !default;
|
||||||
|
|
@ -9,96 +9,70 @@ $medium: 768px !default;
|
||||||
$large: 992px !default;
|
$large: 992px !default;
|
||||||
$extra-large: 1200px !default;
|
$extra-large: 1200px !default;
|
||||||
|
|
||||||
/* ---------------------------------- */
|
/* --------------------------------------- */
|
||||||
/* ==Grillade : Simple Grid System */
|
/* ==Grillade : ultra light Grid System */
|
||||||
/* ---------------------------------- */
|
/* --------------------------------------- */
|
||||||
/* Doc : http://grillade.knacss.com */
|
/* Doc : @TODO */
|
||||||
// gutter values for grid layouts. Unit can be: %, px, em, rem
|
// WARNING: THIS IS NOT A COMPLETE GRID FRAMEWORK, just ultra light Grid System
|
||||||
$grid-gutters: ( '': 1rem, '-l': 2rem, '-xl': 4rem );
|
// if you need complex Grid :
|
||||||
// IEfixing, see
|
// 1- use vanilla CSS Grid Layout spec (perfect for you)
|
||||||
// https://github.com/alsacreations/KNACSS/issues/133;
|
// 2- use Bootstrap (good luck)
|
||||||
$iefix: 0.01px;
|
|
||||||
@media (min-width: $small) {
|
|
||||||
[class*=" grid-"],
|
|
||||||
[class^="grid-"] {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
& > * {
|
[class*=" grid-"],
|
||||||
box-sizing: border-box;
|
[class^="grid-"] {
|
||||||
min-width: 0;
|
@media (min-width: $tiny) {
|
||||||
min-height: 0;
|
display: grid;
|
||||||
}
|
grid-auto-flow: dense;
|
||||||
}
|
|
||||||
}
|
|
||||||
// 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;
|
|
||||||
|
|
||||||
& > * {
|
// gutters
|
||||||
width: calc(100% / #{$grid-number} - #{$size} - #{$iefix});
|
@if variable_exists(grid-gutters) {
|
||||||
margin-right: $size / 2;
|
$gutter: $grid-gutters !global;
|
||||||
margin-left: $size / 2;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
@else {
|
||||||
@if ($own-gutter != 0) {
|
$gutter: ( '': 1rem, '-l': 2rem, '-xl': 4rem ) !global;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
}
|
@each $affix, $size in $gutter {
|
||||||
}
|
&.has-gutter#{$affix} {
|
||||||
// Mono-line grid constructor (.grid)
|
grid-gap: $size;
|
||||||
@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) {
|
// grid constructor (.grid-2 to .grid-12)
|
||||||
@for $i from 2 through 12 {
|
@for $i from 2 through 12 {
|
||||||
[class*="grid-#{$i}"] {
|
[class*="grid-#{$i}"] {
|
||||||
@include grid(#{$i}, 0);
|
grid-template-columns: repeat(#{$i}, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// grid items constructor (.col-2 to .col-12, .row-2 to .row-12)
|
||||||
|
@for $i from 2 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: ($small -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};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Grid offsets
|
// grid order
|
||||||
.push {
|
|
||||||
margin-left: auto !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pull {
|
|
||||||
margin-right: auto !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Grid order
|
|
||||||
.item-first {
|
.item-first {
|
||||||
order: -1;
|
order: -1;
|
||||||
}
|
}
|
||||||
|
|
@ -107,37 +81,16 @@ $iefix: 0.01px;
|
||||||
order: 1;
|
order: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
[class*="grid-"][class*="--reverse"] {
|
// grid offset
|
||||||
flex-direction: row-reverse;
|
.grid-offset {
|
||||||
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
// sizing individual children
|
|
||||||
@media (min-width: $small) {
|
// spanning all collumns or rows
|
||||||
@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") {
|
.col-all {
|
||||||
.#{$flow} {
|
grid-column: 1 / -1;
|
||||||
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"
|
.row-all {
|
||||||
// example : .grid-4-small-2 will be 1 column (tiny and down) then 2 columns (until medium) then 4 columns
|
grid-row: 1 / -1;
|
||||||
@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});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load diff
File diff suppressed because one or more lines are too long
|
|
@ -1,3 +1,14 @@
|
||||||
|
// Grid Mixin
|
||||||
|
// arguments are : columns number, gutter, min-breakpoint
|
||||||
|
// ex. .ingrid { @include grid(4, 1rem, 640px); }
|
||||||
|
@mixin grid($number:1, $gutter:0, $breakpoint:0) {
|
||||||
|
@media (min-width: $breakpoint) {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat($number, 1fr);
|
||||||
|
grid-gap: $gutter;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Additionnal "utility" breakpoints aliases
|
// Additionnal "utility" breakpoints aliases
|
||||||
// ex. @include respond-to("medium-up") {...}
|
// ex. @include respond-to("medium-up") {...}
|
||||||
$bp-aliases: (
|
$bp-aliases: (
|
||||||
|
|
|
||||||
|
|
@ -1,93 +1,67 @@
|
||||||
/* ---------------------------------- */
|
/* --------------------------------------- */
|
||||||
/* ==Grillade : Simple Grid System */
|
/* ==Grillade : ultra light Grid System */
|
||||||
/* ---------------------------------- */
|
/* --------------------------------------- */
|
||||||
/* Doc : http://grillade.knacss.com */
|
/* Doc : @TODO */
|
||||||
// gutter values for grid layouts. Unit can be: %, px, em, rem
|
// WARNING: THIS IS NOT A COMPLETE GRID FRAMEWORK, just ultra light Grid System
|
||||||
$grid-gutters: ( '': 1rem, '-l': 2rem, '-xl': 4rem );
|
// if you need complex Grid :
|
||||||
// IEfixing, see
|
// 1- use vanilla CSS Grid Layout spec (perfect for you)
|
||||||
// https://github.com/alsacreations/KNACSS/issues/133;
|
// 2- use Bootstrap (good luck)
|
||||||
$iefix: 0.01px;
|
|
||||||
@media (min-width: $small) {
|
|
||||||
[class*=" grid-"],
|
|
||||||
[class^="grid-"] {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
& > * {
|
[class*=" grid-"],
|
||||||
box-sizing: border-box;
|
[class^="grid-"] {
|
||||||
min-width: 0;
|
@media (min-width: $tiny) {
|
||||||
min-height: 0;
|
display: grid;
|
||||||
}
|
grid-auto-flow: dense;
|
||||||
}
|
|
||||||
}
|
|
||||||
// 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;
|
|
||||||
|
|
||||||
& > * {
|
// gutters
|
||||||
width: calc(100% / #{$grid-number} - #{$size} - #{$iefix});
|
@if variable_exists(grid-gutters) {
|
||||||
margin-right: $size / 2;
|
$gutter: $grid-gutters !global;
|
||||||
margin-left: $size / 2;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
@else {
|
||||||
@if ($own-gutter != 0) {
|
$gutter: ( '': 1rem, '-l': 2rem, '-xl': 4rem ) !global;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
}
|
@each $affix, $size in $gutter {
|
||||||
}
|
&.has-gutter#{$affix} {
|
||||||
// Mono-line grid constructor (.grid)
|
grid-gap: $size;
|
||||||
@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) {
|
// grid constructor (.grid-2 to .grid-12)
|
||||||
@for $i from 2 through 12 {
|
@for $i from 2 through 12 {
|
||||||
[class*="grid-#{$i}"] {
|
[class*="grid-#{$i}"] {
|
||||||
@include grid(#{$i}, 0);
|
grid-template-columns: repeat(#{$i}, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// grid items constructor (.col-2 to .col-12, .row-2 to .row-12)
|
||||||
|
@for $i from 2 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: ($small -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};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Grid offsets
|
// grid order
|
||||||
.push {
|
|
||||||
margin-left: auto !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pull {
|
|
||||||
margin-right: auto !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Grid order
|
|
||||||
.item-first {
|
.item-first {
|
||||||
order: -1;
|
order: -1;
|
||||||
}
|
}
|
||||||
|
|
@ -96,37 +70,16 @@ $iefix: 0.01px;
|
||||||
order: 1;
|
order: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
[class*="grid-"][class*="--reverse"] {
|
// grid offset
|
||||||
flex-direction: row-reverse;
|
.grid-offset {
|
||||||
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
// sizing individual children
|
|
||||||
@media (min-width: $small) {
|
// spanning all collumns or rows
|
||||||
@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") {
|
.col-all {
|
||||||
.#{$flow} {
|
grid-column: 1 / -1;
|
||||||
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"
|
.row-all {
|
||||||
// example : .grid-4-small-2 will be 1 column (tiny and down) then 2 columns (until medium) then 4 columns
|
grid-row: 1 / -1;
|
||||||
@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});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue