Components

NOTE: This page assumes you’ve got a basic understanding of HTML tags — if you want to learn HTML, here are some guides: Intro to HTML + Basic HTML tags

Using CSS Classes


CSS classes are a way to apply pre-defined styles and features to HTML tags. You use most of Baseline’s components by adding CSS classes to your code.

You can add CSS classes by viewing your HTML, which might look something like this:

<p>This is a sample paragraph.</p>

and then, if you wanted to make the text bigger, you could add a “text-large” class like this:

<p class="text-large">This is a sample paragraph.</p>

Text Classes

Body Text Sizes

Class Name Example
text-small Small text.
text-large Large text.
text-large2 Larger text.
text-large3 Even larger text.

Text Style — Titles

Note: The different title classes are intended to give the same approximate visual size to titles and headlines of varying length — title0 is good for short, one-word titles, while title4 is good for longer multi-word titles.

Class Name Example
title0
(1-2 words)
Short Title
title1
(1-4 words)
A Longer Title
title2
(2-6 words)
An Even Longer Title
title3
(3-8 words)
This Title Is Longer Than The Last
title4
(5-10 words)
This Title Is Practically A Sentence

Text Style — Lead Paragraph

Note: the “lead” classes are useful for making paragraphs of text larger, like when you want to make the first paragraph larger to entice readers to start reading a large block of text. They are a combination of size and lineheight classes.

Class Name Example
text-style-lead Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
text-style-lead2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
text-style-lead3 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Text Color

Note: [color] corresponds to a color “slug” defined in your site’s Color settings, available under Appearance > Color.

Class Name Example
text-[color], ex: text-blue Blue text.
text-orange Orange text.
text-light Light text to constrast with a dark background.
text-dark Dark text to contrast with a light background.

Font

Note: these classes refer to the fonts defined in your site’s Fonts settings, available under Appearance > Fonts.

Class Name Example
text-font-display This is the site’s “display” font.
text-font-body This is the site’s body text font.
text-font-secondary This is the site’s accent font for secondary and meta text.

Text Alignment

Note: Distinct alignment classes for different screen sizes are also included.
Examples: mobile-text-right, tablet-text-center, desktop-text-left, etc.

Class Name Example
text-left Left-aligned text.
text-center Center-aligned text.
text-right Right-aligned text.

Typography

Class Name Example
text-caps Capitalized text.
text-small-caps Small caps.

Decoration

Note: [color] corresponds to a color “slug” defined in your site’s Color settings, available under Appearance > Color.

Class Name Example
text-underline-thick-[color], ex: .text-underline-thick-orange Thick underline.
text-highlight + background color Highlighted text w/ background color.

Button Classes

Note: all button classes require the core “button” class in addition to any extra modifying classes. For example:
<a class="button button-small">Sample</a>

Class Name Example
button button-small Smaller button
button Normal Button
button arrow-right
button arrow-down
Button w/ arrow
button button-large Larger button
button button-primary Primary button

Spacing Classes

Bottom Margin

Class Name Example
margin-bottom-none
No bottom margin
margin-bottom-small
Small bottom margin
margin-bottom-normal
Normal bottom margin
margin-bottom-medium
Medium bottom margin
margin-bottom-large
Large bottom margin
margin-bottom-huge
Huge bottom margin

Padding

Class Name Example
padding-tiny
Lil’ padding
padding-small
Small padding
padding-normal
Normal padding
padding-medium
Medium padding
padding-large
Large padding
padding-huge
Huge padding
padding-gigantic
Gigantic padding

Column Classes

Baseline’s column system loosely follows a 10-column grid, with the ability to use different columns configurations on different screen sizes.

Columns for large screens

Desktop computers, laptops, large tablets  (more than 900 pixels wide)
c1, c2, c3, c4, c5, c6, c7, c8, c9, c10
c2_5, c7_5
c3_3, c6_6

Columns for medium screens

Medium and small tablets, large mobile phones (720–900 pixels wide)
ct2_5, ct3_3, ct4, ct5, ct6, ct6_6, ct7_5, ct10

Columns for small screens

Medium and small mobile phones (less than 720 pixels wide)
cm2_5, cm3_3, cm5, cm6_6, cm7_5, cm10

Examples: Large-screen columns

c10
c9
c1
c8
c2
c7_5
c2_5
c7
c3
c6_6
c3_3
c6
c4
c5
c5

Examples: Medium-screen columns

ct10
ct7_5
ct2_5
ct6_6
ct3_3
ct6
ct4
ct5
ct5

Examples: Small-screen columns

cm10
cm7_5
cm2_5
cm6_6
cm3_3
cm5
cm5

Superpage Classes

Note: Most section classes must be applied directly to superpage sections to have an effect.

Title Section

title-section,
title-section-60

Makes a superpage section the whole height of the browser window, and vertically centers the content within it. Useful for sections that need to make a big visual impact (like titles).

Expando Section

expando
expando-big

Turns a whole superpage section into an expando.