v6.1.2 (21 juin 2017)

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"

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()"
 

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": [

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;

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)
 );
 

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
 

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}"] {
       & > * {

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/
 */
 

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;

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);

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;
   }

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;
   }

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;
 }

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,