KNACSS v7 styleguide (spoiler)

introduction

KNACSS, c’est un peu comme une 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).

KNACSS prend en charge les styles de base, mais également la typographie, les modèles de boîte, les alignements et positionnements d’éléments, les grilles de mise en page, dans l’esprit d’être adapté à toutes les tailles d’écran (responsive). Le tout automatiquement, en l'appliquant simplement sur votre structure HTML.

KNACSS est distribué librement sur Github sous licence WTFPL, toutes contributions sont bienvenues.

nouvelle version v7

Ceci est un brouillon de travail concernant une version non finalisée de KNACSS. Toute ressemblance avec du contenu stable est purement fortuite.

À ce jour, KNACSS est en version v6.1.2 (21 juin 2017).

La version 7 de KNACSS est en cours de développement depuis le 31 juillet 2017 et sa sortie est prévue à l'automne 2017. Les modifications sont consignées au fur et à mesure dans un fichier "changelog".

Parmi les nouveautés les plus significatives :

Découvrez ici les nouveautés de KNACSS v7 sous forme d'une documentation-styleguide.

Note : les textes de remplissage en alsacien sont issus du générateur de templates Schnapsum.

compatibilité navigateurs

KNACSS version 7 est - dans sa grande majorité - entièrement compatible avec l'ensemble des navigateurs desktop et mobiles à partir d'IE10 inclus.

Seule exception notable, le système de grilles de KNACSS est conçu à partir de la spécification CSS Grid Layout, reconnue correctement chez Microsoft qu'à partir de sa version Edge 16 (sorti en fin 2017). Pour plus de détails, reportez-vous à la section Grilles.

installation

Il y a deux moyens d'installer KNACSS : la version "prêt à consommer" et la version "à compiler". Seule la deuxième est configurable.

version "prêt à consommer"

Si vous êtes débutant ou pressé, cette méthode est la plus simple à installer puisqu'il… n'y a rien à installer. Elle implique cependant que vous utilisiez KNACSS tel quel, sans pouvoir le configurer à votre goût et particularités.

KNACSS n'est constitué que d'un seul fichier CSS (minifié ou non selon vos goûts) :

Si vous ne comptez pas décortiquer le fichier CSS, il est préférable d'opter pour la version minifiée, plus légère (9ko gzippé). Il vous suffit ensuite de l'insérer à votre page HTML, avant votre propre feuille de style, bien entendu.

version "à compiler"

Pour tirer le meilleur de KNACSS, il est préférable d'opter pour la version Sass à compiler. Elle offre la possibilité d'adapter l'outil à son projet grâce à l'apport de variables, de fonctions et d'imbrications. Vous pouvez également inclure ou non les fichiers partiels qui vous intéressent (tableaux, formulaires, grilles, composants, classes utilitaires, etc.).

Vous pouvez télécharger KNACSS complet, avec l'ensemble des fichiers et architecture, mais il est généralement plus simple de recourir à NPM ou Yarn pour l'installation :

npm install knacss

Le fichier source principal est /sass/knacss.scss, c'est lui qui se charge de l'import des variables, mixins et tous les fichiers de styles du projet. C'est ce fichier qu'il faut compiler.

Nous recommandons de compiler à l'aide de Gulp (les fichiers gulpfile.js et package.json sont fournis), mais rien ne vous empêche d'utiliser d'autres workflows tels que Grunt, CSSnext, prepros, koala, etc.

Les fichiers de configuration _config/_variables.scss et _config/_mixins.scss devront être copiés dans votre propre dossier de travail (et modifiés avec vos propres valeurs) afin de ne pas être écrasés lors de chaque mise à jour de KNACSS via NPM.

Sachez qu'un Pense-bête en PDF est disponible pour vous souvenir des classes utiles de KNACSS.

Préfixes navigateurs

Certaines fonctionnalités avancées de KNACSS nécessitent d'employer toute une panoplie de préfixes CSS (-webkit-, -moz-, -ms-,…) pour être certain que les propriétés CSS fonctionneront partout.

Dans la version Sass de KNACSS, les préfixes n'apparaissent pas pour ne pas polluer la lecture du fichier de travail. Il vous sera donc nécessaire de les ajouter, de préférence automatiquement grâce à un plugin ou à l'excellent outil qu'est autoprefixer.

conventions

