modifications des breakpoints

2016-12-01 15:45:23 +01:00 · 2016-12-01 15:45:23 +01:00 · 204d870d31
commit 204d870d31
parent 725124d380
10 changed files with 58 additions and 49 deletions
--- a/bower.json
+++ b/bower.json
@ -1,6 +1,6 @@
 {
  "name": "KNACSS",
-  "version": "6.0.4",
+  "version": "6.0.5",
  "homepage": "http://www.knacss.com/",
  "authors": [
    "Raphaël GOETTER, Alsacreations"
--- a/changelog.md
+++ b/changelog.md
@ -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)
 - renommage des variables

--- a/css/grillade.css
+++ b/css/grillade.css
--- a/css/grillade.scss
+++ b/css/grillade.scss
@ -2,11 +2,11 @@

 // Warning : you should use your own values, regardless of the devices
 // Best practise : (max-width: $BP) and (min-width: ($BP + 1))
-$tiny: 544px !default; // or 'em' if you prefer, of course
-$small: 768px !default;
-$medium: 1024px !default;
-$large: 1200px !default;
-$extra-large: 1440px !default;
+$tiny: 543px !default; // or 'em' if you prefer, of course
+$small: 767px !default;
+$medium: 991px !default;
+$large: 1199px !default;
+$extra-large: 1439px !default;

 /* ---------------------------------- */
 /* ==Grillade : Simple Grid System    */
--- a/css/knacss-unminified.css
+++ b/css/knacss-unminified.css
@ -1,6 +1,6 @@
@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/
 */
 /* ----------------------------- */
@ -737,7 +737,7 @@ th {
      overflow: visible;
      clip: auto; }

-@media (max-width: 544px) {
+@media (max-width: 543px) {
  /* you shall not pass */
  div,
  textarea,
@ -752,7 +752,7 @@ th {
        -ms-hyphens: auto;
            hyphens: auto; } }

-@media (max-width: 544px) {
+@media (max-width: 543px) {
  .no-wrapping {
    word-wrap: normal;
    -webkit-hyphens: manual;
@ -884,7 +884,7 @@ input[type="reset"].unstyled {
    outline: none; }

 /* Media object */
-@media (min-width: 545px) {
+@media (min-width: 544px) {
  .o-media {
    display: -webkit-box;
    display: -ms-flexbox;
@ -900,7 +900,7 @@ input[type="reset"].unstyled {
    /* avoid min-width:auto */ } }

 /* Media variants */
-@media (min-width: 545px) {
+@media (min-width: 544px) {
  .o-media--reverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
@ -911,7 +911,7 @@ input[type="reset"].unstyled {
        align-self: center; } }

 /* Autogrid object */
-@media (min-width: 545px) {
+@media (min-width: 544px) {
  [class^="autogrid"],
  [class*=" autogrid"] {
    display: -webkit-box;
@ -926,7 +926,7 @@ input[type="reset"].unstyled {
    /* avoid min-width:auto */ } }

 /* Autogrid variants */
-@media (min-width: 545px) {
+@media (min-width: 544px) {
  .has-gutter > *:not(:first-child) {
    margin-left: 1rem; }
  [class*="--reverse"] {
@ -1320,7 +1320,7 @@ ul.unstyled {
 /* -------------------------- */
 /* large screens */
 /* ------------- */
-@media (min-width: 1025px) {
+@media (min-width: 992px) {
  /* layouts for large screens */
  .large-hidden {
    display: none !important; }
@ -1359,7 +1359,7 @@ ul.unstyled {

 /* medium screens */
 /* -------------- */
-@media (min-width: 769px) and (max-width: 1200px) {
+@media (min-width: 768px) and (max-width: 1199px) {
  /* layouts for medium screens */
  .medium-hidden {
    display: none !important; }
@ -1398,7 +1398,7 @@ ul.unstyled {

 /* small screens */
 /* ------------- */
-@media (min-width: 545px) and (max-width: 768px) {
+@media (min-width: 544px) and (max-width: 767px) {
  /* layouts for small screens */
  .small-hidden {
    display: none !important; }
@ -1440,7 +1440,7 @@ ul.unstyled {

 /* tiny screens */
 /* ------------ */
-@media (max-width: 544px) {
+@media (max-width: 543px) {
  /* quick small resolution reset */
  .mod,
  .col,
@ -1500,7 +1500,7 @@ ul.unstyled {
 /* ==Grillade : Simple Grid System    */
 /* ---------------------------------- */
 /* Doc : http://grillade.knacss.com */
-@media (min-width: 545px) {
+@media (min-width: 544px) {
  [class*=" grid-"],
  [class^="grid-"] {
    display: -webkit-box;
@ -1518,7 +1518,7 @@ ul.unstyled {
      min-width: 0;
      min-height: 0; } }

-@media (min-width: 545px) {
+@media (min-width: 544px) {
  .grid,
  .grid--reverse {
    display: -webkit-box;
@ -1542,7 +1542,7 @@ ul.unstyled {
    .grid--reverse.has-gutter-xl > * + * {
      margin-left: calc(4rem - 0.01px); } }

-@media (min-width: 545px) {
+@media (min-width: 544px) {
  [class*="grid-2"] > * {
    width: calc(100% / 2 - 0.01px); }
  [class*="grid-2"].has-gutter {
@ -1819,7 +1819,7 @@ ul.unstyled {
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse; }

-@media (min-width: 545px) {
+@media (min-width: 544px) {
  .full {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
@ -1921,7 +1921,7 @@ ul.unstyled {
    width: calc(100% / 6 * 5 - 4rem - 0.01px); } }

 /* Responsive Small Breakpoint */
-@media (min-width: 545px) and (max-width: 768px) {
+@media (min-width: 544px) and (max-width: 767px) {
  [class*="-small-1"] > * {
    width: calc(100% / 1 - 0.01px); }
  [class*="-small-1"].has-gutter > * {
--- a/css/knacss.css
+++ b/css/knacss.css
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "knacss",
-  "version": "6.0.4",
+  "version": "6.0.5",
  "homepage": "http://www.knacss.com/",
  "bugs": "https://github.com/alsacreations/KNACSS/issues",
  "author": [
--- a/sass/_config/_breakpoints.scss
+++ b/sass/_config/_breakpoints.scss
@ -2,8 +2,8 @@

 // Warning : you should use your own values, regardless of the devices
 // Best practise : (max-width: $BP) and (min-width: ($BP + 1))
-$tiny: 544px !default; // or 'em' if you prefer, of course
-$small: 768px !default;
-$medium: 1024px !default;
-$large: 1200px !default;
-$extra-large: 1440px !default;
+$tiny: 543px !default; // or 'em' if you prefer, of course
+$small: 767px !default;
+$medium: 991px !default;
+$large: 1199px !default;
+$extra-large: 1439px !default;
--- a/sass/_config/_mixins.scss
+++ b/sass/_config/_mixins.scss
@ -1,30 +1,36 @@
 // Additionnal "utility" breakpoints aliases
-// ex. @include respond-to("portrait-up") {...} 
+// ex. @include respond-to("medium-up") {...}
@function breakpoint($bp) {
-  @if $bp == 'mobile' {
+  @if $bp == 'tiny' {
    @return '(max-width: #{$tiny})';
  }
-  @else if $bp == 'portrait' {
-    @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' {
+  @else if $bp == 'small' {
    @return '(max-width: #{$small})';
  }
-  @else if $bp == 'portrait-up' {
-    @return '(min-width: #{$tiny + 1})';
-  }
-  @else if $bp == 'landscape-down' {
+  @else if $bp == '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})';
  }
+  @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' {
    @return '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)';
  }
--- a/sass/knacss.scss
+++ b/sass/knacss.scss
@ -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/
 */