Styleguide

A guide to the base markup and custom patterns/modules used throughout the site.

According to Atomic Design, these would be Molecules. Molecules are groups of Atoms bonded together and are the smallest fundamental units of a compound. These can also be larger constructs: Organisms. Organisms are groups of Molecules joined together to form a relatively complex, distinct section of an interface.

1. Grid, colors and font stacks

12 columns by default. Can easily be changed in /scss/_settings.scss. Then go to /scss/components/_layout.scss, to generate new styles. Finally, update markup in /styleguide/grid.html.

Grid

Cell-2
Cell-2
Cell-2
Cell-2
Cell-2
Cell-2
Cell-3
Cell-3
Cell-3
Cell-3
Cell-4
Cell-4
Cell-4
Cell-7
Nested Cell-4
Nested Cell-3
Cell-5
Nested Cell-2
Nested Cell-3
Cell-12

Colors

  • Main background
  • Complementary background
  • Light background
  • Border
  • Dark text
  • Light text
Link default Link visited Link hover Link active

Font stacks

'Source Sans Pro', sans-serif
"Bitstream Vera Sans Mono", Consolas, "Courier New", monospace

2. Sections

Sectioning elements include body, article, section, nav, aside, h1, h2, h3, h4, h5, h6, hgroup, header, footer and address.

Headings

A very long Heading 1 title that also has a link

A very long Heading 2 title that also has a link

A very long Heading 3 title that also has a link

A very long Heading 4 title that also has a link

A very long Heading 5 title that also has a link
A very long Heading 6 title that also has a link

Section heading

Entry title link in collection

3. Grouping content

Grouping elements are listed below.

Horizontal rule


Pre-formatted text

body {
    font: 0.8125em/1.618 Arial, sans-serif;
    background-color: #fff;
    color: #111;
  }

Blockquote

This text is quoted. A block of quoted text like this is particularly useful when presented as a pull-quote within an article of text.

Ordered list

  1. First list item
  2. Second item in a list of ordered items
    1. First list item, level 2
    2. Second item in a list of ordered items, level 2
    3. Third item in the list, level 2
  3. Third item in the list

Unordered list

  • A list item
  • Another item in a list
    • A list item
    • Another item in a list
    • Yet another item in this list of items
  • Yet another item in this list of items

Definition list

Definition term
Definition description. 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.
Definition term
Definition description. 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.

Figure

A picture about something.

4. Text-level semantics

Paragraph

Text level elements include the following:

a for links,
em for stressed emphasis,
strong for importance,
small for side comments,
s for inaccurate text,
cite for citations,
q for inline quotes,
dfn for definitions,
abbr for abbreviations,
for machine-readable date or time,
code for code examples,
var for variables,
samp for computer output,
kbd for user input,
sub for subscript,
sup for superscript,
i for alternative voice (italicized),
b for emboldened keywords,
u for annotations,
mark for marked or highlighted text,
ins for visibly inserted content
del for visibly deleted content.

5. Embedded content

Embedded content elements include img, iframe, embed, object, param, video, audio, source, track, canvas, map, area, svg, and math.

Embedded image

6. Tabular data

Table

Table Caption
First column heading Second column heading Third column heading
Table foot heading Table foot td Table foot td Table foot td
First row heading Table body td Table body td Table body td
Second row heading Table body td Table body td Table body td
Third row heading Table body td Table body td Table body td

7. Forms

Form elements are presented below.

Form

Group title
Note about this field.
Note about this field.
Note about this field.
Note about this field.
Note about this field.
Note about this field.
Note about this field.
Note about this field.
Note about this field.
Note about this field.
Checkbox group
Radio group

8. Custom UI elements and modules

Design and mark-up patterns unique to this site.

According to Atomic Design, these would be Molecules. Molecules are groups of Atoms bonded together and are the smallest fundamental units of a compound. These can also be larger constructs: Organisms. Organisms are groups of Molecules joined together to form a relatively complex, distinct section of an interface.

Links styled as buttons

Post metadata (in collection)

Post metadata (in single post)

Logo

Nav Main

Nav Posts

Certifications

Clients

Nav Archives (all categories)

Social

Intro

Projects

Contentinfo

Media object (simple)

A little bit of content.

Media object (extra content block on the right)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis adipiscing est. Curabitur vel dui dolor. Vestibulum molestie fermentum diam, nec interdum ante molestie ut. Integer consequat iaculis auctor. Duis vitae felis ligula, ultrices blandit dolor.

Media object (nested)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis adipiscing est. Curabitur vel dui dolor. Vestibulum molestie fermentum diam, nec interdum ante molestie ut. Integer consequat iaculis auctor. Duis vitae felis ligula, ultrices blandit dolor.

A little bit of content.

A little bit of content.