Portfolio Style Guide

index.html

<div class="container">
  <header class="header">Portfolio Style Guide</header>
  <article class="styles">
    <section class="block">
      <h2 class="block_header">Colors</h2>
      <hr class="block_rule" />
      <p>A collection of the different colors that will be used in the site.</p>
      <div class="color">
        <div class="color_item color_item-green"></div>
        <div class="color_item color_item-black"></div>
        <div class="color_item color_item-orange"></div>
        <div class="color_item color_item-tan"></div>
        <div class="color_item color_item-white"></div>
      </div>
    </section>
    <section class="block">
      <h2 class="block_header">Typeography</h2>
      <hr class="block_rule" />
      <p>A collection of the typographic rules that will be used in the site.</p>
      <h1 class="typography_main">Main Header</h1>
      <h2 class="typography_section">Section Header</h2>
      <h3 class="typography_blog">Blog Title</h3>
      <span class="typography_small">Small Type</span>
      <div class="typography_body">
        <p>
          This is the body test. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat nisl dignissim erat sagittis auctor. Donec sit amet purus sit amet ex molestie venenatis ac at nisl. Curabitur sagittis varius purus, quis rhoncus nibh laoreet ut. Proin et mi ligula. In libero quam, pellentesque at nisl bibendum, tempus facilisis ex. Phasellus ullamcorper dignissim nisl sed blandit. Nunc tempus tortor pharetra iaculis egestas. Fusce aliquet eros sed iaculis tincidunt. Cras condimentum pretium diam, id consequat metus commodo sed. Phasellus sit amet varius metus, ac convallis tortor. Suspendisse dapibus tincidunt ipsum, quis consequat risus pharetra vitae. Integer sit amet rutrum dui. Phasellus nec mauris rutrum, sagittis augue non, mollis dolor.
        </p>

        <p>
          Proin non ante eget sem facilisis blandit. Morbi mattis sodales dui nec elementum. Nam at scelerisque nisl. In hac habitasse platea dictumst. Nunc eleifend rhoncus lacus et auctor. Maecenas eget nulla in nulla dapibus faucibus. Maecenas eget massa et dolor elementum tristique non eget diam. Curabitur sed metus nec risus efficitur laoreet sit amet eget enim. Etiam aliquam gravida tellus, sit amet dictum libero suscipit eget. Phasellus vel accumsan mi.
        </p>
        <p>
          Sed ornare tincidunt metus eu efficitur. Pellentesque sit amet arcu sem. Fusce a massa lectus. Sed eu justo enim. Aenean sed dui tempor, auctor eros ac, laoreet sem. Suspendisse vel sem a nulla ornare gravida non non libero. Morbi placerat imperdiet iaculis. Morbi ut luctus arcu, vel fringilla est. Sed pharetra ut urna molestie maximus. Nam convallis orci sit amet ligula vehicula elementum. Donec lacinia ultrices metus ut sagittis.
        </p>
      </div>
    </section>
    <section class="block">
      <h2 class="block_header">Grids</h2>
      <hr class="block_rule" />
      <p>The site makes use of a grid system. These are some common patterns that may arise.</p>
      <div class="grid">
        <div class="grid_row">
          <div class="grid_col grid_col-12">12 columns</div>
        </div>
        <div class="grid_row">
          <div class="grid_col grid_col-9">9 columns</div>
          <div class="grid_col grid_col-3 grid_col-last">3 columns</div>
        </div>
        <div class="grid_row">
          <div class="grid_col grid_col-6">6 columns</div>
          <div class="grid_col grid_col-6 grid_col-last">6 columns</div>
        </div>
        <div class="grid_row">
          <div class="grid_col grid_col-3">3 columns</div><div class="grid_col grid_col-3">3 columns</div><div class="grid_col grid_col-3">3 columns</div>
          <div class="grid_col grid_col-3 grid_col-last">3 columns</div>
        </div>
      </div>
    </section>
    <section class="block">
      <h2 class="block_header">Blog List</h2>
      <hr class="block_rule" />
      <p>The site contains two "blogs": the projects and the blog. For now, content from each is styled in the same way, but projects may be styled differently later.</p>

      <div class="bloglist">
        <div class="bloglist_title">Blog Name</div>
        <hr class="bloglist_rule" />
        <ul class="bloglist_list">
          <li class="blog">
            <a class="blog_link" href="#">
              <h3 class="blog_title">Entry #1</h3>
              <p class="blog_meta">November 21, 2015</p>
            </a>
          </li>
          <li class="blog">
            <a class="blog_link" href="#">
              <h3 class="blog_title">Entry #2</h3>
              <p class="blog_meta">November 21, 2015</p>
            </a>
          </li>
          <li class="blog">
            <a class="blog_link" href="#">
              <h3 class="blog_title">Entry #3</h3>
              <p class="blog_meta">November 21, 2015</p>
            </a>
          </li>
          <li class="blog">
            <a class="blog_link" href="#">
              <h3 class="blog_title">Entry #4</h3>
              <p class="blog_meta">November 21, 2015</p>
            </a>
          </li>
        </ul>
      </div>
    </section>
  </article>
