<!DOCTYPE html>
<html class="no-js js-enabled" lang="fr"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta charset="UTF-8">
  <title>KNACSS styleguide</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <link rel="stylesheet" href="KNACSS-v7.3-styleguide_fichiers/knacss-unminified.css" media="all">
  <style>
    body {
      margin: 2rem;
    }

    ::-moz-selection {
      background-color: #caf7cc;
    }

    ::selection {
      background-color: #caf7cc;
    }


    .sg-title {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
      font-weight: normal;
    }

    h2.sg-title,
    h3.sg-title {
      color: #d0021b;
    }

    h2.sg-title {
      display: flex;
      position: sticky;
      top: 0;
      background: rgba(255, 255, 255, .9);
    }

    h2.sg-title::before,
    h2.sg-title::after {
      content: "";
      display: block;
      flex: 1 0 0%;
      border-bottom: 1px solid;
      align-self: center;
    }

    h2.sg-title::before {
      margin-right: 1rem;
    }

    h2.sg-title::after {
      margin-left: 1rem;
    }


    h3.sg-title {
      font-size: 2.2rem;
    }

    pre {
      padding: 1em 1em 1em 1.5em;
      background: #eee;
      background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%209.96%208.596%20L%203.523%2014.973%20C%202.464%2015.935%200.495%2013.72%201.505%2012.791%20L%201.505%2012.791%20L%208.494%205.799%20C%209.138%205.212%2010.655%205.193%2011.29%205.799%20L%2011.29%205.799%20L%2018.49%2012.791%20C%2019.557%2013.809%2017.364%2015.882%2016.262%2014.837%20L%2016.262%2014.837%20L%209.96%208.596%20Z%20%22%20fill%3D%22#6B8E23%22/%3E%3C/svg%3E");
      background-position: .5rem .5rem;
      background-repeat: no-repeat;
      background-size: 1.2rem;
    }

    [class*="alert-"] {
      margin-bottom: 1rem;
    }

    [class*="grid-"]>div,
    .autogrid>div {
      padding: 10px;
      color: #fff;
      background: olivedrab;
    }

    div[class*="col-"] {
      background: hotpink;
    }

    div[class*="row-"] {
      background: orange;
    }

    div.item-first {
      background: tomato;
    }

    body>nav {
      margin-bottom: 4rem;
      padding: 1rem;
      background: #d0021b;
    }

    body>nav a {
      color: #fff;
      text-decoration: none;
      display: inline-block;
      padding: .5rem 1rem;
    }

    body>nav a:hover,
    body>nav a:focus {
      color: yellow;
    }

    .align {
      border: 1px dotted orange;
      padding: 2rem 1rem;
    }

    .align>* {
      padding: 1rem;
      color: #fff;
      background: hotpink;
    }

    .align>*+* {
      background: orange;
    }

    .align>*+*+* {
      background: chocolate;
    }

    .colors {
      display: grid;
      grid-template-columns: repeat(auto-fit, 120px);
      grid-auto-rows: 120px;
      grid-gap: 3rem 1rem;
      padding: 0;
      list-style: none;
    }

    .colors li span,
    .colors li b {
      display: block;
    }

    .colors li span {
      height: 100px;
      padding: 2px 4px;
      border: 1px solid gray;
    }

    @media (min-width: 1100px) and (min-height: 728px) {
      body>nav {
        width: 20vw;
        position: fixed;
        transition: .25s background;
      }
      body>nav a {
        display: block;
      }
      body>section {
        margin-left: 23vw;
      }
      body>nav.is-opened {
        background: hotpink;
      }
    }
  </style>
</head>

<body cz-shortcut-listen="true">

  <h1 class="sg-title">KNACSS v7 documentation</h1>

  <nav>
    <a href="#intro">Accueil</a>
    <a href="#install">Installation</a>
    <a href="#convention">Conventions</a>
    <a href="#colors">Couleurs</a>
    <a href="#typo">Typographie et listes</a>
    <a href="#tableaux">Tableaux</a>
    <a href="#citations">Citations</a>
    <a href="#alertes">Alertes</a>
    <a href="#inputs">Inputs - Checkboxes - Radios - Selects</a>
    <a href="#arrows">Flèches</a>
    <a href="#buttons">Boutons</a>
    <a href="#tags">Tags - Badges</a>
    <a href="#tabs">Tabs</a>
    <a href="#alignments">Alignements</a>
    <a href="#flexbox">Flexbox</a>
    <a href="#grids">Grilles (Grillade)</a>
    <a href="#mixins">Variables - Mixins</a>
    <a href="#about">À propos</a>
  </nav>

  <section id="intro">
    <h2 class="sg-title">introduction</h2>
    <p>
      <abbr title="prononcez 'KNÄCKESS'">KNACSS</abbr>, c’est un peu comme une feuille de style
      <abbr title="Cascading Style Sheets" lang="en">CSS</abbr> «&nbsp;reset&nbsp;» 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).</p>
    <p>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
      <abbr title="HyperText Markup Language" lang="en">HTML</abbr>.</p>
    <p class="icon-github4 mtm">
      <strong>KNACSS est distribué librement
        <a href="https://web.archive.org/web/20180830165406/https://github.com/alsacreations/KNACSS">sur Github</a> sous
        <a href="https://web.archive.org/web/20180830165406/http://www.wtfpl.net/">licence WTFPL</a>, toutes contributions sont bienvenues.</strong>
    </p>

    <h2 class="sg-title mtl">nouvelle version v7</h2>
    <p>La version 7 de KNACSS est sorti le
      <strong>11 décembre 2017</strong>. Les modifications sont consignées au fur et à mesure dans un fichier
      <em>
        <a href="https://web.archive.org/web/20180830165406/https://github.com/alsacreations/KNACSS/blob/v7/changelog.md">"changelog"</a>
      </em>.</p>
    <p>
      <strong>Parmi les nouveautés les plus significatives :</strong>
    </p>
    <ul>
      <li>
        <strong>Grillade</strong>, le système de grille principal de KNACSS a été entièrement repensé pour les navigateurs modernes.
        Il est bâti sur Grid Layout et non plus Flexbox. Il n'est pas prévu d'alternatives pour les anciens navigateurs,
        mais rien ne vous empêche de continuer à utiliser l'ancienne version de Grillade ou un autre framework de grilles.</li>
      <li>
        <strong>L'architecture</strong> de KNACSS a été refondue pour être plus simple et plus intuitive. Les variables également.</li>
      <li>Le fichier de "reset" Normalize.css a été remplacé par celui de Bootstrap&nbsp;:
        <strong>Reboot.css</strong>.</li>
      <li>La plupart des
        <strong>composants</strong> du quotidien disposent à présent de styles de base : alertes, boutons, badges, checkbox, radio,
        tabs, flèches, il existe même un style prévu pour le bouton "burger" de navigation.</li>
    </ul>
    <p>Découvrez ici-même les nouveautés de KNACSS v7 sous forme d'une documentation-styleguide.</p>
    <p>
      <em>Note : les textes de remplissage en alsacien sont issus du générateur de templates
        <a href="https://web.archive.org/web/20180830165406/https://schnaps.it/">Schnapsum</a>
      </em>.</p>
  </section>

  <section id="compat" class="mtl">
    <h2 class="sg-title">compatibilité navigateurs</h2>
    <p>KNACSS version 7 est - dans sa grande majorité - entièrement compatible avec l'ensemble des navigateurs desktop et mobiles
      à partir d'IE10 inclus.</p>
    <p>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
      <a href="https://web.archive.org/web/20180830165406/http://caniuse.com/#feat=css-grid">Edge 16 (sorti en fin 2017)</a>. Pour plus de détails, reportez-vous à la section
      <a href="#grids">Grilles</a>.</p>
  </section>

  <section id="install" class="mtl">
    <h2 class="sg-title">installation</h2>
    <p>Il y a deux moyens d'installer KNACSS&nbsp;: la version "prêt à consommer" et la version "à compiler". Seule la deuxième
      est configurable.</p>
    <h3 class="sg-title">version "prêt à consommer"</h3>
    <p>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.</p>
    <p>KNACSS n'est constitué que d'un seul fichier CSS&nbsp;:</p>
    <ul>
      <li>en version
        <a href="https://web.archive.org/web/20180830165406/https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/css/knacss-unminified.css">CSS classique et lisible</a>
      </li>
      <li>ou en
        <a href="https://web.archive.org/web/20180830165406/https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/css/knacss.css">version minifiée</a>
      </li>
    </ul>
    <p>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 dans votre page HTML, avant votre propre feuille de style, bien entendu.</p>
    <h3 class="sg-title">version "à compiler"</h3>
    <p>Pour tirer le meilleur de KNACSS, il est préférable d'opter pour 
