FlandreScarle7/Font-Awesome
1
0
Fork 0
mirror of https://github.com/FortAwesome/Font-Awesome.git synced 2024-12-27 14:01:30 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #9190 from FortAwesome/talbs/update-a11y

Browse Source 
Add CDN Auto Accessibility to Accessibility Page
This commit is contained in:
Dave Gandy 2016-05-13 11:42:25 -04:00
commit 8e241f209f
12 changed files with 150 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/_includes/accessibility/accessibility-facdn.html Normal file
View File

@ -0,0 +1,21 @@
<section id="accessibility-cdn" class="accessibility-cdn">
<div class="row">
<div class="col-md-8">
<h3>
<i class="gg-col fa fa-magic text-muted fa-lg padding-right" aria-hidden="true"></i>
Use Font Awesome CDN's auto accessibility
</h3>
<p><a href="{{ page.relative_path }}get-started/#get-started-cdn">Font Awesome CDN</a> helps you automate accessibility support more easily so your icons work for the most people possible. You only need turn on a setting, <a href="https://cdn.fontawesome.com/help#qa-autoa11y">use our simple syntax</a>, and any icons you use will have all of the best practices and manual techniques below <strong>applied automatically</strong>.</p>
</div>
<div class="col-md-4">
<a href="{{ page.relative_path }}get-started/#get-started-cdn" class="btn btn-success btn-block btn-lg margin-top-lg margin-bottom">Automate Your Icons' Accessibility</a>
<p class="text-sm text-center margin-bottom-none">
<a href="https://cdn.fontawesome.com/help#qa-autoa11y">Read more about our auto accessibility</a>
</p>
</div>
</div>
</section>

35
src/_includes/accessibility/using-with-accessibility.html → src/_includes/accessibility/accessibility-manual.html
View File

