Style Guide

Base Layout & Style Guide

Color Scheme

"Did you know there are over 144 CSS colors? All of the colors I chose are referenced directly by name — no hex codes needed."

Typography

Alegreya Small Caps

Aa
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*(){}[]
**the ampersand is Oleo Script SC via this font hack

Open Sans

Aa
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*(){}[]

Codes

I'm using prettify.js for syntax highlighting!

window.PROOF || (PROOF = {}); //define a namespace (only ONCE) -- I used PROOF for Proofessor
(function($, window, document, undefined) {
  var _common = PROOF.common = { //this is your js object
    init: function() {
    this.setVars();
    this.bindEvents();
  },
  setVars: function() {
    // set all variables here
    this.helloString = "hello" ; // also _common.helloString
  },
  bindEvents: function() {
    // set event listeners for your functions here
  },
  // the rest of your functions go here
  _common.init(); // don't forget to init!
})(jQuery, window, document);

A Cool Title Here

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex esse reiciendis eos non perspiciatis magnam beatae ipsa sequi pariatur soluta. Ad, autem nemo earum cumque deserunt excepturi modi architecto omnis. Alias, incidunt, ex, vel totam placeat praesentium hic voluptatem et voluptatum dolores quo sed vitae mollitia This is a Link! consequuntur molestiae odio ipsa!

"Omygosh this is a really interesting block quote that I'm using to emphasize a point or something of that nature."
placeholder placeholder
Here is another block quote! It's 3:01 AM on a Saturday... I think its time for bed.
placeholder placeholder
right aligned image right aligned image

A Cool Title That Wraps

This section is within a class called "row". A block of codes . Ad, autem nemo earum cumque deserunt excepturi modi architecto omnis. Alias, incidunt, ex, vel totam placeat praesentium hic voluptatem et voluptatum dolores quo sed vitae mollitia Link Time! consequuntur molestiae odio ipsa!

I call this a "pull link"

left aligned image

This is Another Title

You need to clear the max-width when you have elements on the right!. Ad, autem nemo earum cumque deserunt excepturi modi architecto omnis. Alias, incidunt, ex, vel totam placeat praesentium hic voluptatem et voluptatum dolores quo sed vitae mollitia Hi Link! consequuntur molestiae odio ipsa!

Last Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex esse reiciendis eos non perspiciatis magnam beatae ipsa sequi pariatur soluta. Ad, autem nemo earum cumque deserunt excepturi modi architecto omnis. Alias, incidunt, ex, vel totam placeat praesentium hic voluptatem et voluptatum dolores quo sed vitae mollitia Hi Link! consequuntur molestiae odio ipsa!

placeholder
"FUN FACT: This is a blockquote with a class of 'center' & 'push' applied to it."