rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-06 04:08:22 +01:00
Code Issues Actions Packages Releases Activity

stub out flexbox grid variation via -flex

Browse Source
This commit is contained in:
Mark Otto 2015-04-27 01:43:14 -07:00
parent b9ed61854c
commit 9d4d6ef3a2
4 changed files with 45 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
scss/_grid.scss
View File

@ -44,3 +44,28 @@
@include make-grid-columns(); @include make-grid-columns();
// Flex column reordering
@if $enable-flex {
.col-xs-first { order: -1; }
.col-xs-last { order: 1; }
@include media-breakpoint-up(sm) {
.col-sm-first { order: -1; }
.col-sm-last { order: 1; }
}
@include media-breakpoint-up(md) {
.col-md-first { order: -1; }
.col-md-last { order: 1; }
}
@include media-breakpoint-up(lg) {
.col-lg-first { order: -1; }
.col-lg-last { order: 1; }
}
@include media-breakpoint-up(xl) {
.col-xl-first { order: -1; }
.col-xl-last { order: 1; }
}
}

1
scss/_variables.scss
View File

@ -37,6 +37,7 @@ $link-hover-decoration: underline !default;
// //
// Quickly modify global styling by enabling or disabling features. // Quickly modify global styling by enabling or disabling features.
$enable-flex: true !default;
$enable-rounded: true !default; $enable-rounded: true !default;
$enable-shadows: false !default; $enable-shadows: false !default;
$enable-gradients: false !default; $enable-gradients: false !default;

4
scss/mixins/_grid-framework.scss
View File

@ -22,8 +22,12 @@
@include media-breakpoint-up($breakpoint) { @include media-breakpoint-up($breakpoint) {
// Work around cross-media @extend (https://github.com/sass/sass/issues/1050) // Work around cross-media @extend (https://github.com/sass/sass/issues/1050)
%grid-column-float-#{$breakpoint} { %grid-column-float-#{$breakpoint} {
@if $enable-flex {
// Do nothing
} @else {
float: left; float: left;
} }
}
@for $i from 1 through $columns { @for $i from 1 through $columns {
.col-#{$breakpoint}-#{$i} { .col-#{$breakpoint}-#{$i} {
@extend %grid-column-float-#{$breakpoint}; @extend %grid-column-float-#{$breakpoint};

12
scss/mixins/_grid.scss
View File

@ -11,6 +11,10 @@
} }
@mixin make-row($gutter: $grid-gutter-width) { @mixin make-row($gutter: $grid-gutter-width) {
@if $enable-flex {
display: flex;
flex-wrap: wrap;
}
margin-left: ($gutter / -2); margin-left: ($gutter / -2);
margin-right: ($gutter / -2); margin-right: ($gutter / -2);
@include clearfix(); @include clearfix();
@ -18,15 +22,23 @@
@mixin make-col($gutter: $grid-gutter-width) { @mixin make-col($gutter: $grid-gutter-width) {
position: relative; position: relative;
@if $enable-flex {
// Do nothing
} @else {
float: left; float: left;
}
min-height: 1px; min-height: 1px;
padding-left: ($gutter / 2); padding-left: ($gutter / 2);
padding-right: ($gutter / 2); padding-right: ($gutter / 2);
} }
@mixin make-col-span($size, $columns: $grid-columns) { @mixin make-col-span($size, $columns: $grid-columns) {
@if $enable-flex {
flex: 0 0 percentage($size / $columns);
} @else {
width: percentage($size / $columns); width: percentage($size / $columns);
} }
}
@mixin make-col-offset($size, $columns: $grid-columns) { @mixin make-col-offset($size, $columns: $grid-columns) {
margin-left: percentage($size / $columns); margin-left: percentage($size / $columns);