@ -1,13 +1,14 @@
<div id="using-with-accessibility"> <section id="accessibility-manual" class="accessibility-manual">
<h2 class="page-header">Using Font Awesome with Acessibility in mind</h2>
<p>
When using icons in your UI, there are ways to help assistive technology either ignore or better understand Font Awesome.
</p>
<h3>Icons used for pure decoration or visual styling</h3> <h3>
<p> <i class="gg-col fa fa-wrench text-muted fa-lg padding-right" aria-hidden="true"></i>
If you're using an icon to add some extra decoration or branding, it does not need to be announced to users as they are navigating your site or app aurally. Additionally, if you're using an icon to visually re-emphasize or add styling to content already present in your HTML, it does not need to be repeated to an assistive technology-using user. You can make sure this is not read by adding the <code>aria-hidden="true"</code> to your Font Awesome markup. Manually make your icons accessible
</p> </h3>
<p>When using icons in your UI, there are manual techniques and ways to help assistive technology either ignore or better understand Font Awesome.</p>
<h4 class="margin-top-xl">Icons used for pure decoration or visual styling</h4>
<p>If you're using an icon to add some extra decoration or branding, it does not need to be announced to users as they are navigating your site or app aurally. Additionally, if you're using an icon to visually re-emphasize or add styling to content already present in your HTML, it does not need to be repeated to an assistive technology-using user. You can make sure this is not read by adding the <code>aria-hidden="true"</code> to your Font Awesome markup.</p>
<div class="margin-top-lg margin-bottom-lg"> <div class="margin-top-lg margin-bottom-lg">
{% highlight html %} {% highlight html %}
@ -33,12 +34,12 @@
<small class="text-muted">an icon being used in front of link text</small> <small class="text-muted">an icon being used in front of link text</small>
</div> </div>
<h3>Icons with semantic or interactive purpose</h3> <h4 class="margin-top-xl">Icons with semantic or interactive purpose</h4>
<p> <p>
If you're using an icon to convey meaning (rather than only as a decorative element), ensure that this meaning is also conveyed to assistive technologies. This goes for content you're abbreviating via icons as well as interactive controls (buttons, form elements, toggles, etc.). There are a few techniques to accomplish this: If you're using an icon to convey meaning (rather than only as a decorative element), ensure that this meaning is also conveyed to assistive technologies. This goes for content you're abbreviating via icons as well as interactive controls (buttons, form elements, toggles, etc.). There are a few techniques to accomplish this:
</p> </p>
<h4>If an icon is <strong>not</strong> an interactive element</h4> <h4 class="margin-top-xl text-muted">If an icon is <strong>not</strong> an interactive element</h4>
<p> <p>
The simplest way to provide a text alternative is to use the <code>aria-hidden="true"</code> attribute on the icon and to include the text with an additional element, such as a <code>&lt;span&gt;</code>, with appropriate CSS to visually hide the element while keeping it accessible to assistive technologies. In addition, you can add a <code>title</code> attribute on the icon to provide a tooltip for sighted mouse users. The simplest way to provide a text alternative is to use the <code>aria-hidden="true"</code> attribute on the icon and to include the text with an additional element, such as a <code>&lt;span&gt;</code>, with appropriate CSS to visually hide the element while keeping it accessible to assistive technologies. In addition, you can add a <code>title</code> attribute on the icon to provide a tooltip for sighted mouse users.
</p> </p>
@ -76,7 +77,7 @@
<small class="text-muted">an icon being used to denote time remaining</small> <small class="text-muted">an icon being used to denote time remaining</small>
</div> </div>
<h4>If an icon represents an interactive element</h4> <h4 class="margin-top-xl text-muted">If an icon represents an interactive element</h4>
<p> <p>
In the case of focusable interactive elements, there are various options to include an alternative text or label to the element, without the need for any visually hidden <code>&lt;span&gt;</code> or similar. For instance, simply adding the <code>title</code> attribute to the interactive element itself will be sufficient to provide an accessible alternative name for the element, as well as providing the mouse tooltip. In the case of focusable interactive elements, there are various options to include an alternative text or label to the element, without the need for any visually hidden <code>&lt;span&gt;</code> or similar. For instance, simply adding the <code>title</code> attribute to the interactive element itself will be sufficient to provide an accessible alternative name for the element, as well as providing the mouse tooltip.
</p> </p>
@ -106,16 +107,7 @@
<small class="text-muted">an icon being used as a delete button's symbol</small> <small class="text-muted">an icon being used as a delete button's symbol</small>
</div> </div>
</div>
<div class="alert alert-success">
<ul class="fa-ul margin-bottom-none">
<li>
<i class="fa-li fa fa-info-circle fa-lg" aria-hidden="true"></i>
Bootstrap comes with a <a href="http://getbootstrap.com/css/#callout-has-feedback-icon-accessibility">utility class to visually hide content, but keep it semantically accessible</a>. If you're not using Bootstrap, there are <a href="https://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/">plenty</a> of <a href="https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css#L124">recipes</a> to roll your own from.
</li>
</ul>
</div>
<div class="alert alert-success"> <div class="alert alert-success">
<ul class="fa-ul margin-bottom-none"> <ul class="fa-ul margin-bottom-none">
@ -125,3 +117,4 @@
</li> </li>
</ul> </ul>
</div> </div>
</section>

6
src/_includes/accessibility/background.html
View File

@ -1,7 +1,7 @@
<div id="background"> <div id="accessibility-background">
<h2 class="page-header">Icon Fonts &amp; Accessibility</h2> <h4 class="margin-top-none">About Icon Fonts &amp; Accessibility</h4>
<p> <p>
Modern versions of assistive technology, like screen readers, will read CSS generated content (how Font Awesome icons are rendered), as well as specific Unicode characters. When trying our default markup for rendering icons, assisistive technology may have the following problems. Modern versions of assistive technology, like screen readers, will read CSS generated content (how Font Awesome icons are rendered), as well as specific Unicode characters. When reading our default markup for rendering icons, assisistive technology may have the following problems.
</p> </p>
<ul> <ul>

