Version 4.4.0 (voir changelog)

bower.json

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

changelog.md

@@ -1,3 +1,15 @@
+# changelog v4.4.0 (12 décembre 2015)
+
+- ajout de classes d'état dans les helpers (`is-disabled`, `is-hidden`, `is-visually-hidden`, `is-unstyled`)
+- import de la feuille de style dédiée WordPress mise en commentaire par défaut et activable au besoin
+- la taille de police de base est à présent de "1.4rem" et non un calcul en `em` à partir d'une valeur en pixels
+- suppression de `@font-stack-universal` devenue inutile (servait dans les grilles inline-block)
+- suppression de "helvetica, arial" dans les font-stacks par défaut (seul reste "sans-serif")
+- ajout d'une classe `.bfc` (actuellement alias de l'existante `.mod`)
+- ajout d'une classe `.no-wrapping` pour les éléments qui ne doivent pas adopter de césures sur petit écran
+- ajout de classes helpers pour les marges automatiques (`.mtauto`, `mrauto`, `.mauto`, etc.)
+
+
 # changelog v4.3.6 (10 novembre 2015)
 
 - modification de la valeur par défaut de gouttière (`1em` -> `2rem`)

css/knacss-unminified.css

@@ -1,5 +1,5 @@
 /*!
-* www.KNACSS.com V4.3.6 (10 novembre 2015) @author: Raphael Goetter, Alsacreations
+* www.KNACSS.com V4.4.0 (12 décembre 2015) @author: Raphael Goetter, Alsacreations
 * Licence WTFPL http://www.wtfpl.net/
 */
 /*! normalize.css v3.0.2 | MIT License | github.com/necolas/normalize.css */
@@ -371,9 +371,6 @@ ul,
 ol {
   padding-left: 2em;
 }
-ul.unstyled {
-  list-style: none;
-}
 img {
   vertical-align: middle;
 }