la version Sass (Scss) à 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.).</p>
    <p>Vous pouvez
      <a href="https://web.archive.org/web/20180830165406/https://github.com/alsacreations/KNACSS/archive/master.zip">télécharger KNACSS complet</a>, avec l'ensemble des fichiers et architecture, mais il est généralement plus simple
      de recourir à NPM ou Yarn pour l'installation&nbsp;:</p>
    <pre><code>npm install knacss</code></pre>
    <p>Le fichier source principal est
      <code>/sass/knacss.scss</code>, 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.</p>
    <p>Nous recommandons de compiler à l'aide de Gulp (les fichiers
      <code>gulpfile.js</code> et
      <code>package.json</code> sont fournis), mais rien ne vous empêche d'utiliser d'autres workflows tels que Grunt, CSSnext, prepros, koala, etc.</p>
    <p class="alert--primary">Les fichiers de configuration
      <i>_config/_variables.scss</i> et
      <i>_config/_mixins.scss</i> 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.</p>
    <p>Sachez qu'un
      <a href="https://web.archive.org/web/20180830165406/http://knacss.com/knacss7-cheatsheet.pdf">
        <strong>Pense-bête en PDF</strong>
      </a> est disponible pour vous souvenir des classes utiles de KNACSS.</p>
    <h4>Préfixes navigateurs</h4>
    <p>Certaines fonctionnalités avancées de KNACSS nécessitent d'employer toute une panoplie de préfixes CSS (
      <code>-webkit-</code>,
      <code>-moz-</code>,
      <code>-ms-</code>,…) pour être certain que les propriétés CSS fonctionneront partout.</p>
    <p>Dans la version Sass de KNACSS,
      <b>les préfixes n'apparaissent pas</b> pour ne pas polluer la lecture du fichier de travail.
      <b>Il vous sera donc nécessaire de les ajouter</b>, de préférence automatiquement grâce à un plugin ou à l'excellent outil
      qu'est
      <a href="https://web.archive.org/web/20180830165406/https://github.com/postcss/autoprefixer">autoprefixer</a>.</p>

    <h4>Projet et compilation</h4>
    <p>KNACSS se contente de gérer les styles CSS de vos pages, son compilateur Gulp intégré ne se charge que de transformer
      du SCSS en CSS.
      <br> Au sein d'un véritable projet, vous devrez réaliser bien plus de tâches&nbsp;: compilations, optimisation d'images,
      concaténations et minifications de fichiers, etc.</p>
    <p>Sachez que chez nous, à
      <a href="https://web.archive.org/web/20180830165406/https://www.alsacreations.fr/">l'agence Alsacréations</a> nous nous servons d'un outil de workflow Gulp libre, gratuit, que nous avons conçu et qui
      se nomme
      <b>
        <a href="https://web.archive.org/web/20180830165406/https://github.com/alsacreations/bretzel">Bretzel</a>
      </b>.</p>
  </section>

  <section id="convention" class="mtl">
    <h2 class="sg-title">conventions</h2>
    <p>Voici quelques conventions de nommage et bonnes pratiques de KNACSS, cette liste est non exhaustive&nbsp;:</p>
    <ul>
      <li>
        <b>Priorité aux classes :</b> Privilégiez au maximum l'usage de classes plutôt que des sélecteurs basés sur les noms
        des balises ou leur
        <code>id</code>
      </li>
      <li>
        <b>Nommage des classes :</b> Choisissez des noms de composants fonctionnels réutilisables (ex.
        <code>alert</code>), des noms de sous-éléments préfixés par leur parent (ex.
        <code>alert-title</code>) et des variantes facilement distinguables (ex.
        <code>alert-title--alternate</code>)</li>
      <li>
        <b>Pas de mélange : </b>Séparez la structure de l’apparence (une règle CSS ne doit pas comporter à la fois
        <code>padding</code> et
        <code>background</code> par exemple). Prévoyez des styles de base réutilisables, puis des classes de variantes graphiques
      </li>
      <li>
        <b>Autonomie des composants :</b> Séparez le conteneur du contenu (un composant ne doit jamais être ciblé par un sélecteur
        qui tient compte de son parent) Par exemple, n'écrivez pas
        <code>.sidebar .button</code> mais
        <code>.button-primary</code>
      </li>
      <li>
        <b>Variables :</b> les variables de KNACSS sont rédigées en minuscule, en anglais et les mots composés sont séparés
        d'un trait d'union. De préférence, le nom du composant apparaît en premier dans le nom d'une variable (ex.
        <code>$checkbox-size</code> plutôt que
        <code>$size-checkbox</code>), à l'exception des couleurs globales de texte ou de fond (
        <code>$color-primary</code>,
        <code>$background-base</code>, etc.)</li>
      <li>
        <b>Couleurs :</b> Employez systématiquement une variable pour désigner vos couleurs au sein des projets.</li>
      <li>
        <b>Points de rupture :</b> optez pour la méthodologie "Mobile First" et appliquez de préférence des media queries de
        ce type :
        <code>@media (min-width: $breakpoint)</code>. Si vous deviez choisir un intervalle maximum, optez pour
        <code>@media (max-width: ($breakpoint - 1))</code> pour éviter les chevauchements</li>
      <li>
        <b>Classes utilitaires :</b> KNACSS propose quelques classes utilitaires telles que
        <code>.mt0</code>,
        <code>.txtcenter</code>,
        <code>.fl</code>, etc. mais il est préférable de ne pas en abuser. Évitez d'accumuler les classes sur un même élément</li>
      <li>
        <b>Réutilisez : </b>Utilisez au maximum les modèles et composants réutilisables tels que les objet "media" et "autogrid."
        (voir fichiers dans
        <code>/sass/components/</code>)</li>
    </ul>
  </section>

  <section id="colors" class="mtl">
    <h2 class="sg-title">couleurs</h2>
    <p>Ci-dessous, la palette de couleurs employée de base sur KNACSS, ainsi que les noms de variables Scss associées.</p>
    <h3 class="sg-title mtm">color names</h3>
    <ul class="colors">
      <li>
        <span style="background-color: #fff">#fff</span>
        <b>$white</b>
      </li>
      <li>
        <span style="background-color: #f8f9fa">#f8f9fa</span>
        <b>$gray-100</b>
      </li>
      <li>
        <span style="background-color: #e7e9ed">#e7e9ed</span>
        <b>$gray-200</b>
      </li>
      <li>
        <span style="background-color: #dee2e6">#dee2e6</span>
        <b>$gray-300</b>
      </li>
      <li>
        <span style="background-color: #ced4da">#ced4da</span>
        <b>$gray-400</b>
      </li>
      <li>
        <span style="background-color: #acb3c2">#acb3c2</span>
        <b>$gray-500</b>
      </li>
      <li>
        <span style="background-color: #727e96; color: #fff">#727e96</span>
        <b>$gray-600</b>
      </li>
      <li>
        <span style="background-color: #454d5d; color: #fff">#454d5d</span>
        <b>$gray-700</b>
      </li>
      <li>
        <span style="background-color: #333; color: #fff">#333</span>
        <b>$gray-800</b>
      </li>
      <li>
        <span style="background-color: #212529; color: #fff">#212529</span>
        <b>$gray-900</b>
      </li>
      <li>
        <span style="background-color: #000; color: #fff">#000</span>
        <b>$black</b>
      </li>
      <li style="grid-column: 1">
        <span style="background-color: #5BC0DE; color: #fff;">#5BC0DE</span>
        <b>$blue-300</b>
      </li>
      <li>
        <span style="background-color: #0275D8; color: #fff">#0275D8</span>
        <b>$blue-500</b>
      </li>
      <li>
        <span style="background-color: #5CB85C; color: #fff">#5CB85C</span>
        <b>$green-500</b>
      </li>
      <li>
        <span style="background-color: #F0AD4E; color: #fff">#F0AD4E</span>
        <b>$orange-500</b>
      </li>
      <li>
        <span style="background-color: #D9534F; color: #fff">#D9534F</span>
        <b>$red-500</b>
      </li>
    </ul>

    <h3 class="sg-title mtl">semantic colors</h3>
    <ul class="colors">
      <li>
        <span style="background-color: #5CB85C; color: #fff">$green-500</span>
        <b>$color-brand</b>
      </li>
      <li>
        <span style="background-color: #0275D8; color: #fff">$blue-500</span>
        <b>$color-primary</b>
      </li>
      <li>
        <span style="background-color: #5CB85C; color: #fff">$green-500</span>
        <b>$color-success</b>
      </li>
      <li>
        <span style="background-color: #5BC0DE; color: #fff">$blue-300</span>
        <b>$color-info</b>
      </li>
      <li>
        <span style="background-color: #F0AD4E; color: #fff">$orange-500</span>
        <b>$color-warning</b>
      </li>
      <li>
        <span style="background-color: #D9534F; color: #fff">$red-500</span>
        <b>$color-danger</b>
      </li>
      <li>
        <span style="background-color: #333; color: #fff">$gray-800</span>
        <b>$color-inverse</b>
      </li>
      <li>
        <span style="">transparent</span>
        <b>$color-ghost</b>
      </li>
      <li>
        <span style="background-color: #e7e9ed;">$gray-200</span>
        <b>$color-muted</b>
      </li>
      <li style="grid-column: 1">
        <span style="background-color: #212529; color: #fff">$gray-900</span>
        <b>$color-base</b>
      </li>
      <li>
        <span style="background-color: #fff;">$white</span>
        <b>$background-base</b>
      </li>
      <li>
        <span style="background-color: #333; color: #fff">$gray-800</span>
        <b>$link-color</b>
      </li>
      <li>
        <span style="background-color: #0d0d0d; color: #fff">darken($link-color, 15%)</span>
        <b>$link-color-hover</b>
      </li>
      <li>
        <span style="background-color: #333; color: #fff">$gray-800</span>
        <b>$forms-color</b>
      </li>
    </ul>


  </section>

  <section id="typo" class="mtl">
    <h2 class="sg-title">fontes</h2>
    <p>Trois variables sont prévues pour les familles de police. La première,
      <code>$font-stack-common</code>, est appliquée par défaut sur le contenu. Il s'agit de ce que l'on appelle la
      <a href="https://web.archive.org/web/20180830165406/https://css-tricks.com/snippets/css/system-font-stack/">System Font Stack</a>, déjà adoptée par des sites tels que Medium, Booking, WordPress, Alsacréations, etc.</p>
    <p>Les voici en oeuvre&nbsp;:</p>
    <blockquote>
      <p style="font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif">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</p>
    </blockquote>
    <pre><code>$font-stack-common: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;</code></pre>

    <blockquote>
      <p style="font-family: 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</p>
    </blockquote>
    <pre><code>$font-stack-headings: sans-serif;</code></pre>

    <blockquote>
      <p style="font-family: consolas, courier, monospace">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</p>
    </blockquote>
    <pre><code>$font-stack-monospace: consolas, courier, monospace;</code></pre>
  </section>

  <section id="titres" class="mtl">
    <h2 class="sg-title">titres</h2>
    <p>Les six niveaux de titre sont stylés avec leurs éléments respectifs&nbsp;:
      <code>h1</code> à
      <code>h6</code>, ou (recommandé) les classes
      <code>.h1-like</code> à
      <code>.h6-like</code>.</p>
    <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>

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

  <section id="paragraphes" class="mtl">
    <h2 class="sg-title">paragraphes et textes</h2>
    <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 &lt;em&gt;</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 &lt;strong&gt;</strong> alles fraü Chulia Roberts
      <code>je suis du code</code> oder knäckes dûû blottkopf.</p>
    <pre><code>&lt;p&gt;Lorem Elsass Ipsum mitt picon bière munster du ftomi! &lt;a href="#"&gt;Je suis un lien&lt;/a&gt; Ponchour bisame. Bibbeleskaas &lt;mark&gt;je suis marqué&lt;/mark&gt; jetz rossbolla sech &lt;em&gt;je suis un &lt;em&gt;&lt;/em&gt; choucroute un schwanz geburtstàg, Je suis une touche &lt;kbd&gt;du clavier&lt;/kbd&gt; Chinette dû, ìch bier deppfele schiesser. Flammekueche de knèkes Seppele gal! a hopla geburtstàg, &lt;strong&gt;je suis un &lt;strong&gt;&lt;/strong&gt; alles fraü Chulia Roberts &lt;code&gt;je suis du code&lt;/code&gt; oder knäckes dûû blottkopf.&lt;/p&gt;</code></pre>
  </section>

  <section id="listes" class="mtl">
    <h2 class="sg-title">listes</h2>
    <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> ou
        <code>.is-unstyled</code>
      </li>
      <li>Salade</li>
      <li>Tomate</li>
      <li>Oignon</li>
      <li>Choucroute</li>
    </ul>
    <pre><code>&lt;ul&gt;
    &lt;li&gt;Liste non ordonnée&lt;/li&gt;
    &lt;li&gt;Salade&lt;/li&gt;
    &lt;li&gt;Tomate&lt;/li&gt;
    &lt;li&gt;Oignon&lt;/li&gt;
    &lt;li&gt;Choucroute&lt;/li&gt;
