These are all the elements, values, pieces, and bits of clockwork that make up this site. Styleguide's are real popular now, so I wanted to put a miniature one here. These breaks down the global variables and common elements, what their purpose is, and any parameters needed to use them properly.

Color Palettes

The colors giving this site vibrant, visual life.

Primary colors

This sets the overall tone for the whole site, as it's used the most frequently and on the most prominent elements. Choose it wisely, and keep whatever psychological effects it has in mind. Since this is a site for a web developer who wants to give an impression of intelligence, obviously blue is a good choice.

lighter
light
base
dark
darker

Secondary colors

The secondary color should be slightly similar to the primary, but still have a mild contrast. It's used around primary colors in different circumstances, so there's more flexibility in what color's used.

lighter
light
base
dark
darker

Action colors

This color denotes elements that should be clicked or acted upon in another way. To make sure they stand out, aim for one that compliments the primary color.

lighter
light
base
dark
darker

Mono colors

All black, white, and gray colors used for core things like typography, certain backgrounds, and other important yet less sexy elements.

blank
light
base
dark
darkest

Spacing Units

Simple units of measurement used for spacing, alignment, and other stuff.

quart
third
half
base
double
triple
quad

Container Styles

Common styles for different blocks and containers.

Border-radius
Box-shadow


Pattern List

A list of all this site's patterns, their uses, demos, and the code that references them.

Blog item

These are for collections of different blog posts gathered together. It uses flexbox to keep the text on the top and bottom of the element, and lazyload to conditionally load the background image. Using them one after the other makes them alternate between light and dark styles.

Parameter Description
classes

Any extra classes in addition to the container class.

title

Post title, sized like an h3.

excerpt

Post excerpt, sized like a paragraph tag. Preferrably kept around 20-25 words at most.

url

The URL the blog item links to.

ext_url

Boolean value if the link should open in a new tab.

bg_img

(optional) any extra class

{% include components/blog_item.html
  classes = ""
  title = 'Post Title'
  excerpt = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, nisi et dolore expedita praesentium voluptate doloremque! Eligendi quasi aspernatur esse facilis cumque, velit necessitatibus.'
  url = 'javascript:void(0)'
  bg_img = '/img/posts/newhaven-io/bg.jpg'
%}
<div class="ma-c-blogItem__container ">
  <a class="ma-c-blogItem" href="javascript:void(0);" >
      
    <span class="ma-c-blogItem__title">
      Post Title
    </span>
    <span class="ma-c-blogItem__date">
      Date Here!
    </span>

    <div class="ma-c-blogItem__descr">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, nisi et dolore expedita praesentium voluptate doloremque! Eligendi quasi aspernatur esse facilis cumque, velit necessitatibus.
      </p>
    </div>
  </a>
</div>










<div class="ma-c-blogItem__container ">
  <a class="ma-c-blogItem" href="javascript:void(0);" >
      
    <span class="ma-c-blogItem__title">
      Post Title
    </span>
    <span class="ma-c-blogItem__date">
      Date Here!
    </span>

    <div class="ma-c-blogItem__descr">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, nisi et dolore expedita praesentium voluptate doloremque! Eligendi quasi aspernatur esse facilis cumque, velit necessitatibus.
      </p>
    </div>
  </a>
</div>
Open in fullscreen

Header

Header for all pages, static ones and blog posts. The background image helps add a visual touch to each title without taking up too much extra space. If a background image isn’t specified, this default image is used.

Parameter Description
title

Page title. Each page has one. No exception.

tagline

The tagline to explain more about the page in brief. Also all pages have one.

bg_img

A page-specific background image, otherwise this default’s used.

{% include components/header.html %}
<header role="banner" class="ma-c-header" >
  <div class="ma-c-header__container">
    <h2 class="ma-c-header__title">
      Page title here
    </h2>

    
      <h6 class="ma-c-header__tagline">
        Page tagline here
      </h6>
    

    
  </div>
</header>
Open in fullscreen

Nav link

These are links on the side that go to various pages. They’re meant to go over a dark background and need to be paired with icons.

Parameter Description
class

Any extra classes, such as ma-n-navLink--active.

link

What the nav item links to.

label

What the nav item reads.

icon

Class for the nav item icon. Class referencing needs to start with ‘icon-menu-‘.

{% include components/nav_link.html %}
<a href="javascript:void(0);" class="ma-n-navLink ">
  Nav Link Label

  <i class="ma-n-navLink__icon icon-menu-about"></i>
</a>
Open in fullscreen

Portfolio item

This component is meant to show off different portfolio pieces in a slightly flashy way. It’s meant to give the title and image by default, which are the most important bits of info, and reveal more details with a slight animation on hover. Their height is set at 330px each, so they’re best laid out with Flexbox or another flexible one-dimensional layout scheme.

Parameter Description
name

Name of the item displayed.

link

External link to the item in question.

highlight

A boolean value of whether this item is more notable than the others, and should be visually highlighted.

description

A longer description of the item that appears on hover.

bg_img

The item’s image shown that also animates slightly on hover.

{% include components/portfolio_item.html %}
 




<a class="ma-c-portfolioItem ma-l-portfolio__item " href="javascript:void(0);" target="_blank">
  <div class="ma-c-portfolioItem__img" data-lazyload data-original="/img/portfolio/hover-portfolio.png" style="background-image: url('/img/pages/lazyload-placeholder.jpg');"></div>
  <div class="ma-c-portfolioItem__title">
    <h4>
      Item name!
    </h4>
  </div>
  <div class="ma-c-portfolioItem__descr">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore officia voluptatibus repellendus libero quam maiores maxime amet ea quae sint ex, magnam vel quibusdam adipisci assumenda harum temporibus facilis reiciendis.
    </p>
  </div>
</a>
Open in fullscreen

Resume item

This is an entry in my resume page that gives the basics of each job, position, or internship I’ve held before. It’s meant to get the basic info you’d see on a LinkedIn profile, but in a format that won’t obscure the style with tears of boredom.

Parameter Description
title

Official title held at company.

icon

Icon representing the company or role.

company

Name of the company.

start

Start time at company.

end

End time at company.

description

Your duties, responsibilities, and other assorted tasks such as feeding the ogres in the basement, that the job required.

{% include components/resume_item.html %}
<div class="ma-c-resume__item">

  <div class="ma-c-resume__header">
    <i class="ma-c-resume__icon icon-wrench"></i>

    <div class="ma-c-resume__headerInfo">
      <h4 class="ma-c-resume__title">
        Job Title
      </h4>

      <span class="ma-c-resume__meta">
        At <strong>Company</strong> from Start Time to End Time
      </span>
    </div>
  </div>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate obcaecati perspiciatis debitis animi ratione optio tenetur excepturi, laboriosam rerum, totam eum cum. Fugit explicabo ducimus est vel ratione. Atque, quas.
  </p>
</div>
Open in fullscreen

Social icon

This links to a social networking profile. Meant to be used on a dark background.

Parameter Description
url

URL to the social icon in question

icon

Part of the icon class identifying which icon is being used.

{% include components/social_icon.html %}
<a class="ma-cp-socialIcon" href="javascript:void(0);" target="_blank">
  <i class="icon-twitter"></i>
</a>
Open in fullscreen

Wisdom

This is some interesting knowledge or food for thought displayed throughout the site. The content is added randomly through JavaScript, although there is some by default for non-supportive browsers. Meant to be used on a dark background.

Parameter Description
content

The piece of wisdom or question to share with the audience.

{% include components/wisdom.html %}
<div class="ma-c-wisdom">
  A person's main task in life is to give birth to themselves.
</div>
Open in fullscreen