w8mngr | styleguide

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget justo nec orci suscipit finibus eu non felis. Nullam molestie nunc in egestas blandit. Mauris semper ipsum ac neque tristique, sit amet tincidunt est pretium. Suspendisse sit amet urna non est aliquam tempus consequat at metus. Nulla eleifend purus at ligula malesuada bibendum. Nullam sed nisl eros. Aliquam condimentum blandit ante, et dapibus lectus interdum non. Aliquam et leo ut leo pulvinar suscipit. Proin malesuada mi sit amet ante pulvinar, non rhoncus nulla fermentum. Integer euismod magna dolor, sit amet aliquet tellus pellentesque ut.

Nulla facilisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean auctor bibendum sagittis. Proin luctus enim eu est iaculis, ac ultricies turpis posuere. Nullam fringilla tincidunt dui at consequat. Vivamus viverra augue tempor sapien hendrerit, id gravida urna mollis. Pellentesque nulla lacus, pretium eget lacinia a, ultrices non dolor. Cras sapien eros, fermentum quis neque a, varius tempus eros. Praesent ac varius orci.

Pellentesque eu massa convallis, porta urna vestibulum, sollicitudin purus. Donec non feugiat tellus, vitae pellentesque urna. Aliquam eu hendrerit ante, pretium molestie augue. Etiam odio massa, aliquam et neque eu, hendrerit convallis arcu. Vivamus eget ullamcorper neque. Vestibulum fermentum diam ut scelerisque lacinia. Vestibulum gravida urna quis lectus luctus vestibulum.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget justo nec orci suscipit finibus eu non felis. Nullam molestie nunc in egestas blandit. Mauris semper ipsum ac neque tristique, sit amet tincidunt est pretium. Suspendisse sit amet urna non est aliquam tempus consequat at metus. Nulla eleifend purus at ligula malesuada bibendum. Nullam sed nisl eros. Aliquam condimentum blandit ante, et dapibus lectus interdum non. Aliquam et leo ut leo pulvinar suscipit. Proin malesuada mi sit amet ante pulvinar, non rhoncus nulla fermentum. Integer euismod magna dolor, sit amet aliquet tellus pellentesque ut.</p>

<blockquote>Nulla facilisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean auctor bibendum sagittis. Proin luctus enim eu est iaculis, ac ultricies turpis posuere. Nullam fringilla tincidunt dui at consequat. Vivamus viverra augue tempor sapien hendrerit, id gravida urna mollis. Pellentesque nulla lacus, pretium eget lacinia a, ultrices non dolor. Cras sapien eros, fermentum quis neque a, varius tempus eros. Praesent ac varius orci.</blockquote>

<p>Pellentesque eu massa convallis, porta urna vestibulum, sollicitudin purus. Donec non feugiat tellus, vitae pellentesque urna. Aliquam eu hendrerit ante, pretium molestie augue. Etiam odio massa, aliquam et neque eu, hendrerit convallis arcu. Vivamus eget ullamcorper neque. Vestibulum fermentum diam ut scelerisque lacinia. Vestibulum gravida urna quis lectus luctus vestibulum.</p>

Headers

Standard H1

Icon Header

Standard H2

Icon Header 2

Standard H3

Icon Header 3

Standard H4

Icon Header 4

Standard H5
Standard H6
<h1>Standard H1</h1>

<h1><i class="fa fa-cloud-download" aria-hidden="true"></i> Icon Header</h1>

<h2>Standard H2</h2>

<h2><i class="fa fa-cloud-download" aria-hidden="true"></i> Icon Header 2</h2>

<h3>Standard H3</h3>

<h3><i class="fa fa-cloud-download" aria-hidden="true"></i> Icon Header 3</h3>

<h4>Standard H4</h4>

<h4><i class="fa fa-cloud-download" aria-hidden="true"></i> Icon Header 4</h4>

<h5>Standard H5</h5>

<h6>Standard H6</h6>

Hiding if User doesn't have Javascript

This is not shown if the user doesn't have Javascript enabled.

But this still does!

<p class="hide-if-no-js">This is not shown if the user doesn't have Javascript enabled.</p>
<p>But this still does!</p>

Horizontal Rules

Here's a section

Pellentesque eu massa convallis, porta urna vestibulum, sollicitudin purus. Donec non feugiat tellus, vitae pellentesque urna. Aliquam eu hendrerit ante, pretium molestie augue. Etiam odio massa, aliquam et neque eu, hendrerit convallis arcu. Vivamus eget ullamcorper neque. Vestibulum fermentum diam ut scelerisque lacinia. Vestibulum gravida urna quis lectus luctus vestibulum.


And Another

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget justo nec orci suscipit finibus eu non felis. Nullam molestie nunc in egestas blandit. Mauris semper ipsum ac neque tristique, sit amet tincidunt est pretium. Suspendisse sit amet urna non est aliquam tempus consequat at metus. Nulla eleifend purus at ligula malesuada bibendum. Nullam sed nisl eros. Aliquam condimentum blandit ante, et dapibus lectus interdum non. Aliquam et leo ut leo pulvinar suscipit. Proin malesuada mi sit amet ante pulvinar, non rhoncus nulla fermentum. Integer euismod magna dolor, sit amet aliquet tellus pellentesque ut.

