diff options
Diffstat (limited to 'css.html')
| -rw-r--r-- | css.html | 45 |
1 files changed, 35 insertions, 10 deletions
@@ -316,7 +316,7 @@ base_url: "../" <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> </div> {% endhighlight %} - <p>In addition to column clearing at responsive breakpoints, you may need to <strong>reset offsets, pushes, or pulls</strong>. Those resets are available for medium and large grid tiers only, since they start only at the (second) small grid tier.</p> + <p>In addition to column clearing at responsive breakpoints, you may need to <strong>reset offsets, pushes, or pulls</strong>. Those resets are available for medium and large grid tiers only, since they start only at the (second) small grid tier. See this in action in <a href="../examples/grid/">the grid example</a>.</p> {% highlight html %} <div class="row"> <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div> @@ -501,7 +501,7 @@ base_url: "../" } } -// Generate the large column offsets +// Generate the medium column offsets .make-md-column-offset(@columns) { @media (min-width: @screen-medium) { margin-left: percentage((@columns / @grid-columns)); @@ -2038,7 +2038,7 @@ For example, <code><section></code> should be wrapped as inline. <button type="button" class="btn btn-link">Link</button> </div> {% highlight html %} -<!-- Standard gray button with gradient --> +<!-- Standard button --> <button type="button" class="btn btn-default">Default</button> <!-- Provides extra visual weight and identifies the primary action in a set of buttons --> @@ -2134,12 +2134,12 @@ For example, <code><section></code> should be wrapped as inline. <h3>Anchor element</h3> <p>Add the <code>.disabled</code> class to <code><a></code> buttons.</p> <p class="bs-example"> - <a href="#" class="btn btn-primary btn-lg disabled">Primary link</a> - <a href="#" class="btn btn-default btn-lg disabled">Link</a> + <a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a> + <a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a> </p> {% highlight html %} -<a href="#" class="btn btn-primary btn-lg disabled">Primary link</a> -<a href="#" class="btn btn-default btn-lg disabled">Link</a> +<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a> +<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a> {% endhighlight %} <p> We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required. @@ -2153,13 +2153,13 @@ For example, <code><section></code> should be wrapped as inline. <h2 id="buttons-tags">Button tags</h2> <p>Use the button classes on an <code><a></code>, <code><button></code>, or <code><input></code> element.</p> <form class="bs-example"> - <a class="btn btn-default" href="#">Link</a> + <a class="btn btn-default" href="#" role="button">Link</a> <button class="btn btn-default" type="submit">Button</button> <input class="btn btn-default" type="button" value="Input"> <input class="btn btn-default" type="submit" value="Submit"> </form> {% highlight html %} -<a class="btn btn-default" href="#">Link</a> +<a class="btn btn-default" href="#" role="button">Link</a> <button class="btn btn-default" type="submit">Button</button> <input class="btn btn-default" type="button" value="Input"> <input class="btn btn-default" type="submit" value="Submit"> @@ -2225,7 +2225,7 @@ For example, <code><section></code> should be wrapped as inline. <h3 id="helper-classes-floats">Quick floats</h3> - <p>Float an element to the left or right with a class. Classes can also be used as mixins.</p> + <p>Float an element to the left or right with a class. <code>!important</code> is included to avoid specificity issues. Classes can also be used as mixins.</p> {% highlight html %} <div class="pull-left">...</div> <div class="pull-right">...</div> @@ -2280,6 +2280,31 @@ For example, <code><section></code> should be wrapped as inline. {% endhighlight %} + <h3 id="helper-classes-show-hide">Showing and hiding content</h3> + <p>Force an element to be shown or hidden via <code>display</code> with the use of <code>.show</code> and <code>.hide</code> classes. These classes use <code>!important</code> to avoid specificity conflicts, just like the <a href="../css/#helper-classes-floats">quick floats</a>. They are only available for block level toggling. They can also be used as mixins.</p> +{% highlight html %} +<div class="show">...</div> +<div class="hide">...</div> +{% endhighlight %} +{% highlight css %} +// Classes +.show { + display: block !important; +} +.hide { + display: none !important; +} + +// Usage as mixins +.element { + .show(); +} +.another-element { + .hide(); +} +{% endhighlight %} + + <h3 id="helper-classes-screen-readers">Screen reader content</h3> <p>Hide an element to all users <em>except</em> screen readers with <code>.sr-only</code>. Necessary for following <a href="{{ page.base_url }}getting-started#accessibility">accessibility best practices</a>. Can also be used as a mixin.</p> {% highlight html %} |