Voici quelques conventions de nommage et bonnes pratiques de KNACSS, cette liste est non exhaustive :

fontes

Trois variables sont prévues pour les familles de police. La première, $font-stack-common, est appliquée par défaut sur le contenu. Il s'agit de ce que l'on appelle la System Font Stack, déjà adoptée par des sites tels que Medium, Booking, WordPress, Alsacréations, etc.

Les voici en oeuvre :

Ici un texte de contenu en $font-stack-common. Lorem Elsass Ipsum mitt picon bière munster du ftomi! Ponchour bisame. Bibbeleskaas jetz here's some code rossbolla sech choucroute un schwanz geburtstàg

$font-stack-common: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;

Ici un texte de contenu en $font-stack-headings. Lorem Elsass Ipsum mitt picon bière munster du ftomi! Ponchour bisame. Bibbeleskaas jetz here's some code rossbolla sech choucroute un schwanz geburtstàg

$font-stack-headings: sans-serif;

Ici un texte de contenu en $font-stack-monospace. Lorem Elsass Ipsum mitt picon bière munster du ftomi! Ponchour bisame. Bibbeleskaas jetz here's some code rossbolla sech choucroute un schwanz geburtstàg

$font-stack-monospace: consolas, courier, monospace;

titres

Les six niveaux de titre sont stylés avec leurs éléments respectifs : h1 à h6, ou (recommandé) les classes .h1-like à .h6-like.

titre niveau 1

titre niveau 2

titre niveau 3

titre niveau 4

titre niveau 5
titre niveau 6

paragraphe stylé comme un titre 1

<h1>titre niveau 1</h1>
<h2>titre niveau 2</h2>
<h3>titre niveau 3</h3>
<h4>titre niveau 4</h4>
<h5>titre niveau 5</h5>
<h6>titre niveau 6</h6>
<p class="h1-like">paragraphe stylé comme un titre 1</p>

paragraphes et textes

Lorem Elsass Ipsum mitt picon bière munster du ftomi! Je suis un lien Ponchour bisame. Bibbeleskaas je suis marqué jetz rossbolla sech je suis un <em> choucroute un schwanz geburtstàg, Je suis une touche du clavier Chinette dû, ìch bier deppfele schiesser. Flammekueche de knèkes Seppele gal! a hopla geburtstàg, je suis un <strong> alles fraü Chulia Roberts je suis du code oder knäckes dûû blottkopf.

<p>Lorem Elsass Ipsum mitt picon bière munster du ftomi! <a href="#">Je suis un lien</a> Ponchour bisame. Bibbeleskaas <mark>je suis marqué</mark> jetz rossbolla sech <em>je suis un <em></em> choucroute un schwanz geburtstàg, Je suis une touche <kbd>du clavier</kbd> Chinette dû, ìch bier deppfele schiesser. Flammekueche de knèkes Seppele gal! a hopla geburtstàg, <strong>je suis un <strong></strong> alles fraü Chulia Roberts <code>je suis du code</code> oder knäckes dûû blottkopf.</p>

listes

  1. Liste ordonnée
  2. Salade
  3. Tomate
  4. Oignon
  5. Choucroute
<ul>
    <li>Liste non ordonnée</li>
    <li>Salade</li>
    <li>Tomate</li>
    <li>Oignon</li>
    <li>Choucroute</li>
</ul>

<ol>
    <li>Liste ordonnée</li>
    <li>Salade</li>
    <li>Tomate</li>
    <li>Oignon</li>
    <li>Choucroute</li>
</ol>

<ul class="unstyled">
    <li>Liste <code>.unstyled</code></li>
    <li>Salade</li>
    <li>Tomate</li>
    <li>Oignon</li>
    <li>Choucroute</li>
</ul>

tableaux

Les tableaux de données disposent de styles de base. Ceux munis d'une classe .table bénéficient en sus de propriétés graphiques définies selon des variables de projet dédiées : couleur de fond, des titres, etc. La classe additionnelle .table--zebra colorie une rangée sur deux.

.table
Fruit Note Prix
Kiwi ★★★ 13.37€
Banane ★★ 0.42€

Voici la structure HTML permettant d'obtenir ce résultat :

