dbroqua/KNACSS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

déplacement des variables de breakpoints de breakpoints vers variables

Browse source
This commit is contained in:
Raphael Goetter 2017-08-04 09:12:58 +02:00
parent 8c00f47d55
commit 96faa2954b
6 changed files with 27 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
changelog.md
View file

@ -1,7 +1,9 @@
# changelog v7.0.0beta (1er août 2017) # changelog v7.0.0beta (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) - refonte complète du système de grille (dorénavant basé sur Grid Layout)
- création d'un mixin de grille - création d'un mixin de grille
- déplacement des variables de gouttières de grillade.scss vers variables.scss
- déplacement des variables de breakpoints de breakpoints.scss vers variables.scss
- 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.)

18
css/grillade.scss
View file

@ -1,14 +1,3 @@
// Responsive breakpoints variables
// Warning : you should use your own values, regardless of the devices
// Best practise is Mobile First: (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;
/* --------------------------------------- */ /* --------------------------------------- */
/* ==Grillade : ultra light Grid System */ /* ==Grillade : ultra light Grid System */
/* --------------------------------------- */ /* --------------------------------------- */
@ -18,6 +7,13 @@ $extra-large: 1200px !default;
// 1- use vanilla CSS Grid Layout spec (perfect for you) // 1- use vanilla CSS Grid Layout spec (perfect for you)
// 2- use Bootstrap (good luck) // 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-"],
[class^="grid-"] { [class^="grid-"] {
@media (min-width: $tiny) { @media (min-width: $tiny) {

10
sass/_config/_breakpoints.scss
View file

@ -1,10 +0,0 @@
// Responsive breakpoints variables
// Warning : you should use your own values, regardless of the devices
// Best practise is Mobile First: (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;

10
sass/_config/_variables.scss
View file

@ -85,3 +85,13 @@ $grid-gutters: ( '': 1rem, '-l': 2rem, '-xl': 4rem );
// border-radius // border-radius
$border-radius: 0; $border-radius: 0;
// Responsive breakpoints variables
// Warning : you should use your own values, regardless of the devices
// Best practise is Mobile First: (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;

7
sass/components/grillade.scss
View file

@ -7,6 +7,13 @@
// 1- use vanilla CSS Grid Layout spec (perfect for you) // 1- use vanilla CSS Grid Layout spec (perfect for you)
// 2- use Bootstrap (good luck) // 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-"],
[class^="grid-"] { [class^="grid-"] {
@media (min-width: $tiny) { @media (min-width: $tiny) {

1
sass/knacss.scss
View file

@ -38,7 +38,6 @@
// and move variables file from knacss folder to your own project folder! // and move variables file from knacss folder to your own project folder!
@import "_config/_variables.scss"; @import "_config/_variables.scss";
@import "_config/_breakpoints.scss";
@import "_config/_mixins.scss"; @import "_config/_mixins.scss";
// Libraries // Libraries