From 741f7d4b5a4355f8ba946804baeaead906bacf3a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 6 Sep 2015 09:36:19 -0700 Subject: [PATCH] Fixes #17486: start work on responsive cards for decks, groups, and columns --- docs/components/card.md | 8 ++- scss/_card.scss | 142 +++++++++++++++++++++------------------- 2 files changed, 81 insertions(+), 69 deletions(-) diff --git a/docs/components/card.md b/docs/components/card.md index 8f19e97ce0..516367e658 100644 --- a/docs/components/card.md +++ b/docs/components/card.md @@ -112,7 +112,7 @@ Using the grid: Using custom widths: {% example html %} -
+

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere @@ -295,6 +295,8 @@ Cards include their own variant classes for quickly changing the `background-col Use card groups to render cards as a single, attached element with equal width and height columns. By default, card groups use `display: table;` and `table-layout: fixed;` to achieve their uniform sizing. However, enabling [flexbox mode]({{ site.baseurl }}/getting-started/flexbox) can switch that to use `display: flex;` and provide the same effect. +Only applies to small devices and above. + {% example html %}
@@ -328,6 +330,8 @@ Use card groups to render cards as a single, attached element with equal width a Need a set of equal width and height cards that aren't attached to one another? Use card decks. By default, card decks require two wrapping elements: `.card-deck-wrapper` and a `.card-deck`. We use table styles for the sizing and the gutters on `.card-deck`. The `.card-deck-wrapper` is used to negative margin out the `border-spacing` on the `.card-deck`. +Only applies to small devices and above. + **ProTip!** If you enable [flexbox mode]({{ site.baseurl }}/getting-started/flexbox/), you can remove the `.card-deck-wrapper`. {% example html %} @@ -363,7 +367,7 @@ Need a set of equal width and height cards that aren't attached to one another? ## Columns -Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns with just CSS by wrapping them in `.card-columns`. +Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns with just CSS by wrapping them in `.card-columns`. Only applies to small devices and above. **Heads up!** This is **not available in IE9 and below** as they have no support for the [`column-*` CSS properties](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts). diff --git a/scss/_card.scss b/scss/_card.scss index fc456c0592..03079f9880 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -181,33 +181,37 @@ // @if $enable-flex { - .card-deck { - display: flex; - flex-flow: row wrap; - margin-right: -.625rem; - margin-left: -.625rem; + @include media-breakpoint-up(sm) { + .card-deck { + display: flex; + flex-flow: row wrap; + margin-right: -.625rem; + margin-left: -.625rem; - .card { - flex: 1 0 0; - margin-right: .625rem; - margin-left: .625rem; + .card { + flex: 1 0 0; + margin-right: .625rem; + margin-left: .625rem; + } } } } @else { - .card-deck { - display: table; - table-layout: fixed; - border-spacing: 1.25rem 0; + @include media-breakpoint-up(sm) { + .card-deck { + display: table; + table-layout: fixed; + border-spacing: 1.25rem 0; - .card { - display: table-cell; - width: 1%; - vertical-align: top; + .card { + display: table-cell; + width: 1%; + vertical-align: top; + } + } + .card-deck-wrapper { + margin-right: -1.25rem; + margin-left: -1.25rem; } - } - .card-deck-wrapper { - margin-right: -1.25rem; - margin-left: -1.25rem; } } @@ -215,54 +219,56 @@ // Card groups // -.card-group { - @if $enable-flex { - display: flex; - flex-flow: row wrap; - } @else { - display: table; - width: 100%; - table-layout: fixed; - } - - .card { +@include media-breakpoint-up(sm) { + .card-group { @if $enable-flex { - flex: 1 0 0; + display: flex; + flex-flow: row wrap; } @else { - display: table-cell; - vertical-align: top; + display: table; + width: 100%; + table-layout: fixed; } - + .card { - margin-left: 0; - border-left: 0; - } - - // Handle rounded corners - @if $enable-rounded { - &:first-child { - .card-img-top { - border-top-right-radius: 0; - } - .card-img-bottom { - border-bottom-right-radius: 0; - } - } - &:last-child { - .card-img-top { - border-top-left-radius: 0; - } - .card-img-bottom { - border-bottom-left-radius: 0; - } + .card { + @if $enable-flex { + flex: 1 0 0; + } @else { + display: table-cell; + vertical-align: top; } - &:not(:first-child):not(:last-child) { - border-radius: 0; + + .card { + margin-left: 0; + border-left: 0; + } - .card-img-top, - .card-img-bottom { + // Handle rounded corners + @if $enable-rounded { + &:first-child { + .card-img-top { + border-top-right-radius: 0; + } + .card-img-bottom { + border-bottom-right-radius: 0; + } + } + &:last-child { + .card-img-top { + border-top-left-radius: 0; + } + .card-img-bottom { + border-bottom-left-radius: 0; + } + } + + &:not(:first-child):not(:last-child) { border-radius: 0; + + .card-img-top, + .card-img-bottom { + border-radius: 0; + } } } } @@ -274,12 +280,14 @@ // Card // -.card-columns { - column-count: 3; - column-gap: 1.25rem; +@include media-breakpoint-up(sm) { + .card-columns { + column-count: 3; + column-gap: 1.25rem; - .card { - display: inline-block; - width: 100%; // Don't let them exceed the column width + .card { + display: inline-block; + width: 100%; // Don't let them exceed the column width + } } }