Né en 2012 dans les bureaux de l'agence Alsacréations dans le but de servir de base commune à tous les projets d'intégration web, KNACSS gagne chaque année en maturité et s'adapte aux évolutions des usages et techniques.
Bien que les frameworks soient — à juste titre — décriés car usines à gaz, KNACSS demeure toujours aussi léger et solide grâce à des bonnes pratiques d'accessibilité, une nomenclature et des conventions utiles au sein d'une équipe.
Parmi les nouveautés les plus significatives de ce septième opus :
- Grillade, le système de grille principal de KNACSS a été entièrement repensé pour les navigateurs modernes. Il est bâti sur Grid Layout et non plus Flexbox. Il n'est pas prévu d'alternatives pour les anciens navigateurs, mais rien ne vous empêche de continuer à utiliser l'ancienne version de Grillade ou un autre framework de grilles.
- L'architecture de KNACSS a été refondue pour être plus simple et plus intuitive. Les variables également.
- Le fichier de "reset" Normalise.css a été remplacé par celui de Bootstrap : Reboot.css.
- La plupart des composants du quotidien disposent à présent de styles de base : alertes, boutons, badges, checkbox, radio, tabs, flèches, il existe même un style prévu pour le bouton "burger" de navigation.
(exemple pratique de grille construite à l'aide de Grillade de KNACSS)
Liens utiles pour tout comprendre et maîtriser la nouvelle version de KNACSS :
- Site officiel de KNACSS
- Page du repository Github
- Documentation / Styleguide
- Pense-bête (cheatsheet) de la v7
- Bac à sable Codepen
Ci-dessous, le pense-bête de KNACSS v7, téléchargeable au format PDF en cliquant dessus :
Commentaires
Salut ...
Bonne nouvelle :-) ça fait un petit moment que j'attendais la version stable :-)
Cependant j'ai utilisé la version de grillade en flex sur certains projets... est-il possible d'avoir un lien vers la documentation (syntaxe de cette ancienne version ?) car je vois que sur le site dédié à grillade, la documentation a été retiré... j'ai cherché sur github mais je ne suis pas à l'aise avec cet environnement , en tous cas je n'ai pas trouvé ... à moins que la syntaxe entre les 2 versions n'a pas varié... mais je ne crois pas ..?
et merci pour cette nouvelle version... je vois qu'elle a dépassé l'état sur-vitaminé :-) génial pour tous les composants ajoutés... c'est une belle évolution (peut-être même une révolution ? :-)
chapeau !
@Ethos : La syntaxe entre les deux versions a assez peu varié. "Normalement" la version Grid n'a fait qu'ajouter des fonctionnalités.
Pour retrouver l'ancienne documentation sur Github, tu peux pointer sur le tag 6.1.2 par exemple : https://github.com/alsacreations/KNACSS/tree/6.1.2/doc
Il y a aussi l'ancien styleguide que tu peux tester sur Codepen : https://codepen.io/raphaelgoetter/full/LNwOjz
Enfin, il est toujours possible d'utiliser l'ancienne grille Flexbox, même sur la version 7 de KNACSS : https://knacss.com/styleguide.html#grids
Bon courage !
@raphael :
merci pour tous ces liens.... je pensais que les 2 versions variaient plus... bon travail ! la migration sera plus facile..
(un merci particulier pour le lien codepen)
Bien à vous...
Bonne nouvelle, c'est beau comme du noel !
Merci pour le boulot.
Salut
Problème de sécurité, les liens vers KNACCS, sauf Github, ne fonctionnent plus dans Chrome, Firefox et Edge qui bloquent l'accès avec un NET::ERR_CERT_COMMON_NAME_INVALID !
Pourquoi faire compliqué quand on peut faire simple.
Je ne suis pas spécialiste css, pour un mode d'emploi, j'ai utilisé Knacss pour le style de https://www.knacss.com/doc.html
J'ai un comportement différent pour le premier h2 de la page selon que j'utilise knacss ou knacss-unminified (je cite de mémoire, c'est au bureau que je m'en sers et maintenant je suis chez moi) : dans le second cas, il ne monte que lorsqu'il est repoussé par le suivant, dans le premier, il monte assez vite, même pas à cause d'un autre .sg-titre
Si j'y pense, demain je ferai des copies d'écran mais vous pouvez peut-être tester, sur la page doc.html, l'introduction est trop courte, il faudrait allonger la sauce
(un truc que j'utilise, je ne sais pas si vous connaissez : schnaps.it ;) )