KNACSS constitue une bibliothèque de composants natifs HTML stylés, accessibles et personnalisables.
Le principe est très simple : concrètement, KNACSS est une feuille de styles CSS à appliquer dans n'importe quel projet web et qui applique des styles basiques aux éléments HTML les plus couramment utilisés.
Caractéristiques
- Composants natifs : Tous les éléments HTML essentiels (button, input, textarea, select, checkbox, radio, range, switch, details, dialog, table, list…) avec des styles modernes et accessibles.
- CSS vanilla moderne : Custom properties, nesting, Grid/Flexbox, media queries modernes. Aucune dépendance à un framework CSS.
- Styleguide interactif : Prévisualisez tous les composants en direct, affichez le code source et copiez-le facilement.
- Personnalisation complète : Adaptez couleurs, espacements, rayons et typographie via des variables CSS, sans toucher au HTML.
- Performance et accessibilité : Code léger, faible spécificité CSS, JavaScript minimal, navigation clavier complète.
- Éco-conception : Assets optimisés, rendu efficace, compatible avec les approches sobres.
KNACSS a été conçu par l'agence web Alsacreations.fr et pensé pour être employé quotidiennement sur toute sorte de projet web quel que soit son type ou son envergure.
En savoir plus
KNACSS fait partie d'un écosystème d'outils et bonnes pratiques CSS, les ressources suivantes vous seront fort utiles :
- Guidelines CSS d'Alsacréations,
- Reset d'Alsacréations,
- Bretzel (Layouts d'Alsacréations),
- KNACSS (Natives d'Alsacréations)
Commentaires
Bravo ! Vraiment ! Même si vous avez été moins rapide que presse-citron sur ce coup là :
http://www.presse-citron.net/knacss-un-framew...
:p
Lol, moins rapide :)
t'as pas lu toute la page ???
Chez Alsacréations, et par expérience, on préfère de loin un socle de base minimaliste qui convienne tel quel à tous les nouveaux projets, mais qui puisse être progressivement enrichi. C'est le cas de KNACSS.
Et chez presse citron :
C’est dans ce constat que KNACSS a été développé par Raphaël Goetter, le talentueux créateur de la communauté Alsacréations.
Alors ?? c qui les plus rapide finalement ? ;)
@Knozelfhoegtj : je ne sais pas si tu as vu qui était les auteurs du projet :>
Cette info, je la connais avant tous les alsanautes ;) Hier ou avant hier, je suis tombé par hasard sur cela et je voulais te féliciter Raphaël. Mais pas le temps en ce moment. Bon en tout cas je le fais ici. J'ai pas encore bien tout regarder mais je vais m'attarder dessus.
Ca me rassure de voir que je ne suis pas le seul à faire des classes .mt1 .w50 et cie.
Merci pour ça en tout cas, je vais en piquer quelques lignes.
C'est sympathique, je pense que je vais m'en inspirer pour certains de mes futurs projets. :)
Intéressant, d'habitude je ne suis pas trop fan des frameworks, mais comme le projet se situe justement entre un reset et un framework et qu'en plus tout ca est en français, pourquoi ne pas aller y jeter un petit coup d'oeil ;-)
Intéressant en particulire pour les marges et les largeurs de bloc. Merci.
Merci pour la mise à dispo. Hormis le gain de temps indéniable pour la création de feuille de style, j'y trouve également des pratiques très instructives, un condensé de cours sur les CSS actuelles en somme.
Juste une petite question lexicale : "gouttière" correspond à "gutter" en anglais, c'est bien ça ? Je traduirais ça plutôt par "marge". Mais peut-être était-ce de l'auto-promotion cachée ;D :p
Ah, j'oubliais, le décalage des bulles explicatives est encore d'actualités (la remarque avait été faite sur le site de Raphaël à ce que je me souvienne) pour Firefox 14.0.1 mais pas pour Chrome 20.0.1132.57 m.
@Supermerguez, merci, j'ai bien vu qui étaient les auteurs du projet. Je souligne juste la différence de temps de publication de la news ;)
@jojaba : hello,
En fait c'est une convention établie d'avoir francisé "gutter" en "gouttière". Cela me semble moins gênant que "marges" qui a un sens très précis en CSS et risque d'induire en erreur.
@Raphael : Bonjour, dans l'exemple sur les formulaires, tu encadres chaque label+input d'un fieldset sans legend, pourquoi ? Qu'es-ce que cela apporte ?
Si tu pouvais répondre sur le forum directement afin que cela profite à tous, d'avance merci : http://forum.alsacreations.com/topic-6-63065-...
Bonjour,
Est-ce que la hauteur des lignes via les em fonctionnent dans tout les cas ?
Je pensais que lorsque l'on utilisais des % sur le html, la hauteur était calculé par apport à la valeur par défaut configuré dans le navigateur.
@jeremy685 : la hauteur des lignes n'est justement pas en "em" : elle est de 1.5 et non de 1.5em, il n'y a donc pas de cascade désagréable par exemple.
@Styus : je n'ai pas de réponse universelle et péremptoire à cette question. C'est généralement pratique d'englober plusieurs champs dans un fieldset, mais ce n'est pas forcément idéal d'entourer *chaque* input d'un fieldset.
Dans l'exemple de KNACSS, j'ai simplement récupéré le code de http://pea.rs/forms/multi-left-labels pour aller plus vite ;)
Bonjour à tous. Une critique (pas bien méchante hein) : http://creapage.net/blog/2012/analyses/pourqu...
Après un rapide test, www.knacss.com ne semble pas être bien compatible avec IE 8. Est-ce normal ?
@pidj : si si, il l'est entièrement. Mais il faudrait plus de détails.
Bonjour,
Il y'avait une version compressée ressente avec des modèles de page. Puis-je les avoir ?
Merci d'avance...
Bonjour,
Apres avoir lu ce post et utilisé knacss, j'ai une question:
Pourquoi on commence par les media querie de taille desktop et non par smartphones ?
Je pensais qu'il fallait commencé par les petits écrans ?
Merci de votre réponse je trouve ce framework top et bcq plus léger que twitter bootstrap par exemple=)
Bonjour,
Apres avoir lu ce post et utilisé knacss, j'ai une question:
Pourquoi on commence par les media querie de taille desktop et non par smartphones ?
Je pensais qu'il fallait commencé par les petits écrans ?
Merci de votre réponse je trouve ce framework top et bcq plus léger que twitter bootstrap par exemple=)