&lt;/ul&gt;

&lt;ol&gt;
    &lt;li&gt;Liste ordonnée&lt;/li&gt;
    &lt;li&gt;Salade&lt;/li&gt;
    &lt;li&gt;Tomate&lt;/li&gt;
    &lt;li&gt;Oignon&lt;/li&gt;
    &lt;li&gt;Choucroute&lt;/li&gt;
&lt;/ol&gt;

&lt;ul class="unstyled"&gt;
    &lt;li&gt;Liste &lt;code&gt;.unstyled&lt;/code&gt;&lt;/li&gt;
    &lt;li&gt;Salade&lt;/li&gt;
    &lt;li&gt;Tomate&lt;/li&gt;
    &lt;li&gt;Oignon&lt;/li&gt;
    &lt;li&gt;Choucroute&lt;/li&gt;
&lt;/ul&gt;</code></pre>
  </section>

  <section id="tableaux" class="mtl">
    <h2 class="sg-title">tableaux</h2>
    <p class="mbl">Les tableaux de données disposent de styles de base. Ceux munis d'une classe
      <code>.table</code> 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
      <code>.table--zebra</code> colorie une rangée sur deux.
    </p>

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

    <p>Voici la structure HTML permettant d'obtenir ce résultat&nbsp;:</p>
    <pre><code>&lt;table class="table" summary=""&gt;
	&lt;caption&gt;.table&lt;/caption&gt;
	&lt;thead&gt;
		&lt;tr&gt;
			&lt;th scope="col"&gt;Fruit&lt;/th&gt;
			&lt;th scope="col"&gt;Note&lt;/th&gt;
			&lt;th scope="col"&gt;Prix&lt;/th&gt;
		&lt;/tr&gt;
	&lt;/thead&gt;
	&lt;tbody&gt;
		&lt;tr&gt;
			&lt;td&gt;Kiwi&lt;/td&gt;
			&lt;td&gt;★★★&lt;/td&gt;
			&lt;td&gt;13.37€&lt;/td&gt;
		&lt;/tr&gt;
    &lt;tr&gt;
			&lt;td&gt;Banane&lt;/td&gt;
			&lt;td&gt;★★&lt;/td&gt;
			&lt;td&gt;0.42€&lt;/td&gt;
		&lt;/tr&gt;
	&lt;/tbody&gt;
