From 466d36e54175ee00927d6518d9481acd2d210590 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 16 Apr 2015 16:56:40 -0700 Subject: [PATCH] Redo all our callouts with the custom callout plugin - Replaces manual use of .bd-callout with {% callout [type] %} - Rearranged some callouts for proximity to others - Turned long lists of callouts--like those on tooltips, plugings, etc--into a list because holy shit that's overwhelming --- docs/_plugins/callout.rb | 29 +++++++++ docs/assets/scss/_callouts.scss | 4 +- docs/assets/scss/_layout.scss | 5 ++ docs/components/alerts.md | 18 +++--- docs/components/button-dropdown.md | 9 +-- docs/components/button-group.md | 21 ++++--- docs/components/carousel.md | 27 ++++---- docs/components/collapse.md | 19 +++--- docs/components/dropdowns.md | 18 +++--- docs/components/helpers.md | 37 ++++++----- docs/components/modal.md | 50 ++++++++------- docs/components/popovers.md | 79 +++++++++++------------ docs/components/scrollspy.md | 18 +++--- docs/components/tooltips.md | 62 ++++++++---------- docs/content/buttons.md | 54 +++++++++------- docs/content/forms.md | 91 +++++++++++++-------------- docs/content/images.md | 9 +-- docs/content/tables.md | 22 ++++--- docs/content/typography.md | 5 +- docs/getting-started/accessibility.md | 12 ++-- docs/getting-started/contents.md | 9 +-- docs/getting-started/javascript.md | 9 +-- docs/javascript/buttons.md | 47 ++++++++------ docs/javascript/tabs.md | 9 +-- 24 files changed, 367 insertions(+), 296 deletions(-) create mode 100644 docs/_plugins/callout.rb diff --git a/docs/_plugins/callout.rb b/docs/_plugins/callout.rb new file mode 100644 index 0000000000..29ecbc99d7 --- /dev/null +++ b/docs/_plugins/callout.rb @@ -0,0 +1,29 @@ +# Source: http://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 = type + if type == "danger" + @type = "danger" + elsif type == "warning" + @type = "warning" + elsif type == "info" + @type = "info" + end + end + + def render(context) + site = context.registers[:site] + converter = site.getConverterImpl(::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/assets/scss/_callouts.scss b/docs/assets/scss/_callouts.scss index e8b7c1d5ed..0ba52fd848 100644 --- a/docs/assets/scss/_callouts.scss +++ b/docs/assets/scss/_callouts.scss @@ -31,6 +31,6 @@ h4 { color: $color; } } -.bd-callout-danger { @include bs-callout-variant($bd-danger); } -.bd-callout-warning { @include bs-callout-variant($bd-warning); } .bd-callout-info { @include bs-callout-variant($bd-info); } +.bd-callout-warning { @include bs-callout-variant($bd-warning); } +.bd-callout-danger { @include bs-callout-variant($bd-danger); } diff --git a/docs/assets/scss/_layout.scss b/docs/assets/scss/_layout.scss index e97ec1a465..bf36dbdc1d 100644 --- a/docs/assets/scss/_layout.scss +++ b/docs/assets/scss/_layout.scss @@ -62,6 +62,11 @@ > h3 { margin-top: 1.5rem; } + + > ul li, + > ol li { + margin-bottom: .25rem; + } } .bd-title { diff --git a/docs/components/alerts.md b/docs/components/alerts.md index 796b463ba9..83f34f5b7e 100644 --- a/docs/components/alerts.md +++ b/docs/components/alerts.md @@ -7,10 +7,11 @@ Provide contextual feedback messages for typical user actions with the handful o Wrap any text and an optional dismiss button in `.alert` and one of the four contextual classes (e.g., `.alert-success`) for basic alert messages. -
-

No default class

-

Alerts don't have default classes, only base and modifier classes. A default gray alert doesn't make too much sense, so you're required to specify a type via contextual class. Choose from success, info, warning, or danger.

-
+{% callout info %} +#### No default class + +Alerts don't have default classes, only base and modifier classes. A default gray alert doesn't make too much sense, so you're required to specify a type via contextual class. Choose from success, info, warning, or danger. +{% endcallout %} {% example html %} {% endexample %} -
-

Ensure proper behavior across all devices

-

Be sure to use the <button> element with the data-dismiss="alert" data attribute.

-
+{% callout warning %} +#### Ensure proper behavior across all devices + +Be sure to use the ` {% endexample %} -#### Four directions +### Four directions
@@ -123,14 +122,15 @@ sagittis lacus vel augue laoreet rutrum faucibus."> {% endhighlight %} -#### Dismiss on next click +### Dismiss on next click Use the `focus` trigger to dismiss popovers on the next click that the user makes. -
-

Specific markup required for dismiss-on-next-click

-

For proper cross-browser and cross-platform behavior, you must use the <a> tag, not the <button> tag, and you also must include a tabindex attribute.