@@ -397,11 +394,10 @@ html {
   font-size: calc(1em * .625);
 }
 body {
-  /* set body font-size in em (1.4em equiv "14px") */
+  font-size: 1.4rem;
-  font-size: 1.4em;
   background-color: #fff;
   color: #000;
-  font-family: Helvetica, Arial, sans-serif;
+  font-family: sans-serif;
   line-height: 1.5;
 }
 a {
@@ -434,12 +430,12 @@ figure {
 h1,
 .h1-like {
   font-size: 3.2rem;
-  font-family: Helvetica, Arial, sans-serif;
+  font-family: sans-serif;
 }
 h2,
 .h2-like {
   font-size: 2.8rem;
-  font-family: Helvetica, Arial, sans-serif;
+  font-family: sans-serif;
 }
 h3,
 .h3-like {
@@ -480,7 +476,7 @@ kbd {
   /* IE fix */
   white-space: pre-line;
   white-space: pre-wrap;
-  font-family: Consolas, "DejaVu Sans Mono", Courier, monospace;
+  font-family: consolas, courier, monospace;
   line-height: normal;
 }
 em,
@@ -492,29 +488,6 @@ var {
   font-style: italic;
 }
 /* ----------------------------- */
-/* == hiding content             */
-/* ----------------------------- */
-/* hidden but not for an assistive technology like a screen reader, Yahoo! method */
-.visually-hidden {
-  position: absolute !important;
-  border: 0 !important;
-  height: 1px !important;
-  width: 1px !important;
-  padding: 0 !important;
-  overflow: hidden !important;
-  clip: rect(0, 0, 0, 0) !important;
-}
-@media (max-width: 640px) {
-  .no-small-screen {
-    display: none;
-  }
-}
-@media (min-width: 1280px) {
-  .no-large-screen {
-    display: none;
-  }
-}
-/* ----------------------------- */
 /* == browsers consistency       */
 /* ----------------------------- */
 /* avoid top margins on first content element */
@@ -1046,6 +1019,37 @@ input[type="reset"].unstyled:focus {
   outline: none;
 }
 /* ---------------------------------- */
+/* ==state helpers                    */
+/* ---------------------------------- */
+/* invisible for all */
+.is-hidden,
+[hidden] {
+  display: none;
+}
+/* hidden but not for an assistive technology like a screen reader, Yahoo! method */
+.visually-hidden {
+  position: absolute !important;
+  border: 0 !important;
+  height: 1px !important;
+  width: 1px !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+}
+.is-disabled,
+[disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+  cursor: not-allowed;
+  -webkit-filter: grayscale(1);
+          filter: grayscale(1);
+}
+ul.is-unstyled,
+ul.unstyled {
+  list-style: none;
+  padding-left: 0;
+}
+/* ---------------------------------- */
 /* ==visual helpers                   */
 /* .. use them with parcimony !       */
 /* ---------------------------------- */
@@ -1220,6 +1224,21 @@ s,m,l,n = small, medium, large, none
 .mll {
   margin-left: 4rem;
 }
+.mauto {
+  margin: auto;
+}
+.mtauto {
+  margin-top: auto;
+}
+.mrauto {
+  margin-right: auto;
+}
+.mbauto {
+  margin-bottom: auto;
+}
+.mlauto {
+  margin-left: auto;
+}
 .ptn,
 .pt0 {
   padding-top: 0;
@@ -1697,6 +1716,15 @@ s,m,l,n = small, medium, large, none
     word-break: break-all;
   }
 }
+@media (max-width: 640px) {
+  .no-wrapping {
+    word-wrap: normal;
+    -webkit-hyphens: manual;
+       -moz-hyphens: manual;
+        -ms-hyphens: manual;
+            hyphens: manual;
+  }
+}
 /* Google Gmap3 bug fix on images */
 .gm-style img {
   height: 100%;
@@ -1806,165 +1834,6 @@ th {
   text-align: left;
 }
 /* ----------------------------- */
-/* ==WordPress reset             */
-/* ----------------------------- */
-/*
-Author: Geoffrey Crofte, Alsacréations
-Contributors: Automattic, Geoffrey Crofte
-Description: Reset styles for WordPress usage of KNACSS
-*/
-/* ----------------------------- */
-/* ==Menus                       */
-/* ----------------------------- */
-.comment-navigation,
-.paging-navigation,
-.post-navigation {
-  margin: 0 0 1.5em;
-  overflow: hidden;
-}
-.comment-navigation .nav-previous,
-.paging-navigation .nav-previous,
-.post-navigation .nav-previous {
-  float: left;
-  width: 50%;
-}
-.comment-navigation .nav-next,
-.paging-navigation .nav-next,
-.post-navigation .nav-next {
-  float: right;
-  text-align: right;
-  width: 50%;
-}
-/* ----------------------------- */
-/* ==Alignments                  */
-/* ----------------------------- */
-.alignnone {
-  margin: .25em 1.5em 1.5em 0;
-}
-.aligncenter {
-  clear: both;
-  display: block;
-  margin: 1.5em auto;
-}
-.alignleft {
-  float: left;
-  margin: 0 1.5em .25em 0;
-}
-.alignright {
-  float: right;
-  margin: 0 0 .25em 1.5em;
-}
-/* ----------------------------- */
-/* ==Clearings                   */
-/* ----------------------------- */
-.entry-content,
-.comment-content {
-  clear: both;
-}
-.entry-content::after,
-.comment-content::after,
-.entry-content::before,
-.comment-content::before {
-  content: "";
-  display: table;
-}
-/* ----------------------------- */
-/* ==Widgets                     */
-/* ----------------------------- */
-.widget + .widget {
-  margin: 1.5em 0 0;
-}
-.widget select {
-  max-width: 100%;
-}
-/* ----------------------------- */
-/* ==Posts and pages             */
-/* ----------------------------- */
-/* === 5.1 Posts - post_class === */
-/* === 5.2 Pages - body_class === */
-/* === 5.3 Posts and Pages - Contents === */
-.hentry {
-  margin: 0 0 1.5em;
-}
-.page-content,
-.entry-content,
-.entry-summary {
-  margin: 1.5em 0 0;
-}
-.page-links {
-  clear: both;
-  margin: 0 0 1.5em;
-}
-/* ----------------------------- */
-/* ==Comments                    */
-/* ----------------------------- */
-.comment-content a {
-  word-wrap: break-word;
-}
-/* ----------------------------- */
-/* ==Media                       */
-/* ----------------------------- */
-img.wp-smiley {
-  margin-bottom: 0;
-  margin-top: 0;
-  padding: 0;
-  border: none;
-}
-/* ----------------------------- */
-/* ==Captions                    */
-/* ----------------------------- */
-.wp-caption {
-  max-width: 100%;
-  margin-bottom: 1.5em;
-}
-.wp-caption img {
-  display: block;
-  margin: 0 auto;
-}
-.wp-caption-text {
-  margin: 1em 0;
-  text-align: center;
-}
-/* ----------------------------- */
-/* ==Galleries                   */
-/* ----------------------------- */
-.gallery {
-  margin-bottom: 1.5em;
-}
-.gallery-item {
-  display: inline-block;
-  width: 100%;
-  text-align: center;
-  vertical-align: top;
-}
-.gallery-columns-2 .gallery-item {
-  max-width: 50%;
-}
-.gallery-columns-3 .gallery-item {
-  max-width: 33.33%;
-}
-.gallery-columns-4 .gallery-item {
-  max-width: 25%;
-}
-.gallery-columns-5 .gallery-item {
-  max-width: 20%;
-}
-.gallery-columns-6 .gallery-item {
-  max-width: 16.66%;
-}
-.gallery-columns-7 .gallery-item {
-  max-width: 14.28%;
-}
-.gallery-columns-8 .gallery-item {
-  max-width: 12.5%;
-}
-.gallery-columns-9 .gallery-item {
-  max-width: 11.11%;
-}
-.gallery-caption {
-  display: block;
-}
-/* ----------------------------- */
 /* ==own stylesheet              */
 /* ----------------------------- */
 /* Here should go your own CSS styles */

less/_00-config.less

@@ -1,12 +1,12 @@
 /*!
-* www.KNACSS.com V4.3.6 (10 novembre 2015) @author: Raphael Goetter, Alsacreations
+* www.KNACSS.com V4.4.0 (12 décembre 2015) @author: Raphael Goetter, Alsacreations
 * Licence WTFPL http://www.wtfpl.net/
 */
 
 // Config file and project variables
 
 // font sizes
-@base-font-size : 14px; // if "14px" then 1em = 14px
+@base-font-size : 1.4rem; // ex. 1.4rem would be "14px" equivalent
 @line-height    : 1.5; // equiv line-height 1.5
 @h1-size        : 3.2rem; // equiv "32px"
 @h2-size        : 2.8rem; // equiv "28px"
@@ -16,10 +16,9 @@
 @h6-size        : 1.6rem; // equiv "16px"
 
 // font stacks
-@font-stack-common      : Helvetica, Arial, sans-serif; // common font
+@font-stack-common      : sans-serif; // common font
-@font-stack-headings    : Helvetica, Arial, sans-serif; // headings font
+@font-stack-headings    : sans-serif; // headings font
-@font-stack-monospace   : Consolas, "DejaVu Sans Mono", Courier, monospace; // monospace font
+@font-stack-monospace   : consolas, courier, monospace; // monospace font
-@font-stack-universal   : FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; // universal stack
 
 // font colors
 @base-color             : #000; // text color on body and content

less/_01b-base.less

@@ -16,10 +16,6 @@ ol {
   padding-left: 2em;
 }
 
-ul.@{kna-namespace}unstyled {
-  list-style: none;
-}
-
 img {
   vertical-align: middle;
 }
@@ -50,9 +46,7 @@ html {
 }
 
 body {
-
+  font-size: @base-font-size;
-  /* set body font-size in em (1.4em equiv "14px") */
-  font-size: unit((@base-font-size / 10), em);
 
   background-color: @base-background;
   color: @base-color;
@@ -160,33 +154,6 @@ var {
   font-style: italic;
 }
 
-/* ----------------------------- */
-/* == hiding content             */
-/* ----------------------------- */
-
-/* hidden but not for an assistive technology like a screen reader, Yahoo! method */
-.visually-hidden {
-  position: absolute !important;
-  border: 0 !important;
-  height: 1px !important;
-  width: 1px !important;
-  padding: 0 !important;
-  overflow: hidden !important;
-  clip: rect(0, 0, 0, 0) !important;
-}
-
-@media (max-width: @small-screen) {
-  .@{kna-namespace}no-small-screen {
-    display: none;
-  }
-}
-
-@media (min-width: @large-screen) {
-  .@{kna-namespace}no-large-screen {
-    display: none;
-  }
-}
-
 /* ----------------------------- */
 /* == browsers consistency       */
 /* ----------------------------- */

less/_02-layout.less

@@ -3,8 +3,8 @@
 /* ----------------------------- */
 
 /* module, gains superpower "BFC" Block Formating Context */
-.@{kna-namespace}mod,
+.mod,
-.@{kna-namespace}bfc {
+.bfc {
   overflow: hidden;
 }
 

less/_06-helpers.less

@@ -1,3 +1,38 @@
+/* ---------------------------------- */
+/* ==state helpers                    */
+/* ---------------------------------- */
+
+/* invisible for all */
+.is-hidden,
+[hidden] {
+  display: none;
+}
+
+/* hidden but not for an assistive technology like a screen reader, Yahoo! method */
+.visually-hidden {
+  position: absolute !important;
+  border: 0 !important;
+  height: 1px !important;
+  width: 1px !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+}
+
+.is-disabled,
+[disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+  cursor: not-allowed;
+  filter: grayscale(1);
+}
+
+ul.is-unstyled,
+ul.unstyled {
+  list-style: none;
+  padding-left: 0;
+}
+
 /* ---------------------------------- */
 /* ==visual helpers                   */
 /* .. use them with parcimony !       */
@@ -228,6 +263,26 @@ s,m,l,n = small, medium, large, none
   margin-left: @large-value;
 }
 
+.@{kna-namespace}mauto {
+  margin: auto;
+}
+
+.@{kna-namespace}mtauto {
+  margin-top: auto;
+}
+
+.@{kna-namespace}mrauto {
+  margin-right: auto;
+}
+
+.@{kna-namespace}mbauto {
+  margin-bottom: auto;
+}
+
+.@{kna-namespace}mlauto {
+  margin-left: auto;
+}
+
 .@{kna-namespace}ptn,
 .@{kna-namespace}pt0 {
   padding-top: 0;

less/_09-misc.less

@@ -42,6 +42,14 @@
   }
 }
 
+// use .no-wrapping to disallow hyphens on small screens
+@media (max-width: @small-screen) {
+  .no-wrapping {
+    word-wrap: normal;
+    hyphens: manual;
+  }
+}
+
 /* Google Gmap3 bug fix on images */
 .gm-style img {
   height: 100%;

less/knacss.less

@@ -22,7 +22,7 @@
 @import "_10-styling"; // minor stylings
 
 // WordPress base styles
-@import "_11-wordpress"; // WordPress reset and basic styles
+// @import "_11-wordpress"; // WordPress reset and basic styles
 
 /* ----------------------------- */
 /* ==own stylesheet              */

package.json

@@ -1,10 +1,10 @@
 {
   "name": "knacss",
-  "version": "4.3.6",
+  "version": "4.4.0",
   "homepage": "http://www.knacss.com/",
   "bugs": "https://github.com/raphaelgoetter/KNACSS/issues",
   "author": [
-    "Raphaël GOETTER, Alsacreations (http://goetter.fr)"
+    "Raphaël GOETTER, Alsacreations (http://www.alsacreations.fr)"
   ],
   "contributors": [
     "Raphaël GOETTER, Alsacreations"

sass/_00-config.scss

@@ -1,12 +1,12 @@
 /*!
-* www.KNACSS.com V4.3.6 (10 novembre 2015) @author: Raphael Goetter, Alsacreations
+* www.KNACSS.com V4.4.0 (12 décembre 2015) @author: Raphael Goetter, Alsacreations
 * Licence WTFPL http://www.wtfpl.net/
 */
 
 // Config file and project variables
 
 // font sizes
-$base-font-size : 14px !default; // if "14px" then 1em = 14px
+$base-font-size : 1.4rem !default; // ex. 1.4rem would be "14px" equivalent
 $line-height    : 1.5 !default; // equiv line-height 1.5
 $h1-size        : 3.2rem !default; // equiv "32px"
 $h2-size        : 2.8rem !default; // equiv "28px"
@@ -16,10 +16,9 @@ $h5-size        : 1.8rem !default; // equiv "18px"
 $h6-size        : 1.6rem !default; // equiv "16px"
 
 // font stacks
-$font-stack-common    : Helvetica, Arial, sans-serif !default; // common font
+$font-stack-common    : sans-serif !default; // common font
-$font-stack-headings  : Helvetica, Arial, sans-serif !default; // headings font
+$font-stack-headings  : sans-serif !default; // headings font
-$font-stack-monospace : Consolas, DejaVu Sans Mono, Courier, monospace !default; // monospace font
+$font-stack-monospace : consolas, courier, monospace !default; // monospace font
-$font-stack-universal : FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif !default; // universal stack
 
 // font colors
 $base-color             : #000 !default; // text color on body and content

sass/_01b-base.scss

@@ -16,10 +16,6 @@ ol {
   padding-left: 2em;
 }
 
-ul.#{$kna-namespace}unstyled {
-  list-style: none;
-}
-
 img {
   vertical-align: middle;
 }
@@ -50,9 +46,7 @@ html {
 }
 
 body {
-
+  font-size: $base-font-size;
-  /* set body font-size in em (1.4em equiv "14px") */
-  font-size: ($base-font-size / 10px) + em;
 
   background-color: $base-background;
   color: $base-color;
@@ -154,33 +148,6 @@ var {
   font-style: italic;
 }
 
-/* ----------------------------- */
-/* == hiding content             */
-/* ----------------------------- */
-
-/* hidden but not for assistance tools, Yahoo! method */
-.visually-hidden {
-  position: absolute !important;
-  border: 0 !important;
-  height: 1px !important;
-  width: 1px !important;
-  padding: 0 !important;
-  overflow: hidden !important;
-  clip: rect(0, 0, 0, 0) !important;
-}
-
-@media (max-width: $small-screen) {
-  .#{$kna-namespace}no-small-screen {
-    display: none;
-  }
-}
-
-@media (min-width: $large-screen) {
-  .#{$kna-namespace}no-large-screen {
-    display: none;
-  }
-}
-
 /* ----------------------------- */
 /* == browsers consistency       */
 /* ----------------------------- */

sass/_02-layout.scss

@@ -3,8 +3,8 @@
 /* ----------------------------- */
 
 /* module, gains superpower "BFC" Block Formating Context */
-.#{$kna-namespace}mod,
+.mod,
-.#{$kna-namespace}bfc {
+.bfc {
   overflow: hidden;
 }
 

sass/_06-helpers.scss

@@ -1,3 +1,38 @@
+/* ---------------------------------- */
+/* ==state helpers                    */
+/* ---------------------------------- */
+
+/* invisible for all */
+.is-hidden,
+[hidden] {
+  display: none;
+}
+
+/* hidden but not for an assistive technology like a screen reader, Yahoo! method */
+.visually-hidden {
+  position: absolute !important;
+  border: 0 !important;
+  height: 1px !important;
+  width: 1px !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+}
+
+.is-disabled,
+[disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+  cursor: not-allowed;
+  filter: grayscale(1);
+}
+
+ul.is-unstyled,
+ul.unstyled {
+  list-style: none;
+  padding-left: 0;
+}
+
 /* ---------------------------------- */
 /* ==visual helpers                   */
 /* .. use them with parcimony !       */
@@ -227,6 +262,26 @@ s,m,l,n = small, medium, large, none
   margin-left: $large-value;
 }
 
+.#{$kna-namespace}mauto {
+  margin: auto;
+}
+
+.#{$kna-namespace}mtauto {
+  margin-top: auto;
+}
+
+.#{$kna-namespace}mrauto {
+  margin-right: auto;
+}
+
+.#{$kna-namespace}mbauto {
+  margin-bottom: auto;
+}
+
+.#{$kna-namespace}mlauto {
+  margin-left: auto;
+}
+
 .#{$kna-namespace}ptn,
 .#{$kna-namespace}pt0 {
   padding-top: 0;

sass/_09-misc.scss

@@ -42,6 +42,14 @@
   }
 }
 
+// use .no-wrapping to disallow hyphens on small screens
+@media (max-width: $small-screen) {
+  .no-wrapping {
+    word-wrap: normal;
+    hyphens: manual;
+  }
+}
+
 /* Google Gmap3 bug fix on images */
 .gm-style img {
   height: 100%;

sass/knacss.scss

@@ -22,7 +22,7 @@
 @import "_10-styling"; // minor stylings
 
 // WordPress base styles
-@import "_11-wordpress"; // WordPress reset and basic styles
+// @import "_11-wordpress"; // WordPress reset and basic styles
 
 /* ----------------------------- */
 /* ==own stylesheet              */