Vertical Rhythm
preview

Font-size : 14px

Line-height : 1.5

Vertical space : Margin Top and Margin Bottom

Asymetric spaces (bigger at top).

Testing

For this column ("Testing") I used a grid-system to show content side by side, the rule : hn:first-child{margin-top: 0} (commented in the output CSS) is not used.

Lists

  • nested lists
    • 1
    • 2
    • 3
      • 3.1
      • 3.2

Heading h2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod ullamcorper justo ac vulputate. Mauris in lectus ut elit mattis tincidunt. Aenean a orci vel nisl iaculis egestas. Praesent eu luctus leo. Curabitur nisi ligula, pretium quis dictum at, ultrices in enim.

Integer diam sem, adipiscing sed ultrices in, gravida non metus.

Heading h3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod ullamcorper justo ac vulputate. Mauris in lectus ut elit mattis tincidunt. Aenean a orci vel nisl iaculis egestas. Praesent eu luctus leo.

Integer diam sem, adipiscing sed ultrices in, gravida non metus.

Heading h4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod ullamcorper justo ac vulputate. Mauris in lectus ut elit mattis tincidunt. Aenean a orci vel nisl iaculis egestas. Praesent eu luctus leo. Curabitur nisi ligula, pretium quis dictum at, ultrices in enim. Vivamus et justo enim.

Integer diam sem, adipiscing sed ultrices in, gravida non metus.

Heading h5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod ullamcorper justo ac vulputate. Mauris in lectus ut elit mattis tincidunt. Aenean a orci vel nisl iaculis egestas.

Integer diam sem, adipiscing sed ultrices in, gravida non metus.

Heading h6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod ullamcorper justo ac vulputate. Mauris in lectus ut elit mattis tincidunt. Aenean a orci vel nisl iaculis egestas. Donec elit leo, facilisis quis pharetra quis, pellentesque id erat.

Integer diam sem, adipiscing sed ultrices in, gravida non metus.

Blockquote

The <blockquote> element represents a quoted section W3C

Tables

Table Header 1Table Header 2Table Header 3
Division 1Division 2Division 3
Division 1Division 2Division 3
Division 1Division 2Division 3

Table with caption thead tfoot tbody

caption
Table Header 1Table Header 2Table Header 3
tfoot
Division 1Division 2Division 3
Division 1Division 2Division 3
Division 1Division 2Division 3

Some previews of classes used

h1.h2-like

Paragraph .small Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod ullamcorper justo ac vulputate. Mauris in lectus ut elit mattis tincidunt. Aenean a orci vel nisl iaculis egestas.

Praesent eu luctus leo. Curabitur nisi ligula, pretium quis dictum at, ultrices in enim. Vivamus et justo enim. Suspendisse quis molestie nulla. Phasellus ut tellus lacus, quis vulputate metus. Curabitur non purus ac tellus rutrum molestie sit amet quis massa. Sed non tempus elit. Donec elit leo, facilisis quis pharetra quis, pellentesque id erat.

h2.h4-like

Paragraph .biggest (+10) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod ullamcorper justo ac vulputate. Mauris in lectus ut elit mattis tincidunt. Aenean a orci vel nisl iaculis egestas. Praesent eu luctus leo.

Curabitur nisi ligula, pretium quis dictum at, ultrices in enim. Vivamus et justo enim. Suspendisse quis molestie nulla. Phasellus ut tellus lacus, quis vulputate metus. Curabitur non purus ac tellus rutrum molestie sit amet quis massa. Sed non tempus elit. Donec elit leo, facilisis quis pharetra quis, pellentesque id erat.

h3.h5-like

Paragraph .bigger Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod ullamcorper justo ac vulputate. Mauris in lectus ut elit mattis tincidunt. Aenean a orci vel nisl iaculis egestas. Praesent eu luctus leo. Curabitur nisi ligula, pretium quis dictum at, ultrices in enim. Vivamus et justo enim. Suspendisse quis molestie nulla. Phasellus ut tellus lacus, quis vulputate metus. Curabitur non purus ac tellus rutrum molestie sit amet quis massa. Sed non tempus elit. Donec elit leo, facilisis quis pharetra quis, pellentesque id erat.

Thanks

Some CSS rules come from Knacss by @goetter
Merci Raphaƫl pour les conseils

For this demo I used Griddle a grid-system from @necolas