CSS optimisations

Author: philwareham

src/assets/sass/designpatterns.scss

@@ -195,18 +195,14 @@ $dark-colors: (
  *
  * Example HTML:
  *
- * <ol class="design-patterns--breakpoints list--no-bullets clearfix">
+ * <ol class="design-patterns--breakpoints list--no-bullets">
  *     <li class="design-patterns--breakpoint-0">No breakpoint</li>
  *     <li class="design-patterns--breakpoint-1">Breakpoint 1</li>
  *     <li class="design-patterns--breakpoint-2">Breakpoint 2</li>
  *     <li class="design-patterns--breakpoint-3">Breakpoint 3</li>
  * </ol>
  */
 
-.design-patterns--breakpoints li {
-    float: left;
-}
-
 .design-patterns--breakpoint-0,
 .design-patterns--breakpoint-1,
 .design-patterns--breakpoint-2,

src/assets/sass/modules/_base.scss

@@ -26,27 +26,3 @@ input,
 button {
     touch-action: manipulation;
 }
-
-
-/* Clearfix
-   ========================================================================== */
-
-header,
-footer,
-nav ul,
-nav ol,
-.clearfix {
-    &::after {
-        content: "";
-        display: table;
-        clear: both;
-    }
-}
-
-/**
- * Basic float clearer.
- */
-
-.clear {
-    clear: both;
-}

src/assets/sass/modules/_print.scss

@@ -61,16 +61,6 @@ a {
     text-decoration: none;
 }
 
-/**
- *  Show long-form for abbreviations in print.
- */
-
-abbr[title] {
-    &::after {
-        content: " (" attr(title) ")";
-    }
-}
-
 /**
  * Harmonize size, style and vertical margin of headings.
  */
@@ -82,49 +72,44 @@ h1 {
     line-height: 36pt;
 }
 
+h2,
+h3,
+h4,
+h5,
+h6 {
+    orphans: 2;
+    widows: 2;
+    page-break-after: avoid;
+}
+
 h2 {
     margin: 14pt 0;
     font-size: 24pt;
     line-height: 28pt;
-    orphans: 2;
-    widows: 2;
-    page-break-after: avoid;
 }
 
 h3 {
     margin: 12pt 0;
     font-size: 18pt;
     line-height: 22pt;
-    orphans: 2;
-    widows: 2;
-    page-break-after: avoid;
 }
 
 h4 {
     margin: 11pt 0;
     font-size: 14pt;
     line-height: 18pt;
-    orphans: 2;
-    widows: 2;
-    page-break-after: avoid;
 }
 
 h5 {
     margin: 10pt 0;
     font-size: 12pt;
     line-height: 16pt;
-    orphans: 2;
-    widows: 2;
-    page-break-after: avoid;
 }
 
 h6 {
     margin: 9pt 0;
     font-size: 10pt;
     line-height: 14pt;
-    orphans: 2;
-    widows: 2;
-    page-break-after: avoid;
 }
 
 /**

src/assets/sass/modules/_responsive.scss

@@ -324,11 +324,11 @@
         }
 
         ul {
+            display: flex;
             width: 90%;
         }
 
         li {
-            float: left;
             border: 0;
 
             &:first-child,

src/assets/sass/modules/_typography.scss

@@ -104,24 +104,27 @@ h6,
     }
 }
 
+h1,
+h2,
+h3 {
+    letter-spacing: -0.25px;
+}
+
 h1 {
     margin: 0.6315789em 0; // 24px / 38px
     font-size: 2.375rem; // 38px / 16px
-    letter-spacing: -0.25px;
     line-height: 1.1842105; // 45px / 38px
 }
 
 h2 {
     margin: 0.8571429em 0; // 24px / 28px
     font-size: 1.75rem; // 28px / 16px
-    letter-spacing: -0.25px;
     line-height: 1.25; // 35px / 28px
 }
 
 h3 {
     margin: 1em 0; // 22px
     font-size: 1.375rem; // 22px / 16px
-    letter-spacing: -0.25px;
     line-height: 1.3181818; // 29px / 22px
 }
 

src/docs/design-patterns.html

@@ -186,7 +186,7 @@ <h2>Responsive grid</h2>
                         <p>Grid layout with 1 to 4 column options.</p>
 
                         <h3>Current active breakpoint</h3>
-                        <ol class="design-patterns--breakpoints list--no-bullets clearfix">
+                        <ol class="design-patterns--breakpoints list--no-bullets">
                             <li class="design-patterns--breakpoint-0">No breakpoint</li>
                             <li class="design-patterns--breakpoint-1">Breakpoint 1</li>
                             <li class="design-patterns--breakpoint-2">Breakpoint 2</li>