KNACSS v5 est sorti

Actualité par (Intégrateur du Dimanche, Strasbourg)
Créé le (12918 lectures)
Tags : outil, framework, responsive, grilles

Depuis quelques jours, la version 5.0 de KNACSS est sortie avec son lot de nouveautés et mises à jour.

KNACSS est une feuille de styles CSS multi-vitaminée comprenant tout un ensemble de bonnes pratiques et de styles de base ("reset") pour débuter chacun de ses projets.

knacss

Un peu à la manière d'un framework CSS, mais en bien plus léger, KNACSS gère aussi bien les tailles de polices, les espacement, les alignements, les positionnements, les grilles et bien-entendu les Responsive Web Design. Le tout dans une petite feuille de styles.

Cela fait plus de 4 années que cet outil existe et l'on peut raisonnablement penser que la version 5 est celle de la maturité :)

Pour l'occasion, un Style Guide (guide d'utilisation visuel) a été concocté.

Les modifications notables de cette v5 sont :

  • suppression du support IE8-IE9 (à partir de la version KNACSS 5.0, seul IE10 et supérieurs sont pris en charge)
  • suppression du support LESS (à partir de la version KNACSS 5.0, seul le préprocesseur Sass est encore pris en charge pour des raisons de maintenabilité)
  • mise à jour vers Normalize 4.1.1 
  • restructuration / renommage des fichiers avec préfixes _config-, _layout-, _library-, _object-, _override-
  • ajout de la library include-media pour faciliter la gestion des media queries
  • adaptation des variables de breakpoint pour les rendre compatibles avec include-media
  • grille "grillade" à présent en mobile first (par défaut 1 colonne sur "tiny", 2 colonnes sur "small", valeurs modifiables)
  • nommage de variables préfixé pour plus de maintenabilité : $gutter -> $grid-gutter, $number -> $grid-number, $left -> $grid-left et $right -> $grid-right
  • renommage des éléments de grilles : .flex-item-double --> .grid-item-double (plus cohérent)
  • ajout des éléments de layout : .grid-item-first, .grid-item-medium et .grid-item-last
  • ajout de Table des Matières dans la feuille de style non minifiée
  • adaptation des fichiers gulpfile, package.json et bower.json
  • mise à jour de la documentation

(re)découvrez KNACSS sur knacss.com

styleguide de knacss

(le StyleGuide de KNACSS 5)

Source : http://knacss.com/

Commentaires

Odou a dit le

Je regrette l'arrêt du support de LESS. Je pense que je vais me "contenter" de la version 4 pendant encore longtemps.

Raphael a dit le

@Odou : Je comprends ta position.
La raison principale qui nous pousse à ce choix est qu'il devient extrêmement difficile de maintenir 2 langages, le projet KNACSS s'en voit ralenti actuellement à cause de ça.

Les arguments du choix de Sass :

- il y a aujourd'hui 4x ou 5x plus d'utilisateurs Sass que LESS (un nouveau venu aura bien plus de chance d'avoir appris Sass en formation que LESS) : source http://codepen.io/chriscoyier/pen/wMVLjP
- une communauté bien plus nombreuse et vivante
- un langage plus robuste et pérenne, une syntaxe plus cohérente en général
- l'avenir est clairement du côté Sass (c'est aussi pour cela que Bootstrap 4 est passé à Sass)

Odou a dit le

@Raphael : Moi aussi, je comprends parfaitement ta position.
En ce qui me concerne, je sors à peine de l'apprentissage de LESS et je n'ai pas envie de me replonger dans un nouveau prépocesseur pour l'instant. A moins que la transition soit simple ?
J'ai une utilisation simple pour ne pas dire simpliste de KNACSS et je pense que rester en version 4 pour quelques temps ne sera pas pénalisant.

Raphael a dit le

@Odou : KNACSS est lui aussi très simpliste puisqu'il n'y a quasiment pas de mixins.
Du coup, 90% du boulot est de remplacer les syntaxes de variables @toto (LESS) --> $toto (Sass)

Une doc comparative ici : https://css-tricks.com/sass-vs-less/

Odou a dit le

@Raphael : Après avoir lu le lien suggéré ainsi que quelques autres comme par exemple http://www.zingdesign.com/the-sass-and-compas... je crois que je vais suivre la tendance et migrer vers Sass.

FLeuReTTe a dit le

Bonjour,

Du coup, quelle méthode préconises-tu pour IE8 et IE9?