From 90d46fbf0d2bdde0a8558b5a53635c8d4f079e0d Mon Sep 17 00:00:00 2001
From: Miguel Veloso <mvelosop@gmail.com>
Date: Tue, 17 Apr 2018 12:37:28 +0100
Subject: [PATCH] style: Add marker comments for view styles, content and
 scripts

---
 src/404.html                     |   1 +
 src/500.html                     |   1 +
 src/base-breadcrumb.html         |   5 +-
 src/base-cards.html              |   5 +-
 src/base-carousel.html           |   5 +-
 src/base-collapse.html           |   5 +-
 src/base-forms.html              |   5 +-
 src/base-jumbotron.html          |   5 +-
 src/base-list-group.html         |   5 +-
 src/base-navs.html               |   5 +-
 src/base-pagination.html         |   5 +-
 src/base-popovers.html           |   4 +-
 src/base-progress.html           |   5 +-
 src/base-scrollspy.html          |   5 +-
 src/base-switches.html           |   6 +-
 src/base-tables.html             |   5 +-
 src/base-tabs.html               |   5 +-
 src/base-tooltips.html           |   4 +-
 src/blank.html                   |   5 +-
 src/buttons-brand-buttons.html   |   5 +-
 src/buttons-button-group.html    |   5 +-
 src/buttons-buttons.html         |   5 +-
 src/buttons-dropdowns.html       |   5 +-
 src/charts.html                  |   4 +-
 src/colors.html                  |   4 +-
 src/icons-flags.html             |   6 +-
 src/icons-font-awesome.html      |   4 +
 src/icons-simple-line-icons.html |   5 +
 src/index.html                   |   4 +-
 src/login.html                   |   1 +
 src/notifications-alerts.html    |   5 +-
 src/notifications-badge.html     |   5 +-
 src/notifications-modals.html    | 312 ++++++++++++++++---------------
 src/register.html                |   1 +
 src/typography.html              |   4 +
 src/widgets.html                 |   5 +-
 36 files changed, 281 insertions(+), 185 deletions(-)

diff --git a/src/404.html b/src/404.html
index 18080c138..a53d5654d 100644
--- a/src/404.html
+++ b/src/404.html
@@ -54,5 +54,6 @@ <h4 class="pt-3">Oops! You're lost.</h4>
     <script src="node_modules/pace-progress/pace.min.js"></script>
     <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
     <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
+    <!-- Plugins and scripts required by this view-->
   </body>
 </html>
\ No newline at end of file
diff --git a/src/500.html b/src/500.html
index 906aaefc3..2e1938d1b 100644
--- a/src/500.html
+++ b/src/500.html
@@ -54,5 +54,6 @@ <h4 class="pt-3">Houston, we have a problem!</h4>
     <script src="node_modules/pace-progress/pace.min.js"></script>
     <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
     <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
+    <!-- Plugins and scripts required by this view-->
   </body>
 </html>
\ No newline at end of file
diff --git a/src/base-breadcrumb.html b/src/base-breadcrumb.html
index bea8433d6..5697c5c91 100644
--- a/src/base-breadcrumb.html
+++ b/src/base-breadcrumb.html
@@ -339,7 +339,9 @@
           </li>
         </ol>
         <div class="container-fluid">
+          <!-- Styles required by this view-->
           <div class="animated fadeIn">
+            <!-- View content-->
             <div class="row">
               <div class="col-lg-12">
                 <div class="card">
@@ -390,8 +392,8 @@
               </div>
             </div>
             <!--/.row-->
+            <!-- /View content-->
           </div>
-
         </div>
       </main>
       <aside class="aside-menu">
@@ -701,5 +703,6 @@ <h6>System Utilization</h6>
     <script src="node_modules/pace-progress/pace.min.js"></script>
     <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
     <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
+    <!-- Plugins and scripts required by this view-->
   </body>
 </html>
\ No newline at end of file
diff --git a/src/base-cards.html b/src/base-cards.html
index 99ab763b5..eace85102 100644
--- a/src/base-cards.html
+++ b/src/base-cards.html
@@ -339,7 +339,9 @@
           </li>
         </ol>
         <div class="container-fluid">
+          <!-- Styles required by this view-->
           <div class="animated fadeIn">
+            <!-- View content-->
             <div class="row">
               <div class="col-sm-6 col-md-4">
                 <div class="card">
@@ -759,8 +761,8 @@ <h4 class="modal-title">Modal title</h4>
               </div>
               <!-- /.modal-dialog -->
             </div>
+            <!-- /View content-->
           </div>
-
         </div>
       </main>
       <aside class="aside-menu">
@@ -1070,5 +1072,6 @@ <h6>System Utilization</h6>
     <script src="node_modules/pace-progress/pace.min.js"></script>
     <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
     <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
+    <!-- Plugins and scripts required by this view-->
   </body>
 </html>
\ No newline at end of file
diff --git a/src/base-carousel.html b/src/base-carousel.html
index 53bc64dae..a011704fa 100644
--- a/src/base-carousel.html
+++ b/src/base-carousel.html
@@ -339,7 +339,9 @@
           </li>
         </ol>
         <div class="container-fluid">
+          <!-- Styles required by this view-->
           <div class="animated fadeIn">
+            <!-- View content-->
             <div class="row">
               <div class="col-sm-12 col-xl-6">
                 <div class="card">
