edG Blog Styleguide

Writing

Structure

Generally speaking, we're trying to demonstrate:

Content Options

Code Snippets:

  1. Wrap code snippets in <pre> and <code> tags.
  2. Give the <code> block a class of the format "language-XXXX", where "XXXX" is your language choice.
  3. Gotcha: if using pug, remember to escape the contents of the code tag by including a trailing period: (code.language-html.) Alternately, just use HTML in the pug template.
  4. If you need syntax other than HTML, CSS, Ruby, or Javascript - you'll need to import it in the main index.js file.
  5. Documentation here: prismjs
<pre>
	<code class="language-html">
		...code goes here
	</code>
</pre>

Block Quotes

Use when you want to quote a separate source. Markup:

<div class="blockquote">
	<p class="blockquote__text">
		...Quoted Text Goes Here...
	</p>
	<p class="blockquote__attribution">
		...author, link, article, etc...
	</p>
</div>

Yields this:

A bank is a place that will lend you money if you can prove that you don’t need it.

Bob Hope; Popular Science, August 1975

Pull Quotes

Use when you want to emphasize a passage from the article you're writing.

<p class="pullquote">
	...text from your article...
</p>

Yields this:

Design today is more than styling or aesthetic or even the ever-dreaded 'problem solving.' Here, design can be seen simply as ideology made artifact.