- centré horizontalement et verticalement
-
-```
diff --git a/doc/02b-layout-positionnement.md b/doc/02b-layout-positionnement.md
deleted file mode 100644
index 4d9ff77..0000000
--- a/doc/02b-layout-positionnement.md
+++ /dev/null
@@ -1,139 +0,0 @@
-# Positionnements avec KNACSS
-
-Au-delà des alignements d'éléments, KNACSS permet de positionner et d'architecturer vos gabarits à travers plusieurs solutions.
-
-Dans cette page de documentation, nous étudierons en détail chaque cas concret auquel vous risquez d'être confronté et proposerons une réponse adaptée.
-
-## Différents choix offerts
-
-Les types de positionnements inclus nativement dans KNACSS sont les suivants :
-
-- positionnement flottant
-- positionnement avec `display: inline-block`
-- positionnement avec Flexbox
-
-Il n'y a pas de mystère : chaque type de positionnement est capable de répondre à différents types de contraintes. Il n'y a pas de meilleur choix qu'un autre.
-
-Votre décision pourra être guidée par les indices suivants :
-- il est généralement plus profitable de ne pas opter pour des positionnement hors-flux (`float`, `position: absolute`)
-- Flexbox est certainement le modèle le plus polyvalent et propre, il est compatible qu'à partir de IE10+.
-
-## Concrètement : je veux faire quoi ?
-
-### Deux blocs voisins de largeur fixe
-
-
-
-Les choix offerts avec KNACSS :
-
-#### flottant et flottant
-
-La classe `.fl` pour `float: left` permet à un élément d'être flottant à gauche.
-
-Il vous suffit de faire flotter vos deux éléments et de leur attribuer la largeur souhaitée pour qu'ils s'affichent l'un à côté de l'autre :
-
-HTML :
-```html
-... some elements ...
*/
+/* see https://codepen.io/raphaelgoetter/pen/zzwxEE */
+
+.autogrid,
+.grid {
+ @media (min-width: $tiny) {
+ display: grid;
+ grid-auto-flow: column;
+ grid-auto-column: 1fr;
+
+ // gutters
+ @if variable_exists(grid-gutters) {
+ $gutter: $grid-gutters !global;
+
+ } @else {
+ $gutter: ( '': 1rem, '-l': 2rem, '-xl': 4rem ) !global;
+ }
+ @each $affix, $size in $gutter {
+ &.has-gutter#{$affix} {
+ grid-column-gap: $size;
+ }
+ }
+ }
+}
diff --git a/sass/components/_badges.scss b/sass/components/_badges.scss
new file mode 100644
index 0000000..3562d89
--- /dev/null
+++ b/sass/components/_badges.scss
@@ -0,0 +1,50 @@
+/* ----------------------------- */
+/* ==Badges */
+/* ----------------------------- */
+/* use .badge-- classes for variants */
+
+.badge {
+ display: inline-block;
+ padding: $spacer-tiny;
+ border-radius: 50%;
+ color: $color-base;
+ background-color: $color-muted;
+ line-height: 1;
+
+ &::before {
+ content: "";
+ display: inline-block;
+ vertical-align: middle;
+ padding-top: 100%;
+ }
+}
+
+.badge {
+ @each $name, $background-color, $color, $border in $variants-list {
+ &--#{$name} {
+ @extend .badge;
+ background-color: $background-color;
+ color: $color;
+ }
+ }
+}
+
+// badge state variants
+.badge {
+ &--small {
+ font-size: $font-size-base - 0.4rem;
+ }
+
+ &--big {
+ font-size: $font-size-base + 0.4rem;
+ }
+
+ &.disabled,
+ &--disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ }
+ &:empty {
+ display: none;
+ }
+}
diff --git a/sass/components/_buttons.scss b/sass/components/_buttons.scss
new file mode 100644
index 0000000..e79ba3d
--- /dev/null
+++ b/sass/components/_buttons.scss
@@ -0,0 +1,157 @@
+/* ----------------------------- */
+/* ==Buttons */
+/* ----------------------------- */
+/* preferably use