@@ -493,8 +495,8 @@ <h3>Third slide label</h3>
                 </div>
               </div>
             </div>
+            <!-- /View content-->
           </div>
-
         </div>
       </main>
       <aside class="aside-menu">
@@ -804,5 +806,6 @@ <h6>System Utilization</h6>
     <script src="node_modules/pace-progress/pace.min.js"></script>
     <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
     <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
+    <!-- Plugins and scripts required by this view-->
   </body>
 </html>
\ No newline at end of file
diff --git a/src/base-collapse.html b/src/base-collapse.html
index 5390bc1da..060e14b6b 100644
--- a/src/base-collapse.html
+++ b/src/base-collapse.html
@@ -339,7 +339,9 @@
           </li>
         </ol>
         <div class="container-fluid">
+          <!-- Styles required by this view-->
           <div class="animated fadeIn">
+            <!-- View content-->
             <div class="row">
               <div class="col-sm-12 col-xl-6">
                 <div class="card">
@@ -490,8 +492,8 @@ <h5 class="mb-0">
                 </div>
               </div>
             </div>
+            <!-- /View content-->
           </div>
-
         </div>
       </main>
       <aside class="aside-menu">
@@ -801,5 +803,6 @@ <h6>System Utilization</h6>
     <script src="node_modules/pace-progress/pace.min.js"></script>
     <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
     <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
+    <!-- Plugins and scripts required by this view-->
   </body>
 </html>
\ No newline at end of file
diff --git a/src/base-forms.html b/src/base-forms.html
index 4ebc0ebc4..231fe6750 100644
--- a/src/base-forms.html
+++ b/src/base-forms.html
@@ -339,7 +339,9 @@
           </li>
         </ol>
         <div class="container-fluid">
+          <!-- Styles required by this view-->
           <div class="animated fadeIn">
+            <!-- View content-->
             <div class="row">
               <div class="col-sm-6">
                 <div class="card">
@@ -1461,8 +1463,8 @@
               <!--/.col-->
             </div>
             <!--/.row-->
+            <!-- /View content-->
           </div>
-
         </div>
       </main>
       <aside class="aside-menu">
@@ -1772,5 +1774,6 @@ <h6>System Utilization</h6>
     <script src="node_modules/pace-progress/pace.min.js"></script>
     <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
     <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
+    <!-- Plugins and scripts required by this view-->
   </body>
 </html>
\ No newline at end of file
diff --git a/src/base-jumbotron.html b/src/base-jumbotron.html
index 853f6ef0b..ed9326aa1 100644
--- a/src/base-jumbotron.html
+++ b/src/base-jumbotron.html
@@ -339,7 +339,9 @@
           </li>
         </ol>
         <div class="container-fluid">
+          <!-- Styles required by this view-->
           <div class="animated fadeIn">
+            <!-- View content-->
             <div class="row">
               <div class="col-sm-12 col-xl-6">
                 <div class="card">
@@ -381,8 +383,8 @@ <h1 class="display-3">Fluid jumbotron</h1>
                 </div>
               </div>
             </div>
+            <!-- /View content-->
           </div>
-
         </div>
       </main>
       <aside class="aside-menu">
@@ -692,5 +694,6 @@ <h6>System Utilization</h6>
     <script src="node_modules/pace-progress/pace.min.js"></script>
     <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
     <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
+    <!-- Plugins and scripts required by this view-->
   </body>
 </html>
\ No newline at end of file
diff --git a/src/base-list-group.html b/src/base-list-group.html
index b80828fda..f1a79de86 100644
--- a/src/base-list-group.html
+++ b/src/base-list-group.html
@@ -339,7 +339,9 @@
           </li>
         </ol>
         <div class="container-fluid">
+          <!-- Styles required by this view-->
           <div class="animated fadeIn">
+            <!-- View content-->
             <div class="row">
               <div class="col-sm-12 col-xl-6">
                 <div class="card">
@@ -575,8 +577,8 @@ <h5 class="mb-1">List group item heading</h5>
                 </div>
               </div>
             </div>
+            <!-- /View content-->
           </div>
-
         </div>
       </main>
       <aside class="aside-menu">
@@ -886,5 +888,6 @@ <h6>System Utilization</h6>
     <script src="node_modules/pace-progress/pace.min.js"></script>
     <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
     <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
+    <!-- Plugins and scripts required by this view-->
   </body>
 </html>
\ No newline at end of file
diff --git a/src/base-navs.html b/src/base-navs.html
index fa4b08c14..bd6eb10fd 100644
--- a/src/base-navs.html
+++ b/src/base-navs.html
@@ -339,7 +339,9 @@
           </li>
         </ol>
         <div class="container-fluid">
+          <!-- Styles required by this view-->
           <div class="animated fadeIn">
+            <!-- View content-->
             <div class="row">
               <div class="col-sm-12 col-xl-6">
                 <div class="card">
@@ -697,8 +699,8 @@
                 </div>
               </div>
             </div>
+            <!-- /View content-->
           </div>
-
         </div>
       </main>
       <aside class="aside-menu">
@@ -1008,5 +1010,6 @@ <h6>System Utilization</h6>
     <script src="node_modules/pace-progress/pace.min.js"></script>
     <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
     <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
+    <!-- Plugins and scripts required by this view-->
   </body>
 </html>
