Last active
September 19, 2018 14:47
-
-
Save TheSharpieOne/27f338c93d5de166ed1e35f5fc753228 to your computer and use it in GitHub Desktop.
bootstrap v4 print columns (based on bootstrap v4's _grid-framework) (https://github.com/twbs/bootstrap/issues/16800#issuecomment-172406940)
This file contains hidden or 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
// Framework print grid generation (for v4.0.0-beta.2) | |
// | |
// Used only to generate the correct number of grid classes given | |
// any value of `$grid-columns`. | |
// import bootstrap prior to this mixin to set the various variables and mixins needed/used. | |
@mixin make-print-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $name: "pr") { | |
@media print { | |
// Common properties | |
%grid-column-print { | |
position: relative; | |
width: 100%; | |
min-height: 1px; // Prevent columns from collapsing when empty | |
padding-right: ($gutter / 2); | |
padding-left: ($gutter / 2); | |
} | |
// Allow columns to stretch full width below their breakpoints | |
@for $i from 1 through $columns { | |
.col-#{$name}-#{$i} { | |
@extend %grid-column-print; | |
} | |
} | |
.col-#{$name} { | |
@extend %grid-column-print; | |
} | |
// Provide basic `.col-{bp}` classes for equal-width flexbox columns | |
.col-#{$name} { | |
flex-basis: 0; | |
flex-grow: 1; | |
max-width: 100%; | |
} | |
.col-#{$name}-auto { | |
flex: 0 0 auto; | |
width: auto; | |
} | |
@for $i from 1 through $columns { | |
.col-#{$name}-#{$i} { | |
@include make-col($i, $columns); | |
} | |
} | |
.order-#{$name}-first { | |
order: -1; | |
} | |
@for $i from 1 through $columns { | |
.order-#{$name}-#{$i} { | |
order: $i; | |
} | |
} | |
// `$columns - 1` because offsetting by the width of an entire row isn't possible | |
@for $i from 0 through ($columns - 1) { | |
.offset-#{$name}-#{$i} { | |
@include make-col-offset($i, $columns) | |
} | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment