Remove card columns in favor of masonry grid

twbs · Jun 30, 2019 · 9e5c05d · 9e5c05d
1 parent 7f0c305
commit 9e5c05d
Show file tree

Hide file tree

Showing 10 changed files with 116 additions and 114 deletions.
diff --git a/scss/_card.scss b/scss/_card.scss
@@ -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
 //

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -832,10 +832,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
 

diff --git a/site/content/docs/4.3/components/card.md b/site/content/docs/4.3/components/card.md
@@ -601,88 +601,6 @@ 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.
-
-**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.
-
-{{< 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>
-  </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>
-  <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 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 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 class="card">
-    {{< placeholder width="100%" height="260" class="card-img" text="Card image" >}}
-  </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>
-  <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>
-{{< /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 >}}
+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](https://github.com/twbs/bootstrap/pull/28922). If you want to have this type of layout in `v5`, you can just make use of Masonry plugin. **Masonry is not included in Bootstrap**, but we've made a [demo example]({{< docsref "/examples/masonry" >}}) to help you get started.
diff --git a/site/content/docs/4.3/examples/masonry/index.md b/site/content/docs/4.3/examples/masonry/index.md
@@ -0,0 +1,101 @@
+---
+layout: single
+title: Bootstrap grid masonry example
+description: This example illustrates how to integrate the [Masonry plugin](https://masonry.desandro.com/) with the Bootstrap grid. More options & documentation can be found on their [documentation site](https://masonry.desandro.com/).
+include_docs_stylesheets: true
+active_menu: "example"
+extra_js:
+  - src: "https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"
+    integrity: "sha256-Nn1q/fx0H7SNLZMQ5Hw5JLaTRZp0yILA/FRexe19VdI="
+    async: true
+---
+
+Masonry is not included in Bootstrap, but can easily be added by including your locally hosted file or using the following hosted 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" async></script>
+```
+
+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="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="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="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="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="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="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="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="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 >}}
diff --git a/site/content/docs/4.3/migration.md b/site/content/docs/4.3/migration.md
@@ -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 #28922](https://github.com/twbs/bootstrap/pull/28922).
+
 ### Jumbotron
 
 - The jumbotron component is removed in favor of utility classes like `.bg-light` for the background color and `.p-*` classes to control padding.

diff --git a/site/data/examples.yml b/site/data/examples.yml
@@ -51,3 +51,9 @@
       description: "Beautifully simple forms with floating labels over your inputs."
     - name: Offcanvas
       description: "Turn your expandable navbar into a sliding offcanvas menu."
+
+- category: Integrations
+  description: "Integrations with external libraries."
+  examples:
+    - name: "Masonry"
+      description: "Combine the powers of the Bootstrap grid and the Masonry layout."
diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html
@@ -12,7 +12,7 @@
         <a class="nav-link{{ if eq .Page.Layout "docs" }} active{{ end }}" href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
       </li>
       <li class="nav-item">
-        <a class="nav-link{{ if eq .Page.Title "Examples" }} active{{ end }}" href="/docs/{{ .Site.Params.docs_version }}/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
+        <a class="nav-link{{ if or (eq .Page.Title "Examples") (eq .Page.Params.active_menu "example") }} active{{ end }}" href="/docs/{{ .Site.Params.docs_version }}/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
       </li>
       <li class="nav-item">
         <a class="nav-link" href="{{ .Site.Params.themes }}/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>

diff --git a/site/layouts/partials/stylesheet.html b/site/layouts/partials/stylesheet.html
@@ -7,10 +7,10 @@
 
 {{ if (or (eq .Page.Layout "docs") (ne .Page.Layout "examples")) -}}
 {{- "<!-- Documentation extras -->" | safeHTML }}
+{{- end }}
 {{ if eq .Page.Layout "docs" -}}
 <link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
 {{- end -}}
-{{- if (ne .Page.Layout "examples") }}
+{{- if or (ne .Page.Layout "examples") (eq .Page.Params.include_docs_stylesheets true) }}
 <link href="/docs/{{ .Site.Params.docs_version }}/assets/css/docs.min.css" rel="stylesheet">
 {{- end -}}
-{{- end }}
diff --git a/site/static/docs/4.3/assets/img/examples/masonry.png b/site/static/docs/4.3/assets/img/examples/masonry.png
diff --git a/site/static/docs/4.3/assets/img/examples/masonry@2x.png b/site/static/docs/4.3/assets/img/examples/masonry@2x.png