&lt;/table&gt;</code></pre>
  </section>

  <section id="citations" class="mtl">
    <h2 class="sg-title">citations</h2>
    <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>
    <pre><code>&lt;blockquote&gt;
   &lt;p&gt;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&lt;/p&gt;
&lt;/blockquote&gt;</code></pre>
  </section>

  <section id="alertes" class="mtl">
    <h2 class="sg-title">alertes</h2>
    <p>Une alerte est une boîte d'information disposant de la classe
      <code>.alert</code> (pour les styles par défaut) ou une classe commençant par
      <code>.alert--</code> pour les différentes variantes
      <code>.alert--primary</code>,
      <code>.alert--success</code>,
      <code>.alert--warning</code>,
      <code>.alert--danger</code>,
      <code>.alert--info</code>,
      <code>.alert--inverse</code>,
      <code>.alert--ghost</code>.</p>
    <p>Les variantes sont gérées par un ensemble (thème) de variables comprenant : couleur de fond, couleur de texte et bordure
      optionnelle.</p>


    <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 style="background: #555; padding: 1rem; margin-top: 1rem">
      <div class="alert--ghost" style="margin-top: 0">Ghost</div>
    </div>
    <pre><code>&lt;div class="alert"&gt;Alert Default&lt;/div&gt;
&lt;div class="alert--primary"&gt;Primary&lt;/div&gt;
&lt;div class="alert--success"&gt;Success&lt;/div&gt;
&lt;div class="alert--warning"&gt;Warning&lt;/div&gt;
&lt;div class="alert--danger"&gt;Danger&lt;/div&gt;
&lt;div class="alert--info"&gt;Info&lt;/div&gt;
&lt;div class="alert--inverse"&gt;Inverse&lt;/div&gt;
&lt;div class="alert--ghost"&gt;Ghost&lt;/div&gt;</code></pre>
  </section>

  <section id="inputs" class="mtl">
    <h2 class="sg-title">inputs</h2>
    <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>
    <pre><code>&lt;input type="text" placeholder="text"&gt;
&lt;input type="search" placeholder="search"&gt;
&lt;input type="number" placeholder="number"&gt;
&lt;input type="email" placeholder="email"&gt;
&lt;input type="password" value="password"&gt;
&lt;progress&gt;&lt;/progress&gt;</code></pre>
  </section>

  <section id="checkboxes" class="mtl">
    <h2 class="sg-title">checkboxes</h2>
    <p>KNACSS prend en compte les styles de base des cases à cocher, il suffit d'appliquer la classe
      <code>.checkbox</code> sur l'élément
      <code>input</code> afin de le voir en action.</p>
    <p>Voici le code HTML recommandé :
      <code>&lt;input type="checkbox" class="checkbox" id="c1"&gt;&lt;label for="c1"&gt;click here&lt;/label&gt;</code>
    </p>
    <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>
    <pre><code>&lt;form action="#"&gt;
  &lt;ul class="is-unstyled"&gt;
    &lt;li&gt;
      &lt;input type="checkbox" class="checkbox" id="c1"&gt;
      &lt;label for="c1"&gt;Salade&lt;/label&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;input type="checkbox" class="checkbox" id="c2" checked="checked"&gt;
      &lt;label for="c2"&gt;Tomate&lt;/label&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;input type="checkbox" class="checkbox" id="c3" checked="checked" disabled="disabled"&gt;
      &lt;label for="c3"&gt;Oignon&lt;/label&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;input type="checkbox" class="checkbox" id="c4" disabled="disabled"&gt;
      &lt;label for="c4"&gt;Choucroute&lt;/label&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/form&gt;</code></pre>
  </section>

  <section id="radios" class="mtl">
    <h2 class="sg-title">radios</h2>
    <p>KNACSS prend en compte les styles de base des boutons radio, il suffit d'appliquer la classe
      <code>.radio</code> sur l'élément
      <code>input</code> afin de le voir en action.</p>
    <p>Voici le code HTML recommandé :
      <code>&lt;input type="radio" class="radio" name="radio" id="r1"&gt;&lt;label for="r1"&gt;Click here&lt;/label&gt;</code>
    </p>
    <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">
          <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>
    <pre><code>&lt;form action="#"&gt;
  &lt;ul class="is-unstyled"&gt;
    &lt;li&gt;
      &lt;input type="radio" class="radio" name="radio" id="r1"&gt;
      &lt;label for="r1"&gt;Salade&lt;/label&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;input type="radio" class="radio" name="radio" id="r2" checked="checked"&gt;
      &lt;label for="r2"&gt;Tomate&lt;/label&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;input type="radio" class="radio" name="radio" id="r3" checked="checked" disabled="disabled"&gt;
      &lt;label for="r3"&gt;Oignon&lt;/label&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;input type="radio" class="radio" name="radio" id="r4" disabled="disabled"&gt;
      &lt;label for="r4"&gt;Choucroute&lt;/label&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/form&gt;</code></pre>
  </section>


  <section id="switches" class="mtl">
    <h2 class="sg-title">switchs</h2>
    <p>Les boutons de switch (ou toggle) sont gérés à l'aide de la classe
      <code>.switch</code> sur l'élément
      <code>input checkbox</code>.</p>
    <p>Voici le code HTML recommandé :
      <code>&lt;input type="checkbox" class="switch" id="switch"&gt;
&lt;label for="switch" class="label"&gt;slide to unlock&lt;/label&gt;</code>
    </p>
    <div>
      <input type="checkbox" class="switch" id="switch">
      <label for="switch" class="label">slide to unlock</label>
    </div>
    <pre><code>&lt;input type="checkbox" class="switch" id="switch"&gt;
&lt;label for="switch" class="label"&gt;slide to unlock&lt;/label&gt;</code></pre>
  </section>

  <section id="selects" class="mtl">
    <h2 class="sg-title">selects</h2>
    <p class="mbm">Les éléments
      <code>&lt;select&gt;</code> sont automatiquement stylés dans KNACSS. Vous pouvez adapter les styles de base en modifiant les variables du projet.</p>
    <select>
      <option value="valeur1" selected="selected">Salade</option>
      <option value="valeur2">Tomate</option>
      <option value="valeur3">Oignon</option>
    </select>
    <pre class="mts"><code>&lt;select&gt;
  &lt;option value="valeur1"&gt;Salade&lt;/option&gt;
  &lt;option value="valeur2"&gt;Tomate&lt;/option&gt;
  &lt;option value="valeur3"&gt;Oignon&lt;/option&gt;
&lt;/select&gt;</code></pre>
  </section>

  <section id="arrows" class="mtl">
    <h2 class="sg-title">flèches / arrows</h2>
    <p>Quatre classes sont prévues pour afficher des flèches décoratives à droite de n'importe quel élément. Il s'agit de
      <code>icon-arrow--down</code>,
      <code>icon-arrow--up</code>,
      <code>icon-arrow--right</code> et
      <code>icon-arrow--left</code>. Si vous souhaitez que la flèche apparaisse à gauche, appliquez la classe
      <code>.flex-row-reverse</code> sur le parent.</p>
    <p class="alert--warning">Attention, les flèches "arrows" se basent sur les masques CSS, actuellement incompatibles avec IE / Edge.</p>
    <p>arrow down
      <i class="icon-arrow--down"></i>
    </p>
    <p>arrow up
      <i class="icon-arrow--up"></i>
    </p>
    <p>arrow right
      <i class="icon-arrow--right"></i>
    </p>
    <p>arrow left
      <i class="icon-arrow--left"></i>
    </p>
    <p class="flex-row-reverse">arrow left
      <i class="icon-arrow--left"></i>
    </p>
    <pre><code>&lt;p&gt;icon-arrow down &lt;i class="icon-arrow--down"&gt;&lt;/i&gt;&lt;/p&gt;