11
src/_includes/accessibility/cta-cdn-ally.html Normal file
View File

@ -0,0 +1,11 @@
<div class="well text-center">
<div class="text-center margin-bottom">
<i class="gg-col fa fa-magic fa-3x text-muted padding-right" aria-hidden="true"></i>
<i class="gg-col fa fa-plus fa-2x text-muted padding-right" aria-hidden="true"></i>
<i class="gg-col fa fa-universal-access fa-3x text-muted" aria-hidden="true"></i>
</div>
<h3>Automate your icons' accessibility</h3>
<p><a href="{{ page.relative_path }}get-started/#get-started-cdn">Font Awesome CDN</a> helps you automate accessibility support more easily so your icons work for the most people possible. You only need turn on a setting and any icons you use will have all of the best practices we recommend applied automatically.</p>
<a href="{{ page.relative_path }}get-started/#get-started-cdn" class="btn btn-success btn-lg">Get Automated Accessibility</a>
</div>

6
src/_includes/accessibility/other.html
View File

@ -1,7 +1,7 @@
<div id="other"> <section id="accessibility-other" class="accessibility-other">
<h2 class="page-header">Other cases and information</h2> <h2 class="page-header">Other cases and information</h2>
<p> <p>
While the scenarios and techniques above help avoid some serious issues and confusion, they are not exhaustive. There are many complex contexts and use cases when it comes to accessibility, such as users with low vision who need a high color contrast ratio to see UI. There are some great tools and resources to learn from and work on these issues out there. Here are a few reads we recommend. While the scenarios and techniques here help avoid some serious issues and confusion, they are not exhaustive. There are many complex contexts and use cases when it comes to accessibility, such as users with low vision who need a high color contrast ratio to see UI. There are some great tools and resources to learn from and work on these issues out there. Here are a few reads we recommend.
</p> </p>
<ul> <ul>
@ -14,4 +14,4 @@
<p> <p>
We'll continue to work on these under the larger topic of accessibility, but in the meantime, <a href="{{ page.relative_path }}community/#reporting-bugs">let us know if any bugs or issues</a>. We'll continue to work on these under the larger topic of accessibility, but in the meantime, <a href="{{ page.relative_path }}community/#reporting-bugs">let us know if any bugs or issues</a>.
</p> </p>
</div> </section>

10
src/_includes/examples/animated.html
View File

@ -31,19 +31,19 @@
with 8 steps. Works well with <code>fa-spinner</code>, <code>fa-refresh</code>, and <code>fa-cog</code>. with 8 steps. Works well with <code>fa-spinner</code>, <code>fa-refresh</code>, and <code>fa-cog</code>.
</p> </p>
{% highlight html %} {% highlight html %}
<i class="fa fa-spinner fa-spin fa-3x fa-fw margin-bottom"></i> <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span> <span class="sr-only">Loading...</span>
<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw margin-bottom"></i> <i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span> <span class="sr-only">Loading...</span>
<i class="fa fa-refresh fa-spin fa-3x fa-fw margin-bottom"></i> <i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span> <span class="sr-only">Loading...</span>
<i class="fa fa-cog fa-spin fa-3x fa-fw margin-bottom"></i> <i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span> <span class="sr-only">Loading...</span>
<i class="fa fa-spinner fa-pulse fa-3x fa-fw margin-bottom"></i> <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span> <span class="sr-only">Loading...</span>
{% endhighlight %} {% endhighlight %}
<p class="alert alert-success"> <p class="alert alert-success">

4
src/_includes/examples/basic.html
View File

