diff options
| author | Mark Otto <[email protected]> | 2014-07-10 20:02:47 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2014-07-10 20:02:47 -0700 |
| commit | e8bd019a19a82b2796b77101cb43892138f4935e (patch) | |
| tree | aa1c76aac39c9b74d18d46678e1159dbc4dd6479 /docs/_includes/css/helpers.md | |
| parent | 55d6b3fcda52fe89116319c086aa39573c28de80 (diff) | |
| download | bootstrap-e8bd019a19a82b2796b77101cb43892138f4935e.tar.xz bootstrap-e8bd019a19a82b2796b77101cb43892138f4935e.zip | |
move all css files over to components dir
Diffstat (limited to 'docs/_includes/css/helpers.md')
| -rw-r--r-- | docs/_includes/css/helpers.md | 228 |
1 files changed, 0 insertions, 228 deletions
diff --git a/docs/_includes/css/helpers.md b/docs/_includes/css/helpers.md deleted file mode 100644 index 24f9a027a..000000000 --- a/docs/_includes/css/helpers.md +++ /dev/null @@ -1,228 +0,0 @@ -<a id="helpers"></a> - -# Helper classes - - - -<a id="helpers-colors"></a> - -### 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 %} -<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> -<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p> -<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p> -<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p> -<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p> -<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p> -{% endexample %} - -<div class="bs-callout bs-callout-info"> - <h4>Dealing with specificity</h4> - <p>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 <code><span></code> with the class.</p> -</div> - - - -<a id="helpers-bgs"></a> - -### 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 %} -<div class="bg-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</div> -<div class="bg-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</div> -<div class="bg-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</div> -<div class="bg-warning">Etiam porta sem malesuada magna mollis euismod.</div> -<div class="bg-danger">Donec ullamcorper nulla non metus auctor fringilla.</div> -{% endexample %} - -<div class="bs-callout bs-callout-info"> - <h4>Dealing with specificity</h4> - <p>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 <code><div></code> with the class.</p> -</div> - - - -<a id="helpers-close"></a> - -### 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 %} -<button type="button" class="close"> - <span aria-hidden="true">×</span> - <span class="sr-only">Close</span> -</button> -{% endexample %} - - - -<a id="helpers-floats"></a> - -### 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 %} -<div class="pull-left">...</div> -<div class="pull-right">...</div> -{% endexample %} - -{% highlight scss %} -// Classes -.pull-left { - float: left !important; -} -.pull-right { - float: right !important; -} - -// Usage as mixins -.element { - .pull-left(); -} -.another-element { - .pull-right(); -} -{% endhighlight %} - -<div class="bs-callout bs-callout-warning"> - <h4>Not for use in navbars</h4> - <p>To align components in navbars with utility classes, use <code>.navbar-left</code> or <code>.navbar-right</code> instead. <a href="../components/#navbar-component-alignment">See the navbar docs</a> for details.</p> -</div> - - - -<a id="helpers-center"></a> - -### Center content blocks - -Set an element to `display: block;` and center via `margin`. Available as a mixin and class. - -{% example html %} -<div class="center-block">...</div> -{% endexample %} - -{% highlight scss %} -// Classes -.center-block { - display: block; - margin-left: auto; - margin-right: auto; -} - -// Usage as mixins -.element { - .center-block(); -} -{% endhighlight %} - - - -<a id="helpers-clearfix"></a> - -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 %} -<div class="clearfix">...</div> -{% endhighlight %} - -{% highlight scss %} -// Mixin itself -.clearfix() { - &:before, - &:after { - content: " "; - display: table; - } - &:after { - clear: both; - } -} - -// Usage as a Mixin -.element { - .clearfix(); -} -{% endhighlight %} - - - -<a id="helpers-toggles"></a> - -### 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 %} -<div class="show">...</div> -<div class="hidden">...</div> -{% endhighlight %} - -{% highlight scss %} -// Classes -.show { - display: block !important; -} -.hidden { - display: none !important; - visibility: hidden !important; -} -.invisible { - visibility: hidden; -} - -// Usage as mixins -.element { - .show(); -} -.another-element { - .hidden(); -} -{% endhighlight %} - - - -<a id="helpers-screen-readers"></a> - -### 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 %} -<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a> -{% endhighlight %} - -{% highlight scss %} -// Usage as a Mixin -.skip-navigation { - .sr-only(); - .sr-only-focusable(); -} -{% endhighlight %} - - - -<a id="helpers-image-replacement"></a> - -### Image replacement - -Utilize the `.text-hide` class or mixin to help replace an element's text content with a background image. - -{% example html %} -<h1 class="text-hide">Custom heading</h1> -{% endexample %} - -{% highlight scss %} -// Usage as a Mixin -.heading { - .text-hide(); -} -{% endhighlight %} |