\ No newline at end of file
diff --git a/src/base-pagination.html b/src/base-pagination.html
index 82285ab6a..17c2f124f 100644
--- a/src/base-pagination.html
+++ b/src/base-pagination.html
@@ -339,7 +339,9 @@
           </li>
         </ol>
         <div class="container-fluid">
+          <!-- Styles required by this view-->
           <div class="animated fadeIn">
+            <!-- View content-->
             <div class="card">
               <div class="card-header">
                 <i class="fa fa-align-justify"></i> Pagination
@@ -570,8 +572,8 @@
                 </nav>
               </div>
             </div>
+            <!-- /View content-->
           </div>
-
         </div>
       </main>
       <aside class="aside-menu">
@@ -881,5 +883,6 @@ <h6>System Utilization</h6>
     <script src="node_modules/pace-progress/pace.min.js"></script>
     <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
     <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
+    <!-- Plugins and scripts required by this view-->
   </body>
 </html>
\ No newline at end of file
diff --git a/src/base-popovers.html b/src/base-popovers.html
index ed29ac04c..ed123011b 100644
--- a/src/base-popovers.html
+++ b/src/base-popovers.html
@@ -339,7 +339,9 @@
           </li>
         </ol>
         <div class="container-fluid">
+          <!-- Styles required by this view-->
           <div class="animated fadeIn">
+            <!-- View content-->
             <div class="card">
               <div class="card-header">
                 <i class="fa fa-align-justify"></i> Popovers
@@ -380,8 +382,8 @@
                 </button>
               </div>
             </div>
+            <!-- /View content-->
           </div>
-
         </div>
       </main>
       <aside class="aside-menu">
diff --git a/src/base-progress.html b/src/base-progress.html
index 5586e42bf..b2e7222aa 100644
--- a/src/base-progress.html
+++ b/src/base-progress.html
@@ -339,7 +339,9 @@
           </li>
         </ol>
         <div class="container-fluid">
+          <!-- Styles required by this view-->
           <div class="animated fadeIn">
+            <!-- View content-->
             <div class="card">
               <div class="card-header">
                 Progress
@@ -464,8 +466,8 @@
                 </div>
               </div>
             </div>
+            <!-- /View content-->
           </div>
-
         </div>
       </main>
       <aside class="aside-menu">
@@ -775,5 +777,6 @@ <h6>System Utilization</h6>
     <script src="node_modules/pace-progress/pace.min.js"></script>
     <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
     <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
+    <!-- Plugins and scripts required by this view-->
   </body>
 </html>
\ No newline at end of file
diff --git a/src/base-scrollspy.html b/src/base-scrollspy.html
index a788e6153..2e60842ce 100644
--- a/src/base-scrollspy.html
+++ b/src/base-scrollspy.html
@@ -339,7 +339,9 @@
           </li>
         </ol>
         <div class="container-fluid">
+          <!-- Styles required by this view-->
           <div class="animated fadeIn">
+            <!-- View content-->
             <div class="card">
               <div class="card-header">
                 Scrollspy
@@ -434,8 +436,8 @@ <h4 id="list-item-4">Item 4</h4>
                 </div>
               </div>
             </div>
+            <!-- /View content-->
           </div>
-
         </div>
       </main>
       <aside class="aside-menu">
@@ -745,5 +747,6 @@ <h6>System Utilization</h6>
     <script src="node_modules/pace-progress/pace.min.js"></script>
     <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
     <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
+    <!-- Plugins and scripts required by this view-->
   </body>
 </html>
\ No newline at end of file
diff --git a/src/base-switches.html b/src/base-switches.html
index f209ce06e..c0d695711 100644
--- a/src/base-switches.html
+++ b/src/base-switches.html
@@ -339,8 +339,9 @@
           </li>
         </ol>
         <div class="container-fluid">
+          <!-- Styles required by this view-->
           <div class="animated fadeIn">
-
+            <!-- View content-->
             <div class="row">
               <div class="col-md-12">
                 <div class="card">
@@ -1303,8 +1304,8 @@
 
             </div>
             <!--/.row-->
+            <!-- /View content-->
           </div>
-
         </div>
       </main>
       <aside class="aside-menu">
@@ -1614,5 +1615,6 @@ <h6>System Utilization</h6>
     <script src="node_modules/pace-progress/pace.min.js"></script>
     <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
     <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
+    <!-- Plugins and scripts required by this view-->
   </body>
 </html>
\ No newline at end of file
diff --git a/src/base-tables.html b/src/base-tables.html
index 98f7e733d..91adf2d47 100644
--- a/src/base-tables.html
+++ b/src/base-tables.html
@@ -339,7 +339,9 @@
           </li>
         </ol>
         <div class="container-fluid">
+          <!-- Styles required by this view-->
           <div class="animated fadeIn">
+            <!-- View content-->
             <div class="row">
               <div class="col-lg-6">
                 <div class="card">
@@ -767,8 +769,8 @@
               <!--/.col-->
             </div>
             <!--/.row-->
+            <!-- /View content-->
           </div>
-
         </div>
       </main>
       <aside class="aside-menu">
@@ -1078,5 +1080,6 @@ <h6>System Utilization</h6>
     <script src="node_modules/pace-progress/pace.min.js"></script>
     <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
     <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
+    <!-- Plugins and scripts required by this view-->
   </body>
 </html>