@ -10,7 +10,7 @@
<div class="row"> <div class="row">
<div class="col-md-3 col-sm-4"> <div class="col-md-3 col-sm-4">
<p> <p>
<i class="fa fa-camera-retro" aria-hidden="true"></i> <i class="fa fa-camera-retro"></i>
<span class="sr-only">Example: basic icon</span> <span class="sr-only">Example: basic icon</span>
fa-camera-retro fa-camera-retro
</p> </p>
@ -22,7 +22,7 @@
brevity, but using a <code>&lt;span&gt;</code> is more semantically correct). brevity, but using a <code>&lt;span&gt;</code> is more semantically correct).
</p> </p>
{% highlight html %} {% highlight html %}
<i class="fa fa-camera-retro" aria-hidden="true"></i> fa-camera-retro <i class="fa fa-camera-retro"></i> fa-camera-retro
{% endhighlight %} {% endhighlight %}
<div class="alert alert-success"> <div class="alert alert-success">
<ul class="fa-ul"> <ul class="fa-ul">

34
src/_includes/examples/bootstrap.html
View File

@ -4,13 +4,13 @@
<div class="col-md-3 col-sm-4"> <div class="col-md-3 col-sm-4">
<p> <p>
<a class="btn btn-danger" href="#"> <a class="btn btn-danger" href="#">
<i class="fa fa-trash-o fa-lg" aria-hidden="true"></i> Delete</a> <i class="fa fa-trash-o fa-lg"></i> Delete</a>
<a class="btn btn-default btn-sm" href="#"> <a class="btn btn-default btn-sm" href="#">
<i class="fa fa-cog" aria-hidden="true"></i> Settings</a> <i class="fa fa-cog"></i> Settings</a>
</p> </p>
<p> <p>
<a class="btn btn-lg btn-success" href="#"> <a class="btn btn-lg btn-success" href="#">
<i class="fa fa-flag fa-2x pull-left" aria-hidden="true"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a> <i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a>
</p> </p>
<div class="margin-bottom"> <div class="margin-bottom">
<div class="btn-group"> <div class="btn-group">
@ -30,26 +30,26 @@
</div> </div>
<div class="margin-bottom"> <div class="margin-bottom">
<div class="input-group margin-bottom-sm"> <div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw" aria-hidden="true"></i></span> <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input class="form-control" type="text" placeholder="Email address"> <input class="form-control" type="text" placeholder="Email address">
</div> </div>
<div class="input-group"> <div class="input-group">
<span class="input-group-addon"><i class="fa fa-key fa-fw" aria-hidden="true"></i></span> <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
<input class="form-control" type="password" placeholder="Password"> <input class="form-control" type="password" placeholder="Password">
</div> </div>
</div> </div>
<div class="margin-bottom"> <div class="margin-bottom">
<div class="btn-group open"> <div class="btn-group open">
<a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw" aria-hidden="true"></i> User</a> <a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"> <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa fa-caret-down" title="Toggle dropdown menu"></span> <span class="fa fa-caret-down" title="Toggle dropdown menu"></span>
</a> </a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> Edit</a></li> <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
<li><a href="#"><i class="fa fa-trash-o fa-fw" aria-hidden="true"></i> Delete</a></li> <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
<li><a href="#"><i class="fa fa-ban fa-fw" aria-hidden="true"></i> Ban</a></li> <li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
<li class="divider"></li> <li class="divider"></li>
<li><a href="#"><i class="fa fa-unlock" aria-hidden="true"></i> Make admin</a></li> <li><a href="#"><i class="fa fa-unlock"></i> Make admin</a></li>
</ul> </ul>
</div> </div>
</div> </div>
@ -61,12 +61,12 @@
</p> </p>
{% highlight html %} {% highlight html %}
<a class="btn btn-danger" href="#"> <a class="btn btn-danger" href="#">
<i class="fa fa-trash-o fa-lg" aria-hidden="true"></i> Delete</a> <i class="fa fa-trash-o fa-lg"></i> Delete</a>
<a class="btn btn-default btn-sm" href="#"> <a class="btn btn-default btn-sm" href="#">
<i class="fa fa-cog" aria-hidden="true"></i> Settings</a> <i class="fa fa-cog"></i> Settings</a>
<a class="btn btn-lg btn-success" href="#"> <a class="btn btn-lg btn-success" href="#">
<i class="fa fa-flag fa-2x pull-left" aria-hidden="true"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a> <i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a>
<div class="btn-group"> <div class="btn-group">
<a class="btn btn-default" href="#"> <a class="btn btn-default" href="#">
@ -98,11 +98,11 @@
<span class="fa fa-caret-down" title="Toggle dropdown menu"></span> <span class="fa fa-caret-down" title="Toggle dropdown menu"></span>
</a> </a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> Edit</a></li> <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
<li><a href="#"><i class="fa fa-trash-o fa-fw" aria-hidden="true"></i> Delete</a></li> <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
<li><a href="#"><i class="fa fa-ban fa-fw" aria-hidden="true"></i> Ban</a></li> <li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
<li class="divider"></li> <li class="divider"></li>
<li><a href="#"><i class="fa fa-unlock" aria-hidden="true"></i> Make admin</a></li> <li><a href="#"><i class="fa fa-unlock"></i> Make admin</a></li>
</ul> </ul>
</div> </div>
{% endhighlight %} {% endhighlight %}

