Created
April 11, 2017 12:13
-
-
Save klickreflex/6e7238faee929e3df3a7f266a3e52ac9 to your computer and use it in GitHub Desktop.
Flexboxgrid Sass-Port with Helper classes
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
// Flexbox Grid Sass Adpatation, forked ot remove external dependency | |
// Source: https://github.com/klickreflex/flexboxgrid-sass | |
// Set the number of columns you want to use on your layout. | |
$grid-columns: 12 !default; | |
// Set the gutter between columns. | |
$gutter-width: 1rem !default; | |
// Set a margin for the container sides. | |
$outer-margin: 2rem !default; | |
// Create or remove breakpoints for your project | |
// Syntax: | |
// name SIZErem, | |
// Grid breakpoints | |
$grid-sm: 48em !default; | |
$grid-md: 64em !default; | |
$grid-lg: 75em !default; | |
$container-sm: 69rem !default; | |
$container-md: 65rem !default; | |
$container-lg: 76rem !default; | |
$grid-breakpoints: ( | |
('sm', $grid-sm, $container-sm), | |
('md', $grid-md, $container-md), | |
('lg', $grid-lg, $container-lg) | |
) !default; | |
$flexboxgrid-max-width: 1200px !default; | |
// | |
// -- Stop editing -- // | |
// | |
$gutter-compensation: $gutter-width * .5 * -1; | |
$half-gutter-width: $gutter-width * .5; | |
.wrapper { | |
box-sizing: border-box; | |
max-width: $flexboxgrid-max-width; | |
margin: 0 auto; | |
} | |
.container { | |
margin-right: auto; | |
margin-left: auto; | |
} | |
.container-fluid { | |
margin-right: auto; | |
margin-left: auto; | |
padding-right: $outer-margin; | |
padding-left: $outer-margin; | |
} | |
.row { | |
display: flex; | |
flex-direction: row; | |
box-sizing: border-box; | |
margin-right: $gutter-compensation; | |
margin-left: $gutter-compensation; | |
flex: 0 1 auto; | |
flex-wrap: wrap; | |
} | |
.row.reverse { | |
flex-direction: row-reverse; | |
} | |
.col.reverse { | |
flex-direction: column-reverse; | |
} | |
@mixin flexboxgrid-sass-col-common { | |
box-sizing: border-box; | |
// we leave @include flex-basis(auto) out of common because | |
// in some spots we need it and some we dont | |
// more why here: https://github.com/kristoferjoseph/flexboxgrid/issues/126 | |
padding-right: $half-gutter-width; | |
padding-left: $half-gutter-width; | |
// split @include flex(0, 0, auto) into individual props | |
flex-grow: 0; | |
flex-shrink: 0; | |
} | |
$name: xs; | |
.col-#{$name} { | |
@include flexboxgrid-sass-col-common; | |
flex-basis: auto; | |
} | |
@for $i from 1 through $grid-columns { | |
.col-#{$name}-#{$i} { | |
max-width: 100% / $grid-columns * $i; | |
@include flexboxgrid-sass-col-common; | |
flex-basis: 100% / $grid-columns * $i; | |
} | |
} | |
@for $i from 1 through $grid-columns { | |
.col-#{$name}-offset-#{$i} { | |
margin-left: 100% / $grid-columns * $i; | |
@include flexboxgrid-sass-col-common; | |
} | |
} | |
.col-#{$name} { | |
max-width: 100%; | |
flex-grow: 1; | |
flex-basis: 0; | |
} | |
.start-#{$name} { | |
text-align: start; | |
justify-content: flex-start; | |
} | |
.center-#{$name} { | |
text-align: center; | |
justify-content: center; | |
} | |
.end-#{$name} { | |
text-align: end; | |
justify-content: flex-end; | |
} | |
.top-#{$name} { | |
align-items: flex-start; | |
} | |
.middle-#{$name} { | |
align-items: center; | |
} | |
.bottom-#{$name} { | |
align-items: flex-end; | |
} | |
.around-#{$name} { | |
justify-content: space-around; | |
} | |
.between-#{$name} { | |
justify-content: space-between; | |
} | |
.first-#{$name} { | |
order: -1; | |
} | |
.last-#{$name} { | |
order: 1; | |
} | |
@each $b in $grid-breakpoints { | |
$name: nth($b, 1); | |
$size: nth($b, 2); | |
$container: nth($b, 3); | |
@media only screen and (min-width: $size) { | |
.container { | |
width: $container; | |
} | |
.col-#{$name} { | |
@include flexboxgrid-sass-col-common; | |
flex-basis: auto; | |
} | |
@for $i from 1 through $grid-columns { | |
.col-#{$name}-#{$i} { | |
max-width: 100% / $grid-columns * $i; | |
@include flexboxgrid-sass-col-common; | |
flex-basis: 100% / $grid-columns * $i; | |
} | |
.offset-#{$name}-#{$i} { | |
margin-left: 100% / $grid-columns * $i; | |
} | |
} | |
@for $i from 1 through $grid-columns { | |
.col-#{$name}-offset-#{$i} { | |
margin-left: 100% / $grid-columns * $i; | |
@include flexboxgrid-sass-col-common; | |
} | |
} | |
.col-#{$name} { | |
max-width: 100%; | |
flex-grow: 1; | |
flex-basis: 0; | |
} | |
.start-#{$name} { | |
text-align: start; | |
justify-content: flex-start; | |
} | |
.center-#{$name} { | |
text-align: center; | |
justify-content: center; | |
} | |
.end-#{$name} { | |
text-align: end; | |
justify-content: flex-end; | |
} | |
.top-#{$name} { | |
align-items: flex-start; | |
} | |
.middle-#{$name} { | |
align-items: center; | |
} | |
.bottom-#{$name} { | |
align-items: flex-end; | |
} | |
.around-#{$name} { | |
justify-content: space-around; | |
} | |
.between-#{$name} { | |
justify-content: space-between; | |
} | |
.first-#{$name} { | |
order: -1; | |
} | |
.last-#{$name} { | |
order: 1; | |
} | |
} | |
} | |
// Helper Classes to conditionally Show/Hide elements | |
.visible-xs, | |
.visible-sm, | |
.visible-md, | |
.visible-lg { | |
display: none !important; | |
} | |
@include mappy-bp(max medium) { | |
.visible-xs { | |
display: block !important; | |
} | |
.row.visible-xs { | |
display: flex !important; | |
} | |
table.visible-xs { | |
display: table !important; | |
} | |
tr.visible-xs { | |
display: table-row !important; | |
} | |
th.visible-xs, | |
td.visible-xs { | |
display: table-cell !important; | |
} | |
} | |
@include mappy-bp(medium large) { | |
.visible-sm { | |
display: block !important; | |
} | |
.row.visible-sm { | |
display: flex !important; | |
} | |
table.visible-sm { | |
display: table !important; | |
} | |
tr.visible-sm { | |
display: table-row !important; | |
} | |
th.visible-sm, | |
td.visible-sm { | |
display: table-cell !important; | |
} | |
} | |
@include mappy-bp(large xlarge) { | |
.visible-md { | |
display: block !important; | |
} | |
.row.visible-md { | |
display: flex !important; | |
} | |
table.visible-md { | |
display: table !important; | |
} | |
tr.visible-md { | |
display: table-row !important; | |
} | |
th.visible-md, | |
td.visible-md { | |
display: table-cell !important; | |
} | |
} | |
@include mappy-bp(xlarge) { | |
.visible-lg { | |
display: block !important; | |
} | |
.row.visible-lg { | |
display: flex !important; | |
} | |
table.visible-lg { | |
display: table !important; | |
} | |
tr.visible-lg { | |
display: table-row !important; | |
} | |
th.visible-lg, | |
td.visible-lg { | |
display: table-cell !important; | |
} | |
} | |
@include mappy-bp(max medium) { | |
.hidden-xs { | |
display: none !important; | |
} | |
} | |
@include mappy-bp(medium large) { | |
.hidden-sm { | |
display: none !important; | |
} | |
} | |
@include mappy-bp(large xlarge) { | |
.hidden-md { | |
display: none !important; | |
} | |
} | |
@include mappy-bp(xlarge) { | |
.hidden-lg { | |
display: none !important; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment