KNACSS Reborn documentation

compatibilité navigateurs

KNACSS est compatible avec tous les navigateurs représentant plus de 1.5% de la population, ce qui représente notamment tous les navigateurs modernes supportant CSS Grid Layout. Cela ne concerne donc pas IE10 et IE11.

La liste des navigateurs supportés est définie par le fichier .browserslistrc placé en racine du projet, sur lequel se base Autoprefixer et dont la valeur est 

>1.5%
not op_mini all

installation

Il n'y a volontairement pas de mode d'installation automatisé de KNACSS, car il est vivement recommandé de comprendre l'utilité et la portée de cet outil dans un premier temps, puis de récupérer les fichiers nécessaires à la main pour les adapter à toutes les configurations possibles de Workflow (NPM, Gulp, Docker, VueJS, WordPress, etc.).

KNACSS Reborn existe dans différentes versions, récupérables sur Github :

• Sass (fichiers multiples et personnalisation possible). Recommandé.
• CSS étendue (un seul fichier lisible, non personnalisable)
• CSS minifiée (un seul fichier compressé, non personnalisable)
• Grillade (un seul fichier, non personnalisable)

Le fichier principal knacss.scss a pour rôle d'importer tous les autres fichiers du projets. Les fichiers "CORE" sont indispensables pour le fonctionnement général. Les autres sont à retirer, au cas par cas, selon leur nécessité dans le projet :

// CORE
@import "abstracts/variables-sass";

@import "base/reset-base";
@import "base/reset-accessibility";
@import "base/reset-forms";
@import "base/reset-print";
@import "base/layout";

@import "abstracts/mixins-sass"; 

// UTILITY CLASSES
@import "utils/utils-global";
@import "utils/utils-spacers";
@import "utils/grillade";


// COMPONENTS (add them only if you need)
// @import "components/button";
// @import "components/burger";
// @import "components/checkbox";
// @import "components/radio";
// @import "components/quote";

fichiers reset

Plusieurs fichiers incontournables permettent d'harmoniser les styles entre les navigateurs mais aussi de faciliter certaines bonnes pratiques. (reset-base, reset-accessibility, reset-forms et reset-print).

reset-base.scss

Tous les éléments changent de modèle de boîte (box-sizing) et leur taille minimale est corrigée lorsqu'ils sont flex-items ou grid-items :

*,
*::before,
*::after {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
}

Des styles de base sont appliqués au document. À noter que la taille de police de HTML est proposée à font-size: 62.5% afin de faciliter le calcul des toutes les valeurs en unité rem (il suffit de multiplier par 10 pour obtenir la taille équivalente en pixel, donc 1rem vaut "10 pixels") :

html {
  font-size: $font-size-html;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overflow-wrap: break-word;
}

body {
  margin: 0;
  font-family: $font-family-base;
  font-size: $font-size-base;
  line-height: $line-height-base;
  background-color: $color-background-body;
  color: $color-text-primary;
}

Le rythme vertical suggéré est de supprimer toutes les marges hautes afin de pouvoir empiler les blocs les uns sous les autres sans craindre de fusion de marges :

(tous les éléments blocks) {
  margin-top: 0;
  margin-bottom: $spacer-small;
}

Les éléments remplacés tels que les images, vidéos, input et iframe) deviennent fluides en conservant leur ratio d'affichage :

(éléments remplacés) {
  max-width: 100%;
  height: auto;
}

reset-accessibility.scss

Une Media Query tient compte des préférences utilisateur en ce qui concerne les animations sur son écran :

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

La propriété .visually-hidden permet de masquer du contenu tout en demeurant compréhensible par une assistance technique. Cette classe peut être déclanchée sur certaines tailles d'écran uniquement, en la faisant précéder des préfixes sm:, md:, lg:, xl: :

.visually-hidden {
  position: absolute !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
}

Enfin, divers attributs des spécifications ARIA ont été pris en compte par KNACSS, notamment aria-busy, aria-controls, aria-disabled, aria-hidden.

reset-forms.scss

Des styles par défaut ajoutent une consistance sur les éléments classiques des formulaires :

button,
input,
select,
textarea {
  margin: 0;
  background-color: transparent;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  vertical-align: middle;
}

Par ailleurs, divers styles sont appliqués pour corriger certaines incohérences des navigateurs Chrome, Safari et Firefox.

reset-print.scss

Divers styles sont destinés à afficher correctement les pages lorsqu'elles sont imprimées. Ces styles corrigent principalement les couleurs de fond de page, de texte, de taille de police, ainsi que les sauts de page.

layout.scss

Deux classes ont été concoctées pour gérer l'affichage de deux types de conteneurs courants :

1) La classe .layout-maxed est destinée à être un conteneur global de page, avec les caractéristiques suivantes :

