chore: split utility classes

src/scss/_drawing.scss

@@ -13,17 +13,6 @@
 
 @import 'components/previews';
 
-.flex-that {
-  display: flex;
-  justify-content: space-between;
-}
-
-.bg {
-    @each $name, $color in list-colors() {
-        &-#{$name} { @include background-color(get-color($name)); }
-    }
-}
-
 strong.btn-fake {
   @include button($button_large);
   @include button-fullcontrol(transparent, transparent, rgba(0,0,0,1));
@@ -43,15 +32,10 @@ a.article-nav-link-wrap {
     @include button-color($color-info);
 }
 
-.pigimg, .mb {
+.pigimg {
   padding-bottom:1.5rem;
 }
 
-.screen-reader-text {
-  visibility: collapse;
-  font-size:0;
-}
-
 nav.pagination {
   padding-bottom:1.5rem;
   .nav-links {

src/scss/_global.scss

@@ -21,16 +21,6 @@ $color-header-back: get-color("skyblue");
     margin:auto;
 }
 
-.no-pills {
-    list-style:none;
-}
-
-.align {
-    &-center {text-align: center;}
-    &-left {text-align: left;}
-    &-right {text-align: right;}
-}
-
   /* ------------------ HEADERS ------------------- */
 
 #page-header {

src/scss/_utils.scss

@@ -0,0 +1,3 @@
+/* 1. Utils
+** All the utilities class of the stylesheet
+*/

src/scss/style.scss

@@ -21,6 +21,8 @@
 
 @import 'core';
 
+@import 'utils';
+
 @import 'global';
 
 @import 'drawing';

src/scss/utils/_a11y.scss

@@ -0,0 +1,8 @@
+/* 1.0 - Accessibility classes
+ * Some classes to help accessibility
+**/
+
+.screen-reader-text {
+  visibility: collapse;
+  font-size:0;
+}

src/scss/utils/_align.scss

@@ -0,0 +1,14 @@
+/* 1.1 - Alignement classes
+ * Handle easily alignement and flexboxes
+**/
+
+.flex-that {
+  display: flex;
+  justify-content: space-between;
+}
+
+.align {
+    &-center {text-align: center;}
+    &-left {text-align: left;}
+    &-right {text-align: right;}
+}

src/scss/utils/_colorize.scss

@@ -0,0 +1,9 @@
+/* 1.2 - Colorization classes
+ * Colorize some aspect of a class
+**/
+
+.bg {
+    @each $name, $color in list-colors() {
+        &-#{$name} { @include background-color(get-color($name)); }
+    }
+}

src/scss/utils/_lists.scss

@@ -0,0 +1,7 @@
+/* 1.3 - List classes
+ * Handle more easily list
+**/
+
+.no-pills {
+    list-style:none;
+}

src/scss/utils/_sizing.scss

@@ -0,0 +1,35 @@
+/* 1.3 - Sizing classes
+ * Handle sizing and margin
+**/
+
+.mb {
+  margin-bottom:$lineheight;
+}
+
+.mr {
+  margin-right:$lineheight;
+}
+
+.ml {
+  margin-left:$lineheight;
+}
+
+.mt {
+  margin-top:$lineheight;
+}
+
+.pb {
+  padding-bottom:$lineheight;
+}
+
+.pr {
+  padding-right:$lineheight;
+}
+
+.pl {
+  padding-left:$lineheight;
+}
+
+.pt {
+  padding-top:$lineheight;
+}