SOURCE: css/typography.css
General typography includes basic text formating, directions, sizing, and alignment. Times New Roman is the default font-family. Apply the following utility classes to any element:
.uppercase - capitalizes all characters
.lowercase - all characters lowercase
.capitalize - capitalizes first character of each word
.small-caps - converts lower-case characters to upper-case
.justify - justifies text
.left-align - align text to the left
.right-align - align text to the right
.center - center text
.float-right - float element to the right
.float-left - float element to the left
.indent - indent text by 1 cm
.double-space - 200% line-height
.triple-space - 300% line-height
.pad - adds padding using the --padding variable
.no-pad - removes padding
.no-margin - removes margins
.spacebar - creates vertical spacing using the --spacebar variable
.spacebar-tall - 3x height of spacebar
.t-s - adds text-shadow using --accent variable
.no-select - prevent user from selecting text
.vertical-text - text flows vertically from top to bottom
.upright-text - same as vertical-text, but characters are kept upright
.unclip-text - renders ellipsis if text is clipped
.clamp-text
Clamp-text uses the clamp CSS property to set a standard text size, the default ranging from 16px to 32px.
.tensile-text
Tensile-text makes text size fluid, scaling in proportion to the width of the screen.
These custom fonts are included! Simply apply a font-face class to any element.
Drop caps (dropped capitals) are large letters placed at the beginning of a block of text. Sometimes these could be decorative, adding a strong accent to a paragraph. There are two methods for adding drop caps: basic or plus.
BASIC.
The basic method automatically adds a simple dropcap letter to the beginning of a paragraph or a block of text. The letter size uses the --dcsize variable. Simply apply the class .dropcap to any container with text, or directly to a paragraph.
Perhaps originating in the Near East, it is a feature of Late Roman architecture, which was revived in Baroque architecture, especially in the Spanish and Portuguese-speaking worlds. The Solomonic column was revived as a feature of Baroque architecture. The twisted S-curve shaft gives energy and dynamism to the traditional column form which fits these qualities that are characteristically Baroque.
Easily the best-known Solomonic columns are the colossal bronze Composite columns by Bernini in his Baldacchino at St. Peter's Basilica. The construction of the baldachin, actually a ciborium, which was finished in 1633, required that the original ones of Constantine be moved.
PLUS.
The "plus" method applies additional styling using the --primary, --secondary, and --accent variables. Simply apply the class .dropcap-plus to any container with text, or directly to a paragraph.
Perhaps originating in the Near East, it is a feature of Late Roman architecture, which was revived in Baroque architecture, especially in the Spanish and Portuguese-speaking worlds. The Solomonic column was revived as a feature of Baroque architecture. The twisted S-curve shaft gives energy and dynamism to the traditional column form which fits these qualities that are characteristically Baroque.
Easily the best-known Solomonic columns are the colossal bronze Composite columns by Bernini in his Baldacchino at St. Peter's Basilica. The construction of the baldachin, actually a ciborium, which was finished in 1633, required that the original ones of Constantine be moved.
CUSTOM CAPS.
We can use a span tag to set a dropcap on the first letter of a paragraph. This is useful if we want a specific font style for a dropcap. In the example below, we use Caslon as the main font, and use "Capo" for the dropcap font - one being a basic dropcap, the other a dropcap-plus.
Perhaps originating in the Near East, it is a feature of Late Roman architecture, which was revived in Baroque architecture, especially in the Spanish and Portuguese-speaking worlds. The Solomonic column was revived as a feature of Baroque architecture. The twisted S-curve shaft gives energy and dynamism to the traditional column form which fits these qualities that are characteristically Baroque.
Easily the best-known Solomonic columns are the colossal bronze Composite columns by Bernini in his Baldacchino at St. Peter's Basilica. The construction of the baldachin, actually a ciborium, which was finished in 1633, required that the original ones of Constantine be moved.
Ordered and unordered lists come with pre-formatted style classes. Apply the class none to either an ul or ol element to remove any formatting.