KNACSS est une feuille de style CSS minimaliste et extensible pour débuter une intégration.
KNACSS, c'est une sorte de feuille de style CSS "reset" sur-vitaminée qui permet de commencer un projet à partir de zéro tout en tenant compte de bonnes pratiques générales (accessibilité, performance, responsive webdesign, grille de mise en forme).
Conçu par l'agence web Alsacreations.fr et pensé pour être couplé avec des préprocesseurs tel que Sass, le micro-framework KNACSS est employé quotidiennement sur toute sorte de projet web quel que soit son type ou son envergure.
KNACSS est né en 2012 et a bien mûri depuis : la version majeure 7 est publiée en 2018.
En savoir plus
Pour commencer avec KNACSS, les ressources suivantes vous seront fort utiles :
- Documentation et Guide de styles
- Pense-bête en PDF
- Site web de présentation de KNACSS : http://knacss.com
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=)