Create heading, form and button component, remove objects, add form example to page.html, add rem to container, remove pjax scss, add scroll object.

assets/styles/components/_button.scss

@@ -0,0 +1,8 @@
+.c-button {
+    padding: rem(15px) rem(20px);
+    background-color: lightgray;
+
+    @include u-hocus {
+        background-color: darkgray;
+    }
+}

assets/styles/components/_form.scss

@@ -1,27 +1,37 @@
 // ==========================================================================
-// Objects / Buttons
+// Form
 // ==========================================================================
+.c-form {
+
+}
+
+.c-form_item {
+    position: relative;
+    margin-bottom: rem(30px);
+}
 
 // Label
-// =============================================================================
+// ==========================================================================
-.o-label {
+.c-form_label {
     display: block;
-    margin-bottom: rem(15px);
+    margin-bottom: rem(10px);
 }
 
 // Input
-// =============================================================================
+// ==========================================================================
 $input-icon-color: 424242; // No #
 
-.o-input {
+.c-form_input {
     padding: rem(10px);
-    border-width: 1px;
+    border: 1px solid lightgray;
-    border-style: solid;
-    border-color: lightgray;
     background-color: white;
 
+    &:hover {
+        border-color: darkgray;
+    }
+
     &:focus {
-        border-color: gray;
+        border-color: dimgray;
     }
 
     &::placeholder {
@@ -30,42 +40,21 @@ $input-icon-color: 424242; // No #
 }
 
 // Checkbox
-// =============================================================================
+// ==========================================================================
 $checkbox: rem(18px);
 $checkbox-icon-color: $input-icon-color;
 
-.o-checkbox {
+.c-form_checkboxLabel {
-    position: absolute;
+    @extend .c-form_label;
-    width: 0;
-    opacity: 0;
-
-    &:focus {
-        + .o-checkbox-label {
-            &::before {
-                border-color: gray;
-            }
-        }
-    }
-
-    &:checked {
-        + .o-checkbox-label {
-            &::after {
-                opacity: 1;
-            }
-        }
-    }
-}
-
-.o-checkbox-label {
-    @extend .o-label;
 
     position: relative;
     display: inline-block;
-    margin-right: 0.5em;
+    margin-right: rem(10px);
+    margin-bottom: 0;
     padding-left: ($checkbox + rem(10px));
+    cursor: pointer;
 
     &::before, &::after {
-
         position: absolute;
         top: 50%;
         left: 0;
@@ -79,6 +68,7 @@ $checkbox-icon-color: $input-icon-color;
 
     &::before {
         background-color: $white;
+        border: 1px solid lightgray;
     }
 
     &::after {
@@ -86,22 +76,42 @@ $checkbox-icon-color: $input-icon-color;
         background-color: transparent;
         background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2210.5%22%20viewBox%3D%220%200%2013%2010.5%22%20enable-background%3D%22new%200%200%2013%2010.5%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill%3D%22%23#{$checkbox-icon-color}%22%20d%3D%22M4.8%205.8L2.4%203.3%200%205.7l4.8%204.8L13%202.4c0%200-2.4-2.4-2.4-2.4L4.8%205.8z%22%2F%3E%3C%2Fsvg%3E");
         background-position: center;
-        background-size: rem(13px);
+        background-size: rem(12px);
         background-repeat: no-repeat;
         opacity: 0;
     }
+
+    &:hover {
+        &::before {
+            border-color: darkgray;
+        }
+    }
+
+    .c-form_checkbox:focus + & {
+        &::before {
+            border-color: dimgray;
+        }
+    }
+
+    .c-form_checkbox:checked + & {
+        &::after {
+            opacity: 1;
+        }
+    }
+}
+
+.c-form_checkbox {
+    position: absolute;
+    width: 0;
+    opacity: 0;
 }
 
 // Radio
-// =============================================================================
+// ==========================================================================
 $radio-icon-color: $input-icon-color;
 
-.o-radio {
+.c-form_radioLabel {
-    @extend .o-checkbox;
+    @extend .c-form_checkboxLabel;
-}
-
-.o-radio-label {
-    @extend .o-checkbox-label;
 
     &::before, &::after {
         border-radius: 50%;
@@ -109,25 +119,22 @@ $radio-icon-color: $input-icon-color;
 
     &::after {
         background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20enable-background%3D%22new%200%200%2013%2013%22%20xml%3Aspace%3D%22preserve%22%3E%3Ccircle%20fill%3D%22%23#{$radio-icon-color}%22%20cx%3D%226.5%22%20cy%3D%226.5%22%20r%3D%226.5%22%2F%3E%3C%2Fsvg%3E");
-        background-size: rem(8px);
+        background-size: rem(6px);
     }
 }
 
+.c-form_radio {
+    @extend .c-form_checkbox;
+}
+
 // Select
 // =============================================================================
 $select-icon: rem(40px);
 $select-icon-color: $input-icon-color;
 
-.o-select {
+.c-form_select {
-    @extend .o-input;
-
-    position: relative;
-    z-index: 1;
-    padding-right: $select-icon;
-}
-
-.o-select-wrap {
     position: relative;
+    cursor: pointer;
 
     &::after {
         position: absolute;
@@ -138,17 +145,26 @@ $select-icon-color: $input-icon-color;
         width: $select-icon;
         background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2211.3%22%20viewBox%3D%220%200%2013%2011.3%22%20enable-background%3D%22new%200%200%2013%2011.3%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20fill%3D%22%23#{$select-icon-color}%22%20points%3D%226.5%2011.3%203.3%205.6%200%200%206.5%200%2013%200%209.8%205.6%20%22%2F%3E%3C%2Fsvg%3E");
         background-position: center;
-        background-size: rem(10px);
+        background-size: rem(8px);
         background-repeat: no-repeat;
         content: "";
         pointer-events: none;
     }
 }
 
+.c-form_select_input {
+    @extend .c-form_input;
+
+    position: relative;
+    z-index: 1;
+    padding-right: $select-icon;
+    cursor: pointer;
+}
+
 // Textarea
 // =============================================================================
-.o-textarea {
+.c-form_textarea {
-    @extend .o-input;
+    @extend .c-form_input;
 
-    min-height: rem(100px);
+    min-height: rem(200px);
 }

assets/styles/components/_heading.scss

@@ -0,0 +1,28 @@
+.c-heading {
+    line-height: $line-height-h;
+    margin-bottom: rem(30px);
+
+    &.-h1 {
+        font-size: rem($font-size-h1);
+    }
+
+    &.-h2 {
+        font-size: rem($font-size-h2);
+    }
+
+    &.-h3 {
+        font-size: rem($font-size-h3);
+    }
+
+    &.-h4 {
+        font-size: rem($font-size-h4);
+    }
+
+    &.-h5 {
+        font-size: rem($font-size-h5);
+    }
+
+    &.-h6 {
+        font-size: rem($font-size-h6);
+    }
+}

assets/styles/elements/_headings.scss

@@ -1,64 +0,0 @@
-// ==========================================================================
-// Base / Headings
-// ==========================================================================
-
-@mixin h {
-    margin-top: 0;
-    line-height: $line-height-h;
-}
-
-//
-// Provide a generic class to apply common heading styles.
-//
-// @example
-//   <p class="u-h"></p>
-//
-//
-.o-h {
-    @include h;
-}
-
-//
-// Styles for headings 1 through 6 with classes to provide
-// a double stranded heading hierarchy, e.g. we semantically
-// need an H2, but we want it to be sized like an H1:
-//
-// @example
-//   <h2 class="o-h1"></h2>
-//
-//
-h1, .o-h1 {
-    @extend .o-h;
-
-    font-size: rem($font-size-h1);
-}
-
-h2, .o-h2 {
-    @extend .o-h;
-
-    font-size: rem($font-size-h2);
-}
-
-h3, .o-h3 {
-    @extend .o-h;
-
-    font-size: rem($font-size-h3);
-}
-
-h4, .o-h4 {
-    @extend .o-h;
-
-    font-size: rem($font-size-h4);
-}
-
-h5, .o-h5 {
-    @extend .o-h;
-
-    font-size: rem($font-size-h5);
-}
-
-h6, .o-h6 {
-    @extend .o-h;
-
-    font-size: rem($font-size-h6);
-}

assets/styles/elements/_page.scss

@@ -73,9 +73,9 @@ body {
 }
 
 a {
+    color: $link-color;
+
     @include u-hocus {
         color: $link-hover-color;
     }
-
-    color: $link-color;
 }

assets/styles/generic/_button.scss

@@ -11,7 +11,7 @@
 // 6. Force all button-styled elements to appear clickable.
 //
 button,
-.o-button {
+.c-button {
     @include u-hocus {
         text-decoration: none;
     }

assets/styles/generic/_generic.scss

@@ -45,7 +45,6 @@ a {
     }
 }
 
-// Resets
 ul,
 ol {
     margin: 0;
@@ -59,6 +58,10 @@ figure {
     padding: 0;
 }
 
+h1, h2, h3, h4, h5, h6 {
+    margin: 0;
+}
+
 /**
  * 1. Single taps should be dispatched immediately on clickable elements
  */

assets/styles/main.scss

@@ -29,16 +29,13 @@
 // ==========================================================================
 @import "elements/fonts";
 @import "elements/page";
-@import "elements/headings";
 
 // Objects
 // ==========================================================================
+@import "objects/scroll";
 @import "objects/container";
 @import "objects/ratio";
 @import "objects/layout";
-@import "objects/form";
-@import "objects/button";
-@import "objects/pjax";
 // @import "objects/crop";
 // @import "objects/table";
 
@@ -49,6 +46,9 @@
 // Components
 // ==========================================================================
 @import "components/scrollbar";
+@import "components/heading";
+@import "components/button";
+@import "components/form";
 
 // Templates
 // ==========================================================================
@@ -61,6 +61,5 @@
 // @import "utilities/align";
 // @import "utilities/helpers";
 // @import "utilities/states";
-// @import "utilities/headings";
 // @import "utilities/spacing";
 // @import "utilities/print";

assets/styles/objects/_button.scss

@@ -1,11 +0,0 @@
-// ==========================================================================
-// Objects / Buttons
-// ==========================================================================
-.o-button {
-    @include u-hocus {
-        background-color: gray;
-    }
-
-    padding: rem(10px);
-    background-color: lightgray;
-}

assets/styles/objects/_container.scss

@@ -12,16 +12,10 @@
 // @link http://stackoverflow.com/a/13202141/140357
 //
 
-/* stylelint-disable */
-@if (type-of($container-width) != number) {
-    @error "`#{$container-width}` needs to be a number."
-}
-/* stylelint-enable */
-
 .o-container {
     margin-right: auto;
     margin-left: auto;
-    padding-right: $padding;
+    padding-right: rem($padding);
-    padding-left: $padding;
+    padding-left: rem($padding);
-    max-width: $container-width;
+    max-width: rem($container-width + ($padding * 2));
 }

assets/styles/objects/_pjax.scss

@@ -1,11 +0,0 @@
-
-.o-pjax_wrapper {
-    height: 100%;
-    overflow: hidden;
-	
-}
-
-.o-pjax_container {
-    height: 100%;
-    overflow: hidden;
-}

assets/styles/objects/_scroll.scss

@@ -0,0 +1,3 @@
+.o-scroll {
+    min-height: 100vh;
+}

assets/styles/utilities/_headings.scss

@@ -1,40 +0,0 @@
-// ==========================================================================
-// Utilities / Headings
-// ==========================================================================
-
-/**
- * Redefine all of our basic heading styles against utility classes so as to
- * provide larger (or smaller) generic font sizes. Anything more opinionated
- * than simple font-size changes should likely be applied via "o-" classes
- *
- * @example
- *   <p class="u-h1"></p>
- *
- * @requires base/headings
- * @link http://csswizardry.com/2016/02/managing-typography-on-large-apps/
- * @link https://github.com/inuitcss/inuitcss/blob/develop/utilities/_utilities.headings.scss
- */
-
-.u-h1 {
-    font-size: rem($font-size-h1) !important;
-}
-
-.u-h2 {
-    font-size: rem($font-size-h2) !important;
-}
-
-.u-h3 {
-    font-size: rem($font-size-h3) !important;
-}
-
-.u-h4 {
-    font-size: rem($font-size-h4) !important;
-}
-
-.u-h5 {
-    font-size: rem($font-size-h5) !important;
-}
-
-.u-h6 {
-    font-size: rem($font-size-h6) !important;
-}

assets/styles/utilities/_widths.scss

@@ -18,3 +18,9 @@
 $widths-fractions: 1 2 3 4 5 !default;
 
 @include widths($widths-fractions);
+
+.u-1\/2\@from-small {
+    @media (min-width: $from-small) {
+        width: span(1/2);
+    }
+}

www/assets/styles/main.css

@@ -345,6 +345,9 @@ figure {
   margin: 0;
   padding: 0; }
 
+h1, h2, h3, h4, h5, h6 {
+  margin: 0; }
+
 /**
  * 1. Single taps should be dispatched immediately on clickable elements
  */
@@ -430,7 +433,7 @@ textarea {
   resize: vertical; }
 
 button,
-.o-button {
+.c-button {
   display: inline-block;
   /* [1] */
   overflow: visible;
@@ -458,8 +461,8 @@ button,
   -ms-user-select: none;
   user-select: none; }
   button:focus, button:hover,
-  .o-button:focus,
+  .c-button:focus,
-  .o-button:hover {
+  .c-button:hover {
     text-decoration: none; }
 
 html {
@@ -521,36 +524,15 @@ a {
   a:focus, a:hover {
     color: #13097c; }
 
-.o-h, h1, .o-h1, h2, .o-h2, h3, .o-h3, h4, .o-h4, h5, .o-h5, h6, .o-h6 {
+.o-scroll {
-  margin-top: 0;
+  min-height: 100vh; }
-  line-height: 1.5; }
 
-h1, .o-h1 {
-  font-size: 2.25rem; }
-
-h2, .o-h2 {
-  font-size: 1.75rem; }
-
-h3, .o-h3 {
-  font-size: 1.5rem; }
-
-h4, .o-h4 {
-  font-size: 1.25rem; }
-
-h5, .o-h5 {
-  font-size: 1.125rem; }
-
-h6, .o-h6 {
-  font-size: 1rem; }
-
-/* stylelint-disable */
-/* stylelint-enable */
 .o-container {
   margin-right: auto;
   margin-left: auto;
-  padding-right: 60px;
+  padding-right: 3.75rem;
-  padding-left: 60px;
+  padding-left: 3.75rem;
-  max-width: 2000px; }
+  max-width: 132.5rem; }
 
 /**
  * Create ratio-bound content blocks, to keep media (e.g. images, videos) in
@@ -632,109 +614,6 @@ h6, .o-h6 {
   .o-layout.-reverse > .o-layout_item {
     direction: ltr; }
 
-.o-label, .o-checkbox-label, .o-radio-label {
-  display: block;
-  margin-bottom: 0.9375rem; }
-
-.o-input, .o-select, .o-textarea {
-  padding: 0.625rem;
-  border-width: 1px;
-  border-style: solid;
-  border-color: lightgray;
-  background-color: white; }
-  .o-input:focus, .o-select:focus, .o-textarea:focus {
-    border-color: gray; }
-  .o-input::-webkit-input-placeholder, .o-select::-webkit-input-placeholder, .o-textarea::-webkit-input-placeholder {
-    color: gray; }
-  .o-input::-moz-placeholder, .o-select::-moz-placeholder, .o-textarea::-moz-placeholder {
-    color: gray; }
-  .o-input:-ms-input-placeholder, .o-select:-ms-input-placeholder, .o-textarea:-ms-input-placeholder {
-    color: gray; }
-  .o-input::-ms-input-placeholder, .o-select::-ms-input-placeholder, .o-textarea::-ms-input-placeholder {
-    color: gray; }
-  .o-input::placeholder, .o-select::placeholder, .o-textarea::placeholder {
-    color: gray; }
-
-.o-checkbox, .o-radio {
-  position: absolute;
-  width: 0;
-  opacity: 0; }
-  .o-checkbox:focus + .o-checkbox-label::before, .o-radio:focus + .o-checkbox-label::before, .o-checkbox:focus + .o-radio-label::before, .o-radio:focus + .o-radio-label::before {
-    border-color: gray; }
-  .o-checkbox:checked + .o-checkbox-label::after, .o-radio:checked + .o-checkbox-label::after, .o-checkbox:checked + .o-radio-label::after, .o-radio:checked + .o-radio-label::after {
-    opacity: 1; }
-
-.o-checkbox-label, .o-radio-label {
-  position: relative;
-  display: inline-block;
-  margin-right: 0.5em;
-  padding-left: 1.75rem; }
-  .o-checkbox-label::before, .o-radio-label::before, .o-checkbox-label::after, .o-radio-label::after {
-    position: absolute;
-    top: 50%;
-    left: 0;
-    display: inline-block;
-    margin-top: -0.5625rem;
-    padding: 0;
-    width: 1.125rem;
-    height: 1.125rem;
-    content: ""; }
-  .o-checkbox-label::before, .o-radio-label::before {
-    background-color: #FFFFFF; }
-  .o-checkbox-label::after, .o-radio-label::after {
-    border-color: transparent;
-    background-color: transparent;
-    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2210.5%22%20viewBox%3D%220%200%2013%2010.5%22%20enable-background%3D%22new%200%200%2013%2010.5%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill%3D%22%23424242%22%20d%3D%22M4.8%205.8L2.4%203.3%200%205.7l4.8%204.8L13%202.4c0%200-2.4-2.4-2.4-2.4L4.8%205.8z%22%2F%3E%3C%2Fsvg%3E");
-    background-position: center;
-    background-size: 0.8125rem;
-    background-repeat: no-repeat;
-    opacity: 0; }
-
-.o-radio-label::before, .o-radio-label::after {
-  border-radius: 50%; }
-
-.o-radio-label::after {
-  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20enable-background%3D%22new%200%200%2013%2013%22%20xml%3Aspace%3D%22preserve%22%3E%3Ccircle%20fill%3D%22%23424242%22%20cx%3D%226.5%22%20cy%3D%226.5%22%20r%3D%226.5%22%2F%3E%3C%2Fsvg%3E");
-  background-size: 0.5rem; }
-
-.o-select {
-  position: relative;
-  z-index: 1;
-  padding-right: 2.5rem; }
-
-.o-select-wrap {
-  position: relative; }
-  .o-select-wrap::after {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 2;
-    width: 2.5rem;
-    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2211.3%22%20viewBox%3D%220%200%2013%2011.3%22%20enable-background%3D%22new%200%200%2013%2011.3%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20fill%3D%22%23424242%22%20points%3D%226.5%2011.3%203.3%205.6%200%200%206.5%200%2013%200%209.8%205.6%20%22%2F%3E%3C%2Fsvg%3E");
-    background-position: center;
-    background-size: 0.625rem;
-    background-repeat: no-repeat;
-    content: "";
-    pointer-events: none; }
-
-.o-textarea {
-  min-height: 6.25rem; }
-
-.o-button {
-  padding: 0.625rem;
-  background-color: lightgray; }
-  .o-button:focus, .o-button:hover {
-    background-color: gray; }
-
-.o-pjax_wrapper {
-  height: 100%;
-  overflow: hidden; }
-
-.o-pjax_container {
-  height: 100%;
-  overflow: hidden; }
-
 .c-scrollbar {
   position: absolute;
   right: 0;
@@ -764,6 +643,128 @@ h6, .o-h6 {
     cursor: -webkit-grabbing;
     cursor: grabbing; }
 
+.c-heading {
+  line-height: 1.5;
+  margin-bottom: 1.875rem; }
+  .c-heading.-h1 {
+    font-size: 2.25rem; }
+  .c-heading.-h2 {
+    font-size: 1.75rem; }
+  .c-heading.-h3 {
+    font-size: 1.5rem; }
+  .c-heading.-h4 {
+    font-size: 1.25rem; }
+  .c-heading.-h5 {
+    font-size: 1.125rem; }
+  .c-heading.-h6 {
+    font-size: 1rem; }
+
+.c-button {
+  padding: 0.9375rem 1.25rem;
+  background-color: lightgray; }
+  .c-button:focus, .c-button:hover {
+    background-color: darkgray; }
+
+.c-form_item {
+  position: relative;
+  margin-bottom: 1.875rem; }
+
+.c-form_label, .c-form_checkboxLabel, .c-form_radioLabel {
+  display: block;
+  margin-bottom: 0.625rem; }
+
+.c-form_input, .c-form_select_input, .c-form_textarea {
+  padding: 0.625rem;
+  border: 1px solid lightgray;
+  background-color: white; }
+  .c-form_input:hover, .c-form_select_input:hover, .c-form_textarea:hover {
+    border-color: darkgray; }
+  .c-form_input:focus, .c-form_select_input:focus, .c-form_textarea:focus {
+    border-color: dimgray; }
+  .c-form_input::-webkit-input-placeholder, .c-form_select_input::-webkit-input-placeholder, .c-form_textarea::-webkit-input-placeholder {
+    color: gray; }
+  .c-form_input::-moz-placeholder, .c-form_select_input::-moz-placeholder, .c-form_textarea::-moz-placeholder {
+    color: gray; }
+  .c-form_input:-ms-input-placeholder, .c-form_select_input:-ms-input-placeholder, .c-form_textarea:-ms-input-placeholder {
+    color: gray; }
+  .c-form_input::-ms-input-placeholder, .c-form_select_input::-ms-input-placeholder, .c-form_textarea::-ms-input-placeholder {
+    color: gray; }
+  .c-form_input::placeholder, .c-form_select_input::placeholder, .c-form_textarea::placeholder {
+    color: gray; }
+
+.c-form_checkboxLabel, .c-form_radioLabel {
+  position: relative;
+  display: inline-block;
+  margin-right: 0.625rem;
+  margin-bottom: 0;
+  padding-left: 1.75rem;
+  cursor: pointer; }
+  .c-form_checkboxLabel::before, .c-form_radioLabel::before, .c-form_checkboxLabel::after, .c-form_radioLabel::after {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    display: inline-block;
+    margin-top: -0.5625rem;
+    padding: 0;
+    width: 1.125rem;
+    height: 1.125rem;
+    content: ""; }
+  .c-form_checkboxLabel::before, .c-form_radioLabel::before {
+    background-color: #FFFFFF;
+    border: 1px solid lightgray; }
+  .c-form_checkboxLabel::after, .c-form_radioLabel::after {
+    border-color: transparent;
+    background-color: transparent;
+    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2210.5%22%20viewBox%3D%220%200%2013%2010.5%22%20enable-background%3D%22new%200%200%2013%2010.5%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill%3D%22%23424242%22%20d%3D%22M4.8%205.8L2.4%203.3%200%205.7l4.8%204.8L13%202.4c0%200-2.4-2.4-2.4-2.4L4.8%205.8z%22%2F%3E%3C%2Fsvg%3E");
+    background-position: center;
+    background-size: 0.75rem;
+    background-repeat: no-repeat;
+    opacity: 0; }
+  .c-form_checkboxLabel:hover::before, .c-form_radioLabel:hover::before {
+    border-color: darkgray; }
+  .c-form_checkbox:focus + .c-form_checkboxLabel::before, .c-form_radio:focus + .c-form_checkboxLabel::before, .c-form_checkbox:focus + .c-form_radioLabel::before, .c-form_radio:focus + .c-form_radioLabel::before {
+    border-color: dimgray; }
+  .c-form_checkbox:checked + .c-form_checkboxLabel::after, .c-form_radio:checked + .c-form_checkboxLabel::after, .c-form_checkbox:checked + .c-form_radioLabel::after, .c-form_radio:checked + .c-form_radioLabel::after {
+    opacity: 1; }
+
+.c-form_checkbox, .c-form_radio {
+  position: absolute;
+  width: 0;
+  opacity: 0; }
+
+.c-form_radioLabel::before, .c-form_radioLabel::after {
+  border-radius: 50%; }
+
+.c-form_radioLabel::after {
+  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20enable-background%3D%22new%200%200%2013%2013%22%20xml%3Aspace%3D%22preserve%22%3E%3Ccircle%20fill%3D%22%23424242%22%20cx%3D%226.5%22%20cy%3D%226.5%22%20r%3D%226.5%22%2F%3E%3C%2Fsvg%3E");
+  background-size: 0.375rem; }
+
+.c-form_select {
+  position: relative;
+  cursor: pointer; }
+  .c-form_select::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 2;
+    width: 2.5rem;
+    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2211.3%22%20viewBox%3D%220%200%2013%2011.3%22%20enable-background%3D%22new%200%200%2013%2011.3%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20fill%3D%22%23424242%22%20points%3D%226.5%2011.3%203.3%205.6%200%200%206.5%200%2013%200%209.8%205.6%20%22%2F%3E%3C%2Fsvg%3E");
+    background-position: center;
+    background-size: 0.5rem;
+    background-repeat: no-repeat;
+    content: "";
+    pointer-events: none; }
+
+.c-form_select_input {
+  position: relative;
+  z-index: 1;
+  padding-right: 2.5rem;
+  cursor: pointer; }
+
+.c-form_textarea {
+  min-height: 12.5rem; }
+
 /* stylelint-disable */
 .u-2\:1::before {
   padding-bottom: 50%; }
@@ -819,3 +820,7 @@ h6, .o-h6 {
 
 .u-5\/5 {
   width: 100% !important; }
+
+@media (min-width: 700px) {
+  .u-1\/2\@from-small {
+    width: 50%; } }

www/index.html

@@ -28,19 +28,17 @@
             </nav>
         </header>
 
-        <main>
+        <div data-load-container>
-            <div data-load-container>
+            <div class="o-scroll" data-module-scroll>
-                <div data-module-scroll>
+                <main>
+                    <h1 class="c-heading -h1">Home</h1>
+                </main>
 
-                    <p>Home</p>
+                 <footer>
-
+                    <p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate" title="Locomotive Boilerplate" target="_blank">🚂</a></p>
-                </div>
+                </footer>
             </div>
-        </main>
+        </div>
-
-        <footer>
-            <p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate" title="Locomotive Boilerplate" target="_blank">🚂</a></p>
-        </footer>
 
         <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.4/polyfill.min.js" crossorigin="anonymous"></script>
         <script nomodule src="https://polyfill.io/v3/polyfill.min.js?features=fetch%2CCustomEvent%2CElement.prototype.matches" crossorigin="anonymous"></script>

www/page.html

@@ -28,19 +28,73 @@
             </nav>
         </header>
 
-        <main>
+        <div data-load-container>
-            <div data-load-container>
+            <div class="o-scroll" data-module-scroll>
-                <div data-module-scroll>
+                <main>
+                    <div class="o-container">
+                        <h1 class="c-heading -h1">Page</h1>
 
-                    <p>Page</p>
+                        <div class="o-layout">
+                            <div class="o-layout_item u-1/2@from-small">
 
-                </div>
+                                <form class="c-form">
+                                    <div class="c-form_item">
+                                        <label class="c-form_label" for="input">Input</label>
+                                        <input class="c-form_input" type="text" id="input">
+                                    </div>
+                                    <div class="c-form_item">
+                                        <div class="o-layout -gutter">
+                                            <div class="o-layout_item u-1/2">
+                                                <input class="c-form_checkbox" type="checkbox" id="checkbox">
+                                                <label class="c-form_checkboxLabel" for="checkbox">Checkbox</label>
+                                            </div>
+                                            <div class="o-layout_item u-1/2">
+                                                <input class="c-form_checkbox" type="checkbox" id="checkbox2">
+                                                <label class="c-form_checkboxLabel" for="checkbox2">Checkbox 2</label>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="c-form_item">
+                                        <div class="o-layout -gutter">
+                                            <div class="o-layout_item u-1/2">
+                                                <input class="c-form_radio" type="radio" name="radio" id="radio">
+                                                <label class="c-form_radioLabel" for="radio">Radio</label>
+                                            </div>
+                                            <div class="o-layout_item u-1/2">
+                                                <input class="c-form_radio" type="radio" name="radio" id="radio2">
+                                                <label class="c-form_radioLabel" for="radio2">Radio 2</label>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="c-form_item">
+                                        <label class="c-form_label" for="select">Select</label>
+                                        <div class="c-form_select">
+                                            <select class="c-form_select_input" id="select">
+                                                <option value="option">Option</option>
+                                                <option value="option2">Option 2</option>
+                                                <option value="option3">Option 3</option>
+                                            </select>
+                                        </div>
+                                    </div>
+                                    <div class="c-form_item">
+                                        <label class="c-form_label" for="textarea">Textarea</label>
+                                        <textarea class="c-form_textarea" id="textarea"></textarea>
+                                    </div>
+                                    <button class="c-button" type="submit">
+                                        Submit
+                                    </button>
+                                </form>
+
+                            </div>
+                        </div>
+                    </div>
+                </main>
+
+                <footer>
+                    <p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate" title="Locomotive Boilerplate" target="_blank">🚂</a></p>
+                </footer>
             </div>
-        </main>
+        </div>
-
-        <footer>
-            <p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate" title="Locomotive Boilerplate" target="_blank">🚂</a></p>
-        </footer>
 
         <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.4/polyfill.min.js" crossorigin="anonymous"></script>
         <script nomodule src="https://polyfill.io/v3/polyfill.min.js?features=fetch%2CCustomEvent%2CElement.prototype.matches" crossorigin="anonymous"></script>