• Bloc de trois colonnes,
• La colonne centrale destinée au contenu, et dont la largeur s'adapte ux différents Breakpoints. Par exemple, la taille sera de 576px sur une fenêtre entre 576 pixels et 768 pixels (valeurs modifiables dans les variables),
• Les deux colonnes latérales sont destinées à centrer l'ensemble horizontalement dans la fenêtre, mais avec au minimum un espace de 1rem sur les côtés (valeur modifiable dans les variables).

<section class="layout-maxed">
  <div>Ici mon contenu</div>
</section>

2) La classe .layout-hero est prévue pour se comporter comme un bandeau dit "hero" ou "full bleed", avec les caractéristiques suivantes :

• Bloc qui occupe toute la largeur de la fenêtre,
• Le fond du bloc (couleur de fond ou image de fond) occupe également toute la largeur de fenêtre,
• Le contenu du bloc est centré horizontalement et s'adapte à la taille du parent .layout-maxed
• .layout-hero doit être enfant direct de .layout-maxed

<section class="layout-maxed">
  <div class="layout-hero">
    <div>Ici du contenu</div>
  </div>
</section>

Voir un exemple en ligne

breakpoints

Une liste de points de rupture (breakpoints) est présente dans le fichier variables-sass.scss. Cette liste sous forme de couple "clé:valeur" peut bien entendu être élargie.

$breakpoints : (
  sm: 576px,
  md: 992px,
  lg: 1330px
);

Conformément à la démarche "Mobile First", ces valeurs correspondent à des jalons minimum : sm: '576px' correspond au Media Query @media (min-width: 576px) {...}

Des variables "alias" sont également proposées si besoin. Par exemple, la variable $small prend la valeur exprimée dans sm. Les alias par défaut sont $small, $medium, $large.

À partir de cette liste de breakpoints sont construites toutes les classes utilitaires de KNACSS afin d'être totalement responsive.
les clés de breakpoints peuvent être employées comme préfixes pour cibler différentes tailles d'écran.
Quelques exemples :

