Jared Pendergraft

Typographic Elements


<hl>

Headline 1

<h2>

Headline 2

<h3>

Headline 3

<h4>

Headline 4

<h5>

Headline 5

<p>

Aenean lacinia bibendum nulla sed consectetur. Nullam I’d dolor I’d nibh ultricies vehicula ut I’d elit. An inline link, HTML & CSS Ligatures anyone? official flourishing figurines. Dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod.


Lists


<ul>

<ol>

  1. Ordered item 1
  2. Ordered item 2
  3. Ordered item 3

Code Samples


Let’s add .this and .that to our <h1> tag.

.this { font-size: 4.5rem; }
.that { color: $super-sweet; }
<h1 class="this">Oh <span class="that">Yeah</span></h1>
// Lazy Loading
$(document).ready(function() {
  $('.lazy').unveil(24,function() {
    $(this).load(function() { $(this).addClass('lazy--loaded'); } );
  });
});

Colors


.color__bg--base .color__bg--base-dark .color__bg--base-75 .color__bg--base-62 .color__bg--base-50 .color__bg--base-38 .color__bg--base-25 .color__bg--base-12 .color__bg--base-5

.color__bg--highlight .color__bg--highlight-dark .color__bg--highlight-75 .color__bg--highlight-62 .color__bg--highlight-50 .color__bg--highlight-38 .color__bg--highlight-25 .color__bg--highlight-12 .color__bg--highlight-5