From 29360a30e7fd4576cd8d295ce530abde8e7706ce Mon Sep 17 00:00:00 2001
From: woothu <32914662+woothu@users.noreply.github.com>
Date: Thu, 16 May 2019 12:44:48 +0200
Subject: [PATCH] feat: change layout styles to version 3

---
 package.json                                  |   2 +-
 src/containers/DefaultContainer.vue           |   6 +-
 src/containers/DefaultHeaderDropdownAccnt.vue |   9 +-
 src/containers/TheAside.vue                   | 255 +++++++++---------
 src/containers/TheFooter.vue                  |   6 +-
 src/containers/TheHeader.vue                  |  32 +--
 6 files changed, 157 insertions(+), 153 deletions(-)

diff --git a/package.json b/package.json
index c57a2338..84d457a3 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
     "test:e2e": "vue-cli-service test:e2e"
   },
   "dependencies": {
-    "@coreui/coreui": "^2.1.9",
+    "@coreui/coreui": "next",
     "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.0",
     "@coreui/coreui-vue-chartjs": "file:../coreui-vue-chartjs",
     "@coreui/icons": "0.3.0",
diff --git a/src/containers/DefaultContainer.vue b/src/containers/DefaultContainer.vue
index 0b519e6b..e32917e5 100644
--- a/src/containers/DefaultContainer.vue
+++ b/src/containers/DefaultContainer.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="app">
+  <div class="c-app c-default-layout">
     <TheHeader/>
-    <div class="app-body">
+    <div class="c-body">
       <TheSidebar/>
-      <main class="main">
+      <main class="c-main">
         <CBreadcrumbRouter/>
         <CContainer fluid>
           <router-view></router-view>
diff --git a/src/containers/DefaultHeaderDropdownAccnt.vue b/src/containers/DefaultHeaderDropdownAccnt.vue
index c2080738..bc0cfd84 100644
--- a/src/containers/DefaultHeaderDropdownAccnt.vue
+++ b/src/containers/DefaultHeaderDropdownAccnt.vue
@@ -1,19 +1,18 @@
 <template>
   <CDropdown
-    right
     nav
     noCaret
     noPopper
-    addMenuClasses="dropdown-menu-right"
+    addMenuClasses="c-dropdown-menu-right"
   >
     <template #button-content>
       <img
         src="img/avatars/6.jpg"
-        class="img-avatar"
+        class="c-img-avatar"
         alt="admin@bootstrapmaster.com"
       />
     </template>
-    <CDropdownHeader tag="div" class="text-center">
+    <CDropdownHeader tag="div" class="c-text-center">
       <strong>Account</strong>
     </CDropdownHeader>
     <CDropdownItem>
@@ -34,7 +33,7 @@
     </CDropdownItem>
     <CDropdownHeader
       tag="div"
-      class="text-center"
+      class="c-text-center"
     >
       <strong>Settings</strong>
     </CDropdownHeader>
diff --git a/src/containers/TheAside.vue b/src/containers/TheAside.vue
index da3f5838..f70025c5 100644
--- a/src/containers/TheAside.vue
+++ b/src/containers/TheAside.vue
@@ -1,94 +1,97 @@
 <template>
-  <CAside fixed>
-    <CTabs addTabClasses="p-0">
+  <CSidebar aside fixed light :display="false">
+    <CTabs addTabClasses="c-p-0">
       <CTab active>
         <template slot="title">
           <i class="icon-list"></i>
         </template>
-        <CListGroup class="list-group-accent">
-          <CListGroupItem class="list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">
+        <CListGroup class="c-list-group-accent">
+          <CListGroupItem
+            class="c-list-group-item-accent-secondary c-bg-light c-text-center c-font-weight-bold c-text-muted c-text-uppercase c-small">
             Today
           </CListGroupItem>
-          <CListGroupItem href="#" class="list-group-item-accent-warning list-group-item-divider">
-            <div class="avatar float-right">
-              <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
+          <CListGroupItem href="#" class="c-list-group-item-accent-warning c-list-group-item-divider">
+            <div class="c-avatar c-float-right">
+              <img class="c-img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
             </div>
             <div>Meeting with
               <strong>Lucas</strong>
             </div>
-            <small class="text-muted mr-3">
+            <small class="c-text-muted c-mr-3">
               <i class="icon-calendar"></i>&nbsp;&nbsp;1 - 3pm
             </small>
-            <small class="text-muted">
+            <small class="c-text-muted">
               <i class="icon-location-pin"></i>&nbsp;&nbsp;Palo Alto, CA
             </small>
           </CListGroupItem>
-          <CListGroupItem href="#" class="list-group-item-accent-info">
-            <div class="avatar float-right">
+          <CListGroupItem href="#" class="c-list-group-item-accent-info">
+            <div class="c-avatar c-float-right">
               <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
             </div>
             <div>Skype with <strong>Megan</strong>
             </div>
-            <small class="text-muted mr-3"><i class="icon-calendar"></i>&nbsp;&nbsp;4 - 5pm</small>
-            <small class="text-muted"><i class="icon-social-skype"></i>&nbsp;&nbsp;On-line</small>
+            <small class="c-text-muted mr-3">
+              <i class="icon-calendar"></i>&nbsp;&nbsp;4 - 5pm
+            </small>
+            <small class="c-text-muted"><i class="icon-social-skype"></i>&nbsp;&nbsp;On-line</small>
           </CListGroupItem>
-          <hr class="transparent mx-3 my-0">
-          <CListGroupItem class="list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">
+          <hr class="c-transparent c-mx-3 c-my-0">
+          <CListGroupItem class="c-list-group-item-accent-secondary c-bg-light c-text-center c-font-weight-bold c-text-muted c-text-uppercase small">
             Tomorrow
           </CListGroupItem>
-          <CListGroupItem href="#" class="list-group-item-accent-danger list-group-item-divider">
+          <CListGroupItem href="#" class="c-list-group-item-accent-danger c-list-group-item-divider">
             <div>New UI Project - <strong>deadline</strong>
             </div>
-            <small class="text-muted mr-3"><i class="icon-calendar"></i>&nbsp;&nbsp;10 - 11pm</small>
-            <small class="text-muted"><i class="icon-home"></i>&nbsp;&nbsp;creativeLabs HQ</small>
-            <div class="avatars-stack mt-2">
-              <div class="avatar avatar-xs">
-                <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
+            <small class="c-text-muted c-mr-3"><i class="icon-calendar"></i>&nbsp;&nbsp;10 - 11pm</small>
+            <small class="c-text-muted"><i class="icon-home"></i>&nbsp;&nbsp;creativeLabs HQ</small>
+            <div class="c-avatars-stack c-mt-2">
+              <div class="c-avatar c-avatar-xs">
+                <img class="c-img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
               </div>
-              <div class="avatar avatar-xs">
-                <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
+              <div class="c-avatar c-avatar-xs">
+                <img class="c-img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
               </div>
-              <div class="avatar avatar-xs">
-                <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
+              <div class="c-avatar c-avatar-xs">
+                <img class="c-img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
               </div>
-              <div class="avatar avatar-xs">
-                <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
+              <div class="c-avatar c-avatar-xs">
+                <img class="c-img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
               </div>
-              <div class="avatar avatar-xs">
-                <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
+              <div class="c-avatar c-avatar-xs">
+                <img class="c-img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
               </div>
             </div>
           </CListGroupItem>
-          <CListGroupItem href="#" class="list-group-item-accent-success list-group-item-divider">
+          <CListGroupItem href="#" class="c-list-group-item-accent-success c-list-group-item-divider">
             <div><strong>#10 Startups.Garden</strong> Meetup</div>
-            <small class="text-muted mr-3"><i class="icon-calendar"></i>&nbsp; 1 - 3pm</small>
-            <small class="text-muted"><i class="icon-location-pin"></i>&nbsp; Palo Alto, CA</small>
+            <small class="c-text-muted c-mr-3"><i class="icon-calendar"></i>&nbsp; 1 - 3pm</small>
+            <small class="c-text-muted"><i class="icon-location-pin"></i>&nbsp; Palo Alto, CA</small>
           </CListGroupItem>
-          <CListGroupItem href="#" class="list-group-item-accent-primary list-group-item-divider">
+          <CListGroupItem href="#" class="c-list-group-item-accent-primary c-list-group-item-divider">
             <div><strong>Team meeting</strong></div>
-            <small class="text-muted mr-3"><i class="icon-calendar"></i>&nbsp; 4 - 6pm</small>
-            <small class="text-muted"><i class="icon-home"></i>&nbsp; creativeLabs HQ</small>
-            <div class="avatars-stack mt-2">
-              <div class="avatar avatar-xs">
-                <img src="img/avatars/2.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
+            <small class="c-text-muted c-mr-3"><i class="icon-calendar"></i>&nbsp; 4 - 6pm</small>
+            <small class="c-text-muted"><i class="icon-home"></i>&nbsp; creativeLabs HQ</small>
+            <div class="c-avatars-stack c-mt-2">
+              <div class="c-avatar c-avatar-xs">
+                <img src="img/avatars/2.jpg" class="c-img-avatar" alt="admin@bootstrapmaster.com">
               </div>
-              <div class="avatar avatar-xs">
-                <img src="img/avatars/3.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
+              <div class="c-avatar c-avatar-xs">
+                <img src="img/avatars/3.jpg" class="c-img-avatar" alt="admin@bootstrapmaster.com">
               </div>
-              <div class="avatar avatar-xs">
-                <img src="img/avatars/4.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
+              <div class="c-avatar c-avatar-xs">
+                <img src="img/avatars/4.jpg" class="c-img-avatar" alt="admin@bootstrapmaster.com">
               </div>
-              <div class="avatar avatar-xs">
-                <img src="img/avatars/5.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
+              <div class="c-avatar c-avatar-xs">
+                <img src="img/avatars/5.jpg" class="c-img-avatar" alt="admin@bootstrapmaster.com">
               </div>
-              <div class="avatar avatar-xs">
-                <img src="img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
+              <div class="c-avatar c-avatar-xs">
+                <img src="img/avatars/6.jpg" class="c-img-avatar" alt="admin@bootstrapmaster.com">
               </div>
-              <div class="avatar avatar-xs">
-                <img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
+              <div class="c-avatar c-avatar-xs">
+                <img src="img/avatars/7.jpg" class="c-img-avatar" alt="admin@bootstrapmaster.com">
               </div>
-              <div class="avatar avatar-xs">
-                <img src="img/avatars/8.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
+              <div class="c-avatar c-avatar-xs">
+                <img src="img/avatars/8.jpg" class="c-img-avatar" alt="admin@bootstrapmaster.com">
               </div>
             </div>
           </CListGroupItem>
@@ -98,148 +101,148 @@
         <template slot="title">
           <i class='icon-speech'></i>
         </template>
-        <div class="p-3">
-          <div class="message">
-            <div class="py-3 pb-5 mr-3 float-left">
-              <div class="avatar">
-                <img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-                <CBadge variant="success" class="avatar-status"/>
+        <div class="c-p-3">
+          <div class="c-message">
+            <div class="c-py-3 c-pb-5 c-mr-3 c-float-left">
+              <div class="c-avatar">
+                <img src="img/avatars/7.jpg" class="c-img-avatar" alt="admin@bootstrapmaster.com">
+                <CBadge variant="success" class="c-avatar-status"/>
               </div>
             </div>
             <div>
-              <small class="text-muted">Lukasz Holeczek</small>
-              <small class="text-muted float-right mt-1">1:52 PM</small>
+              <small class="c-text-muted">Lukasz Holeczek</small>
+              <small class="c-text-muted c-float-right c-mt-1">1:52 PM</small>
             </div>
-            <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
-            <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
+            <div class="c-text-truncate c-font-weight-bold">Lorem ipsum dolor sit amet</div>
+            <small class="c-text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
           </div>
           <hr>
-          <div class="message">
-            <div class="py-3 pb-5 mr-3 float-left">
-              <div class="avatar">
-                <img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-                <CBadge variant="danger" class="avatar-status"></CBadge>
+          <div class="c-message">
+            <div class="c-py-3 c-pb-5 c-mr-3 c-float-left">
+              <div class="c-avatar">
+                <img src="img/avatars/7.jpg" class="c-img-avatar" alt="admin@bootstrapmaster.com">
+                <CBadge variant="danger" class="c-avatar-status"></CBadge>
               </div>
             </div>
             <div>
-              <small class="text-muted">Lukasz Holeczek</small>
-              <small class="text-muted float-right mt-1">1:52 PM</small>
+              <small class="c-text-muted">Lukasz Holeczek</small>
+              <small class="c-text-muted c-float-right c-mt-1">1:52 PM</small>
             </div>
-            <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
-            <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
+            <div class="c-text-truncate c-font-weight-bold">Lorem ipsum dolor sit amet</div>
+            <small class="c-text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
           </div>
           <hr>
-          <div class="message">
-            <div class="py-3 pb-5 mr-3 float-left">
-              <div class="avatar">
-                <img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-                <CBadge variant="info" class="avatar-status"></CBadge>
+          <div class="c-message">
+            <div class="c-py-3 c-pb-5 c-mr-3 c-float-left">
+              <div class="c-avatar">
+                <img src="img/avatars/7.jpg" class="c-img-avatar" alt="admin@bootstrapmaster.com">
+                <CBadge variant="info" class="c-avatar-status"></CBadge>
               </div>
             </div>
             <div>
-              <small class="text-muted">Lukasz Holeczek</small>
-              <small class="text-muted float-right mt-1">1:52 PM</small>
+              <small class="c-text-muted">Lukasz Holeczek</small>
+              <small class="c-text-muted c-float-right c-mt-1">1:52 PM</small>
             </div>
-            <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
-            <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
+            <div class="c-text-truncate c-font-weight-bold">Lorem ipsum dolor sit amet</div>
+            <small class="c-text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
           </div>
           <hr>
-          <div class="message">
-            <div class="py-3 pb-5 mr-3 float-left">
-              <div class="avatar">
-                <img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-                <CBadge variant="warning" class="avatar-status"></CBadge>
+          <div class="c-message">
+            <div class="c-py-3 c-pb-5 c-mr-3 c-float-left">
+              <div class="c-avatar">
+                <img src="img/avatars/7.jpg" class="c-img-avatar" alt="admin@bootstrapmaster.com">
+                <CBadge variant="warning" class="c-avatar-status"></CBadge>
               </div>
             </div>
             <div>
-              <small class="text-muted">Lukasz Holeczek</small>
-              <small class="text-muted float-right mt-1">1:52 PM</small>
+              <small class="c-text-muted">Lukasz Holeczek</small>
+              <small class="c-text-muted c-float-right c-mt-1">1:52 PM</small>
             </div>
-            <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
-            <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
+            <div class="c-text-truncate c-font-weight-bold">Lorem ipsum dolor sit amet</div>
+            <small class="c-text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
           </div>
           <hr>
-          <div class="message">
-            <div class="py-3 pb-5 mr-3 float-left">
-              <div class="avatar">
-                <img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-                <CBadge variant="dark" class="avatar-status"></CBadge>
+          <div class="c-message">
+            <div class="c-py-3 c-pb-5 c-mr-3 c-float-left">
+              <div class="c-avatar">
+                <img src="img/avatars/7.jpg" class="c-img-avatar" alt="admin@bootstrapmaster.com">
+                <CBadge variant="dark" class="c-avatar-status"></CBadge>
               </div>
             </div>
             <div>
-              <small class="text-muted">Lukasz Holeczek</small>
-              <small class="text-muted float-right mt-1">1:52 PM</small>
+              <small class="c-text-muted">Lukasz Holeczek</small>
+              <small class="c-text-muted c-float-right c-mt-1">1:52 PM</small>
             </div>
-            <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
-            <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
+            <div class="c-text-truncate c-font-weight-bold">Lorem ipsum dolor sit amet</div>
+            <small class="c-text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
           </div>
         </div>
       </CTab>
       <CTab>
         <template slot="title">
-          <i class='icon-settings'></i>
+          <i class="icon-settings"></i>
         </template>
-        <div class="p-3">
+        <div class="c-p-3">
           <h6>Settings</h6>
-          <div class="aside-options">
-            <div class="clearfix mt-4">
+          <div class="c-aside-options">
+            <div class="c-clearfix c-mt-4">
               <small><b>Option 1</b></small>
-              <CSwitch variant="success" label shape="pill" size="sm" class="float-right" checked />
+              <CSwitch variant="success" label shape="pill" size="sm" class="c-float-right" checked />
             </div>
             <div>
-              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
+              <small class="c-text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
             </div>
           </div>
-          <div class="aside-options">
-            <div class="clearfix mt-3">
+          <div class="c-aside-options">
+            <div class="c-clearfix c-mt-3">
               <small><b>Option 2</b></small>
-              <CSwitch variant="success" label shape="pill" size="sm" class="float-right" />
+              <CSwitch variant="success" label shape="pill" size="sm" class="c-float-right" />
             </div>
             <div>
-              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
+              <small class="c-text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
             </div>
           </div>
-          <div class="aside-options">
-            <div class="clearfix mt-3">
+          <div class="c-aside-options">
+            <div class="c-clearfix c-mt-3">
               <small><b>Option 3</b></small>
-              <CSwitch variant="success" label shape="pill" size="sm" class="float-right" disabled defaultChecked/>
+              <CSwitch variant="success" label shape="pill" size="sm" class="c-float-right" disabled defaultChecked/>
             </div>
             <div>
-              <small class="text-muted">Disabled option.</small>
+              <small class="c-text-muted">Disabled option.</small>
             </div>
           </div>
-          <div class="aside-options">
-            <div class="clearfix mt-3">
+          <div class="c-aside-options">
+            <div class="c-clearfix c-mt-3">
               <small><b>Option 4</b></small>
-              <CSwitch variant="success" label shape="pill" size="sm" class="float-right" checked />
+              <CSwitch variant="success" label shape="pill" size="sm" class="c-float-right" checked />
             </div>
           </div>
           <hr>
           <h6>System Utilization</h6>
-          <div class="text-uppercase mb-1 mt-4">
+          <div class="c-text-uppercase c-mb-1 c-mt-4">
             <small><b>CPU Usage</b></small>
           </div>
-          <CProgress  class="progress-xs" variant="info" :value="25"></CProgress>
-          <small class="text-muted">348 Processes. 1/4 Cores.</small>
-          <div class="text-uppercase mb-1 mt-2">
+          <CProgress  class="c-progress-xs" variant="info" :value="25"></CProgress>
+          <small class="c-text-muted">348 Processes. 1/4 Cores.</small>
+          <div class="c-text-uppercase c-mb-1 c-mt-2">
             <small><b>Memory Usage</b></small>
           </div>
-          <CProgress  class="progress-xs" variant="warning" :value="70"></CProgress>
-          <small class="text-muted">11444GB/16384MB</small>
-          <div class="text-uppercase mb-1 mt-2">
+          <CProgress  class="c-progress-xs" variant="warning" :value="70"></CProgress>
+          <small class="c-text-muted">11444GB/16384MB</small>
+          <div class="c-text-uppercase c-mb-1 c-mt-2">
             <small><b>SSD 1 Usage</b></small>
           </div>
-          <CProgress  class="progress-xs" variant="danger" :value="95"></CProgress>
-          <small class="text-muted">243GB/256GB</small>
-          <div class="text-uppercase mb-1 mt-2">
+          <CProgress  class="c-progress-xs" variant="danger" :value="95"></CProgress>
+          <small class="c-text-muted">243GB/256GB</small>
+          <div class="c-text-uppercase c-mb-1 c-mt-2">
             <small><b>SSD 2 Usage</b></small>
           </div>
-          <CProgress  class="progress-xs" variant="success" :value="10"></CProgress>
-          <small class="text-muted">25GB/256GB</small>
+          <CProgress class="c-progress-xs" variant="success" :value="10"></CProgress>
+          <small class="c-text-muted">25GB/256GB</small>
         </div>
       </CTab>
     </CTabs>
-  </CAside>
+  </CSidebar>
 </template>
 
 <script>
diff --git a/src/containers/TheFooter.vue b/src/containers/TheFooter.vue
index d4740374..3e269e35 100644
--- a/src/containers/TheFooter.vue
+++ b/src/containers/TheFooter.vue
@@ -2,10 +2,10 @@
   <CFooter>
     <div>
       <a href="https://coreui.io">CoreUI</a>
-      <span class="ml-1">&copy; 2018 creativeLabs.</span>
+      <span class="c-ml-1">&copy; 2018 creativeLabs.</span>
     </div>
-    <div class="ml-auto">
-      <span class="mr-1">Powered by</span>
+    <div class="c-ml-auto">
+      <span class="c-mr-1">Powered by</span>
       <a href="https://coreui.io">CoreUI for Vue</a>
     </div>
   </CFooter>
diff --git a/src/containers/TheHeader.vue b/src/containers/TheHeader.vue
index 5661e0e9..fc6c25e5 100644
--- a/src/containers/TheHeader.vue
+++ b/src/containers/TheHeader.vue
@@ -1,31 +1,33 @@
 <template>
   <CHeader fixed>
-    <CSidebarToggler class="d-lg-none"/>
-    <CLink class="navbar-brand" to="#">
-      <img class="navbar-brand-full" src="img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo">
-      <img class="navbar-brand-minimized" src="img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo">
+    <CSidebarToggler class="c-header-toggler c-d-lg-none"/>
+    <CLink class="c-header-brand" to="#">
+      <img class="c-navbar-brand-full" src="img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo">
+      <!-- <img class="c-navbar-brand-minimized" src="img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo"> -->
     </CLink>
-    <CSidebarToggler class="d-md-down-none"/>
-    <CNavbarNav class="d-md-down-none">
-      <CNavItem class="px-3" to="/dashboard">Dashboard</CNavItem>
-      <CNavItem class="px-3" to="/users" exact>Users</CNavItem>
-      <CNavItem class="px-3">Settings</CNavItem>
+    <CSidebarToggler class="c-header-toggler c-d-md-down-none"/>
+    <CNavbarNav class="c-header-nav c-d-md-down-none">
+      <CNavItem class="c-px-3 nav-link" to="/dashboard">Dashboard</CNavItem>
+      <CNavItem class="c-px-3 nav-link" to="/users" exact>Users</CNavItem>
+      <CNavItem class="c-px-3 nav-link">Settings</CNavItem>
     </CNavbarNav>
-    <CNavbarNav class="ml-auto">
-      <CNavItem class="d-md-down-none">
+    <CNav class="c-header-nav c-ml-auto">
+      <CNavItem class="c-d-md-down-none">
         <i class="icon-bell"></i>
         <CBadge pill variant="danger">5</CBadge>
       </CNavItem>
-      <CNavItem class="d-md-down-none">
+      <CNavItem class="c-d-md-down-none">
         <i class="icon-list"></i>
       </CNavItem>
       <CNavItem class="d-md-down-none">
         <i class="icon-location-pin"></i>
       </CNavItem>
       <DefaultHeaderDropdownAccnt/>
-    </CNavbarNav>
-    <CAsideToggler class="d-none d-lg-block" />
-    <!--<AsideToggler class="d-lg-none" mobile />-->
+    </CNav>
+    <CSidebarToggler
+      class="c-header-toggler c-d-md-down-none"
+      aside
+    />
   </CHeader>
 </template>