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>
|
Arrow links
<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>
|
CTA links
<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>
|
Inline links
|
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
|
<ul>
<li>Drupal CMS</li>
<li>Architecture</li>
<li>Software & Databases</li>
<li>Data Migration</li>
</ul>
|
|---|---|
|
<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>