• La classe .lg:hidden : cache un élément sur un écran large et au-delà.
• La classe .sm:grid : passe un élément en display: grid sur un écran small et au-delà.
• La classe .lg:mx-auto : centre un élément horizontalement sur un écran large et au-delà.
• La classe .lg:pt-16 : applique un padding-top de 1rem sur un écran large et au-delà (voir variables d'espacements).
• La classe .md:visually-hidden : masque un élément sur un écran moyen et au-delà (toujours lisible par une synthèse vocale).

classes utilitaires

Les classes utilitaires (ou atomiques) sont des classes destinées à contenir une seule déclaration CSS.
À chaque classe correspond une seule fonction, ce qui offre une complète séparation entre la structure HTML des données de présentation CSS.

Les classes utilitaires de KNACSS sont largement inspirées du framework Tailwindcss que nous apprécions tout particulièrement chez Alsacréations, mais qui peut se révéler quelque peu surchargé pour certains types de projets. Nous avons donc opté pour une "version allégée" dans KNACSS.

Pour en savoir plus sur notre démarche, voici une présentation sur les différentes méthodologies actuelles.

utilitaires d'espacement

Une liste de valeurs d'espacements (spacers) est présente dans le fichier variables-sass.scss. Cette liste sous forme de couple "clé:valeur" peut bien entendu être élargie.

$spacers: (
  "0": 0, // none
  "2": 0.125rem, // tiny
  "5": 0.313rem, // tiny-plus
  "8": 0.5rem, // small
  "10": 0.625rem, // small-plus
  "16": 1rem, // medium
  "20": 1.25rem, // medium-plus
  "24": 1.5rem, // large
  "36": 2.25rem, // large-plus
  "auto": auto,
) !default;

Des variables "alias" sont également proposées si besoin. Par exemple, la variable $spacer-small prend la valeur exprimée de 0.5rem. Les alias par défaut sont $spacer-none, $spacer-tiny, $spacer-tiny-plus, $spacer-small, $spacer-small-plus, $spacer-medium, $spacer-medium-plus, $spacer-large, $spacer-large-plus.

À partir de cette liste de valeurs d'espacements sont construites les classes utilitaires d'espacements de KNACSS.

Toutes les classes utilitaires de margin détaillées ci-dessous sont transposables pour les classes de padding.

marges externes (tous côtés)

Fonctionne avec m- (marges sur les 4 axes).

marges latérales et verticales

Fonctionne avec mx- (marges latérales), my- (marges verticales).

marges externes (un seul côté)

Fonctionne avec mt- (margin-top), mr- (margin-right), mb- (margin-bottom), ml- (margin-left).

classes responsive

Toutes les classes utilitaires de margin et padding sont prévues pour être Responsive, grâce aux préfixes sm: (small), md: (medium), lg: (large).

utilitaires de taille de police

Une liste de valeurs de tailles de police est présente dans le fichier variables-sass.scss. Cette liste sous forme de couple "clé:valeur" peut bien entendu être élargie.

$font-size: (
  "10": 0.625rem,
  "11": 0.6875rem,
  "12": 0.75rem,
  "14": 0.875rem,
  "16": 1rem,
  "18": 1.125rem,
  "20": 1.25rem,
  "24": 1.5rem,
  "30": 1.875rem,
  "36": 2.25rem,
  "base": 1rem,
  "inherit": inherit,
);

À partir de cette liste (à adapter selon vos projets), l'ensemble des classes utilitaires de polices est disponible (ex. `text-20` est un équivalent de "20 pixels", en réalité 1.25rem.

Toutes les classes utilitaires de polices sont prévues pour être Responsive, grâce aux préfixes sm: (small), md: (medium), lg: (large).

utilitaires globaux

Les classes utilitaires globales ont différentes actions : elles peuvent modifier la valeur de display, affecter le positionnement flexbox, aligner les éléments ou modifier l'ordre d'affichage par exemple.

Toutes les classes utilitaires globales sont prévues pour être Responsive, grâce aux préfixes sm: (small), md: (medium), lg: (large).

valeurs de display

propriétés de Flexbox

propriétés de Float

propriétés de texte

propriétés d'alignements

propriétés multiples

grillade

Grillade, est le système de grille de KNACSS bâti sur les spécifications CSS Grid Layout.
La version actuelle de Grillade est dorénavant très inspirée du framework Tailwindcss et tire parti de classes utilitaires pour créer les colonnes ainsi que les gouttières, y placer les éléments et modeler le gabarit en fonction des tailles d'écran.

Toutes les classes de Grillade sont prévues pour être Responsive, grâce aux préfixes sm: (small), md: (medium), lg: (large).

création des colonnes de grille

Ces classes sont à appliquer sur le parent de la grille (grid container). Pensez à lui appliquer au préalable une classe .grid (avec ou sans préfixes de breakpoint) pour que la grille soit activée.

Le nombre de colonnes prévu par défaut est indiqué par la variable $grid-columns: 6;.

grid-cols-3

Exemple de grille simple de 3 colonnes

<div class="grid grid-cols-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>
</div>

sm:grid sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6

Exemple de grille Responsive passant de 1 colonne à 2, puis 4, puis 6 selon la taille d'écran.

<div class="sm:grid sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-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>
</div>

appliquer des gouttières

Ces classes sont à appliquer sur le parent de la grille (grid container).

Le nombre de tailles disponibles pour les gouttières est indiqué par la variable de liste $spacers: (...);.

grid-cols-3 gap-1 sm:gap-3 lg:gap-5

Exemple de grille simple de 3 colonnes avec gouttières variables selon la taille d'écran.

<div class="grid grid-cols-3 gap-1 sm:gap-3 lg:gap-5">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
</div>

placer les éléments dans la grille

Ces classes sont à appliquer sur les enfants de la grille (grid item).

col-start-3

Exemple de placement dans la grille avec .col-start-*

<div class="grid grid-cols-3 gap-3">
    <div>1</div>
    <div class="col-start-3">2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
</div>

row-span-2

Exemple de fusion verticale dans la grille avec .row-span-*

<div class="grid grid-cols-3 gap-3">
    <div>1</div>
    <div class="row-span-2">2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
</div>

md:col-span-2 lg:col-span-full

Exemple de fusion horizontale variable selon les tailles d'écran.

<div class="grid grid-cols-3 gap-3">
    <div class="md:col-span-2 lg:col-span-full">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
</div>

composants

KNACSS se veut un framework "agnostique" et ne souhaite pas apporter de styles graphiques qu'il faudra finalement écraser dans vos projets.

Toutefois, nous avons souhaité donner du style à quelques composants choisis pour leurs design par défaut pauvre ou perfectible. Il s'agit des composants suivants :

• les cases à cocher (checkbox)
• les boutons "radio"
• le bouton de navigation dit "burger"
• les blocs de citation

Les sections suivantes détaillent les styles et la structure nécessaires pour ces composants.

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>

burger button

Un élément possédant la classe .burger-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="burger-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('.burger-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>

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>

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: (
  'small' : (max-width: #{$small - 1}),
  'medium' : (max-width: #{$medium - 1}),
  'large' : (max-width: #{$large - 1}),
  'extra-large' : (max-width: #{$extra-large - 1}),
  'small-up' : (min-width: #{$small}),
  'medium-up' : (min-width: #{$medium}),
  'large-up' : (min-width: #{$large}),
  'extra-large-up' : (min-width: #{$extra-large})
  );

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