Outline

Visual

HTML

CSS

System

position:

static | absolute | fixed | relative | initial | inherit;

The position of this system is to establish a visual system for the structure of the HTML to define the page layout. For additions or contributions, please say howdy.

Visual + Code + Design + System

HTML

White Space

The space that is not occupied by text, images, or other visible elements. Responsible for readability, it also plays an important role in the layout.

Syntax

  • Use soft tabs with two spaces for consistent indentation of your markup.
  • Tab nested elements once.
  • Use double quotes on attributes.
  • Do not include a trailing slash in self-closing elements.
  • Do not omit optional closing tags.

    <!DOCTYPE html>
    <html>
    <head>
    <title>Page title</title>
    </head>
    <body>
    <h1 class="hello-world">Hello, world!</h1>
    </body>
    </html>

HTML5 doctype

Enforce standards mode and more consistent rendering in every browser possible with this simple doctype at the beginning of every HTML page


    <!DOCTYPE html>
    <html>
    <head>
    </head>
    </html>

Language attribute

From the HTML5 spec:

Authors are encouraged to specify a lang attribute on the root html element, giving the document's language. This aids speech synthesis tools to determine what pronunciations to use, translation tools to determine what rules to use, and so forth.

Read more about the lang attributein the spec. 


    <!DOCTYPE html>
    <html lang="en-us">
    </html>

Character encoding

Quickly and easily ensure proper rendering of your content by declaring an explicit character encoding. When doing so, you may avoid using character entities in your HTML, provided their encoding matches that of the document (generally UTF-8).


    <head>
    <meta charset="UTF-8">
    </head>

Attribute order

  • class
  • id, name
  • data-*
  • src, for, type, href
  • title, alt
  • aria-*, role

    <a class="..." id="..." data-modal="toggle" href="#">
    Example link
    </a>

    <input class="form-control" type="text">

    <img src="..." alt="...">

Code + Design

Strive to maintain code standards but not at the expense of design patterns. Think modularity.

Layout

These HTML5 tags define the visual layout without the need for structure based classes.

Main, Article, Section, Aside, Header, Nav, Footer, H1, H2, H3

CSS

Syntax

  • Use soft-tabs with a two space indent. Spaces are the only way to guarantee code renders the same in any person's environment.
  • Put spaces after : in property declarations.
  • Put spaces before { in rule declarations.
  • Put line breaks between rulesets.
  • When grouping selectors, keep individual selectors to a single line.
  • Place closing braces of declaration blocks on a new line.
  • Each declaration should appear on its own line for more accurate error reporting.

Questions on the terms used here? See the syntax section of the Cascading Style Sheets article on Wikipedia.


    /* Bad CSS */
    .selector, .selector-secondary, .selector[type=text] {
    padding:15px;
    margin:0px 0px 15px;
    background-color:rgba(0, 0, 0, 0.5);
    box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
    }

    /* Good CSS */
    .selector,
    .selector-secondary,
    .selector[type="text"] {
    padding: 15px;
    margin-bottom: 15px;
    background-color: rgba(0,0,0,.5);
    box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
    }

Declaration order

Related property declarations should be grouped together following the order:

  1. Positioning
  2. Box model
  3. Typographic
  4. Visual

Positioning comes first because it can remove an element from the normal flow of the document and override box model related styles. The box model comes next as it dictates a component's dimensions and placement.

Everything else takes place inside the component or without impacting the previous two sections, and thus they come last.

For a complete list of properties and their order, please see.


    .declaration-order {
    /* Positioning */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;

    /* Box-model */
    display: block;
    float: right;
    width: 100px;
    height: 100px;

    /* Typography */
    font: normal 13px "Helvetica Neue", sans-serif;
    line-height: 1.5;
    color: #333;
    text-align: center;

    /* Visual */
    background-color: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 3px;

    /* Misc */
    opacity: 1;
    }

System

Overview

  • HTML displays as a dynamic font size based on viewport height & width
  • Header
  • Nav items are centered in the li and the amount of tags define the amount of columns
  • Main
  • Article displays as a row
  • Section displays as a column (portrait: single column, landscape: multiple column) and the amount of tags define the amount of columns
  • Aside displays as 2-column or 3-column
  • H1, H2, H3 displays as a dynamic font size based on viewport height & width
  • Optional .multi-column layout
  • First Article not in Main is centered on page
  • Sticky Footer

80/20 Rule: The Pareto Principle

The 80/20 rule asserts that approximately 80 percent of the effects generated by any large system are caused by 20 percent of the variables in that system.

Portrait

When the orientation is Portrait, content displays as a single column layout

Landscape

When the orientation is not Portrait, content displays as a grid layout

  • The amount of [article] tags define the amount of rows
  • The amount of [section] tags define the amount of columns
  • Each [section] displays full-height, even when content does not fill the space

.multi-column (optional)

Multi-column takes advantage of the The Pareto Principle and displays your content as either a 2-column or 3-column layout.

  • One [aside] tag displays 2-column 80/20 layout
  • Two [aside] tags display 3-column 20/60/20 layout

Portrait

1/6

2/6

3/6

4/6

5/6

6/6

Landscape

1/6

2/6

3/6

4/6

5/6

6/6

.multi-column

Multi-column

Article Header H1

Article Section Section H2

One [aside] tag displays 80/20 layout

Two [aside] tags display 20/60/20 layout