<h3>Here's a section</h3>
<p>Pellentesque eu massa convallis, porta urna vestibulum, sollicitudin purus. Donec non feugiat tellus, vitae pellentesque urna. Aliquam eu hendrerit ante, pretium molestie augue. Etiam odio massa, aliquam et neque eu, hendrerit convallis arcu. Vivamus eget ullamcorper neque. Vestibulum fermentum diam ut scelerisque lacinia. Vestibulum gravida urna quis lectus luctus vestibulum.</p>
<hr>
<h3>And Another</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget justo nec orci suscipit finibus eu non felis. Nullam molestie nunc in egestas blandit. Mauris semper ipsum ac neque tristique, sit amet tincidunt est pretium. Suspendisse sit amet urna non est aliquam tempus consequat at metus. Nulla eleifend purus at ligula malesuada bibendum. Nullam sed nisl eros. Aliquam condimentum blandit ante, et dapibus lectus interdum non. Aliquam et leo ut leo pulvinar suscipit. Proin malesuada mi sit amet ante pulvinar, non rhoncus nulla fermentum. Integer euismod magna dolor, sit amet aliquet tellus pellentesque ut.</p>

Info Text

Small text that the user might need to know, but isn't super critical.

<p class="info-text">Small text that the user might need to know, but isn't super critical.</p>

Links

Don't forget to set verbose title tags if the link's location isn't obvious from context!

This is a link, this is not.
<a href="#" title="This takes you to the top of the page...">This is a link</a>, this is not.

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget justo nec orci suscipit finibus eu non felis. Nullam molestie nunc in egestas blandit. Mauris semper ipsum ac neque tristique, sit amet tincidunt est pretium. Suspendisse sit amet urna non est aliquam tempus consequat at metus. Nulla eleifend purus at ligula malesuada bibendum. Nullam sed nisl eros. Aliquam condimentum blandit ante, et dapibus lectus interdum non. Aliquam et leo ut leo pulvinar suscipit. Proin malesuada mi sit amet ante pulvinar, non rhoncus nulla fermentum. Integer euismod magna dolor, sit amet aliquet tellus pellentesque ut.

Nulla facilisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean auctor bibendum sagittis. Proin luctus enim eu est iaculis, ac ultricies turpis posuere. Nullam fringilla tincidunt dui at consequat. Vivamus viverra augue tempor sapien hendrerit, id gravida urna mollis. Pellentesque nulla lacus, pretium eget lacinia a, ultrices non dolor. Cras sapien eros, fermentum quis neque a, varius tempus eros. Praesent ac varius orci.

Pellentesque eu massa convallis, porta urna vestibulum, sollicitudin purus. Donec non feugiat tellus, vitae pellentesque urna. Aliquam eu hendrerit ante, pretium molestie augue. Etiam odio massa, aliquam et neque eu, hendrerit convallis arcu. Vivamus eget ullamcorper neque. Vestibulum fermentum diam ut scelerisque lacinia. Vestibulum gravida urna quis lectus luctus vestibulum.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget justo nec orci suscipit finibus eu non felis. Nullam molestie nunc in egestas blandit. Mauris semper ipsum ac neque tristique, sit amet tincidunt est pretium. Suspendisse sit amet urna non est aliquam tempus consequat at metus. Nulla eleifend purus at ligula malesuada bibendum. Nullam sed nisl eros. Aliquam condimentum blandit ante, et dapibus lectus interdum non. Aliquam et leo ut leo pulvinar suscipit. Proin malesuada mi sit amet ante pulvinar, non rhoncus nulla fermentum. Integer euismod magna dolor, sit amet aliquet tellus pellentesque ut.</p>

<p>Nulla facilisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean auctor bibendum sagittis. Proin luctus enim eu est iaculis, ac ultricies turpis posuere. Nullam fringilla tincidunt dui at consequat. Vivamus viverra augue tempor sapien hendrerit, id gravida urna mollis. Pellentesque nulla lacus, pretium eget lacinia a, ultrices non dolor. Cras sapien eros, fermentum quis neque a, varius tempus eros. Praesent ac varius orci.</p>

<p>Pellentesque eu massa convallis, porta urna vestibulum, sollicitudin purus. Donec non feugiat tellus, vitae pellentesque urna. Aliquam eu hendrerit ante, pretium molestie augue. Etiam odio massa, aliquam et neque eu, hendrerit convallis arcu. Vivamus eget ullamcorper neque. Vestibulum fermentum diam ut scelerisque lacinia. Vestibulum gravida urna quis lectus luctus vestibulum.</p>

Screen Reader Text

Basic screen reader text for more verbose links and messages on screen readers but the context is clear for the non-visually impaired. If you're using SCSS, you can add these styles to other styles via the mixin screenReaderText(); To remove screen reader text, just use the mixin deScreenReaderText();.

Don't forget to include a verbose link title, as well, for screen readers.

<a class="btn" href="#" title="Download your weight data">
    <i class="fa fa-cloud-download" aria-hidden="true"></i>
    Download <span class="screen-reader-text">Your Weight Data</span>
</a>

Strong and Emphasis (bold and italics)

Use em and strong, not b or i.

Use strong and emphasis tags.
Use <strong>strong</strong> and <em>emphasis</em> tags.