16
src/_includes/examples/list.html
View File

@ -9,20 +9,20 @@
<div class="row"> <div class="row">
<div class="col-md-3 col-sm-4"> <div class="col-md-3 col-sm-4">
<ul class="fa-ul"> <ul class="fa-ul">
<li><i class="fa-li fa fa-check-square" aria-hidden="true"></i>List icons</li> <li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-check-square" aria-hidden="true"></i>can be used</li> <li><i class="fa-li fa fa-check-square"></i>can be used</li>
<li><i class="fa-li fa fa-spinner fa-spin" aria-hidden="true"></i>as bullets</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
<li><i class="fa-li fa fa-square" aria-hidden="true"></i>in lists</li> <li><i class="fa-li fa fa-square"></i>in lists</li>
</ul> </ul>
</div> </div>
<div class="col-md-9 col-sm-8"> <div class="col-md-9 col-sm-8">
<p>Use <code>fa-ul</code> and <code>fa-li</code> to easily replace default bullets in unordered lists.</p> <p>Use <code>fa-ul</code> and <code>fa-li</code> to easily replace default bullets in unordered lists.</p>
{% highlight html %} {% highlight html %}
<ul class="fa-ul"> <ul class="fa-ul">
<li><i class="fa-li fa fa-check-square" aria-hidden="true"></i>List icons</li> <li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-check-square" aria-hidden="true"></i>can be used</li> <li><i class="fa-li fa fa-check-square"></i>can be used</li>
<li><i class="fa-li fa fa-spinner fa-spin" aria-hidden="true"></i>as bullets</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
<li><i class="fa-li fa fa-square" aria-hidden="true"></i>in lists</li> <li><i class="fa-li fa fa-square"></i>in lists</li>
</ul> </ul>
{% endhighlight %} {% endhighlight %}
</div> </div>

31
src/accessibility.html
View File

