Branding & Style Guide

Purpose

This guide is used to document, and serve as a reference of design initiatives on this website. A coherent user-centered experience is vital to the success of online projects, regardless of focus. This extends well beyond aesthetic concerns, and helps reinforce the ethos of clarity, open communication, and consistent wayfinding. This is extended through every aspect of the design, whether typography, tone of writing, color, or negative space. To further enhance the audience scope, accessibility is accounted for in the design, and structure, taking a ground-up approach—not added later.

GavinVaught.com is built using styled-components in addition to React to create component-based style elements. This front-end style guide documents the design components and their props, functions, and mixins used to build the site. As this is a living document, periodic updates will be made, as the project grows and advances.

How this styleguide differs from many others:

Beside the style guide-specific elements, such as the layout and organization of this guide, all styling and documentaiton contained within are actual code. Whenever there are changes and/or elements added, they will be automatically reflected in this guide.

Organization

  • Defaults: These are the default base styles applied to HTML elements using a styled-components Theme class.
  • Layouts: The layout styling for major parts of the page that are included with the theme.
  • Inputs: Form components are specialized design components that are applied to forms or form elements.
  • Blocks: Simple, reusable React components that can quickly be included into a document.
  • Colors and styled-components: Colors used throughout the site and the styled-component props, etc.

Each styled React component is styled using importing styled-components and creating a constant with the styled method that contains the CSS styles.

Notice

Since this is a living styleguide, some elements may be incomplete, due to the iterative nature of components. Changes appear on a periodic basis, as is noted by the version number and build date.