<table class="table" summary="">
	<caption>.table</caption>
	<thead>
		<tr>
			<th scope="col">Fruit</th>
			<th scope="col">Note</th>
			<th scope="col">Prix</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Kiwi</td>
			<td>★★★</td>
			<td>13.37€</td>
		</tr>
    <tr>
			<td>Banane</td>
			<td>★★</td>
			<td>0.42€</td>
		</tr>
	</tbody>
</table>

citations

Lorem Elsass Ipsum mitt picon bière munster du ftomi! Ponchour bisame. Bibbeleskaas jetz here's some code rossbolla sech choucroute un schwanz geburtstàg

<blockquote>
   <p>Lorem Elsass Ipsum mitt picon bière munster du ftomi! Ponchour bisame. Bibbeleskaas jetz here's some code rossbolla sech choucroute un schwanz geburtstàg</p>
</blockquote>

alertes

Une alerte est une boîte d'information disposant de la classe .alert (pour les styles par défaut) ou une classe commençant par .alert-- pour les différentes variantes .alert--primary, .alert--success, .alert--warning, .alert--danger, .alert--info, .alert--inverse, .alert--ghost.

Les variantes sont gérées par un ensemble (thème) de variables comprenant : couleur de fond, couleur de texte et bordure optionnelle.

Alert Default
Primary
Success
Warning
Danger
Info
Inverse
Ghost
<div class="alert">Alert Default</div>
<div class="alert--primary">Primary</div>
<div class="alert--success">Success</div>
<div class="alert--warning">Warning</div>
<div class="alert--danger">Danger</div>
<div class="alert--info">Info</div>
<div class="alert--inverse">Inverse</div>
<div class="alert--ghost">Ghost</div>

inputs

<input type="text" placeholder="text">
<input type="search" placeholder="search">
<input type="number" placeholder="number">
<input type="email" placeholder="email">
<input type="password" value="password">
<progress></progress>

checkboxes

KNACSS prend en compte les styles de base des cases à cocher, il suffit d'appliquer la classe .checkbox sur l'élément input afin de le voir en action.

Voici le code HTML recommandé : <input type="checkbox" class="checkbox" id="c1"><label for="c1">click here</label>

<form action="#">
  <ul class="is-unstyled">
    <li>
      <input type="checkbox" class="checkbox" id="c1">
      <label for="c1">Salade</label>
    </li>
    <li>
      <input type="checkbox" class="checkbox" id="c2" checked="checked">
      <label for="c2">Tomate</label>
    </li>
    <li>
      <input type="checkbox" class="checkbox" id="c3" checked="checked" disabled="disabled">
      <label for="c3">Oignon</label>
    </li>
    <li>
      <input type="checkbox" class="checkbox" id="c4" disabled="disabled">
      <label for="c4">Choucroute</label>
    </li>
  </ul>
</form>

radios

KNACSS prend en compte les styles de base des boutons radio, il suffit d'appliquer la classe .radio sur l'élément input afin de le voir en action.

Voici le code HTML recommandé : <input type="radio" class="radio" name="radio" id="r1"><label for="r1">Click here</label>

<form action="#">
  <ul class="is-unstyled">
    <li>
      <input type="radio" class="radio" name="radio" id="r1">
      <label for="r1">Salade</label>
    </li>
    <li>
      <input type="radio" class="radio" name="radio" id="r2" checked="checked">
      <label for="r2">Tomate</label>
    </li>
    <li>
      <input type="radio" class="radio" name="radio" id="r3" checked="checked" disabled="disabled">
      <label for="r3">Oignon</label>
    </li>
    <li>
      <input type="radio" class="radio" name="radio" id="r4" disabled="disabled">
      <label for="r4">Choucroute</label>
    </li>
  </ul>
</form>

switchs

Les boutons de switch (ou toggle) sont gérés à l'aide de la classe .switch sur l'élément input checkbox.

Voici le code HTML recommandé : <input type="checkbox" class="switch" id="switch"> <label for="switch" class="label">slide to unlock</label>

<input type="checkbox" class="switch" id="switch">
<label for="switch" class="label">slide to unlock</label>

selects

Les éléments <select> sont automatiquement stylés dans KNACSS. Vous pouvez adapter les styles de base en modifiant les variables du projet.

<select>
  <option value="valeur1">Salade</option>
  <option value="valeur2">Tomate</option>
  <option value="valeur3">Oignon</option>
</select>

flèches / arrows

