Style Guide

[jlukic]

Update style guide to include more information

Language Style Guide

Common Language

These are class names which should be considered when creating a new type variation or content container

Content:

• Action - a list of actions that can be taken by a user
• Content - a group of descriptive elements that require a shared wrapper
• Description - a text element describing another piece of content next to it
• Header - a text header
• Image- an image
• Link - a link element when not specified with an a tag
• Meta - metadata associated with a piece of content
• Text - a single element of text

Variations

• Aligned - 'left aligned', 'center aligned', 'middle aligned', 'top aligned', 'bottom aligned' - element is aligned to have no padding with the element next to it in a direction
• Attached - attached to the top or bottom of other content
• Basic - element has removed all but the most basic formatting
• Colors - red, orange, green, yellow, blue, purple, black, grey, white, brown
• (One, Two Three) - listing the count of elements on a group defines equal width
• Fluid - element takes parent width
• Floating - 'left floating', 'right floating'
• Inverted - colors are inverted for use on dark backgrounds
• (Primary, Secondary) - element changes to be more or less emphasized
• Pointing - element has an arrow pointing to the content it belongs to
• Sizes - tiny, mini, small, medium, large, huge, massive

Types:

• Icon - Element is formatted specifically for an icon with no text
• Labeled Icon - element is formatted for an icon with text alongside it

States:

• Hover - cursor hover
• Focus - element is current mouse target
• Down - touch or mousedown
• Active - currently selected or a module's behavior is activated
• Disabled - cannot be interacted
• Dropped - element has been dropped on
• Dragged - element has been dragged from

CSS

Add examples of each style of comment banner. Ideally would create a snippet/macro for sublime text.

Javascript

Update javascript style guide to include references to the semantic module pattern http://semantic-ui.com/spec/docs/module.commented.html