Originally published 2013.

Website design, development, and copy writing by Frances Coronel.

Credits


Style Guide

Markdown

I like to dabble with things that ought to be dabbled with.

I’m obsessed with emoji so I’m using Twitter’s emoji library called Twemoji so that they look the same across all browsers. πŸŽ‰πŸŽ‚πŸŽˆπŸŽ

This means that even IE users can see πŸ’©.

For external links, a β†— is automatically added to the end like //google.com.

External links also automatically have target='_blank' and rel='nofollow' added to the a tag.

The important part to note is that I’ve set the β†— up to work only with links that start with // so https://google.com and http://google.com will just have the target='_blank' and rel='nofollow' added.

  1. List item one
    1. List item one
      • List item one
      • List item two
      • List item three
      • List item four
    2. List item two
    3. List item three
    4. List item four
  2. List item two
  3. List item three
  4. List item four
Name Occupation Age
Huey Freeman Intellectual Terrorist 12
Tintin Reporter 15
Steven Universe Guardian 14
Tina Belcher Student 13
Phillip J. Fry Delivery Boy 25
Finn Mertens Adventurer 16
> I like to dabble with things that ought to be dabbled with.

I'm **obsessed**** with emoji so I'm using [Twitter's emoji library](//github.com/twitter/twemoji) called `Twemoji` so that they look the same across all browsers. πŸŽ‰πŸŽ‚πŸŽˆπŸŽ

_This means that even IE users can see πŸ’©._

For external links, a β†— is automatically added to the end like [//google.com](//google.com).

External links also automatically have `target='_blank'` and `rel='nofollow'` added to the `a` tag.

The important part to note is that I've set the β†— up to work only with links that start with `//` so [https://google.com](https://google.com) and [http://google.com](http://google.com) will just have the `target='_blank'` and `rel='nofollow'` added.

1. List item one
   1. List item one
      * List item one
      * List item two
      * List item three
      * List item four
   2. List item two
   3. List item three
   4. List item four
2. List item two
3. List item three
4. List item four

|      Name       |       Occupation       | Age |
| :-------------: | :--------------------: | :-: |
|  Huey Freeman   | Intellectual Terrorist | 12  |
|     Tintin      |        Reporter        | 15  |
| Steven Universe |        Guardian        | 14  |
|  Tina Belcher   |        Student         | 13  |
| Phillip J. Fry  |      Delivery Boy      | 25  |
|  Finn Mertens   |       Adventurer       | 16  |

HTML

Fun Fact
My logo is a chocolate dipped strawberry. No particular reason why, I just think they're yummy. πŸ«πŸ“

There are superscripts like in E = MC2 and subscripts like with H2O.

This tag should denote inserted text.

Let’s not forget about our precious Delete key.

<p class="notice">
  <b>Fun Fact</b>
  <br>
  My logo is a chocolate dipped strawberry. No particular
  reason why, I just think they're yummy. πŸ«πŸ“
</p>

There are <sup>superscripts</sup> like in E = MC<sup>2</sup> and <sub>subscripts</sub> like with H<sub>2</sub>O.

This tag should denote <ins>inserted</ins> text.

Let's not forget about our precious <kbd>Delete</kbd> key.

<button class="button big">Big Button</button>

<button class="button">Primary Button</button>

<button class="button small">Small Button</button>

<button class="button">Button with Icon <i class="fas fa-download"></i></button>

<button class="button fit">Fit Button</button>