From 689c3d32f79465b6445c993552bad53c825c5ef9 Mon Sep 17 00:00:00 2001
From: Raphael Goetter <raphael@goetter.fr>
Date: Wed, 21 Jun 2017 10:50:33 +0200
Subject: [PATCH] v6.1.2 (21 juin 2017)

---
 bower.json                      |  2 +-
 changelog.md                    |  6 ++++++
 package.json                    |  2 +-
 sass/_config/_breakpoints.scss  | 13 +++++++------
 sass/_config/_mixins.scss       | 20 ++++++++++----------
 sass/_config/_variables.scss    |  2 +-
 sass/grids/_grillade.scss       | 10 +++++-----
 sass/knacss.scss                |  2 +-
 sass/library/_misc.scss         |  4 ++--
 sass/library/_styling.scss      |  4 ++++
 sass/objects/_autogrid.scss     |  4 ++--
 sass/objects/_media.scss        |  4 ++--
 sass/utilities/_layout.scss     | 12 ++++++++----
 sass/utilities/_responsive.scss |  8 ++++----
 14 files changed, 54 insertions(+), 39 deletions(-)

diff --git a/bower.json b/bower.json
index d62bb94..cb8c833 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "KNACSS",
-  "version": "6.1.1",
+  "version": "6.1.2",
   "homepage": "http://www.knacss.com/",
   "authors": [
     "Raphaël GOETTER, Alsacreations"
diff --git a/changelog.md b/changelog.md
index 8a7578c..8567244 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,3 +1,9 @@
+# changelog v6.1.2 (21 juin 2017)
+- alignement des helpers flexbox sur ceux de Bootstrap (`.d-flex`, `.flex-row`, `.flex-column`, `.mr-auto`)
+- alignement des breakpoints sur ceux de Bootstrap (576, 768, 992, 1200) et réorganisation des intervalles
+- `tab-size: 2;` sur les `<pre>`
+- passage en System Font Stack. cf. https://css-tricks.com/snippets/css/system-font-stack/
+
 # changelog v6.1.1 (21 avril 2017)
 - amélioration du mixin "respond-to()"
 
diff --git a/package.json b/package.json
index ee31f79..c673ba2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "knacss",
-  "version": "6.1.1",
+  "version": "6.1.2",
   "homepage": "http://www.knacss.com/",
   "bugs": "https://github.com/alsacreations/KNACSS/issues",
   "author": [
diff --git a/sass/_config/_breakpoints.scss b/sass/_config/_breakpoints.scss
index 1cb9066..ce2e750 100644
--- a/sass/_config/_breakpoints.scss
+++ b/sass/_config/_breakpoints.scss
@@ -1,9 +1,10 @@
 // Responsive breakpoints variables
 
 // Warning : you should use your own values, regardless of the devices
-// Best practise : (max-width: $BP) and (min-width: ($BP + 1))
-$tiny: 543px !default; // or 'em' if you prefer, of course
-$small: 767px !default;
-$medium: 991px !default;
-$large: 1199px !default;
-$extra-large: 1439px !default;
+// 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;
diff --git a/sass/_config/_mixins.scss b/sass/_config/_mixins.scss
index b2ef897..88abcb2 100644
--- a/sass/_config/_mixins.scss
+++ b/sass/_config/_mixins.scss
@@ -1,16 +1,16 @@
 // Additionnal "utility" breakpoints aliases
 // ex. @include respond-to("medium-up") {...}
 $bp-aliases: (
-  'tiny'   : (max-width: #{$tiny}),
-  'small'  : (max-width: #{$small}),
-  'medium' : (max-width: #{$medium}),
-  'large' : (max-width: #{$large}),
-  'extra-large'  : (max-width: #{$extra-large}),
-  'tiny-up'   : (min-width: #{$tiny + 1}),
-  'small-up'  : (min-width: #{$small + 1}),
-  'medium-up' : (min-width: #{$medium + 1}),
-  'large-up' : (min-width: #{$large + 1}),
-  'extra-large-up' : (min-width: #{$extra-large + 1}),
+  'tiny'   : (max-width: #{$tiny - 1}),
+  'small'  : (max-width: #{$small - 1}),
+  'medium' : (max-width: #{$medium - 1}),
+  'large' : (max-width: #{$large - 1}),
+  'extra-large'  : (max-width: #{$extra-large - 1}),
+  'tiny-up'   : (min-width: #{$tiny}),
+  'small-up'  : (min-width: #{$small}),
+  'medium-up' : (min-width: #{$medium}),
+  'large-up' : (min-width: #{$large}),
+  'extra-large-up' : (min-width: #{$extra-large}),
   'retina' : (min-resolution: 2dppx)
 );
 
diff --git a/sass/_config/_variables.scss b/sass/_config/_variables.scss
index ce1044f..1622d05 100644
--- a/sass/_config/_variables.scss
+++ b/sass/_config/_variables.scss
@@ -21,7 +21,7 @@ $h5-size-l        : 1.8rem !default; // equiv "18px"
 $h6-size-l        : 1.6rem !default; // equiv "16px"
 
 // font stacks
-$font-stack-common    : sans-serif !default; // common font
+$font-stack-common    : -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif !default; // system font stack
 $font-stack-headings  : sans-serif !default; // headings font
 $font-stack-monospace : consolas, courier, monospace !default; // monospace font
 
diff --git a/sass/grids/_grillade.scss b/sass/grids/_grillade.scss
index 11757b5..eca22fe 100644
--- a/sass/grids/_grillade.scss
+++ b/sass/grids/_grillade.scss
@@ -7,7 +7,7 @@ $grid-gutters: ( '': 1rem, '-l': 2rem, '-xl': 4rem );
 // IEfixing, see
 // https://github.com/alsacreations/KNACSS/issues/133;
 $iefix: 0.01px;
-@media (min-width: ($tiny + 1)) {
+@media (min-width: $small) {
   [class*=" grid-"],
   [class^="grid-"] {
     display: flex;
@@ -51,7 +51,7 @@ $iefix: 0.01px;
   }
 }
 // Mono-line grid constructor (.grid)
-@media (min-width: ($tiny + 1)) {
+@media (min-width: $small) {
   .grid,
   .grid--reverse {
     display: flex;
@@ -70,7 +70,7 @@ $iefix: 0.01px;
   }
 }
 // Constructing grids : will be compiled in CSS
-@media (min-width: ($tiny + 1)) {
+@media (min-width: $small) {
   @for $i from 2 through 12 {
     [class*="grid-#{$i}"] {
       @include grid(#{$i}, 0);
@@ -100,7 +100,7 @@ $iefix: 0.01px;
   flex-direction: row-reverse;
 }
 // sizing individual children
-@media (min-width: ($tiny + 1)) {
+@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;
@@ -116,7 +116,7 @@ $iefix: 0.01px;
 /* 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: ($tiny + 1)) and (max-width: $medium) {
+@media (min-width: $small) and (max-width: ($medium - 1)) {
   @for $i from 1 through 4 {
     [class*="-small-#{$i}"] {
       & > * {
diff --git a/sass/knacss.scss b/sass/knacss.scss
index 194fc1f..cf59e8d 100644
--- a/sass/knacss.scss
+++ b/sass/knacss.scss
@@ -1,5 +1,5 @@
 /*!
-* www.KNACSS.com v6.1.1 (21 avril 2017) @author: Alsacreations, Raphael Goetter
+* www.KNACSS.com v6.1.2 (21 juin 2017) @author: Alsacreations, Raphael Goetter
 * Licence WTFPL http://www.wtfpl.net/
 */
 
diff --git a/sass/library/_misc.scss b/sass/library/_misc.scss
index 4d7c6af..2fcd18d 100644
--- a/sass/library/_misc.scss
+++ b/sass/library/_misc.scss
@@ -24,7 +24,7 @@
 }
 
 // hyphens on tiny screens
-@media (max-width: $tiny) {
+@media (max-width: ($small - 1)) {
   /* you shall not pass */
   div,
   textarea,
@@ -40,7 +40,7 @@
 }
 
 // use .no-wrapping to disallow hyphens on tiny screens
-@media (max-width: $tiny) {
+@media (max-width: ($small - 1)) {
   .no-wrapping {
     word-wrap: normal;
     hyphens: manual;
diff --git a/sass/library/_styling.scss b/sass/library/_styling.scss
index 8ad14da..8854af4 100644
--- a/sass/library/_styling.scss
+++ b/sass/library/_styling.scss
@@ -14,6 +14,10 @@ kbd {
   border: 1px solid #999;
 }
 
+pre {
+  tab-size: 2;
+}
+
 code {
   padding: 2px 4px;
   background: rgba(0, 0, 0, 0.04);
diff --git a/sass/objects/_autogrid.scss b/sass/objects/_autogrid.scss
index 5573c55..e0998fb 100644
--- a/sass/objects/_autogrid.scss
+++ b/sass/objects/_autogrid.scss
@@ -1,6 +1,6 @@
 /* Autogrid object */
 /* see http://codepen.io/raphaelgoetter/pen/KMgBJd */
-@media (min-width: ($tiny + 1)) {
+@media (min-width: $small) {
   [class^="autogrid"],
   [class*=" autogrid"] {
     display: flex;
@@ -14,7 +14,7 @@
 }
 
 /* Autogrid variants */
-@media (min-width: ($tiny + 1)) {
+@media (min-width: $small) {
   .has-gutter > *:not(:first-child) {
     margin-left: 1rem;
   }
diff --git a/sass/objects/_media.scss b/sass/objects/_media.scss
index 395b017..72993a4 100644
--- a/sass/objects/_media.scss
+++ b/sass/objects/_media.scss
@@ -1,6 +1,6 @@
 /* Media object */
 /* see http://codepen.io/raphaelgoetter/pen/KMWWwj */
-@media (min-width: ($tiny + 1)) {
+@media (min-width: $small) {
   .o-media {
     display: flex;
     align-items: flex-start;
@@ -13,7 +13,7 @@
 }
 
 /* Media variants */
-@media (min-width: ($tiny + 1)) {
+@media (min-width: $small) {
   .o-media--reverse {
     flex-direction: row-reverse;
   }
diff --git a/sass/utilities/_layout.scss b/sass/utilities/_layout.scss
index f02b5e0..d3e6f1e 100644
--- a/sass/utilities/_layout.scss
+++ b/sass/utilities/_layout.scss
@@ -83,16 +83,19 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
 */
 
 [class*="#{$kna-namespace}flex-container"],
-.#{$kna-namespace}flex-container {
+.#{$kna-namespace}flex-container,
+.d-flex {
   display: flex;
   flex-wrap: wrap;
 }
 
-.#{$kna-namespace}flex-container-h {
+.#{$kna-namespace}flex-container-h,
+.flex-row {
   flex-direction: row;
 }
 
-.#{$kna-namespace}flex-container-v {
+.#{$kna-namespace}flex-container-v,
+.flex-column {
   flex-direction: column;
 }
 
@@ -117,6 +120,7 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
 }
 
 .#{$kna-namespace}flex-item-center,
-.#{$kna-namespace}item-center {
+.#{$kna-namespace}item-center,
+.mr-auto {
   margin: auto;
 }
diff --git a/sass/utilities/_responsive.scss b/sass/utilities/_responsive.scss
index 04306c6..87063ab 100644
--- a/sass/utilities/_responsive.scss
+++ b/sass/utilities/_responsive.scss
@@ -5,7 +5,7 @@
 /* large screens */
 /* ------------- */
 
-@media (min-width: ($medium + 1)) {
+@media (min-width: $large) {
 
   /* layouts for large screens */
   .#{$kna-namespace}large-hidden {
@@ -68,7 +68,7 @@
 /* medium screens */
 /* -------------- */
 
-@media (min-width: ($small + 1)) and (max-width: $large) {
+@media (min-width: $medium) and (max-width: ($large - 1)) {
 
   /* layouts for medium screens */
   .#{$kna-namespace}medium-hidden {
@@ -131,7 +131,7 @@
 /* small screens */
 /* ------------- */
 
-@media (min-width: ($tiny + 1)) and (max-width: $small) {
+@media (min-width: $small) and (max-width: ($medium - 1)) {
 
   /* layouts for small screens */
   .#{$kna-namespace}small-hidden {
@@ -200,7 +200,7 @@
 /* tiny screens */
 /* ------------ */
 
-@media (max-width: $tiny) {
+@media (max-width: $small - 1) {
 
   /* quick small resolution reset */
   .#{$kna-namespace}mod,