Typography

Blockquote

Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

<blockquote>
  <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh
  onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
</blockquote>

Code

Code block

We're using Rouge for syntax highlighting and our own color scheme based on a sass port of the Solarized theme. See the Colors tab for more info.


// Uses Sass compiler to process styles, adds vendor prefixes, minifies, then
// outputs file to the appropriate location.
gulp.task('build:styles:main', function() {
  return sass(paths.sassFiles + '/main.scss', {
    style: 'compressed',
    trace: true,
    loadPath: [paths.sassFiles]
  }).pipe(postcss([ autoprefixer({ browsers: ['last 2 versions'] }) ]))
    .pipe(cleancss())
    .pipe(gulp.dest(paths.jekyllCssFiles))
    .pipe(gulp.dest(paths.siteCssFiles))
    .pipe(browserSync.stream())
    .on('error', gutil.log);
});
<div class="highlighter-rouge"><pre class="highlight"><code>
<span class="c1">// Uses Sass compiler to process styles, adds vendor prefixes, minifies, then</span>
<span class="c1">// outputs file to the appropriate location.</span>
<span class="nx">gulp</span><span class="p">.</span><span class="nx">task</span><span class="p">(</span><span class="s1">'build:styles:main'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
  <span class="k">return</span> <span class="nx">sass</span><span class="p">(</span><span class="nx">paths</span><span class="p">.</span><span class="nx">sassFiles</span> <span class="o">+</span> <span class="s1">'/main.scss'</span><span class="p">,</span> <span class="p">{</span>
    <span class="na">style</span><span class="p">:</span> <span class="s1">'compressed'</span><span class="p">,</span>
    <span class="na">trace</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
    <span class="na">loadPath</span><span class="p">:</span> <span class="p">[</span><span class="nx">paths</span><span class="p">.</span><span class="nx">sassFiles</span><span class="p">]</span>
  <span class="p">}).</span><span class="nx">pipe</span><span class="p">(</span><span class="nx">postcss</span><span class="p">([</span> <span class="nx">autoprefixer</span><span class="p">({</span> <span class="na">browsers</span><span class="p">:</span> <span class="p">[</span><span class="s1">'last 2 versions'</span><span class="p">]</span> <span class="p">})</span> <span class="p">]))</span>
    <span class="p">.</span><span class="nx">pipe</span><span class="p">(</span><span class="nx">cleancss</span><span class="p">())</span>
    <span class="p">.</span><span class="nx">pipe</span><span class="p">(</span><span class="nx">gulp</span><span class="p">.</span><span class="nx">dest</span><span class="p">(</span><span class="nx">paths</span><span class="p">.</span><span class="nx">jekyllCssFiles</span><span class="p">))</span>
    <span class="p">.</span><span class="nx">pipe</span><span class="p">(</span><span class="nx">gulp</span><span class="p">.</span><span class="nx">dest</span><span class="p">(</span><span class="nx">paths</span><span class="p">.</span><span class="nx">siteCssFiles</span><span class="p">))</span>
    <span class="p">.</span><span class="nx">pipe</span><span class="p">(</span><span class="nx">browserSync</span><span class="p">.</span><span class="nx">stream</span><span class="p">())</span>
    <span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">'error'</span><span class="p">,</span> <span class="nx">gutil</span><span class="p">.</span><span class="nx">log</span><span class="p">);</span>
<span class="p">});</span>
</code></pre></div>

Inline code

What happens when mysql finishes importing the SQL dump file? The database contents (often) live in /var/lib/mysql/{database}, so for example for the block_content table mentioned above, assuming you’re using the typically preferred InnoDB storage engine, there are two files called block_content.frm and block_content.ibd in /var/lib/mysql/{database}/. The /var/lib/mysql directory will also contain a number of other directories and files related to the configuration of the MySQL server.

<p>What happens when <code class="highlighter-rouge">mysql</code> finishes
importing the SQL dump file? The database contents (<em>often</em>) live in
<code class="highlighter-rouge">/var/lib/mysql/{database}</code>, so for
example for the <code class="highlighter-rouge">block_content</code> table
mentioned above, assuming you’re using the typically preferred InnoDB
storage engine, there are two files called
<code class="highlighter-rouge">block_content.frm</code> and
<code class="highlighter-rouge">block_content.ibd</code> in
<code class="highlighter-rouge">/var/lib/mysql/{database}/</code>. The
<code class="highlighter-rouge">/var/lib/mysql</code> directory will also
contain a number of other directories and files related to the configuration of
the MySQL server.</p>

