Niveau : Confirmé

Découverte du framework CSS KNACSS

Tutoriel par (Intégrateur du Dimanche, Strasbourg)
Créé le , mis à jour le (12103 lectures)
Tags : sass, less, schnapsit, utf-8, unicode

Sommaire


Préprocesseurs, icônes et ressources

LESS et Sass

LESS et Sass sont des préprocesseurs CSS destinés à faciliter la vie de l'intégrateur durant la phase de développement.

Concrètement, il s'agit de variantes de langage CSS autorisant les variables, les imbrications, les fonctions et autres fonctionnalités, puis de passer ce langage dans une "moulinette" générant une feuille de style classique.

Pour se rendre compte rapidement de l'intérêt de tels outils, je vous invite à consulter une démonstration de gouttières sur CodePen.

Cherchez la ligne suivante dans la partie CSS (LESS) :

@gutter:  1em; // gutter value for grid layouts. Unit can be: %, px, em, rem

Il suffit à présent de modifier la valeur de cette variable et l'ensemble de toutes les grilles va s'adapter de lui-même !

Les variables de configuration, permettant d'adapter rapidement un nouveau projet web, sont assez nombreuses, jugez-en par vous-mêmes :

// font sizes
@base-font-size : 14px; // if "14px" then 1em = 14px
@line-height    : 1.5; // equiv line-height 1.5
@h1-size        : 3.2rem; // equiv "32px"
@h2-size        : 2.8rem; // equiv "28px"
@h3-size        : 2.4rem; // equiv "24px"
@h4-size        : 2.0rem; // equiv "20px"
@h5-size        : 1.8rem; // equiv "18px"
@h6-size        : 1.6rem; // equiv "16px"

// font stacks
@font-stack-common      : Helvetica, Arial, sans-serif; // common font
@font-stack-headings    : Helvetica, Arial, sans-serif; // headings font
@font-stack-monospace   : Consolas, "DejaVu Sans Mono", Courier, monospace; // monospace font
@font-stack-universal   : FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; // universal stack

// font colors
@base-color             : #000; // text color on body and content
@primary-color          : #000; // text color on primary elements
@secondary-color        : #000; // text color on secondary elements
@headings-color         : #000; // text color on headings
@base-color-link        : #333; // base links color
@base-color-link-hover  : #000; // base hovered/focused links color

// backgrounds
@base-background        : #fff; // body background color
@primary-background     : #fff; // primary elements background color
@secondary-background   : #fff; // secondary elements background color

// spacings (choose unit you prefer)
@tiny-value             : 5px; // tiny value for margins / paddings
@small-value            : 10px; // small value for margins / paddings
@medium-value           : 20px; // medium value for margins / paddings
@large-value            : 40px; // large value for margins / paddings
@extra-large-value      : 80px; // extra large value for margins / paddings
@ultra-large-value      : 160px; // ultra large value for margins / paddings

// breakpoints (choose unit you prefer)
@tiny-screen            : 480px; // tiny screens media query (less than 480px)
@small-screen           : 768px; // screens between 481px and 768px
@medium-screen          : 1024px; // screens between 769px and 1024px
@large-screen           : 1280px; // screens between 1025px and 1280px
@extra-large-screen     : 1600px; // screens between 1281px and 1600px
@ultra-large-screen     : 1920px; // ultra large screens

// grids variables (choose unit you prefer)
@gutter:  1em; // gutter value for grid layouts. Unit can be: %, px, em, rem
@number:  4; // number of equal columns
@left:    2; // left side of uneven columns
@right:   1; // right side of uneven columns

KNACSS dispose à la fois d'une version LESS et Sass.

Bonnes pratiques pour utiliser KNACSS