\ No newline at end of file
diff --git a/src/base-tabs.html b/src/base-tabs.html
index 31cbe8ec0..8d94dfd1d 100644
--- a/src/base-tabs.html
+++ b/src/base-tabs.html
@@ -339,7 +339,9 @@
           </li>
         </ol>
         <div class="container-fluid">
+          <!-- Styles required by this view-->
           <div class="animated fadeIn">
+            <!-- View content-->
             <div class="row">
               <div class="col-md-6 mb-4">
                 <ul class="nav nav-tabs" role="tablist">
@@ -475,8 +477,8 @@
               <!--/.col-->
             </div>
             <!--/.row-->
+            <!-- /View content-->
           </div>
-
         </div>
       </main>
       <aside class="aside-menu">
@@ -786,5 +788,6 @@ <h6>System Utilization</h6>
     <script src="node_modules/pace-progress/pace.min.js"></script>
     <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
     <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
+    <!-- Plugins and scripts required by this view-->
   </body>
 </html>
\ No newline at end of file
diff --git a/src/base-tooltips.html b/src/base-tooltips.html
index 8c69029ef..74d281545 100644
--- a/src/base-tooltips.html
+++ b/src/base-tooltips.html
@@ -339,7 +339,9 @@
           </li>
         </ol>
         <div class="container-fluid">
+          <!-- Styles required by this view-->
           <div class="animated fadeIn">
+            <!-- View content-->
             <div class="card">
               <div class="card-header">
                 Tooltips
@@ -378,8 +380,8 @@
                 <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="" data-original-title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">Tooltip with HTML</button>
               </div>
             </div>
+            <!-- /View content-->
           </div>
-
         </div>
       </main>
       <aside class="aside-menu">
diff --git a/src/blank.html b/src/blank.html
index a4793848f..657195320 100644
--- a/src/blank.html
+++ b/src/blank.html
@@ -339,8 +339,10 @@
           </li>
         </ol>
         <div class="container-fluid">
+          <!-- Styles required by this view-->
           <div class="animated fadeIn">
-
+            <!-- View content-->
+            <!-- /View content-->
           </div>
         </div>
       </main>
@@ -651,5 +653,6 @@ <h6>System Utilization</h6>
     <script src="node_modules/pace-progress/pace.min.js"></script>
     <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
     <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
+    <!-- Plugins and scripts required by this view-->
   </body>
 </html>
\ No newline at end of file
diff --git a/src/buttons-brand-buttons.html b/src/buttons-brand-buttons.html
index 9e03c3731..75df2a56c 100644
--- a/src/buttons-brand-buttons.html
+++ b/src/buttons-brand-buttons.html
@@ -339,7 +339,9 @@
           </li>
         </ol>
         <div class="container-fluid">
+          <!-- Styles required by this view-->
           <div class="animated fadeIn">
+            <!-- View content-->
             <div class="row">
               <div class="col-12">
                 <div class="card">
@@ -1182,8 +1184,8 @@ <h6>Size Large
               <!--/.col-->
             </div>
             <!--/.row-->
+            <!-- /View content-->
           </div>
-
         </div>
       </main>
       <aside class="aside-menu">
@@ -1493,5 +1495,6 @@ <h6>System Utilization</h6>
     <script src="node_modules/pace-progress/pace.min.js"></script>
     <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
     <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
+    <!-- Plugins and scripts required by this view-->
   </body>
 </html>
\ No newline at end of file
diff --git a/src/buttons-button-group.html b/src/buttons-button-group.html
index e87824e55..f2571ca1e 100644
--- a/src/buttons-button-group.html
+++ b/src/buttons-button-group.html
@@ -339,7 +339,9 @@
           </li>
         </ol>
         <div class="container-fluid">
+          <!-- Styles required by this view-->
           <div class="animated fadeIn">
+            <!-- View content-->
             <div class="row">
               <div class="col-md-6">
                 <div class="card">
@@ -537,8 +539,8 @@
                 </div>
               </div>
             </div>
+            <!-- /View content-->
           </div>
-
         </div>
       </main>
       <aside class="aside-menu">
@@ -848,5 +850,6 @@ <h6>System Utilization</h6>
     <script src="node_modules/pace-progress/pace.min.js"></script>
     <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
     <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
+    <!-- Plugins and scripts required by this view-->
   </body>
 </html>
\ No newline at end of file
diff --git a/src/buttons-buttons.html b/src/buttons-buttons.html
index d50ec93ef..96bffb921 100644
--- a/src/buttons-buttons.html
+++ b/src/buttons-buttons.html
@@ -339,7 +339,9 @@
           </li>
         </ol>
         <div class="container-fluid">
+          <!-- Styles required by this view-->
           <div class="animated fadeIn">
+            <!-- View content-->
             <div class="card">
               <div class="card-header">
                 <strong>Standard Buttons</strong>
@@ -1002,8 +1004,8 @@
               <!--/.col-->
             </div>
             <!--/.row-->
+            <!-- /View content-->
           </div>
-
         </div>
       </main>
       <aside class="aside-menu">
@@ -1313,5 +1315,6 @@ <h6>System Utilization</h6>
     <script src="node_modules/pace-progress/pace.min.js"></script>
     <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
     <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
+    <!-- Plugins and scripts required by this view-->
   </body>
 </html>
