diff options
author | Mark Otto <markd.otto@gmail.com> | 2020-06-13 00:26:37 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-06-13 00:26:37 +0300 |
commit | 286f16b92c546b96e1aadfb8cae409c34f036087 (patch) | |
tree | 76438da50e9f81e3d86e3d48760cc828b9417bd6 | |
parent | 594e5fd07175baf796c03c1de755ee021e5b4c5d (diff) |
v5: Redo blockquote attributions (#30814)
* v5: Redo blockquote attributions
- Renames -small-* variables to -footer-*
- Updates blockquote demos with attribution to place it outside the blockquote with a figure wrapper
* Updated class name
* docs(examples): refactor blockquotes in masonry example
Co-authored-by: Gaƫl Poupard <gael.poupard@orange.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
-rw-r--r-- | scss/_type.scss | 13 | ||||
-rw-r--r-- | scss/_variables.scss | 5 | ||||
-rw-r--r-- | site/content/docs/5.0/content/reboot.md | 2 | ||||
-rw-r--r-- | site/content/docs/5.0/content/typography.md | 40 | ||||
-rw-r--r-- | site/content/docs/5.0/examples/masonry/index.html | 50 |
5 files changed, 64 insertions, 46 deletions
diff --git a/scss/_type.scss b/scss/_type.scss index efa2c81552..b2d524ca14 100644 --- a/scss/_type.scss +++ b/scss/_type.scss @@ -84,14 +84,19 @@ // Blockquotes .blockquote { - margin-bottom: $spacer; + margin-bottom: $blockquote-margin-y; @include font-size($blockquote-font-size); + + > :last-child { + margin-bottom: 0; + } } .blockquote-footer { - display: block; - @include font-size($blockquote-small-font-size); - color: $blockquote-small-color; + margin-top: -$blockquote-margin-y; + margin-bottom: $blockquote-margin-y; + @include font-size($blockquote-footer-font-size); + color: $blockquote-footer-color; &::before { content: "\2014\00A0"; // em dash, nbsp diff --git a/scss/_variables.scss b/scss/_variables.scss index 2af7461a00..2e0d0cef67 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -447,9 +447,10 @@ $text-muted: $gray-600 !default; $initialism-font-size: $small-font-size !default; -$blockquote-small-color: $gray-600 !default; -$blockquote-small-font-size: $small-font-size !default; +$blockquote-margin-y: $spacer !default; $blockquote-font-size: $font-size-base * 1.25 !default; +$blockquote-footer-color: $gray-600 !default; +$blockquote-footer-font-size: $small-font-size !default; $hr-margin-y: $spacer !default; $hr-color: inherit !default; diff --git a/site/content/docs/5.0/content/reboot.md b/site/content/docs/5.0/content/reboot.md index e9f6dac1af..2af0045740 100644 --- a/site/content/docs/5.0/content/reboot.md +++ b/site/content/docs/5.0/content/reboot.md @@ -397,8 +397,8 @@ The default `margin` on blockquotes is `1em 40px`, so we reset that to `0 0 1rem <div class="bd-example"> <blockquote class="blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> - <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> + <p>Someone famous in <cite title="Source Title">Source Title</cite></p> </div> ### Inline elements diff --git a/site/content/docs/5.0/content/typography.md b/site/content/docs/5.0/content/typography.md index 0bbe54c427..0ae59b4cda 100644 --- a/site/content/docs/5.0/content/typography.md +++ b/site/content/docs/5.0/content/typography.md @@ -188,19 +188,23 @@ For quoting blocks of content from another source within your document. Wrap `<b {{< example >}} <blockquote class="blockquote"> - <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> </blockquote> {{< /example >}} ### Naming a source -Add a `<footer class="blockquote-footer">` for identifying the source. Wrap the name of the source work in `<cite>`. +The HTML spec requires that blockquote attribution be placed outside the `<blockquote>`. When providing attribution, wrap your `<blockquote>` in a `<figure>` and use a `<figcaption>` or a block level element (e.g., `<p>`) with the `.blockquote-footer` class. Be sure to wrap the name of the source work in `<cite>` as well. {{< example >}} -<blockquote class="blockquote"> - <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> - <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer> -</blockquote> +<figure> + <blockquote class="blockquote"> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> + </blockquote> + <figcaption class="blockquote-footer"> + Someone famous in <cite title="Source Title">Source Title</cite> + </figcaption> +</figure> {{< /example >}} ### Alignment @@ -208,17 +212,25 @@ Add a `<footer class="blockquote-footer">` for identifying the source. Wrap the Use text utilities as needed to change the alignment of your blockquote. {{< example >}} -<blockquote class="blockquote text-center"> - <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> - <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer> -</blockquote> +<figure class="text-center"> + <blockquote class="blockquote"> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> + </blockquote> + <figcaption class="blockquote-footer"> + Someone famous in <cite title="Source Title">Source Title</cite> + </figcaption> +</figure> {{< /example >}} {{< example >}} -<blockquote class="blockquote text-right"> - <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> - <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer> -</blockquote> +<figure class="text-right"> + <blockquote class="blockquote"> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> + </blockquote> + <figcaption class="blockquote-footer"> + Someone famous in <cite title="Source Title">Source Title</cite> + </figcaption> +</figure> {{< /example >}} ## Lists diff --git a/site/content/docs/5.0/examples/masonry/index.html b/site/content/docs/5.0/examples/masonry/index.html index e3ef747dd7..046a800919 100644 --- a/site/content/docs/5.0/examples/masonry/index.html +++ b/site/content/docs/5.0/examples/masonry/index.html @@ -33,14 +33,14 @@ extra_js: </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> + <figure class="p-3 mb-0"> + <blockquote class="blockquote"> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> + </blockquote> + <figcaption class="blockquote-footer mb-0 text-muted"> + Someone famous in <cite title="Source Title">Source Title</cite> + </figcaption> + </figure> </div> </div> <div class="col-sm-6 col-lg-4 mb-4"> @@ -55,21 +55,21 @@ extra_js: </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> + <figure class="mb-0"> + <blockquote class="blockquote"> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p> + </blockquote> + <figcaption class="blockquote-footer mb-0 text-white"> + Someone famous in <cite title="Source Title">Source Title</cite> + </figcaption> + </figure> </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">This card has a regular title and short paragraph of text below it.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> @@ -81,14 +81,14 @@ extra_js: </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> + <figure class="mb-0"> + <blockquote class="blockquote"> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> + </blockquote> + <figcaption class="blockquote-footer mb-0 text-muted"> + Someone famous in <cite title="Source Title">Source Title</cite> + </figcaption> + </figure> </div> </div> <div class="col-sm-6 col-lg-4 mb-4"> |