Voici une liste de bonnes pratiques pour utiliser KNACSS avec bonheur :

  1. N'utilisez pas KNACSS si vous êtes débutant complet en CSS
  2. Construisez votre version de KNACSS soit "à la main", ou encore avec un bower install knacss
  3. Placez vos styles personnels de préférence à la suite de ceux de knacss.css
  4. Évitez de surcharger les classes dans le HTML, limitez-vous à l'essentiel. Si un élément est suffisamment spécifique pour nécessiter 10 classes différentes, il vaut bien mieux le différencier avec un id ou une class dédiés.
  5. Appliquez les classes dans un ordre logique : d'abord la fonction de l'élément, puis son positionnement, puis sa largeur, puis la décoration. Exemple : <div class="mod left w50 mtm">

Ressources

Voici quelques ressources pour aller plus loin :

Commentaires

benjaminzanatta a dit le

Merci pour cet outil que j'utilise au quotidien !

Dans mon "fork" de KNACSS, j'enlève l'enrobage du body (background-color, color et font-family) et je rajoute la ligne .txtjustify { text-align: justify; }

Et une question : Pourquoi avoir attribué un font-weight : normal sur les balises de titrage ?

Raphael a dit le

@benjaminzanatta : " j'enlève l'enrobage du body (background-color, color et font-family) "
Ce n'est pas conseillé car ces valeurs sont laissées à la discrétion du navigateur. Même si tous les navigateurs appliquent actuellement un texte noir sur fond blanc, rien ne les y oblige et tu peux potentiellement avoir d'autres valeurs qui pourraient être complètement inaccessibles.

"Et une question : Pourquoi avoir attribué un font-weight : normal sur les balises de titrage ?" -> c'est une bonne question. J'y avais trouvé une utilité, mais je vais y re-réfléchir :)

benjaminzanatta a dit le

@Raphael : Ok, mais comme je mets toujours ces informations par la suite, je l'ai enlevé de mon fork.

Nico3333fr a dit le

@Raphael : pour éviter le "boldage" navigateur sur une webfont par exemple ? ;)

Raphael a dit le

@Nico3333fr : le "bondage" tu voulais dire ? :p

Vincent_ a dit le

KNACSS est vraiment un outil génial.
Ce que j'apprécie c'est le coté pratique et bien pensé de ce framework CSS.
Il permet de construire des sites très stables et très facilement.
Personnellement je place un appel vers la feuille de style knacss.css puis un second appel vers ma feuille de style personnalisée styles.css
Très sympas aussi ces petits clins d’œil à l'Alsace ... KNACSS, SCHNAPS.IT

Raphael a dit le

@Vincent_ : "Personnellement je place un appel vers la feuille de style knacss.css puis un second appel vers ma feuille de style personnalisée styles.css"

ça fonctionne mais ce n'est pas forcément la meilleure méthode. Pour commencer, cela te fait 2 fichiers CSS donc 2 requêtes HTTP, ensuite avec ta CSS perso tu risques d'écraser des styles de KNACSS.css tout simplement parce que tes styles sont déclarés après.
En général cela ne pose pas de problème, mais on ne sait jamais...

Nico3333fr a dit le

@Raphael : tu as l'esprit bien mal tourné dis donc ! :p

dimdes a dit le

Comme vincent, je comprends pas trop.... Tu conseilles donc de n'avoir qu'une feuille de style, celle de Knacss, et d'ajouter ce qu'on a besoin dedans pour notre design? (couleur, image, background, etc)

Comme déjà dit sur G+, j'aimerais beaucoup un tuto sur un exemple concert, une page à réaliser du début à la fin. Ceci me permettrait, je pense, de comprendre ce qui m'échappe encore.

Raphael a dit le

@dimdes : Effectivement, pour des raisons de performance et pour éviter d'écraser des styles, il est préférable de n'avoir qu'une seule feuille de style en production.

Cela ne t'empêche pas, *en développement*, d'avoir 2 feuilles de styles : knacss.css et ta feuille .css perso que tu inclues au bon endroit avec un @import.

Réaliser un tuto sur une page entière demande beaucoup de travail, mais j'y pense.

dimdes a dit le

Beaucoup de travail? .. déjà que je me demande parfois comment vous faites pour ne pas avoir besoin de plus de 24h par jours ;-)
Knacss en soi t'a probablement pris déjà énormément de temps, j'admire votre équipe pour ça!!