Quatre classes sont prévues pour afficher des flèches décoratives à droite de n'importe quel élément. Il s'agit de icon-arrow-down, icon-arrow-up, icon-arrow-right et icon-arrow-left. Si vous souhaitez que la flèche apparaisse à gauche, appliquez la classe .flex-row-reverse sur le parent.

Attention, les flèches "arrows" se basent sur les masques CSS, actuellement incompatibles avec IE / Edge.

arrow down

arrow up

arrow right

arrow left

arrow left

<p>icon-arrow down <i class="icon-arrow-down"></i></p>
<p>icon-arrow up <i class="icon-arrow-up"></i></p>
<p>icon-arrow right <i class="icon-arrow-right"></i></p>
<p>icon-arrow left <i class="icon-arrow-left"></i></p>
<p class="flex-row-reverse">icon-arrow left <i class="icon-arrow-left"></i></p>

boutons

Les boutons, comme les alertes disposent d'un ensemble de thème de couleurs (couleur de fond, couleur de texte et bordure optionnelle).

Il est recommandé d'utiliser l'élément HTML <button>, mais rien n'empêche d'opter pour d'autres types d'éléments, tant qu'ils sont associés à l'attribut ARIA role="button"

Un bouton dispose de la classe .btn ou .button (pour les styles par défaut) ou une classe commençant par .btn-- ou .button-- pour les différentes variantes, par exemple .btn--primary, .btn--success, .btn--warning, .btn--danger, .btn--info, .btn--inverse, .btn--ghost.

Danger Info Inverse
<button class="btn">Button Default</button>
<button class="btn--primary">Primary</button>
<button class="btn--success">Success</button>
<input  class="btn--warning" type="button" role="button" value="Warning">
<span class="btn--danger" role="button">Danger</span>
<span class="btn--info" role="button">Info</span>
<span class="btn--inverse" role="button">Inverse</span>
<button class="btn--ghost">Ghost</button>

burger button

Un élément possédant la classe .nav-button et contenant un élément vide devient un bouton de navigation stylé et prêt à l'action (avec un peu de renfort de JavaScript ou CSS pour déclencher l'événement bien sûr).

Pour des raisons d'accessibilité, il est fortement recommandé d'utiliser la structure HTML ci-dessous pour votre bouton.

<button class="nav-button" type="button" role="button" aria-label="open/close navigation"><i></i></button>

Voici le bout de code JavaScript employé pour activer ce bouton 

<script>
/**!
Navigation Button Toggle class
*/
(function() {

// old browser or not ?
if ( !('querySelector' in document && 'addEventListener' in window) ) {
return;
}
window.document.documentElement.className += ' js-enabled';

function toggleNav() {

// Define targets by their class or id
var button = document.querySelector('.nav-button');
var target = document.querySelector('body > nav');

// click-touch event
if ( button ) {
  button.addEventListener('click',
  function (e) {
      button.classList.toggle('is-active');
    target.classList.toggle('is-opened');
    e.preventDefault();
  }, false );
}
} // end toggleNav()

toggleNav();
}());
</script>

tags (étiquette)

Un tag dispose de la classe .tag (pour les styles par défaut) ou une classe commençant par .tag-- pour les différentes variantes, par exemple .tag--primary, .tag--success, .tag--warning, .tag--danger, .tag--info, .tag--inverse, .tag--ghost.

Warning Danger Info Inverse
<button class="tag">Badge Default</button>
<button class="tag--primary">Primary</button>
<button class="tag--success">Success</button>
<span class="tag--warning">Warning</span>
<span class="tag--danger">Danger</span>
<span class="tag--info">Info</span>
<span class="tag--inverse">Inverse</span>

badges (arrondis)

Un badge est systématiquement rond et s'adapte à son contenu. Il dispose de la classe .badge (pour les styles par défaut) ou une classe commençant par .badge-- pour les différentes variantes, par exemple .badge--primary, .badge--success, .badge--warning, .badge--danger, .badge--info, .badge--inverse, .badge--ghost.

Warning Danger Info Inverse
<button class="badge">Badge Default</button>
<button class="badge--primary">Primary</button>
<button class="badge--success">Success</button>
<span class="badge--warning">Warning</span>
<span class="badge--danger">Danger</span>
<span class="badge--info">Info</span>
<span class="badge--inverse">Inverse</span>

tabs / onglets