&lt;p&gt;icon-arrow up &lt;i class="icon-arrow--up"&gt;&lt;/i&gt;&lt;/p&gt;
&lt;p&gt;icon-arrow right &lt;i class="icon-arrow--right"&gt;&lt;/i&gt;&lt;/p&gt;
&lt;p&gt;icon-arrow left &lt;i class="icon-arrow--left"&gt;&lt;/i&gt;&lt;/p&gt;
&lt;p class="flex-row-reverse"&gt;icon-arrow left &lt;i class="icon-arrow--left"&gt;&lt;/i&gt;&lt;/p&gt;</code></pre>
  </section>

  <section id="buttons" class="mtl">
    <h2 class="sg-title">boutons</h2>
    <p>Les boutons, comme les alertes disposent d'un ensemble de thème de couleurs (couleur de fond, couleur de texte et bordure
      optionnelle).</p>
    <p>Il est recommandé d'utiliser l'élément HTML
      <code>&lt;button&gt;</code>, mais rien n'empêche d'opter pour d'autres types d'éléments, tant qu'ils sont associés à l'attribut ARIA
      <code>role="button"</code> </p>
    <p>Un bouton dispose de la classe
      <code>.btn</code> ou
      <code>.button</code> (pour les styles par défaut) ou une classe commençant par
      <code>.btn--</code> ou
      <code>.button--</code> pour les différentes variantes, par exemple
      <code>.btn--primary</code>,
      <code>.btn--success</code>,
      <code>.btn--warning</code>,
      <code>.btn--danger</code>,
      <code>.btn--info</code>,
      <code>.btn--inverse</code>,
      <code>.btn--ghost</code>.</p>
    <div class="mtm">
      <button class="btn">Button Default</button>
      <button class="btn--primary">Primary</button>
      <button class="btn--success">Success</button>
      <input class="btn--warning" type="button" value="Warning">
      <span class="btn--danger">Danger</span>
      <span class="btn--info">Info</span>
      <span class="btn--inverse">Inverse</span>
      <div style="background: #555; padding: 1rem; margin-top: 1rem">
        <button class="btn--ghost">Ghost</button>
      </div>
    </div>
    <pre><code>&lt;button class="btn"&gt;Button Default&lt;/button&gt;
&lt;button class="btn--primary"&gt;Primary&lt;/button&gt;
&lt;button class="btn--success"&gt;Success&lt;/button&gt;
&lt;input  class="btn--warning" type="button" role="button" value="Warning"&gt;
&lt;span class="btn--danger" role="button"&gt;Danger&lt;/span&gt;
&lt;span class="btn--info" role="button"&gt;Info&lt;/span&gt;
&lt;span class="btn--inverse" role="button"&gt;Inverse&lt;/span&gt;
&lt;button class="btn--ghost"&gt;Ghost&lt;/button&gt;</code></pre>
  </section>

  <section id="burger" class="mtl">
    <h2 class="sg-title">burger button</h2>
    <p>Un élément possédant la classe
      <code>.nav-button</code> 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).</p>
    <p class="mbm">Pour des raisons d'accessibilité, il est fortement recommandé d'utiliser la structure HTML ci-dessous pour votre bouton.</p>
    <button class="nav-button" type="button" role="button" aria-label="open/close navigation">
      <i></i>
    </button>
    <pre class="mts"><code>&lt;button class="nav-button" type="button" role="button" aria-label="open/close navigation"&gt;&lt;i&gt;&lt;/i&gt;&lt;/button&gt;</code></pre>

    <p>Voici le bout de code JavaScript employé pour activer ce bouton&nbsp;</p>
    <pre><code>&lt;script&gt;