\ No newline at end of file
diff --git a/src/buttons-dropdowns.html b/src/buttons-dropdowns.html
index 9237e23ef..a8e8da405 100644
--- a/src/buttons-dropdowns.html
+++ b/src/buttons-dropdowns.html
@@ -339,7 +339,9 @@
           </li>
         </ol>
         <div class="container-fluid">
+          <!-- Styles required by this view-->
           <div class="animated fadeIn">
+            <!-- View content-->
             <div class="row">
               <div class="col">
                 <div class="card">
@@ -729,8 +731,8 @@ <h6 class="dropdown-header">Dropdown header</h6>
                 </div>
               </div>
             </div>
+            <!-- /View content-->
           </div>
-
         </div>
       </main>
       <aside class="aside-menu">
@@ -1040,5 +1042,6 @@ <h6>System Utilization</h6>
     <script src="node_modules/pace-progress/pace.min.js"></script>
     <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
     <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
+    <!-- Plugins and scripts required by this view-->
   </body>
 </html>
\ No newline at end of file
diff --git a/src/charts.html b/src/charts.html
index d1fd98755..06209ed9f 100644
--- a/src/charts.html
+++ b/src/charts.html
@@ -339,7 +339,9 @@
           </li>
         </ol>
         <div class="container-fluid">
+          <!-- Styles required by this view-->
           <div class="animated fadeIn">
+            <!-- View content-->
             <div class="card-columns cols-2">
               <div class="card">
                 <div class="card-header">
@@ -432,8 +434,8 @@
                 </div>
               </div>
             </div>
+            <!-- /View content-->
           </div>
-
         </div>
       </main>
       <aside class="aside-menu">
diff --git a/src/colors.html b/src/colors.html
index 2da646e5d..adb567519 100644
--- a/src/colors.html
+++ b/src/colors.html
@@ -339,7 +339,9 @@
           </li>
         </ol>
         <div class="container-fluid">
+          <!-- Styles required by this view-->
           <div class="animated fadeIn">
+            <!-- View content-->
             <div class="card">
               <div class="card-header">
                 <i class="icon-drop"></i> Theme colors
@@ -479,8 +481,8 @@ <h6>Cyan Color</h6>
                 </div>
               </div>
             </div>
+            <!-- /View content-->
           </div>
-
         </div>
       </main>
       <aside class="aside-menu">
diff --git a/src/icons-flags.html b/src/icons-flags.html
index 3456e255b..de61c657f 100644
--- a/src/icons-flags.html
+++ b/src/icons-flags.html
@@ -339,9 +339,10 @@
           </li>
         </ol>
         <div class="container-fluid">
+          <!-- Styles required by this view-->
           <link href="node_modules/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
-
           <div class="animated fadeIn">
+            <!-- View content-->
             <div class="card">
               <div class="card-header">
                 <i class="fa fa-font-awesome"></i> Flags
@@ -1352,8 +1353,8 @@
                 </div>
               </div>
             </div>
+            <!-- /View content-->
           </div>
-
         </div>
       </main>
       <aside class="aside-menu">
@@ -1663,5 +1664,6 @@ <h6>System Utilization</h6>
     <script src="node_modules/pace-progress/pace.min.js"></script>
     <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
     <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
+    <!-- Plugins and scripts required by this view-->
   </body>
 </html>
\ No newline at end of file
diff --git a/src/icons-font-awesome.html b/src/icons-font-awesome.html
index 36767a207..d77078726 100644
--- a/src/icons-font-awesome.html
+++ b/src/icons-font-awesome.html
@@ -339,7 +339,9 @@
           </li>
         </ol>
         <div class="container-fluid">
+          <!-- Styles required by this view-->
           <div class="animated fadeIn">
+            <!-- View content-->
             <div class="card" id="new47">
               <div class="card-header">
                 <i class="fa fa-font-awesome"></i> 50 New Icons in 4.7</div>
@@ -4989,6 +4991,7 @@ <h4>
                 </div>
               </div>
             </div>
+            <!-- /View content-->
           </div>
         </div>
       </main>
@@ -5299,5 +5302,6 @@ <h6>System Utilization</h6>
     <script src="node_modules/pace-progress/pace.min.js"></script>
     <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
     <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
+    <!-- Plugins and scripts required by this view-->
   </body>
 </html>
\ No newline at end of file
diff --git a/src/icons-simple-line-icons.html b/src/icons-simple-line-icons.html
index 789fc4f11..06669246e 100644
--- a/src/icons-simple-line-icons.html
+++ b/src/icons-simple-line-icons.html
@@ -339,7 +339,9 @@
           </li>
         </ol>
         <div class="container-fluid">
+          <!-- Styles required by this view-->
           <div class="animated fadeIn">
+            <!-- View content-->
             <div class="card card-default">
               <div class="card-header">
                 <i class="fa fa-picture-o"></i> Simple Line Icons
@@ -1081,8 +1083,10 @@
 
                 </div>
                 <!--/.row-->
+                
               </div>
             </div>
+            <!-- /View content-->
           </div>
         </div>
       </main>
@@ -1393,5 +1397,6 @@ <h6>System Utilization</h6>
     <script src="node_modules/pace-progress/pace.min.js"></script>
     <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
     <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
+    <!-- Plugins and scripts required by this view-->
   </body>
 </html>
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 8edde2999..11ae29c75 100644
--- a/src/index.html
+++ b/src/index.html
@@ -339,7 +339,9 @@
           </li>
         </ol>
         <div class="container-fluid">
+          <!-- Styles required by this view-->
           <div class="animated fadeIn">
+            <!-- View content-->
             <div class="row">
               <div class="col-sm-6 col-lg-3">
                 <div class="card text-white bg-primary">
@@ -1081,8 +1083,8 @@ <h4 class="card-title mb-0">Traffic</h4>
               <!--/.col-->
             </div>
             <!--/.row-->
+            <!-- /View content-->
           </div>
-
         </div>
       </main>
       <aside class="aside-menu">
diff --git a/src/login.html b/src/login.html
index 617b923c6..7118dedb7 100644
--- a/src/login.html
+++ b/src/login.html
@@ -79,5 +79,6 @@ <h2>Sign up</h2>
     <script src="node_modules/pace-progress/pace.min.js"></script>
     <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
     <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
+    <!-- Plugins and scripts required by this view-->
   </body>
 </html>
\ No newline at end of file
diff --git a/src/notifications-alerts.html b/src/notifications-alerts.html
index 2dcfe2dfc..5bdcef496 100644
--- a/src/notifications-alerts.html
+++ b/src/notifications-alerts.html
@@ -339,7 +339,9 @@
           </li>
         </ol>
         <div class="container-fluid">
+          <!-- Styles required by this view-->
           <div class="animated fadeIn">
+            <!-- View content-->
             <div class="row">
               <div class="col-lg-6">
                 <div class="card">
@@ -462,8 +464,8 @@ <h4 class="alert-heading">Well done!</h4>
 
             </div>
             <!--/.row-->
+            <!-- /View content-->
           </div>
-
         </div>
       </main>
       <aside class="aside-menu">
@@ -773,5 +775,6 @@ <h6>System Utilization</h6>
     <script src="node_modules/pace-progress/pace.min.js"></script>
     <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
     <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
+    <!-- Plugins and scripts required by this view-->
   </body>
 </html>
\ No newline at end of file
diff --git a/src/notifications-badge.html b/src/notifications-badge.html
index 55c8cc71c..3659b1b9c 100644
--- a/src/notifications-badge.html
+++ b/src/notifications-badge.html
@@ -339,7 +339,9 @@
           </li>
         </ol>
         <div class="container-fluid">
+          <!-- Styles required by this view-->
           <div class="animated fadeIn">
+            <!-- View content-->
             <div class="row">
               <div class="col-lg-6">
                 <div class="card">
@@ -431,8 +433,8 @@ <h6>Example heading
 
             </div>
             <!--/.row-->
+            <!-- /View content-->
           </div>
-
         </div>
       </main>
       <aside class="aside-menu">
@@ -742,5 +744,6 @@ <h6>System Utilization</h6>
     <script src="node_modules/pace-progress/pace.min.js"></script>
     <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
     <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
+    <!-- Plugins and scripts required by this view-->
   </body>
 </html>
\ No newline at end of file
diff --git a/src/notifications-modals.html b/src/notifications-modals.html
index 99159d20c..a012db0a7 100644
--- a/src/notifications-modals.html
+++ b/src/notifications-modals.html
@@ -339,7 +339,9 @@
           </li>
         </ol>
         <div class="container-fluid">
+          <!-- Styles required by this view-->
           <div class="animated fadeIn">
+            <!-- View content-->
             <div class="row">
               <div class="col-lg-12">
                 <div class="card">
@@ -379,192 +381,191 @@
               <!--/.col-->
             </div>
             <!--/.row-->
-          </div>
-
-          <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-            <div class="modal-dialog" role="document">
-              <div class="modal-content">
-                <div class="modal-header">
-                  <h4 class="modal-title">Modal title</h4>
-                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                  </button>
-                </div>
-                <div class="modal-body">
-                  <p>One fine body&hellip;</p>
-                </div>
-                <div class="modal-footer">
-                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                  <button type="button" class="btn btn-primary">Save changes</button>
+            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+              <div class="modal-dialog" role="document">
+                <div class="modal-content">
+                  <div class="modal-header">
+                    <h4 class="modal-title">Modal title</h4>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                      <span aria-hidden="true">&times;</span>
+                    </button>
+                  </div>
+                  <div class="modal-body">
+                    <p>One fine body&hellip;</p>
+                  </div>
+                  <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                    <button type="button" class="btn btn-primary">Save changes</button>
+                  </div>
                 </div>
+                <!-- /.modal-content -->
               </div>
-              <!-- /.modal-content -->
+              <!-- /.modal-dialog -->
             </div>
-            <!-- /.modal-dialog -->
-          </div>
-          <!-- /.modal -->
+            <!-- /.modal -->
 
-          <div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-            <div class="modal-dialog modal-lg" role="document">
-              <div class="modal-content">
-                <div class="modal-header">
-                  <h4 class="modal-title">Modal title</h4>
-                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                  </button>
-                </div>
-                <div class="modal-body">
-                  <p>One fine body&hellip;</p>
-                </div>
-                <div class="modal-footer">
-                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                  <button type="button" class="btn btn-primary">Save changes</button>
+            <div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+              <div class="modal-dialog modal-lg" role="document">
+                <div class="modal-content">
+                  <div class="modal-header">
+                    <h4 class="modal-title">Modal title</h4>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                      <span aria-hidden="true">&times;</span>
+                    </button>
+                  </div>
+                  <div class="modal-body">
+                    <p>One fine body&hellip;</p>
+                  </div>
+                  <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                    <button type="button" class="btn btn-primary">Save changes</button>
+                  </div>
                 </div>