</div>

Portfolio Style Guide.markdown

Portfolio Style Guide

A Pen by B. Wilcox on CodePen.

License.

script.js

/**
 * this code came from this article: 
 * http://callmenick.com/post/animated-resizing-header-on-scroll
 * with minor alterations.
 */

function init() {
    window.addEventListener('scroll', function(e){
        var distanceY = window.pageYOffset || document.documentElement.scrollTop,
            shrinkOn = 50,
            header = document.querySelector(".header");
        if (distanceY > shrinkOn) {
          //console.log("shrink");
            //classie.add(header,"smaller");
          header.style.top = 0;
          header.classList.add("header-smaller");
        } else { header.classList.remove("header-smaller");
        }
    });
}
window.onload = init();

style.css

@import "susy";

/*
 * Grid:
 *
 * Define the Susy grid that will be used in
 * the site.
 */
$susy: (
  container: 1000px,
  columns: 12,
  global-box-sizing: border-box,
  gutter-position: after,
  debug: (
    image: show,
    output: overlay,
    toggle: top right
  )
);

/*
 * Colors: 
 * 
 * Describe the Colors that will be used
 * throughout the site.
 */
$colors: (
  black: #090700,
  green: #1B907F,
  tan: #FEFBF4,
  white: #FFFFFF,
  orange: #F1B60A,
);


/*
 * Typography: 
 * 
 * Describe the typography that will be used
 * in the site.
 */
//$base-size: 1.05rem;
$base-size: 1.2rem;
$main-header-size: $base-size * 2;
$section-header-size: $base-size * 1.5;
$blog-header-size: $base-size * 1.3;
$small-size: $base-size * .9;

$line-height: 1.7rem;
$paragraph-space: 1rem;

$font-stack: Arial, sans;
$header-font-stack: "Ubuntu", Arial, sans;

/**
 * line-height
 * calculate the line height to be given for a specific font size
 */
@function line-height($fontSize) {
  @return $fontSize * 1.5;
}


/**
 * Animations
 * Define animations that can be re-used throughout the site
 */

/**
 * on-hover
 * whenever the user hovers over a particular item, animate the property.
 * $property - the property that will be animated
 */
@mixin on-hover($property) {
  transition: #{$property} .15s ease;
}


// This will set some of the basic styling
* {
  font-family: $font-stack;
  font-size: $base-size;
  box-sizing: border-box;
  //line-height: $line-height;
}

h1, h2, h3, h4, h5, h6, span, p {
  margin-bottom: gutter();
}

// a wrapper that contains everything in the style
// guide and provides a context for the Susy grid
.container {
  @include container;
  
  font-family: $font-stack;
  font-size: $base-size;
  line-height: line-height($base-size);
}


// a holder for all of the styles. It exists within
// the container and adjacent to the header
.styles {
  @include span(12);
  margin-top: 16rem; 
  padding: 1rem;
}


// This is the header that holds the name of the
// style guide
.header {
  @extend .grid_col-12;
  @include on-hover(all);
  
  background-color: map-get($colors, white);
  padding: 4rem 1rem;
  font-size: $main-header-size * 2;
  font-family: $header-font-stack;
  line-height: line-height($main-header-size * 2);
  position: fixed;
  
  // when the user scrolls down, the header shrinks
  // by adding this class.
  &-smaller {
    padding: 1rem;
    font-size: $main-header-size;
    line-height: line-height($main-header-size);
  }
}


// a generic block that holds a section of the style 
// guide. No matter what, it always contains a header
// and a horizontal rule. Additional content can be
// added
.block {
  @extend .grid_col-12;
  //padding: 1rem;
  
  &_header {
    font-family: $header-font-stack;
    font-size: $section-header-size;
    line-height: line-height($section-header-size);
  }
  
  &_rule {
    border: 1px solid map-get($colors, black);
  }
}


// a class that is used to show all of the typography
// that will be used in the site.
.typography {
  &_main {
    font-family: $header-font-stack;
    font-size: $main-header-size;
    line-height: line-height($main-header-size);
    font-family: $header-font-stack;
  }  
  &_section {
    font-family: $header-font-stack;
    font-size: $section-header-size;
    line-height: line-height($section-header-size);
    font-family: $header-font-stack;
  }
  &_body {
    font-size: $base-size;
    line-height: line-height($base-size);
  }
  &_blog {
    font-family: $header-font-stack;
    font-size: $blog-header-size;
    line-height: line-height($blog-header-size);
    font-weight: bold;
  }
  &_small {
    font-size: $small-size;
    line-height: line-height($small-size);
    font-style: italic;
  }
}


// a class that displays all of the colors that will
// be used in the site.
.color {
  //@include span(4);
  @extend .grid_col-6;
  //border-bottom: 5px solid map-get($colors, black);
  
  &_item {
    height: 50px;
    @include on-hover(all);   
    &:hover {
      margin-left: 10px;
    }
    
    // create a class to display each color
    @each $color, $code in $colors {
      &-#{$color} {
        background-color: $code;
        color: map-get($colors, black);
        &:hover:after {
          content: "#{$code}";
        }
      }
    }
    
  }
}

.bloglist {
  @include span(6);
  
  &_rule {
    border-top: 0;
    border-bottom: 1px solid map-get($colors, black);  
    border: 1px solid map-get($colors, black);  
  }
  
  &_title {
    font-size: $section_header_size;
    font-family: $header-font-stack;
  }
}

.blog {
  //padding-top: 1rem;
  padding-left: .5rem;
  margin-bottom: gutter();
  //margin-bottom: .5rem;
  @include on-hover(border-left);
  //border-bottom: 1px solid map-get($colors, black);
  
  &_link {
    text-decoration: none;
    color: map-get($colors, black);
  }
  
  &_title {
    font-family: $header-font-stack;
    font-size: $blog-header-size;
    line-height: line-height($blog-header-size);
    font-weight: bold;
    margin-bottom: gutter() * .5;
  }
  
  &_meta {
    font-size: $small-size;
    font-style: italic;
  }
  
  &:hover {
    border-left: 10px solid map-get($colors, orange);
  }
}


// This class will be used to define common grid block
// sizes that will be used throughout the site.
.grid {
  
  &_row {
    @include span(12);
    margin-bottom: gutter();
  }
  
  &_col {
    @include on-hover(background-color);
    height: 50px;
    background-color: map-get($colors, green);
    
    // create a grid column of every length
    @for $i from 1 through susy-get(columns, $susy) {
      &-#{$i} {
        @include span($i);
      }
    }
    
    &-last {
      @include span(last);
    }
    
    &:hover {
     background-color: map-get($colors, orange); 
    }
  }
}