22px a dit le

Bonjour,

J'aurais aimé connaître la raison des !important sur la partie responsive du framework. Si quelqu'un pouvait m'éclairer :)

Raphael a dit le

@22px : c'est simple, il faut être sûr que les styles prennent assez de poids pour écraser l'existant... que l'on ne connaît malheureusement pas forcément :/

Imaginons que tu utilises 2 feuilles de styles :
- knacss.css
- tonstyle.css

Dans tonstyle.css, tu dis à un div qu'il a la class="small-row w800p".
Il est probable que tes styles écrasent knacss.css, donc ton .w800p risque d'être prioritaire sur la valeur width:100% de .small-row s'il n'y a pas de !important sur ce dernier.

C'est aussi pour cela qu'il vaut mieux insérer tes styles au bon endroit prévu à l'intérieur de knacss.css

deejay-bee a dit le

Pour le reset et les préprocesseurs : ok, on met tout à zero, on centralise et optimise la construction du code.

Par contre, je ne comprend pas trop la démarche d'utiliser des noms de classe "voulant dire quelque chose". J'ai toujours appris qu'il fallait donner un nom neutre aux id/classes et éviter de mettre des indications sur le style dans les noms. Exemple : si l'on a un a.vert et que subitement, on veut passer tous les liens verts en rouge, le code ne va plus avoir de sens (pour un humain) et il faudra repasser sur tous les endroits du code où l'on a mis cette classe. Au final, on style de nouveau dans le code HTML, ce qui nous ramène au bon vieux temps des bgcolor, font-face etc...

Raphael a dit le

@deejay-bee : Hello,

C'est une question pertinente en effet.
La réponse se trouve sous forme de lien dans la 2è page de ce tutoriel.

Le lien mène ici : http://blog.goetter.fr/articles/css-grande-remise-question/

Autre ressource : http://openweb.eu.org/articles/css-l-age-de-r...

dimdes a dit le

En essayant de comprendre Knacss, j'apprends des choses basiques, que je devrais connaître depuis longtemps. ..... et ça me fout aussi plein de doute sur mes compétences :-)
Je ne savais pas qu'on pouvait avoir des classes avec plusieurs mots telles que class="w80 center txtright mtl"
Si j'ai bien compris il y a en fait "4" classes décrites dans le CSS?
On m'a toujours appris à faire class="unMot" ..... et même sur les tutoriaux biens connus du web francophone, je n'ai jamais vu autres choses (tant mieux si je me trompe).

dew a dit le

Dans ce cas il faut se précipiter pour les utiliser. C'est très pratique (pas seulement pour knacss), et c'est compris par tous les navigateurs. Seul IE6 posait quelques difficultés quant aux sélecteurs employables dans le cadre de classes multiples.

deejay-bee a dit le

@dimdes : en fait, ce n'est pas une classe avec des espaces, mais plusieurs classes séparées par des espaces. Et effectivement, ça offre des possibilités énormes. En ajoutant plusieurs classes, tu peux par exemple créer une classe avec des propriétés basiques et les appliquer à un élément qui est déjà stylé avec une autre classe.

deejay-bee a dit le

@Raphael : désolé je n'avais pas consulté ce lien. C'est une approche intéressante, je vais encore y réfléchir mais ce qui est sûr : c'est une mauvaise idée dans le cas où la classe est susceptible d'être utilisées des dizaines, centaines de fois voir plus, comme par exemple un span avec une couleur que l'utilisateur ajoute dans le code via son wysiwyg.

Autre chose : faire en sorte d'avoir des multiples de 10 pour les tailles en em me semble intéressant, par contre, mettre 62.5% en font-size sur le body me gêne un peut car, comme tu le dis c'est "sur la très grande majorité des navigateurs" que le body est à 16px par défaut. Plus haut dans les commentaires, tu réponds à quelqu'un en lui disant que son idée est mauvaise car les navigateurs affichent par défaut le texte en blanc sur noir mais rien ne les empêche, un jour, de modifier ce comportement. A mon avis, c'est pareil pour ce point là. Si un navigateur décide de changer la taille par défaut (ce qui est peu probable mais bon...) on risque d'avoir des problèmes. Ne vaudrait-il pas mieux mettre un font-size: 16px sur body et utiliser les em pour les tailles sur les autres conteneurs ?