KNACSS prévoit des styles pour une navigation à base d'onglets accessibles (fonctionnels aux flèches du clavier et à la souris). Le principe général est de placer la classe .js-tabs sur le conteneur global.
Les instructions complètes, le code HTML et JavaScript se trouvent sur le projet d'Alsacréations Pepin.

Attention : pour fonctionner, les onglets nécessitent un code JavaScript (à récupérer sur Pepin).

Contenu 1.
Lorem Elsass Ipsum mitt picon bière munster du ftomi! Ponchour bisame. Bibbeleskaas jetz rossbolla sech choucroute un schwanz geburtstàg, Chinette dû, ìch bier deppfele schiesser.
Contenu 2.
Flammekueche de knèkes Seppele gal! a hopla geburtstàg, alles fraü Chulia Roberts oder knäckes dûû blottkopf. Noch bredele schissabibala, yeuh e schmutz.
Contenu 3.
E gewurtztraminer doch Carola schneck, schmutz a riesling de chambon eme rucksack Roger dû hopla geiss, jetz Chorchette de Scharrarbergheim.
<div class="tabs js-tabs">
  <nav class="tabs-menu">
    <a href="#tab1" class="tabs-menu-link is-active">Salade</a>
    <a href="#tab2" class="tabs-menu-link">Tomate</a>
    <a href="#tab3" class="tabs-menu-link">Oignons</a>
  </nav>

  <div class="tabs-content">
    <div id="tab1" class="tabs-content-item">Contenu 1. <br>Lorem Elsass Ipsum mitt picon bière munster du ftomi! Ponchour bisame. Bibbeleskaas jetz rossbolla sech choucroute un schwanz geburtstàg, Chinette dû, ìch bier deppfele schiesser.</div>
    <div id="tab2" class="tabs-content-item">Contenu 2. <br>Flammekueche de knèkes Seppele gal! a hopla geburtstàg, alles fraü Chulia Roberts oder knäckes dûû blottkopf. Noch bredele schissabibala, yeuh e schmutz.</div>
    <div id="tab3" class="tabs-content-item">Contenu 3. <br>E gewurtztraminer doch Carola schneck, schmutz a riesling de chambon eme rucksack Roger dû hopla geiss, jetz Chorchette de Scharrarbergheim.</div>
  </div>
</div>

alignements

span link
<div class="txtleft">
    <span>span</span>
    <a href="#">link</a>
</div>
span link
<div class="txtcenter">
    <span>span</span>
    <a href="#">link</a>
</div>
span link
<div class="txtright">
    <span>span</span>
    <a href="#">link</a>
</div>
div.left
<div style="width: 30%" class="left">div.left</div>
div.center
<div style="width: 30%" class="center">div.center</div>
div.right
<div style="width: 30%" class="right">div.right</div>

flottants

div.fl
div.fr
<div class="clearfix">
    <div style="width: 20%" class="fl">div.fl</div>
    <div style="width: 20%" class="fr">div.fr</div>
</div>

flexbox

div
span
<section class="flex-container">
  <div>div</div>
  <span>span</span>
  <em>…</em>
</section>
div
span
<div class="flex-container flex-container-v">
<div>div</div>
<span>span</span>
<em>…</em>
</div>
.w33
.w150p .item-fluid
<div class="flex-container">
  <div class="w33">.w33</div>
  <span class="w150p">.w150p</span>
  <span class="item-fluid">.item-fluid</span>
</div>
item
item .item-first
<div class="flex-container">
  <div>item</div>
  <span>item</span>
  <span class="item-first">.item-first</span>
</div>
.item-last
item item
<div class="flex-container">
  <div class="item-last">.item-last</div>
  <span>item</span>
  <span>item</span>
</div>
.item-center
<div class="flex-container" style="height: 200px;">
  <span class="item-center">.item-center</span>
</div>

Grillade

Grillade, le système de grille principal de KNACSS a été entièrement repensé pour les navigateurs modernes. Il est dorénavant bâti sur Grid Layout et non plus Flexbox. Grid Layout n'est pleinement compatible qu'à partir de Edge 16.

Par défaut, le nouveau système de grilles est automatiquement importé au sein de KNACSS, cependant les deux versions (nouvelle et ancienne en Flexbox) co-existent toujours pour des raisons de compatibilité :

Ainsi, il est possible, en Sass, de remplacer le fichier importé "grillade-grid.scss" par l'ancienne version "grillade-flex.scss" pour assurer un support jusqu'à IE10 minimum. Les fichiers CSS compilés peuvent également être utilisés de manière autonome :

