# Baroquest
Framework

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.

### Fonts

These custom fonts are included! Simply apply a font-face class to any element.

- Altgotisch .altgotisch
- Angel-Wish .angel-wish
- Beautiful-Friends .beautiful-friends
- Black-Blossom .black-blossom
- Blaka Hollow .blaka / .blaka-hollow
- Bradley Gratis .bradley-gratis
- Brock-Script .brock-script
- Bunching .bunching
- Buttershine .buttershine
- Byzantine .byzantine
- Capo .capo
- Caslon .caslon
- Cat-Child .cat-child
- Chillen .chillen
- Chopin .chopin
- Chromeslab .chromeslab
- Curlystars .curlystars
- Etruscan .etruscan
- Fancy-Valentine .fancy-valentine
- Fanlste .fanlste
- Flowershop .flowershop
- Kalnia Glaze .kalnia
- Labrit .labrit
- Maranatha .maranatha
- Old-Sketch .old-sketch
- Olivia .olivia
- Predikat Oneday .predikat
- Rotunda .rotunda
- Single-Ghost .single-ghost
- Tangerine .tangerine

### Dropcaps

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.

#### Example: .dropcap

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.

#### Example: .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.

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.

#### Example: p span.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.

### Lists

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.

#### Inside / Outside

##### .inside

- Columns
- Curls
- Corners

##### .outside

- Columns
- Curls
- Corners

#### Ordered Lists

##### ol (default)

1. Columns
2. Curls
3. Corners

##### ol.alpha

1. Columns
2. Curls
3. Corners

##### ol.lower-alpha

1. Columns
2. Curls
3. Corners

##### ol.roman

1. Columns
2. Curls
3. Corners

##### ol.lower-roman

1. Columns
2. Curls
3. Corners

##### ol.zero

1. Columns
2. Curls
3. Corners

#### Unordered Lists

##### ul.disc (default)

- Columns
- Curls
- Corners

##### ul.square

- Columns
- Curls
- Corners

##### ul.circle

- Columns
- Curls
- Corners

##### ul.diamond

- Columns
- Curls
- Corners

##### ul.lozenge

- Columns
- Curls
- Corners

##### ul.sparkle

- Columns
- Curls
- Corners

##### ul.burst

- Columns
- Curls
- Corners

##### ul.bullseye

- Columns
- Curls
- Corners

##### ul.fisheye

- Columns
- Curls
- Corners

##### ul.fleur

- Columns
- Curls
- Corners

##### ul.florette

- Columns
- Curls
- Corners

##### ul.heart

- Columns
- Curls
- Corners

##### ul.star

- Columns
- Curls
- Corners

##### ul.triangle

- Columns
- Curls
- Corners

##### ul.arrow

- Columns
- Curls
- Corners

##### ul.ballot

- Columns
- Curls
- Corners

##### ul.check

- Columns
- Curls
- Corners

##### ul.plus

- Columns
- Curls
- Corners