Rearrange helper classes docs section; add subnav list items to docs side nav
This commit is contained in:
parent
7edd87dde9
commit
7a7149d2ee
|
@ -76,6 +76,12 @@
|
|||
</li>
|
||||
<li>
|
||||
<a href="#helper-classes">Helper classes</a>
|
||||
<ul class="nav">
|
||||
<li><a href="#helper-classes-close">Close icon</a></li>
|
||||
<li><a href="#helper-classes-floats">Quick floats</a></li>
|
||||
<li><a href="#helper-classes-clearfix">Clearfix</a></li>
|
||||
<li><a href="#helper-classes-screen-readers">Screen reader content</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#responsive-utilities">Responsive utilities</a>
|
||||
|
|
61
css.html
61
css.html
|
@ -2213,7 +2213,8 @@ For example, <code><section></code> should be wrapped as inline.
|
|||
<h1 id="helper-classes">Helper classes</h1>
|
||||
</div>
|
||||
|
||||
<h3>Close icon</h3>
|
||||
|
||||
<h3 id="helper-classes-close">Close icon</h3>
|
||||
<p>Use the generic close icon for dismissing content like modals and alerts.</p>
|
||||
<div class="bs-example">
|
||||
<p><button type="button" class="close" aria-hidden="true">×</button></p>
|
||||
|
@ -2222,43 +2223,45 @@ For example, <code><section></code> should be wrapped as inline.
|
|||
<button type="button" class="close" aria-hidden="true">×</button>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3>.pull-left</h3>
|
||||
<p>Float an element left with a class. Can also be used as a mixin.</p>
|
||||
|
||||
<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>
|
||||
{% highlight html %}
|
||||
<div class="pull-left">...</div>
|
||||
{% endhighlight %}
|
||||
{% highlight css %}
|
||||
.pull-left {
|
||||
float: left !important;
|
||||
}
|
||||
{% endhighlight %}
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Not for use in navbars</h4>
|
||||
<p>To left-align components in navbars, use <code>.navbar-left</code> instead. <a href="../components/#navbar-component-alignment">See the navbar docs</a> for details.</p>
|
||||
</div>
|
||||
|
||||
<h3>.pull-right</h3>
|
||||
<p>Float an element right with a class. Can also be used as a mixin.</p>
|
||||
{% highlight html %}
|
||||
<div class="pull-right">...</div>
|
||||
{% endhighlight %}
|
||||
{% highlight css %}
|
||||
// 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 right-align components in navbars, use <code>.navbar-right</code> instead. <a href="../components/#navbar-component-alignment">See the navbar docs</a> for details.</p>
|
||||
<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>
|
||||
|
||||
<h3>.clearfix</h3>
|
||||
<p>Clear the <code>float</code> on any element. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher. Can also be used as a mixin.</p>
|
||||
|
||||
<h3 id="helper-classes-clearfix">Clearfix</h3>
|
||||
<p>Clear the <code>float</code> on any element with the <code>.clearfix</code> class. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher. Can also be used as a mixin.</p>
|
||||
{% highlight html %}
|
||||
<!-- Usage as a class -->
|
||||
<div class="clearfix">...</div>
|
||||
{% endhighlight %}
|
||||
{% highlight css %}
|
||||
// Mixin
|
||||
// Mixin itself
|
||||
.clearfix() {
|
||||
&:before,
|
||||
&:after {
|
||||
|
@ -2270,19 +2273,29 @@ For example, <code><section></code> should be wrapped as inline.
|
|||
}
|
||||
}
|
||||
|
||||
// Usage
|
||||
// Usage as a Mixin
|
||||
.element {
|
||||
.clearfix();
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
<h3>.sr-only</h3>
|
||||
<p>Hide an element to all users <em>except</em> screen readers. Necessary for following <a href="{{ page.base_url }}getting-started#accessibility">accessibility best practices</a>.</p>
|
||||
|
||||
<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 %}
|
||||
<a class="sr-only" href="#content">Skip to content</a>
|
||||
{% endhighlight %}
|
||||
{% highlight css %}
|
||||
// Usage as a Mixin
|
||||
.skip-navigation {
|
||||
.sr-only();
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Responsive utilities
|
||||
================================================== -->
|
||||
<div class="bs-docs-section" id="responsive-utilities">
|
||||
|
|
Loading…
Reference in New Issue