>>> continue

src/Gargantext/Components/Bootstrap/Bootstrap.purs

@@ -7,6 +7,7 @@ import Gargantext.Components.Bootstrap.Button(button) as Exports
 import Gargantext.Components.Bootstrap.Caveat(caveat) as Exports
 import Gargantext.Components.Bootstrap.Cloak (cloak) as Exports
 import Gargantext.Components.Bootstrap.Fieldset(fieldset) as Exports
+import Gargantext.Components.Bootstrap.Fluff(fluff, fluff', fluff_) as Exports
 import Gargantext.Components.Bootstrap.FormInput(formInput) as Exports
 import Gargantext.Components.Bootstrap.FormSelect(formSelect, formSelect') as Exports
 import Gargantext.Components.Bootstrap.FormTextarea(formTextarea) as Exports

src/Gargantext/Components/Bootstrap/Inline/Fluff.purs

+module Gargantext.Components.Bootstrap.Fluff
+  ( fluff
+  , fluff'
+  , fluff_
+  ) where
+
+import Gargantext.Prelude
+
+import Data.Foldable (intercalate)
+import Reactix as R
+import Reactix.DOM.HTML as H
+
+componentName :: String
+componentName = "b-fluff"
+
+-- | Structural Component for a simple Element only serving the purpose to add
+-- | some classes in it
+-- |
+-- | Hence the name: Fluff (uncountable noun): Consists of soft threads or
+-- | fibres in the  form of small, light balls or lump [or a set of utility
+-- | classes...]
+fluff :: Array String -> Array R.Element -> R.Element
+fluff classes children = R.createDOMElement "span" cls children
+  where
+    cls = { className: intercalate " " $
+              [ componentName
+              ] <> classes
+          }
+
+-- | Shorthand for using <fluff> Component without writing its text node
+fluff' :: Array String -> String -> R.Element
+fluff' classes text = R.createDOMElement "span" cls chd
+  where
+    cls = { className: intercalate " " $
+              [ componentName
+              ] <> classes
+          }
+
+    chd = [ H.text text ]
+
+-- | Shorthand for using <fluff> Component without any child
+fluff_ :: Array String -> R.Element
+fluff_ classes = R.createDOMElement "span" cls []
+  where
+    cls = { className: intercalate " " $
+              [ componentName
+              ] <> classes
+          }

src/Gargantext/Components/Forest.purs

@@ -16,7 +16,6 @@ import Gargantext.Ends (Frontends)
 import Gargantext.Hooks.LinkHandler (useLinkHandler)
 import Gargantext.Routes (AppRoute(..))
 import Gargantext.Sessions (Session(..), unSessions)
-import Gargantext.Utils (nbsp)
 import Gargantext.Utils.Reactix as R2
 import Reactix as R
 import Reactix.DOM.HTML as H
@@ -132,9 +131,10 @@ plusCpt = here.component "plus" cpt where
             , variant: ButtonVariant Light
             }
             [
-              B.icon { name: "universal-access" }
+              B.icon
+              { name: "universal-access" }
             ,
-              H.text $ nbsp 1
+              B.fluff_ [ "d-inline-block", "w-1" ]
             ,
               H.text $ "Log in/out"
             ]
@@ -150,7 +150,7 @@ forestLayout :: R2.Leaf Props
 forestLayout = R2.leaf forestLayoutCpt
 forestLayoutCpt :: R.Memo Props
 forestLayoutCpt = R.memo' $ here.component "forestLayout" cpt where
-  cpt p children = pure $
+  cpt p _ = pure $
 
     H.div
     { className: "forest-layout" }

src/Gargantext/Components/GraphExplorer/Controls.purs

@@ -256,7 +256,7 @@ controlsCpt = here.component "controls" cpt
           }
           [
             H.div
-            { className: "d-flex justify-content-between _mb-3" }
+            { className: "d-flex justify-content-between mb-3" }
             [
               edgeConfluenceControl
               { range: edgeConfluenceRange

src/Gargantext/Components/GraphExplorer/Sidebar.purs

@@ -402,12 +402,9 @@ neighborhoodCpt = R.memo' $ here.component "neighborhood" cpt where
           H.div
           { className: "graph-neighborhood__counter" }
           [
-            -- @WIP utility classes component
-            H.span
-            { className: "text-info" }
-            [
-              H.text $ show termCount
-            ]
+            B.fluff'
+            [ "text-info" ] $
+            show termCount
           ,
             H.text $ nbsp 1 <> "terms"
           ]
@@ -670,14 +667,13 @@ documentation _ =
     H.div
     { className: "graph-documentation" }
     [
-      -- @WIP: shortcuts
       H.div
       { className: "graph-documentation__text-section" }
       [
         H.p
         {}
         [
-          H.b {} [ H.text "What is a graph? "]
+          B.b_ "What is a graph? "
         ,
           H.text "Graph is a conveniant tool to explore your documents."
         ]

src/Gargantext/Components/GraphExplorer/TopBar.purs

@@ -2,7 +2,7 @@ module Gargantext.Components.GraphExplorer.TopBar (topBar) where
 
 import Gargantext.Prelude hiding (max, min)
 
-import Data.Maybe (Maybe(..))
+import Data.Maybe (Maybe)
 import Gargantext.Components.Bootstrap as B
 import Gargantext.Components.Bootstrap.Types (ButtonVariant(..), Variant(..))
 import Gargantext.Components.GraphExplorer.Search (nodeSearchControl)
@@ -74,10 +74,8 @@ component = here.component "topBar" cpt where
         ]
       ,
         -- Search
-        -- @WIP: R2.fromMaybe_
-        case mGraph' of
-          Nothing    -> mempty
-          Just graph ->
+        R2.fromMaybe_ mGraph' \graph ->
+
           nodeSearchControl
           { graph
           , multiSelectEnabled

src/Gargantext/Components/Nodes/Corpus/Phylo.purs

@@ -5,19 +5,20 @@ module Gargantext.Components.Nodes.Corpus.Phylo
 import Gargantext.Prelude
 
 import DOM.Simple (document, querySelector)
-import Data.Maybe (Maybe(..))
-import FFI.Simple ((..), (.=))
+import Data.Maybe (Maybe(..), isJust)
+import Data.Tuple.Nested ((/\))
 import Gargantext.Components.App.Data (Boxes)
+import Gargantext.Components.Bootstrap as B
 import Gargantext.Components.PhyloExplorer.API (get)
 import Gargantext.Components.PhyloExplorer.Layout (layout)
 import Gargantext.Components.PhyloExplorer.Types (PhyloDataSet)
 import Gargantext.Config.REST (logRESTError)
-import Gargantext.Hooks.FirstEffect (useFirstEffect')
-import Gargantext.Hooks.Loader (useLoader)
+import Gargantext.Hooks.Loader (useLoaderEffect)
 import Gargantext.Sessions (Session)
 import Gargantext.Types (NodeID)
 import Gargantext.Utils.Reactix as R2
 import Reactix as R
+import Reactix.DOM.HTML as H
 
 type MainProps =
   ( nodeId      :: NodeID
@@ -35,60 +36,93 @@ phyloLayoutCpt :: R.Component MainProps
 phyloLayoutCpt = here.component "main" cpt where
   cpt { nodeId, session } _ = do
 
+    -- | States
+    -- |
+
+    state' /\ state <- R2.useBox' Nothing
+
+
+    -- | Computed
+    -- |
     let
 
       errorHandler = logRESTError here "[phylo]"
 
-      handler (dataset :: PhyloDataSet) =
-        content
+      handler (phyloDataSet :: PhyloDataSet) =
+        layout
         { nodeId
-        , dataset
+        , phyloDataSet
         }
 
-    useLoader
+
+    -- | Hooks
+    -- |
+
+    useLoaderEffect
       { errorHandler
       , loader: get session
       , path: nodeId
-      , render: handler
+      , state
       }
 
+    -- @XXX: Runtime odd behavior
+    --       cannot use the `useEffect` + its cleanup function within the
+    --       same `Effect`, otherwise the below cleanup example will be
+    --       execute at mount
 
---------------------------------------------------------
-
-type ContentProps =
-  ( nodeId      :: NodeID
-  , dataset     :: PhyloDataSet
-  )
-
-content :: R2.Leaf ContentProps
-content = R2.leaf contentCpt
+    -- @XXX: inopinent <div> (see Gargantext.Components.Router) (@TODO?)
+    R.useEffectOnce' do
+      mEl <- querySelector document ".main-page__main-route .container"
 
-contentCpt :: R.Component ContentProps
-contentCpt = here.component "content" cpt where
-  cpt { nodeId, dataset } _ = do
-  -- Hooks
+      case mEl of
+        Nothing -> R.nothing
+        Just el -> R2.addClass el [ "d-none" ]
 
-    useFirstEffect' do
-      -- @XXX: inopinent <div> (see Gargantext.Components.Router) (@TODO?)
+    R.useEffectOnce do
+      pure do
         mEl <- querySelector document ".main-page__main-route .container"
+
         case mEl of
-        Nothing -> pure unit
-        Just el -> do
-          style <- pure $ (el .. "style")
-          pure $ (style .= "display") "none"
+          Nothing -> R.nothing
+          Just el -> R2.removeClass el [ "d-none" ]
+
     -- @XXX: reset "main-page__main-route" wrapper margin
     --       see Gargantext.Components.Router) (@TODO?)
-      mEl' <- querySelector document ".main-page__main-route"
-      case mEl' of
-        Nothing -> pure unit
-        Just el -> do
-          style <- pure $ (el .. "style")
-          pure $ (style .= "padding") "initial"
-
-  -- Render
+    R.useEffectOnce' do
+      mEl <- querySelector document ".main-page__main-route"
+
+      case mEl of
+        Nothing -> R.nothing
+        Just el -> R2.addClass el [ "p-0--i" ]
+
+    R.useEffectOnce do
+      pure do
+        mEl <- querySelector document ".main-page__main-route"
+
+        case mEl of
+          Nothing -> R.nothing
+          Just el -> R2.removeClass el [ "p-0--i" ]
+
+
+    -- | Render
+    -- |
     pure $
 
-      layout
-      { nodeId
-      , phyloDataSet: dataset
+      B.cloak
+      { isDisplayed: isJust state'
+      , idlingPhaseDuration: Just 150
+      , cloakSlot:
+          -- mimicking `PhyloExplorer.layout` preloading template
+          H.div
+          { className: "phylo" }
+          [
+            H.div
+            { className: "phylo__spinner-wrapper" }
+            [
+              B.spinner
+              { className: "phylo__spinner" }
+            ]
+          ]
+      , defaultSlot:
+          R2.fromMaybe_ state' handler
       }

src/Gargantext/Components/Nodes/Graph.purs

@@ -5,17 +5,15 @@ module Gargantext.Components.Nodes.Corpus.Graph
 import Gargantext.Prelude
 
 import DOM.Simple (document, querySelector)
-import Data.Maybe (Maybe(..))
+import Data.Maybe (Maybe(..), isJust)
 import Data.Set as Set
 import Data.Tuple (Tuple(..))
 import Data.Tuple.Nested ((/\))
-import FFI.Simple ((..), (.=))
 import Gargantext.Components.App.Data (Boxes)
 import Gargantext.Components.Bootstrap as B
 import Gargantext.Components.GraphExplorer.Layout (convert, layout)
 import Gargantext.Components.GraphExplorer.Types as GET
 import Gargantext.Config.REST (AffRESTError, logRESTError)
-import Gargantext.Hooks.FirstEffect (useFirstEffect')
 import Gargantext.Hooks.Loader (useLoaderEffect)
 import Gargantext.Hooks.Sigmax.Types as SigmaxT
 import Gargantext.Routes (SessionRoute(NodeAPI))
@@ -62,45 +60,61 @@ graphLayoutCpt = here.component "explorerLayout" cpt where
       , state
       }
 
-    useFirstEffect' do
+    -- @XXX: Runtime odd behavior
+    --       cannot use the `useEffect` + its cleanup function within the
+    --       same `Effect`, otherwise the below cleanup example will be
+    --       execute at mount
+
     -- @XXX: inopinent <div> (see Gargantext.Components.Router) (@TODO?)
+    R.useEffectOnce' do
       mEl <- querySelector document ".main-page__main-route .container"
+
       case mEl of
-        Nothing -> pure unit
-        Just el -> do
-          style <- pure $ (el .. "style")
-          pure $ (style .= "display") "none"
+        Nothing -> R.nothing
+        Just el -> R2.addClass el [ "d-none" ]
+
+    R.useEffectOnce do
+      pure do
+        mEl <- querySelector document ".main-page__main-route .container"
+
+        case mEl of
+          Nothing -> R.nothing
+          Just el -> R2.removeClass el [ "d-none" ]
+
     -- @XXX: reset "main-page__main-route" wrapper margin
     --       see Gargantext.Components.Router) (@TODO?)
-      mEl' <- querySelector document ".main-page__main-route"
-      case mEl' of
-        Nothing -> pure unit
-        Just el -> do
-          style <- pure $ (el .. "style")
-          pure $ (style .= "padding") "initial"
+    R.useEffectOnce' do
+      mEl <- querySelector document ".main-page__main-route"
+
+      case mEl of
+        Nothing -> R.nothing
+        Just el -> R2.addClass el [ "p-0--i" ]
 
+    R.useEffectOnce do
+      pure do
+        mEl <- querySelector document ".main-page__main-route"
+
+        case mEl of
+          Nothing -> R.nothing
+          Just el -> R2.removeClass el [ "p-0--i" ]
 
     -- | Render
     -- |
-
-    -- @WIP: cloak & R2.fromMaybe_
     pure $
 
-      R.fragment
-      [
-        case state' of
-
-          Nothing ->
+      B.cloak
+      { isDisplayed: isJust state'
+      , idlingPhaseDuration: Just 150
+      , cloakSlot:
           H.div
           { className: "graph-loader" }
           [
             B.spinner
             { className: "graph-loader__spinner" }
           ]
-
-          Just s ->
-            handler s
-      ]
+      , defaultSlot:
+          R2.fromMaybe_ state' handler
+      }
 
     where
       errorHandler = logRESTError here "[explorerLayout]"

src/Gargantext/Hooks/FirstEffect.purs

@@ -10,6 +10,8 @@ import Reactix (nothing, thenNothing)
 import Reactix as R
 
 -- | Hook triggered on first mount event only
+-- |
+-- | /!\ @TODO cleanup function not working
 useFirstMount :: R.Hooks (Boolean)
 useFirstMount = do
   firstMount <- R.useRef true

src/sass/_base.sass

+@import "./base/_reset.scss"
+@import "./base/_general.scss"
 @import "./base/_form.scss"
 @import "./base/_layout.scss"
 @import "./base/_nav.scss"

src/sass/_legacy/_graph.sass

@@ -4,7 +4,6 @@ $layout-height: calc(100vh - #{ $topbar-height} )
 
 /////////////////////////////////////////////
 
-// @WIP
 .graph-loader
   width: 100%
   height: 100%
@@ -20,7 +19,7 @@ $layout-height: calc(100vh - #{ $topbar-height} )
     // (?) `centered` mixin will not work here, due to Bootstrap process
     //     interfering with the transform rule
     top: calc( 50% - #{ $size / 2 } )
-    left: calc( 50% + #{ $size / 2 } )
+    left: calc( 50% - #{ $size / 2 } )
 
 
 /////////////////////////////////////////////
@@ -86,7 +85,7 @@ $layout-height: calc(100vh - #{ $topbar-height} )
 /////////////////////////////////////////////
 
 .graph-sidebar
-  @extend %sidebar
+  @include sidebar
 
   $margin-x: $sidebar-tab-margin-x
   $margin-y: space-x(2)
@@ -133,13 +132,9 @@ $layout-height: calc(100vh - #{ $topbar-height} )
     font-size: 15px
     line-height: 1.5
 
-    // @WIP: remove "_reboot.scss"
     p
       margin-bottom: space-x(1)
 
-    ul
-      margin-bottom: revert
-
     li
       list-style-type: circle
       padding-left: space-x(0.5)
@@ -180,8 +175,6 @@ $layout-height: calc(100vh - #{ $topbar-height} )
   &__badge
     white-space: normal
     word-break: break-word
-    // remove "_reboot.scss" line height
-    line-height: initial
 
     &:not(:last-child)
       margin-bottom: space-x(0.75)
@@ -233,11 +226,7 @@ $layout-height: calc(100vh - #{ $topbar-height} )
         flex-basis: calc(50% - #{ $item-margin * 2 })
 
 
-
-/////////////////////////////////////////////////////
-
 // Atlas button animation
-// @WIP: better management ("_animation.scss", etc)
 .on-running-animation .b-icon
   animation-name: pulse
   animation-duration: 0.5s
@@ -245,10 +234,3 @@ $layout-height: calc(100vh - #{ $topbar-height} )
   animation-direction: alternate
   animation-iteration-count: infinite
   animation-play-state: running
-
-@keyframes pulse
-  from
-    transform: scale(1)
-
-  to
-    transform: scale(1.1)

src/sass/_legacy/_menu.sass

@@ -9,6 +9,11 @@
   &__tree-switcher
     margin-right: space-x(1)
 
+  &__tree-switcher
+    $fixed-width: 136px
+
+    width: $fixed-width
+
   // add hovering effect
   &.navbar-dark .navbar-text:hover
     color: $navbar-dark-hover-color

src/sass/_legacy/_phylo.scss

@@ -494,7 +494,7 @@ $decreasing-color: #11638F;
 ////////////////////////////////////////////////////////////////
 
 .phylo-sidebar {
-  @extend %sidebar;
+  @include sidebar;
 }
 
 .phylo-details-tab {
@@ -548,7 +548,6 @@ $decreasing-color: #11638F;
     &__item {
       white-space: normal;
       word-break: break-word;
-      // remove "_reboot.scss" line height
       line-height: initial;
 
       &:not(:last-child) {

src/sass/_legacy/_tree.sass

@@ -168,11 +168,6 @@ $leaf-margin-bottom: 3px
     @include left-handed
       margin-left: space-x(1)
 
-    // @TODO: handle default <a> color (override "_reboot.scss" rules or
-    //        whole file?)
-    a
-      color: $body-color
-
     // preparing "before" content (see "&--selected", "&--file-dropped")
     &::before
       // margin for the before background

src/sass/abstract/_variables.scss

+@use 'sass:map';
+
 /// Global spacing value
 $space-unit: 8px;
 
-/// Misc
-$overlay-radius: 5px;
+// Bootstrap color system
+// * with added shades of gray
+$white:    #FFFFFF;
+$gray-100: #F8F9FA;
+$gray-150: #FAFAFA; // (+)
+$gray-175: #F0F0F0; // (+)
+$gray-200: #E9ECEF;
+$gray-300: #DEE2E6;
+$gray-400: #CED4DA;
+$gray-500: #ADB5BD;
+$gray-600: #6C757D;
+$gray-700: #495057;
+$gray-800: #343A40;
+$gray-900: #212529;
+$black:    #000000;
+
 
 /// Z-Index Management
 /// @link https://medium.com/alistapart/sassier-z-index-management-for-complex-layouts-4540717a9488

src/sass/base/_animations.scss

@@ -46,3 +46,7 @@
   from { transform: rotate(0deg); }
   to   { transform: rotate(360deg); }
 }
+@keyframes pulse {
+  from { transform: scale(1);   }
+  to   { transform: scale(1.1); }
+}

src/sass/base/_form.scss

@@ -12,7 +12,6 @@
 
     label {
       font-weight: 600;
-      margin-bottom: initial; // reset Bootstrap "_reboot.scss"
     }
 
     &--sub {

src/sass/base/_general.scss

+/// Opinionated box-sizing
+/// @link https://www.paulirish.com/2012/box-sizing-border-box-ftw/
+html {
+  box-sizing: border-box;
+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+/// Make images easier to work with
+/// @link https://hankchizljaw.com/wrote/a-modern-css-reset/
+img {
+  max-width: 100%;
+  display: block;
+}
+
+/// Remove hyperlink very first interaction (not including in "_reset.scss"
+/// as this interaction came as an intricated-native feature)
+// a:focus,a:visited,a:active{
+  // outline: none;
+// }

src/sass/base/_range_slider.sass

 // Colors based on Chromium engine
 // (every browser renders its input range on its own, here we are trying
 // to add some consistency)
-$range-bg-color: #EFEFEF
-$range-border-color: #B2B2B2
-$range-bg-progress-color: #0075FF
+$range-bg-color: $gray-175
+$range-border-color: $gray-400
+$range-bg-progress-color: $secondary
 $range-height: 8px
 $range-radius: 3px
 $knob-size: 14px
@@ -98,9 +98,6 @@ $knob-size: 14px
     font-size: 14px
     color: $gray-700
 
-    // @TODO: override "_reboot.scss"
-    margin-bottom: revert
-
   &__field
     position: relative
 
@@ -124,6 +121,9 @@ input[type=range]
 //       one → set only background range
 //     * unable to position the input ideally → have to rely on
 //       absolute + position
+input[type=range]
+  -webkit-appearance: none
+
 input[type=range]::-webkit-slider-runnable-track
   $chromium-offset-y: 4px
 
@@ -136,9 +136,16 @@ input[type=range]::-webkit-slider-runnable-track
   top: $chromium-offset-y
 
 input[type=range]::-webkit-slider-thumb
-  $chromium-offset-y: -5px
+  $chromium-offset-y: -4px
 
-  transform: translateY(-5px)
+  -webkit-appearance: none
+  transform: translateY($chromium-offset-y)
+  border: none
+  height: $knob-size
+  width: $knob-size
+  border-radius: 50%
+  background-color: $range-bg-progress-color
+  box-shadow: 0 0 1px 0 $range-bg-progress-color
 
 // Styling FireFox input range, mimicking Chromium one
 //

src/sass/base/_reset.scss

+// Most simple reset ever found
+// @link https://meiert.com/en/blog/stop-using-resets/#comment-240548
+html{
+  box-sizing: border-box;
+  height: 100%
+}
+
+*,
+:after,
+:before{
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  box-sizing: inherit
+}
+
+::-moz-focus-inner{
+  border: 0;
+}
+
+body{
+  position:relative;
+}
+
+a{
+  text-decoration: none;
+  color: inherit
+}
+
+a:focus{
+  outline: 0;
+}
+
+ul{
+  list-style:none;
+}

src/sass/base/_typography.scss

@@ -2,3 +2,36 @@
 h4, h5, h6 {
   font-weight: bold;
 }
+
+/// #"_hover.scss"
+a:hover {
+  color: inherit;
+}
+
+/// from "_reboot.scss"
+body {
+  margin: 0;
+  font-family: $font-family-base;
+  @include font-size($font-size-base);
+  font-weight: $font-weight-base;
+  line-height: $line-height-base;
+  color: $body-color;
+  text-align: left;
+  background-color: $body-bg;
+}
+
+/// from "_reboot.scss"
+pre,
+code,
+kbd,
+samp {
+  font-family: $font-family-monospace;
+}
+
+/// For this project: underline every links
+/// (legacy choice)
+a:hover,
+a:active,
+a:focus {
+  text-decoration: underline;
+}

src/sass/base/_utilities.scss

-// @XXX: Bootstrap "_spacing.scss" `!important` precedence...
-//       (simple workaround is to add an extra `_` suffix)
-// @TODO: NOT importing Bootstrap "_spacing.scss")
-._m-0 { margin:0; }
-._m-1 { margin:space-x(1); }
-._m-2 { margin:space-x(2); }
-._m-3 { margin:space-x(3); }
-._m-4 { margin:space-x(4); }
-._m-5 { margin:space-x(5); }
-
-._mt-0 { margin-top:0; }
-._mr-0 { margin-right:0; }
-._mb-0 { margin-bottom:0; }
-._ml-0 { margin-left:0; }
-._mx-0 { margin-left:0 ;margin-right:0 ; }
-._my-0 { margin-top:0;margin-bottom:0; }
-
-._mt-1 { margin-top:space-x(1); }
-._mr-1 { margin-right:space-x(1); }
-._mb-1 { margin-bottom:space-x(1); }
-._ml-1 { margin-left:space-x(1); }
-._mx-1 { margin-left:space-x(1);margin-right:space-x(1); }
-._my-1 { margin-top:space-x(1);margin-bottom:space-x(1); }
-
-._mt-2 { margin-top:space-x(2); }
-._mr-2 { margin-right:space-x(2); }
-._mb-2 { margin-bottom:space-x(2); }
-._ml-2 { margin-left:space-x(2); }
-._mx-2 { margin-right:space-x(2);margin-left:space-x(2); }
-._my-2 { margin-top:space-x(2);margin-bottom:space-x(2); }
-
-._mt-3 { margin-top:space-x(3); }
-._mr-3 { margin-right:space-x(3); }
-._mb-3 { margin-bottom:space-x(3); }
-._ml-3 { margin-left:space-x(3); }
-._mx-3 { margin-right:space-x(3);margin-left:space-x(3); }
-._my-3 { margin-bottom:space-x(3);margin-top:space-x(3); }
+// Width
+.w-0 { width: 0; }
+.w-1 { width: space-x(1); }
+.w-2 { width: space-x(2); }
+.w-3 { width:space-x(3); }
+.w-4 { width:space-x(4); }
+.w-5 { width:space-x(5); }
+
+.w-auto     { width: auto; }
+.w-fluid    { width: 100%; }
+.w-inherit  { width: inherit; }
+
+// Height
+.h-0 { height: 0; }
+.h-1 { height: space-x(1); }
+.h-2 { height: space-x(2); }
+.h-3 { height:space-x(3); }
+.h-4 { height:space-x(4); }
+.h-5 { height:space-x(5); }
+
+.h-auto     { height: auto; }
+.h-fluid    { height: 100%; }
+.h-inherit  { height: inherit; }
+
+// Margin
+.m-0 { margin:0; }
+.m-1 { margin:space-x(1); }
+.m-2 { margin:space-x(2); }
+.m-3 { margin:space-x(3); }
+.m-4 { margin:space-x(4); }
+.m-5 { margin:space-x(5); }
+
+.mt-0 { margin-top:0; }
+.mr-0 { margin-right:0; }
+.mb-0 { margin-bottom:0; }
+.ml-0 { margin-left:0; }
+.mx-0 { margin-left:0 ;margin-right:0 ; }
+.my-0 { margin-top:0;margin-bottom:0; }
+
+.mt-1 { margin-top:space-x(1); }
+.mr-1 { margin-right:space-x(1); }
+.mb-1 { margin-bottom:space-x(1); }
+.ml-1 { margin-left:space-x(1); }
+.mx-1 { margin-left:space-x(1);margin-right:space-x(1); }
+.my-1 { margin-top:space-x(1);margin-bottom:space-x(1); }
+
+.mt-2 { margin-top:space-x(2); }
+.mr-2 { margin-right:space-x(2); }
+.mb-2 { margin-bottom:space-x(2); }
+.ml-2 { margin-left:space-x(2); }
+.mx-2 { margin-right:space-x(2);margin-left:space-x(2); }
+.my-2 { margin-top:space-x(2);margin-bottom:space-x(2); }
+
+.mt-3 { margin-top:space-x(3); }
+.mr-3 { margin-right:space-x(3); }
+.mb-3 { margin-bottom:space-x(3); }
+.ml-3 { margin-left:space-x(3); }
+.mx-3 { margin-right:space-x(3);margin-left:space-x(3); }
+.my-3 { margin-bottom:space-x(3);margin-top:space-x(3); }
+
+// Padding
+.p-0 { padding:0; &--i { padding: 0 !important; } }
+.p-1 { padding:space-x(1); }
+.p-2 { padding:space-x(2); }
+.p-3 { padding:space-x(3); }
+.p-4 { padding:space-x(4); }
+.p-5 { padding:space-x(5); }
+
+.pt-0 { padding-top:0; }
+.pr-0 { padding-right:0; }
+.pb-0 { padding-bottom:0; }
+.pl-0 { padding-left:0; }
+.px-0 { padding-left:0 ;padding-right:0 ; }
+.py-0 { padding-top:0;padding-bottom:0; }
+
+.pt-1 { padding-top:space-x(1); }
+.pr-1 { padding-right:space-x(1); }
+.pb-1 { padding-bottom:space-x(1); }
+.pl-1 { padding-left:space-x(1); }
+.px-1 { padding-left:space-x(1);padding-right:space-x(1); }
+.py-1 { padding-top:space-x(1);padding-bottom:space-x(1); }
+
+.pt-2 { padding-top:space-x(2); }
+.pr-2 { padding-right:space-x(2); }
+.pb-2 { padding-bottom:space-x(2); }
+.pl-2 { padding-left:space-x(2); }
+.px-2 { padding-right:space-x(2);padding-left:space-x(2); }
+.py-2 { padding-top:space-x(2);padding-bottom:space-x(2); }
+
+.pt-3 { padding-top:space-x(3); }
+.pr-3 { padding-right:space-x(3); }
+.pb-3 { padding-bottom:space-x(3); }
+.pl-3 { padding-left:space-x(3); }
+.px-3 { padding-right:space-x(3);padding-left:space-x(3); }
+.py-3 { padding-bottom:space-x(3);padding-top:space-x(3); }
+
+// Typography
+.text-primary     { color: $primary; }
+.text-secondary   { color: $secondary; }
+.text-info        { color: $info; }
+.text-success     { color: $success; }
+.text-warning     { color: $warning; }
+.text-danger      { color: $danger; }
+.text-dark        { color: $dark; }
+.text-light       { color: $light; }
+
+.text-bold      { font-weight: bold; }
+.text-italic    { font-style: italic; }
+.text-underline { text-decoration: underline; }

src/sass/modules/_layout.scss

+// Form
+$form-group-margin-bottom: space-x(3);
+
 /// Topbar
 $topbar-height: 56px; // ~ unworthy empirical value (@TODO topbar height calculation)
 $topbar-input-width: 304px;
@@ -9,6 +12,9 @@ $sidebar-width: 480px;
 $sidebar-height: calc(100vh - #{ $topbar-height });
 $sidebar-tab-margin-x: space-x(2.5);
 
+/// Misc
+$overlay-radius: 5px;
+
 
 @mixin aside-topbar() {
   $border-color: mix-alpha($navbar-dark-hover-color, 5%);
@@ -42,7 +48,7 @@ $sidebar-tab-margin-x: space-x(2.5);
 }
 
 
-%sidebar {
+@mixin sidebar() {
   @include hidden-scrollbar;
 
   $teaser-height: 16px;