-
+{% callout danger %} +#### Specific markup required for dismiss-on-next-click + +For proper cross-browser and cross-platform behavior, you must use the `` tag, _not_ the `
-
-

Data attributes for individual popovers

-

Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.

-
+{% callout info %} +#### Data attributes for individual popovers + +Options for individual popovers can alternatively be specified through the use of data attributes, as explained above. +{% endcallout %} ### Methods diff --git a/docs/components/scrollspy.md b/docs/components/scrollspy.md index 1164c75631..dde50fc2af 100644 --- a/docs/components/scrollspy.md +++ b/docs/components/scrollspy.md @@ -93,15 +93,17 @@ After adding `position: relative;` in your CSS, call the scrollspy via JavaScrip $('body').scrollspy({ target: '#navbar-example' }) {% endhighlight %} -
-

Resolvable ID targets required

-

Navbar links must have resolvable id targets. For example, a <a href="#home">home</a> must correspond to something in the DOM like <div id="home"></div>.

-
+{% callout danger %} +#### Resolvable ID targets required -
-

Non-:visible target elements ignored

-

Target elements that are not :visible according to jQuery will be ignored and their corresponding nav items will never be highlighted.

-
+Navbar links must have resolvable id targets. For example, a `home` must correspond to something in the DOM like `
`. +{% endcallout %} + +{% callout info %} +#### Non-`:visible` target elements ignored + +Target elements that are not [`:visible` according to jQuery](http://api.jquery.com/visible-selector/) will be ignored and their corresponding nav items will never be highlighted. +{% endcallout %} ### Methods diff --git a/docs/components/tooltips.md b/docs/components/tooltips.md index b8600d9122..3bb3763d50 100644 --- a/docs/components/tooltips.md +++ b/docs/components/tooltips.md @@ -3,11 +3,30 @@ layout: page title: Tooltips --- -## Examples - Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage. -Tooltips with zero-length titles are never displayed. +## Overview + +Things to know when using the popover plugin: + +- Tooltips are opt-in for performance reasons, so **you must initialize them yourself**. +- Tooltips with zero-length titles are never displayed. +- Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc). +- Triggering tooltips on hidden elements will not work. +- Tooltips for `.disabled` or `disabled` elements must be triggered on a wrapper element. +- When triggered from hyperlinks that span multiple lines, tooltips will be centered. Use `white-space: nowrap;` on your ``s to avoid this behavior. + +## Example: Enable popovers everywhere + +One way to initialize all tooltips on a page would be to select them by their `data-toggle` attribute: + +{% highlight js %} +$(function () { + $('[data-toggle="tooltip"]').tooltip() +}) +{% endhighlight %} + +## Examples Hover over the links below to see tooltips: @@ -75,29 +94,6 @@ Hover over the buttons below to see their tooltips. {% endhighlight %} -
-

Opt-in functionality

-

For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.

-

One way to initialize all tooltips on a page would be to select them by their data-toggle attribute:

-{% highlight js %} -$(function () { - $('[data-toggle="tooltip"]').tooltip() -}) -{% endhighlight %} -
-
-

Tooltips in button groups and input groups require special setting

-

When using tooltips on elements within a .btn-group or an .input-group, you'll have to specify the option container: 'body' (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip is triggered).

-
-
-

Don't try to show tooltips on hidden elements

-

Invoking $(...).tooltip('show') when the target element is display: none; will cause the tooltip to be incorrectly positioned.

-
-
-

Tooltips on disabled elements require wrapper elements

-

To add a tooltip to a disabled or .disabled element, put the element inside of a <div> and apply the tooltip to that <div> instead.

-
- ## Usage The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element. @@ -112,11 +108,6 @@ $('#example').tooltip(options) The required markup for a tooltip is only a `data` attribute and `title` on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to `top` by the plugin). -
-

Multiple-line links

-

Sometimes you want to add a tooltip to a hyperlink that wraps multiple lines. The default behavior of the tooltip plugin is to center it horizontally and vertically. Add white-space: nowrap; to your anchors to avoid this.

-
- {% highlight html %} Hover over me @@ -228,10 +219,11 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
-
-

Data attributes for individual tooltips

-

Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.

-
+{% callout info %} +#### Data attributes for individual tooltips + +Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above. +{% endcallout %} ### Methods diff --git a/docs/content/buttons.md b/docs/content/buttons.md index d3445e981e..cf9d8dab61 100644 --- a/docs/content/buttons.md +++ b/docs/content/buttons.md @@ -29,10 +29,11 @@ Bootstrap includes six predefined button styles, each serving its own semantic p {% endexample %} -
-

Conveying meaning to assistive technologies

-

Using color to add meaning to a button 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 (the visible text of the button), or is included through alternative means, such as additional text hidden with the .sr-only class.

-
+{% callout warning %} +#### Conveying meaning to assistive technologies + +Using color to add meaning to a button 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 (the visible text of the button), or is included through alternative means, such as additional text hidden with the `.sr-only` class. +{% endcallout %} ## Button tags @@ -45,15 +46,17 @@ Use the button classes on an ``, `