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

8 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 /patterns/grid.php.

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

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

Heading 1 title linked

Heading 2 title linked

Heading 3 title linked

Heading 4 title linked

Heading 5 title linked
Heading 6 title linked

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

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
Link styled as button

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.

Masthead

Post metadata

Nav Main

Nav Archives

FAQ

Quick facts

Aki Kärkkäinen — a Senior Front-End Developer/Architect at LBi Denmark. Creator of the Grunt Front-End Workflow and One Web Boilerplate (see all my Github projects). Music freak living in Copenhagen, Denmark.

This website is a place to keep track of my thoughts and share resources and ideas about whatever feels (ir)relevant. Follow @akikoo on Twitter.

Social

Projects

Here are some selected examples of delivered projects where my role was a mix of research, project planning, accessibility work, design operations and development. Check my LinkedIn profile if you want to know more, or simply ask me :) I'd be glad to help.

Selected Projects

Search

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.