Typography

Font sizing, padding, margins and line-heights are all set out using rem with a font-size: 62.5%; on the the HTML element. This gives a logical conversion rate on any element and provides consistent font sizing. Meaning 1.4rem = 14px

Headings

All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

            Heading 1
            Heading 2
            Heading 3
            Heading 4
            Heading 5
            Heading 6
        

Body copy

The default Hubble font size is 1.45rem (14.5px) with a line height of 1.8. This is applied to the body as well as paragraph tags. Additionally paragraph tags have a bottom margin of 1rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

In addition to standard paragraph tags, Hubble has added .p1 through .p6 classes for text emphasis.

Paragraph 1

Paragraph 2

Paragraph 3

Paragraph 4

Paragraph 5

Paragraph 6

Inline elements

In-line text elements have some very minimal styling applied to ensure they display consistently.

Lorem ipsum dolor sit amet consectetur adipiscing elit
~~Lorem ipsum dolor sit amet consectetur adipiscing elit~~
~~Lorem ipsum dolor sit amet consectetur adipiscing elit~~
Lorem ipsum dolor sit amet consectetur adipiscing elit
Lorem ipsum dolor sit amet consectetur adipiscing elit
Lorem ipsum dolor sit amet consectetur adipiscing elit
Lorem ipsum dolor sit amet consectetur adipiscing elit
Lorem ipsum dolor sit amet consectetur adipiscing elit
Lorem ipsum dolor sit amet consectetur adipiscing elit

Address

Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <br>.

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Full Name
first.last@example.com

Blockquotes

Blockquotes have some very basic styling applied, but are also available via contextual classes bq-*.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Add a <footer> for identifying the source. Wrap the name of the source work in <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lists

Some rudimentary list styling allows you to display consistent, simple and attractive looking lists with ease.

Unordered

A list of items in which the order does not explicitly matter.

            Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Sed do eiusmod tempor incididunt
Ut labore et dolore magna aliqua
Ut enim ad minim veniam
                    Consectetur adipiscing elit
Sed do eiusmod tempor incididunt
Ut labore et dolore magna aliqua

                
Lorem ipsum dolor sit amet
Consectetur adipiscing elit

        

Ordered

A list of items in which the order does explicitly matter.

            Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Sed do eiusmod tempor incididunt
Ut labore et dolore magna aliqua
Ut enim ad minim veniam
                    Consectetur adipiscing elit
Sed do eiusmod tempor incididunt
Ut labore et dolore magna aliqua

                
Lorem ipsum dolor sit amet
Consectetur adipiscing elit

        

Inline

Place all list items on a single line with display: inline-block; and some light padding.

            Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Sed do eiusmod tempor incididunt

        

Unstyled

Strip most styles from a list.

            Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Sed do eiusmod tempor incididunt

        

Description

A list of terms with their associated descriptions.

            
                Lorem ipsum dolor sit amet
                Sed do eiusmod tempor incididunt consectetur adipiscing elit.
                Lorem ipsum dolor sit amet
                Sed do eiusmod tempor incididunt consectetur adipiscing elit.
                Lorem ipsum dolor sit amet
                Sed do eiusmod tempor incididunt consectetur adipiscing elit.
            
        

Horizontal description

Make terms and descriptions line up side-by-side.

            
                Lorem ipsum dolor sit amet
                Sed do eiusmod tempor incididunt consectetur adipiscing elit.
                Lorem ipsum dolor sit amet
                Sed do eiusmod tempor incididunt consectetur adipiscing elit.
                Lorem ipsum dolor sit amet
                Sed do eiusmod tempor incididunt consectetur adipiscing elit.
            
        

Code

Wrap inline snippets of code with <code>.

So you can wrap this .class-name in a <code> tag.

Code blocks

Use a <pre> tag for snippets spanning multiple lines. You can also wrap a <code> tag inside a <pre> tag.

.foo {
    color: red;
}

        

Getting started

CSS

Components

JavaScript

SCSS