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: ``` <div class="row"> <div class="grid-large two-thirds"> 2/3 </div> <div class="grid-large one-third"> 1/3 </div> </div> ``` ===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.
This commit is contained in:
parent
f65b223b61
commit
0545085e74
|
@ -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;
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -1,2 +0,0 @@
|
|||
// Vendor
|
||||
@import "vendor/_sass-mq.scss";
|
|
@ -1 +1,2 @@
|
|||
@import "helpers/image";
|
||||
@import "helpers/media-query";
|
||||
|
|
|
@ -0,0 +1,7 @@
|
|||
@import "../vendor/_sass-mq.scss";
|
||||
|
||||
@mixin media-query($args...) {
|
||||
@include mq.mq($args...) {
|
||||
@content;
|
||||
}
|
||||
}
|
|
@ -0,0 +1 @@
|
|||
@import "objects/grid";
|
|
@ -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%);
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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";
|
||||
|
|
Reference in New Issue