Style Guide

About the Style Guide

Style guides require compliance and conformity; in return they provide stability and cohesion. A style guide and code standards document is a way of ensuring brand and code consistency. By maintaining all of a website's primary elements on a single page, we can see how modular components can be reused, as well as how changes to those elements will affect the site overall. The style guide also serves as a curated, archival collection for design and UX/UI decisions made during the course of the site's development - creating a code base that can resist arbitrary decisions since a predefined choice presents itself.

*Attribution and credits at the bottom
Colors

Style Guide colors are variablized in _vars.scss - colors are shown with 10% lighter and 10% darker transparent overlay to illustrate potential accent color choices.

Slab Colors

Typography Colors

Typography
Fonts


  • ABCDEFGHIJKLMNOPQRSTUVWXYZ
    abcdefghijklmnopqrstuvwxyz
    0123456789


  • ABCDEFGHIJKLMNOPQRSTUVWXYZ
    abcdefghijklmnopqrstuvwxyz
    0123456789

Headings

  • h1 / .h1 - The H1 is the main page heading

    Page Title / Section Title

  • h2 / .h2 - The H2 is the page level or section heading

    Page Title / Section Title

    The secondary header above is an h2 element, which may be used for any form of important page-level header. More than one may be used per page. Consider using an h2 unless you need a header level of less importance, or as a sub-header to an existing h2 element.

  • h3 / .h3 - The H3 is a third-level heading

    Section Header / Banner Title / Section Subhead

    The header above is an h3 element, which may be used for any form of page-level header which falls below the h2 header in a document hierarchy.

  • h4 / .h4 - The H4 is the fourth-level heading

    Sub Header

    Typically used for article title or call-to-action elements.

  • h5 / .h5 - The H5 is the fifth-level heading
    Sub Header
  • h6 / .h6 - The H6 is the sixth-level heading and the lowest
    Sub Header

    Each heading has an accompanying class that can be used for styling any element without the need or restriction of SEO impact.

Body
  • .lede (Intro text)

    A lede, or lead, paragraph in literature is the opening paragraph of an article, essay, news story or book chapter. It usually occurs together with the headline or title. It precedes the main body of the article, and it gives the reader the main idea of the story. In both spellings, the word rhymes with the word need.

  • <p> or .body-text

    All paragraphs are wrapped in p tags. Additionally, p elements can be wrapped with a blockquote element if the p element is indeed a quote. Historically, blockquote has been used purely to force indents, but this is now achieved using CSS. Reserve blockquote for quotes.

    <small> or .small-body-text

    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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • .disclaimer-text

    The disclaimer is always 11px.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id molestie nunc. Suspendisse eu lorem ipsum, in luctus nunc. Etiam in sapien ut nunc cursus tempus non lacus.

Inline
  • <a> - This is a text link
  • <strong> - Strong is used to indicate strong importance
  • <em> - This text has added emphasis
  • <b> - The b element is stylistically different text from normal text, without any special importance
  • <i> - The i element is text that is set off from the normal text
  • <u> - The u element is text with an unarticulated, though explicitly rendered, non-textual annotation
  • <del> & <ins> - This text is deleted and This text is inserted
  • <s> - This text has a strikethrough
  • <sup> - Superscript®
  • <sub> - Subscript for things like H2O
  • <abbr> - Abbreviation: HTML
  • <kbd> - Keybord input: Cmd
  • <q> - This text is a short inline quotation
  • <cite> - This is a citation
  • <dfn> - The dfn element indicates a definition.
  • <mark> - The mark element indicates a highlight
  • <var> - The var element defines a variable
  • <address>
    Address Name
    1234 Main St.
    Anywhere, US 12345
  • <tel> - 1-800-851-9530
  • <time> -
  • <blockquote>
    One small step for man, one giant leap for mankind.
  • .text-info - This text is informative
  • .text-error - This text is an error
  • .text-success - This text is a success
Icons

