From 14e5f44d645b2e0869832b1fd0cda606709472af Mon Sep 17 00:00:00 2001 From: Ferenc Czigler Date: Thu, 10 Jun 2021 11:17:17 +0200 Subject: [PATCH] v1.0.2 --- README.md | 20 +++++++++++++++++--- minigrid-lite.css | 2 +- minigrid-lite.min.css | 2 +- minigrid.css | 14 +++++++++++++- minigrid.html | 43 +++++++++++++++++++++++++++++++++++++++++++ minigrid.min.css | 4 ++-- 6 files changed, 77 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 7d787f3..4c33443 100644 --- 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 index 6bcc819..c1efbaa 100644 --- 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 index 52f088f..b261b9a 100644 --- 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 index 586c7aa..8174f5d 100644 --- 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; } \ No newline at end of file diff --git a/minigrid.html b/minigrid.html index 36af0e4..d24cefb 100644 --- a/minigrid.html +++ b/minigrid.html @@ -272,6 +272,49 @@

Minigrid testpage

.mg-col .mg-col-8
+
+ 
.mg-row
+
+
.mg-col .mg-col-flex-1
+
.mg-col .mg-col-flex-11
+
+ 
.mg-row
+
+
.mg-col .mg-col-flex-2
+
.mg-col .mg-col-flex-10
+
+ 
.mg-row
+
+
.mg-col .mg-col-flex-3
+
.mg-col .mg-col-flex-
+
+ 
.mg-row
+
+
.mg-col .mg-col-flex-4
+
.mg-col .mg-col-flex-8
+
+ 
.mg-row
+
+
.mg-col .mg-col-flex-5
+
.mg-col .mg-col-flex-7
+
+ 
.mg-row
+
+
.mg-col .mg-col-flex-6
+
.mg-col .mg-col-flex-6
+
+ 
.mg-row
+
+
.mg-col .mg-col-flex-6
+
.mg-col .mg-col-flex-2
+
.mg-col .mg-col-flex-1
+
.mg-col .mg-col-flex-3
+
+ 
.mg-row
+
+
.mg-col .mg-col-flex-12
+
+
diff --git a/minigrid.min.css b/minigrid.min.css index 02c524b..e801560 100644 --- a/minigrid.min.css +++ b/minigrid.min.css @@ -1,3 +1,3 @@ @charset "UTF-8"; -/* Minigrid v1.0.1 * 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;}.mg-col{display:block;width:100%;max-width:100%;padding:0.5rem;}@media(min-width:768px){.mg-row{display:flex;flex-flow:row wrap;justify-content:flex-start;align-content:flex-start;align-items:stretch;}.mg-col-6{flex:0 6.25%;max-width:6.25%;}.mg-col-8{flex:0 8.3333%;max-width:8.3333%;}.mg-col-12{flex:0 12.5%;max-width:12.5%;}.mg-col-16{flex:0 16.6666%;max-width:16.6666%;}.mg-col-20{flex:0 20%;max-width:20%;}.mg-col-25{flex:0 25%;max-width:25%;}.mg-col-33{flex:0 33.3333%;max-width:33.3333%;}.mg-col-40{flex:0 40%;max-width:40%;}.mg-col-41{flex:0 41.6667%;max-width:41.6667%;}.mg-col-50{flex:0 50%;max-width:50%;}.mg-col-58{flex:0 58.3333%;max-width:58.3333%;}.mg-col-60{flex:0 60%;max-width:60%;}.mg-col-66{flex:0 66.6667%;max-width:66.6667%;}.mg-col-75{flex:0 75%;max-width:75%;}.mg-col-80{flex:0 80%;max-width:80%;}.mg-col-83{flex:0 83.3334%;max-width:83.3334%;}.mg-col-91{flex:0 91.6667%;max-width:91.6667%;}.mg-col-100{flex:1 1 100%;max-width:100%;}}[class^="mg-"]{box-sizing:border-box;} \ No newline at end of file +/* Minigrid v1.0.2 * 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;}.mg-col{display:block;width:100%;max-width:100%;padding:0.5rem;}@media(min-width:768px){.mg-row{display:flex;flex-flow:row wrap;justify-content:flex-start;align-content:flex-start;align-items:stretch;}.mg-col-6{flex:0 6.25%;max-width:6.25%;}.mg-col-8{flex:0 8.3333%;max-width:8.3333%;}.mg-col-12{flex:0 12.5%;max-width:12.5%;}.mg-col-16{flex:0 16.6666%;max-width:16.6666%;}.mg-col-20{flex:0 20%;max-width:20%;}.mg-col-25{flex:0 25%;max-width:25%;}.mg-col-33{flex:0 33.3333%;max-width:33.3333%;}.mg-col-40{flex:0 40%;max-width:40%;}.mg-col-41{flex:0 41.6667%;max-width:41.6667%;}.mg-col-50{flex:0 50%;max-width:50%;}.mg-col-58{flex:0 58.3333%;max-width:58.3333%;}.mg-col-60{flex:0 60%;max-width:60%;}.mg-col-66{flex:0 66.6667%;max-width:66.6667%;}.mg-col-75{flex:0 75%;max-width:75%;}.mg-col-80{flex:0 80%;max-width:80%;}.mg-col-83{flex:0 83.3334%;max-width:83.3334%;}.mg-col-91{flex:0 91.6667%;max-width:91.6667%;}.mg-col-100{flex:1 1 100%;max-width:100%;}.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;} \ No newline at end of file