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

modifications des breakpoints

Browse source
This commit is contained in:
Raphael Goetter 2016-12-01 15:45:23 +01:00
parent 725124d380
commit 204d870d31
10 changed files with 58 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
bower.json
View file

@ -1,6 +1,6 @@
{ {
"name": "KNACSS", "name": "KNACSS",
"version": "6.0.4", "version": "6.0.5",
"homepage": "http://www.knacss.com/", "homepage": "http://www.knacss.com/",
"authors": [ "authors": [
"Raphaël GOETTER, Alsacreations" "Raphaël GOETTER, Alsacreations"

3
changelog.md
View file

@ -1,3 +1,6 @@
# changelog v6.0.5 (1er décembre 2016)
- redéfinition des variables de breakpoints, à présent calées sur [celles de Bootstrap](https://v4-alpha.getbootstrap.com/layout/overview/#responsive-breakpoints)
# changelog v6.0.4 (22 novembre 2016) # changelog v6.0.4 (22 novembre 2016)
- renommage des variables - renommage des variables

2
css/grillade.css
View file

File diff suppressed because one or more lines are too long

10
css/grillade.scss
View file

@ -2,11 +2,11 @@
// 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) and (min-width: ($BP + 1)) // Best practise : (max-width: $BP) and (min-width: ($BP + 1))
$tiny: 544px !default; // or 'em' if you prefer, of course $tiny: 543px !default; // or 'em' if you prefer, of course
$small: 768px !default; $small: 767px !default;
$medium: 1024px !default; $medium: 991px !default;
$large: 1200px !default; $large: 1199px !default;
$extra-large: 1440px !default; $extra-large: 1439px !default;
/* ---------------------------------- */ /* ---------------------------------- */
/* ==Grillade : Simple Grid System */ /* ==Grillade : Simple Grid System */

32
css/knacss-unminified.css
View file

@ -1,6 +1,6 @@
@charset "UTF-8"; @charset "UTF-8";
/*! /*!
* www.KNACSS.com V6.0.4 (22 novembre 2016) @author: Alsacreations, Raphael Goetter * www.KNACSS.com V6.0.5 (1er décembre 2016) @author: Alsacreations, Raphael Goetter
* Licence WTFPL http://www.wtfpl.net/ * Licence WTFPL http://www.wtfpl.net/
*/ */
/* ----------------------------- */ /* ----------------------------- */
@ -737,7 +737,7 @@ th {
overflow: visible; overflow: visible;
clip: auto; } clip: auto; }
@media (max-width: 544px) { @media (max-width: 543px) {
/* you shall not pass */ /* you shall not pass */
div, div,
textarea, textarea,
@ -752,7 +752,7 @@ th {
-ms-hyphens: auto; -ms-hyphens: auto;
hyphens: auto; } } hyphens: auto; } }
@media (max-width: 544px) { @media (max-width: 543px) {
.no-wrapping { .no-wrapping {
word-wrap: normal; word-wrap: normal;
-webkit-hyphens: manual; -webkit-hyphens: manual;
@ -884,7 +884,7 @@ input[type="reset"].unstyled {
outline: none; } outline: none; }
/* Media object */ /* Media object */
@media (min-width: 545px) { @media (min-width: 544px) {
.o-media { .o-media {
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
@ -900,7 +900,7 @@ input[type="reset"].unstyled {
/* avoid min-width:auto */ } } /* avoid min-width:auto */ } }
/* Media variants */ /* Media variants */
@media (min-width: 545px) { @media (min-width: 544px) {
.o-media--reverse { .o-media--reverse {
-webkit-box-orient: horizontal; -webkit-box-orient: horizontal;
-webkit-box-direction: reverse; -webkit-box-direction: reverse;
@ -911,7 +911,7 @@ input[type="reset"].unstyled {
align-self: center; } } align-self: center; } }
/* Autogrid object */ /* Autogrid object */
@media (min-width: 545px) { @media (min-width: 544px) {
[class^="autogrid"], [class^="autogrid"],
[class*=" autogrid"] { [class*=" autogrid"] {
display: -webkit-box; display: -webkit-box;
@ -926,7 +926,7 @@ input[type="reset"].unstyled {
/* avoid min-width:auto */ } } /* avoid min-width:auto */ } }
/* Autogrid variants */ /* Autogrid variants */
@media (min-width: 545px) { @media (min-width: 544px) {
.has-gutter > *:not(:first-child) { .has-gutter > *:not(:first-child) {
margin-left: 1rem; } margin-left: 1rem; }
[class*="--reverse"] { [class*="--reverse"] {
@ -1320,7 +1320,7 @@ ul.unstyled {
/* -------------------------- */ /* -------------------------- */
/* large screens */ /* large screens */
/* ------------- */ /* ------------- */
@media (min-width: 1025px) { @media (min-width: 992px) {
/* layouts for large screens */ /* layouts for large screens */
.large-hidden { .large-hidden {
display: none !important; } display: none !important; }
@ -1359,7 +1359,7 @@ ul.unstyled {
/* medium screens */ /* medium screens */
/* -------------- */ /* -------------- */
@media (min-width: 769px) and (max-width: 1200px) { @media (min-width: 768px) and (max-width: 1199px) {
/* layouts for medium screens */ /* layouts for medium screens */
.medium-hidden { .medium-hidden {
display: none !important; } display: none !important; }
@ -1398,7 +1398,7 @@ ul.unstyled {
/* small screens */ /* small screens */
/* ------------- */ /* ------------- */
@media (min-width: 545px) and (max-width: 768px) { @media (min-width: 544px) and (max-width: 767px) {
/* layouts for small screens */ /* layouts for small screens */
.small-hidden { .small-hidden {
display: none !important; } display: none !important; }
@ -1440,7 +1440,7 @@ ul.unstyled {
/* tiny screens */ /* tiny screens */
/* ------------ */ /* ------------ */
@media (max-width: 544px) { @media (max-width: 543px) {
/* quick small resolution reset */ /* quick small resolution reset */
.mod, .mod,
.col, .col,
@ -1500,7 +1500,7 @@ ul.unstyled {
/* ==Grillade : Simple Grid System */ /* ==Grillade : Simple Grid System */
/* ---------------------------------- */ /* ---------------------------------- */
/* Doc : http://grillade.knacss.com */ /* Doc : http://grillade.knacss.com */
@media (min-width: 545px) { @media (min-width: 544px) {
[class*=" grid-"], [class*=" grid-"],
[class^="grid-"] { [class^="grid-"] {
display: -webkit-box; display: -webkit-box;
@ -1518,7 +1518,7 @@ ul.unstyled {
min-width: 0; min-width: 0;
min-height: 0; } } min-height: 0; } }
@media (min-width: 545px) { @media (min-width: 544px) {
.grid, .grid,
.grid--reverse { .grid--reverse {
display: -webkit-box; display: -webkit-box;
@ -1542,7 +1542,7 @@ ul.unstyled {
.grid--reverse.has-gutter-xl > * + * { .grid--reverse.has-gutter-xl > * + * {
margin-left: calc(4rem - 0.01px); } } margin-left: calc(4rem - 0.01px); } }
@media (min-width: 545px) { @media (min-width: 544px) {
[class*="grid-2"] > * { [class*="grid-2"] > * {
width: calc(100% / 2 - 0.01px); } width: calc(100% / 2 - 0.01px); }
[class*="grid-2"].has-gutter { [class*="grid-2"].has-gutter {
@ -1819,7 +1819,7 @@ ul.unstyled {
-ms-flex-direction: row-reverse; -ms-flex-direction: row-reverse;
flex-direction: row-reverse; } flex-direction: row-reverse; }
@media (min-width: 545px) { @media (min-width: 544px) {
.full { .full {
-webkit-box-flex: 0; -webkit-box-flex: 0;
-ms-flex: 0 0 auto; -ms-flex: 0 0 auto;
@ -1921,7 +1921,7 @@ ul.unstyled {
width: calc(100% / 6 * 5 - 4rem - 0.01px); } } width: calc(100% / 6 * 5 - 4rem - 0.01px); } }
/* Responsive Small Breakpoint */ /* Responsive Small Breakpoint */
@media (min-width: 545px) and (max-width: 768px) { @media (min-width: 544px) and (max-width: 767px) {
[class*="-small-1"] > * { [class*="-small-1"] > * {
width: calc(100% / 1 - 0.01px); } width: calc(100% / 1 - 0.01px); }
[class*="-small-1"].has-gutter > * { [class*="-small-1"].has-gutter > * {

4
css/knacss.css
View file

File diff suppressed because one or more lines are too long

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "knacss", "name": "knacss",
"version": "6.0.4", "version": "6.0.5",
"homepage": "http://www.knacss.com/", "homepage": "http://www.knacss.com/",
"bugs": "https://github.com/alsacreations/KNACSS/issues", "bugs": "https://github.com/alsacreations/KNACSS/issues",
"author": [ "author": [

10
sass/_config/_breakpoints.scss
View file

@ -2,8 +2,8 @@
// 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) and (min-width: ($BP + 1)) // Best practise : (max-width: $BP) and (min-width: ($BP + 1))
$tiny: 544px !default; // or 'em' if you prefer, of course $tiny: 543px !default; // or 'em' if you prefer, of course
$small: 768px !default; $small: 767px !default;
$medium: 1024px !default; $medium: 991px !default;
$large: 1200px !default; $large: 1199px !default;
$extra-large: 1440px !default; $extra-large: 1439px !default;

40
sass/_config/_mixins.scss
View file

@ -1,30 +1,36 @@
// Additionnal "utility" breakpoints aliases // Additionnal "utility" breakpoints aliases
// ex. @include respond-to("portrait-up") {...} // ex. @include respond-to("medium-up") {...}
@function breakpoint($bp) { @function breakpoint($bp) {
@if $bp == 'mobile' { @if $bp == 'tiny' {
@return '(max-width: #{$tiny})'; @return '(max-width: #{$tiny})';
} }
@else if $bp == 'portrait' { @else if $bp == 'small' {
@return '(min-width: #{$tiny + 1}) and (max-width: #{$small})';
}
@else if $bp == 'landscape' {
@return '(min-width: #{$small + 1}) and (max-width: #{$medium})';
}
@else if $bp == 'desktop' {
@return '(min-width: #{$medium + 1})';
}
@else if $bp == 'portrait-down' {
@return '(max-width: #{$small})'; @return '(max-width: #{$small})';
} }
@else if $bp == 'portrait-up' { @else if $bp == 'medium' {
@return '(min-width: #{$tiny + 1})';
}
@else if $bp == 'landscape-down' {
@return '(max-width: #{$medium})'; @return '(max-width: #{$medium})';
} }
@else if $bp == 'landscape-up' { @else if $bp == 'large' {
@return '(max-width: #{$large})';
}
@else if $bp == 'extra-large' {
@return '(max-width: #{$extra-large})';
}
@else if $bp == 'tiny-up' {
@return '(min-width: #{$tiny + 1})';
}
@else if $bp == 'small-up' {
@return '(min-width: #{$small + 1})'; @return '(min-width: #{$small + 1})';
} }
@else if $bp == 'medium-up' {
@return '(min-width: #{$medium + 1})';
}
@else if $bp == 'large-up' {
@return '(min-width: #{$large + 1})';
}
@else if $bp == 'extra-large-up' {
@return '(min-width: #{$extra-large + 1})';
}
@else if $bp == 'retina' { @else if $bp == 'retina' {
@return '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)'; @return '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)';
} }

2
sass/knacss.scss
View file

@ -1,5 +1,5 @@
/*! /*!
* www.KNACSS.com V6.0.4 (22 novembre 2016) @author: Alsacreations, Raphael Goetter * www.KNACSS.com V6.0.5 (1er décembre 2016) @author: Alsacreations, Raphael Goetter
* Licence WTFPL http://www.wtfpl.net/ * Licence WTFPL http://www.wtfpl.net/
*/ */