docs: fix example code

Author: thingsym

docs/css/default-example.css

@@ -0,0 +1,154 @@
+.grid,
+[class*="grid--"] {
+  background: #a5c3e2;
+}
+
+[class*="grid__col"] {
+  background: #0e72da;
+  border: 1px solid #130e7d;
+  padding: .4em;
+  color: #fff;
+  text-align: center;
+}
+
+.grid {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  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%;
+  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%;
+  margin-left: 1%;
+  margin-right: 1%;
+  margin-bottom: 2%;
+}
+
+.grid > .grid__col-3 {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-box-flex: 0;
+  -ms-flex: 0 0 23%;
+  flex: 0 0 23%;
+  margin-left: 1%;
+  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%;
+  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%;
+  margin-left: 1%;
+  margin-right: 1%;
+  margin-bottom: 2%;
+}
+
+.grid > .grid__col-6 {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-box-flex: 0;
+  -ms-flex: 0 0 48%;
+  flex: 0 0 48%;
+  margin-left: 1%;
+  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%;
+  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%;
+  margin-left: 1%;
+  margin-right: 1%;
+  margin-bottom: 2%;
+}
+
+.grid > .grid__col-9 {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-box-flex: 0;
+  -ms-flex: 0 0 73%;
+  flex: 0 0 73%;
+  margin-left: 1%;
+  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%;
+  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%;
+  margin-left: 1%;
+  margin-right: 1%;
+  margin-bottom: 2%;
+}
+
+.grid > .grid__col-12 {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-box-flex: 0;
+  -ms-flex: 0 0 98%;
+  flex: 0 0 98%;
+  margin-left: 1%;
+  margin-right: 1%;
+  margin-bottom: 2%;
+}

docs/css/default.css

@@ -140,6 +140,8 @@ td.example {
 }
 
 .grid,
+.grid-3-columns,
+.grid-24-columns,
 [class*="grid--"] {
   background: #a5c3e2;
 }
@@ -151,120 +153,3 @@ td.example {
   color: #fff;
   text-align: center;
 }
-
-.grid {
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  margin: 0 -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%;
-  margin: 0 1% 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%;
-  margin: 0 1% 2%;
-}
-
-.grid > .grid__col-3 {
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  -webkit-box-flex: 0;
-  -ms-flex: 0 0 23%;
-  flex: 0 0 23%;
-  margin: 0 1% 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%;
-  margin: 0 1% 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%;
-  margin: 0 1% 2%;
-}
-
-.grid > .grid__col-6 {
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  -webkit-box-flex: 0;
-  -ms-flex: 0 0 48%;
-  flex: 0 0 48%;
-  margin: 0 1% 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%;
-  margin: 0 1% 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%;
-  margin: 0 1% 2%;
-}
-
-.grid > .grid__col-9 {
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  -webkit-box-flex: 0;
-  -ms-flex: 0 0 73%;
-  flex: 0 0 73%;
-  margin: 0 1% 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%;
-  margin: 0 1% 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%;
-  margin: 0 1% 2%;
-}
-
-.grid > .grid__col-12 {
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  -webkit-box-flex: 0;
-  -ms-flex: 0 0 98%;
-  flex: 0 0 98%;
-  margin: 0 1% 2%;
-}