diff --git a/_includes/callout-danger-async-methods.md b/_includes/callout-danger-async-methods.md index 89d2e2cabb39..ca35e0b775ea 100644 --- a/_includes/callout-danger-async-methods.md +++ b/_includes/callout-danger-async-methods.md @@ -1,7 +1,8 @@ -{% callout danger %} +{% capture callout %} #### Asynchronous methods and transitions All API methods are **asynchronous** and start a **transition**. They return to the caller as soon as the transition is started but **before it ends**. In addition, a method call on a **transitioning component will be ignored**. [See our JavaScript documentation for more information.]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/) -{% endcallout %} +{% endcapture %} +{% include callout.html content=callout type="danger" %} diff --git a/_includes/callout-info-mediaqueries-breakpoints.md b/_includes/callout-info-mediaqueries-breakpoints.md index ddf2b374508b..d3988ce1a302 100644 --- a/_includes/callout-info-mediaqueries-breakpoints.md +++ b/_includes/callout-info-mediaqueries-breakpoints.md @@ -1,3 +1,4 @@ -{% callout info %} +{% capture callout %} Note that since browsers do not currently support [range context queries](https://www.w3.org/TR/mediaqueries-4/#range-context), we work around the limitations of [`min-` and `max-` prefixes](https://www.w3.org/TR/mediaqueries-4/#mq-min-max) and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision for these comparisons. -{% endcallout %} \ No newline at end of file +{% endcapture %} +{% include callout.html content=callout type="info" %} diff --git a/_includes/callout-warning-color-assistive-technologies.md b/_includes/callout-warning-color-assistive-technologies.md index adbc708f6283..98214eb58d27 100644 --- a/_includes/callout-warning-color-assistive-technologies.md +++ b/_includes/callout-warning-color-assistive-technologies.md @@ -1,5 +1,6 @@ -{% callout warning %} +{% capture callout %} ##### Conveying meaning to assistive technologies Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the `.sr-only` class. -{% endcallout %} +{% endcapture %} +{% include callout.html content=callout type="warning" %} diff --git a/_includes/callout.html b/_includes/callout.html new file mode 100644 index 000000000000..8ee72de99841 --- /dev/null +++ b/_includes/callout.html @@ -0,0 +1,5 @@ +{% comment %} allowed: info danger warning {% endcomment %} +{% assign css_class = include.type | default: "info" %} +
+ {{ include.content | markdownify }} +
diff --git a/_plugins/callout.rb b/_plugins/callout.rb deleted file mode 100644 index 58453ecb43dc..000000000000 --- a/_plugins/callout.rb +++ /dev/null @@ -1,28 +0,0 @@ -# Source: https://stackoverflow.com/questions/19169849/how-to-get-markdown-processed-content-in-jekyll-tag-plugin - -module Jekyll - module Tags - class CalloutTag < Liquid::Block - - def initialize(tag_name, type, tokens) - super - type.strip! - if %w(info danger warning).include?(type) - @type = type - else - puts "#{type} callout not supported. Defaulting to info" - @type = "info" - end - end - - def render(context) - site = context.registers[:site] - converter = site.find_converter_instance(::Jekyll::Converters::Markdown) - output = converter.convert(super(context)) - "
#{output}
" - end - end - end -end - -Liquid::Template.register_tag('callout', Jekyll::Tags::CalloutTag) diff --git a/docs/4.0/components/alerts.md b/docs/4.0/components/alerts.md index 20543f06f0f0..54739990eb6a 100644 --- a/docs/4.0/components/alerts.md +++ b/docs/4.0/components/alerts.md @@ -17,8 +17,7 @@ Alerts are available for any length of text, as well as an optional dismiss butt {% endfor %} {% endexample %} -{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %} -{{ callout-include | markdownify }} +{% include callout-warning-color-assistive-technologies.md %} ### Link color diff --git a/docs/4.0/components/badge.md b/docs/4.0/components/badge.md index 287005e7d1d2..f8967921e092 100644 --- a/docs/4.0/components/badge.md +++ b/docs/4.0/components/badge.md @@ -56,8 +56,7 @@ Add any of the below mentioned modifier classes to change the appearance of a ba {{ color.name | capitalize }}{% endfor %} {% endexample %} -{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %} -{{ callout-include | markdownify }} +{% include callout-warning-color-assistive-technologies.md %} ## Pill badges diff --git a/docs/4.0/components/button-group.md b/docs/4.0/components/button-group.md index b771e0da0364..f02ded31b442 100644 --- a/docs/4.0/components/button-group.md +++ b/docs/4.0/components/button-group.md @@ -18,13 +18,14 @@ Wrap a series of buttons with `.btn` in `.btn-group`. Add on optional JavaScript {% endexample %} -{% callout warning %} +{% capture callout %} ##### Ensure correct `role` and provide a label In order for assistive technologies (such as screen readers) to convey that a series of buttons is grouped, an appropriate `role` attribute needs to be provided. For button groups, this would be `role="group"`, while toolbars should have a `role="toolbar"`. In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct role attribute. In the examples provided here, we use `aria-label`, but alternatives such as `aria-labelledby` can also be used. -{% endcallout %} +{% endcapture %} +{% include callout.html content=callout type="warning" %} ## Button toolbar diff --git a/docs/4.0/components/buttons.md b/docs/4.0/components/buttons.md index d37fbfcf82de..926bc46624be 100644 --- a/docs/4.0/components/buttons.md +++ b/docs/4.0/components/buttons.md @@ -18,8 +18,7 @@ Bootstrap includes several predefined button styles, each serving its own semant {% endexample %} -{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %} -{{ callout-include | markdownify }} +{% include callout-warning-color-assistive-technologies.md %} ## Button tags @@ -94,11 +93,12 @@ Disabled buttons using the `` element behave a bit different: Link {% endexample %} -{% callout warning %} +{% capture callout %} ##### Link functionality caveat The `.disabled` class uses `pointer-events: none` to try to disable the link functionality of ``s, but that CSS property is not yet standardized. In addition, even in browsers that do support `pointer-events: none`, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, add a `tabindex="-1"` attribute on these links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality. -{% endcallout %} +{% endcapture %} +{% include callout.html content=callout type="warning" %} ## Button plugin diff --git a/docs/4.0/components/card.md b/docs/4.0/components/card.md index 672892be2228..533a4d96a4e7 100644 --- a/docs/4.0/components/card.md +++ b/docs/4.0/components/card.md @@ -392,8 +392,7 @@ Use [text and background utilities]({{ site.baseurl }}/docs/{{ site.docs_version {% endfor %} {% endexample %} -{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %} -{{ callout-include | markdownify }} +{% include callout-warning-color-assistive-technologies.md %} ### Border diff --git a/docs/4.0/components/carousel.md b/docs/4.0/components/carousel.md index 43c1c12f56ed..0a2a5dcbfa27 100644 --- a/docs/4.0/components/carousel.md +++ b/docs/4.0/components/carousel.md @@ -253,8 +253,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap ### Methods -{% capture callout-include %}{% include callout-danger-async-methods.md %}{% endcapture %} -{{ callout-include | markdownify }} +{% include callout-danger-async-methods.md %} #### `.carousel(options)` diff --git a/docs/4.0/components/collapse.md b/docs/4.0/components/collapse.md index 4523302a3533..d4894da773b1 100644 --- a/docs/4.0/components/collapse.md +++ b/docs/4.0/components/collapse.md @@ -176,8 +176,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap ### Methods -{% capture callout-include %}{% include callout-danger-async-methods.md %}{% endcapture %} -{{ callout-include | markdownify }} +{% include callout-danger-async-methods.md %} #### `.collapse(options)` diff --git a/docs/4.0/components/dropdowns.md b/docs/4.0/components/dropdowns.md index 80d461cac447..137b2a726767 100644 --- a/docs/4.0/components/dropdowns.md +++ b/docs/4.0/components/dropdowns.md @@ -591,9 +591,10 @@ Add `.disabled` to items in the dropdown to **style them as disabled**. By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add `.dropdown-menu-right` to a `.dropdown-menu` to right align the dropdown menu. -{% callout info %} +{% capture callout %} **Heads up!** Dropdowns are positioned thanks to Popper.js (except when they are contained in a navbar). -{% endcallout %} +{% endcapture %} +{% include callout.html content=callout type="info" %} {% example html %}
@@ -736,9 +737,10 @@ Use `data-offset` or `data-reference` to change the location of the dropdown. Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the `.show` class on the parent list item. The `data-toggle="dropdown"` attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it. -{% callout info %} +{% capture callout %} On touch-enabled devices, opening a dropdown adds empty (`$.noop`) `mouseover` handlers to the immediate children of the `` element. This admittedly ugly hack is necessary to work around a [quirk in iOS' event delegation](https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html), which would otherwise prevent a tap anywhere outside of the dropdown from triggering the code that closes the dropdown. Once the dropdown is closed, these additional empty `mouseover` handlers are removed. -{% endcallout %} +{% endcapture %} +{% include callout.html content=callout type="info" %} ### Via data attributes @@ -763,11 +765,12 @@ Call the dropdowns via JavaScript: $('.dropdown-toggle').dropdown() {% endhighlight %} -{% callout info %} +{% capture callout %} ##### `data-toggle="dropdown"` still required Regardless of whether you call your dropdown via JavaScript or instead use the data-api, `data-toggle="dropdown"` is always required to be present on the dropdown's trigger element. -{% endcallout %} +{% endcapture %} +{% include callout.html content=callout type="info" %} ### Options diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md index 411b1f461a25..7db4644b8dc9 100644 --- a/docs/4.0/components/forms.md +++ b/docs/4.0/components/forms.md @@ -610,20 +610,22 @@ Custom form controls and selects are also supported. {% endexample %} -{% callout warning %} +{% capture callout %} ##### Alternatives to hidden labels Assistive technologies such as screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the `.sr-only` class. There are further alternative methods of providing a label for assistive technologies, such as the `aria-label`, `aria-labelledby` or `title` attribute. If none of these are present, assistive technologies may resort to using the `placeholder` attribute, if present, but note that use of `placeholder` as a replacement for other labelling methods is not advised. -{% endcallout %} +{% endcapture %} +{% include callout.html content=callout type="warning" %} ## Help text Block-level help text in forms can be created using `.form-text` (previously known as `.help-block` in v3). Inline help text can be flexibly implemented using any inline HTML element and utility classes like `.text-muted`. -{% callout warning %} +{% capture callout %} ##### Associating help text with form controls Help text should be explicitly associated with the form control it relates to using the `aria-describedby` attribute. This will ensure that assistive technologies—such as screen readers—will announce this help text when the user focuses or enters the control. -{% endcallout %} +{% endcapture %} +{% include callout.html content=callout type="warning" %} Help text below inputs can be styled with `.form-text`. This class includes `display: block` and adds some top margin for easy spacing from the inputs above. @@ -683,25 +685,28 @@ Add the `disabled` attribute to a `
` to disable all the controls withi {% endexample %} -{% callout warning %} +{% capture callout %} ##### Caveat with anchors By default, browsers will treat all native form controls (``, ` {% endhighlight %} -{% callout warning %} +{% capture callout %} ##### jQuery incompatibility `[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods. Therefore, we don't currently especially endorse `[hidden]` over other techniques for managing the `display` of elements. -{% endcallout %} +{% endcapture %} +{% include callout.html content=callout type="warning" %} To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/visibility/) instead. diff --git a/docs/4.0/content/tables.md b/docs/4.0/content/tables.md index cfacb3c79351..8be2ba252b0a 100644 --- a/docs/4.0/content/tables.md +++ b/docs/4.0/content/tables.md @@ -620,13 +620,11 @@ Regular table background variants are not available with the dark table, however {% endhighlight %} -{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %} -{{ callout-include | markdownify }} +{% include callout-warning-color-assistive-technologies.md %} Create responsive tables by wrapping any `.table` with `.table-responsive{-sm|-md|-lg|-xl}`, making the table scroll horizontally at each `max-width` breakpoint of up to (but not including) 576px, 768px, 992px, and 1120px, respectively. -{% capture callout-include %}{% include callout-info-mediaqueries-breakpoints.md %}{% endcapture %} -{{ callout-include | markdownify }} +{% include callout-info-mediaqueries-breakpoints.md %} ## Captions @@ -670,11 +668,12 @@ A `` functions like a heading for a table. It helps users with screen r Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a `.table` with `.table-responsive`. Or, pick a maximum breakpoint with which to have a responsive table up to by using `.table-responsive{-sm|-md|-lg|-xl}`. -{% callout warning %} +{% capture callout %} ##### Vertical clipping/truncation Responsive tables make use of `overflow-y: hidden`, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets. -{% endcallout %} +{% endcapture %} +{% include callout.html content=callout type="warning" %} ### Always responsive diff --git a/docs/4.0/getting-started/best-practices.md b/docs/4.0/getting-started/best-practices.md index feb751cabebe..1e7af39ee909 100644 --- a/docs/4.0/getting-started/best-practices.md +++ b/docs/4.0/getting-started/best-practices.md @@ -7,9 +7,10 @@ group: getting-started We've designed and developed Bootstrap to work in a number of environments. Here are some of the best practices we've gathered from years of working on and using it ourselves. -{% callout info %} +{% capture callout %} **Heads up!** This copy is a work in progress. -{% endcallout %} +{% endcapture %} +{% include callout.html content=callout type="info" %} ### General outline diff --git a/docs/4.0/getting-started/javascript.md b/docs/4.0/getting-started/javascript.md index 0c1eb5f3943c..da7011e76f0c 100644 --- a/docs/4.0/getting-started/javascript.md +++ b/docs/4.0/getting-started/javascript.md @@ -32,10 +32,11 @@ Alternatively, to target a specific plugin, just include the plugin's name as a $(document).off('.alert.data-api') {% endhighlight %} -{% callout warning %} +{% capture callout %} ##### Escaping selectors If you use special selectors, for example: `collapse:Example`, be sure to escape them, because they'll be passed through jQuery. -{% endcallout %} +{% endcapture %} +{% include callout.html content=callout type="warning" %} ## Events @@ -119,11 +120,12 @@ $.fn.tooltip.Constructor.VERSION // => "{{ site.current_version }}" Bootstrap's plugins don't fall back particularly gracefully when JavaScript is disabled. If you care about the user experience in this case, use [`
{% endexample %} -{% callout warning %} +{% capture callout %} ##### Flexbug #12: Inline elements aren't treated as flex items Internet Explorer 10-11 do not render inline elements like links or images (or `::before` and `::after` pseudo-elements) as flex items. The only workaround is to set a non-inline `display` value (e.g., `block`, `inline-block`, or `flex`). We suggest using `.d-flex`, one of our [display utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display/), as an easy fix. **Source:** [Flexbugs on GitHub](https://github.com/philipwalton/flexbugs#12-inline-elements-are-not-treated-as-flex-items) -{% endcallout %} +{% endcapture %} +{% include callout.html content=callout type="warning" %} ## Nesting diff --git a/docs/4.0/layout/overview.md b/docs/4.0/layout/overview.md index 89c4fcbea67b..9f899e4b1ded 100644 --- a/docs/4.0/layout/overview.md +++ b/docs/4.0/layout/overview.md @@ -103,8 +103,7 @@ We occasionally use media queries that go in the other direction (the given scre // No media query since the extra-large breakpoint has no upper bound on its width {% endhighlight %} -{% capture callout-include %}{% include callout-info-mediaqueries-breakpoints.md %}{% endcapture %} -{{ callout-include | markdownify }} +{% include callout-info-mediaqueries-breakpoints.md %} Once again, these media queries are also available via Sass mixins: diff --git a/docs/4.0/utilities/colors.md b/docs/4.0/utilities/colors.md index 7543aa0bfc62..4ced8cf30ba2 100644 --- a/docs/4.0/utilities/colors.md +++ b/docs/4.0/utilities/colors.md @@ -43,11 +43,11 @@ When `$enable-gradients` is set to true, you'll be able to use `.bg-gradient-` u
.bg-gradient-{{ color.name }}
{% endfor %} {% endexample %} -{% callout info %} +{% capture callout %} #### Dealing with specificity Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a `
` with the class. -{% endcallout %} +{% endcapture %} +{% include callout.html content=callout type="info" %} -{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %} -{{ callout-include | markdownify }} +{% include callout-warning-color-assistive-technologies.md %}