Font Awesome is employed for scalable vector icons that can be customized — size, color, drop shadow, and anything that can be done with CSS. These icons can be color-enhanced using $color-variable-name classes.

  • .fa.fa-search (&#xf002;)
  • .fa.fa-user (&#xf007;)
  • .fa.fa-check (&#xf00c;)
  • .fa.fa-times (&#xf00d;)
  • .fa.fa-search-plus (&#xf00e;)
  • .fa.fa-search-minus (&#xf010;)
  • .fa.fa-power-off (&#xf011;)
  • .fa.fa-cog (&#xf013;)
  • .fa.fa-home (&#xf015;)
  • .fa.fa-inbox (&#xf01c;)
  • .fa.a-repeat (&#xf01e;)
  • .fa.fa-refresh (&#xf021;)
  • .fa.fa-bookmark (&#xf02e;)
  • .fa.fa-print (&#xf02f;)
  • .fa.fa-pencil (&#xf040;)
  • .fa.fa-map-marker (&#xf041;)
  • .fa.fa-chevron-left (&#xf053;)
  • .fa.fa-chevron-right (&#xf054;)
  • .fa.fa-plus (&#xf067;)
  • .fa.fa-minus (&#xf068;)
  • .fa.fa-asterisk (&#xf069;)
Alignment

  • .text-left

  • .text-center

  • .text-right

  • .text-justify

<p class="text-left"><code>.text-left</code></p>
<p class="text-center"><code>.text-center</code></p>
<p class="text-right"><code>.text-right</code></p>
<p class="text-justify"><code>.text-justify</code></p>
Buttons

A button is a UI element that requires action by the user to perform a function.

For the purposes of consistency, buttons and links can be styled to look identical.

Link 
<a href="" class="btn button-primary">Link</a>

<button class="btn button-primary" type="button">Button</button>

Button Types

Error Success Info Dark Disabled 
<a href="" class="btn btn-error mobile-full">Error</a>

<a href="" class="btn btn-success mobile-full">Success</a>

<a href="" class="btn btn-info mobile-full">Info</a>

<a href="" class="btn btn-black mobile-full">Dark</a>

<a href="" class="btn button-primary js-disabled mobile-full">Disabled</a>

Button Sizes

Extra Large Large Default Small 
<a href="" class="btn button-primary btn-xl mobile-full">Extra Large</a>

<a href="" class="btn button-primary btn-lg mobile-full">Large</a>

<a href="" class="btn button-primary mobile-full">Default</a>

<a href="" class="btn button-primary btn-sm mobile-full">Small</a>
Grid 
<div class="row">
  <div class="half grid"></div>
  <div class="half grid"></div>
</div>

Combinations

<div class="row text-center">
  <div class="fourth">
    
  </div>
  <div class="three-fourths">
    
  </div>
</div>
Images
Bill Murray Y'all
I'm a figcaption - I tell a bit about the image
<figure>
  <img alt="Bill Murray Y'all" src="http://www.fillmurray.com/g/1500/450">
  <figcaption>I'm a figcaption - I tell a bit about the image</figcaption>
</figure>
Bill Murray
Bill Murray
Bill Murray
Bill Murray 
<figure>
  <img alt="Bill Murray Y'all" src="http://www.fillmurray.com/640/480" alt="Bill Murray">
</figure>

<figure>
  <img class="image-bordered" alt="Bill Murray Y'all" src="http://www.fillmurray.com/640/480" alt="Bill Murray">
</figure>

<figure>
  <img class="image-rounded" alt="Bill Murray Y'all" src="http://www.fillmurray.com/640/480" alt="Bill Murray">
</figure>

<figure>
  <img class="image-circular" alt="Bill Murray Y'all" src="http://www.fillmurray.com/640/480" alt="Bill Murray">
</figure>
Video 
<video controls="controls" poster="https://www.linkassistive.com/wp-content/uploads/2012/12/big-buck-bunny-poster.png" width="100%" height="auto">
  <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
  <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
  <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
  <object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360">
    <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
    <param name="allowFullScreen" value="true" />
    <param name="wmode" value="transparent" />
    <param name="flashVars" value="config={'playlist':['http%3A%2F%2Fsandbox.thewikies.com%2Fvfe-generator%2Fimages%2Fbig-buck-bunny_poster.jpg',{'url':'http%3A%2F%2Fclips.vorwaerts-gmbh.de%2Fbig_buck_bunny.mp4','autoPlay':false}]}" />
    <img alt="Big Buck Bunny" src="https://www.linkassistive.com/wp-content/uploads/2012/12/big-buck-bunny-poster.png" width="640" height="360" title="No video playback capabilities, please download the video below" />
  </object>
</video>
Audio 
<audio src="https://www.w3schools.com/html/horse.mp3" controls>
  <p>Your user agent does not support the HTML5 Audio element.</p>
</audio>

Best Practices

The Golden Rule

All code in any part of the code base should look like a single person typed it, no matter how many people contributed.

HTML

  • Human Readable

    Code is written and maintained by people. Ensure your code is descriptive, well commented, and approachable by others.

  • HTML5 doctype

    Enforce standards mode in every browser possible with this simple doctype at the beginning of every HTML page.

    <!DOCTYPE html>

  • Syntax

    • Use soft-tabs with two spaces
    • Nested elements should be indented once (2 spaces)
    • Don't include a trailing slash in self-closing elements

  • Attributes

    • Attributes should be lowercase.
    • Always use double quotes ("), never single quotes.
    • Boolean attributes should be used without quoted values to avoid redundancy.

  • Attribute order

    HTML attributes should come in this particular order for easier reading of code.

    • id
    • class
    • data-*
    • for | type | href | src

  • HTML Comments

    • Section comments are separated from the previous block by two lines, and should have one following line of space.
    • Prepend section headings with an equal sign (=), to make a Find operation easier. 
    <!-- Component Name -->
<div class="componentName">
  ...
</div>
<!-- ./Component Name -->

CSS

    • Use soft-tabs with two spaces
    • When grouping selectors, keep individual selectors to a single line
    • Include one space before the opening brace of declaration blocks
    • Place closing braces of declaration blocks on a new line
    • Include one space after : in each property
    • Each declaration should appear on its own line
    • End all declarations with a semi-colon
    • Comma-separated values should include a space after each comma
    • Don't include spaces after commas in RGB or RGBa colors
    • Do not specify units for zero values, e.g., margin: 0; instead of margin: 0px;
    • Lowercase all hex values, e.g., #fff instead of #FFF
    • Use shorthand hex values where available, e.g., #fff instead of #ffffff
    • Quote attribute values in selectors, e.g., input[type="text"]

  • Declaration Organization

    1. Box (Display, Float, Position, Left, Top, Width, Height, Margin, Padding, etc.)
    2. Border
    3. Background
    4. Text
    5. Other
    .someDiv { color: #222; }

.someOtherDiv,
.someAdditional Div {
  margin: 0 auto;
  color: #222;
}

  • General Formatting

    Use a new line for every block, list or table element, and indent every such child element to show heirarchy and improve understanding

    .print {
  display: block;
  margin: 0;
  padding: 0 7px;
  height: 30px;
  background: #4f799f;
  line-height: 30px;
}

.print:hover { background: #265a83; }

  • Avoid Qualifying ID and class names with type selectors

    // this is bad
ul#example { color: #ff0; }
div.error { color: red; }
    // this is good
.example { color: #0f0; }
.error { color: green; }

    p.s. ID's are bad for CSS, only use ID's for javascript hooks when necessary

  • Hexadecimal Notation

    For color values that permit, 3 character hexadecimal is preferred

    /* not recommended */
color: #00ff00;
    /* recommended */
color: #0f0;
  • !important

    Just don't do it.

    Use greater specificity to workaround using !important; -- you will be judged in the afterlife.

  • Use the SMACSS Approach

    .componentName {
  Base {
    ...
  }

  Layout {
    ...
  }

  Module {
    ...
  }

  State {
    ...
  }

  Theme {
    ...
  }
}

  • Commenting

      // File headers are commented thusly:

  /* ==========================================================================
  Component Name -- Version: 1.0.0.0 - Updated: MM/DD/YYYY
  ========================================================================== */
  
      // Section chunks get styled as such:
  /*
  * Chunk of long
  * text gets commented
  * like this
  */
  
      // Hints get styled like this:
  /* Hint */

Sass (or less or stylus, you choose)

  • File Organization

    • Mixins and variables go in scss/global/.
    • Styles related to components/modules/views go in sass/components/.
    • Sass and CSS from other projects goes in sass/vendor/. 
    sass/
├── main.scss
├── globals/
|   ├── _mixins.scss
|   ├── _var.scss
├── partials/
|   ├── _btn.scss
|   ├── _list.scss
|   ├── _nav.scss
|   ├── _etc...
├── theme/
|   ├── _btn-theme.scss
└── vendor/
└── _jquery.ui.core.scss

  • Main Stylesheet

    All files get compiled into the main.scss stylesheet, and should be scoped accordingly.

    The main.scss file serves as a "table of contents" and the @import directives should be listed with vendor dependencies first, then author dependencies and core stylesheets, then components.

    Organize the components imports in a manner that makes sense, in other words, group components with the component they extend or inherit from.

    @charset "UTF-8";

@import "vendor";

@import "theme/theme";

@import "mixins/mixins";
@import "functions/functions";

// Base
@import "base/base";

// Modules
@import "globals/globals";

// Modules
@import "helpers/helpers";

// Components
@import "components/components";

// Elements
@import "elements/elements";

// Features
@import "features/features";

// Pages
@import "pages/pages";

  • Structuring Code

    @extends and @includes are likely to be overwritten by future elements, placing them at the top of the property list calls them out and avoids the beginning of a specificity war.

    • @extends should be grouped together at the top of the selector.
    • @includes should be grouped together after @extends.
    • Regular styles for the current selector should be after @includes.
    • Nested selectors appear last.
    • Nested selectors using & should appear above child (>) nested selectors.

  • Limit nesting to 3 levels and/or 50 lines

    Nesting selectors more than three levels deep and the code is at risk of being to reliant on HTML structure, overly-specific and difficult to understand.

    50 lines is reasonable length for keeping an entire block on a code editor screen without having to scroll.

  • Variablize ALL THE THINGS!

    • Variablize all colors.
    • Numbers (other than 0 or 100%) with strong meaning or frequent use should be variables.
    • Use hyphens (-) in variable names.
    • Name variables based on what they represent, not their values, e.g. $text-size-large instead of $text-size-24.
    • Colors, fonts, and base measurements are all great candidates for variables. If you find yourself writing a number other than 0 or 100% more than once, make it a variable.
    • Most variables should be stored in the _variables.scss partial; however, it's acceptable to define component specific variables in the component files.
    • In this case, the variables should be stored at the top of the file.

  • Comments

    Try to stick with standard CSS comments, but you can use the Sass style (//) comments for trivial comments or quickly debugging.

JS

  • Prefix all javascript-based selectors with js-. The idea is that you should be able to tell a presentational class from a functional class. Most of the codebase doesn't do this, let's try and move toward it.

SEO

Only One h1 Tag Per Page

While technically we could load a page up with h1 tags, it's a bad SEO practice and can cause penalties.

Use Title Attributes with Links

Using a title attribute in your anchor elements will improve accessibility when used the right way.

It is important to understand that the title attribute should be used to increase the meaning of the anchor tag.

How Much Will A Reader Read?

A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts. William Strunk, Jr.

ARIA & Accessibility

  • Making it possible to provide an enhanced user experience for people with disabilities when using internet applications with assistive technologies.

  • Landmark Roles

    banner - typically the "header" of the page

    <header role="banner"></header>

    navigation - any navigation list, typically the nav element

    <nav role="navigation""></nav>

    main - the main content area

    <main role="main"></main>

    article - *the article role is not an ARIA landmark

    <article></article>

    complimentary - information that is tangentially related to the main content

    <aside role="complimentary"></aside>

    contentinfo - contains information about the parent document such as copyrights and privacy statements

    <footer role="contentinfo"></footer>

  • Using alt Text Properly

    A few tips on how and when to use the alt attribute:

    • Use the alt attribute for any image that is used as content.
    • Use an empty alt atribute for any image that is decorative or not necessary for understanding the content of the page (alt=”“).
    • Make sure the description of the image is useful. For example, if the image is your logo your alt should be your company name and not “logo”

    The alt attribute is meant to help users using assitive techonology not miss any content, so make sure your text is helpful to anyone not seeing the image.

  • <.visually-hidden> - The Visually-Hidden class allows for 508 Compliance on an element needed for visually assisted users. 
/*----------------------------------------------------------
Inspiration and credits for much of this code base belong to:

HTML5 Boilerplate :: http://html5boilerplate.com
HTML5 Reset       :: http://html5reset.org
Twitter Bootstrap :: http://twitter.github.com/bootstrap/
SMACSS            :: http://smacss.com/
CSSWizardry       :: http://csswizardry.com/
Codeguide         :: http://codeguide.co/
------------------------------------------------------------*/

Version: 0.2.4 -- Updated: 2022-06-20 17:52:46 +0000

FIN.