storyteller.io CSS Styleguide

Text

CSS Globals

1.1

Webfonts

Source Sans Pro and Source Code from Adobe are available for use in display, text, and source code contexts. This gives us a highly legible type family that was designed for use within a UI but also looks great at a larger scale. We also get a monospaced version in the same family — all for free.

GET
Facebook
Instagram
Twitter
WordPress
GET
Facebook
Instagram
Twitter
WordPress
GET
/media/popular
/media/search?lat=40.6974881&lng=-73.979681
/users/123456/media/liked
{"Hello": "World"}

1.2

Base

All globals and blocks inherit the following base styles. normalize.css aligns browser defaults. Default colors and fonts are reset to use appropriate global variables. The root em unit — 16px specified by <html> — is reset to 10px to for simpler pixel → em conversion and define the smallest practical scale. <body> is reset to 1.3em to provide a more legible base font size. Default styling is applied for special elements such as <hr> and <var>.

1.3

Headings

The scale of headings should be controlled with the scale utility class for consistency despite the markup used. Some stylistic variations are available with modifiers. --fill expands a heading’s width to the same width as it’s container.

Block Heading

Bordered Heading

Ruled Heading

Display Heading

Example Markup
<h1 class="heading--block --fill">Block Heading</h1>
<h2 class="heading--bordered">Bordered Heading</h2>
<h3 class="heading--ruled">Ruled Heading</h2>
<h4 class="heading--display">Display Heading</h4>
Modifiers  
.heading--block

Heading-in-a-rectangle.

.heading--bordered

Heading in a hollowed out rectangle. Try --align-left to combine with a block for a nice sub-heading.

.heading--display

Go big, right to the center of attention.

.heading--ruled

Heading with a thick horizontal rule underneath.

1.4

Code

Blocks of code must be wrapped in <pre> and <code> tags. Remember that any tabs and newlines contained within a <pre> tag will be preserved. Language classes as proposed in the HTML Living Draft may be applied to highlight syntax with Prism.

{
    "message": "Hello World",
    "example": "1+1+1+1+1 = 1+1+1+2 = 1+1+2+1 = 1+2+1+1 = 2+1+1+1 = 2+2+1 = 2+1+2 = 1+2+2 1+1+1+1+1 = 1+1+1+2 = 1+1+2+1 = 1+2+1+1 = 2+1+1+1 = 2+2+1 = 2+1+2 = 1+2+2,"
}
Example Markup
<pre class="language-javascript"><code>{
    "message": "Hello World",
    "example": "1+1+1+1+1 = 1+1+1+2 = 1+1+2+1 = 1+2+1+1 = 2+1+1+1 = 2+2+1 = 2+1+2 = 1+2+2 1+1+1+1+1 = 1+1+1+2 = 1+1+2+1 = 1+2+1+1 = 2+1+1+1 = 2+2+1 = 2+1+2 = 1+2+2,"
}</code></pre>
Modifiers  
.language-markup

Highlight HTML and XML syntax

.language-javascript

Highlight JavaScript syntax (including XML)