Grillade n'est pas un "framework", il s'agit simplement de fonctionnalités basiques pour réaliser des grilles simples et courantes (et responsive).

Si vous avez besoin de grilles complexes :

Les grilles ne s'activent qu'à partir d'un breakpoint minimum ($tiny = 480px par défaut). En deça, les éléments s'affichent en blocs, les uns sous les autres.

comparaison entre Grillade v6 et Grillade v7
Grillade v6 Grillade v7
Techno CSS employée Flexbox Grid Layout
Poids fichier CSS 11 Ko 3 Ko
Compatibilité IE10+ Edge 16+
Fonctionnalités Mobile first
Largeurs fluides
Gouttières
Fusion de colonnes
Fusion de rangées
Gestion des écrans intermédiaires
Tailles d'enfants responsive
Ordonnancement des enfants
Mobile first
Largeurs fluides
Gouttières
Fusion de colonnes
Fusion de rangées
Gestion des écrans intermédiaires
Tailles d'enfants responsive
Ordonnancement des enfants

Voici quelques exemples de grilles réalisées avec KNACSS v7…

.autogrid

Une "autogrid" est une micro-grille où les enfants demeurent toujours sur une seule ligne et se répartissent de façon équitable quel que soit leur nombre. Il est possible d'appliquer une gouttière avec les classes .has-gutter, .has-gutter-l, .has-gutter-xl.

1
2
3
4
5
<section class="autogrid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</section>

.grid-6

Une grille de 6 colonnes, avec retour à la ligne possible, et sans gouttière

1
2
3
4
5
6
7
8
<section class="grid-6">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
</section>

.grid-6 .has-gutter

Une grille de 6 colonnes avec une gouttière. Les classes prévues sont .has-gutter, .has-gutter-l, .has-gutter-xl

1
2
3
4
5
6
7
8
<section class="grid-6 has-gutter">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
</section>

.grid-4 .has-gutter

Une grille de 4 colonnes avec une gouttière. Certains enfants s'étendent sur plusieurs colonnes ou rangées.

1
.col-2
.row-2
4
5
6
<section class="grid-4 has-gutter">
    <div>1</div>
    <div class="col-2">.col-2</div>
    <div class="row-2">.row-2</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</section>

.grid-6-small-3

Une grille de 6 colonnes sur grand écran, et 3 colonnes sur écran moyen.

1
2
3
4
5
6
7
8
<section class="grid-6-small-3">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</section>

.grid-7-small-4

Une grille de 7 colonnes sur grand écran, et 4 colonnes sur écran moyen. Quelques enfants changent de taille sur écran moyen

1
2
.col-2-small-1
4
5
.col-1-small-2
7
.col-2-small-all
<section class="grid-7-small-4">
    <div>1</div>
    <div>2</div>
    <div class="col-2-small-1">.col-2-small-1</div>
    <div>4</div>
    <div>5</div>
    <div class="col-1-small-2">.col-1-small-2</div>
    <div>7</div>
    <div class="col-2-small-all">.col-2-small-all</div>
</section>

.grid-6-small-3 .has-gutter

Panachage des possibilités de grilles

1
2
(3) item-first
4
5
6
7
col-3-small-2
col-2-small-1
col-2-small-1
col-4-small-2
row-2
13
14
15
16
col-3
18
19
col-all
<section class="grid-6-small-3 has-gutter">
  <div>1</div>
  <div>2</div>
  <div class="item-first">(3) item-first</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div class="col-3-small-2">col-3-small-2</div>
  <div class="col-2-small-1">col-2-small-1</div>
  <div class="col-2-small-1">col-2-small-1</div>
  <div class="col-4-small-2">col-4-small-2</div>
  <div class="row-2">row-2</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
  <div>16</div>
  <div class="col-3">col-3</div>
  <div>18</div>
  <div>19</div>
  <div class="col-all">col-all</div>
</section>

mixins

Le fichier regroupant les mixins et fonctions Sass se nomme sass/_config/_mixins.scss. Il contient des raccourcis Sass qui facilitent la vie de l'intégrateur.

mixin "respond-to()"

Ce mixin permet de faciliter et d'harmoniser les points de ruptures. Écrivez ceci dans votre fichier Sass :

