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
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:
- 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
- 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
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
Images
Category Images
analytics
cms-myth-contributors
content
cms-greatest-hits
events
globalization
governance
higher-education
interview
marketing
mobile
project-management
rfps
social-networking
strategy
technology
uncategorized
user-experience
vendor-selection
video
Monsters
Icons
Action Icons
Social Icons
Inline Icons
Facebook Google+ LinkedIn Pinterest Tumblr Twitter YouTube Email RssFavicons
Form Styles
Badges
Primary badge Secondary badgeResponsive Tabs
Horizontal
Tab 1
Tab 2
Tab 3
Vertical - Left
Tab 1
Tab 2
Tab 3
Vertical - Right
Tab 1
Tab 2
Tab 3
Modals
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
.three-up
.four-up
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.