v1.0.2

Serrin · Jun 10, 2021 · 14e5f44 · 14e5f44
1 parent d6b788f
commit 14e5f44
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -5,12 +5,12 @@ A very simple flex based grid system with only one breakpoint (768px).
 
 IE11 and mobile compatible. Can be combined with the [u87.css](https://github.com/Serrin/u87.css).
 
-Latest version: 1.0.1
+Latest version: 1.0.2
 
-Date: 2020-05-12T19:16:51.793Z
+Date: 2021-06-09T19:07:13.881Z
 
 There are 2 versions:
-- minigrid.css (1968 byte) and minigrid.min.css (1277 byte)
+- minigrid.css (2346 byte) and minigrid.min.css (1558 byte)
 - minigrid-lite.css (641 byte) and minigrid-lite.min.css (535 byte)
 
 The Lite version doesn't contain the `.mg-col-XX` classes. The size of the cells can be set with the `flex: value;` CSS property.
@@ -49,6 +49,20 @@ class|size|grid 12
 `.mg-col-91`||11/12
 `.mg-col-100`|1/1|12/12
 
+class|flex value
+-----|----------
+`.mg-col-flex-1`|1
+`.mg-col-flex-2`|2
+`.mg-col-flex-3`|3
+`.mg-col-flex-4`|4
+`.mg-col-flex-5`|5
+`.mg-col-flex-6`|6
+`.mg-col-flex-7`|7
+`.mg-col-flex-8`|8
+`.mg-col-flex-9`|9
+`.mg-col-flex-10`|10
+`.mg-col-flex-11`|11
+`.mg-col-flex-12`|12
 
 ## Samples
 

diff --git a/minigrid-lite.css b/minigrid-lite.css
@@ -1,5 +1,5 @@
 @charset "UTF-8";
-/* Minigrid v1.0.1 Lite * https://github.com/Serrin/Minigrid/ * license: MIT */
+/* Minigrid v1.0.2 Lite * https://github.com/Serrin/Minigrid/ * license: MIT */
 .mg-nopadding { padding: 0 !important; }
 .mg-container {
   display: block;

diff --git a/minigrid-lite.min.css b/minigrid-lite.min.css
@@ -1,5 +1,5 @@
 @charset "UTF-8";
-/* Minigrid v1.0.1 Lite * https://github.com/Serrin/Minigrid/ * license: MIT */
+/* Minigrid v1.0.2 Lite * https://github.com/Serrin/Minigrid/ * license: MIT */
 .mg-nopadding{padding:0 !important;}
 .mg-container{display:block;width:100%;max-width:1140px;margin:0 auto;padding:0 0.5rem;}
 .mg-row{display:block;width:unset;margin:0 -0.5rem;padding:0;}

diff --git a/minigrid.css b/minigrid.css
@@ -1,5 +1,5 @@
 @charset "UTF-8";
-/* Minigrid v1.0.1 * https://github.com/Serrin/Minigrid/ * license: MIT */
+/* Minigrid v1.0.2 * https://github.com/Serrin/Minigrid/ * license: MIT */
 .mg-nopadding { padding: 0 !important; }
 .mg-container {
   display: block;
@@ -36,5 +36,17 @@
   .mg-col-83 { flex: 0 83.3334%; max-width: 83.3334%; } /*      10/12 */
   .mg-col-91 { flex: 0 91.6667%; max-width: 91.6667%; } /*      11/12 */
   .mg-col-100 { flex: 1 1 100%; max-width: 100%; }      /* 1/1  12/12 */
+  .mg-col-flex-1 { flex: 1; }
+  .mg-col-flex-2 { flex: 2; }
+  .mg-col-flex-3 { flex: 3; }
+  .mg-col-flex-4 { flex: 4; }
+  .mg-col-flex-5 { flex: 5; }
+  .mg-col-flex-6 { flex: 6; }
+  .mg-col-flex-7 { flex: 7; }
+  .mg-col-flex-8 { flex: 8; }
+  .mg-col-flex-9 { flex: 9; }
+  .mg-col-flex-10 { flex: 10; }
+  .mg-col-flex-11 { flex: 11; }
+  .mg-col-flex-12 { flex: 12; }
 }
 [class^="mg-"] { box-sizing: border-box; }
diff --git a/minigrid.html b/minigrid.html
@@ -272,6 +272,49 @@ <h1>Minigrid testpage</h1>
     <div class="mg-col mg-col-8">.mg-col .mg-col-8</div>
   </div>
 
+  <hr/>
+  <pre>.mg-row</pre>
+  <div class="mg-row">
+    <div class="mg-col mg-col-flex-1">.mg-col .mg-col-flex-1</div>
+    <div class="mg-col mg-col-flex-11">.mg-col .mg-col-flex-11</div>
+  </div>
+  <pre>.mg-row</pre>
+  <div class="mg-row">
+    <div class="mg-col mg-col-flex-2">.mg-col .mg-col-flex-2</div>
+    <div class="mg-col mg-col-flex-10">.mg-col .mg-col-flex-10</div>
+  </div>
+  <pre>.mg-row</pre>
+  <div class="mg-row">
+    <div class="mg-col mg-col-flex-3">.mg-col .mg-col-flex-3</div>
+    <div class="mg-col mg-col-flex-9">.mg-col .mg-col-flex-</div>
+  </div>
+  <pre>.mg-row</pre>
+  <div class="mg-row">
+    <div class="mg-col mg-col-flex-4">.mg-col .mg-col-flex-4</div>
+    <div class="mg-col mg-col-flex-8">.mg-col .mg-col-flex-8</div>
+  </div>
+  <pre>.mg-row</pre>
+  <div class="mg-row">
+    <div class="mg-col mg-col-flex-5">.mg-col .mg-col-flex-5</div>
+    <div class="mg-col mg-col-flex-7">.mg-col .mg-col-flex-7</div>
+  </div>
+  <pre>.mg-row</pre>
+  <div class="mg-row">
+    <div class="mg-col mg-col-flex-6">.mg-col .mg-col-flex-6</div>
+    <div class="mg-col mg-col-flex-6">.mg-col .mg-col-flex-6</div>
+  </div>
+  <pre>.mg-row</pre>
+  <div class="mg-row">
+    <div class="mg-col mg-col-flex-6">.mg-col .mg-col-flex-6</div>
+    <div class="mg-col mg-col-flex-2">.mg-col .mg-col-flex-2</div>
+    <div class="mg-col mg-col-flex-1">.mg-col .mg-col-flex-1</div>
+    <div class="mg-col mg-col-flex-3">.mg-col .mg-col-flex-3</div>
+  </div>
+  <pre>.mg-row</pre>
+  <div class="mg-row">
+    <div class="mg-col mg-col-flex-12">.mg-col .mg-col-flex-12</div>
+  </div>
+
   <hr/>
 </div>
 

diff --git a/minigrid.min.css b/minigrid.min.css