Headings

Heading sizes

Heading sizes are based on a major third scale on medium and large screens and a minor third scale on small screens.

Heading Level 1

<h1>Heading Level 1</h1>

Heading Level 2

<h2>Heading Level 2</h2>

Heading Level 3

<h3>Heading Level 3</h3>

Heading Level 4

<h4>Heading Level 4</h4>

Other heading styles

Bold Heading

<h1 class="heading--bold">Bold Heading</h1>

Sans Serif Heading

<h1 class="heading--sans-serif">Sans Serif Heading</h2>

Underlined headings

Use the heading--underline class for left-aligned headings and heading--underline--right for right-aligned headings. The default color is teal, but you can append --orange, --magenta, or --eggshell to the end of the class to change the color.

Heading Level 2

<h2 class="heading--underline">Heading Level 2</h2>

Heading Level 2

<h2 class="heading--underline--right">Heading Level 2</h2>

Heading Level 2

<h2 class="heading--underline--magenta">Heading Level 2</h2>

Heading Level 2

<h2 class="heading--underline--right--orange c-orange">Heading Level 2</h2>

Horizontal Rule


<hr>

Intro paragraph

Our Clients and Partners

Some of the amazing companies and organizations we've had the pleasure of working with

<div class="intro-paragraph">
  <h2>Our Clients and Partners</h2>
  <p class="paragraph--loud--responsive">Some of the amazing companies and organizations we've had the pleasure of working with</p>
</div>

Links

<div class="styleguide-wrapper">
  <a href="#">Normal link</a>
</div>
<div class="styleguide-wrapper bg-teal">
  <a href="#" class="link--light">Light link</a>
</div>
<div class="styleguide-wrapper">
  <a href="#" class="link--arrow">View all posts</a>
</div>
<div class="styleguide-wrapper bg-teal">
  <a href="#" class="link--arrow link--light">Our core values</a>
</div>
<div class="styleguide-wrapper styleguide-center">
  <a href="#" class="link--cta">Read more</a>
<div>
<div class="styleguide-wrapper styleguide-center bg-orange">
  <a href="#" class="link--cta link--cta--inverse">Read more</a>
</div>

This is an inline link. Its color makes it stand out, and we include an underline transition on hover.

<p>This is an <a href="#">inline link</a>. Its color makes it stand out, and we
include an underline transition on hover.</p>

Lists

  • Drupal CMS
  • Architecture
  • Software & Databases
  • Data Migration
<ul>
  <li>Drupal CMS</li>
  <li>Architecture</li>
  <li>Software & Databases</li>
  <li>Data Migration</li>
</ul>
  1. E-Commerce
  2. Performance Optimization
  3. Automated Testing
  4. Security
<ol>
  <li>E-Commerce</li>
  <li>Performance Optimization</li>
  <li>Automated Testing</li>
  <li>Security</li>
</ol>

Bordered lists

  • Drupal CMS
  • Architecture
  • Software & Databases
  • Data Migration
  • E-Commerce
  • Performance Optimization
  • Automated Testing
  • Security
<div class="list--bordered">
  <ul>
    <li>Drupal CMS</li>
    <li>Architecture</li>
    <li>Software & Databases</li>
    <li>Data Migration</li>
  </ul>
  <ul>
    <li>E-Commerce</li>
    <li>Performance Optimization</li>
    <li>Automated Testing</li>
    <li>Security</li>
  </ul>
</div>

Paragraphs

Use classes .paragraph--loud and .paragraph--louder for larger text.

This is an example paragraph, written just for this style guide! There is bold text and italic text too. This is a normal paragraph, with the font size set at 1em. Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

Here's another paragraph. Note the margin-bottom that separates each paragraph. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

This is a loud paragraph. Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale.

This is a louder paragraph. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.

<p>This is an example paragraph, written just for this style guide! There is
<strong>bold text</strong> and <em>italic text too.</em> This is a normal
paragraph, with the font size set at 1em. Veggies es bonus vobis, proinde vos
postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon
azuki bean garlic.</p>

<p>Here's another paragraph. Note the margin-bottom that separates each
paragraph. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot
courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame
tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>

<p class="paragraph--loud">This is a loud paragraph. Turnip greens yarrow
ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach
avocado daikon napa cabbage asparagus winter purslane kale.</p>

<p class="paragraph--louder">This is a louder paragraph. Lotus root water
spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin
onion chickpea gram corn pea.</p>