CMS Myth Style Guide


Colors

  • color(primaryLight): #26454f
  • color(primary): #18323A
  • color(primaryDark): #0d2026
  • color(secondaryLight): #cdeee9
  • color(secondaryLightMedium): #8ec8c9
  • color(secondaryMedium): #54dddf
  • color(secondary): #3FCCCE
  • color(secondaryDark): #31b8ba
  • color(greyLight): #F6F6F6
  • color(grey): #E0DDDD
  • color(greyMedium): #CECACA
  • color(greyDark): #5f5d5d
  • color(purple): #4B4B66
  • color(redLight): #ec5233
  • color(red): #DA4122
  • color(redDark): #c43416

Typography

Fonts

$baseFontFamily: 'Roboto Condensed', Helvetica, Arial, sans-serif;

$baseFontFamily: 'Roboto Condensed', Helvetica, Arial, sans-serif;

$baseFontFamily: 'Roboto Condensed', Helvetica, Arial, sans-serif;


$baseFontFamilySansSerif: 'Roboto', Helvetica, Arial, sans-serif;

$baseFontFamilySansSerif: 'Roboto', Helvetica, Arial, sans-serif;

$baseFontFamilySansSerif: 'Roboto', Helvetica, Arial, sans-serif;


$baseFontFamilySerif: 'Roboto Slab', Open Sans, Proxima Nova, serif;

$baseFontFamilySerif: 'Roboto Slab', Open Sans, Proxima Nova, serif;

$baseFontFamilySerif: 'Roboto Slab', Open Sans, Proxima Nova, serif;

Headings

Level 1 heading

Level 2 heading

Level 3 heading

Level 4 heading

Level 5 heading
Level 6 heading

Paragraph

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

Intro Text

The intro text may be a lead-in to the passage of text, or it may just be used to create a visual distinction between the rest of the passage of text.

Blockquote

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

Blockquote With Citation

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

Quote Source

Alert Styles

An example alert style with for informations or notes.


An example alert style for actual alerts.

Inline Elements

This is a text link

Strong is used to indicate strong importance

This text has added emphasis

The b element is stylistically different text from normal text, without any special importance

The i element is text that is set off from the normal text

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation

This text is deleted and This text is inserted

This text has a strikethrough

Superscript®

Subscript for things like H2O

This small text is small for for fine print, etc.

Abbreviation: HTML

Keybord input: Cmd

This text is a short inline quotation

This is a citation

The dfn element indicates a definition.

The mark element indicates a highlight

This is what inline code looks like.

This is sample output from a computer program

The variarble element, such as x = y

Time

Preformatted Text

  	
P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~ 

Horizontal rule


Lists

Unordered List

  • Short Item in the list
  • Short Item in the list
    • Short Item in the list
    • Short Item in the list
    • Short Item in the list
  • Really long item in the list, Really long item in the list, Really long item in the list, Really long item in the list, Really long item in the list, Really long item in the list, Really long item in the listReally long item in the list, Really long item in the list, Really long item in the list, Really long item in the list, Really long item in the list, Really long item in the list

Unordered List with Links

Ordered List:

  1. Short Item in the list
  2. Short Item in the list
  3. Short Item in the list
    1. Short Item in the list
    2. Short Item in the list
    3. Short Item in the list
  4. Really long item in the list, Really long item in the list, Really long item in the list, Really long item in the list, Really long item in the list, Really long item in the list, Really long item in the listReally long item in the list, Really long item in the list, Really long item in the list, Really long item in the list, Really long item in the list, Really long item in the list

Ordered List with Links:

Definition List

Definition List
A number of connected items or names written or printed consecutively, typically one below the other.
This is a term.
This is the definition of that term, which both live in a dl.
Here is another term.
And it gets a definition too, which is this line.
Here is term that shares a definition with the term below.
And it gets a definition too, which is this line.

Logo

CMX Myth Logo CMX Myth Logo
CMX Myth Logo CMX Myth Logo

Images

Image placeholder
Image placeholder
Caption for an image
Image placeholder

Category Images

analytics category

analytics

cms-myth-contributors category

cms-myth-contributors

content category

content

cms-greatest-hits category

cms-greatest-hits

events category

events

globalization category

globalization

governance category

governance

higher-education category

higher-education

interview category

interview

marketing category

marketing

mobile category

mobile

project-management category

project-management

rfps category

rfps

social-networking category

social-networking

strategy category

strategy

technology category

technology

uncategorized category

uncategorized

user-experience category

user-experience

vendor-selection category

vendor-selection

video category

video

Monsters

Monster 1
Monster 1
Monster 2
Monster 2
Monster 3
Monster 3
Monster 4
Monster 4
Monster 5
Monster 5
Monster 6
Monster 6
Monster 7
Monster 7
Monster 8
Monster 8
Monster 9
Monster 9
Monster 10
Monster 10

Icons

Action Icons

Social Icons

Inline Icons

Facebook Google+ LinkedIn Pinterest Tumblr Twitter YouTube Email Rss

Favicons

Form Styles

Text Input

Text Input

Buttons

Buttons

File Uploads

File Uploads

Selects, Radios, Checkboxes

Selects, Radios, Checkboxes

  1. Select one of the following:
  2. Select at least one of the following:
  3. Inline Checkboxes and Radio Buttons

Badges

Primary badge Secondary badge

Responsive Tabs

Horizontal

Tab 1

Tab 1 content

Tab 2

Tab 2 content

Tab 3

Tab 3 content

Vertical - Left

Tab 1

Tab 1 content

Tab 2

Tab 2 content

Tab 3

Tab 3 content

Vertical - Right

Tab 1

Tab 1 content

Tab 2

Tab 2 content

Tab 3

Tab 3 content

Tooltips

Aspect Ratios

Video - 16:9

Map - 4:3

Quick Column Layouts

Classes are available to build quick column layouts that flow naturally on all resolutions. The classes are two-up, three-up, and four-up. They signify how many elements will be displayed side-by-side at the highest resolution. As in the below examples, the classes are placed on the elements for which you wish to apply the specified number of side-by-side elements.

NOTE: these elements must be placed in a wrapping container for the proper spacing and flow.

.two-up

1/2
1/2

.three-up

1/3
1/3
1/3

.four-up

1/4
1/4
1/4
1/4

Optimal Line Length Test (Measure)

45-75 characters per line for body text such as paragraphs is optimal amount. Line lenght is one of the most important qualities that makes type readable. Super long lines are hard to read, difficult for eyes to move from one line to the next. Too short lines interrupt flow of reading. Remember to design around line length, it's important to select typeface first, becasue they are different sizes. Characters per line vary due to letter size, word length. Try to average 45-75.

45-75 characters per line for body text such as paragraphs is optimal amount. Line lenght is one of the most important qualities that makes type readable. Super long lines are hard to read, difficult for eyes to move from one line to the next. Too short lines interrupt flow of reading. Remember to design around line length, it's important to select typeface first, becasue they are different sizes. Characters per line vary due to letter size, word length. Try to average 45-75.

45-75 characters per line for body text such as paragraphs is optimal amount. Line lenght is one of the most important qualities that makes type readable. Super long lines are hard to read, difficult for eyes to move from one line to the next. Too short lines interrupt flow of reading. Remember to design around line length, it's important to select typeface first, becasue they are different sizes. Characters per line vary due to letter size, word length. Try to average 45-75.