Knacss est un concentré d’essentiel d’essence de CSS 3. Si, si. Plus techniquement, il s’agit d’un framework CSS qui implémente pas mal de fonctionnalités intéressantes pour un poids qui reste très léger, variable en fonction des modules que vous décidez d’utiliser.
Alors, KnaCSS, c’est quoi ? Juste un framework de plus dans l’immensité frameworkienne csseuse ?! Non, non, mille fois non. En fait, c’est à la fois beaucoup moins et beaucoup plus que ça, puisque KnaCSS est un mini-framework. Conçu par Raphaël Goetter, KnaCSS a pour but premier de faciliter vos développements CSS par un condensé – et c’est le mot juste – de code réutilisable sur lequel vous allez pouvoir vous appuyer pour produire du code flexible, responsive et pérenne. Le must.
En français dans le texte …
Concentré de bonnes pratiques, de conventions de nommage, d’astuces et de bouts de code réutilisables, KNACSS peut être considéré comme un véritable mini-framework CSSAlsacréations
De manière très générale, on trouvera dans KnaCSS, un reset CSS, des grilles de positionnement, le support pour les préprocesseurs, une gestion des polices, des icônes, … bref, une bonne base de développement pour vos projets CSS modernes. Voilà un résumé des points forts du framework.
Reset CSS
Par son extrême légèreté, le reset CSS appliqué par KnaCSS se distingue de ceux que l’on rencontre habituellement. Il supprime diverses marges internes (padding) et externes (margin), et applique des styles par défaut aux éléments inline code, pre, samp, kbd, mark, em, strong, i,b, sub et sup.
Convention de nommage
KnaCSS s’inspire de la syntaxe BEM pour le nommage de classes. De fait, on retrouve peu de sélecteurs de descendance et on privilégie l’usage de classes, pour un code flexible et réutilisable.
Polices de caractères
Les polices sont traitées en unités relatives em à partir d’un étalon appliqué à tous les éléments enfants de html : font-size: 62,5%. Outre l’usage de tailles relatives, le gros intérêt se trouve dans le fait de pouvoir utiliser un coéficient de conversion très souple, car de cette manière 1em équivaut à 10px.
Positionnements
Le framework propose toute une série d’helpers pour faciliter la gestion des marges et implémente des classes destinées à faciliter l’épineux problème des positionnements. C’est clairement un autre point fort qui permet de gagner beaucoup de temps en développement. Ainsi, on y trouve la prise en charge du module flexbox, et un support de grilles, tous deux nettement orientés responsive design.
Support préprocesseurs
Oui, vous lisez bien, KnaCSS est prévu pour laisser la possibilité de travailler avec les préprocesseurs LESS et SASS en implémentant directement toute une série de variables de configuration ! Vous modifiez une valeur de variable, et cela se répercute sur toutes les autres classes du framework qui utilisent cette valeur ! C’est bien évidemment le principe des préprocesseurs, mais le fait que ça soit implémenté directement dans le framework montre bien toute l’attention des créateurs pour les problèmes liés aux impératifs de conception en entreprise.
Icones Unicode
Enfin, pour terminer sur une note décorative, vous trouverez dans KnaCSS une gestion de polices d’icônes – procédé très à la mode – qui vous permet d’éviter les sprites, d’alléger le poids de vos pages et de minimiser les requêtes HTTP.
Compléments d’information
Une présentation du framework est disponible sur SlideShare : Des CSS efficaces avec KNACSS.
Plus d’infos sur le site officiel : http://www.knacss.com/
Et enfin une présentation complète en français sur Alsacréations.
