-
- Text
- Text
- Text
-
-
Text
-
Text
-
Text
-
Text
+
+
+
Text
+
Text
+
Text
Text
+
diff --git a/master.css b/master.css
index f4f5670..35e9e1c 100644
--- a/master.css
+++ b/master.css
@@ -1,4 +1,65 @@
@import url(./reset.css);
+:root {
+ --grid-gap: 10px; }
+
+.flex-grid {
+ display: flex;
+ flex-wrap: wrap;
+ margin: calc(var(--grid-gap) * -1) 0 0 calc(var(--grid-gap) * -1); }
+
+.col {
+ box-sizing: border-box;
+ background-clip: content-box;
+ flex-basis: 100%; }
+
+.col-1 {
+ flex-basis: 8.33%;
+ max-width: 8.33%; }
+
+.col-2 {
+ flex-basis: 16.66%;
+ max-width: 16.66%; }
+
+.col-3 {
+ flex-basis: 25%;
+ max-width: 25%; }
+
+.col-4 {
+ flex-basis: 33.33%;
+ max-width: 33.33%; }
+
+.col-5 {
+ flex-basis: 41.66%;
+ max-width: 41.66%; }
+
+.col-6 {
+ flex-basis: 50%;
+ max-width: 50%; }
+
+.col-7 {
+ flex-basis: 58.33%;
+ max-width: 58.33%; }
+
+.col-8 {
+ flex-basis: 66.66%;
+ max-width: 66.66%; }
+
+.col-9 {
+ flex-basis: 75%;
+ max-width: 75%; }
+
+.col-10 {
+ flex-basis: 83.33%;
+ max-width: 83.33%; }
+
+.col-11 {
+ flex-basis: 91.66%;
+ max-width: 91.66%; }
+
+.col-12 {
+ flex-basis: 100%;
+ max-width: 100%; }
+
html {
font-size: 42px; }
@media screen and (min-device-width: 768px) {
@@ -32,7 +93,9 @@ html {
.minibox {
display: flex;
- width: 100%; }
+ width: 100%;
+ flex-wrap: wrap;
+ margin: calc(var(--grid-gap) * -1) 0 0 calc(var(--grid-gap) * -1); }
@media screen and (max-width: 640px) {
.minibox {
margin: auto;
@@ -134,4 +197,101 @@ html {
background: #242424;
color: rgba 255, 255, 255, 1; }
+@media only screen and (min-width: 768px) {
+ .col-m-1 {
+ flex-basis: 8.33%;
+ max-width: 8.33%; }
+
+ .col-m-2 {
+ flex-basis: 16.66%;
+ max-width: 16.66%; }
+
+ .col-m-3 {
+ flex-basis: 25%;
+ max-width: 25%; }
+
+ .col-m-4 {
+ flex-basis: 33.33%;
+ max-width: 33.33%; }
+
+ .col-m-5 {
+ flex-basis: 41.66%;
+ max-width: 41.66%; }
+
+ .col-m-6 {
+ flex-basis: 50%;
+ max-width: 50%; }
+
+ .col-m-7 {
+ flex-basis: 58.33%;
+ max-width: 58.33%; }
+
+ .col-m-8 {
+ flex-basis: 66.66%;
+ max-width: 66.66%; }
+
+ .col-m-9 {
+ flex-basis: 75%;
+ max-width: 75%; }
+
+ .col-m-10 {
+ flex-basis: 83.33%;
+ max-width: 83.33%; }
+
+ .col-m-11 {
+ flex-basis: 91.66%;
+ max-width: 91.66%; }
+
+ .col-m-12 {
+ flex-basis: 100%;
+ max-width: 100%; } }
+@media only screen and (min-width: 1024px) {
+ .col-l-1 {
+ flex-basis: 8.33%;
+ max-width: 8.33%; }
+
+ .col-l-2 {
+ flex-basis: 16.66%;
+ max-width: 16.66%; }
+
+ .col-l-3 {
+ flex-basis: 25%;
+ max-width: 25%; }
+
+ .col-l-4 {
+ flex-basis: 33.33%;
+ max-width: 33.33%; }
+
+ .col-l-5 {
+ flex-basis: 41.66%;
+ max-width: 41.66%; }
+
+ .col-l-6 {
+ flex-basis: 50%;
+ max-width: 50%; }
+
+ .col-l-7 {
+ flex-basis: 58.33%;
+ max-width: 58.33%; }
+
+ .col-l-8 {
+ flex-basis: 66.66%;
+ max-width: 66.66%; }
+
+ .col-l-9 {
+ flex-basis: 75%;
+ max-width: 75%; }
+
+ .col-l-10 {
+ flex-basis: 83.33%;
+ max-width: 83.33%; }
+
+ .col-l-11 {
+ flex-basis: 91.66%;
+ max-width: 91.66%; }
+
+ .col-l-12 {
+ flex-basis: 100%;
+ max-width: 100%; } }
+
/*# sourceMappingURL=master.css.map */
diff --git a/master.css.map b/master.css.map
index 87481f1..d85f32b 100644
--- a/master.css.map
+++ b/master.css.map
@@ -1,6 +1,6 @@
{
"version": 3,
-"mappings": "AAAQ,wBAAc;AAuDtB,IAAI;EACF,SAAS,EArCK,IAAI;EAuClB,2CAAyD;IAH3D,IAAI;MAIA,SAAS,EArCG,IAAI;EAwClB,4CAA0D;IAP5D,IAAI;MAQA,SAAS,EAvCI,IAAI;;AA2CrB,IAAK;EACH,OAAO,EAAE,IAAI;EACb,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,MAAM;EAClB,cAAc,EAAE,MAAM;EAEtB,2CAAwD;IAN1D,IAAK;MAOD,MAAM,EAAE,IAAI;MACZ,OAAO,EAnEC,MAAW;EAsErB,2CAAwD;IAX1D,IAAK;MAYD,MAAM,EAAE,IAAI;MACZ,OAAO,EAvEG,IAAa;EA0EzB,2CAAyD;IAhB3D,IAAK;MAiBC,MAAM,EAAE,IAAI;MACZ,OAAO,EA3EC,MAAa;EA8EzB,4CAA0D;IArB5D,IAAK;MAsBC,MAAM,EAAE,IAAI;MACZ,OAAO,EA/EC,IAAa;;AAmF3B,QAAS;EACP,OAAO,EAAE,IAAI;EACb,KAAK,EAAE,IAAI;EAEX,oCAAiD;IAJnD,QAAS;MAKL,MAAM,EAAE,IAAI;MACZ,OAAO,EAAE,QAAa;EAGxB,oCAAiD;IATnD,QAAS;MAUL,MAAM,EAAE,IAAI;MACZ,OAAO,EAAE,OAAe;EAG1B,oCAAkD;IAdpD,QAAS;MAeH,MAAM,EAAE,IAAI;MACZ,OAAO,EAAE,QAAe;EAG5B,qCAAmD;IAnBrD,QAAS;MAoBH,MAAM,EAAE,IAAI;MACZ,OAAO,EAAE,MAAe;;AAI9B,OAAQ;EACN,cAAc,EAAE,iBAAiB;;AAGnC,IAAK;EACH,cAAc,EAAE,cAAe;;AAGjC,MAAO;EACL,eAAe,EAAE,qBAAqB;;AAGxC,OAAQ;EACN,eAAe,EAAE,iBAAiB;;AAGpC,IAAK;EACH,eAAe,EAAE,mBAAmB;;AAGtC,OAAQ;EACN,eAAe,EAAE,uBAAwB;;AAG3C,QAAS;EACP,eAAe,EAAE,wBAAwB;;AAG3C,IAAK;EACH,MAAM,EAAE,iBAA0B;EAClC,UAAU,EA7GO,qBAAqB;EA8GtC,KAAK,EAjHc,qBAAqB;EAkHxC,UAAU,EAAE,IAAI;EAChB,WAAW,EA1HG,OAAO;EA2HrB,UAAQ;IACN,UAAU,EArHO,qBAAqB;IAsHtC,UAAU,EAAE,IAAI;IAChB,SAAS,EAAE,UAAU;;AAIzB,OAAO;EACL,MAAM,EAAE,oBAA+B;;AAGzC,KAAM;EACJ,YAAY,EApHE,MAAM;;AAuHtB,KAAM;EACJ,YAAY,EAvHE,MAAM;;AA0HtB,OAAQ;EACN,YAAY,EA1HI,MAAM;;AA6HxB,OAAQ;EACN,aAAa,EAtIJ,MAAM;;AAyIjB,KAAM;EACJ,aAAa,EA3IC,MAAM;;AA8ItB,QAAS;EACP,aAAa,EA7II,IAAI;;AAgJvB,QAAS;EACP,aAAa,EAhJI,IAAI;;AAmJvB,OAAQ;EACN,aAAa,EAnJG,GAAG;;AAsJrB,KAAM;EACJ,YAAY,EAAE,IAAI;;AAGpB,MAAO;EACL,KAAK,EApKc,qBAAqB;EAqKxC,eAAe,EAAE,IAAI;EACrB,UAAU,EAAE,IAAI;EAChB,WAAW,EAhLE,UAAU;EAiLvB,SAAS,EAxLU,IAAI;EAyLvB,YAAQ;IACN,SAAS,EAAE,UAAW;IACtB,eAAe,EAAE,IAAI;IACrB,KAAK,EA5KY,qBAAqB;IA6KtC,UAAU,EAAE,IAAI;;AAIpB,KAAM;EACJ,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,eAAe,EAAE,YAAY;;AAG/B,MAAO;EACL,aAAa,EAAE,GAAG;EAClB,UAAU,EAxLQ,OAAgB;EAyLlC,KAAK,EA1Lc,qBAAqB",
+"mappings": "AAAQ,wBAAc;AAepB,KAAM;EACJ,UAAU,CAAC,KAAK;;AA2DpB,UAAW;EACT,OAAO,EAAE,IAAI;EACb,SAAS,EAAE,IAAI;EACf,MAAM,EAAE,yDAAyD;;AAGnE,IAAK;EACH,UAAU,EAAE,UAAU;EACtB,eAAe,EAAE,WAAW;EAC5B,UAAU,EAAE,IAAI;;AAYhB,MAAW;EACT,UAAU,EAPJ,KAAY;EAQlB,SAAS,EARH,KAAY;;AAMpB,MAAW;EACT,UAAU,EAPJ,MAAY;EAQlB,SAAS,EARH,MAAY;;AAMpB,MAAW;EACT,UAAU,EAPJ,GAAY;EAQlB,SAAS,EARH,GAAY;;AAMpB,MAAW;EACT,UAAU,EAPJ,MAAY;EAQlB,SAAS,EARH,MAAY;;AAMpB,MAAW;EACT,UAAU,EAPJ,MAAY;EAQlB,SAAS,EARH,MAAY;;AAMpB,MAAW;EACT,UAAU,EAPJ,GAAY;EAQlB,SAAS,EARH,GAAY;;AAMpB,MAAW;EACT,UAAU,EAPJ,MAAY;EAQlB,SAAS,EARH,MAAY;;AAMpB,MAAW;EACT,UAAU,EAPJ,MAAY;EAQlB,SAAS,EARH,MAAY;;AAMpB,MAAW;EACT,UAAU,EAPJ,GAAY;EAQlB,SAAS,EARH,GAAY;;AAMpB,OAAW;EACT,UAAU,EAPJ,MAAY;EAQlB,SAAS,EARH,MAAY;;AAMpB,OAAW;EACT,UAAU,EAPJ,MAAY;EAQlB,SAAS,EARH,MAAY;;AAMpB,OAAW;EACT,UAAU,EAPJ,IAAY;EAQlB,SAAS,EARH,IAAY;;AAYtB,IAAI;EACF,SAAS,EApEK,IAAI;EAsElB,2CAAyD;IAH3D,IAAI;MAIA,SAAS,EApEG,IAAI;EAuElB,4CAA0D;IAP5D,IAAI;MAQA,SAAS,EAtEI,IAAI;;AA0ErB,IAAK;EACH,OAAO,EAAE,IAAI;EACb,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,MAAM;EAClB,cAAc,EAAE,MAAM;EAEtB,2CAAwD;IAN1D,IAAK;MAOD,MAAM,EAAE,IAAI;MACZ,OAAO,EAlGC,MAAW;EAqGrB,2CAAwD;IAX1D,IAAK;MAYD,MAAM,EAAE,IAAI;MACZ,OAAO,EAtGG,IAAa;EAyGzB,2CAAyD;IAhB3D,IAAK;MAiBC,MAAM,EAAE,IAAI;MACZ,OAAO,EA1GC,MAAa;EA6GzB,4CAA0D;IArB5D,IAAK;MAsBC,MAAM,EAAE,IAAI;MACZ,OAAO,EA9GC,IAAa;;AAkH3B,QAAS;EACP,OAAO,EAAE,IAAI;EACb,KAAK,EAAE,IAAI;EACX,SAAS,EAAE,IAAI;EACf,MAAM,EAAE,yDAAyD;EAEjE,oCAAiD;IANnD,QAAS;MAOL,MAAM,EAAE,IAAI;MACZ,OAAO,EAAE,QAAa;EAGxB,oCAAiD;IAXnD,QAAS;MAYL,MAAM,EAAE,IAAI;MACZ,OAAO,EAAE,OAAe;EAG1B,oCAAkD;IAhBpD,QAAS;MAiBH,MAAM,EAAE,IAAI;MACZ,OAAO,EAAE,QAAe;EAG5B,qCAAmD;IArBrD,QAAS;MAsBH,MAAM,EAAE,IAAI;MACZ,OAAO,EAAE,MAAe;;AAI9B,OAAQ;EACN,cAAc,EAAE,iBAAiB;;AAGnC,IAAK;EACH,cAAc,EAAE,cAAe;;AAGjC,MAAO;EACL,eAAe,EAAE,qBAAqB;;AAGxC,OAAQ;EACN,eAAe,EAAE,iBAAiB;;AAGpC,IAAK;EACH,eAAe,EAAE,mBAAmB;;AAGtC,OAAQ;EACN,eAAe,EAAE,uBAAwB;;AAG3C,QAAS;EACP,eAAe,EAAE,wBAAwB;;AAG3C,IAAK;EACH,MAAM,EAAE,iBAA0B;EAClC,UAAU,EA9IO,qBAAqB;EA+ItC,KAAK,EAlJc,qBAAqB;EAmJxC,UAAU,EAAE,IAAI;EAChB,WAAW,EA3JG,OAAO;EA4JrB,UAAQ;IACN,UAAU,EAtJO,qBAAqB;IAuJtC,UAAU,EAAE,IAAI;IAChB,SAAS,EAAE,UAAU;;AAIzB,OAAO;EACL,MAAM,EAAE,oBAA+B;;AAGzC,KAAM;EACJ,YAAY,EArJE,MAAM;;AAwJtB,KAAM;EACJ,YAAY,EAxJE,MAAM;;AA2JtB,OAAQ;EACN,YAAY,EA3JI,MAAM;;AA8JxB,OAAQ;EACN,aAAa,EAvKJ,MAAM;;AA0KjB,KAAM;EACJ,aAAa,EA5KC,MAAM;;AA+KtB,QAAS;EACP,aAAa,EA9KI,IAAI;;AAiLvB,QAAS;EACP,aAAa,EAjLI,IAAI;;AAoLvB,OAAQ;EACN,aAAa,EApLG,GAAG;;AAuLrB,KAAM;EACJ,YAAY,EAAE,IAAI;;AAGpB,MAAO;EACL,KAAK,EArMc,qBAAqB;EAsMxC,eAAe,EAAE,IAAI;EACrB,UAAU,EAAE,IAAI;EAChB,WAAW,EAjNE,UAAU;EAkNvB,SAAS,EAzNU,IAAI;EA0NvB,YAAQ;IACN,SAAS,EAAE,UAAW;IACtB,eAAe,EAAE,IAAI;IACrB,KAAK,EA7MY,qBAAqB;IA8MtC,UAAU,EAAE,IAAI;;AAIpB,KAAM;EACJ,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,eAAe,EAAE,YAAY;;AAG/B,MAAO;EACL,aAAa,EAAE,GAAG;EAClB,UAAU,EAzNQ,OAAgB;EA0NlC,KAAK,EA3Nc,qBAAqB;;AA+N1C,yCAA0C;EAEtC,QAAa;IACX,UAAU,EA7LN,KAAY;IA8LhB,SAAS,EA9LL,KAAY;;EA4LlB,QAAa;IACX,UAAU,EA7LN,MAAY;IA8LhB,SAAS,EA9LL,MAAY;;EA4LlB,QAAa;IACX,UAAU,EA7LN,GAAY;IA8LhB,SAAS,EA9LL,GAAY;;EA4LlB,QAAa;IACX,UAAU,EA7LN,MAAY;IA8LhB,SAAS,EA9LL,MAAY;;EA4LlB,QAAa;IACX,UAAU,EA7LN,MAAY;IA8LhB,SAAS,EA9LL,MAAY;;EA4LlB,QAAa;IACX,UAAU,EA7LN,GAAY;IA8LhB,SAAS,EA9LL,GAAY;;EA4LlB,QAAa;IACX,UAAU,EA7LN,MAAY;IA8LhB,SAAS,EA9LL,MAAY;;EA4LlB,QAAa;IACX,UAAU,EA7LN,MAAY;IA8LhB,SAAS,EA9LL,MAAY;;EA4LlB,QAAa;IACX,UAAU,EA7LN,GAAY;IA8LhB,SAAS,EA9LL,GAAY;;EA4LlB,SAAa;IACX,UAAU,EA7LN,MAAY;IA8LhB,SAAS,EA9LL,MAAY;;EA4LlB,SAAa;IACX,UAAU,EA7LN,MAAY;IA8LhB,SAAS,EA9LL,MAAY;;EA4LlB,SAAa;IACX,UAAU,EA7LN,IAAY;IA8LhB,SAAS,EA9LL,IAAY;AAoMtB,0CAA2C;EAEvC,QAAa;IACX,UAAU,EAvMN,KAAY;IAwMhB,SAAS,EAxML,KAAY;;EAsMlB,QAAa;IACX,UAAU,EAvMN,MAAY;IAwMhB,SAAS,EAxML,MAAY;;EAsMlB,QAAa;IACX,UAAU,EAvMN,GAAY;IAwMhB,SAAS,EAxML,GAAY;;EAsMlB,QAAa;IACX,UAAU,EAvMN,MAAY;IAwMhB,SAAS,EAxML,MAAY;;EAsMlB,QAAa;IACX,UAAU,EAvMN,MAAY;IAwMhB,SAAS,EAxML,MAAY;;EAsMlB,QAAa;IACX,UAAU,EAvMN,GAAY;IAwMhB,SAAS,EAxML,GAAY;;EAsMlB,QAAa;IACX,UAAU,EAvMN,MAAY;IAwMhB,SAAS,EAxML,MAAY;;EAsMlB,QAAa;IACX,UAAU,EAvMN,MAAY;IAwMhB,SAAS,EAxML,MAAY;;EAsMlB,QAAa;IACX,UAAU,EAvMN,GAAY;IAwMhB,SAAS,EAxML,GAAY;;EAsMlB,SAAa;IACX,UAAU,EAvMN,MAAY;IAwMhB,SAAS,EAxML,MAAY;;EAsMlB,SAAa;IACX,UAAU,EAvMN,MAAY;IAwMhB,SAAS,EAxML,MAAY;;EAsMlB,SAAa;IACX,UAAU,EAvMN,IAAY;IAwMhB,SAAS,EAxML,IAAY",
"sources": ["master.scss"],
"names": [],
"file": "master.css"
diff --git a/master.scss b/master.scss
index 1ea521a..a4be752 100644
--- a/master.scss
+++ b/master.scss
@@ -1,5 +1,21 @@
@import './reset.css' ;
+// Number of Columns
+ $grid-columns: 12;
+
+ $content-padding: 5px;
+ $content-padding-2: 10px;
+ $content-padding-3: 15px;
+ $content-padding-4: 20px;
+
+ $content-margin: 5px;
+ $content-margin-2: 10px;
+ $content-margin-3: 15px;
+ $content-margin-4: 20px;
+//grid gap
+ :root {
+ --grid-gap: 10px;
+ }
// Margins
$margin: 1rem ;
$margin-s: 2rem ;
@@ -53,6 +69,37 @@
// Patterns
+
+// Grid System Logic
+//flex container definition
+
+.flex-grid {
+ display: flex;
+ flex-wrap: wrap;
+ margin: calc(var(--grid-gap) * -1) 0 0 calc(var(--grid-gap) * -1);
+}
+
+.col {
+ box-sizing: border-box;
+ background-clip: content-box;
+ flex-basis: 100%;
+}
+
+//round flex items' width
+@function round-width($i) {
+ $width: floor(100 * $i * 100 / $grid-columns) / 100;
+ @return $width#{"%"};
+}
+
+//utility classes
+
+@for $i from 1 through $grid-columns {
+ .col-#{$i} {
+ flex-basis: round-width($i);
+ max-width: round-width($i);
+ }
+}
+
html{
font-size: $text-mobile;
@@ -95,6 +142,8 @@ html{
.minibox {
display: flex ;
width: 100% ;
+ flex-wrap: wrap;
+ margin: calc(var(--grid-gap) * -1) 0 0 calc(var(--grid-gap) * -1);
@media screen and (max-width: $breakpoint-phone) {
margin: auto ;
@@ -223,3 +272,24 @@ html{
background: $color-primary;
color: $color-opposite ;
}
+
+
+@media only screen and (min-width: 768px) {
+ @for $i from 1 through $grid-columns {
+ .col-m-#{$i} {
+ flex-basis: round-width($i);
+ max-width: round-width($i);
+ }
+ }
+
+}
+
+@media only screen and (min-width: 1024px) {
+ @for $i from 1 through $grid-columns {
+ .col-l-#{$i} {
+ flex-basis: round-width($i);
+ max-width: round-width($i);
+ }
+ }
+
+}