KNACSS

Outil par (Intégrateur du Dimanche, Strasbourg)
Créé le , mis à jour le (21541 lectures)
Tags : css, reset, framework, grilles

KNACSS est une feuille de style CSS minimaliste et extensible pour débuter une intégration.

Ce projet se situe entre un reset CSS et un framework CSS, et cumule les avantages de chacun tout en étant complètement extensible et modulable selon les projets.

Son but est de servir de base commune à tous les projets d'intégration web, grâce à une nomenclature et des conventions constantes. Mais aussi de faciliter les positionnements d'éléments, des grilles de mise en page, de gérer les alignements, les gouttières, etc. Le tout de la façon la plus propre, accessible et intuitive possible.

KNACSS est constitué d'un fichier CSS unique pour éviter des requêtes et des chargements inutiles.

Son installation est simple : il suffit d'appeler la feuille de styles knacss.css au sein de vos pages pour en profiter instantanément. Le framework est compatible tous navigateurs bureau et mobiles, même IE6 et IE7 moyennant quelques adaptations (lire la documentation).

Commentaires

Knozelfhoegtj a dit le

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

pchlj a dit le

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 ? ;)

SuperMerguez a dit le

@Knozelfhoegtj : je ne sais pas si tu as vu qui était les auteurs du projet :>

niuxe a dit le

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.

Skoua a dit le

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.

Nico3333fr a dit le

C'est sympathique, je pense que je vais m'en inspirer pour certains de mes futurs projets. :)

LuciferX a dit le

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 ;-)

jmlapam a dit le

Intéressant en particulire pour les marges et les largeurs de bloc. Merci.

jojaba a dit le

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

jojaba a dit le

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.

Knozelfhoegtj a dit le

@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 ;)

Raphael a dit le

@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.

Styus a dit le

@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-...

jeremy685 a dit le

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.

Raphael a dit le

@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.

Raphael a dit le

@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 ;)

Cpag a dit le

Bonjour à tous. Une critique (pas bien méchante hein) : http://creapage.net/blog/2012/analyses/pourqu...

pidj a dit le

Après un rapide test, www.knacss.com ne semble pas être bien compatible avec IE 8. Est-ce normal ?

Raphael a dit le

@pidj : si si, il l'est entièrement. Mais il faudrait plus de détails.

okoweb a dit le

Bonjour,
Il y'avait une version compressée ressente avec des modèles de page. Puis-je les avoir ?

Merci d'avance...

sniffle83 a dit le

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=)

sniffle83 a dit le

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=)