Style guide
Markdown
Use Markdown syntax by default before using inline HTML elements.
Create HTML <div> elements by inserting {:} above the text block. CSS classes can be applied to the syntax: {:.class-name}, {:.class-one .class-two}
Images can also be inserted without markdown.
Syntax tips
Kramdown lets you avoid paragraph tags for images. Using Markdown like this…
this is
{::nomarkdown}
<img class="test" />
{:/}
this
…results in this output:
<p>this is</p>
<img class="test" />
<p>this</p>
Headings
There are three primary heading styles used:
Heading 1 (h1)
Heading 2 (h2)
Heading 3 (h3)
Code
Inline code is available with the <code> element. Snippets of multiple lines of code are supported through Prism.js. Longer lines will automatically scroll horizontally when needed.
// Example can be run directly in your JavaScript console
// Create a function that takes two arguments and returns the sum of those arguments
let adder = new Function('a', 'b', 'return a + b');
// Call the function
adder(2, 6);
// > 8
Media
Images
There are two main image sizes, medium and large.
Medium
Large
Tweets
Wrap the embedded tweet markup in <div class="embed"></div> for proper spacing. Also, use tw-align-center class on the blockquote provided by Twitter:
CodePen
Wrap the embedded CodePen markup in <div class="embed"></div> for proper spacing.
Messages/notes
Notification
Highlight
General
Emoji
Emoji will be depicted using the hexadecimal representation of the Unicode character:
<span>😀</span>
For accessibility purposes, emoji will be give the ARIA landmark role img and aria-label with the CLDR short name value. Screen readers will understand the emoji is an image and can read it’s value.
<span role="img" aria-label="emoji grinning face">😀</span>