/**!
Navigation Button Toggle class
*/
(function() {

// old browser or not ?
if ( !('querySelector' in document &amp;&amp; '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 &gt; 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();
}());
&lt;/script&gt;</code></pre>
  </section>

  <section id="tags" class="mtl">
    <h2 class="sg-title">tags (étiquette)</h2>
    <p>Un tag dispose de la classe
      <code>.tag</code> (pour les styles par défaut) ou une classe commençant par
      <code>.tag--</code> pour les différentes variantes, par exemple
      <code>.tag--primary</code>,
      <code>.tag--success</code>,
      <code>.tag--warning</code>,
      <code>.tag--danger</code>,
      <code>.tag--info</code>,
      <code>.tag--inverse</code>,
      <code>.tag--ghost</code>.</p>

    <div class="mtm">
      <button class="tag">Tag 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>
    </div>

    <pre><code>&lt;button class="tag"&gt;Badge Default&lt;/button&gt;
&lt;button class="tag--primary"&gt;Primary&lt;/button&gt;
&lt;button class="tag--success"&gt;Success&lt;/button&gt;
&lt;span class="tag--warning"&gt;Warning&lt;/span&gt;
&lt;span class="tag--danger"&gt;Danger&lt;/span&gt;
&lt;span class="tag--info"&gt;Info&lt;/span&gt;
&lt;span class="tag--inverse"&gt;Inverse&lt;/span&gt;</code></pre>
  </section>

  <section id="badges" class="mtl">
    <h2 class="sg-title">badges (arrondis)</h2>
    <p>Un badge est systématiquement rond et s'adapte à son contenu. Il dispose de la classe
      <code>.badge</code> (pour les styles par défaut) ou une classe commençant par
      <code>.badge--</code> pour les différentes variantes, par exemple
      <code>.badge--primary</code>,
      <code>.badge--success</code>,
      <code>.badge--warning</code>,
      <code>.badge--danger</code>,
      <code>.badge--info</code>,
      <code>.badge--inverse</code>,
      <code>.badge--ghost</code>.</p>

    <div class="mtm mbm">
      <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>
      <button class="badge--primary">-20%</button>
    </div>

    <pre><code>&lt;button class="badge"&gt;Badge Default&lt;/button&gt;
&lt;button class="badge--primary"&gt;Primary&lt;/button&gt;
&lt;button class="badge--success"&gt;Success&lt;/button&gt;
&lt;span class="badge--warning"&gt;Warning&lt;/span&gt;
&lt;span class="badge--danger"&gt;Danger&lt;/span&gt;
&lt;span class="badge--info"&gt;Info&lt;/span&gt;
&lt;span class="badge--inverse"&gt;Inverse&lt;/span&gt;</code></pre>
  </section>

  <section id="tabs" class="mtl">
    <h2 class="sg-title">tabs / onglets</h2>
    <p>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
      <code>.js-tabs</code> sur le conteneur global.
      <br>Les instructions complètes, le code HTML et JavaScript se trouvent sur le projet d'Alsacréations
      <a href="https://web.archive.org/web/20180830165406/https://github.com/alsacreations/pepin/tree/master/tabs">
        <em>Pepin</em>
      </a>.</p>
    <p class="mbm">Attention : pour fonctionner, les onglets nécessitent un code JavaScript (à récupérer sur Pepin).</p>

    <div class="tabs js-tabs">
      <nav class="tabs-menu" role="tablist">
        <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" tabindex="0">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" aria-hidden="true">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" aria-hidden="true">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>

    <pre class="mtm"><code>&lt;div class="tabs js-tabs"&gt;
  &lt;nav class="tabs-menu"&gt;
    &lt;a href="#tab1" class="tabs-menu-link is-active"&gt;Salade&lt;/a&gt;
    &lt;a href="#tab2" class="tabs-menu-link"&gt;Tomate&lt;/a&gt;
    &lt;a href="#tab3" class="tabs-menu-link"&gt;Oignons&lt;/a&gt;
  &lt;/nav&gt;

  &lt;div class="tabs-content"&gt;
    &lt;div id="tab1" class="tabs-content-item"&gt;Contenu 1. &lt;br&gt;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.&lt;/div&gt;
    &lt;div id="tab2" class="tabs-content-item"&gt;Contenu 2. &lt;br&gt;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.&lt;/div&gt;
    &lt;div id="tab3" class="tabs-content-item"&gt;Contenu 3. &lt;br&gt;E gewurtztraminer doch Carola schneck, schmutz a riesling de chambon eme rucksack Roger dû hopla geiss, jetz Chorchette de Scharrarbergheim.&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
  </section>

  <section id="alignments" class="mtl">
    <h2 class="sg-title">alignements</h2>
    <div class="align txtleft">
      <span>span</span>
      <a href="#">link</a>
    </div>
    <pre class="mbl"><code>&lt;div class="txtleft"&gt;
    &lt;span&gt;span&lt;/span&gt;
    &lt;a href="#"&gt;link&lt;/a&gt;
&lt;/div&gt;</code></pre>

    <div class="align txtcenter">
      <span>span</span>
      <a href="#">link</a>
    </div>
    <pre class="mbl"><code>&lt;div class="txtcenter"&gt;
    &lt;span&gt;span&lt;/span&gt;
    &lt;a href="#"&gt;link&lt;/a&gt;
&lt;/div&gt;</code></pre>

    <div class="align txtright">
      <span>span</span>
      <a href="#">link</a>
    </div>
    <pre class="mbl"><code>&lt;div class="txtright"&gt;
    &lt;span&gt;span&lt;/span&gt;
    &lt;a href="#"&gt;link&lt;/a&gt;
&lt;/div&gt;</code></pre>

    <div class="align">
      <div style="width: 30%" class="left">div.left</div>
    </div>
    <pre class="mbl"><code>&lt;div style="width: 30%" class="left"&gt;div.left&lt;/div&gt;</code></pre>

    <div class="align">
      <div style="width: 30%" class="center">div.center</div>
    </div>
    <pre class="mbl"><code>&lt;div style="width: 30%" class="center"&gt;div.center&lt;/div&gt;</code></pre>

    <div class="align">
      <div style="width: 30%" class="right">div.right</div>
    </div>
    <pre class="mbl"><code>&lt;div style="width: 30%" class="right"&gt;div.right&lt;/div&gt;</code></pre>

  </section>

  <section id="floats" class="mtl">
    <h2 class="sg-title">flottants</h2>

    <div class="align clearfix">
      <div style="width: 20%" class="fl">div.fl</div>
      <div style="width: 20%" class="fr">div.fr</div>
    </div>
    <pre class="mbl"><code>&lt;div class="clearfix"&gt;
        &lt;div style="width: 20%" class="fl"&gt;div.fl&lt;/div&gt;
        &lt;div style="width: 20%" class="fr"&gt;div.fr&lt;/div&gt;
    &lt;/div&gt;</code></pre>

  </section>

  <section id="flexbox" class="mtl">
    <h2 class="sg-title">flexbox</h2>
    <section class="align flex-container">
      <div>div</div>
      <span>span</span>
      <em>…</em>
    </section>
    <pre class="mbl"><code>&lt;section class="flex-container"&gt;
  &lt;div&gt;div&lt;/div&gt;
  &lt;span&gt;span&lt;/span&gt;
  &lt;em&gt;…&lt;/em&gt;
&lt;/section&gt;</code></pre>

    <div class="align flex-container--column">
      <div>div</div>
      <span>span</span>
      <em>…</em>
    </div>
    <pre class="mbl"><code>&lt;div class="flex-container--column"&gt;
&lt;div&gt;div&lt;/div&gt;
&lt;span&gt;span&lt;/span&gt;
&lt;em&gt;…&lt;/em&gt;
&lt;/div&gt;</code></pre>

    <div class="align flex-container">
      <div class="w33">.w33</div>
      <span class="w150p">.w150p</span>
      <span class="flex-item-fluid">.item-fluid</span>
    </div>
    <pre class="mbl"><code>&lt;div class="flex-container"&gt;
  &lt;div class="w33"&gt;.w33&lt;/div&gt;
  &lt;span class="w150p"&gt;.w150p&lt;/span&gt;
  &lt;span class="item-fluid"&gt;.item-fluid&lt;/span&gt;
&lt;/div&gt;</code></pre>

    <div class="align flex-container">
      <div>item</div>
      <span>item</span>
      <span class="item-first">.item-first</span>
    </div>
    <pre class="mbl"><code>&lt;div class="flex-container"&gt;
  &lt;div&gt;item&lt;/div&gt;
  &lt;span&gt;item&lt;/span&gt;
  &lt;span class="item-first"&gt;.item-first&lt;/span&gt;
&lt;/div&gt;</code></pre>

    <div class="align flex-container">
      <div class="item-last">.item-last</div>
      <span>item</span>
      <span>item</span>
    </div>
    <pre class="mbl"><code>&lt;div class="flex-container"&gt;
  &lt;div class="item-last"&gt;.item-last&lt;/div&gt;
  &lt;span&gt;item&lt;/span&gt;
  &lt;span&gt;item&lt;/span&gt;
&lt;/div&gt;</code></pre>

    <div class="align flex-container" style="height: 200px;">
      <span class="item-center">.item-center</span>
    </div>
    <pre class="mbl"><code>&lt;div class="flex-container" style="height: 200px;"&gt;
  &lt;span class="item-center"&gt;.item-center&lt;/span&gt;
&lt;/div&gt;</code></pre>

  </section>


  <section id="grids" class="mtl">
    <h2 class="sg-title">Grillade</h2>
    <p>
      <strong>Grillade</strong>, 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.</p>
    <p>Par défaut, le nouveau système de grilles est automatiquement importé au sein de KNACSS,
      <b>cependant les deux versions (nouvelle et ancienne en Flexbox) co-existent toujours pour des raisons de compatibilité&nbsp;:</b>
    </p>
    <ul>
      <li>
        <code>grillade-grid.scss</code> (nouvelle version en Grid Layout)</li>
      <li>
        <code>grillade-flex.scss</code> (ancienne version en Flexbox)</li>
    </ul>
    <p> 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&nbsp;:</p>
    <ul>
      <li>
        <code>grillade-grid.css</code> (3ko)</li>
      <li>
        <code>grillade-flex.css</code> (11ko)</li>
    </ul>
    <p>
      <strong>Grillade n'est pas un "framework"</strong>, il s'agit simplement de fonctionnalités basiques pour réaliser des grilles
      simples et courantes (et responsive).</p>
    <p>Si vous avez besoin de grilles complexes :</p>
    <ul>
      <li>Utilisez la spécification
        <a href="https://web.archive.org/web/20180830165406/https://www.alsacreations.com/article/lire/1388-css3-grid-layout.html">CSS Grid Layout</a> (c'est fait pour ça)</li>
      <li>Utilisez la
        <a href="https://web.archive.org/web/20180830165406/http://getbootstrap.com/customize/">grille de Bootstrap</a> (bonne chance)</li>
    </ul>
    <p class="alert--primary">Les grilles ne s'activent qu'à partir d'un breakpoint minimum (
      <code class="color--inverse">$tiny</code> = 480px par défaut). En deça, les éléments s'affichent en blocs, les uns sous les autres.</p>

    <table class="table table--zebra mtl" summary="">
      <caption>comparaison entre Grillade v6 et Grillade v7</caption>
      <thead>
        <tr>
          <td class="w20"></td>
          <th scope="col">Grillade v6</th>
          <th scope="col">Grillade v7</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>Techno CSS employée</th>
          <td>Flexbox</td>
          <td>Grid Layout</td>
        </tr>
        <tr>
          <th>Poids fichier CSS</th>
          <td>11 Ko</td>
          <td>3 Ko</td>
        </tr>
        <tr>
          <th>Compatibilité</th>
          <td>IE10+</td>
          <td>Edge 16+</td>
        </tr>
        <tr>
          <th>Fonctionnalités</th>
          <td>Mobile first
            <br>Largeurs fluides
            <br>Gouttières
            <br>Fusion de colonnes
            <br>
            <del>Fusion de rangées</del>
            <br>Gestion des écrans intermédiaires
            <br>
            <del>Tailles d'enfants responsive</del>
            <br>Ordonnancement des enfants</td>
          <td>Mobile first
            <br>Largeurs fluides
            <br>Gouttières
            <br>Fusion de colonnes
            <br>Fusion de rangées
            <br>Gestion des écrans intermédiaires
            <br>Tailles d'enfants responsive
            <br>Ordonnancement des enfants</td>
        </tr>
      </tbody>
    </table>

    <p>Voici quelques exemples de grilles réalisées avec KNACSS v7…</p>

    <h3 class="sg-title">.autogrid (ou .grid)</h3>
    <p class="mbm">Une "autogrid" (classe
      <code>.autogrid</code> ou
      <code>.grid</code>) 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
      <code>.has-gutter</code>,
      <code>.has-gutter-l</code>,
      <code>.has-gutter-xl</code>.</p>
    <section class="autogrid">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </section>
    <pre><code>&lt;section class="autogrid"&gt;
    &lt;div&gt;1&lt;/div&gt;
    &lt;div&gt;2&lt;/div&gt;
    &lt;div&gt;3&lt;/div&gt;
    &lt;div&gt;4&lt;/div&gt;
    &lt;div&gt;5&lt;/div&gt;
&lt;/section&gt;</code></pre>

    <h3 class="sg-title">.grid-6</h3>
    <p class="mbm">Une grille de 6 colonnes, avec retour à la ligne possible, et sans gouttière</p>
    <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>
    <pre><code>&lt;section class="grid-6"&gt;
    &lt;div&gt;1&lt;/div&gt;
    &lt;div&gt;2&lt;/div&gt;
    &lt;div&gt;3&lt;/div&gt;
    &lt;div&gt;4&lt;/div&gt;
    &lt;div&gt;5&lt;/div&gt;
    &lt;div&gt;6&lt;/div&gt;
    &lt;div&gt;7&lt;/div&gt;
    &lt;div&gt;8&lt;/div&gt;
&lt;/section&gt;</code></pre>

    <h3 class="sg-title">.grid-6 .has-gutter</h3>
    <p class="mbm">Une grille de 6 colonnes avec une gouttière. Les classes prévues sont
      <code>.has-gutter</code>,
      <code>.has-gutter-l</code>,
      <code>.has-gutter-xl</code>
    </p>
    <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>
    <pre><code>&lt;section class="grid-6 has-gutter"&gt;
    &lt;div&gt;1&lt;/div&gt;
    &lt;div&gt;2&lt;/div&gt;
    &lt;div&gt;3&lt;/div&gt;
    &lt;div&gt;4&lt;/div&gt;
    &lt;div&gt;5&lt;/div&gt;
    &lt;div&gt;6&lt;/div&gt;
    &lt;div&gt;7&lt;/div&gt;
    &lt;div&gt;8&lt;/div&gt;
&lt;/section&gt;</code></pre>

    <h3 class="sg-title">.grid-4 .has-gutter</h3>
    <p class="mbm">Une grille de 4 colonnes avec une gouttière. Certains enfants s'étendent sur plusieurs colonnes ou rangées.</p>
    <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>
    <pre><code>&lt;section class="grid-4 has-gutter"&gt;
    &lt;div&gt;1&lt;/div&gt;
    &lt;div class="col-2"&gt;.col-2&lt;/div&gt;
    &lt;div class="row-2"&gt;.row-2&lt;/div&gt;
    &lt;div&gt;4&lt;/div&gt;
    &lt;div&gt;5&lt;/div&gt;
    &lt;div&gt;6&lt;/div&gt;
&lt;/section&gt;</code></pre>

    <h3 class="sg-title">.grid-6-small-3</h3>
    <p class="mbm">Une grille de 6 colonnes sur grand écran, et 3 colonnes sur écran moyen.</p>
    <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>
    <pre><code>&lt;section class="grid-6-small-3"&gt;
&lt;div&gt;1&lt;/div&gt;
&lt;div&gt;2&lt;/div&gt;
&lt;div&gt;3&lt;/div&gt;
&lt;div&gt;4&lt;/div&gt;
&lt;div&gt;5&lt;/div&gt;
&lt;div&gt;6&lt;/div&gt;
&lt;div&gt;7&lt;/div&gt;
&lt;div&gt;8&lt;/div&gt;
&lt;/section&gt;</code></pre>

    <h3 class="sg-title">.grid-7-small-4</h3>
    <p class="mbm">Une grille de 7 colonnes sur grand écran, et 4 colonnes sur écran moyen. Quelques enfants changent de taille sur écran
      moyen</p>
    <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>
    <pre><code>&lt;section class="grid-7-small-4"&gt;
    &lt;div&gt;1&lt;/div&gt;
    &lt;div&gt;2&lt;/div&gt;
    &lt;div class="col-2-small-1"&gt;.col-2-small-1&lt;/div&gt;
    &lt;div&gt;4&lt;/div&gt;
    &lt;div&gt;5&lt;/div&gt;
    &lt;div class="col-1-small-2"&gt;.col-1-small-2&lt;/div&gt;
    &lt;div&gt;7&lt;/div&gt;
    &lt;div class="col-2-small-all"&gt;.col-2-small-all&lt;/div&gt;
&lt;/section&gt;</code></pre>

    <h3 class="sg-title">.grid-6-small-3 .has-gutter</h3>
    <p class="mbm">Panachage des possibilités de grilles</p>
    <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>
    <pre><code>&lt;section class="grid-6-small-3 has-gutter"&gt;
  &lt;div&gt;1&lt;/div&gt;
  &lt;div&gt;2&lt;/div&gt;
  &lt;div class="item-first"&gt;(3) item-first&lt;/div&gt;
  &lt;div&gt;4&lt;/div&gt;
  &lt;div&gt;5&lt;/div&gt;
  &lt;div&gt;6&lt;/div&gt;
  &lt;div&gt;7&lt;/div&gt;
  &lt;div class="col-3-small-2"&gt;col-3-small-2&lt;/div&gt;
  &lt;div class="col-2-small-1"&gt;col-2-small-1&lt;/div&gt;
  &lt;div class="col-2-small-1"&gt;col-2-small-1&lt;/div&gt;
  &lt;div class="col-4-small-2"&gt;col-4-small-2&lt;/div&gt;
  &lt;div class="row-2"&gt;row-2&lt;/div&gt;
  &lt;div&gt;13&lt;/div&gt;
  &lt;div&gt;14&lt;/div&gt;
  &lt;div&gt;15&lt;/div&gt;
  &lt;div&gt;16&lt;/div&gt;
  &lt;div class="col-3"&gt;col-3&lt;/div&gt;
  &lt;div&gt;18&lt;/div&gt;
  &lt;div&gt;19&lt;/div&gt;
  &lt;div class="col-all"&gt;col-all&lt;/div&gt;
&lt;/section&gt;</code></pre>
  </section>

  <section id="mixins" class="mtl">
    <h2 class="sg-title">mixins</h2>
    <p>Le fichier regroupant les mixins et fonctions Sass se nomme
      <code>sass/_config/_mixins.scss</code>. Il contient des raccourcis Sass qui facilitent la vie de l'intégrateur.</p>

    <h3 class="sg-title">mixin "respond-to()"</h3>
    <p>Ce mixin permet de faciliter et d'harmoniser les points de ruptures. Écrivez ceci dans votre fichier Sass&nbsp;:</p>
    <pre><code>p {
  color: blue;
  @include respond-to("small-up") {
    color: hotpink;
  }
}</code></pre>
    <p>Le résultat après compilation sera&nbsp;:</p>
    <pre><code>p {
  color: blue;
}
@media (min-width: 576px) {
  p {
    color: hotpink;
  }
}</code></pre>
    <p>Les paramètres et les intervales correspondants sont&nbsp;:</p>
    <pre><code>$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)
);</code></pre>

    <h3 class="sg-title">mixin "grid()"</h3>
    <p>Ce mixin de trois paramètres optionnels permet de générer une grille simple et rapide. Écrivez ceci dans votre fichier
      Sass&nbsp;:</p>
    <pre><code>.ingrid {
  @include grid(4, 1rem, 640px);
}</code></pre>
    <p>Le résultat après compilation sera&nbsp;:</p>
    <pre><code>@media (min-width: 640px) {
  .ingrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 1rem;
  }
}
</code></pre>

    <h3 class="sg-title">mixin "font-size()"</h3>
    <p>Ce mixin permet de gérer les tailles d'éléments autant mobiles que desktop. Écrivez ceci dans votre fichier Sass&nbsp;:</p>
    <pre><code>h2 {
  @include font-size(h2);
}</code></pre>
    <p>Le résultat après compilation sera&nbsp;:</p>
    <pre><code>h2 {
  font-size: 2.4rem;
}
@media (min-width: 576px) {
  h2 {
    font-size: 2.8rem;
  }
}</code></pre>
    <p>Les éléments prévus pour être ciblés par ce mixin sont&nbsp;: 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.</p>
  </section>

  <section id="variables" class="mtl">
    <h2 class="sg-title">variables</h2>
    <p>Le fichier permettant de configurer l'ensemble des variables du projet se nomme
      <code>sass/_config/_variables.scss</code>. Il est fortement conseillé de modifier ce fichier avec vos propres valeurs, plutôt que de les écraser par la suite.</p>

    <pre><code>// 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 : 2.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;

