From 0545085e74a3daee94bccfaa925ab38285b87c8a Mon Sep 17 00:00:00 2001 From: spongycake Date: Sat, 26 Feb 2022 14:28:51 +0000 Subject: [PATCH] Grid, with rows and columns, see -> A number of classes have been added to control the layout in a grid-based way. To start `row` is wrapped the elements you wish to group in a horizontal line. Next up, `grid-small` and `grid-large` relate to columns and behavior on screen size. For example, `grid-large` will trigger layout changes when the screen reaches a "desktop size" and `grid-small` for "mobile size". The list of available column widths: * half * one-fourth * three-fourths * one-third * two-thirds Going in the order they are declared, for example, columns A,B - when A is one-third and B is two-thirds. This means A will occupy 33% and B will occupy 66%. Additionally, look at _sass-mq.scss file if you want to define different screen sizes. EXAMPLE: ```
2/3
1/3
``` ===Sass API=== We have a helper called `media-query`. It directs calls to the sass-mq library. Say we wanted to include a breakpoint in your sass files, do the following: ``` @include media-query($from: mobile) { // content } ``` You are now generating a media-queries for mobile screens. To understand what arguments can be passed to `media-query` then look at the sass-mq documentation. [https://sass-mq.github.io/sass-mq/](https://sass-mq.github.io/sass-mq/) === Other === Technical - implementation being used in grid is flexbox. Do not expect support for standard HTML Grid Layout. --- public/style.css | 70 ++++++++++++++++++++++++++ public/style.min.css | 2 +- src/scss/_mixins.scss | 2 - src/scss/helpers.scss | 1 + src/scss/helpers/_media-query.scss | 7 +++ src/scss/objects.scss | 1 + src/scss/objects/_grid.scss | 79 ++++++++++++++++++++++++++++++ src/scss/styles.scss | 4 +- 8 files changed, 161 insertions(+), 5 deletions(-) delete mode 100644 src/scss/_mixins.scss create mode 100644 src/scss/helpers/_media-query.scss create mode 100644 src/scss/objects.scss create mode 100644 src/scss/objects/_grid.scss diff --git a/public/style.css b/public/style.css index 30d716f..0201b6b 100644 --- a/public/style.css +++ b/public/style.css @@ -191,6 +191,76 @@ a:active { margin-right: 15px; } +/** + * Grid + */ +.grid-small, +.grid-large { + padding-left: 1rem; + padding-right: 1rem; +} + +.row { + margin-left: -1rem; + margin-right: -1rem; +} + +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; +} + +.grid-small, +.grid-large { + flex-basis: 100%; + margin-bottom: 1rem; +} + +/* Small screen breakpoint */ +@media (min-width: 20em) { + .grid-small { + flex: 1; + margin-bottom: 0; + } + .grid-small.half { + flex: 0 0 50%; + } + .grid-small.one-fourth { + flex: 0 0 25%; + } + .grid-small.three-fourths { + flex: 0 0 75%; + } + .grid-small.one-third { + flex: 0 0 33.3333333333%; + } + .grid-small.two-thirds { + flex: 0 0 66.6666666667%; + } +} +/* Large screen breakpoint */ +@media (min-width: 61.25em) { + .grid-large { + flex: 1; + margin-bottom: 0; + } + .grid-large.half { + flex: 0 0 50%; + } + .grid-large.one-fourth { + flex: 0 0 25%; + } + .grid-large.three-fourths { + flex: 0 0 75%; + } + .grid-large.one-third { + flex: 0 0 33.3333333333%; + } + .grid-large.two-thirds { + flex: 0 0 66.6666666667%; + } +} .header { width: 100%; height: 56px; diff --git a/public/style.min.css b/public/style.min.css index 099298a..442a261 100644 --- a/public/style.min.css +++ b/public/style.min.css @@ -48,4 +48,4 @@ } } -.img-fluid{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{margin-top:0;margin-bottom:1.25rem;font-family:Arial,sans-serif;font-weight:700;color:#212529}h1,.h1{font-size:calc(1.4375rem + 2.25vw)}@media(min-width: 1200px){h1,.h1{font-size:3.125rem}}h2,.h2{font-size:calc(1.375rem + 1.5vw)}@media(min-width: 1200px){h2,.h2{font-size:2.5rem}}h3,.h3{font-size:calc(1.34375rem + 1.125vw)}@media(min-width: 1200px){h3,.h3{font-size:2.1875rem}}h4,.h4{font-size:calc(1.3125rem + 0.75vw)}@media(min-width: 1200px){h4,.h4{font-size:1.875rem}}h5,.h5{font-size:calc(1.28125rem + 0.375vw)}@media(min-width: 1200px){h5,.h5{font-size:1.5625rem}}h6,.h6{font-size:1.25rem}.lead{color:#212529;font-size:calc(1.28125rem + 0.375vw);font-weight:400;margin-top:0}@media(min-width: 1200px){.lead{font-size:1.5625rem}}*{box-sizing:border-box}html,body{margin:0;padding:0}html body{background-color:#fff}body{font-size:1.25rem;font-family:Arial,sans-serif;line-height:1.4;color:#212529}p{margin-top:0;margin-bottom:1rem}a{text-decoration:none;color:#ff8f23;text-decoration:underline}a:hover{color:#ff6a23}a:visited{color:#ff8f23}a:active{color:#ffb423}.text-lightblue{color:#b6e2ee}.container{max-width:1200px;margin-left:auto;margin-right:auto}@media(max-width: 78.75em){.container{margin-left:15px;margin-right:15px}}.full-width-container{max-width:100%;margin-left:15px;margin-right:15px}.header{width:100%;height:56px;box-shadow:0 2px 4px rgba(0,0,0,.4);background:transparent;color:#212529;display:flex;flex-direction:row;align-items:center;padding:0 16px}.header .brand{margin-left:auto;padding-left:1em;padding-right:1em;text-decoration:none}.header .brand>h1{color:#4fbad5 !important;display:inline-flex;align-items:center;font-size:calc(1.2875rem + 0.45vw);margin:0}@media(min-width: 1200px){.header .brand>h1{font-size:1.625rem}}.header .brand .brand-img{margin-right:.5rem}.header .brand .second{color:#ff8f23 !important}.header .lang-select{display:inline-flex;vertical-align:middle;margin-left:auto}.header__menu-toggle{background:none;border:none;width:24px;height:24px;padding:0;margin:0 24px 0 0;color:#fff}.side-nav__content{padding-top:32px;flex:1;list-style:none;padding:0;margin:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.side-nav__content li{min-height:48px;line-height:48px}.side-nav__content li a:hover{background:#343a40}.nav-collapse a{color:#000;text-decoration:none;width:100%;background:#fff;border-bottom:1px solid #212529;padding:.7em 1em;float:left}.hero{border-radius:5px;background:linear-gradient(to right, #159957, #155799);min-height:300px;width:100%;color:#fff;justify-content:center;flex-direction:column;flex-grow:1;padding:1.25rem;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center}.hero>h1{margin:0}.hero .message{display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center;letter-spacing:5px}.posts ul li{list-style:none;margin-bottom:calc(1.525rem + 3.3vw)}@media(min-width: 1200px){.posts ul li{margin-bottom:4rem}}.posts ul li a{display:-webkit-flex;display:flex;text-decoration:none}.posts ul{border-top:1px solid #495057;padding-left:0;padding-right:0;padding-top:calc(1.625rem + 4.5vw)}@media(min-width: 1200px){.posts ul{padding-top:5rem}}.posts .left{line-height:1em;display:-webkit-flex;display:flex;flex-direction:column}.posts .date{color:#4fbad5;margin-bottom:0.3125rem;margin-right:1em;text-transform:uppercase;font-size:calc(1.275rem + 0.3vw)}@media(min-width: 1200px){.posts .date{font-size:1.5rem}}.posts .year{color:#fff}.posts .title{font-size:calc(1.325rem + 0.9vw)}@media(min-width: 1200px){.posts .title{font-size:2rem}}.posts .right{line-height:1.15em}.lg-title span{background-color:#f8f9fa;padding-top:0.2rem;padding-bottom:0.2rem;padding-left:1rem;padding-right:1rem;border-radius:22px;color:#343a40 !important;border:3px #6c757d solid;display:inline-flex}.lg-title .icon{margin:0;padding-top:0 !important;padding-bottom:0 !important}.lg-title .icon:before{position:relative;top:0;left:0;bottom:0;content:"";margin-top:-3px;margin-bottom:-3px;width:64px;margin-right:calc(1.2625rem + 0.15vw);margin-left:-30px;border-radius:100%}@media(min-width: 1200px){.lg-title .icon:before{margin-right:1.375rem}}#description{width:100%;display:-webkit-flex;display:flex;flex-direction:row;padding:2em;column-gap:20px;border-width:.5em 0 0;border-style:solid;align-items:center;justify-content:center;border-image:linear-gradient(139deg, #fb8817, #ff4b01, #c12127, #e02aff) 3;background-color:#29008a !important;background:linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0))}#description .tile{border-left:7px solid #adb5bd;width:20em;padding-left:1.4em;padding-right:1.4em;padding-bottom:2em;background-color:rgba(0,0,0,.9)}#description .tile .content{margin:0 auto;max-width:280px}#description .tile .content p{margin:0 auto}#footer{display:-webkit-flex;display:flex;justify-content:end;margin-top:3em;padding:2em 1em}#footer ul li{list-style:none;display:inline-block;margin-right:.3em} +.img-fluid{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{margin-top:0;margin-bottom:1.25rem;font-family:Arial,sans-serif;font-weight:700;color:#212529}h1,.h1{font-size:calc(1.4375rem + 2.25vw)}@media(min-width: 1200px){h1,.h1{font-size:3.125rem}}h2,.h2{font-size:calc(1.375rem + 1.5vw)}@media(min-width: 1200px){h2,.h2{font-size:2.5rem}}h3,.h3{font-size:calc(1.34375rem + 1.125vw)}@media(min-width: 1200px){h3,.h3{font-size:2.1875rem}}h4,.h4{font-size:calc(1.3125rem + 0.75vw)}@media(min-width: 1200px){h4,.h4{font-size:1.875rem}}h5,.h5{font-size:calc(1.28125rem + 0.375vw)}@media(min-width: 1200px){h5,.h5{font-size:1.5625rem}}h6,.h6{font-size:1.25rem}.lead{color:#212529;font-size:calc(1.28125rem + 0.375vw);font-weight:400;margin-top:0}@media(min-width: 1200px){.lead{font-size:1.5625rem}}*{box-sizing:border-box}html,body{margin:0;padding:0}html body{background-color:#fff}body{font-size:1.25rem;font-family:Arial,sans-serif;line-height:1.4;color:#212529}p{margin-top:0;margin-bottom:1rem}a{text-decoration:none;color:#ff8f23;text-decoration:underline}a:hover{color:#ff6a23}a:visited{color:#ff8f23}a:active{color:#ffb423}.text-lightblue{color:#b6e2ee}.container{max-width:1200px;margin-left:auto;margin-right:auto}@media(max-width: 78.75em){.container{margin-left:15px;margin-right:15px}}.full-width-container{max-width:100%;margin-left:15px;margin-right:15px}.grid-small,.grid-large{padding-left:1rem;padding-right:1rem}.row{margin-left:-1rem;margin-right:-1rem}.row{display:flex;flex-direction:row;flex-wrap:wrap}.grid-small,.grid-large{flex-basis:100%;margin-bottom:1rem}@media(min-width: 20em){.grid-small{flex:1;margin-bottom:0}.grid-small.half{flex:0 0 50%}.grid-small.one-fourth{flex:0 0 25%}.grid-small.three-fourths{flex:0 0 75%}.grid-small.one-third{flex:0 0 33.3333333333%}.grid-small.two-thirds{flex:0 0 66.6666666667%}}@media(min-width: 61.25em){.grid-large{flex:1;margin-bottom:0}.grid-large.half{flex:0 0 50%}.grid-large.one-fourth{flex:0 0 25%}.grid-large.three-fourths{flex:0 0 75%}.grid-large.one-third{flex:0 0 33.3333333333%}.grid-large.two-thirds{flex:0 0 66.6666666667%}}.header{width:100%;height:56px;box-shadow:0 2px 4px rgba(0,0,0,.4);background:transparent;color:#212529;display:flex;flex-direction:row;align-items:center;padding:0 16px}.header .brand{margin-left:auto;padding-left:1em;padding-right:1em;text-decoration:none}.header .brand>h1{color:#4fbad5 !important;display:inline-flex;align-items:center;font-size:calc(1.2875rem + 0.45vw);margin:0}@media(min-width: 1200px){.header .brand>h1{font-size:1.625rem}}.header .brand .brand-img{margin-right:.5rem}.header .brand .second{color:#ff8f23 !important}.header .lang-select{display:inline-flex;vertical-align:middle;margin-left:auto}.header__menu-toggle{background:none;border:none;width:24px;height:24px;padding:0;margin:0 24px 0 0;color:#fff}.side-nav__content{padding-top:32px;flex:1;list-style:none;padding:0;margin:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.side-nav__content li{min-height:48px;line-height:48px}.side-nav__content li a:hover{background:#343a40}.nav-collapse a{color:#000;text-decoration:none;width:100%;background:#fff;border-bottom:1px solid #212529;padding:.7em 1em;float:left}.hero{border-radius:5px;background:linear-gradient(to right, #159957, #155799);min-height:300px;width:100%;color:#fff;justify-content:center;flex-direction:column;flex-grow:1;padding:1.25rem;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center}.hero>h1{margin:0}.hero .message{display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center;letter-spacing:5px}.posts ul li{list-style:none;margin-bottom:calc(1.525rem + 3.3vw)}@media(min-width: 1200px){.posts ul li{margin-bottom:4rem}}.posts ul li a{display:-webkit-flex;display:flex;text-decoration:none}.posts ul{border-top:1px solid #495057;padding-left:0;padding-right:0;padding-top:calc(1.625rem + 4.5vw)}@media(min-width: 1200px){.posts ul{padding-top:5rem}}.posts .left{line-height:1em;display:-webkit-flex;display:flex;flex-direction:column}.posts .date{color:#4fbad5;margin-bottom:0.3125rem;margin-right:1em;text-transform:uppercase;font-size:calc(1.275rem + 0.3vw)}@media(min-width: 1200px){.posts .date{font-size:1.5rem}}.posts .year{color:#fff}.posts .title{font-size:calc(1.325rem + 0.9vw)}@media(min-width: 1200px){.posts .title{font-size:2rem}}.posts .right{line-height:1.15em}.lg-title span{background-color:#f8f9fa;padding-top:0.2rem;padding-bottom:0.2rem;padding-left:1rem;padding-right:1rem;border-radius:22px;color:#343a40 !important;border:3px #6c757d solid;display:inline-flex}.lg-title .icon{margin:0;padding-top:0 !important;padding-bottom:0 !important}.lg-title .icon:before{position:relative;top:0;left:0;bottom:0;content:"";margin-top:-3px;margin-bottom:-3px;width:64px;margin-right:calc(1.2625rem + 0.15vw);margin-left:-30px;border-radius:100%}@media(min-width: 1200px){.lg-title .icon:before{margin-right:1.375rem}}#description{width:100%;display:-webkit-flex;display:flex;flex-direction:row;padding:2em;column-gap:20px;border-width:.5em 0 0;border-style:solid;align-items:center;justify-content:center;border-image:linear-gradient(139deg, #fb8817, #ff4b01, #c12127, #e02aff) 3;background-color:#29008a !important;background:linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0))}#description .tile{border-left:7px solid #adb5bd;width:20em;padding-left:1.4em;padding-right:1.4em;padding-bottom:2em;background-color:rgba(0,0,0,.9)}#description .tile .content{margin:0 auto;max-width:280px}#description .tile .content p{margin:0 auto}#footer{display:-webkit-flex;display:flex;justify-content:end;margin-top:3em;padding:2em 1em}#footer ul li{list-style:none;display:inline-block;margin-right:.3em} diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss deleted file mode 100644 index aaf54e7..0000000 --- a/src/scss/_mixins.scss +++ /dev/null @@ -1,2 +0,0 @@ -// Vendor -@import "vendor/_sass-mq.scss"; diff --git a/src/scss/helpers.scss b/src/scss/helpers.scss index e350fd4..ba8c9d3 100644 --- a/src/scss/helpers.scss +++ b/src/scss/helpers.scss @@ -1 +1,2 @@ @import "helpers/image"; +@import "helpers/media-query"; diff --git a/src/scss/helpers/_media-query.scss b/src/scss/helpers/_media-query.scss new file mode 100644 index 0000000..9e000a7 --- /dev/null +++ b/src/scss/helpers/_media-query.scss @@ -0,0 +1,7 @@ +@import "../vendor/_sass-mq.scss"; + +@mixin media-query($args...) { + @include mq.mq($args...) { + @content; + } +} diff --git a/src/scss/objects.scss b/src/scss/objects.scss new file mode 100644 index 0000000..02e2d0a --- /dev/null +++ b/src/scss/objects.scss @@ -0,0 +1 @@ +@import "objects/grid"; diff --git a/src/scss/objects/_grid.scss b/src/scss/objects/_grid.scss new file mode 100644 index 0000000..49337c3 --- /dev/null +++ b/src/scss/objects/_grid.scss @@ -0,0 +1,79 @@ +/** + * Grid + */ + +$column-padding: 1rem; +$margin-bottom: 1rem; + +// The rows have a negative margin which are offset by the padding on the columns. +%column-padding { + @include padding-left($column-padding); + @include padding-right($column-padding); +} + +%row-margin { + @include margin-left(-$column-padding); + @include margin-right(-$column-padding); +} + +// Flex row +.row { + @extend %row-margin; + display: flex; + flex-direction: row; + flex-wrap: wrap; +} + +.grid-small, +.grid-large { + @extend %column-padding; + flex-basis: 100%; + margin-bottom: $margin-bottom; +} + +/* Small screen breakpoint */ + +@include media-query($from: mobile) { + .grid-small { + flex: 1; + margin-bottom: 0; + &.half { + flex: 0 0 calc(1 / 2 * 100%); + } + &.one-fourth { + flex: 0 0 calc(1 / 4 * 100%); + } + &.three-fourths { + flex: 0 0 calc(3 / 4 * 100%); + } + &.one-third { + flex: 0 0 calc(1 / 3 * 100%); + } + &.two-thirds { + flex: 0 0 calc(2 / 3 * 100%); + } + } +} + +/* Large screen breakpoint */ +@include media-query($from: desktop) { + .grid-large { + flex: 1; + margin-bottom: 0; + &.half { + flex: 0 0 calc(1 / 2 * 100%); + } + &.one-fourth { + flex: 0 0 calc(1 / 4 * 100%); + } + &.three-fourths { + flex: 0 0 calc(3 / 4 * 100%); + } + &.one-third { + flex: 0 0 calc(1 / 3 * 100%); + } + &.two-thirds { + flex: 0 0 calc(2 / 3 * 100%); + } + } +} diff --git a/src/scss/styles.scss b/src/scss/styles.scss index 4de1a61..e80b264 100644 --- a/src/scss/styles.scss +++ b/src/scss/styles.scss @@ -1,13 +1,13 @@ @use "~sass-mq/mq"; -@import "helpers"; @import "~rfs/scss"; @import "settings"; -@import "mixins"; +@import "helpers"; @import "maps"; @import "utils"; @import "core"; @import "global"; @import "colors"; @import "container"; +@import "objects"; @import "components"; @import "~responsive-nav/responsive-nav.css";