docs: fix example

Author: thingsym

docs/css/box-sizing.css

@@ -1,12 +1,12 @@
 .grid,
-[class*="grid--"] {
+[class*=grid--] {
   background: #a5c3e2;
 }
 
-[class*="grid__col"] {
+[class*=grid__col] {
   background: #0e72da;
   border: 1px solid #130e7d;
-  padding: .4em;
+  padding: 0.4em;
   color: #fff;
   text-align: center;
 }
@@ -20,29 +20,26 @@
   margin-left: -1%;
   margin-right: -1%;
 }
-
 .grid > .grid__col-1 {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-box-flex: 0;
-  -ms-flex: 0 0 6.33333%;
-  flex: 0 0 6.33333%;
+  -ms-flex: 0 0 6.3333333333%;
+  flex: 0 0 6.3333333333%;
   margin-left: 1%;
   margin-right: 1%;
   margin-bottom: 2%;
 }
-
 .grid > .grid__col-2 {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-box-flex: 0;
-  -ms-flex: 0 0 14.66667%;
-  flex: 0 0 14.66667%;
+  -ms-flex: 0 0 14.6666666667%;
+  flex: 0 0 14.6666666667%;
   margin-left: 1%;
   margin-right: 1%;
   margin-bottom: 2%;
 }
-
 .grid > .grid__col-3 {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
@@ -53,29 +50,26 @@
   margin-right: 1%;
   margin-bottom: 2%;
 }
-
 .grid > .grid__col-4 {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-box-flex: 0;
-  -ms-flex: 0 0 31.33333%;
-  flex: 0 0 31.33333%;
+  -ms-flex: 0 0 31.3333333333%;
+  flex: 0 0 31.3333333333%;
   margin-left: 1%;
   margin-right: 1%;
   margin-bottom: 2%;
 }
-
 .grid > .grid__col-5 {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-box-flex: 0;
-  -ms-flex: 0 0 39.66667%;
-  flex: 0 0 39.66667%;
+  -ms-flex: 0 0 39.6666666667%;
+  flex: 0 0 39.6666666667%;
   margin-left: 1%;
   margin-right: 1%;
   margin-bottom: 2%;
 }
-
 .grid > .grid__col-6 {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
@@ -86,29 +80,26 @@
   margin-right: 1%;
   margin-bottom: 2%;
 }
-
 .grid > .grid__col-7 {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-box-flex: 0;
-  -ms-flex: 0 0 56.33333%;
-  flex: 0 0 56.33333%;
+  -ms-flex: 0 0 56.3333333333%;
+  flex: 0 0 56.3333333333%;
   margin-left: 1%;
   margin-right: 1%;
   margin-bottom: 2%;
 }
-
 .grid > .grid__col-8 {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-box-flex: 0;
-  -ms-flex: 0 0 64.66667%;
-  flex: 0 0 64.66667%;
+  -ms-flex: 0 0 64.6666666667%;
+  flex: 0 0 64.6666666667%;
   margin-left: 1%;
   margin-right: 1%;
   margin-bottom: 2%;
 }
-
 .grid > .grid__col-9 {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
@@ -119,29 +110,26 @@
   margin-right: 1%;
   margin-bottom: 2%;
 }
-
 .grid > .grid__col-10 {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-box-flex: 0;
-  -ms-flex: 0 0 81.33333%;
-  flex: 0 0 81.33333%;
+  -ms-flex: 0 0 81.3333333333%;
+  flex: 0 0 81.3333333333%;
   margin-left: 1%;
   margin-right: 1%;
   margin-bottom: 2%;
 }
-
 .grid > .grid__col-11 {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-box-flex: 0;
-  -ms-flex: 0 0 89.66667%;
-  flex: 0 0 89.66667%;
+  -ms-flex: 0 0 89.6666666667%;
+  flex: 0 0 89.6666666667%;
   margin-left: 1%;
   margin-right: 1%;
   margin-bottom: 2%;
 }
-
 .grid > .grid__col-12 {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
@@ -151,4 +139,4 @@
   margin-left: 1%;
   margin-right: 1%;
   margin-bottom: 2%;
-}
+}

docs/css/default-example.css

@@ -22,46 +22,38 @@ body {
   -ms-flex-pack: center;
   justify-content: center;
 }
-
 .header--hero {
   height: 100vh;
 }
-
 .header .header-title {
   font-size: 320%;
   margin-bottom: 0;
 }
-
 .header .version {
   font-size: 25%;
   font-weight: normal;
 }
-
 .header .header-description {
   margin-top: 0;
 }
-
 .header .header-nav {
   margin: 0;
   padding: 0;
   margin-top: 3em;
 }
-
 .header .header-nav li {
   font-size: 90%;
   display: inline;
   list-style: none;
   margin-right: 1.2rem;
 }
-
 .header a {
   color: #fff;
 }
-
 .header .btn {
-  padding: .8em;
+  padding: 0.8em;
   border: solid rgba(255, 255, 255, 0.4) 1px;
-  border-radius: .4em;
+  border-radius: 0.4em;
 }
 
 .container {
@@ -79,36 +71,32 @@ pre {
   line-height: 1.45;
   background-color: #f7f7f7;
   padding: 1em;
-  border-radius: .4em;
+  border-radius: 0.4em;
 }
-
 pre.scrollable {
   max-height: 240px;
-  overflow-y: scroll;
+  overflow: scroll;
 }
-
 pre > code {
   background: transparent;
 }
 
 code {
-  padding: .2em;
+  padding: 0.2em;
   background-color: rgba(0, 0, 0, 0.04);
-  border-radius: .2em;
+  border-radius: 0.2em;
 }
 
 .reference {
   background-color: #0466e0;
   color: #fff;
   padding: 1em;
-  border-radius: .4em;
+  border-radius: 0.4em;
 }
-
 .reference .small {
   font-size: 80%;
   font-weight: normal;
 }
-
 .reference .big {
   font-size: 160%;
 }
@@ -124,32 +112,57 @@ table {
 th {
   border-top: 1px solid #ccc;
   border-right: 1px solid #ccc;
-  padding: .2em;
+  padding: 0.2em;
   font-weight: bold;
   background-color: #eee;
 }
 
 td {
   border-top: 1px solid #ccc;
   border-right: 1px solid #ccc;
-  padding: .2em;
+  padding: 0.2em;
 }
 
 td.example {
   text-align: center;
 }
 
+.column {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  margin-left: -1%;
+  margin-right: -1%;
+}
+.column > .columns {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-box-flex: 0;
+  -ms-flex: 0 0 48%;
+  flex: 0 0 48%;
+  width: 48%;
+  max-width: 48%;
+  margin-left: 1%;
+  margin-right: 1%;
+  margin-bottom: 2%;
+}
+.column h3, .column h4 {
+  margin: 0;
+}
+
 .grid,
 .grid-3-columns,
 .grid-24-columns,
-[class*="grid--"] {
+[class*=grid--] {
   background: #a5c3e2;
 }
 
-[class*="grid__col"] {
+[class*=grid__col] {
   background: #0e72da;
   border: 1px solid #130e7d;
-  padding: .4em;
+  padding: 0.4em;
   color: #fff;
   text-align: center;
-}
+}