// Components: 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;

// Components: buttons, badges, alerts color variants list
// Convention is: 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;
</code></pre>
  </section>

  <section id="about" class="mtl">
    <h2 class="sg-title">à propos</h2>
    <p>KNACSS (prononcez "Knèckess") est un outil construit avec amour et du CSS par
      <a href="https://web.archive.org/web/20180830165406/http://www.goetter.fr/">Raphaël Goetter</a> et
      <a href="https://web.archive.org/web/20180830165406/http://www.alsacreations.fr/">Alsacréations</a>.</p>
    <p>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é).</p>
    <p>Un grand merci à
      <a href="https://web.archive.org/web/20180830165406/http://edenpulse.com/">Matthieu Bousendorfer</a> pour le design du site web, à
      <a href="https://web.archive.org/web/20180830165406/http://www.inpixelitrust.fr/">Stéphanie Walter</a> pour la conception du logo, ainsi qu’à
      <a href="https://web.archive.org/web/20180830165406/http://hugogiraudel.com/">Hugo Giraudel</a>,
      <a href="https://web.archive.org/web/20180830165406/https://twitter.com/philippevay">Philippe Vayssière</a>,
      <a href="https://web.archive.org/web/20180830165406/https://twitter.com/7studio">Xavier Zawala</a>,
      <a href="https://web.archive.org/web/20180830165406/http://www.nicolas-hoffmann.net/">Nicolas Hoffmann</a> pour leurs conseils et astuces pour faire évoluer l'outil.</p>
  </section>



