CSS / SCSS

Base includes a precompiled stylesheet which covers all the core ingredients such as typography, headings, lists, forms and more to get you started on your next web project.


Overview

Base is built up from normalize.css to ensure cross browser consistency.

Below is a list of the core includes:

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

Basic resets

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


Variables

Font sizes, line heights, font weights, colors and other basic styles are linked to variables within _variables.scss. Variables can be easily be overwritten by placing variable overrides at the top of the /src/scss/styles.scss file.

All Global Variables

  • $base-background-color
    #fff
    color 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
    400
    Global font weight
  • $base-font-color
    #000
    Global font color
  • $base-link-color
    #000
    Global link color
  • $base-link-hover-color
    #000
    Global link color
  • $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
  • $base-heading-font-family
    sans-serif
    Font family applied to headings h1 - h6
  • $base-h1-font-size
    32
    Heading 1 font size
  • $base-h1-line-height
    38
    Heading 1 line height
  • $base-h1-font-weight
    700
    Heading 1 font weight
  • $base-h1-color
    #000
    Heading 1 color
  • $base-h2-font-size
    26
    Heading 2 font size
  • $base-h2-line-height
    32
    Heading 2 line height
  • $base-h2-font-weight
    700
    Heading 1 font weight
  • $base-h2-color
    #000
    Heading 2 color
  • $base-h3-font-size
    22
    Heading 3 font size
  • $base-h3-line-height
    28
    Heading 3 line height
  • $base-h3-font-weight
    700
    Heading 3 font weight
  • $base-h3-color
    #000
    Heading 3 color
  • $base-h4-font-size
    18
    Heading 4 font size
  • $base-h4-line-height
    24
    Heading 4 line height
  • $base-h4-font-weight
    700
    Heading 4 font weight
  • $base-h4-color
    #000
    Heading 4 color
  • $base-h5-font-size
    16
    Heading 5 font size
  • $base-h5-line-height
    22
    Heading 5 line height
  • $base-h5-font-weight
    700
    Heading 5 font weight
  • $base-h5-color
    #000
    Heading 5 color
  • $base-h6-font-size
    14
    Heading 6 font size
  • $base-h6-line-height
    20
    Heading 6 line height
  • $base-h6-font-weight
    700
    Heading 6 font weight
  • $base-h6-color
    #000
    Heading 6 color
  • $base-blockquote-font-family
    sans-serif
    Font family applied to blockquotes
  • $base-blockquote-font-size
    22
    Font size applied to blockquotes
  • $base-blockquote-line-height
    28
    Line height applied to blockquotes
  • $base-code-font-family
    monospace, monospace
    Font family applied to code blocks
  • $base-code-font-size
    13
    Font size applied to code blocks
  • $base-code-line-height
    18
    Line height applied to code blocks
  • $base-code-color
    #000
    Font color applied to code blocks
  • $base-code-background-color
    transparent
    Background color applied to code blocks
  • $base-code-border-color
    #d7d7d7
    Border color applied to code blocks
  • $base-input-height
    36px
    Height applied to input elements
  • $base-input-placeholder-color
    #999
    Placeholder color for all input elements
  • $base-input-color
    #000
    Font color for all input elements
  • $base-input-background-color
    #fff
    Background color for all input elements
  • $base-input-background-color-focus
    #fff
    Background color applied for all input elements when a focus state occurs
  • $base-input-border-color
    #ccc
    Border color applied for all input elements
  • $base-input-border-color-focus
    #f7c723
    Border color applied for all input elements when a focus state occurs
  • $base-select-box-height
    36px
    Height for select element
  • $grid-alignment
    left
    Used to setup your site to be LTL or RTL. (Default is LTL)
  • $container
    100%
    Small device (mobile) container width
  • $container-m
    720px
    Medium device (tablet) container width
  • $container-l
    960px
    Large device (desktop) container width
  • $container-xl
    1120px
    Extra large device (HD) container width
  • $grid-gutter
    15px
    Grid gutter spacing for small devices (mobile)
  • $grid-gutter-m
    15px
    Grid gutter spacing for medium devices (tablet)
  • $grid-gutter-l
    15px
    Grid gutter spacing for large devices (desktop)
  • $grid-gutter-xl
    15px
    Grid gutter spacing for extra large devices (HD)
  • $breakpoint-m
    ($container-m + 20)
    Breakpoint value for medium devices (tablet)
  • $breakpoint-l
    ($container-l + 20)
    Breakpoint value for large devices (desktop)
  • $breakpoint-xl
    ($container-xl + 20)
    Breakpoint value for extra large devices (HD)

Typography

The typography file contains all styling for default body text, links, headings and other general typography elements.

All font sizes and line heights use rem units with px fallbacks and a full list of all the typography elements are listed below.

  • <b>, <strong>
    Strong
  • <em>
    Italic
  • <abbr>
    ASAP
  • <dfn>
    Definition
  • <mark>
    Mark
  • <small>
    Small text
  • <sub>
    Text with Sub text
  • <sup>
    Text with Sup text
  • <del>
    Deleted text

Headings

Heading Examples
Element / Class HTML Output
  • h1
  • .fs-1

Heading 1

  • h2
  • .fs-2

Heading 2

  • h3
  • .fs-3

Heading 3

  • h4
  • .fs-4

Heading 4

  • h5
  • .fs-5

Heading 5

  • h6
  • .fs-6

Heading 6

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.

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

Forms

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

Form example:

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.