Add generators detail to docs main page

Author: pixelspring

css/style.css

@@ -444,6 +444,66 @@ template {
 .grid--noBottom > [class*="col"] {
  padding-bottom: 0; }
 
+.col-1 {
+ -ms-flex-preferred-size: 12;
+ flex-basis: 12;
+ width: 8.3333333333%; }
+
+.col-2 {
+ -ms-flex-preferred-size: 12;
+ flex-basis: 12;
+ width: 16.6666666667%; }
+
+.col-3 {
+ -ms-flex-preferred-size: 12;
+ flex-basis: 12;
+ width: 25%; }
+
+.col-4 {
+ -ms-flex-preferred-size: 12;
+ flex-basis: 12;
+ width: 33.3333333333%; }
+
+.col-5 {
+ -ms-flex-preferred-size: 12;
+ flex-basis: 12;
+ width: 41.6666666667%; }
+
+.col-6 {
+ -ms-flex-preferred-size: 12;
+ flex-basis: 12;
+ width: 50%; }
+
+.col-7 {
+ -ms-flex-preferred-size: 12;
+ flex-basis: 12;
+ width: 58.3333333333%; }
+
+.col-8 {
+ -ms-flex-preferred-size: 12;
+ flex-basis: 12;
+ width: 66.6666666667%; }
+
+.col-9 {
+ -ms-flex-preferred-size: 12;
+ flex-basis: 12;
+ width: 75%; }
+
+.col-10 {
+ -ms-flex-preferred-size: 12;
+ flex-basis: 12;
+ width: 83.3333333333%; }
+
+.col-11 {
+ -ms-flex-preferred-size: 12;
+ flex-basis: 12;
+ width: 91.6666666667%; }
+
+.col-12 {
+ -ms-flex-preferred-size: 12;
+ flex-basis: 12;
+ width: 100%; }
+
 .grid--centered {
  -webkit-box-pack: center;
  -ms-flex-pack: center;

docs/css/doc-styles.css

@@ -444,6 +444,66 @@ template {
 .grid--noBottom > [class*="col"] {
  padding-bottom: 0; }
 
+.col-1 {
+ -ms-flex-preferred-size: 12;
+ flex-basis: 12;
+ width: 8.3333333333%; }
+
+.col-2 {
+ -ms-flex-preferred-size: 12;
+ flex-basis: 12;
+ width: 16.6666666667%; }
+
+.col-3 {
+ -ms-flex-preferred-size: 12;
+ flex-basis: 12;
+ width: 25%; }
+
+.col-4 {
+ -ms-flex-preferred-size: 12;
+ flex-basis: 12;
+ width: 33.3333333333%; }
+
+.col-5 {
+ -ms-flex-preferred-size: 12;
+ flex-basis: 12;
+ width: 41.6666666667%; }
+
+.col-6 {
+ -ms-flex-preferred-size: 12;
+ flex-basis: 12;
+ width: 50%; }
+
+.col-7 {
+ -ms-flex-preferred-size: 12;
+ flex-basis: 12;
+ width: 58.3333333333%; }
+
+.col-8 {
+ -ms-flex-preferred-size: 12;
+ flex-basis: 12;
+ width: 66.6666666667%; }
+
+.col-9 {
+ -ms-flex-preferred-size: 12;
+ flex-basis: 12;
+ width: 75%; }
+
+.col-10 {
+ -ms-flex-preferred-size: 12;
+ flex-basis: 12;
+ width: 83.3333333333%; }
+
+.col-11 {
+ -ms-flex-preferred-size: 12;
+ flex-basis: 12;
+ width: 91.6666666667%; }
+
+.col-12 {
+ -ms-flex-preferred-size: 12;
+ flex-basis: 12;
+ width: 100%; }
+
 .grid--centered {
  -webkit-box-pack: center;
  -ms-flex-pack: center;

docs/index.html

@@ -78,6 +78,14 @@ <h3>@mixin generateBlockGridGutterless($blockGridValue)</h3>
 
  </section>
 
+ <section id="generators">
+ <h2>Generators <a class="top-link" href="#top">&#8679;</a></h2>
+ <hr>
+ <h3>@include outputPrototypingHelperClasses;</h3>
+ <p>Generates all Numbered Columns for prototyping or non-semantic usage:<br> 
+ <code>.col-1</code> to <code>.col-12</code></p>
+ </section>
+
  <section id="helpers">
  <h2>Helper Classes <a class="top-link" href="#top">&#8679;</a></h2>
  <hr>