Last active
October 24, 2019 20:11
-
-
Save wesselej/fa71dd6e3905cf21735a36664ae9c898 to your computer and use it in GitHub Desktop.
PG Flexbox Grid
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@function rem($values, $base: null) { | |
$rem-values: (); | |
$count: length($values); | |
$base: 16px; | |
@if $count==1 { | |
@return -zf-to-rem($values, $base); | |
} | |
@for $i from 1 through $count { | |
$rem-values: append($rem-values, -zf-to-rem(nth($values, $i), $base)); | |
} | |
@return $rem-values; | |
} | |
@function strip-unit($num) { | |
@return $num / ($num * 0 + 1); | |
} | |
@function -zf-to-rem($value, $base: null) { | |
// Check if the value is a number | |
@if type-of($value) !='number' { | |
@warn inspect($value)+' was passed to rem(), which is not a number.'; | |
@return $value; | |
} | |
// Transform em into rem if someone hands over 'em's | |
@if unit($value)=='em' { | |
$value: strip-unit($value) * 1rem; | |
} | |
// Calculate rem if units for $value is not rem or em | |
@if unit($value) !='rem' { | |
$value: strip-unit($value) / strip-unit($base) * 1rem; | |
} | |
// Turn 0rem into 0 | |
@if $value==0rem { | |
$value: 0; | |
} | |
@return $value; | |
} | |
/* Grid sizes: */ | |
/* http://gridcalculator.dk/#/1176/12/20/10 -- 78px col */ | |
$max-width: rem(1176); | |
$mobile: rem(1030); | |
$mobile-height: rem(86); | |
$md: rem(700); | |
$lg: rem(1000); | |
$gap: rem(20); | |
$col: rem(78); | |
$media-mobile: "only screen and (max-width : #{$mobile})"; | |
$media-desktop: "only screen and (min-width : #{$mobile})"; | |
$media-md: "only screen and (min-width : #{$md})"; | |
$media-lg: "only screen and (min-width : #{$lg})"; | |
$media-md-only: "only screen and (min-width : #{$md}) and (max-width : #{$lg})"; | |
$media-sm-down: "only screen and (max-width : #{$md})"; | |
$media-md-down: "only screen and (max-width : #{$lg})"; | |
/* Colors */ | |
/***************** | |
$green: #97c100; | |
$green: #3b7d2f; | |
$ltgreen: #41b864; | |
$blue: #182f77; | |
$gray: #545456; | |
$ltgray: #f4f4f4; | |
$formgray: #8d9092; | |
$red: #cc0000; | |
*******************/ | |
$text: #000000; | |
$maroon: #5E0F0B; /* this color from style tile */ | |
/* $maroon: #660000; This color from web site */ | |
$red: #900202; | |
$black: #000000; | |
$gray: #1e1e1e; | |
$lightgray: lighten($gray, 75%); | |
$lightred: #C33027; | |
$imgroot: '/wp-content/themes/fiore/_images/'; | |
@mixin button() { | |
background: none; | |
color: $lightred; | |
border: 2px solid $lightred; | |
font-size: rem(18); | |
line-height: 1em; | |
display: inline-block; | |
padding: rem(6 6 8); | |
text-decoration: none; | |
text-transform: uppercase; | |
position: relative; | |
min-width: rem(155); | |
text-align: center; | |
transition: all 300ms ease-out; | |
background-color: $gray; | |
z-index: 1; | |
&:after { | |
content: ''; | |
display: block; | |
position: absolute; | |
z-index: -1; | |
transition: width 300ms ease-out, color 300ms ease-out; | |
width: 0%; | |
height: 100%; | |
top: 0; | |
left: 0; | |
background: $lightred; | |
} | |
&:hover, | |
&:focus { | |
color: white; | |
&:after { | |
width: 100%; | |
} | |
} | |
} | |
@mixin box-shadow(){ | |
box-shadow: 0px 5px 10px 0 rgba(0, 0, 0, .25); | |
} | |
@mixin clearfix() { | |
&::before, | |
&::after { | |
display: table; | |
content: ' '; | |
} | |
&::after { | |
clear: both; | |
} | |
} | |
@mixin centercols($colcount) { | |
margin-right: auto; | |
margin-left: auto; | |
position: relative; | |
max-width: rem($col*$colcount + $gap*$colcount); | |
padding-right: $gap/2; | |
padding-left: $gap/2; | |
} | |
@mixin screen-reader-text() { | |
clip: rect(1px, 1px, 1px, 1px); | |
position: absolute !important; | |
height: 1px; | |
width: 1px; | |
overflow: hidden; | |
word-wrap: normal !important; | |
&:focus { | |
background-color: #f1f1f1; | |
clip: auto !important; | |
color: #21759b; | |
display: block; | |
font-size: rem(14); | |
height: auto; | |
left: 5px; | |
line-height: normal; | |
padding: 15px 23px 14px; | |
text-decoration: none; | |
top: 5px; | |
width: auto; | |
z-index: 100000; | |
/* Above WP toolbar. */ | |
} | |
} | |
@mixin block-padding() { | |
padding-top: rem(60); | |
padding-bottom: rem(60); | |
} | |
@mixin block-margin() { | |
margin-top: rem(60); | |
margin-bottom: rem(60); | |
} | |
/* | |
From: http://flexboxgrid.com/ | |
Uncomment and set these variables to customize the grid. | |
Note - set xs size for start and then go up for changes | |
*/ | |
/* if more than gap around whole container - add it to .max-container */ | |
.flex-column{ | |
display: flex; | |
flex-wrap: wrap; | |
flex-direction: column; | |
} | |
.fill-extra-space{ | |
flex-grow: 1; | |
} | |
.max-container { | |
margin-right: auto; | |
margin-left: auto; | |
position: relative; | |
max-width: $max-width + $gap; /* BW: always set this on grid - .row has negative margins to pull out and then columns add back in padding. Do this so can nest rows, this is site width + 1 gutter so padding on first row makes content width 1032-20 = 1012 */ | |
width: 100%; | |
padding: 0; | |
@media #{$media-md}{ | |
padding: rem(0 10); /* extra padding so 20px around whole design on large screens */ | |
} | |
&.no-padding{ | |
padding: 0; | |
} | |
} | |
.row { | |
display: -ms-flexbox; | |
display: -webkit-box; | |
display: flex; | |
-ms-flex-direction: row; | |
-webkit-box-orient: horizontal; | |
-webkit-box-direction: normal; | |
flex-direction: row; | |
-ms-flex-wrap: wrap; | |
flex-wrap: wrap; | |
.row{ | |
margin-right: -$gap/2; | |
margin-left: -$gap/2; | |
} | |
} | |
.col{ | |
padding-right: $gap/2; | |
padding-left: $gap/2; | |
position: relative; | |
} | |
.row-no-wrap{ | |
flex-wrap: nowrap; | |
} | |
.vertical-center{ /* old way*/ | |
position: relative; | |
top: 50%; | |
transform: translateY(-50%); | |
} | |
.flex-end{ | |
justify-content: flex-end; | |
} | |
.row.reverse { | |
-ms-flex-direction: row-reverse; | |
-webkit-box-orient: horizontal; | |
-webkit-box-direction: reverse; | |
flex-direction: row-reverse; | |
} | |
.col.reverse { | |
-ms-flex-direction: column-reverse; | |
-webkit-box-orient: vertical; | |
-webkit-box-direction: reverse; | |
flex-direction: column-reverse; | |
} | |
/*.flex-img { responsive images inside a col -- doesn't seem to do anything | |
display: block; | |
-ms-flex: 0 0 auto; | |
-webkit-flex: 0 0 auto; | |
flex: 0 0 auto; | |
max-width: 100%; | |
height: auto; | |
width: 100%; | |
}*/ | |
.align-bottom{ | |
align-self: flex-end; | |
} | |
.align-center { | |
align-self: center; | |
} | |
.align-right{ | |
display: flex; | |
justify-content: flex-end; | |
} | |
.col-8-block-wrapper>* { | |
@include centercols(8); | |
} | |
.col-10{ /* no bigger than 10 col - center with .center-sm on parent .row */ | |
width: 100%; | |
max-width: rem( $col*10 + $gap*10); | |
} | |
.col-9{ | |
width: 100%; | |
max-width: rem( $col*9 + $gap*9); | |
} | |
.col-8{ /* no bigger than 8 col - center with .center-sm on parent .row */ | |
width: 100%; | |
max-width: rem( $col*8 + $gap*8); | |
} | |
.col-6{ | |
width: 100%; | |
max-width: rem( $col*6 + $gap*6); | |
} | |
.md-down-hide{ | |
@media only screen and (max-width : #{$lg}){ | |
display: none; | |
} | |
} | |
.md-up-show{ | |
display: none; | |
@media only screen and (max-width : #{$lg}){ | |
display: block; | |
} | |
} | |
/* theme specific columns */ | |
/* theme specific columns */ | |
.col-sm, | |
.col-sm-1, | |
.col-sm-2, | |
.col-sm-3, | |
.col-sm-4, | |
.col-sm-5, | |
.col-sm-6, | |
.col-sm-7, | |
.col-sm-8, | |
.col-sm-9, | |
.col-sm-10, | |
.col-sm-11, | |
.col-sm-12 { | |
-ms-flex: 0 0 auto; | |
-webkit-box-flex: 0; | |
flex: 0 0 auto; | |
} | |
.row-no-wrap-sm{ | |
flex-wrap: nowrap; | |
} | |
.col-sm { | |
-webkit-flex-grow: 1; | |
-ms-flex-positive: 1; | |
-webkit-box-flex: 1; | |
flex-grow: 1; | |
-ms-flex-preferred-size: 0; | |
flex-basis: 0; | |
max-width: 100%; | |
} | |
.col-sm-1 { | |
-ms-flex-preferred-size: 8.333%; | |
flex-basis: 8.333%; | |
max-width: 8.333%; | |
} | |
.col-sm-2 { | |
-ms-flex-preferred-size: 16.667%; | |
flex-basis: 16.667%; | |
max-width: 16.667%; | |
} | |
.col-sm-3 { | |
-ms-flex-preferred-size: 25%; | |
flex-basis: 25%; | |
max-width: 25%; | |
} | |
.col-sm-4 { | |
-ms-flex-preferred-size: 33.333%; | |
flex-basis: 33.333%; | |
max-width: 33.333%; | |
} | |
.col-sm-5 { | |
-ms-flex-preferred-size: 41.667%; | |
flex-basis: 41.667%; | |
max-width: 41.667%; | |
} | |
.col-sm-6 { | |
-ms-flex-preferred-size: 50%; | |
flex-basis: 50%; | |
max-width: 50%; | |
} | |
.col-sm-7 { | |
-ms-flex-preferred-size: 58.333%; | |
flex-basis: 58.333%; | |
max-width: 58.333%; | |
} | |
.col-sm-8 { | |
-ms-flex-preferred-size: 66.667%; | |
flex-basis: 66.667%; | |
max-width: 66.667%; | |
} | |
.col-sm-9 { | |
-ms-flex-preferred-size: 75%; | |
flex-basis: 75%; | |
max-width: 75%; | |
} | |
.col-sm-10 { | |
-ms-flex-preferred-size: 83.333%; | |
flex-basis: 83.333%; | |
max-width: 83.333%; | |
} | |
.col-sm-11 { | |
-ms-flex-preferred-size: 91.667%; | |
flex-basis: 91.667%; | |
max-width: 91.667%; | |
} | |
.col-sm-12 { | |
-ms-flex-preferred-size: 100%; | |
flex-basis: 100%; | |
max-width: 100%; | |
} | |
.col-sm-offset-1 { | |
margin-left: 8.333%; | |
} | |
.col-sm-offset-2 { | |
margin-left: 16.667%; | |
} | |
.col-sm-offset-3 { | |
margin-left: 25%; | |
} | |
.col-sm-offset-4 { | |
margin-left: 33.333%; | |
} | |
.col-sm-offset-5 { | |
margin-left: 41.667%; | |
} | |
.col-sm-offset-6 { | |
margin-left: 50%; | |
} | |
.col-sm-offset-7 { | |
margin-left: 58.333%; | |
} | |
.col-sm-offset-8 { | |
margin-left: 66.667%; | |
} | |
.col-sm-offset-9 { | |
margin-left: 75%; | |
} | |
.col-sm-offset-10 { | |
margin-left: 83.333%; | |
} | |
.col-sm-offset-11 { | |
margin-left: 91.667%; | |
} | |
.start-sm { | |
justify-content: flex-start; | |
} | |
.center-sm { | |
-ms-flex-pack: center; | |
-webkit-box-pack: center; | |
justify-content: center; | |
} | |
.end-sm { | |
justify-content: flex-end; | |
} | |
.top-sm { | |
align-items: flex-start; | |
} | |
.middle-sm { | |
-ms-flex-align: center; | |
-webkit-box-align: center; | |
align-items: center; | |
} | |
.bottom-sm { | |
-ms-flex-align: end; | |
-webkit-box-align: end; | |
align-items: flex-end; | |
} | |
.around-sm { | |
-ms-flex-pack: distribute; | |
justify-content: space-around; | |
} | |
.between-sm { | |
-ms-flex-pack: justify; | |
-webkit-box-pack: justify; | |
justify-content: space-between; | |
} | |
.first-sm { | |
-ms-flex-order: -1; | |
-webkit-box-ordinal-group: 0; | |
order: -1; | |
} | |
.last-sm { | |
-ms-flex-order: 1; | |
-webkit-box-ordinal-group: 2; | |
order: 1; | |
} | |
@media #{$media-md} { | |
.col-md, | |
.col-md-1, | |
.col-md-2, | |
.col-md-3, | |
.col-md-4, | |
.col-md-5, | |
.col-md-6, | |
.col-md-7, | |
.col-md-8, | |
.col-md-9, | |
.col-md-10, | |
.col-md-11, | |
.col-md-12 { | |
-ms-flex: 0 0 auto; | |
-webkit-box-flex: 0; | |
flex: 0 0 auto; | |
} | |
.row-no-wrap-md{ | |
flex-wrap: nowrap; | |
} | |
.col-md { | |
-webkit-flex-grow: 1; | |
-ms-flex-positive: 1; | |
-webkit-box-flex: 1; | |
flex-grow: 1; | |
-ms-flex-preferred-size: 0; | |
flex-basis: 0; | |
max-width: 100%; | |
} | |
.col-md-1 { | |
-ms-flex-preferred-size: 8.333%; | |
flex-basis: 8.333%; | |
max-width: 8.333%; | |
} | |
.col-md-2 { | |
-ms-flex-preferred-size: 16.667%; | |
flex-basis: 16.667%; | |
max-width: 16.667%; | |
} | |
.col-md-3 { | |
-ms-flex-preferred-size: 25%; | |
flex-basis: 25%; | |
max-width: 25%; | |
} | |
.col-md-4-of-9{ | |
-ms-flex-preferred-size: percentage(4/9); | |
flex-basis: percentage(4/9); | |
max-width: percentage(4/9); | |
} | |
.col-md-5-of-9{ | |
-ms-flex-preferred-size: percentage(5/9); | |
flex-basis: percentage(5/9); | |
max-width: percentage(5/9); | |
} | |
.col-1-of-6{ | |
-ms-flex-preferred-size: percentage(1/6); | |
flex-basis: percentage(1/6); | |
max-width: percentage(1/6); | |
} | |
.col-5-of-6{ | |
-ms-flex-preferred-size: percentage(5/6); | |
flex-basis: percentage(5/6); | |
max-width: percentage(5/6); | |
} | |
.col-md-4 { | |
-ms-flex-preferred-size: 33.333%; | |
flex-basis: 33.333%; | |
max-width: 33.333%; | |
} | |
.col-md-5 { | |
-ms-flex-preferred-size: 41.667%; | |
flex-basis: 41.667%; | |
max-width: 41.667%; | |
} | |
.col-md-6 { | |
-ms-flex-preferred-size: 50%; | |
flex-basis: 50%; | |
max-width: 50%; | |
} | |
.col-md-7 { | |
-ms-flex-preferred-size: 58.333%; | |
flex-basis: 58.333%; | |
max-width: 58.333%; | |
} | |
.col-md-8 { | |
-ms-flex-preferred-size: 66.667%; | |
flex-basis: 66.667%; | |
max-width: 66.667%; | |
} | |
.col-md-9 { | |
-ms-flex-preferred-size: 75%; | |
flex-basis: 75%; | |
max-width: 75%; | |
} | |
.col-md-10 { | |
-ms-flex-preferred-size: 83.333%; | |
flex-basis: 83.333%; | |
max-width: 83.333%; | |
} | |
.col-md-11 { | |
-ms-flex-preferred-size: 91.667%; | |
flex-basis: 91.667%; | |
max-width: 91.667%; | |
} | |
.col-md-12 { | |
-ms-flex-preferred-size: 100%; | |
flex-basis: 100%; | |
max-width: 100%; | |
} | |
.col-md-offset-1 { | |
margin-left: 8.333%; | |
} | |
.col-md-offset-2 { | |
margin-left: 16.667%; | |
} | |
.col-md-offset-3 { | |
margin-left: 25%; | |
} | |
.col-md-offset-4 { | |
margin-left: 33.333%; | |
} | |
.col-md-offset-5 { | |
margin-left: 41.667%; | |
} | |
.col-md-offset-6 { | |
margin-left: 50%; | |
} | |
.col-md-offset-7 { | |
margin-left: 58.333%; | |
} | |
.col-md-offset-8 { | |
margin-left: 66.667%; | |
} | |
.col-md-offset-9 { | |
margin-left: 75%; | |
} | |
.col-md-offset-10 { | |
margin-left: 83.333%; | |
} | |
.col-md-offset-11 { | |
margin-left: 91.667%; | |
} | |
.start-md { | |
-ms-flex-pack: start; | |
-webkit-box-pack: start; | |
justify-content: flex-start; | |
text-align: start; | |
} | |
.center-md { | |
-ms-flex-pack: center; | |
-webkit-box-pack: center; | |
justify-content: center; | |
text-align: center; | |
} | |
.end-md { | |
-ms-flex-pack: end; | |
-webkit-box-pack: end; | |
justify-content: flex-end; | |
text-align: end; | |
} | |
.top-md { | |
-ms-flex-align: start; | |
-webkit-box-align: start; | |
align-items: flex-start; | |
} | |
.middle-md { | |
-ms-flex-align: center; | |
-webkit-box-align: center; | |
align-items: center; | |
} | |
.bottom-md { | |
-ms-flex-align: end; | |
-webkit-box-align: end; | |
align-items: flex-end; | |
} | |
.around-md { | |
-ms-flex-pack: distribute; | |
justify-content: space-around; | |
} | |
.between-md { | |
-ms-flex-pack: justify; | |
-webkit-box-pack: justify; | |
justify-content: space-between; | |
} | |
.first-md { | |
-ms-flex-order: -1; | |
-webkit-box-ordinal-group: 0; | |
order: -1; | |
} | |
.last-md { | |
-ms-flex-order: 1; | |
-webkit-box-ordinal-group: 2; | |
order: 1; | |
} | |
} | |
@media #{$media-lg} { | |
.col-lg, | |
.col-lg-1, | |
.col-lg-2, | |
.col-lg-3, | |
.col-lg-4, | |
.col-lg-5, | |
.col-lg-6, | |
.col-lg-7, | |
.col-lg-8, | |
.col-lg-9, | |
.col-lg-10, | |
.col-lg-11, | |
.col-lg-12 { | |
-ms-flex: 0 0 auto; | |
-webkit-box-flex: 0; | |
flex: 0 0 auto; | |
} | |
.col-lg { | |
-webkit-flex-grow: 1; | |
-ms-flex-positive: 1; | |
-webkit-box-flex: 1; | |
flex-grow: 1; | |
-ms-flex-preferred-size: 0; | |
flex-basis: 0; | |
max-width: 100%; | |
} | |
.col-lg-1 { | |
-ms-flex-preferred-size: 8.333%; | |
flex-basis: 8.333%; | |
max-width: 8.333%; | |
} | |
.col-lg-2 { | |
-ms-flex-preferred-size: 16.667%; | |
flex-basis: 16.667%; | |
max-width: 16.667%; | |
} | |
.col-lg-3 { | |
-ms-flex-preferred-size: 25%; | |
flex-basis: 25%; | |
max-width: 25%; | |
} | |
.col-lg-4 { | |
-ms-flex-preferred-size: 33.333%; | |
flex-basis: 33.333%; | |
max-width: 33.333%; | |
} | |
.col-lg-5 { | |
-ms-flex-preferred-size: 41.667%; | |
flex-basis: 41.667%; | |
max-width: 41.667%; | |
} | |
.col-lg-6 { | |
-ms-flex-preferred-size: 50%; | |
flex-basis: 50%; | |
max-width: 50%; | |
} | |
.col-lg-7 { | |
-ms-flex-preferred-size: 58.333%; | |
flex-basis: 58.333%; | |
max-width: 58.333%; | |
} | |
.col-lg-8 { | |
-ms-flex-preferred-size: 66.667%; | |
flex-basis: 66.667%; | |
max-width: 66.667%; | |
} | |
.col-lg-9 { | |
-ms-flex-preferred-size: 75%; | |
flex-basis: 75%; | |
max-width: 75%; | |
} | |
.col-lg-10 { | |
-ms-flex-preferred-size: 83.333%; | |
flex-basis: 83.333%; | |
max-width: 83.333%; | |
} | |
.col-lg-11 { | |
-ms-flex-preferred-size: 91.667%; | |
flex-basis: 91.667%; | |
max-width: 91.667%; | |
} | |
.col-lg-12 { | |
-ms-flex-preferred-size: 100%; | |
flex-basis: 100%; | |
max-width: 100%; | |
} | |
.col-lg-offset-1 { | |
margin-left: 8.333%; | |
} | |
.col-lg-offset-2 { | |
margin-left: 16.667%; | |
} | |
.col-lg-offset-3 { | |
margin-left: 25%; | |
} | |
.col-lg-offset-4 { | |
margin-left: 33.333%; | |
} | |
.col-lg-offset-5 { | |
margin-left: 41.667%; | |
} | |
.col-lg-offset-6 { | |
margin-left: 50%; | |
} | |
.col-lg-offset-7 { | |
margin-left: 58.333%; | |
} | |
.col-lg-offset-8 { | |
margin-left: 66.667%; | |
} | |
.col-lg-offset-9 { | |
margin-left: 75%; | |
} | |
.col-lg-offset-10 { | |
margin-left: 83.333%; | |
} | |
.col-lg-offset-11 { | |
margin-left: 91.667%; | |
} | |
.start-lg { | |
-ms-flex-pack: start; | |
-webkit-box-pack: start; | |
justify-content: flex-start; | |
text-align: start; | |
} | |
.center-lg { | |
-ms-flex-pack: center; | |
-webkit-box-pack: center; | |
justify-content: center; | |
text-align: center; | |
} | |
.end-lg { | |
-ms-flex-pack: end; | |
-webkit-box-pack: end; | |
justify-content: flex-end; | |
text-align: end; | |
} | |
.top-lg { | |
-ms-flex-align: start; | |
-webkit-box-align: start; | |
align-items: flex-start; | |
} | |
.middle-lg { | |
-ms-flex-align: center; | |
-webkit-box-align: center; | |
align-items: center; | |
} | |
.bottom-lg { | |
-ms-flex-align: end; | |
-webkit-box-align: end; | |
align-items: flex-end; | |
} | |
.around-lg { | |
-ms-flex-pack: distribute; | |
justify-content: space-around; | |
} | |
.between-lg { | |
-ms-flex-pack: justify; | |
-webkit-box-pack: justify; | |
justify-content: space-between; | |
} | |
.first-lg { | |
-ms-flex-order: -1; | |
-webkit-box-ordinal-group: 0; | |
order: -1; | |
} | |
.last-lg { | |
-ms-flex-order: 1; | |
-webkit-box-ordinal-group: 2; | |
order: 1; | |
} | |
} | |
.grid{ | |
width: 100%; | |
display: grid; | |
grid-auto-columns: 1fr; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment