4.0 - Typography

Styles from this page can be found in wyrm_core/_type.sass. Let's start with some basic links.

I wonder where <a href="#url" class="{$modifiers}">this link goes</a>!

4.1 - Text

Text handling and other base styles. Can be safely used on any element, not just paragraph tags.

<p class="{$modifiers}">The best movie of all time is either Network or Rollerball.</p>
  • Default styling without modifier classes.

    The best movie of all time is either Network or Rollerball.

  • .wy-text-small

    Smaller, 80% text. Can also use the <small> tag for this.

    The best movie of all time is either Network or Rollerball.

  • .wy-text-large

    Larger, 120% text.

    The best movie of all time is either Network or Rollerball.

  • .wy-text-left

    To the left.

    The best movie of all time is either Network or Rollerball.

  • .wy-text-right

    To the right.

    The best movie of all time is either Network or Rollerball.

  • .wy-text-center

    To the center.

    The best movie of all time is either Network or Rollerball.

  • .wy-text-center

    To the center.

    The best movie of all time is either Network or Rollerball.

  • .wy-text-strike

    Strikethrough.

    The best movie of all time is either Network or Rollerball.

  • .wy-text-neutral

    Simply applies the normal text color.

    The best movie of all time is either Network or Rollerball.

  • .wy-text-info

    Info text.

    The best movie of all time is either Network or Rollerball.

  • .wy-text-success

    Success text.

    The best movie of all time is either Network or Rollerball.

  • .wy-text-warning

    Warning text.

    The best movie of all time is either Network or Rollerball.

  • .wy-text-danger

    Danger text.

    The best movie of all time is either Network or Rollerball.


4.2 - Headings and paragraphs.

Headings and paragraphs have a margin-bottom: $base-line-height on them like most objects in wyrm.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>Hey everybody, it's Tuuuuuuuesday! I am the hat judge. Show me a hat and I will tell you if it's a good hat or bad hat. Seattle is actually Spanish for "taco." I try not to affiliate myself with Canadians. I've got a salty mustache. I've been a party to many, many stupid things in my life. This is by far the stupidest. This Quick Look is over! I'm an old man. I like turns.</p>
<p>Jeff, I have a question. Why do we keep doing this? There's nothing I'd rather talk about right now than Peter Molyneux's balls! I WILL CONTINUE TO CALL PAX AUSTRALIA PAXA UNTIL IT FUCKING CATCHES ON. I feel like I'm gonna throw up, but in a good way. No one should ever put clothes on a shark. You are looking for far too much logical consistency.</p>
  • Default styling without modifier classes.

    Heading 1

    Heading 2

    Heading 3

    Heading 4

    Heading 5
    Heading 6

    Hey everybody, it's Tuuuuuuuesday! I am the hat judge. Show me a hat and I will tell you if it's a good hat or bad hat. Seattle is actually Spanish for "taco." I try not to affiliate myself with Canadians. I've got a salty mustache. I've been a party to many, many stupid things in my life. This is by far the stupidest. This Quick Look is over! I'm an old man. I like turns.

    Jeff, I have a question. Why do we keep doing this? There's nothing I'd rather talk about right now than Peter Molyneux's balls! I WILL CONTINUE TO CALL PAX AUSTRALIA PAXA UNTIL IT FUCKING CATCHES ON. I feel like I'm gonna throw up, but in a good way. No one should ever put clothes on a shark. You are looking for far too much logical consistency.


4.3 - Lists

Lists in wyrm default to list-style: none mostly because I've found I use lists more often as nav or block elements than as text lists. To get traditional text lists you either add, or extend these classes through sass. For convenience default lists in the <article> tag also extend these values.

<ul class="{$modifiers}">
 <li>Freespace 2</li>
 <li>The Elder Scrolls: Skyrim</li>
 <li>Grim Fandango</li>
 <li>
   Saints forever:
   <ul>
     <li>Saint's Row</li>
     <li>Saint's Row 2</li>
     <li>Saint's Row: The Third</li>
     <li>Saint's Row IV</li>
   </ul>
   <ol>
     <li>number 1</li>
     <li>number 2</li>
   </ol>
 </li>
</ul>
  • Default styling without modifier classes.

    • Freespace 2
    • The Elder Scrolls: Skyrim
    • Grim Fandango
    • Saints forever:
      • Saint's Row
      • Saint's Row 2
      • Saint's Row: The Third
      • Saint's Row IV
      1. number 1
      2. number 2
  • .wy-plain-list-disc

    The usual disc list.

    • Freespace 2
    • The Elder Scrolls: Skyrim
    • Grim Fandango
    • Saints forever:
      • Saint's Row
      • Saint's Row 2
      • Saint's Row: The Third
      • Saint's Row IV
      1. number 1
      2. number 2
  • .wy-plain-list-decimal

    Decimal lists.

    • Freespace 2
    • The Elder Scrolls: Skyrim
    • Grim Fandango
    • Saints forever:
      • Saint's Row
      • Saint's Row 2
      • Saint's Row: The Third
      • Saint's Row IV
      1. number 1
      2. number 2