Add utilities documentation

docs/_sass/components/code.scss

@@ -37,6 +37,20 @@
   z-index: 1;
 }
 
+.bd-snippet-inline {
+  display: inline-block;
+  margin-bottom: -0.25em;
+  vertical-align: bottom;
+
+  .highlight pre {
+    padding: 0.5em 0.75em 0.625em;
+  }
+
+  .button.bd-copy {
+    display: none;
+  }
+}
+
 .bd-snippet {
   @extend %block;
   --snippet-spacing: #{$block-spacing};
@@ -159,7 +173,7 @@
     &::before {
       background: linear-gradient(0deg, var(--hl-background), transparent);
       bottom: 0;
-      content: '';
+      content: "";
       display: block;
       left: 0;
       position: absolute;

docs/_sass/components/color.scss

@@ -0,0 +1,9 @@
+.bd-color {
+  border-radius: 2px;
+  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+  display: inline-block;
+  float: left;
+  height: 24px;
+  margin-right: 8px;
+  width: 24px;
+}

docs/_sass/components/variables.scss

@@ -30,14 +30,14 @@
 
     pre {
       overflow: visible;
-      padding: 0;
+      padding: 0.25em 0.5em 0.375em;
       white-space: pre-wrap;
       white-space: break-spaces;
     }
   }
 
   .bd-copy {
-    font-size: 0.5em !important;
+    font-size: 0.75em !important;
     right: 0;
     top: 0;
   }

docs/_sass/examples/mixins.scss

@@ -160,3 +160,27 @@
   @include ltr-property("margin", 1rem, false);
   border-radius: 0.25em;
 }
+
+.bulma-control-mixin {
+  @include control;
+  background: deeppink;
+  color: white;
+
+  &.is-small {
+    @include control-small;
+  }
+
+  &.is-medium {
+    @include control-medium;
+  }
+
+  &.is-large {
+    @include control-large;
+  }
+}
+
+.bulma-control-extend {
+  @extend %control;
+  background: mediumblue;
+  color: white;
+}

docs/_sass/pages/docs.scss

@@ -150,6 +150,16 @@
     display: none;
   }
 
+  .bd-docs.bd-is-full-main {
+    .bd-docs-main {
+      grid-column: 2 / span 2;
+    }
+
+    .bd-docs-side {
+      display: none;
+    }
+  }
+
   .bd-docs.bd-is-fullwidth {
     display: block;
 
@@ -199,7 +209,7 @@
           &::after {
             align-items: center;
             bottom: 0;
-            content: '•';
+            content: "•";
             display: flex;
             justify-content: center;
             position: absolute;
@@ -236,7 +246,7 @@
           &::after {
             align-items: center;
             bottom: 0;
-            content: '•';
+            content: "•";
             display: flex;
             justify-content: center;
             position: absolute;