Pattern Library

Welcome to the pattern library for Creative Anchor, the web design and development portfolio of Pralie Dutzel. This page acts as a cohesive style guide, with reusable patterns that appear throughout the main site.

Typography

Two fonts are used on Creative Anchor: Lato and Open Sans. Lato 300 is the most commonly used, while Open Sans is used exclusively for headlines.

Heading 1

Heading 2

Heading 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Color Palette

The colors for Creative Anchor were inspired by the nautical theme, where blue and red tend to be the primary colors. The cyan is a variation from the one that appeared on the original site, while the red complements it.

  • $cyan
    #6ddce5

  • $red
    #f26a6c

  • $dk-grey
    #232429

  • $lt-grey
    #f9f9f9

Icons

Iconography is used to display the category the article was posted in, as well as my skill set, the social icons, and the icons seen in the header.

Skill Set & Category Icons

  • Web Design
  • Front-End Dev
  • Responsive Design
  • UI/UX Design
  • WordPress
  • Sass
  • jQuery
  • Gulp

Social Icons

Buttons

There are only two types of buttons used on Creative Anchor: primary buttons and pagination buttons.

Primary Buttons

This style of button is used on links that act as call to action buttons, as well as submit buttons for forms. Submit buttons do not have the same hover effects as link buttons in order to keep the markup clean.

Link Button

Pagination Buttons

This style of button is displayed at the end of project detail and article pages. They are styled similarly to the cards, although they will only appear in groups of three for desktop or two for mobile.

Forms

Form fields should always include a label and an in-focus style. Submit buttons are primary buttons floated to the right.

Cards

Cards are used to spice up what would otherwise be a basic list. There are two types of cards: one for projects and one for articles. All cards are 320px by 320px at their largest size, and are arranged in rows of two scaling up to four.

Project Cards

Cards used to list projects contain imagery of the project and the title. The title is only visible on hover.

Article Cards

Cards used to list articles contain the title and category icon. The hover state fills in the category icon and reveals an underline along the bottom of the card.

  • Lorem Ipsum

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • Lorem Ipsum

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Layout

The layout for Creative Anchor is comprised of several different patterns that dictate the grid system, the header and navigation, the footer, and hero areas.

Grid System

The grid system utilizes floats unless the browser supports flexbox. In most cases, either the single or two column layouts are used. The maximum width of the single column layout is restricted to improve readability.

Single Column
Two Column
Two Column
Four Column
Four Column
Four Column
Four Column

Header & Navigation

The header features the anchor icon on the left and the navigation on the right. For mobile, the navigation is moved to an off-screen menu and a hamburger is added.

Footer

The footer features social links, copyright info, and links to the pattern library and credits.

Hero Area

The hero area features a solid dark grey background along with the page title. If the page has a featured image, it will appear with a slight transparency.