CSS

Global styles for typography, headings, lists, blockquotes, tables, code blocks, horizontal rules, forms and more.


Overview

Base includes a precompiled stylesheet which includes all the core ingredients to get you started on your next web project.

What's in Base?

Base is built from normalize.css and includes core styles for typography, links, headings (h1 - h6), code blocks, tables, blockquotes, forms and form elements.

Below is a list of the core includes:

  1. Basic resets
  2. Global
  3. Headings
  4. Lists
  5. Blockquotes
  6. Tables
  7. Code blocks
  8. Forms

Basic resets

The basic resets ensures that border-box is applied globally and the core html elements are reset correctly to work across all browsers supported.


Global

The global file contains all the core styles for default body text, links, headings and most typography elements.

By default, all font sizes and line heights use rem units with px fallbacks.

A full list of typography elements are listed below.

Global Typography Elements
Element / Class Example
<b>, <strong> Strong text
<em> Italic text
<abbr> ASAP
<dfn> Definition
<mark> Mark
<small> Small text
<sub> Text with Sub text
<sup> Text with Sup text
<del> Deleted text

Typography sizing, line heights, font weight and colors can easily be modified by adjusting the variables within _variables.less or _variables.scss.

A summary of the variables and there usage are as follows:

Global Typography Variables
Variable Default value Purpose
@base-background-color #fff Colour applied to the background body
@base-font-family sans-serif Global font family
@base-font-size 16px Global font size
@base-line-height 22px Global line height
@base-font-weight @font-regular Global font weight
@base-font-color #585858 Global font colour
@base-link-color #cd5c5c Global link colour
@font-100 font weight: 100 Font weight for thin text
@font-200 font weight: 200 Font weight for lighter text
@font-300 font weight: 300 Font weight for light text
@font-400 font weight: 400 Font weight for regular text
@font-500 font weight: 500 Font weight for medium text
@font-600 font weight: 600 Font weight for semi bold text
@font-700 font weight: 700 Font weight for bold text
@font-800 font weight: 800 Font weight for extra bold text
@font-900 font weight: 900 Font weight for ultra bold text

Headings

A summary of the headings and variable usage are as follows:

Heading Examples
Element / Class HTML Output
  • h1
  • .h1

Heading 1

  • h2
  • .h2

Heading 2

  • h3
  • .h3

Heading 3

  • h4
  • .h4

Heading 4

  • h5
  • .h5

Heading 5

  • h6
  • .h6

Heading 6


Heading Variables
Variable Default value Purpose
@heading-font-family sans-serif Font family applied to all headings (h1 - h6)
@h1-font-size 32px Heading 1 font size
@h1-line-height 36px Heading 1 line height
@h1-font-weight @font-regular Heading 1 font weight
@h1-color #343434 Heading 1 font color
@h2-font-size 26px Heading 2 font size
@h2-line-height 32px Heading 2 line height
@h2-font-weight @font-regular Heading 2 font weight
@h2-color #343434 Heading 2 font color
@h3-font-size 22px Heading 3 font size
@h3-line-height 28px Heading 3 line height
@h3-font-weight @font-regular Heading 3 font weight
@h3-color #343434 Heading 3 font color
@h4-font-size 18px Heading 4 font size
@h4-line-height 24px Heading 4 line height
@h4-font-weight @font-regular Heading 4 font weight
@h4-color #343434 Heading 4 font color
@h5-font-size 16px Heading 5 font size
@h5-line-height 22px Heading 5 line height
@h5-font-weight @font-regular Heading 5 font weight
@h5-color #343434 Heading 5 font color
@h6-font-size 14px Heading 6 font size
@h6-line-height 20px Heading 6 line height
@h6-font-weight @font-regular Heading 6 font weight
@h6-color #343434 Heading 6 font color


Lists

Styles for ordered, unordered, unstyled, and definition lists.

Unordered List

  • Unordered List Item 1
  • Unordered List Item 2
  • Unordered List Item 3

Ordered List

  1. Ordered List Item 1
  2. Ordered List Item 2
  3. Ordered List Item 3

No List Styling

To create a list with no styling, simply apply the .list-unstyled class helper to a <ul> or <ol> element.


Example:
  • No List Item 1
  • No List Item 2

Inline List

To create an inline list, simply apply the .list-inline helper to a <ul> or <ol> element.


Example:
  • List Inline Item 1
  • List Inline Item 2
  • List Inline Item 3
  • List Inline Item 4
  • List Inline Item 5
  • List Inline Item 6

Definition List

Definition List
The DL element should be used when you want incorporate a definition of a term in your document, it is often used in glossaries to define many terms, it is also used in “normal” documents when the author wishes to explain a term in a more detail (Like this definition).

Blockquotes

Basic styling for blockquotes and quotes.

This is an example blockquote with some dummy lorem ipsum text and random content...

John Doe - Founder of Doe Inc.

Default values for blockquote variables are as follows:

Blockquote Variables
Variable Default value Purpose
@base-blockquote-font-family sans-serif Font family applied to blockquotes
@base-blockquote-font-size 22px Font size applied to blockquotes
@base-blockquote-line-height 28px Line height applied to blockquotes
@base-blockquote-color #424242 Font color applied to blockquotes
@base-blockquote-cite-color #777 Font color applied to the blockquote cite

Tables

Basic styling for tables - a simple line spearated table for presenting your data in the most efficient way.

Standard Table Example
Table Head Title Table Head Data
Table Footer Title Table Footer Data
Table Data Table Data
Table Data Table Data

Code blocks

Core styling for code and pre block elements.

Code Block Examples
Element HTML Output
code, kbd and samp code, kbd and samp have the same styles applied
pre
Pre example inherits the same styling as code, kbd and samp but caters for multi-line coding

Default values for code variables are as follows:

Code Block Variables
Variable Default Value Purpose
@base-code-font-family 'courier new', monospace, serif Font family applied to code blocks
@base-code-font-size 13px Font size applied to code blocks
@base-code-line-height 16px Line height applied to code blocks
@base-code-color #272727 (dark grey) Font color applied to code blocks
@base-code-background-color #f1f1f1 (very light grey) Background color applied to code blocks
@base-code-border-color #d7d7d7 (light grey) Border color applied to code blocks

Forms

Includes minimal styles for labels, input fields, select boxes and form buttons.

Form example:

Default values for form variables are as follows:

Form Variables
Variable Default Value Purpose
@base-placeholder-color #999 Colour applied to all placeholder text on input fields

There is also styling to convert a <button> element to look like a standard link. Simply add the .button-link class to the element to see it in action.

Code Snippet

<button class="button-link">Button with link styling</button>

To disable a button or link, add the .disabled class to the element.

Code Snippet

<button class="button-disabled">Button with disabled state</button>

Form Helpers

In addition to basic form styling, there are additional helpers which can help construct your forms to look neat and tidy.

A list of form helpers, there functions and code examples are listed below.

Radio

Code Snippet

<span class="radio">
  <label for="radio-example">Radio Example</label>
  <input id="radio-example" type="radio">
</span>

Checkbox

Code Snippet

<span class="checkbox">
  <label for="checkbox-example">Checkbox Example</label>
  <input id="checkbox-example" type="checkbox">
</span>

CSS Helpers

A set of helpers which can be used to style elements on the fly and make your life a whole lot easier.