@ -2,27 +2,38 @@
layout: base layout: base
title: Font Awesome & Accessibility title: Font Awesome & Accessibility
navbar_active: accessibility navbar_active: accessibility
view_class: v-accessibility
relative_path: ../ relative_path: ../
--- ---
{% capture jumbotron_h1 %}<i class="fa fa-universal-access" aria-hidden="true"></i>&nbsp; Accessibility{% endcapture %} {% capture jumbotron_h1 %}<i class="fa fa-universal-access" aria-hidden="true"></i>&nbsp; Accessibility{% endcapture %}
{% capture jumbotron_p %}Make your icons awesome for all of your users{% endcapture %} {% capture jumbotron_p %}Make your icons awesome for all of your users{% endcapture %}
{% include jumbotron.html %} {% include jumbotron.html %}
{% include stripe-social.html %}
<div class="container"> <div class="container">
{% capture stripe_ad_content %} <section id="accessibility-intro" class="accessibility-intro">
<div class="row">
<div class="col-md-6">
<p class="lead"> <p class="lead">
Icons are symbols that can convey a ton of information and really help people comprehend directions, signs, and interfaces. Its important that we create and use them so that they can reach the largest amount of people possible. Icons are symbols that can convey a ton of information and really help people comprehend directions, signs, and interfaces. Its important that we create and use them so that they can reach the largest amount of people possible.
</p> </p>
</div>
<p class="lead"> <div class="col-md-6">
When creating web sites and apps, that means making sure our icons play well with assistive tech when users are navigating apps and sites.
</p>
{% endcapture %}
{% include stripe-ad.html %}
{% include accessibility/background.html %} {% include accessibility/background.html %}
{% include accessibility/using-with-accessibility.html %} </div>
</div>
</section>
<h2 class="page-header">
Using Font Awesome with Acessibility in mind
</h2>
{% include accessibility/accessibility-facdn.html %}
<div class="hr margin-top-xl">
<span class="hr-text text-xl text-muted">or</span>
</div>
{% include accessibility/accessibility-manual.html %}
{% include accessibility/other.html %} {% include accessibility/other.html %}
</div> </div>

26
src/assets/less/site/views.less
View File

@ -1,6 +1,14 @@
// view-specific // view-specific
.v-get-started, .v-store {
// reset background
.v-get-started,
.v-store,
.v-accessibility {
background: @alert-well-bg; // resetting for depth background: @alert-well-bg; // resetting for depth
}
// get started
.v-get-started {
.get-started-cdn { .get-started-cdn {
background: @section-emphasized-bg; background: @section-emphasized-bg;
@ -24,3 +32,19 @@
font-size: (@font-size-large*1.5); font-size: (@font-size-large*1.5);
} }
} }
// accessibility
.v-accessibility {
.accessibility-cdn {
background: @section-emphasized-bg;
border-radius: @border-radius-base;
padding: @buffer-lg;
}
.hr .hr-text {
background: @alert-well-bg;
font-family: @font-family-serif;
font-size: (@font-size-large*1.5);
}
}

11
src/examples.html
View File

@ -20,15 +20,24 @@ relative_path: ../
{% endcapture %} {% endcapture %}
{% include stripe-ad.html %} {% include stripe-ad.html %}
<div class="alert alert-success gg">
<div class="gg-col min-width">
<i class="fa fa-universal-access fa-2x" aria-hidden"true"></i>
</div>
<div class="gg-col padding-left">
<p class="margin-bottom-none">The following examples are kept simple and assume use of <a href="{{ page.relative_path }}get-started/get-started-cdn">Font Awesome CDN</a>, which provides auto-accessibility support. If you are not using the Font Awesome CDN, please see the <a href="{{ page.relative_path }}examples/#accessible">manual accessibility examples</a> and read more about <a href="{{ page.relative_path }}accessibility">making your icons more awesome for all users</a></p>
</div>
</div>
{% include examples/basic.html %} {% include examples/basic.html %}
{% include examples/larger.html %} {% include examples/larger.html %}
{% include examples/fixed-width.html %} {% include examples/fixed-width.html %}
{% include examples/list.html %} {% include examples/list.html %}
{% include examples/bordered-pulled.html %} {% include examples/bordered-pulled.html %}
{% include examples/animated.html %} {% include examples/animated.html %}
{% include examples/accessible.html %}
{% include examples/rotated-flipped.html %} {% include examples/rotated-flipped.html %}
{% include examples/stacked.html %} {% include examples/stacked.html %}
{% include examples/bootstrap.html %} {% include examples/bootstrap.html %}
{% include examples/custom.html %} {% include examples/custom.html %}
{% include examples/accessible.html %}
</div> </div>