Styleguide

  • August 19, 2016
  • design

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Make Phoenix Even Faster with a GenServer-backed Key Value Store

Make Phoenix Even Faster with a GenServer-backed Key Value Store

Make Phoenix Even Faster with a GenServer-backed Key Value Store

Make Phoenix Even Faster with a GenServer-backed Key Value Store

Make Phoenix Even Faster with a GenServer-backed Key Value Store
Make Phoenix Even Faster with a GenServer-backed Key Value Store

Well, how’d you become king, then? He hasn’t got shit all over him. Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. …Are you suggesting that coconuts migrate?

Lists

  1. First ordered list item
  2. Another item
    • Unordered sub-list.
    • Unordered sub-list.
      1. subsublist
      2. subsublist
      3. subsublist
  3. Actual numbers don’t matter, just that it’s a number
    1. Ordered sub-list

  4. And another item.

    You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we’ll use three here to also align the raw Markdown).

To have a line break without a paragraph, you will need to use two trailing spaces. Note that this line is separate, but within the same paragraph. (This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)

  • First unordered item
  • Second unordered item

This is an example link in a text.

Code

Inline npm install has back-ticks around it.

sitemap:
    filename: "/sitemap.xml"
    exclude:
        - "/atom.xml"
        - "/feed.xml"
        - "/feed/index.xml"
    include_posts:
        - "/index.html"
    change_frequency_name: "change_frequency"
    priority_name: "priority"

var s = "JavaScript syntax highlighting";
alert(s);

.mainnav__list {
    margin: 0;
    padding: 0;
    list-style-type: none;
  
    @media screen and (min-width: $breakpoint-small) {
      justify-content: flex-end;
    }
  }
  
  .mainnav__item {
    margin: 0;
  }
  
  .mainnav__link {
    color: $global-color;
    transition: color $transition-speed ease;
    padding: 1rem;
    display: block;
  
    &:hover, &:focus, &:active {
      color: $primary-color;
      text-decoration: none;
    }
  }

function addFive(a) {
  const five = 5;
  return a + five;
}

<p class="fancy" data-attribute>I'm a paragraph</p>

<template>
  <article class="bpl-post">
    <h2 class="uk-margin-remove-bottom">
      <nuxt-link :to="{ name: 'blog-id', params: { id: post.attributes.slug } }" class="bpl-post__link">
        
      </nuxt-link>
    </h2>
    <ul class="pmd uk-margin-small-top">
      <li class="pmd__datePublished uk-text-muted"></li>
      <li class="pmd__tags">
        <tag-list :tags="post.attributes.tags"></tag-list>
      </li>
    </ul>
    <p class="uk-margin-remove-bottom">
    {{ post.attributes.excerpt }}
    </p>
    <nuxt-link class="uk-display-block uk-margin-large-top" :to="{ name: 'blog-id', params: { id: post.attributes.slug } }">Read more</nuxt-link>
  </article>
</template>

/**
 * @module util
 */

/**
 * Returns a human readable date for blog posts
 *
 * @param {Date} date Date object for formatting
 * @returns {Intl.DateTimeFormat} the localized date string
 */
function readableDate(date) {
  if (date) {
    const opts = {
      day: 'numeric',
      month: 'long',
      year: 'numeric',
    };
    return new Intl.DateTimeFormat('en-US', opts).format(new Date(date));
  }

  return '';
}

export default {
  readableDate,
};

Markdown Quotes

Blockquotes are very handy in email to emulate reply text. This line is part of the same quote.

Quote break.

This is a very long line that will still be quoted properly when it wraps. Oh boy let’s keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can put Markdown into a blockquote.

Tables

Colons can be used to align columns.

Tables Are Cool
col 3 is right-aligned $1600
col 2 is centered $12
zebra stripes are neat $1

There must be at least 3 dashes separating each header cell. The outer pipes (|) are optional, and you don’t need to make the raw Markdown line up prettily. You can also use inline Markdown.

Markdown Less Pretty
Still renders nicely
1 2 3

Horizontal Rule

Three or more…

Hyphens

Asterisks

Underscores

You don’t vote for kings.

Bloody Peasant! Oh, ow! And the hat. She’s a witch! Shut up!

We shall say ‘Ni’ again to you, if you do not appease us. Listen. Strange women lying in ponds distributing swords is no basis for a system of government. Supreme executive power derives from a mandate from the masses, not from some farcical aquatic ceremony.

Did you dress her up like this?

What do you mean? She looks like one. She looks like one. We want a shrubbery!! Did you dress her up like this?

  1. It’s only a model.
  2. Well, I didn’t vote for you.
  3. Camelot!

No, no, no! Yes, yes. A bit. But she’s got a wart.

Well, how’d you become king, then? He hasn’t got shit all over him. Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. …Are you suggesting that coconuts migrate?

  • Well, I got better.
  • She looks like one.
  • Well, she turned me into a newt.

You don’t vote for kings. Camelot! We shall say ‘Ni’ again to you, if you do not appease us. Shh! Knights, I bid you welcome to your new home. Let us ride to Camelot! I am your king. We shall say ‘Ni’ again to you, if you do not appease us.

The swallow may fly south with the sun, and the house martin or the plover may seek warmer climes in winter, yet these are not strangers to our land. She looks like one. Bring her forward! Oh, ow! You don’t frighten us, English pig-dogs! Go and boil your bottoms, sons of a silly person! I blow my nose at you, so-called Ah-thoor Keeng, you and all your silly English K-n-n-n-n-n-n-n-niggits!

Well, what do you want? The Lady of the Lake, her arm clad in the purest shimmering samite, held aloft Excalibur from the bosom of the water, signifying by divine providence that I, Arthur, was to carry Excalibur. That is why I am your king.

Well, she turned me into a newt. Listen. Strange women lying in ponds distributing swords is no basis for a system of government. Supreme executive power derives from a mandate from the masses, not from some farcical aquatic ceremony.

What a strange person. Did you dress her up like this? We found them. The nose? Did you dress her up like this? Why do you think that she is a witch? Oh, ow! What a strange person. Where’d you get the coconuts? Did you dress her up like this? Oh! Come and see the violence inherent in the system! Help, help, I’m being repressed! Camelot! I dunno. Must be a king. On second thoughts, let’s not go there. It is a silly place.

No, no, no! Yes, yes. A bit. But she’s got a wart. Shut up! You can’t expect to wield supreme power just ‘cause some watery tart threw a sword at you! Why do you think that she is a witch?

Shut up! Will you shut up?! Burn her anyway! On second thoughts, let’s not go there. It is a silly place. You don’t vote for kings.

I have to push the pram a lot. Why? It’s only a model. I dunno. Must be a king.

Ah, now we see the violence inherent in the system! Well, I got better. Burn her anyway! You can’t expect to wield supreme power just ‘cause some watery tart threw a sword at you! I’m not a witch.

Bright Lights Artwork »