p {
  color: blue;
  @include respond-to("small-up") {
    color: hotpink;
  }
}

Le résultat après compilation sera :

p {
  color: blue;
}
@media (min-width: 576px) {
  p {
    color: hotpink;
  }
}

Les paramètres et les intervales correspondants sont :

$bp-aliases: (
  'tiny'   : (max-width: #{$tiny - 1}),
  'small'  : (max-width: #{$small - 1}),
  'medium' : (max-width: #{$medium - 1}),
  'large' : (max-width: #{$large - 1}),
  'extra-large'  : (max-width: #{$extra-large - 1}),
  'tiny-up'   : (min-width: #{$tiny}),
  'small-up'  : (min-width: #{$small}),
  'medium-up' : (min-width: #{$medium}),
  'large-up' : (min-width: #{$large}),
  'extra-large-up' : (min-width: #{$extra-large}),
  'retina' : (min-resolution: 2dppx)
);

mixin "grid()"

Ce mixin de trois paramètres optionnels permet de générer une grille simple et rapide. Écrivez ceci dans votre fichier Sass :

.ingrid {
  @include grid(4, 1rem, 640px);
}

Le résultat après compilation sera :

@media (min-width: 640px) {
  .ingrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 1rem;
  }
}

mixin "font-size()"

Ce mixin permet de gérer les tailles d'éléments autant mobiles que desktop. Écrivez ceci dans votre fichier Sass :

h2 {
  @include font-size(h2);
}

Le résultat après compilation sera :

h2 {
  font-size: 2.4rem;
}
@media (min-width: 576px) {
  h2 {
    font-size: 3.8rem;
  }
}

Les éléments prévus pour être ciblés par ce mixin sont : base (police générale), h1, h2, h3, h4, h5 et h6. Les valeurs de polices de tous ces éléments sont indiquées dans le fichier de variables du projet.

variables

Le fichier permettant de configurer l'ensemble des variables du projet se nomme sass/_config/_variables.scss. Il est fortement conseillé de modifier ce fichier avec vos propres valeurs, plutôt que de les écraser par la suite.

// Config file and project variables

// ----------------
// breakpoints zone
// ----------------

// warning: you should use your own values, regardless of the devices
// best practise is Mobile First: (min-width: $breakpoint)
$tiny        : 480px !default; // or 'em' if you prefer, of course
$small       : 576px !default;
$medium      : 768px !default;
$large       : 992px !default;
$extra-large : 1200px !default;

// ----------
// fonts zone
// ----------

// font families
$font-family-base     : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !default; // system font stack
$font-family-headings  : sans-serif !default; // font for h1, h2.. h6
$font-family-monospace : consolas, courier, monospace !default; // font for code and samples

// font sizes (1.6rem value is "16px" equivalent)
$font-size-base : 1.6rem !default;

$font-sizes: (
  base: (
    mobile  : 1.4rem,
    desktop : $font-size-base
  ),
  h1: (
    mobile  : 2.8rem,
    desktop : 3.2rem
  ),
  h2: (
    mobile  : 2.4rem,
    desktop : 3.8rem
  ),
  h3: (
    mobile  : 2.0rem,
    desktop : 2.4rem
  ),
  h4: (
    mobile  : 1.8rem,
    desktop : 2.0rem
  ),
  h5: (
    mobile  : 1.6rem,
    desktop : 1.8rem
  ),
  h6: (
    mobile  : 1.4rem,
    desktop : 1.6rem
  )
) !default;

// line heights
$line-height-s    : 1.3 !default;
$line-height-base : 1.5 !default;
$line-height-l    : 1.7 !default;

// default margin-bottom
$margin-bottom-base     : 1rem !default;
$headings-margin-bottom : $margin-bottom-base /2 !default;
$paragraph-margin-bottom: $margin-bottom-base !default;

// font weights
$weight-light   : 200 !default;
$weight-book    : 300 !default;
$weight-regular : 400 !default;
$weight-medium  : 500 !default;
$weight-bold    : 700 !default;

// ------------
// spacing zone
// ------------

// grid gutters (for .has-gutter-* classes)
$grid-gutters: (
  '': 1rem,
  '-l': 2rem,
  '-xl': 4rem
) !default;

// spacings
$spacer-tiny             : .5rem  !default;
$spacer-tiny-plus        : .7rem !default;
$spacer-small            : 1rem !default;
$spacer-small-plus       : 1.5rem !default;
$spacer-medium           : 2rem !default;
$spacer-medium-plus      : 3rem !default;
$spacer-large            : 4rem !default;
$spacer-large-plus       : 6rem !default;
$spacer-extra-large      : 8rem !default;
$spacer-extra-large-plus : 12rem !default;
$spacer-ultra-large      : 16rem !default;
$spacer-ultra-large-plus : 20rem !default;

// z-indexes
$zindex-navigation   : 1000 !default;
$zindex-dropdown     : 2000 !default;
$zindex-popover      : 3000 !default;
$zindex-tooltip      : 4000 !default;
$zindex-modal        : 5000 !default;
$zindex-notification : 6000 !default;
$zindex-debug        : 7000 !default;

// ----------
// color zone
// ----------

// color names
$white    : #fff !default;
$gray-100 : #f8f9fa !default;
$gray-200 : #e7e9ed !default;
$gray-300 : #dee2e6 !default;
$gray-400 : #ced4da !default;
$gray-500 : #acb3c2 !default;
$gray-600 : #727e96 !default;
$gray-700 : #454d5d !default;
$gray-800 : #333 !default;
$gray-900 : #212529 !default;
$black    : #000 !default;

$blue-300   : #5BC0DE !default;
$blue-500   : #0275D8 !default;
$green-500  : #5CB85C !default;
$orange-500 : #F0AD4E !default;
$red-500    : #D9534F !default;

// semantic colors
$color-brand    : $green-500;
$color-primary  : $blue-500;
$color-success  : $green-500;
$color-info     : $blue-300;
$color-warning  : $orange-500;
$color-danger   : $red-500;
$color-inverse  : $gray-800;
$color-ghost    : transparent;
$color-muted    : $gray-200;

$color-base      : $gray-900;
$background-base : $white;

$link-color            : $gray-800;
$link-color-hover      : darken($link-color, 15%);
$link-decoration       : none;
$link-decoration-hover : underline;

$forms-color     : $gray-800;

// ---------------
// components zone
// ---------------

// global border-radius
$border-radius: 0 !default;

// component: quotes
$quote-color     : $gray-200;

// component: arrows
$arrow-color     : $black;

// component: checkboxes, radios, switches
$checkbox-color         : $gray-800;
$checkbox-size          : 2rem;
$checkbox-border-radius : 4px;
$switch-color           : $gray-800;
$switch-size            : 2rem;
$switch-border-radius   : 3em;

// component: tables
$table-border               : $gray-500;
$table-caption-color        : $gray-800;
$table-background           : transparent;
$table-head-color           : $color-base;
$table-head-background      : transparent;
$table-footer-color         : $color-base;
$table-footer-background    : transparent;

// component: buttons, badges, alerts color variants list
// name - background-color - color - border
$variants-list: (
  (primary,    $color-primary,    $white,    none),
  (success,    $color-success,    $white,    none),
  (info,       $color-info,       $white,    none),
  (warning,    $color-warning,    $white,    none),
  (danger,     $color-danger,     $white,    none),
  (inverse,    $color-inverse,    $white,    none),
  (ghost,      $color-ghost,      $white,    0 0 0 1px $white inset)
) !default;

// component: tabs
$tabs-border            : $gray-200;
$tabs-active-border     : $gray-800;
$tabs-color             : $color-base;
$tabs-active-color      : $gray-800;
$tabs-background        : transparent;
$tabs-active-background : transparent;
$tabs-border-radius     : 0;

// component: nav burger button
$burger-color             : $gray-800;
$burger-background        : transparent;
$burger-hover-background  : transparent;
$burger-size              : 2.6rem;
$burger-weight            : 5px; // size of stripes
$burger-padding           : 0;

à propos

KNACSS (prononcez "Knèckess") est un outil construit avec amour et du CSS par Raphaël Goetter et Alsacréations.

Alsacréations est une innovante agence web alsacienne créée en 2006 qui répond à tous types de projets (développement, intégration, accessibilité, mobilité).

Un grand merci à Matthieu Bousendorfer pour le design du site web, à Stéphanie Walter pour la conception du logo, ainsi qu’à Hugo Giraudel, Philippe Vayssière, Xavier Zawala, Nicolas Hoffmann pour leurs conseils et astuces pour faire évoluer l'outil.