From 9d4d6ef3a26e22d74ef1afc77459816b87da44b9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 27 Apr 2015 01:43:14 -0700 Subject: [PATCH 1/4] stub out flexbox grid variation via -flex --- scss/_grid.scss | 25 +++++++++++++++++++++++++ scss/_variables.scss | 1 + scss/mixins/_grid-framework.scss | 6 +++++- scss/mixins/_grid.scss | 16 ++++++++++++++-- 4 files changed, 45 insertions(+), 3 deletions(-) diff --git a/scss/_grid.scss b/scss/_grid.scss index ed9f232af04d..5a165a75a62e 100644 --- a/scss/_grid.scss +++ b/scss/_grid.scss @@ -44,3 +44,28 @@ @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; } + } +} diff --git a/scss/_variables.scss b/scss/_variables.scss index b4479386e162..35a898216037 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -37,6 +37,7 @@ $link-hover-decoration: underline !default; // // Quickly modify global styling by enabling or disabling features. +$enable-flex: true !default; $enable-rounded: true !default; $enable-shadows: false !default; $enable-gradients: false !default; diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss index 32705025e067..ad2060cbf6ee 100644 --- a/scss/mixins/_grid-framework.scss +++ b/scss/mixins/_grid-framework.scss @@ -22,7 +22,11 @@ @include media-breakpoint-up($breakpoint) { // Work around cross-media @extend (https://github.com/sass/sass/issues/1050) %grid-column-float-#{$breakpoint} { - float: left; + @if $enable-flex { + // Do nothing + } @else { + float: left; + } } @for $i from 1 through $columns { .col-#{$breakpoint}-#{$i} { diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss index 29af269aacdd..17998affb18e 100644 --- a/scss/mixins/_grid.scss +++ b/scss/mixins/_grid.scss @@ -11,6 +11,10 @@ } @mixin make-row($gutter: $grid-gutter-width) { + @if $enable-flex { + display: flex; + flex-wrap: wrap; + } margin-left: ($gutter / -2); margin-right: ($gutter / -2); @include clearfix(); @@ -18,14 +22,22 @@ @mixin make-col($gutter: $grid-gutter-width) { position: relative; - float: left; + @if $enable-flex { + // Do nothing + } @else { + float: left; + } min-height: 1px; padding-left: ($gutter / 2); padding-right: ($gutter / 2); } @mixin make-col-span($size, $columns: $grid-columns) { - width: percentage($size / $columns); + @if $enable-flex { + flex: 0 0 percentage($size / $columns); + } @else { + width: percentage($size / $columns); + } } @mixin make-col-offset($size, $columns: $grid-columns) { From 391b62f9688db7862d0f3c0be084562506f13f37 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 27 Apr 2015 01:43:30 -0700 Subject: [PATCH 2/4] stub out flexbox variation for input group --- scss/_input-group.scss | 41 +++++++++++++++++++++++++++++------------ 1 file changed, 29 insertions(+), 12 deletions(-) diff --git a/scss/_input-group.scss b/scss/_input-group.scss index 46da71a9e9f1..30786ae0156c 100644 --- a/scss/_input-group.scss +++ b/scss/_input-group.scss @@ -8,22 +8,31 @@ // .input-group { - position: relative; // For dropdowns - display: table; - border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table + position: relative; + + @if $enable-flex { + display: flex; + } @else { + display: table; + // Prevent input groups from inheriting border styles from table cells when + // placed within a table. + border-collapse: separate; + } .form-control { // Ensure that the input is always above the *appended* addon button for // proper border colors. position: relative; z-index: 2; - - // IE9 fubars the placeholder attribute in text inputs and the arrows on - // select elements in input groups. To fix it, we float the input. Details: - // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855 - float: left; - - width: 100%; + @if $enable-flex { + flex: 1; + } @else { + // IE9 fubars the placeholder attribute in text inputs and the arrows on + // select elements in input groups. To fix it, we float the input. Details: + // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855 + float: left; + width: 100%; + } margin-bottom: 0; } } @@ -31,7 +40,11 @@ .input-group-addon, .input-group-btn, .input-group .form-control { - display: table-cell; + @if $enable-flex { + // do nothing + } @else { + display: table-cell; + } &:not(:first-child):not(:last-child) { @include border-radius(0); @@ -40,7 +53,11 @@ .input-group-addon, .input-group-btn { - width: 1%; + @if $enable-flex { + // do nothing + } @else { + width: 1%; + } white-space: nowrap; vertical-align: middle; // Match the inputs } From 15692d5e5b7456ce3d09cecc80738ca77148ea2e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 27 Apr 2015 01:50:38 -0700 Subject: [PATCH 3/4] flex variation for media --- scss/_media.scss | 76 ++++++++++++++++++++++++++++++------------------ 1 file changed, 48 insertions(+), 28 deletions(-) diff --git a/scss/_media.scss b/scss/_media.scss index e5eb7aba328d..a1c26f2ac701 100644 --- a/scss/_media.scss +++ b/scss/_media.scss @@ -2,29 +2,58 @@ // Media // -------------------------------------------------- -.media { - // Proper spacing between instances of .media - margin-top: 15px; +@if $enable-flex { + .media { + display: flex; + margin-bottom: $spacer; + } + .media-body { + flex: 1; + } +} @else { + .media { + margin-top: 15px; - &:first-child { - margin-top: 0; + &:first-child { + margin-top: 0; + } + } + .media, + .media-body { + overflow: hidden; + zoom: 1; + } + .media-body { + width: 10000px; + } + .media-left, + .media-right, + .media-body { + display: table-cell; + vertical-align: top; + } + .media-middle { + vertical-align: middle; + } + .media-bottom { + vertical-align: bottom; } } -.media, -.media-body { - overflow: hidden; - zoom: 1; -} -.media-body { - width: 10000px; -} +// +// Images/elements as the media anchor +// .media-object { display: block; } + +// +// Alignment +// + .media-right, .media > .pull-right { padding-left: 10px; @@ -35,30 +64,21 @@ padding-right: 10px; } -.media-left, -.media-right, -.media-body { - display: table-cell; - vertical-align: top; -} - -.media-middle { - vertical-align: middle; -} -.media-bottom { - vertical-align: bottom; -} +// +// Headings +// -// Reset margins on headings for tighter default spacing .media-heading { margin-top: 0; margin-bottom: 5px; } + +// // Media list variation // -// Undo default ul/ol styles + .media-list { padding-left: 0; list-style: none; From d9d351e2feb9430aad420fbd9397a4b6040b97d9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 27 Apr 2015 14:11:07 -0700 Subject: [PATCH 4/4] more flex grid stuff --- scss/_grid.scss | 69 +++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 64 insertions(+), 5 deletions(-) diff --git a/scss/_grid.scss b/scss/_grid.scss index 5a165a75a62e..583c00eac694 100644 --- a/scss/_grid.scss +++ b/scss/_grid.scss @@ -44,8 +44,15 @@ @include make-grid-columns(); -// Flex column reordering + +// Flex variation +// +// Custom styles for additional flex alignment options. + @if $enable-flex { + + // Flex column reordering + .col-xs-first { order: -1; } .col-xs-last { order: 1; } @@ -53,19 +60,71 @@ .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; } } -} + + // Alignment for every column in row + + .row-xs-top { align-items: flex-start; } + .row-xs-center { align-items: center; } + .row-xs-bottom { align-items: flex-end; } + + @include media-breakpoint-up(sm) { + .row-sm-top { align-items: flex-start; } + .row-sm-center { align-items: center; } + .row-sm-bottom { align-items: flex-end; } + } + @include media-breakpoint-up(md) { + .row-md-top { align-items: flex-start; } + .row-md-center { align-items: center; } + .row-md-bottom { align-items: flex-end; } + } + @include media-breakpoint-up(lg) { + .row-lg-top { align-items: flex-start; } + .row-lg-center { align-items: center; } + .row-lg-bottom { align-items: flex-end; } + } + @include media-breakpoint-up(xl) { + .row-xl-top { align-items: flex-start; } + .row-xl-center { align-items: center; } + .row-xl-bottom { align-items: flex-end; } + } + + // Alignment per column + + .col-xs-top { align-self: flex-start; } + .col-xs-center { align-self: center; } + .col-xs-bottom { align-self: flex-end; } + + @include media-breakpoint-up(sm) { + .col-sm-top { align-self: flex-start; } + .col-sm-center { align-self: center; } + .col-sm-bottom { align-self: flex-end; } + } + @include media-breakpoint-up(md) { + .col-md-top { align-self: flex-start; } + .col-md-center { align-self: center; } + .col-md-bottom { align-self: flex-end; } + } + @include media-breakpoint-up(lg) { + .col-lg-top { align-self: flex-start; } + .col-lg-center { align-self: center; } + .col-lg-bottom { align-self: flex-end; } + } + @include media-breakpoint-up(xl) { + .col-xl-top { align-self: flex-start; } + .col-xl-center { align-self: center; } + .col-xl-bottom { align-self: flex-end; } + } + +} \ No newline at end of file