-
+
-
Contextual colors
-
Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.
-
-
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
-
Nullam id dolor id nibh ultricies vehicula ut id elit.
-
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
-
Maecenas sed diam eget risus varius blandit sit amet non magna.
-
Etiam porta sem malesuada magna mollis euismod.
-
Donec ullamcorper nulla non metus auctor fringilla.
-
-{% highlight html %}
-
...
-
...
-
...
-
...
-
...
-
...
-{% endhighlight %}
-
-
Dealing with specificity
-
Sometimes emphasis classes cannot be applied due to the specificity of another selector. In most cases, a sufficient workaround is to wrap your text in a <span>
with the class.
-
+# Helper classes
-
Contextual backgrounds
-
Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.
-
-
Nullam id dolor id nibh ultricies vehicula ut id elit.
-
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
-
Maecenas sed diam eget risus varius blandit sit amet non magna.
-
Etiam porta sem malesuada magna mollis euismod.
-
Donec ullamcorper nulla non metus auctor fringilla.
-
-{% highlight html %}
-
...
-
...
-
...
-
...
-
...
-{% endhighlight %}
-
-
Dealing with specificity
-
Sometimes contextual background 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 <div>
with the class.
-
-
Close icon
-
Use the generic close icon for dismissing content like modals and alerts.
-
-{% highlight html %}
-
× Close
-{% endhighlight %}
-
Quick floats
-
Float an element to the left or right with a class. !important
is included to avoid specificity issues. Classes can also be used as mixins.
-{% highlight html %}
+
+
+### Contextual colors
+
+Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.
+
+{% example html %}
+
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
+
Nullam id dolor id nibh ultricies vehicula ut id elit.
+
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+
Maecenas sed diam eget risus varius blandit sit amet non magna.
+
Etiam porta sem malesuada magna mollis euismod.
+
Donec ullamcorper nulla non metus auctor fringilla.
+{% endexample %}
+
+
+
Dealing with specificity
+
Sometimes emphasis classes cannot be applied due to the specificity of another selector. In most cases, a sufficient workaround is to wrap your text in a <span>
with the class.
+
+
+
+
+
+
+### Contextual backgrounds
+
+Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.
+
+{% example html %}
+
Nullam id dolor id nibh ultricies vehicula ut id elit.
+
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+
Maecenas sed diam eget risus varius blandit sit amet non magna.
+
Etiam porta sem malesuada magna mollis euismod.
+
Donec ullamcorper nulla non metus auctor fringilla.
+{% endexample %}
+
+
+
Dealing with specificity
+
Sometimes contextual background 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 <div>
with the class.
+
+
+
+
+
+
+### Close icon
+
+Use a generic close icon for dismissing content like modals and alerts. **Be sure to include screen reader text when you can** as we've done with `.sr-only`.
+
+{% example html %}
+
+ ×
+ Close
+
+{% endexample %}
+
+
+
+
+
+### Quick floats
+
+Float an element to the left or right with a class. `!important` is included to avoid specificity issues. Classes can also be used as mixins.
+
+{% example html %}
...
...
-{% endhighlight %}
+{% endexample %}
+
{% highlight scss %}
// Classes
.pull-left {
@@ -78,17 +91,23 @@
}
{% endhighlight %}
-
-
Not for use in navbars
-
To align components in navbars with utility classes, use .navbar-left
or .navbar-right
instead. See the navbar docs for details.
-
+
+
Not for use in navbars
+
To align components in navbars with utility classes, use .navbar-left
or .navbar-right
instead. See the navbar docs for details.
+
-
Center content blocks
-
Set an element to display: block
and center via margin
. Available as a mixin and class.
-{% highlight html %}
+
+
+
+### Center content blocks
+
+Set an element to `display: block;` and center via `margin`. Available as a mixin and class.
+
+{% example html %}
...
-{% endhighlight %}
+{% endexample %}
+
{% highlight scss %}
// Classes
.center-block {
@@ -104,12 +123,15 @@
{% endhighlight %}
-
Clearfix
-
Easily clear float
s by adding .clearfix
to the parent element . Utilizes the micro clearfix as popularized by Nicolas Gallagher. Can also be used as a mixin.
+
+
+
+Easily clear `float`s by adding `.clearfix` **to the parent element**. Utilizes [the micro clearfix](http://nicolasgallagher.com/micro-clearfix-hack/) as popularized by Nicolas Gallagher. Can also be used as a mixin.
+
{% highlight html %}
-
...
{% endhighlight %}
+
{% highlight scss %}
// Mixin itself
.clearfix() {
@@ -130,13 +152,20 @@
{% endhighlight %}
-
Showing and hiding content
-
Force an element to be shown or hidden (including for screen readers ) with the use of .show
and .hidden
classes. These classes use !important
to avoid specificity conflicts, just like the quick floats . They are only available for block level toggling. They can also be used as mixins.
-
Furthermore, .invisible
can be used to toggle only the visibility of an element, meaning its display
is not modified and the element can still affect the flow of the document.
+
+
+
+### Showing and hiding content
+
+Force an element to be shown or hidden (**including for screen readers**) with the use of `.show` and `.hidden` classes. These classes use `!important` to avoid specificity conflicts, just like the [quick floats](#helper-floats). They are only available for block level toggling. They can also be used as mixins.
+
+Furthermore, `.invisible` can be used to toggle only the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document.
+
{% highlight html %}
...
...
{% endhighlight %}
+
{% highlight scss %}
// Classes
.show {
@@ -160,11 +189,17 @@
{% endhighlight %}
-
Screen reader and keyboard navigation content
-
Hide an element to all devices except screen readers with .sr-only
. Combine .sr-only
with .sr-only-focusable
to show the element again when it's focused (e.g. by a keyboard-only user). Necessary for following accessibility best practices . Can also be used as mixins.
+
+
+
+### Screen readers and keyboard navigation
+
+Hide an element to all devices **except screen readers** with `.sr-only`. Combine `.sr-only` with `.sr-only-focusable` to show the element again when it's focused (e.g. by a keyboard-only user). Necessary for following [accessibility best practices](../getting-started/#accessibility). Can also be used as mixins.
+
{% highlight html %}
Skip to main content
{% endhighlight %}
+
{% highlight scss %}
// Usage as a Mixin
.skip-navigation {
@@ -174,15 +209,20 @@
{% endhighlight %}
-
Image replacement
-
Utilize the .text-hide
class or mixin to help replace an element's text content with a background image.
-{% highlight html %}
+
+
+
+### Image replacement
+
+Utilize the `.text-hide` class or mixin to help replace an element's text content with a background image.
+
+{% example html %}
Custom heading
-{% endhighlight %}
- {% highlight scss %}
+{% endexample %}
+
+{% highlight scss %}
// Usage as a Mixin
.heading {
.text-hide();
}
{% endhighlight %}
-