§ 3.4 Small Print

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 of aside—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. Use small only on inline content.

Oli Studholme

Buy one widget, get one free! (While supplies last. Offer expires on the vernal equinox. Not valid in Ohio.)

HTML
<small>(While supplies last. Offer expires on the vernal equinox. Not valid in Ohio.)</small>
_typeplate.scss
$small-print-size: 65% !default;

small {
	font-size: $small-print-size;
}
↑ back to top

§ 4.1 Code Blocks

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.

HTML
 /* Code Block Example within Markup */
h1 {
	background: red;
	color: blue;
	padding: 1em;
	margin: 3em;
	border: 2px solid black;
}
_typeplate.scss
@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;
}
↑ back to top