pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Just yur basic flexbox row/col system

Browse Source
This commit is contained in:
Andrew Croce 2018-07-06 16:03:14 -04:00
parent be088e971d
commit 0ab18ae319
1 changed files with 25 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
scss/core/_grid.scss
View File

@ -4,9 +4,18 @@
* @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/core/_grid.scss * @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/core/_grid.scss
*/ */
// The default grid has no independent styling for a generic "cell" // Roll our own simple grid system
// Lets add one! // USWDS grid system is fairly outdated and does not serve the needs of this project
@mixin usa-cell { // We are implementing a simple flexbox row/column system
@mixin grid-row {
@include media($medium-screen) {
display: flex;
flex-direction: row;
}
}
@mixin grid-pad {
@include padding(null $site-margins-mobile); @include padding(null $site-margins-mobile);
@include media($medium-screen) { @include media($medium-screen) {
@ -14,29 +23,24 @@
} }
} }
// Redefine the grid .row {
// We need a full-width grid, so make .usa-full-grid actually do that. @include grid-row;
// By default it just removed the padding, which didn't really make sense.
.usa-grid-full {
max-width: none;
@include padding(null $site-margins-mobile);
@include media($medium) { &.row--pad {
@include padding(null $site-margins); @include grid-pad;
} }
// Flexbox-ize the grid &.row--max {
&.usa-grid__flex { max-width: $site-max-width;
display: flex;
flex-direction: row;
} }
} }
.usa-cell, .col {
[class*='usa-width-'] { &.col--pad {
@include usa-cell; @inclue grid-pad;
} }
.usa-width-grow { &.col--grow {
flex-grow: 1; flex-grow: 1;
}
} }