Skip to content

Instantly share code, notes, and snippets.

@TheSharpieOne
Last active September 19, 2018 14:47
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save TheSharpieOne/27f338c93d5de166ed1e35f5fc753228 to your computer and use it in GitHub Desktop.
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)
// 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