meranicosme · colbyallenc · Sep 19, 2019 · Sep 19, 2019 · colbyallenc · Sep 19, 2019
diff --git a/src/js/index.js b/src/js/index.js
@@ -1,4 +1,3 @@
 // CUSTOM
-// This works like the base.css file
 import './toggler';
 import './safe-focus';
diff --git a/src/markup/layout/collection.hbs b/src/markup/layout/collection.hbs
@@ -1,4 +1,3 @@
-
 {{#extend "drizzle"}}
   {{#content "main"}}
     <h1 class="drizzle-collection-heading drizzle-u-capitalize">

diff --git a/src/markup/layout/drizzle.hbs b/src/markup/layout/drizzle.hbs
@@ -1,28 +1,30 @@
 <!doctype html>
-<!-- this is the default layout for the drizzle interface -->
 <html class="drizzle-Layout no-js" lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="description" content="">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <title>{{title}}{{name}} | {{data "global.companyName"}} - Design System</title>
+<head>
+  <meta charset="utf-8">
+  <meta name="description" content="">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    {{> patterns.drizzle.partials.stylesheet-link-tags}}
-  </head>
-  <body class="drizzle-Layout-body">
-    {{> patterns.drizzle.partials.sidebar}}
+  <title>{{title}}{{name}} | {{data "global.companyName"}} - Design System</title>
 
-    <main id="mainContent" class="drizzle-Layout-main drizzle-u-cf {{main-class}}">
-      <div class="drizzle-u-pad drizzle-u-rhythm">
-        {{#block "body"}}
-          {{#block "main"}}
+  {{> patterns.drizzle.partials.stylesheet-link-tags}}
+</head>
+
+<body class="drizzle-Layout-body">
+  {{> patterns.drizzle.partials.sidebar}}
+
+  <main id="mainContent" class="drizzle-Layout-main drizzle-u-cf {{main-class}}">
+    <div class="drizzle-u-pad drizzle-u-rhythm">
+      {{#block "body"}}
+        {{#block "main"}}
 
-          {{/block}}
         {{/block}}
-      </div>
-    </main>
+      {{/block}}
+    </div>
+  </main>
+
+  {{> patterns.drizzle.partials.script-tags}}
+</body>
 
-    {{> patterns.drizzle.partials.script-tags}}
-  </body>
 </html>
diff --git a/src/markup/layout/page.hbs b/src/markup/layout/page.hbs
@@ -1,6 +1,7 @@
 <!doctype html>
 <!-- this is the default layout for pages in the design system -->
 <html class="no-js safe-focus" lang="en">
+
 <head>
   <meta charset="utf-8">
   <meta name="description" content="">
@@ -10,6 +11,7 @@
 
   {{> patterns.drizzle.partials.stylesheet-link-tags}}
 </head>
+
 <body class="{{body-class}}">
   <a class="c-btn c-btn--primary c-skip-to-content" href="#main-content">Skip to main content</a>
 
@@ -23,4 +25,5 @@
 
   <script src="/js/scripts.js"></script>
 </body>
+
 </html>
diff --git a/src/markup/pages/index.hbs b/src/markup/pages/index.hbs
@@ -6,7 +6,8 @@ main-class: drizzle-white-bg
 
 <h1 class="drizzle-heading-1">{{data "global.companyName"}} - Design System</h1>
 
-<p class="drizzle-p u-margin-bottom-xl">This UI toolkit is a highly-modular design system for rapid web page development. It contains different materials that can be assembled into more complex page layouts. It includes working examples, code snippets and documentation.</p>
+<p class="drizzle-p u-margin-bottom-xl">This UI toolkit is a highly-modular design system for rapid web page development. It contains different materials that can be assembled into more complex page layouts. It includes working examples, code
+  snippets and documentation.</p>
 
 <h2 class="drizzle-heading-2">Demo Pages</h2>
 <div class="u-margin-bottom-lg">
@@ -17,8 +18,6 @@ main-class: drizzle-white-bg
       </li>
     {{/each}}
   </ul>
-
-  <!-- for inside components -->
   <ul>
     {{#each (data "test")}}
       <li>

diff --git a/src/markup/patterns/components/defaults/heading.hbs b/src/markup/patterns/components/defaults/heading.hbs
@@ -3,7 +3,6 @@ name: Headings
 notes: |
   Use these heading classes on any element to add heading styles. This lets you apply heading styles for alternate heading levels as well. For example, `.c-heading-1` can go on an `<h1>`, but it can also go on an `<h2>`, or any other element that should look like the styles defined in the `.c-heading-1` class.
 ---
-
 <div class="c-heading-1">Heading 1</div>
 <div class="c-heading-2">Heading 2</div>
 <div class="c-heading-3">Heading 3</div>

diff --git a/src/markup/patterns/drizzle/partials/item.hbs b/src/markup/patterns/drizzle/partials/item.hbs
@@ -11,8 +11,6 @@ hidden: true
       </h2>
     </div>
     {{/drizzle.labelheader}}
-
-
     {{!-- Notes --}}
     {{#if data.notes}}
       <div class="drizzle-Item-notes drizzle-u-rhythm drizzle-pattern__info">
@@ -40,7 +38,6 @@ hidden: true
         </table>
       </div>
     {{/if}}
-
     {{#if data.contentBlocks}}
       <div class="drizzle-Item-notes drizzle-u-rhythm">
         <table style="width: 100%;">
@@ -61,8 +58,6 @@ hidden: true
         </table>
       </div>
     {{/if}}
-
-
     {{!-- Links --}}
     {{#if data.links}}
       <div class="drizzle-u-inlineBlock">

diff --git a/src/markup/patterns/drizzle/partials/sidebar.hbs b/src/markup/patterns/drizzle/partials/sidebar.hbs
@@ -16,7 +16,6 @@ hidden: true
     <!--This is hidden, because it's not used. But it's here, because the JS would throw errors if it wasn't. :(-->
       <a class="drizzle-Nav-header-toggle" href="#nav" style="display: none;">a</a>
     </div>
-
     <div class="drizzle-nav__content c-expandable-content__content" aria-hidden="false" id="nav-menu" aria-labelledby="nav-content">
       <div>
         <h2 class="drizzle-nav__collection-title">Components</h2>

diff --git a/src/scss/components/_btn.scss b/src/scss/components/_btn.scss
@@ -1,7 +1,5 @@
 .c-btn {
-  // Reset default <button> styles
   @include unbuttonize;
-  // Reset default <a> styles
   text-decoration: none;
   font-weight: 800;
   display: inline-block;

diff --git a/src/scss/design-system-interface.scss b/src/scss/design-system-interface.scss
@@ -1,20 +1,16 @@
 $c-dark-brown: #483700;
 $c-pale: #F9EFDC;
 $primary-font: "AvenirNext", "Avenir Next", sans-serif;
-$c-orange: #F26531;
-//
-// FONT SIZES
-//
+$c-orange: #F26531; 
+
 $font-size-xxs: 0.875rem;
 $font-size-xs: 1rem;
 $font-size-sm: 1.125rem;
 $font-size-md: 1.5rem;
 $font-size-lg: 2rem;
 $font-size-xl: 3.625rem;
 $font-size-xxl: 4.5rem;
-//
-// FONT WEIGHTS
-//
+
 $weight-regular: 400;
 $weight-medium: 600;
 $weight-demi: 700;
@@ -79,6 +75,7 @@ $weight-xbold: 900;
     grid-template-columns: repeat(auto-fit, 15rem);
     grid-gap: 1.3rem;
     justify-content: space-around;
+
     @media (min-width: 960px) {
       display: block !important;
     }
@@ -96,6 +93,7 @@ $weight-xbold: 900;
       border: none;
       font-family: $primary-font;
     }
+
     @media (min-width: 960px) {
       margin-bottom: 0;
     }
@@ -233,7 +231,7 @@ $weight-xbold: 900;
     padding-bottom: 1rem;
     color: $c-dark-brown;
     margin: 0;
-    
+
     @media (min-width: 30em) {
       font-size: $font-size-lg;
     }

diff --git a/src/scss/elements/_body.scss b/src/scss/elements/_body.scss
@@ -1,9 +1,7 @@
 body {
   font-family: $primary-font;
   line-height: $line-height-normal;
-
   color: $c-dark-brown;
-
   // This forces a scrollbar
   min-height: 100.1vh;
 }
diff --git a/src/scss/settings/_variables.scss b/src/scss/settings/_variables.scss
@@ -17,7 +17,6 @@ $font-size-xxl: 4.5rem;
 //
 // FONT WEIGHTS
 //
-
 $weight-regular: 400;
 $weight-medium: 600;
 $weight-demi: 700;

diff --git a/src/scss/tools/_mixins.scss b/src/scss/tools/_mixins.scss
@@ -1,4 +1,3 @@
-
 @mixin unbuttonize {
   // This removes styles added by default to button elements.
   // For when something should semantically be a button,
@@ -22,8 +21,8 @@
   font-size: $font-size-sm;
   font-family: $primary-font;
 
-  &:only-child,
-  &:last-child {
+  &:last-child,
+  &:only-child {
     margin-bottom: 0;
   }
 }
@@ -37,8 +36,8 @@
   transition: color ease-in 0.2s;
 
   &:hover {
-      color: lighten($c-default-link, 15%);
-}
+    color: lighten($c-default-link, 15%);
+  }
 }
 
 @mixin default-link-ul {
@@ -50,9 +49,7 @@
 @mixin default-ol-ul {
   margin: 0;
   padding: 0 0 0 1.1rem;
-
   list-style-type: none;
-
   counter-reset: generic-ol-counter;
 
   > li {
@@ -72,15 +69,12 @@
     &::before {
       counter-increment: generic-ol-counter;
       content: counter(generic-ol-counter) ". ";
-
       position: absolute;
       right: 100%;
       margin-right: 0.4rem;
-
       font-size: $font-size-sm;
       font-weight: $weight-medium;
       font-family: $primary-font;
-
       // Try to align these baselines with text baselines
       margin-top: 0.2rem;
     }
@@ -95,12 +89,9 @@
       display: inline-block;
       width: 0.5rem;
       height: 0.5rem;
-
       border-radius: 50%;
-
       margin-left: -1rem;
       margin-right: 0.5rem;
-
       position: relative;
       top: -0.1rem;
     }
@@ -193,9 +184,7 @@
     // it's visible on all backgrounds. It's marked as !important so this focus
     // state takes effect even when used on elements with higher-specificity
     // box-shadows applied to them. And because focus states are important. :)
-    box-shadow:
-      0 0 0 2px $c-safe-focus,
-      0 0 0 4px white !important;
+    box-shadow: 0 0 0 2px $c-safe-focus, 0 0 0 4px white !important;
   }
 }