Typography

The double stranded hierarchy allows me to use a certain style without depending on an element or it's place.

Paragraphs

As we got further and further away, it [the Earth] diminished in size. Finally it shrank to the size of a marble, the most beautiful you can imagine. That beautiful, warm, living object looked so fragile, so delicate, that if you touched it with a finger it would crumble and fall apart. Seeing this has to change a man.

Header 3

Spaceflights cannot be stopped. This is not the work of any one man or even a group of men. It is a historical process which mankind is carrying out in accordance with the natural laws of human development.

Header 4

The Earth was small, light blue, and so touchingly alone, our home that must be defended like a holy relic. The Earth was absolutely round. I believe I never knew what the word round meant until I saw Earth from space.

Header 5

A Chinese tale tells of some men sent to harm a young girl who, upon seeing her beauty, become her protectors rather than her violators. That's how I felt seeing the Earth for the first time. I could not help but love and cherish her.

Header 6

What was most significant about the lunar voyage was not that man set foot on the Moon but that they set eye on the earth.

List

  1. This is an ordered list.
  2. This is the second item, which contains a sub list
    1. This is the sub list, which is also ordered.
    2. It has two items.
  3. This is the final list item.
  • Fruit
    • Apple
    • Orange
    • Banana
  • Vegetable
  • Fish
  • Nuts
Space
Science has not yet mastered prophecy.
We predict too much for the next year and yet far too little for the next 10.

Blockquote

“There is only one god and his name is Death. And there is only one thing we say to Death: "Not today".”

Game of Thrones

Code

For block code samples use code wrapped in pre. Otherwise just code for inline samples.

html, button, input, select, textarea {
  color: #333;
  text-rendering: optimizeLegibility;
}

Images

Figure

Wrap img elements in figure. This can be supported with figcation.

This is a supporting caption.

Table

Position Team Played Points
1 Man Utd 38 89
2 Man City 38 78
3 Chelsea 38 75
4 Arsenal 38 73

Form

Input

Textarea

Checkbox

Radio

Module

Button

Button

Big Button

Button

Default Button

Button

Small Button

You can easily customise these buttons by extending the btn module.

Button

btn--alert

Button

btn--success

btn--twitter

btn--facebook

Media

Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci.

Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci.

Flag

Basically the flag object is the same as the media object except the contents will be vertically aligned. Thanks to Harry Roberts about thinking of the flag object.

To go places and do things that have never been done before – that’s what living is all about.

To go places and do things that have never been done before – that’s what living is all about.

Modal

Barebones includes a custom modal you can use without any js dependencies. Hurray! Try out the modal.

Sass Spinner