The small
element is used to represent side comments or what’s commonly referred to as ‘small print’: disclaimers, caveats, legal restrictions, or copyrights. It can also be used for attributions or satisfying licensing requirements.
small
is now for side comments, which are the inline equivalent ofaside
—content which is not the main focus of the page. A common example is inline legalese, such as a copyright statement in a page footer, a disclaimer, or licensing information. It can also be used for attribution. Don’t use it for block-level content (paragraphs, lists, etc.), as this would be considered main content.
small
text does not need to be smaller than surrounding text — if all you want is smaller text use CSS instead. Usesmall
only on inline content.
Buy one widget, get one free! (While supplies last. Offer expires on the vernal equinox. Not valid in Ohio.)
<small>(While supplies last. Offer expires on the vernal equinox. Not valid in Ohio.)</small>
$small-print-size: 65% !default;
small {
font-size: $small-print-size;
}
Monospace
fonts just as you desire for all your code block dreams! Monospace fonts or “fixed pitch” fonts, contain characters that all have the same character width. ‘l’, ‘1’ and ‘i’ are easily distinguished with monospace, ‘0’, ‘o’ and ‘O’ are easily distinguished and clear punctuation characters, especially braces, parenthesis and brackets.
/* Code Block Example within Markup */
h1 {
background: red;
color: blue;
padding: 1em;
margin: 3em;
border: 2px solid black;
}
@mixin white-space($wrap-space) {
@if $wrap-space == 'pre-wrap' {
white-space: #{-moz-}$wrap-space; // Firefox 1.0-2.0
white-space: $wrap-space; // current browsers
} @else {
white-space: $wrap-space;
}
}
pre code {
@extend %normal-wrap;
@include white-space(pre-wrap);
}
pre {
@include white-space(pre);
}
code {
@include white-space(pre);
font-family: monospace;
}