+                <!-- /.modal-content -->
               </div>
-              <!-- /.modal-content -->
+              <!-- /.modal-dialog -->
             </div>
-            <!-- /.modal-dialog -->
-          </div>
-          <!-- /.modal -->
+            <!-- /.modal -->
 
-          <div class="modal fade" id="smallModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-            <div class="modal-dialog modal-sm" role="document">
-              <div class="modal-content">
-                <div class="modal-header">
-                  <h4 class="modal-title">Modal title</h4>
-                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                  </button>
-                </div>
-                <div class="modal-body">
-                  <p>One fine body&hellip;</p>
-                </div>
-                <div class="modal-footer">
-                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                  <button type="button" class="btn btn-primary">Save changes</button>
+            <div class="modal fade" id="smallModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+              <div class="modal-dialog modal-sm" role="document">
+                <div class="modal-content">
+                  <div class="modal-header">
+                    <h4 class="modal-title">Modal title</h4>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                      <span aria-hidden="true">&times;</span>
+                    </button>
+                  </div>
+                  <div class="modal-body">
+                    <p>One fine body&hellip;</p>
+                  </div>
+                  <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                    <button type="button" class="btn btn-primary">Save changes</button>
+                  </div>
                 </div>
+                <!-- /.modal-content -->
               </div>
-              <!-- /.modal-content -->
+              <!-- /.modal-dialog -->
             </div>
-            <!-- /.modal-dialog -->
-          </div>
-          <!-- /.modal -->
+            <!-- /.modal -->
 
-          <div class="modal fade" id="primaryModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-            <div class="modal-dialog modal-primary" role="document">
-              <div class="modal-content">
-                <div class="modal-header">
-                  <h4 class="modal-title">Modal title</h4>
-                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                  </button>
-                </div>
-                <div class="modal-body">
-                  <p>One fine body&hellip;</p>
-                </div>
-                <div class="modal-footer">
-                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                  <button type="button" class="btn btn-primary">Save changes</button>
+            <div class="modal fade" id="primaryModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+              <div class="modal-dialog modal-primary" role="document">
+                <div class="modal-content">
+                  <div class="modal-header">
+                    <h4 class="modal-title">Modal title</h4>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                      <span aria-hidden="true">&times;</span>
+                    </button>
+                  </div>
+                  <div class="modal-body">
+                    <p>One fine body&hellip;</p>
+                  </div>
+                  <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                    <button type="button" class="btn btn-primary">Save changes</button>
+                  </div>
                 </div>
+                <!-- /.modal-content -->
               </div>
-              <!-- /.modal-content -->
+              <!-- /.modal-dialog -->
             </div>
-            <!-- /.modal-dialog -->
-          </div>
-          <!-- /.modal -->
+            <!-- /.modal -->
 
-          <div class="modal fade" id="successModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-            <div class="modal-dialog modal-success" role="document">
-              <div class="modal-content">
-                <div class="modal-header">
-                  <h4 class="modal-title">Modal title</h4>
-                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                  </button>
-                </div>
-                <div class="modal-body">
-                  <p>One fine body&hellip;</p>
-                </div>
-                <div class="modal-footer">
-                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                  <button type="button" class="btn btn-success">Save changes</button>
+            <div class="modal fade" id="successModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+              <div class="modal-dialog modal-success" role="document">
+                <div class="modal-content">
+                  <div class="modal-header">
+                    <h4 class="modal-title">Modal title</h4>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                      <span aria-hidden="true">&times;</span>
+                    </button>
+                  </div>
+                  <div class="modal-body">
+                    <p>One fine body&hellip;</p>
+                  </div>
+                  <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                    <button type="button" class="btn btn-success">Save changes</button>
+                  </div>
                 </div>
+                <!-- /.modal-content -->
               </div>
-              <!-- /.modal-content -->
+              <!-- /.modal-dialog -->
             </div>
-            <!-- /.modal-dialog -->
-          </div>
-          <!-- /.modal -->
+            <!-- /.modal -->
 
-          <div class="modal fade" id="warningModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-            <div class="modal-dialog modal-warning" role="document">
-              <div class="modal-content">
-                <div class="modal-header">
-                  <h4 class="modal-title">Modal title</h4>
-                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                  </button>
-                </div>
-                <div class="modal-body">
-                  <p>One fine body&hellip;</p>
-                </div>
-                <div class="modal-footer">
-                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                  <button type="button" class="btn btn-warning">Save changes</button>
+            <div class="modal fade" id="warningModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+              <div class="modal-dialog modal-warning" role="document">
+                <div class="modal-content">
+                  <div class="modal-header">
+                    <h4 class="modal-title">Modal title</h4>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                      <span aria-hidden="true">&times;</span>
+                    </button>
+                  </div>
+                  <div class="modal-body">
+                    <p>One fine body&hellip;</p>
+                  </div>
+                  <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                    <button type="button" class="btn btn-warning">Save changes</button>
+                  </div>
                 </div>
+                <!-- /.modal-content -->
               </div>
-              <!-- /.modal-content -->
+              <!-- /.modal-dialog -->
             </div>