<script src="KNACSS-v7.3-styleguide_fichiers/jquery.js">
</script>

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

<script>
  /**!
  Tabs
  Manages tabs with content
  */

  (function ($) {

    $.tabs = function (el, options) {

      // Default settings values
      var defaults = {
        selectorLinks: '.tabs-menu-link',
        selectorList: '.tabs-menu',
        selectorListItems: 'li',
        selectorContent: '.tabs-content-item',
        classActive: 'is-active'
      };

      var plugin = this;

      plugin.settings = {};

      var $element = $(el),
        element = el;

      // Plugin initialization
      plugin.init = function () {
        plugin.settings = $.extend({}, defaults, options);
        updateSettingsFromHTMLData();
        registerEvents();
        setAriaAttributes();
        plugin.switchContent(null);
      };

      // Reads plugin settings from HTML data-* attributes (camelCase)
      var updateSettingsFromHTMLData = function () {
        var data = $element.data();
        for (var dat in data) plugin.settings[dat] = data[dat];
      };

      // Set initial ARIA attributes on elements
      var setAriaAttributes = function () {
        $(plugin.settings.selectorList, $element).attr('role', 'tablist').find(plugin.settings.selectorListItems).attr('role', 'presentation').find(plugin.settings.selectorLinks).attr({
          'role': 'tab',
          'tabindex': '-1'
        }).each(function (index, item) {
          var target = $(this).attr('href');
          // If the link is marked active with the class, then tabindex 0
          if ($(this).hasClass(plugin.settings.classActive)) {
            $(this).attr('tabindex', '0');
          }
          // Establish relationships between tabs (links) and tabpanels
          $(this).attr('id', 'tablink' + index).attr('aria-controls', target.replace('#', ''));
          $(target).attr('aria-labelledby', 'tablink' + index).attr('tabindex', '0').attr('role', 'tabpanel');
        });
      };

      // Set event handlers on HTML elements (private method)
      var registerEvents = function () {
        // Navigate with clicks
        $(plugin.settings.selectorLinks, $element).off('click.tabs').on('click.tabs', function (e) {
          plugin.switchClasses($(this));
          plugin.switchContent($(this).attr('href'));
          e.preventDefault();
          // Navigate with arrow keys
        }).off('keydown.tabs').on('keydown.tabs', function (e) {
          if (e.metaKey || e.altKey) return; // Do not react with modifier keys
          switch (e.keyCode) {
            case 37:
            case 38:
              plugin.prevTab();
              e.preventDefault();
              break;
            case 39:
            case 40:
              plugin.nextTab();
              e.preventDefault();
              break;
            default:
              break;
          }
        });
      };

      // Switch active classes for tabs (public method)
      plugin.switchClasses = function ($el) {
        // Other elements
        $(plugin.settings.selectorLinks, $element).removeClass(plugin.settings.classActive).removeAttr('aria-selected').attr('tabindex', '-1');
        // Current element
        $el.addClass(plugin.settings.classActive).attr({
          'aria-selected': 'true',
          'tabindex': '0'
        }).focus();
      };

      // Switch active classes for content panels (public method)
      plugin.switchContent = function (targetId) {
        var $target;
        // Other elements
        $(plugin.settings.selectorContent, $element).attr({
          'aria-hidden': 'true'
        });
        // Target element
        if (targetId) {
          $target = $(targetId, $element);
        } else {
          $target = $(plugin.settings.selectorContent, $element).first();
        }
        $target.attr('tabindex', '0').removeAttr('aria-hidden');
      };

      // Switch to next tab
      plugin.nextTab = function () {
        plugin.goTab(1);
      };

      // Switch to next tab
      plugin.prevTab = function () {
        plugin.goTab(-1);
      };

      // Switch to prev/next tab
      plugin.goTab = function (direction) {
        var $current = $(plugin.settings.selectorLinks, $element).filter('.' + plugin.settings.classActive);
        var $links = $(plugin.settings.selectorLinks, $element);
        var eq = $links.index($current) + direction;
        if (eq < 0) return; // Prevent backward focus on last element
        var $next = $links.eq(eq);
        $next.trigger('click.tabs');
      };

      // Initialization
      plugin.init();

    };

    $.fn.tabs = function (options) {

      return this.each(function () {
        if (undefined === $(this).data('tabs')) {
          var plugin = new $.tabs(this, options);
          $(this).data('tabs', plugin);
        }
      });

    };

    $(document).ready(function () {
      // Launch plugin on target element
      $('.js-tabs').tabs();
    });

  })(jQuery);
</script>


</body></html>
<!--
     FILE ARCHIVED ON 16:54:06 Aug 30, 2018 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 15:36:49 Dec 16, 2020.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
-->
<!--
playback timings (ms):
  PetaboxLoader3.resolve: 193.864
  esindex: 0.014
  RedisCDXSource: 21.404
  captures_list: 318.012
  exclusion.robots.policy: 0.328
  exclusion.robots: 0.344
  load_resource: 333.882
  PetaboxLoader3.datanode: 212.71 (4)
  CDXLines.iter: 22.821 (3)
  LoadShardBlock: 268.768 (3)
-->