Pacodellavega a dit le

Bonjour,

Je ne suis qu'au début de l’épluchage de la saucisse (pas facile avec un économe) et une première chose m'a interpellé.
Pourquoi utiliser des "em" plutôt que des "rem" ? Peut-être (voire surement) ai-je tord mais je croyais qu'utiliser le root em permettait d'éviter des soucis lors d'imbrication de style, ce qui peut arriver, non ?

Raphael a dit le

@deejay-bee : " Ne vaudrait-il pas mieux mettre un font-size: 16px sur body et utiliser les em pour les tailles sur les autres conteneurs ?"

Non, il vaut mieux éviter pour des raisons d'accessibilité. En effet, IE6-IE8 ne permettent pas d'agrandir les polices en pixel en mode "zoom texte", même si body seulement a une police figée en pixel :
http://www.alsacreations.com/article/lire/569...

De plus, les unités fixes tels que les pixels deviennent de plus en plus alambiqués à manipuler dans un environnement où les périphériques (et leurs tailles et leurs résolutions) sont de plus en plus variés.

Raphael a dit le

@Pacodellavega : "Pourquoi utiliser des "em" plutôt que des "rem" ?"

Les "rem", c'est tout simplement magique, tu as raison.
Mais il y a encore un gros hic : ils ne sont compatibles qu'à partir de IE9, donc c'est encore trop tôt pour pouvoir les employer en production.

http://caniuse.com/#search=rem

tibibou a dit le

@raphael : Excellente initiative, merci.

Une question : si tu fais des mises à jour de ta feuille de style et si on souhaite en profiter, cela signifie-t-il qu'il faille uniquement garder un lien vers ta feuille de style et charger sa propre feuille de style après la tienne pour écraser ce que l'on désire modifier ?

Raphael a dit le

@tibibou : non, il faut éviter de lier KNACSS directement sur le site.
Il vaut mieux télécharger la version souhaitée sur son serveur.

mvedie a dit le

@Raphael : "tu inclues au bon endroit avec un @import."

Je croyais que le @import était à bannir car pas du tout performant ?

Raphael a dit le

@mvedie : oui, d'où le "en développement". À éviter ensuite en production si possible.

ubiq1er a dit le

Bonjour et merci pour Knacss (que j'utilise pour la première fois en ce moment dans le cadre d'un projet).
Dites, avec KNACSS, on n'est pas dans une démarche mobile-first si je ne m'abuse.
Quelle est la position d'Alsacréations par rapport au mobile-first ?

hideki29 a dit le

Proposition de suppression à intégrer dans la prochaine release de Knacss
-webkit-box-sizing: border-box; /* Android ≤ 2.3, iOS ≤ 4 */
n'est peut-être plus nécessaire de l'embarquer

ubiq1er a dit le

@Raphael : Merci pour cette réponse !

hideki29 a dit le

Problème avec la classe visually-hidden sur un élément en display:table-cell.
le left -7000px fait péter le positionnement des éléments.

par contre avec un positionnement vers le haut ceci ne pose pas de problème

.visually-hidden {

position: absolute;

left: 0;
top:- 10000px

overflow: hidden;
}

JMD33 a dit le

Bjr
Juste pour dire MERCI !
Je suis un parfait débutant, non pro, qui s'amuse en apprenant à la lecture de vos articles.
Vos explications sur Knacss m'ouvre des horizon pour personnaliser mes sites associatifs énormes.
C'est simplement génial
cdt

damsy2k a dit le

Knacss, une super initiative pour démarrer un projet et continuer à se perfectionner en analysant de bonnes pratiques ! Merci à Raphaël