a11y
mixins
screen-reader-only
Since 0.1.0@mixin screen-reader-only($className: "is-sr-only", $size: .625rem) { ... }Description
Hide an element to all devices except screen readers with .sr-only. Combine .sr-only with .is-focusable to show the element again when it’s focused (e.g. by a keyboard-only user). Useful for "Skip to main content" links
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$className | a CSS class name that will prefix all helpers | String | "is-sr-only" |
$size | a valid CSS number | Number | .625rem |
Example
<a class="sr-only is-focusable" href="#content">Skip to main content</a>Links
- http://a11yproject.com/posts/how-to-hide-content/
- http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
Author
HTML5 Boilerplate
box model
mixins
is-scrollable
Since 0.1.0@mixin is-scrollable($className: "is-scrollable", $breakpoints: config.$breakpoints, $height: config.$font-size, $rows: 20) { ... }Description
Enable scrollable blocks of code Use <pre>s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering. You may optionally add the .pre-scrollable class, which will set a max-height of 350px and provide a y-axis scrollbar
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$className | a CSS class name that will prefix all helpers | String | "is-scrollable" |
$breakpoints | a map of grid breakpoints | Map | config.$breakpoints |
$height | a valid CSS number to multiply by the rows to max out the height; generally should match the font size used within the element | Number | config.$font-size |
$rows | the number of rows the show; | Number | 20 |
images
mixins
img-responsive
Since 0.1.0 — <ol> <li>Set a maximum relative to the parent</li> <li>Scale the height according to the width, otherwise you get stretching</li> </ol>@mixin img-responsive($className: "img-responsive", $breakpoints: config.$breakpoints) { ... }Description
Responsive images keep images from scaling beyond the width of their parents.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$className | a CSS class name that will prefix all helpers | String | "img-responsive" |
$breakpoints | a map of grid breakpoints | Map | config.$breakpoints |
Example
usage
@include img-responsive();Author
Mark Otto
positioning
mixins
centers
Since 0.1.0@mixin centers($className: "center", $breakpoints: config.$breakpoints) { ... }Description
Perfectly center things along the x or y-axis, or perhaps both
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$className | a CSS class name that will prefix all helpers | String | "center" |
$breakpoints | a map of grid breakpoints | Map | config.$breakpoints |
Example
<div class="pos-rel" style="height: 100px;">
<div class="center">absolute centered on both axis</div>
<div class="center-x">absolute centered on x axis</div>
<div class="center-axis-y-xs-up">absolute centered on y axis</div>
</div>clearfix
Since 0.1.0 — <p>For modern browsers</p> <ol> <li>The space content is one way to avoid an Opera bug when the <code>contenteditable</code> attribute is included anywhere else in the document. Otherwise it causes space to appear at the top and bottom of elements that are clearfixed.</li> <li>The use of <code>table</code> rather than <code>block</code> is only necessary if using <code>::before</code> to contain the top-margins of child elements.</li> </ol>@mixin clearfix($className: "clearfix", $breakpoints: config.$breakpoints) { ... }Description
Clearfix
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$className | a CSS class name that will prefix all helpers | String | "clearfix" |
$breakpoints | a map of grid breakpoints | Map | config.$breakpoints |
Example
@include clear($className: c, $breakpoints: ("sm": 480px));<div class="clear-fix">...</div>Links
Author
Nicolas Gallagher
text
mixins
text-reset
Since 0.1.0@mixin text-reset($className: "text-reset", $line-height: config.$line-height, $family: config.$font-family, $weight: normal) { ... }Description
Reset text back to its original browser defaults
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$className | a CSS class name that will prefix all helpers | String | "text-reset" |
$line-height | a valid CSS number with which to rese | Number | config.$line-height |
$family | a font family with which to reset | String | config.$font-family |
$weight | a font weight with which to reset | String | normal |
text-truncate
Since 0.1.0@mixin text-truncate($className: "text-truncate", $breakpoints: config.$breakpoints) { ... }Description
Truncate the text
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$className | a CSS class name that will prefix all helpers | String | "text-truncate" |
$breakpoints | a map of grid breakpoints | Map | config.$breakpoints |
text-underline
Since 0.1.0@mixin text-underline($className: "text-underline", $direction: "bottom", $border: config.$border-width solid, $padding: .25rem) { ... }Description
Add an underline decoration to your heading.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$className | a CSS class name that will prefix all helpers | String | "text-underline" |
$direction | a valid CSS number to multiply by the rows to max out the height; generally should match the font size used within the element | String | "bottom" |
$border | the number of rows the show; | String | config.$border-width solid |
$padding | — none | String | .25rem |