scss/definitions: move utils to the definition file

css/style.css

@@ -1,3 +1,22 @@
+/*
+ *  1 - Definitions
+ *  
+ *  This part of the (s)css contain every definitions, mixins,
+ *  and differents unilities that can be used everywhere in the code.
+ *
+*/
+.no-pills {
+  list-style: none; }
+
+.align-center {
+  text-align: center; }
+
+.align-left {
+  text-align: left; }
+
+.align-right {
+  text-align: right; }
+
 /* ------------------ FONT LOADING ------------------- */
 @font-face {
   font-family: 'OpenSans';
@@ -256,22 +275,81 @@ mark {
   width: 100%;
   display: block; }
 
-/* ------------------ GLOBAL STYLE ------------------- */
+/*
-.no-pills {
+ *  3 - Global elements ( _global.scss )
-  list-style: none; }
+ *  
+ *  This part of the (s)css handle the style of "global" elements
+ *  like the wrapper, the navbars, the header.
+ *
+*/
+body {
+  background: #666 url("../img/background.png");
+  padding: 30px;
+  background-attachment: fixed; }
 
-.align-center {
+@media (max-width: 767.98px) {
+  body {
+    background: none;
+    padding: 0; } }
+
+#wrapper {
+  background-color: #FFF; }
+
+/*  1.1 - Header */
+header {
+  background: #EEE url("../img/background.png");
+  margin-bottom: 30px; }
+  header h1 {
+    border-style: none !important;
+    font-weight: 700;
+    font-size: 1em;
+    line-height: 1em;
+    padding-bottom: 0px;
+    padding: 2.33333em;
+    margin: auto;
     text-align: center; }
+    header h1 img {
+      max-width: 100%;
+      height: auto; }
 
-.align-left {
+.navbar {
-  text-align: left; }
+  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0);
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  border-left: 0;
+  border-right: 0; }
+  .navbar ul {
+    padding-bottom: 0; }
+  .navbar li {
+    margin: 0; }
 
-.align-right {
+.dropdown-menu {
-  text-align: right; }
+  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0.2); }
 
-h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 {
+/*  1.2 - Footer */
-  color: white;
+footer {
-  text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.4); }
+  margin-top: 40px; }
+
+/* 1.2.1 - Social Network Buttons */
+ul.social {
+  font-size: 1.5em;
+  padding-bottom: 1em;
+  margin: auto;
+  text-align: center; }
+  ul.social li {
+    margin: 0;
+    list-style: none;
+    display: inline; }
+    ul.social li a {
+      color: #FFFFFF;
+      background-color: #000000;
+      padding: 0.3em;
+      padding-left: 0.36em;
+      padding-right: 0.36em;
+      vertical-align: middle;
+      border-radius: 100%; }
+      ul.social li a:hover {
+        color: #000;
+        background-color: #FFF; }
 
 /* ------------------ CARDS ------------------- */
 .card {
@@ -532,82 +610,6 @@ a.list-group-item:hover {
   margin-bottom: 0.4em;
   display: block; }
 
-/*
- *  1 - Global elements ( _global.scss )
- *  
- *  This part of the (s)css handle the style of "global" elements
- *  like the wrapper, the navbars, the header.
- *
-*/
-body {
-  background: #666 url("../img/background.png");
-  padding: 30px;
-  background-attachment: fixed; }
-
-@media (max-width: 767.98px) {
-  body {
-    background: none;
-    padding: 0; } }
-
-#wrapper {
-  background-color: #FFF; }
-
-/*  1.1 - Header */
-header {
-  background: #EEE url("../img/background.png");
-  margin-bottom: 30px; }
-  header h1 {
-    border-style: none !important;
-    font-weight: 700;
-    font-size: 1em;
-    line-height: 1em;
-    padding-bottom: 0px;
-    padding: 2.33333em;
-    margin: auto;
-    text-align: center; }
-    header h1 img {
-      max-width: 100%;
-      height: auto; }
-
-.navbar {
-  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0);
-  border: 1px solid rgba(0, 0, 0, 0.3);
-  border-left: 0;
-  border-right: 0; }
-  .navbar ul {
-    padding-bottom: 0; }
-  .navbar li {
-    margin: 0; }
-
-.dropdown-menu {
-  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0.2); }
-
-/*  1.2 - Footer */
-footer {
-  margin-top: 40px; }
-
-/* 1.2.1 - Social Network Buttons */
-ul.social {
-  font-size: 1.5em;
-  padding-bottom: 1em;
-  margin: auto;
-  text-align: center; }
-  ul.social li {
-    margin: 0;
-    list-style: none;
-    display: inline; }
-    ul.social li a {
-      color: #FFFFFF;
-      background-color: #000000;
-      padding: 0.3em;
-      padding-left: 0.36em;
-      padding-right: 0.36em;
-      vertical-align: middle;
-      border-radius: 100%; }
-      ul.social li a:hover {
-        color: #000;
-        background-color: #FFF; }
-
 /* ------------------ COULEURS ------------------- */
 a, a:hover, a:active {
   color: #4e63c9; }

scss/_commons.scss

@@ -1,27 +1,3 @@
-/* ------------------ GLOBAL STYLE ------------------- */
-
-@mixin li-no-margin() {
-  li {
-    margin: 0;
-  }
-}
-
-.no-pills {
-	list-style:none;
-}
-
-.align {
-  &-center {text-align: center;}
-  &-left {text-align: left;}
-  &-right {text-align: right;}
-}
-
-h1, h2, h3, h4, h5, h6, h7, h8, h9, h10  {
-	color:white;
-	text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.4);
-}
-
-
 /* ------------------ CARDS ------------------- */
 
 .card {

scss/_definitions.scss

@@ -1,7 +1,10 @@
-// Definitions
+/*
-//
+ *  1 - Definitions
-// This file contain style that we can easily edit to modify customizable elements
+ *  
-// like colors, etc.
+ *  This part of the (s)css contain every definitions, mixins,
+ *  and differents unilities that can be used everywhere in the code.
+ *
+*/
 
 
 $large-shadow: 0px 2px 10px rgba(0, 0, 0, 0);
@@ -26,3 +29,19 @@ $color-mark: $color-yellow;
 @mixin border-radius() {
   border-radius: $border-radius $border-radius $border-radius $border-radius;
 }
+
+@mixin li-no-margin() {
+  li {
+    margin: 0;
+  }
+}
+
+.no-pills {
+	list-style:none;
+}
+
+.align {
+  &-center {text-align: center;}
+  &-left {text-align: left;}
+  &-right {text-align: right;}
+}

scss/_global.scss

@@ -1,5 +1,5 @@
 /*
- *  1 - Global elements ( _global.scss )
+ *  3 - Global elements ( _global.scss )
  *  
  *  This part of the (s)css handle the style of "global" elements
  *  like the wrapper, the navbars, the header.

scss/style.scss

@@ -11,10 +11,10 @@
 
 @import 'typography';
 
-@import 'commons';
-
 @import 'global';
 
+@import 'commons';
+
 @import 'colorize';
 
 @import 'overrides';