Skip to content

Commit

Permalink
Remove the card columns in favor of a Masonry grid
Browse files Browse the repository at this point in the history
  • Loading branch information
@MartijnCuppens
MartijnCuppens committed Jun 18, 2019
1 parent 83fc5a3 commit 158f183
Show file tree
Hide file tree
Showing 5 changed files with 84 additions and 94 deletions.
23 changes: 0 additions & 23 deletions scss/_card.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -241,29 +241,6 @@
}


//
// Columns
//

.card-columns {
.card {
margin-bottom: $card-columns-margin;
}

@include media-breakpoint-up(sm) {
column-count: $card-columns-count;
column-gap: $card-columns-gap;
orphans: 1;
widows: 1;

.card {
display: inline-block; // Don't let them vertically span multiple columns
width: 100%; // Don't let their width change
}
}
}


//
// Accordion
//
Expand Down
4 changes: 0 additions & 4 deletions scss/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -829,10 +829,6 @@ $card-img-overlay-padding: 1.25rem !default;
$card-group-margin: $grid-gutter-width / 2 !default;
$card-deck-margin: $card-group-margin !default;

$card-columns-count: 3 !default;
$card-columns-gap: 1.25rem !default;
$card-columns-margin: $card-spacer-y !default;


// Tooltips

Expand Down
143 changes: 76 additions & 67 deletions site/content/docs/4.3/components/card.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@ title: Cards
description: Bootstrap's cards provide a flexible and extensible content container with multiple variants and options.
group: components
toc: true
external_js:
- src: "https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"
integrity: "sha256-Nn1q/fx0H7SNLZMQ5Hw5JLaTRZp0yILA/FRexe19VdI="
---

## About
Expand Down Expand Up @@ -601,88 +604,94 @@ Just like with card groups, card footers in decks will automatically line up.
</div>
{{< /example >}}

### Card columns
### Card columns (Masonry layout)

Cards can be organized into [Masonry](https://masonry.desandro.com/)-like columns with just CSS by wrapping them in `.card-columns`. Cards are built with CSS `column` properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right.
In `v4` we used a CSS-only technique to mimic the behaviour of [Masonry](https://masonry.desandro.com/)-like columns, but this technique came with lots of unpleasant side effects so in `v5` we decided to just use the wonderful Masonry plugin. **Masonry is not included in Bootstrap**, but can easily be added by adding the following javascript file:
```js
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js" integrity="sha256-Nn1q/fx0H7SNLZMQ5Hw5JLaTRZp0yILA/FRexe19VdI=" crossorigin="anonymous"></script>
```

**Heads up!** Your mileage with card columns may vary. To prevent cards breaking across columns, we must set them to `display: inline-block` as `column-break-inside: avoid` isn't a bulletproof solution yet.
By adding `data-masonry='{"percentPosition": true }'` to the `.row` wrapper, we can combine the powers of Bootstrap's responsive grid and Masonry's positioning.

{{< example >}}
<div class="card-columns">
<div class="card">
{{< placeholder width="100%" height="160" class="card-img-top" text="Image cap" >}}
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="row" data-masonry='{"percentPosition": true }'>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card">
{{< placeholder width="100%" height="160" class="card-img-top" text="Image cap" >}}
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="card p-3">
<blockquote class="blockquote mb-0 card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card p-3">
<blockquote class="blockquote mb-0 card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
</div>
<div class="card">
{{< placeholder width="100%" height="160" class="card-img-top" text="Image cap" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card">
{{< placeholder width="100%" height="160" class="card-img-top" text="Image cap" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="card bg-primary text-white text-center p-3">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer class="blockquote-footer text-white">
<small>
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card bg-primary text-white text-center p-3">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer class="blockquote-footer text-white">
<small>
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
</div>
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="card">
{{< placeholder width="100%" height="260" class="card-img" text="Card image" >}}
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card">
{{< placeholder width="100%" height="260" class="card-img" text="Card image" >}}
</div>
</div>
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
{{< /example >}}

Card columns can also be extended and customized with some additional code. Shown below is an extension of the `.card-columns` class using the same CSS we use—CSS columns— to generate a set of responsive tiers for changing the number of columns.

{{< highlight scss >}}
.card-columns {
@include media-breakpoint-only(lg) {
column-count: 4;
}
@include media-breakpoint-only(xl) {
column-count: 5;
}
}
{{< /highlight >}}
4 changes: 4 additions & 0 deletions site/content/docs/4.3/migration.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,10 @@ Badges were overhauled to better differentiate themselves from buttons and to be
- **Todo:** Removed `.badge-pill` for the `.rounded-pill` utility class
- **Todo:** Removed badge's hover and focus styles for `a.badge` and `button.badge`.

### Cards

- Removed the card columns in favor of a Masonry grid [See TODO](TODO)

### Jumbotron

- The jumbotron component is removed in favor of utility classes like `.bg-light` for the background color and `.p-*` classes to control padding.
Expand Down
4 changes: 4 additions & 0 deletions site/layouts/_default/docs.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,5 +30,9 @@ <h1 class="bd-title" id="content">{{ .Title | markdownify }}</h1>
</div>

{{ partial "scripts" . }}

{{ range .Page.Params.external_js }}
<script src="{{ .src }}" integrity="{{ .integrity }}" crossorigin="anonymous"></script>
{{- end }}
</body>
</html>

0 comments on commit 158f183

Please sign in to comment.