-            <!-- /.modal-dialog -->
-          </div>
-          <!-- /.modal -->
+            <!-- /.modal -->
 
-          <div class="modal fade" id="dangerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-            <div class="modal-dialog modal-danger" role="document">
-              <div class="modal-content">
-                <div class="modal-header">
-                  <h4 class="modal-title">Modal title</h4>
-                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                  </button>
-                </div>
-                <div class="modal-body">
-                  <p>One fine body&hellip;</p>
-                </div>
-                <div class="modal-footer">
-                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                  <button type="button" class="btn btn-danger">Save changes</button>
+            <div class="modal fade" id="dangerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+              <div class="modal-dialog modal-danger" role="document">
+                <div class="modal-content">
+                  <div class="modal-header">
+                    <h4 class="modal-title">Modal title</h4>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                      <span aria-hidden="true">&times;</span>
+                    </button>
+                  </div>
+                  <div class="modal-body">
+                    <p>One fine body&hellip;</p>
+                  </div>
+                  <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                    <button type="button" class="btn btn-danger">Save changes</button>
+                  </div>
                 </div>
+                <!-- /.modal-content -->
               </div>
-              <!-- /.modal-content -->
+              <!-- /.modal-dialog -->
             </div>
-            <!-- /.modal-dialog -->
-          </div>
-          <!-- /.modal -->
+            <!-- /.modal -->
 
-          <div class="modal fade" id="infoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-            <div class="modal-dialog modal-info" role="document">
-              <div class="modal-content">
-                <div class="modal-header">
-                  <h4 class="modal-title">Modal title</h4>
-                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                  </button>
-                </div>
-                <div class="modal-body">
-                  <p>One fine body&hellip;</p>
-                </div>
-                <div class="modal-footer">
-                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                  <button type="button" class="btn btn-info">Save changes</button>
+            <div class="modal fade" id="infoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+              <div class="modal-dialog modal-info" role="document">
+                <div class="modal-content">
+                  <div class="modal-header">
+                    <h4 class="modal-title">Modal title</h4>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                      <span aria-hidden="true">&times;</span>
+                    </button>
+                  </div>
+                  <div class="modal-body">
+                    <p>One fine body&hellip;</p>
+                  </div>
+                  <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                    <button type="button" class="btn btn-info">Save changes</button>
+                  </div>
                 </div>
+                <!-- /.modal-content -->
               </div>
-              <!-- /.modal-content -->
+              <!-- /.modal-dialog -->
             </div>
-            <!-- /.modal-dialog -->
+            <!-- /.modal -->
+            <!-- /View content-->
           </div>
-          <!-- /.modal -->
-
         </div>
       </main>
       <aside class="aside-menu">
@@ -874,5 +875,6 @@ <h6>System Utilization</h6>
     <script src="node_modules/pace-progress/pace.min.js"></script>
     <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
     <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
+    <!-- Plugins and scripts required by this view-->
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/src/register.html b/src/register.html
index f747efb6e..454c7289f 100644
--- a/src/register.html
+++ b/src/register.html
@@ -93,5 +93,6 @@ <h1>Register</h1>
     <script src="node_modules/pace-progress/pace.min.js"></script>
     <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
     <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
+    <!-- Plugins and scripts required by this view-->
   </body>
 </html>
\ No newline at end of file
diff --git a/src/typography.html b/src/typography.html
index 7ab890e0c..ca1a247a3 100644
--- a/src/typography.html
+++ b/src/typography.html
@@ -339,7 +339,9 @@
           </li>
         </ol>
         <div class="container-fluid">
+          <!-- Styles required by this view-->
           <div class="animated fadeIn">
+            <!-- View content-->
             <div class="card">
               <div class="card-header">
                 Headings
@@ -540,6 +542,7 @@
                 </div>
               </div>
             </div>
+            <!-- /View content-->
           </div>
         </div>
       </main>
@@ -850,5 +853,6 @@ <h6>System Utilization</h6>
     <script src="node_modules/pace-progress/pace.min.js"></script>
     <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
     <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
+    <!-- Plugins and scripts required by this view-->
   </body>
 </html>
\ No newline at end of file
diff --git a/src/widgets.html b/src/widgets.html
index 8545317ab..4ed7ab12c 100644
--- a/src/widgets.html
+++ b/src/widgets.html
@@ -339,7 +339,9 @@
           </li>
         </ol>
         <div class="container-fluid">
+          <!-- Styles required by this view-->
           <div class="animated fadeIn">
+            <!-- View content-->
             <div class="row">
               <div class="col-sm-6 col-lg-3">
                 <div class="card text-white bg-primary">
@@ -1175,8 +1177,8 @@
               <!--/.col-->
             </div>
             <!--/.row-->
+            <!-- /View content-->
           </div>
-
         </div>
       </main>
       <aside class="aside-menu">
@@ -1486,6 +1488,7 @@ <h6>System Utilization</h6>
     <script src="node_modules/pace-progress/pace.min.js"></script>
     <script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
     <script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>
+    <!-- Plugins and scripts required by this view-->
     <script src="node_modules/chart.js/dist/Chart.min.js"></script>
     <script src="node_modules/@coreui/coreui-plugin-chartjs-custom-tooltips/dist/js/custom-tooltips.min.js"></script>
     <script src="js/widgets.js"></script>