docs: fix css

Author: thingsym

docs/css-dart-sass/default.css

@@ -127,7 +127,7 @@ td.example {
   text-align: center;
 }
 
-.column {
+.columns {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   display: -webkit-box;
@@ -136,7 +136,7 @@ td.example {
   margin-left: -1%;
   margin-right: -1%;
 }
-.column > .columns {
+.columns > .column {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-box-flex: 0;

docs/css/default.css

@@ -127,7 +127,7 @@ td.example {
   text-align: center;
 }
 
-.column {
+.columns {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   display: -webkit-box;
@@ -136,7 +136,7 @@ td.example {
   margin-left: -1%;
   margin-right: -1%;
 }
-.column > .columns {
+.columns > .column {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-box-flex: 0;
@@ -148,7 +148,7 @@ td.example {
   margin-right: 1%;
   margin-bottom: 2%;
 }
-.column h3, .column h4 {
+.columns h3, .columns h4 {
   margin: 0;
 }
 

docs/dart-sass/default.scss

@@ -128,10 +128,10 @@ td.example {
   text-align: center;
 }
 
-.column {
+.columns {
 	@include flexbox-grid-mixins.grid($gutter: $default-grid-gutter);
 
-    > .columns {
+    > .column {
         @include flexbox-grid-mixins.grid-col($col: 6, $gutter: $default-grid-gutter);
     }
 }

docs/index.html

@@ -63,8 +63,8 @@ <h3>HTML</h3>
 
 <h3>Sass</h3>
 
-<div class="column">
 <div class="columns">
+<div class="column">
 <h4>Dart Sass</h4>
 <pre>
 <code>@use 'node_modules/flexbox-grid-mixins/dart-sass/flexbox-grid-mixins';
@@ -84,7 +84,7 @@ <h4>Dart Sass</h4>
 </code></pre>
 
 </div>
-<div class="columns">
+<div class="column">
 <h4>LibSass</h4>
 <pre>
 <code>@import 'node_modules/flexbox-grid-mixins/sass/flexbox-grid-mixins';
@@ -270,8 +270,8 @@ <h3>HTML</h3>
 
 <h3>Sass</h3>
 
-<div class="column">
 <div class="columns">
+<div class="column">
 <h4>Dart Sass</h4>
 <pre>
 <code>@use 'node_modules/flexbox-grid-mixins/dart-sass/flexbox-grid-mixins';
@@ -291,7 +291,7 @@ <h4>Dart Sass</h4>
 </code></pre>
 
 </div>
-<div class="columns">
+<div class="column">
 <h4>LibSass</h4>
 <pre>
 <code>@import 'node_modules/flexbox-grid-mixins/sass/flexbox-grid-mixins';
@@ -460,8 +460,8 @@ <h3>CSS</h3>
 
 <h2 id="Examples">Examples</h2>
 
-<div class="column">
 <div class="columns">
+<div class="column">
 <h3>Dart Sass</h3>
 <ul>
 <li><a href="example-dart-sass/example.html">Flexbox Grid Mixins Example</a></li>
@@ -477,7 +477,7 @@ <h3>Dart Sass</h3>
 </ul>
 
 </div>
-<div class="columns">
+<div class="column">
 <h3>LibSass</h3>
 <ul>
 <li><a href="example/example.html">Flexbox Grid Mixins Example</a></li>
@@ -516,8 +516,8 @@ <h2 id="Getting-Started">Getting Started</h2>
 
 <h3>1. Import Flexbox Grid Mixins in Sass/SCSS file</h3>
 
-<div class="column">
 <div class="columns">
+<div class="column">
 <h4>Dart Sass</h4>
 <pre><code>@use 'flexbox-grid-mixins';</code></pre>
 
@@ -526,7 +526,7 @@ <h4>Dart Sass</h4>
 <pre><code>@use 'node_modules/flexbox-grid-mixins/dart-sass/flexbox-grid-mixins';</code></pre>
 
 </div>
-<div class="columns">
+<div class="column">
 <h4>LibSass</h4>
 
 <pre><code>@import 'flexbox-grid-mixins';</code></pre>
@@ -542,8 +542,8 @@ <h4>LibSass</h4>
 
 <h3>2. Define the grid container</h3>
 
-<div class="column">
 <div class="columns">
+<div class="column">
 <h4>Dart Sass</h4>
 <pre>
 <code>.grid {
@@ -552,7 +552,7 @@ <h4>Dart Sass</h4>
 </code></pre>
 
 </div>
-<div class="columns">
+<div class="column">
 <h4>LibSass</h4>
 <pre>
 <code>.grid {
@@ -564,8 +564,8 @@ <h4>LibSass</h4>
 
 <h3>3. Generate the grid columns</h3>
 
-<div class="column">
 <div class="columns">
+<div class="column">
 <h4>Dart Sass</h4>
 <pre>
 <code>.grid__col-3 {
@@ -577,7 +577,7 @@ <h4>Dart Sass</h4>
 </code></pre>
 
 </div>
-<div class="columns">
+<div class="column">
 <h4>LibSass</h4>
 <pre>
 <code>.grid__col-3 {

docs/sass/default.scss

@@ -128,10 +128,10 @@ td.example {
   text-align: center;
 }
 
-.column {
+.columns {
   @include grid($gutter: $default-grid-gutter);
 
-    > .columns {
+    > .column {
         @include grid-col($col: 6, $gutter: $default-grid-gutter, $width: 48%, $max-width: 48%);
     }