KNACSS v3.0 est sorti

C’est aujourd’hui, un peu en avance, la sortie la troisième mise à jour majeure de KNACSS , le micro-framework CSS que nous utilisons chez Alsacréations.
Les nouveautés, ajouts et corrections sont nombreux et la peinture est encore fraîche, alors si vous dénichez n’importe quelle anomalie, n’hésitez pas à ouvrir un ticket sur Github.

Plusieurs dizaines de modifications ont été opérées depuis la version précédente de KNACSS. La v3 est plus stable et plus complète tout en respectant autant que faire se peut une certaine rétro-compatibilité avec la version précédente.

Nouveautés

  • Booléens LESS : des variables de configuration permettent dorénavant d’activer ou non certains fichiers de styles conditionnels (activation du support IE6-IE8, styles graphiques minimums, support de Google Maps, hyphénation automatique, etc.)
  • Styles graphiques minimums pour les citations, les séparateurs et autres éléments de base (activés si variable @styling="true")
  • Ajout d’un point de rupture « medium » pour obtenir au final : tiny : <=320
    small <= 480, medium : 1280
  • Ajout de quelques values supplémentaires dans le fichier de config.less : tiny-value, extra-large-value, ultra-large-value
  • Davantage de variables de configuration : booléens, font sizes, font stacks, font colors, backgrounds, spacings, breakpoints, gutter, etc.
  • Ajout de classes visuelles : .p-like, .strong, .em, .no-strong, .no-em
  • Ajout de classes de masquage : .no-print, .no-small-screen, .no-large-screen

Améliorations

  • Séparation des feuilles de styles : fichier dédié au support IE, fichier google maps, hyphénations, styles mineurs, activés et ajoutés si certains booléens sont à « true »
  • Ajout des classes .start et .end, en complément de .left et .right pour les sites qui se lisent de la droite vers la gauche. Cela permettra d’avoir des .start {float: right} plutôt que des .left {float: right} sur ces sites.
  • Passage à (davantage de) REM, notamment pour les titrages. Avec un mixin LESS pour permettre un fallback en pixel.
  • Simplification des grids et autogrids. Moins de code, moins de bidouille grâce à l’unité rem (la plupart des bidouilles étant déportées sur la feuille dédiée IE)
  • Les variables de « spacing helpers » sont à présent exprimées en em et non plus en pixels
  • Les préfixes vendeurs (-moz-, -webkit-, …) ne sont plus présents dans les versions LESS : cela pourra être géré de façon automatique par plein d’outils (Autoprefixer, Prepros, Grunt, etc.).
  • Simplification des noms des helpers : Les mots-clés « reset » et « 0 » deviennent « none ». Ex. .m-reset, .ma0 {margin: 0} devient .man {margin: 0}. Attention à la rétro-compatibilité !

Corrections

  • Les contenus masqués en .visually-hidden utilisent à présent la technique de clip pour cacher le contenu.
  • Correction de la règle (trop spécifique) : :not(.gm-style) img {height: auto !important;}
  • Rétablissement de l’alignement de texte text-align: left pour les enfants des autogrids [class*="autogrid"] &gt; *
  • Corrections de certains :after mal compilés dans la version LESS
  • Ajout de commentaires
  • Mise à jour de la version de Bower
  • Simplification des décimales de certains calculs de valeurs
  • Multiples corrections mineures

TODO

  • Correctifs à prévoir, les tests ont été peu nombreux avant la sortie de la v3
  • La version Sass n’est pas encore en v3. Elle vient d’être mise à jour et intégrée directement dans le Github originel de KNACSS
  • La prochaine mise à jour majeure (v4) est prévue pour… janvier 2015.

Voir tous les détails de cette version 3.0