{ "generateStarted": "2013-12-04T09:15:04.951Z", "generateEnded": false, "models": [ { "fullPath": "/home/jack/projects/semantic/server/documents/collection.html.eco", "relativePath": "collection.html.eco", "basename": "collection", "outBasename": "collection", "extension": "eco", "outExtension": "html", "extensions": [ "html", "eco" ], "filename": "collection.html.eco", "fullDirPath": "/home/jack/projects/semantic/server/documents", "outPath": "/home/jack/projects/semantic/docs/collection.html", "outDirPath": "/home/jack/projects/semantic/docs", "outFilename": "collection.html", "relativeOutPath": "collection.html", "relativeDirPath": ".", "relativeOutDirPath": ".", "relativeBase": "collection", "relativeOutBase": "collection", "contentType": "application/octet-stream", "outContentType": "text/html", "ctime": "2013-12-04T07:12:08.000Z", "mtime": "2013-12-02T15:39:03.000Z", "rtime": "2013-12-04T09:15:24.164Z", "wtime": "2013-12-04T09:15:28.563Z", "exists": true, "encoding": "utf8", "source": "---\nlayout : 'default'\ncss : 'index'\n\ntitle : 'UI Collections'\ndescription : 'UI collections are elements which contain other elements which often appear together.'\ntype : 'Semantic'\n---\n\n<%- @partial('header') %>\n\n
\n

Types of Collections

\n\n
\n
\n
\n
\n Food\n
/
\n Fruit\n
/
\n
Apples
\n
\n
\n
\n Food\n \n Fruit\n \n
Apples
\n
\n
\n
\n Breadcrumb\n

A breadcrumb is a menu to show the location of the current section in relation to other sections.

\n
\n
\n
\n
\n
\n
\n \n
\n \n \n
\n
\n
\n \n
\n \n \n
\n
\n
\n
\n
\n Form\n

A form is used to solicit a user response

\n
\n
\n
\n
\n
\n
1
\n
2
\n
3
\n
\n
\n
\n Grid\n

A grid helps harmonize negative space in a layout

\n
\n
\n
\n
\n
\n Friends\n Messages\n Profile\n
\n
\n Friends\n Messages\n Profile\n
\n
\n
\n Menu\n

A menu organizes related links

\n
\n
\n\n
\n
\n
\n
We're sorry we can't process your idea just yet
\n

Please enter your name

\n
\n
\n
\n Message\n

Messages alert a user to something important.

\n
\n
\n\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
NameStatus
John Approved
John Unconfirmed
Sally Denied
\n
\n
\n Table\n

A table collects related data into rows of content

\n
\n
\n
\n\n
", "content": "<%- @partial('header') %>\n\n
\n

Types of Collections

\n\n
\n
\n
\n
\n Food\n
/
\n Fruit\n
/
\n
Apples
\n
\n
\n
\n Food\n \n Fruit\n \n
Apples
\n
\n
\n
\n Breadcrumb\n

A breadcrumb is a menu to show the location of the current section in relation to other sections.

\n
\n
\n
\n
\n
\n
\n \n
\n \n \n
\n
\n
\n \n
\n \n \n
\n
\n
\n
\n
\n Form\n

A form is used to solicit a user response

\n
\n
\n
\n
\n
\n
1
\n
2
\n
3
\n
\n
\n
\n Grid\n

A grid helps harmonize negative space in a layout

\n
\n
\n
\n
\n
\n Friends\n Messages\n Profile\n
\n
\n Friends\n Messages\n Profile\n
\n
\n
\n Menu\n

A menu organizes related links

\n
\n
\n\n
\n
\n
\n
We're sorry we can't process your idea just yet
\n

Please enter your name

\n
\n
\n
\n Message\n

Messages alert a user to something important.

\n
\n
\n\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
NameStatus
John Approved
John Unconfirmed
Sally Denied
\n
\n
\n Table\n

A table collects related data into rows of content

\n
\n
\n
\n\n
", "tags": null, "render": true, "write": true, "writeSource": false, "dynamic": false, "title": "UI Collections", "name": "collection.html", "date": "2013-12-02T15:39:03.000Z", "slug": "collection", "url": "/collection.html", "urls": [ "/collection.html" ], "ignored": false, "standalone": false, "referencesOthers": true, "header": "layout : 'default'\ncss : 'index'\n\ntitle : 'UI Collections'\ndescription : 'UI collections are elements which contain other elements which often appear together.'\ntype : 'Semantic'", "parser": "yaml", "body": "<%- @partial('header') %>\n\n
\n

Types of Collections

\n\n
\n
\n
\n
\n Food\n
/
\n Fruit\n
/
\n
Apples
\n
\n
\n
\n Food\n \n Fruit\n \n
Apples
\n
\n
\n
\n Breadcrumb\n

A breadcrumb is a menu to show the location of the current section in relation to other sections.

\n
\n
\n
\n
\n
\n
\n \n
\n \n \n
\n
\n
\n \n
\n \n \n
\n
\n
\n
\n
\n Form\n

A form is used to solicit a user response

\n
\n
\n
\n
\n
\n
1
\n
2
\n
3
\n
\n
\n
\n Grid\n

A grid helps harmonize negative space in a layout

\n
\n
\n
\n
\n
\n Friends\n Messages\n Profile\n
\n
\n Friends\n Messages\n Profile\n
\n
\n
\n Menu\n

A menu organizes related links

\n
\n
\n\n
\n
\n
\n
We're sorry we can't process your idea just yet
\n

Please enter your name

\n
\n
\n
\n Message\n

Messages alert a user to something important.

\n
\n
\n\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
NameStatus
John Approved
John Unconfirmed
Sally Denied
\n
\n
\n Table\n

A table collects related data into rows of content

\n
\n
\n
\n\n
", "rendered": true, "contentRendered": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n \n \n \n \n\n \n\n \n \n UI Collections | Semantic UI\n\n \n \n\n \n\n \n \n \n\n \n\n \n \n \n \n \n \n \n \n\n \n \n \n\n \n \n\n\n
\n \n Close Menu\n \n \n Download\n \n
\n \n Introduction\n \n
\n \n Definitions\n \n Overview\n \n Types\n \n Variations\n \n What's Different\n \n
\n
\n
\n Project\n
\n \n Contributing\n \n Set-up\n \n
\n
\n
\n Elements\n
\n \n Button\n \n Divider\n \n Header\n \n Icon\n \n Image\n \n Input\n \n Label\n \n Loader\n \n Progress\n \n Reveal\n \n Segment\n \n Step\n \n
\n
\n
\n Collections\n
\n \n Breadcrumb\n \n Form\n \n Grid\n \n Menu\n \n Message\n \n Table\n \n
\n
\n
\n Views\n
\n \n Comment\n \n Feed\n \n Item\n \n List\n \n
\n
\n
\n Modules\n
\n \n Accordion\n \n Checkbox\n \n Dimmer\n \n Dropdown\n \n Modal\n \n Popup\n \n Rating\n \n Shape\n \n Sidebar\n \n Transition\n \n
\n
\n
\n Behavior\n
\n \n Form Validation\n \n
\n
\n
\n Style Guide\n
\n \n CSS\n \n Javascript\n \n Language\n \n
\n
\n\n
\n\n
\n
\n Content\n
\n Semantic: UI Collections\n
\n \n \n \n
\n 2 of 4\n
\n \n
\n 1. Introduction\n
\n \n
\n 2. UI Collections\n
\n \n
\n 3. UI Elements\n
\n \n
\n 4. UI Modules\n
\n \n
\n
\n \n \n \n
\n \n
\n \n
\n \n \n \n \n \n \n
\n
\n
\n
\n \n Menu\n
\n \n\n
\n
\n
\n\n

\n UI Collections\n \n

\n\n

UI collections are elements which contain other elements which often appear together.

\n \n \n
\n
\n \n
\n \n
\n \n
\n
\n\n
\n

Types of Collections

\n\n
\n
\n
\n
\n Food\n
/
\n Fruit\n
/
\n
Apples
\n
\n
\n
\n Food\n \n Fruit\n \n
Apples
\n
\n
\n
\n Breadcrumb\n

A breadcrumb is a menu to show the location of the current section in relation to other sections.

\n
\n
\n
\n
\n
\n
\n \n
\n \n \n
\n
\n
\n \n
\n \n \n
\n
\n
\n
\n
\n Form\n

A form is used to solicit a user response

\n
\n
\n
\n
\n
\n
1
\n
2
\n
3
\n
\n
\n
\n Grid\n

A grid helps harmonize negative space in a layout

\n
\n
\n
\n
\n
\n Friends\n Messages\n Profile\n
\n
\n Friends\n Messages\n Profile\n
\n
\n
\n Menu\n

A menu organizes related links

\n
\n
\n\n
\n
\n
\n
We're sorry we can't process your idea just yet
\n

Please enter your name

\n
\n
\n
\n Message\n

Messages alert a user to something important.

\n
\n
\n\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
NameStatus
John Approved
John Unconfirmed
Sally Denied
\n
\n
\n Table\n

A table collects related data into rows of content

\n
\n
\n
\n\n
\n\n\n", "contentRenderedWithoutLayouts": "\n\n
\n
\n
\n\n

\n UI Collections\n \n

\n\n

UI collections are elements which contain other elements which often appear together.

\n \n \n
\n
\n \n
\n \n
\n \n
\n
\n\n
\n

Types of Collections

\n\n
\n
\n
\n
\n Food\n
/
\n Fruit\n
/
\n
Apples
\n
\n
\n
\n Food\n \n Fruit\n \n
Apples
\n
\n
\n
\n Breadcrumb\n

A breadcrumb is a menu to show the location of the current section in relation to other sections.

\n
\n
\n
\n
\n
\n
\n \n
\n \n \n
\n
\n
\n \n
\n \n \n
\n
\n
\n
\n
\n Form\n

A form is used to solicit a user response

\n
\n
\n
\n
\n
\n
1
\n
2
\n
3
\n
\n
\n
\n Grid\n

A grid helps harmonize negative space in a layout

\n
\n
\n
\n
\n
\n Friends\n Messages\n Profile\n
\n
\n Friends\n Messages\n Profile\n
\n
\n
\n Menu\n

A menu organizes related links

\n
\n
\n\n
\n
\n
\n
We're sorry we can't process your idea just yet
\n

Please enter your name

\n
\n
\n
\n Message\n

Messages alert a user to something important.

\n
\n
\n\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
NameStatus
John Approved
John Unconfirmed
Sally Denied
\n
\n
\n Table\n

A table collects related data into rows of content

\n
\n
\n
\n\n
", "renderSingleExtensions": false, "layout": "default", "css": "index", "description": "UI collections are elements which contain other elements which often appear together.", "type": "Semantic", "layoutRelativePath": "default.html.eco", "meta": { "layout": "default", "css": "index", "title": "UI Collections", "description": "UI collections are elements which contain other elements which often appear together.", "type": "Semantic" } }, { "fullPath": "/home/jack/projects/semantic/server/documents/download.html.eco", "relativePath": "download.html.eco", "basename": "download", "outBasename": "download", "extension": "eco", "outExtension": "html", "extensions": [ "html", "eco" ], "filename": "download.html.eco", "fullDirPath": "/home/jack/projects/semantic/server/documents", "outPath": "/home/jack/projects/semantic/docs/download.html", "outDirPath": "/home/jack/projects/semantic/docs", "outFilename": "download.html", "relativeOutPath": "download.html", "relativeDirPath": ".", "relativeOutDirPath": ".", "relativeBase": "download", "relativeOutBase": "download", "contentType": "application/octet-stream", "outContentType": "text/html", "ctime": "2013-12-04T07:12:08.000Z", "mtime": "2013-12-02T15:39:03.000Z", "rtime": "2013-12-04T09:15:24.242Z", "wtime": "2013-12-04T09:15:28.567Z", "exists": true, "encoding": "utf8", "source": "---\nlayout : 'default'\ncss : 'download'\n\ntitle : 'Download'\ndescription : 'Build your Semantic download'\ntype : 'Library'\n---\n\n<%- @partial('header') %>\n\n
\n\n\n
", "content": "<%- @partial('header') %>\n\n
\n\n\n
", "tags": null, "render": true, "write": true, "writeSource": false, "dynamic": false, "title": "Download", "name": "download.html", "date": "2013-12-02T15:39:03.000Z", "slug": "download", "url": "/download.html", "urls": [ "/download.html" ], "ignored": false, "standalone": false, "referencesOthers": true, "header": "layout : 'default'\ncss : 'download'\n\ntitle : 'Download'\ndescription : 'Build your Semantic download'\ntype : 'Library'", "parser": "yaml", "body": "<%- @partial('header') %>\n\n
\n\n\n
", "rendered": true, "contentRendered": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n \n \n \n \n\n \n\n \n \n Download | Semantic UI\n\n \n \n\n \n\n \n \n \n\n \n\n \n \n \n \n \n \n \n \n\n \n \n \n\n \n \n\n\n
\n \n Close Menu\n \n \n Download\n \n
\n \n Introduction\n \n
\n \n Definitions\n \n Overview\n \n Types\n \n Variations\n \n What's Different\n \n
\n
\n
\n Project\n
\n \n Contributing\n \n Set-up\n \n
\n
\n
\n Elements\n
\n \n Button\n \n Divider\n \n Header\n \n Icon\n \n Image\n \n Input\n \n Label\n \n Loader\n \n Progress\n \n Reveal\n \n Segment\n \n Step\n \n
\n
\n
\n Collections\n
\n \n Breadcrumb\n \n Form\n \n Grid\n \n Menu\n \n Message\n \n Table\n \n
\n
\n
\n Views\n
\n \n Comment\n \n Feed\n \n Item\n \n List\n \n
\n
\n
\n Modules\n
\n \n Accordion\n \n Checkbox\n \n Dimmer\n \n Dropdown\n \n Modal\n \n Popup\n \n Rating\n \n Shape\n \n Sidebar\n \n Transition\n \n
\n
\n
\n Behavior\n
\n \n Form Validation\n \n
\n
\n
\n Style Guide\n
\n \n CSS\n \n Javascript\n \n Language\n \n
\n
\n\n
\n\n
\n
\n Content\n
\n Library: Download\n
\n \n
\n \n
\n 1 of 2\n
\n \n
\n 1. Download\n
\n \n
\n 2. Playground\n
\n \n
\n
\n \n \n \n
\n \n
\n \n
\n \n \n \n \n \n \n
\n
\n
\n
\n \n Menu\n
\n \n\n
\n
\n
\n\n

\n Download\n \n

\n\n

Build your Semantic download

\n \n \n
\n
\n \n
\n \n
\n \n
\n
\n\n
\n\n\n
\n\n\n", "contentRenderedWithoutLayouts": "\n\n
\n
\n
\n\n

\n Download\n \n

\n\n

Build your Semantic download

\n \n \n
\n
\n \n
\n \n
\n \n
\n
\n\n
\n\n\n
", "renderSingleExtensions": false, "layout": "default", "css": "download", "description": "Build your Semantic download", "type": "Library", "layoutRelativePath": "default.html.eco", "meta": { "layout": "default", "css": "download", "title": "Download", "description": "Build your Semantic download", "type": "Library" } }, { "fullPath": "/home/jack/projects/semantic/server/documents/element.html.eco", "relativePath": "element.html.eco", "basename": "element", "outBasename": "element", "extension": "eco", "outExtension": "html", "extensions": [ "html", "eco" ], "filename": "element.html.eco", "fullDirPath": "/home/jack/projects/semantic/server/documents", "outPath": "/home/jack/projects/semantic/docs/element.html", "outDirPath": "/home/jack/projects/semantic/docs", "outFilename": "element.html", "relativeOutPath": "element.html", "relativeDirPath": ".", "relativeOutDirPath": ".", "relativeBase": "element", "relativeOutBase": "element", "contentType": "application/octet-stream", "outContentType": "text/html", "ctime": "2013-12-04T07:12:08.000Z", "mtime": "2013-12-02T15:39:03.000Z", "rtime": "2013-12-04T09:15:24.320Z", "wtime": "2013-12-04T09:15:28.570Z", "exists": true, "encoding": "utf8", "source": "---\nlayout : 'default'\ncss : 'progress'\n\ntitle : 'UI Elements'\ndescription : 'Elements are the basic building blocks of a website.'\ntype : 'Semantic'\n---\n\n<%- @partial('header') %>\n\n
\n\n
\n
\n Types\n
\n
\n\n

Types

\n\n
\n\n
\n
\n
\n Follow\n
\n

\n
\n
\n
\n
\n
\n
\n
\n Button\n

A button indicates a possible user action.

\n
\n
\n
\n
\n
\n
\n
\n Divider\n

A divider visually segments content into separate groups

\n
\n
\n
\n
\n

\n Section 2\n
The second section of the website
\n

\n
\n
\n Header\n

Headers provide a short summary of content

\n
\n
\n
\n
\n
\n
\n
\n
\n
\n Progress Bar\n

A progress bar displays progress on a task

\n
\n
\n
\n
\n
\n

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

\n
\n
\n
\n Segment\n

A segment is used to create a grouping of related content.

\n
\n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n Image\n

An image is a graphic representation of something

\n
\n
\n
\n
\n
\n
\n First\n
\n
\n Second\n
\n
\n Third\n
\n
\n Last\n
\n
\n
\n
\n Step\n

Steps show the current activity in a series of steps.

\n
\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n Icon\n

An icon is a glyph used to represent another concept more simply

\n
\n
\n
\n
\n
Dog
\n
\n
New
\n
\n

\n
HTML
\n
\n
\n Label\n

Labels give descriptions to sections of content.

\n
\n
\n
\n\n\n\n
", "content": "<%- @partial('header') %>\n\n
\n\n
\n
\n Types\n
\n
\n\n

Types

\n\n
\n\n
\n
\n
\n Follow\n
\n

\n
\n
\n
\n
\n
\n
\n
\n Button\n

A button indicates a possible user action.

\n
\n
\n
\n
\n
\n
\n
\n Divider\n

A divider visually segments content into separate groups

\n
\n
\n
\n
\n

\n Section 2\n
The second section of the website
\n

\n
\n
\n Header\n

Headers provide a short summary of content

\n
\n
\n
\n
\n
\n
\n
\n
\n
\n Progress Bar\n

A progress bar displays progress on a task

\n
\n
\n
\n
\n
\n

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

\n
\n
\n
\n Segment\n

A segment is used to create a grouping of related content.

\n
\n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n Image\n

An image is a graphic representation of something

\n
\n
\n
\n
\n
\n
\n First\n
\n
\n Second\n
\n
\n Third\n
\n
\n Last\n
\n
\n
\n
\n Step\n

Steps show the current activity in a series of steps.

\n
\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n Icon\n

An icon is a glyph used to represent another concept more simply

\n
\n
\n
\n
\n
Dog
\n
\n
New
\n
\n

\n
HTML
\n
\n
\n Label\n

Labels give descriptions to sections of content.

\n
\n
\n
\n\n\n\n
", "tags": null, "render": true, "write": true, "writeSource": false, "dynamic": false, "title": "UI Elements", "name": "element.html", "date": "2013-12-02T15:39:03.000Z", "slug": "element", "url": "/element.html", "urls": [ "/element.html" ], "ignored": false, "standalone": false, "referencesOthers": true, "header": "layout : 'default'\ncss : 'progress'\n\ntitle : 'UI Elements'\ndescription : 'Elements are the basic building blocks of a website.'\ntype : 'Semantic'", "parser": "yaml", "body": "<%- @partial('header') %>\n\n
\n\n
\n
\n Types\n
\n
\n\n

Types

\n\n
\n\n
\n
\n
\n Follow\n
\n

\n
\n
\n
\n
\n
\n
\n
\n Button\n

A button indicates a possible user action.

\n
\n
\n
\n
\n
\n
\n
\n Divider\n

A divider visually segments content into separate groups

\n
\n
\n
\n
\n

\n Section 2\n
The second section of the website
\n

\n
\n
\n Header\n

Headers provide a short summary of content

\n
\n
\n
\n
\n
\n
\n
\n
\n
\n Progress Bar\n

A progress bar displays progress on a task

\n
\n
\n
\n
\n
\n

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

\n
\n
\n
\n Segment\n

A segment is used to create a grouping of related content.

\n
\n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n Image\n

An image is a graphic representation of something

\n
\n
\n
\n
\n
\n
\n First\n
\n
\n Second\n
\n
\n Third\n
\n
\n Last\n
\n
\n
\n
\n Step\n

Steps show the current activity in a series of steps.

\n
\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n Icon\n

An icon is a glyph used to represent another concept more simply

\n
\n
\n
\n
\n
Dog
\n
\n
New
\n
\n

\n
HTML
\n
\n
\n Label\n

Labels give descriptions to sections of content.

\n
\n
\n
\n\n\n\n
", "rendered": true, "contentRendered": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n \n \n \n \n\n \n\n \n \n UI Elements | Semantic UI\n\n \n \n\n \n\n \n \n \n\n \n\n \n \n \n \n \n \n \n \n\n \n \n \n\n \n \n\n\n
\n \n Close Menu\n \n \n Download\n \n
\n \n Introduction\n \n
\n \n Definitions\n \n Overview\n \n Types\n \n Variations\n \n What's Different\n \n
\n
\n
\n Project\n
\n \n Contributing\n \n Set-up\n \n
\n
\n
\n Elements\n
\n \n Button\n \n Divider\n \n Header\n \n Icon\n \n Image\n \n Input\n \n Label\n \n Loader\n \n Progress\n \n Reveal\n \n Segment\n \n Step\n \n
\n
\n
\n Collections\n
\n \n Breadcrumb\n \n Form\n \n Grid\n \n Menu\n \n Message\n \n Table\n \n
\n
\n
\n Views\n
\n \n Comment\n \n Feed\n \n Item\n \n List\n \n
\n
\n
\n Modules\n
\n \n Accordion\n \n Checkbox\n \n Dimmer\n \n Dropdown\n \n Modal\n \n Popup\n \n Rating\n \n Shape\n \n Sidebar\n \n Transition\n \n
\n
\n
\n Behavior\n
\n \n Form Validation\n \n
\n
\n
\n Style Guide\n
\n \n CSS\n \n Javascript\n \n Language\n \n
\n
\n\n
\n\n
\n
\n Content\n
\n Semantic: UI Elements\n
\n \n \n \n
\n 3 of 4\n
\n \n
\n 1. Introduction\n
\n \n
\n 2. UI Collections\n
\n \n
\n 3. UI Elements\n
\n \n
\n 4. UI Modules\n
\n \n
\n
\n \n \n \n
\n \n
\n \n
\n \n \n \n \n \n \n
\n
\n
\n
\n \n Menu\n
\n \n\n
\n
\n
\n\n

\n UI Elements\n \n

\n\n

Elements are the basic building blocks of a website.

\n \n \n
\n
\n \n
\n \n
\n \n
\n
\n\n
\n\n
\n
\n Types\n
\n
\n\n

Types

\n\n
\n\n
\n
\n
\n Follow\n
\n

\n
\n
\n
\n
\n
\n
\n
\n Button\n

A button indicates a possible user action.

\n
\n
\n
\n
\n
\n
\n
\n Divider\n

A divider visually segments content into separate groups

\n
\n
\n
\n
\n

\n Section 2\n
The second section of the website
\n

\n
\n
\n Header\n

Headers provide a short summary of content

\n
\n
\n
\n
\n
\n
\n
\n
\n
\n Progress Bar\n

A progress bar displays progress on a task

\n
\n
\n
\n
\n
\n

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

\n
\n
\n
\n Segment\n

A segment is used to create a grouping of related content.

\n
\n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n Image\n

An image is a graphic representation of something

\n
\n
\n
\n
\n
\n
\n First\n
\n
\n Second\n
\n
\n Third\n
\n
\n Last\n
\n
\n
\n
\n Step\n

Steps show the current activity in a series of steps.

\n
\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n Icon\n

An icon is a glyph used to represent another concept more simply

\n
\n
\n
\n
\n
Dog
\n
\n
New
\n
\n

\n
HTML
\n
\n
\n Label\n

Labels give descriptions to sections of content.

\n
\n
\n
\n\n\n\n
\n\n\n", "contentRenderedWithoutLayouts": "\n\n
\n
\n
\n\n

\n UI Elements\n \n

\n\n

Elements are the basic building blocks of a website.

\n \n \n
\n
\n \n
\n \n
\n \n
\n
\n\n
\n\n
\n
\n Types\n
\n
\n\n

Types

\n\n
\n\n
\n
\n
\n Follow\n
\n

\n
\n
\n
\n
\n
\n
\n
\n Button\n

A button indicates a possible user action.

\n
\n
\n
\n
\n
\n
\n
\n Divider\n

A divider visually segments content into separate groups

\n
\n
\n
\n
\n

\n Section 2\n
The second section of the website
\n

\n
\n
\n Header\n

Headers provide a short summary of content

\n
\n
\n
\n
\n
\n
\n
\n
\n
\n Progress Bar\n

A progress bar displays progress on a task

\n
\n
\n
\n
\n
\n

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

\n
\n
\n
\n Segment\n

A segment is used to create a grouping of related content.

\n
\n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n Image\n

An image is a graphic representation of something

\n
\n
\n
\n
\n
\n
\n First\n
\n
\n Second\n
\n
\n Third\n
\n
\n Last\n
\n
\n
\n
\n Step\n

Steps show the current activity in a series of steps.

\n
\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n Icon\n

An icon is a glyph used to represent another concept more simply

\n
\n
\n
\n
\n
Dog
\n
\n
New
\n
\n

\n
HTML
\n
\n
\n Label\n

Labels give descriptions to sections of content.

\n
\n
\n
\n\n\n\n
", "renderSingleExtensions": false, "layout": "default", "css": "progress", "description": "Elements are the basic building blocks of a website.", "type": "Semantic", "layoutRelativePath": "default.html.eco", "meta": { "layout": "default", "css": "progress", "title": "UI Elements", "description": "Elements are the basic building blocks of a website.", "type": "Semantic" } }, { "fullPath": "/home/jack/projects/semantic/server/documents/index.html.eco", "relativePath": "index.html.eco", "basename": "index", "outBasename": "index", "extension": "eco", "outExtension": "html", "extensions": [ "html", "eco" ], "filename": "index.html.eco", "fullDirPath": "/home/jack/projects/semantic/server/documents", "outPath": "/home/jack/projects/semantic/docs/index.html", "outDirPath": "/home/jack/projects/semantic/docs", "outFilename": "index.html", "relativeOutPath": "index.html", "relativeDirPath": ".", "relativeOutDirPath": ".", "relativeBase": "index", "relativeOutBase": "index", "contentType": "application/octet-stream", "outContentType": "text/html", "ctime": "2013-12-04T09:09:22.000Z", "mtime": "2013-12-04T09:09:22.000Z", "rtime": "2013-12-04T09:15:24.075Z", "wtime": "2013-12-04T09:15:28.574Z", "exists": true, "encoding": "utf8", "source": "---\nlayout : 'default'\ncss : 'index'\ntitle : 'Introduction'\ntype : 'Semantic'\n---\n\n<% uiElements = @getCollection(\"uiElements\").toJSON() %>\n<% uiCollections = @getCollection(\"uiCollections\").toJSON() %>\n<% uiViews = @getCollection(\"uiViews\").toJSON() %>\n<% uiModules = @getCollection(\"uiModules\").toJSON() %>\n\n\n
\n
\n
\n
\n

Semantic UI 0.9.6

\n

UI is the vocabulary of the web.

\n

Semantic empowers designers and developers by creating a language for sharing UI.

\n View UI\n Download\n
\n
\n <% unless 'development' in @getEnvironments(): %>\n
\n <% end %>\n
\n
\n
\n
\n
\n
\n
\n

\n \n
\n Lose the Hieroglyphics\n
Semantic is structured around natural language conventions to make development more intuitive.\n
\n
\n

\n
\n Semantic is tag ambivalent meaning you can use any html tags with UI elements.\n
\n
\n
\n
\n Semantic\n
\n
\n \n
2
\n
3
\n
\n
\n
\n
\n
Bootstrap
\n
\n
\n
1
\n
2
\n
3
\n
\n
\n
\n
\n
\n
\n Semantic\n
\n \n
\n
\n
\n
Bootstrap
\n
\n
\n Title\n \n
\n
\n
\n
\n
\n
\n Semantic\n
\n \n
\n
\n
\n
Bootstrap
\n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

\n \n
Have a conversation with your components
Semantic gives you a variety of UI components with real-time debug output, letting your code tell you what its doing.
\n
\n

\n
\n \n
\n
\n
\n
\n
Open up your web console.
\n Semantic provides tracing for javascript behavior so your components can tell you what they're doing as they do it.

\n
\n $('.kitten.image')\n .transition('scale in')\n .transition('tada', '800ms')\n ;\n
\n\n Learn about modules \n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n

\n \n
\n Alter Designs Effortlessly\n
Redesign without lifting a finger\n
\n
\n

\n
\n
\n

Let's create some tabs

\n
\n
\n
Site.com
\n Browse\n Search\n Help\n
\n
\n

Tab content

\n
\n
\n
\n

Hmm maybe it should point to the content below it

\n
\n
\n
Site.com
\n Home\n About\n Contact\n
\n
\n

Tab content

\n
\n
\n
\n
\n
\n
\n
\n
\n

\n \n
Growing Everyday\n
New UI components are written everyday. Check back soon to see more.
\n
\n

\n
\n \n
\n
\n
\n
\n
\n
\n
<%= uiElements.length %>
\n
UI Elements
\n
\n
\n <% for element in uiElements: %>\n \"><%= element.title %>\n <% end %>\n
\n
\n
\n
\n
\n
\n
<%= uiCollections.length %>
\n
UI Collections
\n
\n
\n <% for element in uiCollections: %>\n \"><%= element.title %>\n <% end %>\n
\n
\n
\n
\n
\n
\n
<%= uiViews.length %>
\n
UI Views
\n
\n
\n <% for element in uiViews: %>\n \"><%= element.title %>\n <% end %>\n
\n
\n
\n
\n
\n
\n
<%= uiModules.length %>
\n
UI Modules
\n
\n
\n <% for element in uiModules: %>\n \"><%= element.title %>\n <% end %>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
jack lukic 2013
\n Github\n
\n Made possibly by Quirky.com\n
\n
\n Tested with Browser Stack\n
\n
\n", "content": "<% uiElements = @getCollection(\"uiElements\").toJSON() %>\n<% uiCollections = @getCollection(\"uiCollections\").toJSON() %>\n<% uiViews = @getCollection(\"uiViews\").toJSON() %>\n<% uiModules = @getCollection(\"uiModules\").toJSON() %>\n\n\n
\n
\n
\n
\n

Semantic UI 0.9.6

\n

UI is the vocabulary of the web.

\n

Semantic empowers designers and developers by creating a language for sharing UI.

\n View UI\n Download\n
\n
\n <% unless 'development' in @getEnvironments(): %>\n
\n <% end %>\n
\n
\n
\n
\n
\n
\n
\n

\n \n
\n Lose the Hieroglyphics\n
Semantic is structured around natural language conventions to make development more intuitive.\n
\n
\n

\n
\n Semantic is tag ambivalent meaning you can use any html tags with UI elements.\n
\n
\n
\n
\n Semantic\n
\n
\n \n
2
\n
3
\n
\n
\n
\n
\n
Bootstrap
\n
\n
\n
1
\n
2
\n
3
\n
\n
\n
\n
\n
\n
\n Semantic\n
\n \n
\n
\n
\n
Bootstrap
\n
\n
\n Title\n \n
\n
\n
\n
\n
\n
\n Semantic\n
\n \n
\n
\n
\n
Bootstrap
\n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

\n \n
Have a conversation with your components
Semantic gives you a variety of UI components with real-time debug output, letting your code tell you what its doing.
\n
\n

\n
\n \n
\n
\n
\n
\n
Open up your web console.
\n Semantic provides tracing for javascript behavior so your components can tell you what they're doing as they do it.

\n
\n $('.kitten.image')\n .transition('scale in')\n .transition('tada', '800ms')\n ;\n
\n\n Learn about modules \n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n

\n \n
\n Alter Designs Effortlessly\n
Redesign without lifting a finger\n
\n
\n

\n
\n
\n

Let's create some tabs

\n
\n
\n
Site.com
\n Browse\n Search\n Help\n
\n
\n

Tab content

\n
\n
\n
\n

Hmm maybe it should point to the content below it

\n
\n
\n
Site.com
\n Home\n About\n Contact\n
\n
\n

Tab content

\n
\n
\n
\n
\n
\n
\n
\n
\n

\n \n
Growing Everyday\n
New UI components are written everyday. Check back soon to see more.
\n
\n

\n
\n \n
\n
\n
\n
\n
\n
\n
<%= uiElements.length %>
\n
UI Elements
\n
\n
\n <% for element in uiElements: %>\n \"><%= element.title %>\n <% end %>\n
\n
\n
\n
\n
\n
\n
<%= uiCollections.length %>
\n
UI Collections
\n
\n
\n <% for element in uiCollections: %>\n \"><%= element.title %>\n <% end %>\n
\n
\n
\n
\n
\n
\n
<%= uiViews.length %>
\n
UI Views
\n
\n
\n <% for element in uiViews: %>\n \"><%= element.title %>\n <% end %>\n
\n
\n
\n
\n
\n
\n
<%= uiModules.length %>
\n
UI Modules
\n
\n
\n <% for element in uiModules: %>\n \"><%= element.title %>\n <% end %>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
jack lukic 2013
\n Github\n
\n Made possibly by Quirky.com\n
\n
\n Tested with Browser Stack\n
\n
", "tags": null, "render": true, "write": true, "writeSource": false, "dynamic": false, "title": "Introduction", "name": "index.html", "date": "2013-12-04T09:09:22.000Z", "slug": "index", "url": "/index.html", "urls": [ "/index.html" ], "ignored": false, "standalone": false, "referencesOthers": true, "header": "layout : 'default'\ncss : 'index'\ntitle : 'Introduction'\ntype : 'Semantic'", "parser": "yaml", "body": "<% uiElements = @getCollection(\"uiElements\").toJSON() %>\n<% uiCollections = @getCollection(\"uiCollections\").toJSON() %>\n<% uiViews = @getCollection(\"uiViews\").toJSON() %>\n<% uiModules = @getCollection(\"uiModules\").toJSON() %>\n\n\n
\n
\n
\n
\n

Semantic UI 0.9.6

\n

UI is the vocabulary of the web.

\n

Semantic empowers designers and developers by creating a language for sharing UI.

\n View UI\n Download\n
\n
\n <% unless 'development' in @getEnvironments(): %>\n
\n <% end %>\n
\n
\n
\n
\n
\n
\n
\n

\n \n
\n Lose the Hieroglyphics\n
Semantic is structured around natural language conventions to make development more intuitive.\n
\n
\n

\n
\n Semantic is tag ambivalent meaning you can use any html tags with UI elements.\n
\n
\n
\n
\n Semantic\n
\n
\n \n
2
\n
3
\n
\n
\n
\n
\n
Bootstrap
\n
\n
\n
1
\n
2
\n
3
\n
\n
\n
\n
\n
\n
\n Semantic\n
\n \n
\n
\n
\n
Bootstrap
\n
\n
\n Title\n \n
\n
\n
\n
\n
\n
\n Semantic\n
\n \n
\n
\n
\n
Bootstrap
\n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

\n \n
Have a conversation with your components
Semantic gives you a variety of UI components with real-time debug output, letting your code tell you what its doing.
\n
\n

\n
\n \n
\n
\n
\n
\n
Open up your web console.
\n Semantic provides tracing for javascript behavior so your components can tell you what they're doing as they do it.

\n
\n $('.kitten.image')\n .transition('scale in')\n .transition('tada', '800ms')\n ;\n
\n\n Learn about modules \n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n

\n \n
\n Alter Designs Effortlessly\n
Redesign without lifting a finger\n
\n
\n

\n
\n
\n

Let's create some tabs

\n
\n
\n
Site.com
\n Browse\n Search\n Help\n
\n
\n

Tab content

\n
\n
\n
\n

Hmm maybe it should point to the content below it

\n
\n
\n
Site.com
\n Home\n About\n Contact\n
\n
\n

Tab content

\n
\n
\n
\n
\n
\n
\n
\n
\n

\n \n
Growing Everyday\n
New UI components are written everyday. Check back soon to see more.
\n
\n

\n
\n \n
\n
\n
\n
\n
\n
\n
<%= uiElements.length %>
\n
UI Elements
\n
\n
\n <% for element in uiElements: %>\n \"><%= element.title %>\n <% end %>\n
\n
\n
\n
\n
\n
\n
<%= uiCollections.length %>
\n
UI Collections
\n
\n
\n <% for element in uiCollections: %>\n \"><%= element.title %>\n <% end %>\n
\n
\n
\n
\n
\n
\n
<%= uiViews.length %>
\n
UI Views
\n
\n
\n <% for element in uiViews: %>\n \"><%= element.title %>\n <% end %>\n
\n
\n
\n
\n
\n
\n
<%= uiModules.length %>
\n
UI Modules
\n
\n
\n <% for element in uiModules: %>\n \"><%= element.title %>\n <% end %>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
jack lukic 2013
\n Github\n
\n Made possibly by Quirky.com\n
\n
\n Tested with Browser Stack\n
\n
", "rendered": true, "contentRendered": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n \n \n \n \n\n \n\n \n \n Introduction | Semantic UI\n\n \n \n\n \n\n \n \n \n\n \n\n \n \n \n \n \n \n \n \n\n \n \n \n\n \n \n\n\n
\n \n Close Menu\n \n \n Download\n \n
\n \n Introduction\n \n
\n \n Definitions\n \n Overview\n \n Types\n \n Variations\n \n What's Different\n \n
\n
\n
\n Project\n
\n \n Contributing\n \n Set-up\n \n
\n
\n
\n Elements\n
\n \n Button\n \n Divider\n \n Header\n \n Icon\n \n Image\n \n Input\n \n Label\n \n Loader\n \n Progress\n \n Reveal\n \n Segment\n \n Step\n \n
\n
\n
\n Collections\n
\n \n Breadcrumb\n \n Form\n \n Grid\n \n Menu\n \n Message\n \n Table\n \n
\n
\n
\n Views\n
\n \n Comment\n \n Feed\n \n Item\n \n List\n \n
\n
\n
\n Modules\n
\n \n Accordion\n \n Checkbox\n \n Dimmer\n \n Dropdown\n \n Modal\n \n Popup\n \n Rating\n \n Shape\n \n Sidebar\n \n Transition\n \n
\n
\n
\n Behavior\n
\n \n Form Validation\n \n
\n
\n
\n Style Guide\n
\n \n CSS\n \n Javascript\n \n Language\n \n
\n
\n\n
\n\n
\n
\n Content\n
\n Semantic: Introduction\n
\n \n
\n \n
\n 1 of 4\n
\n \n
\n 1. Introduction\n
\n \n
\n 2. UI Collections\n
\n \n
\n 3. UI Elements\n
\n \n
\n 4. UI Modules\n
\n \n
\n
\n \n \n \n
\n \n
\n \n
\n \n \n \n \n \n \n
\n
\n
\n
\n \n Menu\n
\n \n\n\n\n\n\n
\n
\n
\n
\n

Semantic UI 0.9.6

\n

UI is the vocabulary of the web.

\n

Semantic empowers designers and developers by creating a language for sharing UI.

\n View UI\n Download\n
\n
\n \n
\n \n
\n
\n
\n
\n
\n
\n
\n

\n \n
\n Lose the Hieroglyphics\n
Semantic is structured around natural language conventions to make development more intuitive.\n
\n
\n

\n
\n Semantic is tag ambivalent meaning you can use any html tags with UI elements.\n
\n
\n
\n
\n Semantic\n
\n
\n \n
2
\n
3
\n
\n
\n
\n
\n
Bootstrap
\n
\n
\n
1
\n
2
\n
3
\n
\n
\n
\n
\n
\n
\n Semantic\n
\n \n
\n
\n
\n
Bootstrap
\n
\n
\n Title\n \n
\n
\n
\n
\n
\n
\n Semantic\n
\n \n
\n
\n
\n
Bootstrap
\n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

\n \n
Have a conversation with your components
Semantic gives you a variety of UI components with real-time debug output, letting your code tell you what its doing.
\n
\n

\n
\n \n
\n
\n
\n
\n
Open up your web console.
\n Semantic provides tracing for javascript behavior so your components can tell you what they're doing as they do it.

\n
\n $('.kitten.image')\n .transition('scale in')\n .transition('tada', '800ms')\n ;\n
\n\n Learn about modules \n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n

\n \n
\n Alter Designs Effortlessly\n
Redesign without lifting a finger\n
\n
\n

\n
\n
\n

Let's create some tabs

\n
\n
\n
Site.com
\n Browse\n Search\n Help\n
\n
\n

Tab content

\n
\n
\n
\n

Hmm maybe it should point to the content below it

\n
\n
\n
Site.com
\n Home\n About\n Contact\n
\n
\n

Tab content

\n
\n
\n
\n
\n
\n
\n
\n
\n

\n \n
Growing Everyday\n
New UI components are written everyday. Check back soon to see more.
\n
\n

\n
\n \n
\n
\n
\n
\n
\n
\n
12
\n
UI Elements
\n
\n
\n \n Button\n \n Divider\n \n Header\n \n Icon\n \n Image\n \n Input\n \n Label\n \n Loader\n \n Progress\n \n Reveal\n \n Segment\n \n Step\n \n
\n
\n
\n
\n
\n
\n
6
\n
UI Collections
\n
\n
\n \n Breadcrumb\n \n Form\n \n Grid\n \n Menu\n \n Message\n \n Table\n \n
\n
\n
\n
\n
\n
\n
4
\n
UI Views
\n
\n
\n \n Comment\n \n Feed\n \n Item\n \n List\n \n
\n
\n
\n
\n
\n
\n
11
\n
UI Modules
\n
\n
\n \n Accordion\n \n Checkbox\n \n Dimmer\n \n Dropdown\n \n Form Validation\n \n Modal\n \n Popup\n \n Rating\n \n Shape\n \n Sidebar\n \n Transition\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
jack lukic 2013
\n Github\n
\n Made possibly by Quirky.com\n
\n
\n Tested with Browser Stack\n
\n
\n\n\n", "contentRenderedWithoutLayouts": "\n\n\n\n\n\n
\n
\n
\n
\n

Semantic UI 0.9.6

\n

UI is the vocabulary of the web.

\n

Semantic empowers designers and developers by creating a language for sharing UI.

\n View UI\n Download\n
\n
\n \n
\n \n
\n
\n
\n
\n
\n
\n
\n

\n \n
\n Lose the Hieroglyphics\n
Semantic is structured around natural language conventions to make development more intuitive.\n
\n
\n

\n
\n Semantic is tag ambivalent meaning you can use any html tags with UI elements.\n
\n
\n
\n
\n Semantic\n
\n
\n \n
2
\n
3
\n
\n
\n
\n
\n
Bootstrap
\n
\n
\n
1
\n
2
\n
3
\n
\n
\n
\n
\n
\n
\n Semantic\n
\n \n
\n
\n
\n
Bootstrap
\n
\n
\n Title\n \n
\n
\n
\n
\n
\n
\n Semantic\n
\n \n
\n
\n
\n
Bootstrap
\n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

\n \n
Have a conversation with your components
Semantic gives you a variety of UI components with real-time debug output, letting your code tell you what its doing.
\n
\n

\n
\n \n
\n
\n
\n
\n
Open up your web console.
\n Semantic provides tracing for javascript behavior so your components can tell you what they're doing as they do it.

\n
\n $('.kitten.image')\n .transition('scale in')\n .transition('tada', '800ms')\n ;\n
\n\n Learn about modules \n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n

\n \n
\n Alter Designs Effortlessly\n
Redesign without lifting a finger\n
\n
\n

\n
\n
\n

Let's create some tabs

\n
\n
\n
Site.com
\n Browse\n Search\n Help\n
\n
\n

Tab content

\n
\n
\n
\n

Hmm maybe it should point to the content below it

\n
\n
\n
Site.com
\n Home\n About\n Contact\n
\n
\n

Tab content

\n
\n
\n
\n
\n
\n
\n
\n
\n

\n \n
Growing Everyday\n
New UI components are written everyday. Check back soon to see more.
\n
\n

\n
\n \n
\n
\n
\n
\n
\n
\n
12
\n
UI Elements
\n
\n
\n \n Button\n \n Divider\n \n Header\n \n Icon\n \n Image\n \n Input\n \n Label\n \n Loader\n \n Progress\n \n Reveal\n \n Segment\n \n Step\n \n
\n
\n
\n
\n
\n
\n
6
\n
UI Collections
\n
\n
\n \n Breadcrumb\n \n Form\n \n Grid\n \n Menu\n \n Message\n \n Table\n \n
\n
\n
\n
\n
\n
\n
4
\n
UI Views
\n
\n
\n \n Comment\n \n Feed\n \n Item\n \n List\n \n
\n
\n
\n
\n
\n
\n
11
\n
UI Modules
\n
\n
\n \n Accordion\n \n Checkbox\n \n Dimmer\n \n Dropdown\n \n Form Validation\n \n Modal\n \n Popup\n \n Rating\n \n Shape\n \n Sidebar\n \n Transition\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
jack lukic 2013
\n Github\n
\n Made possibly by Quirky.com\n
\n
\n Tested with Browser Stack\n
\n
", "renderSingleExtensions": false, "layout": "default", "css": "index", "type": "Semantic", "layoutRelativePath": "default.html.eco", "meta": { "layout": "default", "css": "index", "title": "Introduction", "type": "Semantic" } }, { "fullPath": "/home/jack/projects/semantic/server/documents/introduction.html.eco", "relativePath": "introduction.html.eco", "basename": "introduction", "outBasename": "introduction", "extension": "eco", "outExtension": "html", "extensions": [ "html", "eco" ], "filename": "introduction.html.eco", "fullDirPath": "/home/jack/projects/semantic/server/documents", "outPath": "/home/jack/projects/semantic/docs/introduction.html", "outDirPath": "/home/jack/projects/semantic/docs", "outFilename": "introduction.html", "relativeOutPath": "introduction.html", "relativeDirPath": ".", "relativeOutDirPath": ".", "relativeBase": "introduction", "relativeOutBase": "introduction", "contentType": "application/octet-stream", "outContentType": "text/html", "ctime": "2013-12-04T07:12:08.000Z", "mtime": "2013-12-02T15:39:03.000Z", "rtime": "2013-12-04T09:15:24.421Z", "wtime": "2013-12-04T09:15:28.577Z", "exists": true, "encoding": "utf8", "source": " ---\nlayout : 'default'\ncss : 'guide'\ntitle : \"What's Different\"\ndescription : 'Separating Semantic from the pack'\ntype : 'UI Introduction'\n---\n\n\n<%- @partial('header') %>\n\n
\n
\n
\n Philosophy\n
\n
\n\n

\n Build Responsive Layouts Easier\n
Designed Completely with EM
\n

\n

Every component is defined using em and rem so that components can be resized simply on the fly. Want a menu to get smaller on mobile? Simply have it's font-size change using a media query.

\n\n

\n Self Explanatory\n
Descriptive not Prescriptive
\n

\n

Writing front end code shouldn't require learning the naming or programming conventions of a particular developer.

\n

Instead of using short-hand, or codifying naming conventions, Semantic uses simple, common language for parts of interface elements, and familiar patterns found in natural languages for describing elements.

\n\n

\n Tag ambivalent\n
Use whatever html tags you please.
\n

\n

Interface definitions in Semantic are tag ambivalent. That means you can use div, article, section, span without affecting the display of the element. Special tags like a, table, td still carry special meaning in certain circumstances however.

\n\n

\n Powerful tools for expressing groups and collections.\n
Don't repeat yourself
\n

\n

In English it's much easier to say \"There are three tall men\" than \"There is a tall man, a tall man and a tall man\".

\n

In Semantic element definitions can be expressed in groups have shared attributes like size, color, type avoiding repetitive declarations.

\n\n

\n Portable and self-contained.\n
Using Semantic doesn't mean adopting an entire framework, or rewriting your code base
\n

\n

Semantic components are written in a singular style, but are not part of mandated overarching library. Only like a couple components? No problem, use only what you need.

\n

UI components in Semantic also define optional and required couplings with other components where their usage intersect. That means for example, a popup can check for the existence of CSS animation component before using the fallback javascript animations.

\n\n

\n Shared language, different implementations\n
Restyle your site without Restructuring it
\n

\n\n

Describing your site's content using a common language like Semantic allows other developers to create UI definitions to match one shared vocabulary. This means you can redesign your website without retooling your html. Simply alter the look and feel of your UI using a different UI style definition.

\n\n

\n Only the important stuff\n
Not the kitchen sink
\n

\n

Instead of giving every possible variation or behavior under the sun, element definitions are designed to be a starting off point. No oversized downloads with optional features you will most likely never use, just the stuff to get you going.

\n\n
\n\n \n Next: UI Definitions\n \n \n\n
\n", "content": "\n\n<%- @partial('header') %>\n\n
\n
\n
\n Philosophy\n
\n
\n\n

\n Build Responsive Layouts Easier\n
Designed Completely with EM
\n

\n

Every component is defined using em and rem so that components can be resized simply on the fly. Want a menu to get smaller on mobile? Simply have it's font-size change using a media query.

\n\n

\n Self Explanatory\n
Descriptive not Prescriptive
\n

\n

Writing front end code shouldn't require learning the naming or programming conventions of a particular developer.

\n

Instead of using short-hand, or codifying naming conventions, Semantic uses simple, common language for parts of interface elements, and familiar patterns found in natural languages for describing elements.

\n\n

\n Tag ambivalent\n
Use whatever html tags you please.
\n

\n

Interface definitions in Semantic are tag ambivalent. That means you can use div, article, section, span without affecting the display of the element. Special tags like a, table, td still carry special meaning in certain circumstances however.

\n\n

\n Powerful tools for expressing groups and collections.\n
Don't repeat yourself
\n

\n

In English it's much easier to say \"There are three tall men\" than \"There is a tall man, a tall man and a tall man\".

\n

In Semantic element definitions can be expressed in groups have shared attributes like size, color, type avoiding repetitive declarations.

\n\n

\n Portable and self-contained.\n
Using Semantic doesn't mean adopting an entire framework, or rewriting your code base
\n

\n

Semantic components are written in a singular style, but are not part of mandated overarching library. Only like a couple components? No problem, use only what you need.

\n

UI components in Semantic also define optional and required couplings with other components where their usage intersect. That means for example, a popup can check for the existence of CSS animation component before using the fallback javascript animations.

\n\n

\n Shared language, different implementations\n
Restyle your site without Restructuring it
\n

\n\n

Describing your site's content using a common language like Semantic allows other developers to create UI definitions to match one shared vocabulary. This means you can redesign your website without retooling your html. Simply alter the look and feel of your UI using a different UI style definition.

\n\n

\n Only the important stuff\n
Not the kitchen sink
\n

\n

Instead of giving every possible variation or behavior under the sun, element definitions are designed to be a starting off point. No oversized downloads with optional features you will most likely never use, just the stuff to get you going.

\n\n
\n\n \n Next: UI Definitions\n \n \n\n
", "tags": null, "render": true, "write": true, "writeSource": false, "dynamic": false, "title": "What's Different", "name": "introduction.html", "date": "2013-12-02T15:39:03.000Z", "slug": "introduction", "url": "/introduction.html", "urls": [ "/introduction.html" ], "ignored": false, "standalone": false, "referencesOthers": true, "header": "layout : 'default'\ncss : 'guide'\ntitle : \"What's Different\"\ndescription : 'Separating Semantic from the pack'\ntype : 'UI Introduction'", "parser": "yaml", "body": "\n\n<%- @partial('header') %>\n\n
\n
\n
\n Philosophy\n
\n
\n\n

\n Build Responsive Layouts Easier\n
Designed Completely with EM
\n

\n

Every component is defined using em and rem so that components can be resized simply on the fly. Want a menu to get smaller on mobile? Simply have it's font-size change using a media query.

\n\n

\n Self Explanatory\n
Descriptive not Prescriptive
\n

\n

Writing front end code shouldn't require learning the naming or programming conventions of a particular developer.

\n

Instead of using short-hand, or codifying naming conventions, Semantic uses simple, common language for parts of interface elements, and familiar patterns found in natural languages for describing elements.

\n\n

\n Tag ambivalent\n
Use whatever html tags you please.
\n

\n

Interface definitions in Semantic are tag ambivalent. That means you can use div, article, section, span without affecting the display of the element. Special tags like a, table, td still carry special meaning in certain circumstances however.

\n\n

\n Powerful tools for expressing groups and collections.\n
Don't repeat yourself
\n

\n

In English it's much easier to say \"There are three tall men\" than \"There is a tall man, a tall man and a tall man\".

\n

In Semantic element definitions can be expressed in groups have shared attributes like size, color, type avoiding repetitive declarations.

\n\n

\n Portable and self-contained.\n
Using Semantic doesn't mean adopting an entire framework, or rewriting your code base
\n

\n

Semantic components are written in a singular style, but are not part of mandated overarching library. Only like a couple components? No problem, use only what you need.

\n

UI components in Semantic also define optional and required couplings with other components where their usage intersect. That means for example, a popup can check for the existence of CSS animation component before using the fallback javascript animations.

\n\n

\n Shared language, different implementations\n
Restyle your site without Restructuring it
\n

\n\n

Describing your site's content using a common language like Semantic allows other developers to create UI definitions to match one shared vocabulary. This means you can redesign your website without retooling your html. Simply alter the look and feel of your UI using a different UI style definition.

\n\n

\n Only the important stuff\n
Not the kitchen sink
\n

\n

Instead of giving every possible variation or behavior under the sun, element definitions are designed to be a starting off point. No oversized downloads with optional features you will most likely never use, just the stuff to get you going.

\n\n
\n\n \n Next: UI Definitions\n \n \n\n
", "rendered": true, "contentRendered": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n \n \n \n \n\n \n\n \n \n What's Different | Semantic UI\n\n \n \n\n \n\n \n \n \n\n \n\n \n \n \n \n \n \n \n \n\n \n \n \n\n \n \n\n\n
\n \n Close Menu\n \n \n Download\n \n
\n \n Introduction\n \n
\n \n Definitions\n \n Overview\n \n Types\n \n Variations\n \n What's Different\n \n
\n
\n
\n Project\n
\n \n Contributing\n \n Set-up\n \n
\n
\n
\n Elements\n
\n \n Button\n \n Divider\n \n Header\n \n Icon\n \n Image\n \n Input\n \n Label\n \n Loader\n \n Progress\n \n Reveal\n \n Segment\n \n Step\n \n
\n
\n
\n Collections\n
\n \n Breadcrumb\n \n Form\n \n Grid\n \n Menu\n \n Message\n \n Table\n \n
\n
\n
\n Views\n
\n \n Comment\n \n Feed\n \n Item\n \n List\n \n
\n
\n
\n Modules\n
\n \n Accordion\n \n Checkbox\n \n Dimmer\n \n Dropdown\n \n Modal\n \n Popup\n \n Rating\n \n Shape\n \n Sidebar\n \n Transition\n \n
\n
\n
\n Behavior\n
\n \n Form Validation\n \n
\n
\n
\n Style Guide\n
\n \n CSS\n \n Javascript\n \n Language\n \n
\n
\n\n
\n\n
\n
\n Content\n
\n UI Introduction: What's Different\n
\n \n \n \n
\n 5 of 5\n
\n \n
\n 1. Definitions\n
\n \n
\n 2. Overview\n
\n \n
\n 3. Types\n
\n \n
\n 4. Variations\n
\n \n
\n 5. What's Different\n
\n \n
\n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n \n \n \n
\n
\n
\n
\n \n Menu\n
\n \n\n\n\n
\n
\n
\n\n

\n What's Different\n \n

\n\n

Separating Semantic from the pack

\n \n \n
\n
\n \n
\n \n
\n \n
\n
\n\n
\n
\n
\n Philosophy\n
\n
\n\n

\n Build Responsive Layouts Easier\n
Designed Completely with EM
\n

\n

Every component is defined using em and rem so that components can be resized simply on the fly. Want a menu to get smaller on mobile? Simply have it's font-size change using a media query.

\n\n

\n Self Explanatory\n
Descriptive not Prescriptive
\n

\n

Writing front end code shouldn't require learning the naming or programming conventions of a particular developer.

\n

Instead of using short-hand, or codifying naming conventions, Semantic uses simple, common language for parts of interface elements, and familiar patterns found in natural languages for describing elements.

\n\n

\n Tag ambivalent\n
Use whatever html tags you please.
\n

\n

Interface definitions in Semantic are tag ambivalent. That means you can use div, article, section, span without affecting the display of the element. Special tags like a, table, td still carry special meaning in certain circumstances however.

\n\n

\n Powerful tools for expressing groups and collections.\n
Don't repeat yourself
\n

\n

In English it's much easier to say \"There are three tall men\" than \"There is a tall man, a tall man and a tall man\".

\n

In Semantic element definitions can be expressed in groups have shared attributes like size, color, type avoiding repetitive declarations.

\n\n

\n Portable and self-contained.\n
Using Semantic doesn't mean adopting an entire framework, or rewriting your code base
\n

\n

Semantic components are written in a singular style, but are not part of mandated overarching library. Only like a couple components? No problem, use only what you need.

\n

UI components in Semantic also define optional and required couplings with other components where their usage intersect. That means for example, a popup can check for the existence of CSS animation component before using the fallback javascript animations.

\n\n

\n Shared language, different implementations\n
Restyle your site without Restructuring it
\n

\n\n

Describing your site's content using a common language like Semantic allows other developers to create UI definitions to match one shared vocabulary. This means you can redesign your website without retooling your html. Simply alter the look and feel of your UI using a different UI style definition.

\n\n

\n Only the important stuff\n
Not the kitchen sink
\n

\n

Instead of giving every possible variation or behavior under the sun, element definitions are designed to be a starting off point. No oversized downloads with optional features you will most likely never use, just the stuff to get you going.

\n\n
\n\n \n Next: UI Definitions\n \n \n\n
\n\n\n", "contentRenderedWithoutLayouts": "\n\n\n\n
\n
\n
\n\n

\n What's Different\n \n

\n\n

Separating Semantic from the pack

\n \n \n
\n
\n \n
\n \n
\n \n
\n
\n\n
\n
\n
\n Philosophy\n
\n
\n\n

\n Build Responsive Layouts Easier\n
Designed Completely with EM
\n

\n

Every component is defined using em and rem so that components can be resized simply on the fly. Want a menu to get smaller on mobile? Simply have it's font-size change using a media query.

\n\n

\n Self Explanatory\n
Descriptive not Prescriptive
\n

\n

Writing front end code shouldn't require learning the naming or programming conventions of a particular developer.

\n

Instead of using short-hand, or codifying naming conventions, Semantic uses simple, common language for parts of interface elements, and familiar patterns found in natural languages for describing elements.

\n\n

\n Tag ambivalent\n
Use whatever html tags you please.
\n

\n

Interface definitions in Semantic are tag ambivalent. That means you can use div, article, section, span without affecting the display of the element. Special tags like a, table, td still carry special meaning in certain circumstances however.

\n\n

\n Powerful tools for expressing groups and collections.\n
Don't repeat yourself
\n

\n

In English it's much easier to say \"There are three tall men\" than \"There is a tall man, a tall man and a tall man\".

\n

In Semantic element definitions can be expressed in groups have shared attributes like size, color, type avoiding repetitive declarations.

\n\n

\n Portable and self-contained.\n
Using Semantic doesn't mean adopting an entire framework, or rewriting your code base
\n

\n

Semantic components are written in a singular style, but are not part of mandated overarching library. Only like a couple components? No problem, use only what you need.

\n

UI components in Semantic also define optional and required couplings with other components where their usage intersect. That means for example, a popup can check for the existence of CSS animation component before using the fallback javascript animations.

\n\n

\n Shared language, different implementations\n
Restyle your site without Restructuring it
\n

\n\n

Describing your site's content using a common language like Semantic allows other developers to create UI definitions to match one shared vocabulary. This means you can redesign your website without retooling your html. Simply alter the look and feel of your UI using a different UI style definition.

\n\n

\n Only the important stuff\n
Not the kitchen sink
\n

\n

Instead of giving every possible variation or behavior under the sun, element definitions are designed to be a starting off point. No oversized downloads with optional features you will most likely never use, just the stuff to get you going.

\n\n
\n\n \n Next: UI Definitions\n \n \n\n
", "renderSingleExtensions": false, "layout": "default", "css": "guide", "description": "Separating Semantic from the pack", "type": "UI Introduction", "layoutRelativePath": "default.html.eco", "meta": { "layout": "default", "css": "guide", "title": "What's Different", "description": "Separating Semantic from the pack", "type": "UI Introduction" } }, { "fullPath": "/home/jack/projects/semantic/server/documents/module.html.eco", "relativePath": "module.html.eco", "basename": "module", "outBasename": "module", "extension": "eco", "outExtension": "html", "extensions": [ "html", "eco" ], "filename": "module.html.eco", "fullDirPath": "/home/jack/projects/semantic/server/documents", "outPath": "/home/jack/projects/semantic/docs/module.html", "outDirPath": "/home/jack/projects/semantic/docs", "outFilename": "module.html", "relativeOutPath": "module.html", "relativeDirPath": ".", "relativeOutDirPath": ".", "relativeBase": "module", "relativeOutBase": "module", "contentType": "application/octet-stream", "outContentType": "text/html", "ctime": "2013-12-04T07:12:08.000Z", "mtime": "2013-12-02T15:39:03.000Z", "rtime": "2013-12-04T09:15:24.504Z", "wtime": "2013-12-04T09:15:28.580Z", "exists": true, "encoding": "utf8", "source": "---\nlayout : 'default'\ncss : 'module'\n\ntitle : 'UI Modules'\ndescription : 'Modules are interface elements whose behavior is an essential part of their definition'\ntype : 'Semantic'\n---\n\n<%- @partial('header', { tabs: { overview: 'Overview', init: 'Initializing', behavior: 'Behaviors', settings: 'Settings'} }) %>\n\n
\n\n
\n\n

All official javascript modules in Semantic are designed using a singular design pattern. This pattern allows several useful features common to all javascript components

\n
\n
\n \n
\n
Run-time Performance Analysis
\n

Semantic modules all provide the ability to log performance traces to the console, allowing you to see which aspects of the module are more or less performant and to track total init time onDomReady

\n
\n
\n
\n \n
\n
Human Readable Traces
\n

Unlike other component libraries which hides explanations of behavior in inline comments which can only be read by combing the source, semantic modules provide run-time debug output to the javascript console telling you what each component is doing as it is doing it.

\n
\n
\n
\n \n
\n
Settings can be overwritten after initialization
\n

Semantic provides methods to set default settings, set settings at initialization, and set settings after initialization, allowing complete flexibility over component behaviors.

\n
\n
\n
\n \n
\n
All modules include an initialize and destroy method
\n

All events and metadata are namespaced and can be removed after initialization, modules automatically handle destroy/init events to allow users to lazy-initialize a plugin multiple times with no issues.

\n
\n
\n
\n \n
\n
Instance available in metadata
\n

Modules store their instance in metadata meaning that, in a pinch, you can directly modify the instance of a UI element by modifying its properties.

\n
\n
\n
\n
\n \n \n Real World Commented Example\n \n \n \n Commented Design Pattern\n \n
\n
\n

Overview

\n

Semantic does not automatically attach any events on page load. You must decide which modules to initialize on each page by initializing a module in javascript.

\n
It's okay to initialize an element multiple times, the element will automatically destroy the previous instance and re-initialize with the settings provided.
\n

Example of Initializing

\n

The following example shows how to attach behavior to elements on a page using Semantic

\n
\n
\n
\n \n
\n \n
\n
\n
\n // just initializing\n $('.ui.image img')\n .popup()\n ;\n
\n
\n // initializing with settings\n $('.ui.image .help')\n .popup({\n position: 'right center'\n })\n ;\n
\n
\n
\n
\n
\n

Demo Element

\n \n \n
\n
Console
\n 
\n        
\n      
\n    
\n    
\n      
Using Module Behaviors
\n      
Behaviors are an element's API. They invoke functionality or return aspects of the current state for an element
\n      
Behaviors can be called using spaced words, camelcase or dot notation. The preferred method however is spaced words. Method lookup is done automatically internally.
\n\n      
Behaviors can be called using the syntax:
\n      
\n      // both are the same\n      $('.your.element')\n        .module('behavior name', argumentOne, argumentTwo)\n        .module('behaviorName', argumentOne, argumentTwo)\n      ;\n      
\n\n      
Common Behaviors
\n      
All modules have a set of core behaviors which allow you to configure the component
\n      \n        \n          \n          \n        \n        \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n        \n      
NameUsage
initializeInitializes an element, adding page event handlers and init data
destroyRemoves all changes to the page made by initialization
refreshRefreshes cached values for a component
setting(setting, value)Allows you to modify or read a component setting
invoke(query, passedArguments, instance)Internal method used for translating sentence case method into an internal method
debug(comment, values)Displays a log if a user has logging enabled
verbose(comment, values)Displays a log if a user has verbose logging enabled
error(name)Displays a name error message from the component's settings
performance log(comment, value)Adds a performance trace for an element
performance displayDisplays current element performance trace
\n\n      
Examples
\n\n      
Overriding Internals
\n      
Internal methods can be overwritten at run-time for individual instances of a module
\n\n      
\n        // initialize both popups inline\n        $('.demo.icon')\n          .popup({\n            inline: true\n          })\n        ;\n        //output the first popup's logs to the page\n        $('.demo.icon').first()\n          .popup('internal', 'debug', function() {\n            $('.console')\n              .append(arguments[0] + \"\\n\")\n              // scroll to bottom\n              .prop('scrollTop', $('.console').prop('scrollHeight') )\n            ;\n          })\n        ;\n      
\n\n      
Triggering Behavior
\n      
Some behaviors can accept arguments, for example a popup show behavior can accept a callback function. This arbitrary example shows opening a popup then changing its position programatically
\n      
\n        // Sets a popup to top left position with an offset of negative five\n        $('.demo.icon').first()\n          .popup('setting', 'position', 'top right')\n          .popup('show', function() {\n            $(this)\n              .popup('set position', 'right center')\n            ;\n          })\n        ;\n      
\n      
Returning values
\n      
Behaviors may also provide an API for accessing a module's internal state. For example popups have a method is visible which returns true or false for whether a popup is currently visible.
\n      
\n        // returns boolean value instead of jQuery chain\n        $('.demo.icon')\n          .popup('debug', $('.demo.icon').first().popup('is visible') )\n        ;\n      
\n      
\n        // if selector size > 1 returns array of values [boolean, boolean...]\n        $('.demo.icon')\n          .popup('debug', $('.demo.icon').popup('is visible') )\n        ;\n      
\n    
\n  
\n\n\n  
\n\n    
Unlike many javascript components, anything arbitrary in Semantic is a setting. This means no need to dig inside the internals of the component to alter an expected css selector or class name, simply alter the settings object
\n\n    
Common Settings
\n    
The following is a list of common settings usually found in javascript modules.\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
NameUsage
nameName used in debug logs to differentiate this widget from other debug statements.
debugWhether to provide standard debug output to console.
performanceWhether to provide performance logging to console of internal method calls.
verboseWhether to provide extra debug output to console
namespaceNamespace used for DOM event and metadata namespacing. Allows module's destroy method to not affect other modules.
metadataAn object containing any metadata attributes used.
selectorsAn object containing all selectors used in the module, these are usually children of the module.
classNamesAn object containing all class names used in the module.
errorsA javascript array of error statements used in the plugin. These may sometimes appear to the user, but most often appear in debug statements.\n          
\n\n    
Changing Settings
\n    
The following examples use popup as an example for how to modify settings
\n    
\n      
\n        
Setting module defaults
\n        Default settings for the module can be overridden by modifying $.fn.module.settings.\n        
\n        
\n        $.fn.popup.settings.moduleName = 'Godzilla';\n        
\n      
\n      
\n        
At initialization
\n        A settings object can be passed in when initializing the plugin\n        
\n      
\n      $('.foo')\n        .popup({\n          moduleName : 'Godzilla',\n          verbose    : true\n        })\n      ;\n      
\n      
\n      
\n        
After initialization
\n        Settings can be changed after a module is initialized by calling the 'settings' method on the module with either a settings object or a name, value pair.\n        
\n      
\n      $('.foo')\n        // lets initialize that!\n        .popup()\n        // oh wait forgot something\n        .popup('setting', 'moduleName', 'Godzilla')\n        // and some more things\n        .popup('setting', {\n          debug   : true,\n          verbose : true\n        })\n      ;\n      
\n      
\n    
\n    
Reading Settings
\n    
Settings can also be read programmatically:\n    
\n      // outputs 'godzilla' (1) or ['godzilla', 'godzilla'...] (2 or more)\n      $('.foo').popup('setting', 'moduleName');\n    
\n  
\n
",
      "content": "<%- @partial('header', { tabs: { overview: 'Overview', init: 'Initializing', behavior: 'Behaviors', settings: 'Settings'} }) %>\n\n
\n\n  
\n\n    
All official javascript modules in Semantic are designed using a singular design pattern. This pattern allows several useful features common to all javascript components
\n    
\n      
\n        \n        
\n          
Run-time Performance Analysis
\n          
Semantic modules all provide the ability to log performance traces to the console, allowing you to see which aspects of the module are more or less performant and to track total init time onDomReady
\n        
\n      
\n      
\n        \n        
\n          
Human Readable Traces
\n          
Unlike other component libraries which hides explanations of behavior in inline comments which can only be read by combing the source, semantic modules provide run-time debug output to the javascript console telling you what each component is doing as it is doing it.
\n        
\n      
\n      
\n        \n        
\n          
Settings can be overwritten after initialization
\n          
Semantic provides methods to set default settings, set settings at initialization, and set settings after initialization, allowing complete flexibility over component behaviors.
\n        
\n      
\n      
\n        \n        
\n          
All modules include an initialize and destroy method
\n          
All events and metadata are namespaced and can be removed after initialization, modules automatically handle destroy/init events to allow users to lazy-initialize a plugin multiple times with no issues.
\n        
\n      
\n      
\n        \n        
\n          
Instance available in metadata
\n          
Modules store their instance in metadata meaning that, in a pinch, you can directly modify the instance of a UI element by modifying its properties.
\n        
\n      
\n    
\n    
\n    \n      \n      Real World Commented Example\n    \n    \n      \n      Commented Design Pattern\n    \n  
\n  
\n    
Overview
\n    
Semantic does not automatically attach any events on page load. You must decide which modules to initialize on each page by initializing a module in javascript.
\n    
It's okay to initialize an element multiple times, the element will automatically destroy the previous instance and re-initialize with the settings provided.
\n    
Example of Initializing
\n    
The following example shows how to attach behavior to elements on a page using Semantic
\n    
\n      
\n        
\n          \n        
\n        \n      
\n    
\n    
\n    // just initializing\n    $('.ui.image img')\n      .popup()\n    ;\n    
\n    
\n    // initializing with settings\n    $('.ui.image .help')\n      .popup({\n        position: 'right center'\n      })\n    ;\n    
\n  
\n  
\n    
\n      
\n        
Demo Element
\n        \n        \n        
\n          
Console
\n          
\n        
\n      
\n    
\n    
\n      
Using Module Behaviors
\n      
Behaviors are an element's API. They invoke functionality or return aspects of the current state for an element
\n      
Behaviors can be called using spaced words, camelcase or dot notation. The preferred method however is spaced words. Method lookup is done automatically internally.
\n\n      
Behaviors can be called using the syntax:
\n      
\n      // both are the same\n      $('.your.element')\n        .module('behavior name', argumentOne, argumentTwo)\n        .module('behaviorName', argumentOne, argumentTwo)\n      ;\n      
\n\n      
Common Behaviors
\n      
All modules have a set of core behaviors which allow you to configure the component
\n      \n        \n          \n          \n        \n        \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n        \n      
NameUsage
initializeInitializes an element, adding page event handlers and init data
destroyRemoves all changes to the page made by initialization
refreshRefreshes cached values for a component
setting(setting, value)Allows you to modify or read a component setting
invoke(query, passedArguments, instance)Internal method used for translating sentence case method into an internal method
debug(comment, values)Displays a log if a user has logging enabled
verbose(comment, values)Displays a log if a user has verbose logging enabled
error(name)Displays a name error message from the component's settings
performance log(comment, value)Adds a performance trace for an element
performance displayDisplays current element performance trace
\n\n      
Examples
\n\n      
Overriding Internals
\n      
Internal methods can be overwritten at run-time for individual instances of a module
\n\n      
\n        // initialize both popups inline\n        $('.demo.icon')\n          .popup({\n            inline: true\n          })\n        ;\n        //output the first popup's logs to the page\n        $('.demo.icon').first()\n          .popup('internal', 'debug', function() {\n            $('.console')\n              .append(arguments[0] + \"\\n\")\n              // scroll to bottom\n              .prop('scrollTop', $('.console').prop('scrollHeight') )\n            ;\n          })\n        ;\n      
\n\n      
Triggering Behavior
\n      
Some behaviors can accept arguments, for example a popup show behavior can accept a callback function. This arbitrary example shows opening a popup then changing its position programatically
\n      
\n        // Sets a popup to top left position with an offset of negative five\n        $('.demo.icon').first()\n          .popup('setting', 'position', 'top right')\n          .popup('show', function() {\n            $(this)\n              .popup('set position', 'right center')\n            ;\n          })\n        ;\n      
\n      
Returning values
\n      
Behaviors may also provide an API for accessing a module's internal state. For example popups have a method is visible which returns true or false for whether a popup is currently visible.
\n      
\n        // returns boolean value instead of jQuery chain\n        $('.demo.icon')\n          .popup('debug', $('.demo.icon').first().popup('is visible') )\n        ;\n      
\n      
\n        // if selector size > 1 returns array of values [boolean, boolean...]\n        $('.demo.icon')\n          .popup('debug', $('.demo.icon').popup('is visible') )\n        ;\n      
\n    
\n  
\n\n\n  
\n\n    
Unlike many javascript components, anything arbitrary in Semantic is a setting. This means no need to dig inside the internals of the component to alter an expected css selector or class name, simply alter the settings object
\n\n    
Common Settings
\n    
The following is a list of common settings usually found in javascript modules.\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
NameUsage
nameName used in debug logs to differentiate this widget from other debug statements.
debugWhether to provide standard debug output to console.
performanceWhether to provide performance logging to console of internal method calls.
verboseWhether to provide extra debug output to console
namespaceNamespace used for DOM event and metadata namespacing. Allows module's destroy method to not affect other modules.
metadataAn object containing any metadata attributes used.
selectorsAn object containing all selectors used in the module, these are usually children of the module.
classNamesAn object containing all class names used in the module.
errorsA javascript array of error statements used in the plugin. These may sometimes appear to the user, but most often appear in debug statements.\n          
\n\n    
Changing Settings
\n    
The following examples use popup as an example for how to modify settings
\n    
\n      
\n        
Setting module defaults
\n        Default settings for the module can be overridden by modifying $.fn.module.settings.\n        
\n        
\n        $.fn.popup.settings.moduleName = 'Godzilla';\n        
\n      
\n      
\n        
At initialization
\n        A settings object can be passed in when initializing the plugin\n        
\n      
\n      $('.foo')\n        .popup({\n          moduleName : 'Godzilla',\n          verbose    : true\n        })\n      ;\n      
\n      
\n      
\n        
After initialization
\n        Settings can be changed after a module is initialized by calling the 'settings' method on the module with either a settings object or a name, value pair.\n        
\n      
\n      $('.foo')\n        // lets initialize that!\n        .popup()\n        // oh wait forgot something\n        .popup('setting', 'moduleName', 'Godzilla')\n        // and some more things\n        .popup('setting', {\n          debug   : true,\n          verbose : true\n        })\n      ;\n      
\n      
\n    
\n    
Reading Settings
\n    
Settings can also be read programmatically:\n    
\n      // outputs 'godzilla' (1) or ['godzilla', 'godzilla'...] (2 or more)\n      $('.foo').popup('setting', 'moduleName');\n    
\n  
\n
",
      "tags": null,
      "render": true,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": "UI Modules",
      "name": "module.html",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "module",
      "url": "/module.html",
      "urls": [
        "/module.html"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": true,
      "header": "layout      : 'default'\ncss         : 'module'\n\ntitle       : 'UI Modules'\ndescription : 'Modules are interface elements whose behavior is an essential part of their definition'\ntype        : 'Semantic'",
      "parser": "yaml",
      "body": "<%- @partial('header', { tabs: { overview: 'Overview', init: 'Initializing', behavior: 'Behaviors', settings: 'Settings'} }) %>\n\n
\n\n  
\n\n    
All official javascript modules in Semantic are designed using a singular design pattern. This pattern allows several useful features common to all javascript components
\n    
\n      
\n        \n        
\n          
Run-time Performance Analysis
\n          
Semantic modules all provide the ability to log performance traces to the console, allowing you to see which aspects of the module are more or less performant and to track total init time onDomReady
\n        
\n      
\n      
\n        \n        
\n          
Human Readable Traces
\n          
Unlike other component libraries which hides explanations of behavior in inline comments which can only be read by combing the source, semantic modules provide run-time debug output to the javascript console telling you what each component is doing as it is doing it.
\n        
\n      
\n      
\n        \n        
\n          
Settings can be overwritten after initialization
\n          
Semantic provides methods to set default settings, set settings at initialization, and set settings after initialization, allowing complete flexibility over component behaviors.
\n        
\n      
\n      
\n        \n        
\n          
All modules include an initialize and destroy method
\n          
All events and metadata are namespaced and can be removed after initialization, modules automatically handle destroy/init events to allow users to lazy-initialize a plugin multiple times with no issues.
\n        
\n      
\n      
\n        \n        
\n          
Instance available in metadata
\n          
Modules store their instance in metadata meaning that, in a pinch, you can directly modify the instance of a UI element by modifying its properties.
\n        
\n      
\n    
\n    
\n    \n      \n      Real World Commented Example\n    \n    \n      \n      Commented Design Pattern\n    \n  
\n  
\n    
Overview
\n    
Semantic does not automatically attach any events on page load. You must decide which modules to initialize on each page by initializing a module in javascript.
\n    
It's okay to initialize an element multiple times, the element will automatically destroy the previous instance and re-initialize with the settings provided.
\n    
Example of Initializing
\n    
The following example shows how to attach behavior to elements on a page using Semantic
\n    
\n      
\n        
\n          \n        
\n        \n      
\n    
\n    
\n    // just initializing\n    $('.ui.image img')\n      .popup()\n    ;\n    
\n    
\n    // initializing with settings\n    $('.ui.image .help')\n      .popup({\n        position: 'right center'\n      })\n    ;\n    
\n  
\n  
\n    
\n      
\n        
Demo Element
\n        \n        \n        
\n          
Console
\n          
\n        
\n      
\n    
\n    
\n      
Using Module Behaviors
\n      
Behaviors are an element's API. They invoke functionality or return aspects of the current state for an element
\n      
Behaviors can be called using spaced words, camelcase or dot notation. The preferred method however is spaced words. Method lookup is done automatically internally.
\n\n      
Behaviors can be called using the syntax:
\n      
\n      // both are the same\n      $('.your.element')\n        .module('behavior name', argumentOne, argumentTwo)\n        .module('behaviorName', argumentOne, argumentTwo)\n      ;\n      
\n\n      
Common Behaviors
\n      
All modules have a set of core behaviors which allow you to configure the component
\n      \n        \n          \n          \n        \n        \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n        \n      
NameUsage
initializeInitializes an element, adding page event handlers and init data
destroyRemoves all changes to the page made by initialization
refreshRefreshes cached values for a component
setting(setting, value)Allows you to modify or read a component setting
invoke(query, passedArguments, instance)Internal method used for translating sentence case method into an internal method
debug(comment, values)Displays a log if a user has logging enabled
verbose(comment, values)Displays a log if a user has verbose logging enabled
error(name)Displays a name error message from the component's settings
performance log(comment, value)Adds a performance trace for an element
performance displayDisplays current element performance trace
\n\n      
Examples
\n\n      
Overriding Internals
\n      
Internal methods can be overwritten at run-time for individual instances of a module
\n\n      
\n        // initialize both popups inline\n        $('.demo.icon')\n          .popup({\n            inline: true\n          })\n        ;\n        //output the first popup's logs to the page\n        $('.demo.icon').first()\n          .popup('internal', 'debug', function() {\n            $('.console')\n              .append(arguments[0] + \"\\n\")\n              // scroll to bottom\n              .prop('scrollTop', $('.console').prop('scrollHeight') )\n            ;\n          })\n        ;\n      
\n\n      
Triggering Behavior
\n      
Some behaviors can accept arguments, for example a popup show behavior can accept a callback function. This arbitrary example shows opening a popup then changing its position programatically
\n      
\n        // Sets a popup to top left position with an offset of negative five\n        $('.demo.icon').first()\n          .popup('setting', 'position', 'top right')\n          .popup('show', function() {\n            $(this)\n              .popup('set position', 'right center')\n            ;\n          })\n        ;\n      
\n      
Returning values
\n      
Behaviors may also provide an API for accessing a module's internal state. For example popups have a method is visible which returns true or false for whether a popup is currently visible.
\n      
\n        // returns boolean value instead of jQuery chain\n        $('.demo.icon')\n          .popup('debug', $('.demo.icon').first().popup('is visible') )\n        ;\n      
\n      
\n        // if selector size > 1 returns array of values [boolean, boolean...]\n        $('.demo.icon')\n          .popup('debug', $('.demo.icon').popup('is visible') )\n        ;\n      
\n    
\n  
\n\n\n  
\n\n    
Unlike many javascript components, anything arbitrary in Semantic is a setting. This means no need to dig inside the internals of the component to alter an expected css selector or class name, simply alter the settings object
\n\n    
Common Settings
\n    
The following is a list of common settings usually found in javascript modules.\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
NameUsage
nameName used in debug logs to differentiate this widget from other debug statements.
debugWhether to provide standard debug output to console.
performanceWhether to provide performance logging to console of internal method calls.
verboseWhether to provide extra debug output to console
namespaceNamespace used for DOM event and metadata namespacing. Allows module's destroy method to not affect other modules.
metadataAn object containing any metadata attributes used.
selectorsAn object containing all selectors used in the module, these are usually children of the module.
classNamesAn object containing all class names used in the module.
errorsA javascript array of error statements used in the plugin. These may sometimes appear to the user, but most often appear in debug statements.\n          
\n\n    
Changing Settings
\n    
The following examples use popup as an example for how to modify settings
\n    
\n      
\n        
Setting module defaults
\n        Default settings for the module can be overridden by modifying $.fn.module.settings.\n        
\n        
\n        $.fn.popup.settings.moduleName = 'Godzilla';\n        
\n      
\n      
\n        
At initialization
\n        A settings object can be passed in when initializing the plugin\n        
\n      
\n      $('.foo')\n        .popup({\n          moduleName : 'Godzilla',\n          verbose    : true\n        })\n      ;\n      
\n      
\n      
\n        
After initialization
\n        Settings can be changed after a module is initialized by calling the 'settings' method on the module with either a settings object or a name, value pair.\n        
\n      
\n      $('.foo')\n        // lets initialize that!\n        .popup()\n        // oh wait forgot something\n        .popup('setting', 'moduleName', 'Godzilla')\n        // and some more things\n        .popup('setting', {\n          debug   : true,\n          verbose : true\n        })\n      ;\n      
\n      
\n    
\n    
Reading Settings
\n    
Settings can also be read programmatically:\n    
\n      // outputs 'godzilla' (1) or ['godzilla', 'godzilla'...] (2 or more)\n      $('.foo').popup('setting', 'moduleName');\n    
\n  
\n
",
      "rendered": true,
      "contentRendered": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  \n  \n  \n  \n\n  \n\n  \n  \n  UI Modules | Semantic UI\n\n  \n  \n\n  \n\n  \n  \n  \n\n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n\n  \n  \n\n\n  
\n    \n       Close Menu\n    \n    \n       Download\n    \n    
\n      \n        Introduction\n      \n      
\n        \n          Definitions\n        \n          Overview\n        \n          Types\n        \n          Variations\n        \n          What's Different\n        \n      
\n    
\n    
\n      Project\n      
\n        \n          Contributing\n        \n          Set-up\n        \n      
\n    
\n    
\n      Elements\n      
\n        \n          Button\n        \n          Divider\n        \n          Header\n        \n          Icon\n        \n          Image\n        \n          Input\n        \n          Label\n        \n          Loader\n        \n          Progress\n        \n          Reveal\n        \n          Segment\n        \n          Step\n        \n      
\n    
\n    
\n      Collections\n      
\n        \n          Breadcrumb\n        \n          Form\n        \n          Grid\n        \n          Menu\n        \n          Message\n        \n          Table\n        \n      
\n    
\n    
\n      Views\n      
\n        \n          Comment\n        \n          Feed\n        \n          Item\n        \n          List\n        \n      
\n    
\n    
\n      Modules\n      
\n        \n          Accordion\n        \n          Checkbox\n        \n          Dimmer\n        \n          Dropdown\n        \n          Modal\n        \n          Popup\n        \n          Rating\n        \n          Shape\n        \n          Sidebar\n        \n          Transition\n        \n      
\n    
\n    
\n      Behavior\n      
\n        \n          Form Validation\n        \n      
\n    
\n    
\n      Style Guide\n      
\n        \n          CSS\n        \n          Javascript\n        \n          Language\n        \n      
\n    
\n\n  
\n\n  
\n    
\n       Content\n      
\n        Semantic: UI Modules\n      
\n      \n      \n      \n      
\n        4 of 4\n        
\n          \n            
\n              1. Introduction\n            
\n          \n            
\n              2. UI Collections\n            
\n          \n            
\n              3. UI Elements\n            
\n          \n            
\n              4. UI Modules\n            
\n          \n        
\n      
\n      \n      
\n      \n      
\n        \n        
\n          \n        
\n        \n        \n        \n          \n        \n        \n      
\n    
\n  
\n    
\n      \n      Menu\n    
\n  \n\n
\n  
\n    
\n\n      
\n        UI Modules\n        \n      
\n\n      
Modules are interface elements whose behavior is an essential part of their definition
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n    \n    \n    \n    \n      \n        \n      \n        \n      \n        \n      \n        \n      \n      
\n        \n          Overview\n          \n        \n          Initializing\n          \n        \n          Behaviors\n          \n        \n          Settings\n          \n        \n      
\n      \n      
\n        \n          Overview\n          \n        \n          Initializing\n          \n        \n          Behaviors\n          \n        \n          Settings\n          \n        \n      
\n    \n  
\n
\n\n
\n\n  
\n\n    
All official javascript modules in Semantic are designed using a singular design pattern. This pattern allows several useful features common to all javascript components
\n    
\n      
\n        \n        
\n          
Run-time Performance Analysis
\n          
Semantic modules all provide the ability to log performance traces to the console, allowing you to see which aspects of the module are more or less performant and to track total init time onDomReady
\n        
\n      
\n      
\n        \n        
\n          
Human Readable Traces
\n          
Unlike other component libraries which hides explanations of behavior in inline comments which can only be read by combing the source, semantic modules provide run-time debug output to the javascript console telling you what each component is doing as it is doing it.
\n        
\n      
\n      
\n        \n        
\n          
Settings can be overwritten after initialization
\n          
Semantic provides methods to set default settings, set settings at initialization, and set settings after initialization, allowing complete flexibility over component behaviors.
\n        
\n      
\n      
\n        \n        
\n          
All modules include an initialize and destroy method
\n          
All events and metadata are namespaced and can be removed after initialization, modules automatically handle destroy/init events to allow users to lazy-initialize a plugin multiple times with no issues.
\n        
\n      
\n      
\n        \n        
\n          
Instance available in metadata
\n          
Modules store their instance in metadata meaning that, in a pinch, you can directly modify the instance of a UI element by modifying its properties.
\n        
\n      
\n    
\n    
\n    \n      \n      Real World Commented Example\n    \n    \n      \n      Commented Design Pattern\n    \n  
\n  
\n    
Overview
\n    
Semantic does not automatically attach any events on page load. You must decide which modules to initialize on each page by initializing a module in javascript.
\n    
It's okay to initialize an element multiple times, the element will automatically destroy the previous instance and re-initialize with the settings provided.
\n    
Example of Initializing
\n    
The following example shows how to attach behavior to elements on a page using Semantic
\n    
\n      
\n        
\n          \n        
\n        \n      
\n    
\n    
\n    // just initializing\n    $('.ui.image img')\n      .popup()\n    ;\n    
\n    
\n    // initializing with settings\n    $('.ui.image .help')\n      .popup({\n        position: 'right center'\n      })\n    ;\n    
\n  
\n  
\n    
\n      
\n        
Demo Element
\n        \n        \n        
\n          
Console
\n          
\n        
\n      
\n    
\n    
\n      
Using Module Behaviors
\n      
Behaviors are an element's API. They invoke functionality or return aspects of the current state for an element
\n      
Behaviors can be called using spaced words, camelcase or dot notation. The preferred method however is spaced words. Method lookup is done automatically internally.
\n\n      
Behaviors can be called using the syntax:
\n      
\n      // both are the same\n      $('.your.element')\n        .module('behavior name', argumentOne, argumentTwo)\n        .module('behaviorName', argumentOne, argumentTwo)\n      ;\n      
\n\n      
Common Behaviors
\n      
All modules have a set of core behaviors which allow you to configure the component
\n      \n        \n          \n          \n        \n        \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n        \n      
NameUsage
initializeInitializes an element, adding page event handlers and init data
destroyRemoves all changes to the page made by initialization
refreshRefreshes cached values for a component
setting(setting, value)Allows you to modify or read a component setting
invoke(query, passedArguments, instance)Internal method used for translating sentence case method into an internal method
debug(comment, values)Displays a log if a user has logging enabled
verbose(comment, values)Displays a log if a user has verbose logging enabled
error(name)Displays a name error message from the component's settings
performance log(comment, value)Adds a performance trace for an element
performance displayDisplays current element performance trace
\n\n      
Examples
\n\n      
Overriding Internals
\n      
Internal methods can be overwritten at run-time for individual instances of a module
\n\n      
\n        // initialize both popups inline\n        $('.demo.icon')\n          .popup({\n            inline: true\n          })\n        ;\n        //output the first popup's logs to the page\n        $('.demo.icon').first()\n          .popup('internal', 'debug', function() {\n            $('.console')\n              .append(arguments[0] + \"\\n\")\n              // scroll to bottom\n              .prop('scrollTop', $('.console').prop('scrollHeight') )\n            ;\n          })\n        ;\n      
\n\n      
Triggering Behavior
\n      
Some behaviors can accept arguments, for example a popup show behavior can accept a callback function. This arbitrary example shows opening a popup then changing its position programatically
\n      
\n        // Sets a popup to top left position with an offset of negative five\n        $('.demo.icon').first()\n          .popup('setting', 'position', 'top right')\n          .popup('show', function() {\n            $(this)\n              .popup('set position', 'right center')\n            ;\n          })\n        ;\n      
\n      
Returning values
\n      
Behaviors may also provide an API for accessing a module's internal state. For example popups have a method is visible which returns true or false for whether a popup is currently visible.
\n      
\n        // returns boolean value instead of jQuery chain\n        $('.demo.icon')\n          .popup('debug', $('.demo.icon').first().popup('is visible') )\n        ;\n      
\n      
\n        // if selector size > 1 returns array of values [boolean, boolean...]\n        $('.demo.icon')\n          .popup('debug', $('.demo.icon').popup('is visible') )\n        ;\n      
\n    
\n  
\n\n\n  
\n\n    
Unlike many javascript components, anything arbitrary in Semantic is a setting. This means no need to dig inside the internals of the component to alter an expected css selector or class name, simply alter the settings object
\n\n    
Common Settings
\n    
The following is a list of common settings usually found in javascript modules.\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
NameUsage
nameName used in debug logs to differentiate this widget from other debug statements.
debugWhether to provide standard debug output to console.
performanceWhether to provide performance logging to console of internal method calls.
verboseWhether to provide extra debug output to console
namespaceNamespace used for DOM event and metadata namespacing. Allows module's destroy method to not affect other modules.
metadataAn object containing any metadata attributes used.
selectorsAn object containing all selectors used in the module, these are usually children of the module.
classNamesAn object containing all class names used in the module.
errorsA javascript array of error statements used in the plugin. These may sometimes appear to the user, but most often appear in debug statements.\n          
\n\n    
Changing Settings
\n    
The following examples use popup as an example for how to modify settings
\n    
\n      
\n        
Setting module defaults
\n        Default settings for the module can be overridden by modifying $.fn.module.settings.\n        
\n        
\n        $.fn.popup.settings.moduleName = 'Godzilla';\n        
\n      
\n      
\n        
At initialization
\n        A settings object can be passed in when initializing the plugin\n        
\n      
\n      $('.foo')\n        .popup({\n          moduleName : 'Godzilla',\n          verbose    : true\n        })\n      ;\n      
\n      
\n      
\n        
After initialization
\n        Settings can be changed after a module is initialized by calling the 'settings' method on the module with either a settings object or a name, value pair.\n        
\n      
\n      $('.foo')\n        // lets initialize that!\n        .popup()\n        // oh wait forgot something\n        .popup('setting', 'moduleName', 'Godzilla')\n        // and some more things\n        .popup('setting', {\n          debug   : true,\n          verbose : true\n        })\n      ;\n      
\n      
\n    
\n    
Reading Settings
\n    
Settings can also be read programmatically:\n    
\n      // outputs 'godzilla' (1) or ['godzilla', 'godzilla'...] (2 or more)\n      $('.foo').popup('setting', 'moduleName');\n    
\n  
\n
\n\n\n",
      "contentRenderedWithoutLayouts": "\n\n
\n  
\n    
\n\n      
\n        UI Modules\n        \n      
\n\n      
Modules are interface elements whose behavior is an essential part of their definition
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n    \n    \n    \n    \n      \n        \n      \n        \n      \n        \n      \n        \n      \n      
\n        \n          Overview\n          \n        \n          Initializing\n          \n        \n          Behaviors\n          \n        \n          Settings\n          \n        \n      
\n      \n      
\n        \n          Overview\n          \n        \n          Initializing\n          \n        \n          Behaviors\n          \n        \n          Settings\n          \n        \n      
\n    \n  
\n
\n\n
\n\n  
\n\n    
All official javascript modules in Semantic are designed using a singular design pattern. This pattern allows several useful features common to all javascript components
\n    
\n      
\n        \n        
\n          
Run-time Performance Analysis
\n          
Semantic modules all provide the ability to log performance traces to the console, allowing you to see which aspects of the module are more or less performant and to track total init time onDomReady
\n        
\n      
\n      
\n        \n        
\n          
Human Readable Traces
\n          
Unlike other component libraries which hides explanations of behavior in inline comments which can only be read by combing the source, semantic modules provide run-time debug output to the javascript console telling you what each component is doing as it is doing it.
\n        
\n      
\n      
\n        \n        
\n          
Settings can be overwritten after initialization
\n          
Semantic provides methods to set default settings, set settings at initialization, and set settings after initialization, allowing complete flexibility over component behaviors.
\n        
\n      
\n      
\n        \n        
\n          
All modules include an initialize and destroy method
\n          
All events and metadata are namespaced and can be removed after initialization, modules automatically handle destroy/init events to allow users to lazy-initialize a plugin multiple times with no issues.
\n        
\n      
\n      
\n        \n        
\n          
Instance available in metadata
\n          
Modules store their instance in metadata meaning that, in a pinch, you can directly modify the instance of a UI element by modifying its properties.
\n        
\n      
\n    
\n    
\n    \n      \n      Real World Commented Example\n    \n    \n      \n      Commented Design Pattern\n    \n  
\n  
\n    
Overview
\n    
Semantic does not automatically attach any events on page load. You must decide which modules to initialize on each page by initializing a module in javascript.
\n    
It's okay to initialize an element multiple times, the element will automatically destroy the previous instance and re-initialize with the settings provided.
\n    
Example of Initializing
\n    
The following example shows how to attach behavior to elements on a page using Semantic
\n    
\n      
\n        
\n          \n        
\n        \n      
\n    
\n    
\n    // just initializing\n    $('.ui.image img')\n      .popup()\n    ;\n    
\n    
\n    // initializing with settings\n    $('.ui.image .help')\n      .popup({\n        position: 'right center'\n      })\n    ;\n    
\n  
\n  
\n    
\n      
\n        
Demo Element
\n        \n        \n        
\n          
Console
\n          
\n        
\n      
\n    
\n    
\n      
Using Module Behaviors
\n      
Behaviors are an element's API. They invoke functionality or return aspects of the current state for an element
\n      
Behaviors can be called using spaced words, camelcase or dot notation. The preferred method however is spaced words. Method lookup is done automatically internally.
\n\n      
Behaviors can be called using the syntax:
\n      
\n      // both are the same\n      $('.your.element')\n        .module('behavior name', argumentOne, argumentTwo)\n        .module('behaviorName', argumentOne, argumentTwo)\n      ;\n      
\n\n      
Common Behaviors
\n      
All modules have a set of core behaviors which allow you to configure the component
\n      \n        \n          \n          \n        \n        \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n        \n      
NameUsage
initializeInitializes an element, adding page event handlers and init data
destroyRemoves all changes to the page made by initialization
refreshRefreshes cached values for a component
setting(setting, value)Allows you to modify or read a component setting
invoke(query, passedArguments, instance)Internal method used for translating sentence case method into an internal method
debug(comment, values)Displays a log if a user has logging enabled
verbose(comment, values)Displays a log if a user has verbose logging enabled
error(name)Displays a name error message from the component's settings
performance log(comment, value)Adds a performance trace for an element
performance displayDisplays current element performance trace
\n\n      
Examples
\n\n      
Overriding Internals
\n      
Internal methods can be overwritten at run-time for individual instances of a module
\n\n      
\n        // initialize both popups inline\n        $('.demo.icon')\n          .popup({\n            inline: true\n          })\n        ;\n        //output the first popup's logs to the page\n        $('.demo.icon').first()\n          .popup('internal', 'debug', function() {\n            $('.console')\n              .append(arguments[0] + \"\\n\")\n              // scroll to bottom\n              .prop('scrollTop', $('.console').prop('scrollHeight') )\n            ;\n          })\n        ;\n      
\n\n      
Triggering Behavior
\n      
Some behaviors can accept arguments, for example a popup show behavior can accept a callback function. This arbitrary example shows opening a popup then changing its position programatically
\n      
\n        // Sets a popup to top left position with an offset of negative five\n        $('.demo.icon').first()\n          .popup('setting', 'position', 'top right')\n          .popup('show', function() {\n            $(this)\n              .popup('set position', 'right center')\n            ;\n          })\n        ;\n      
\n      
Returning values
\n      
Behaviors may also provide an API for accessing a module's internal state. For example popups have a method is visible which returns true or false for whether a popup is currently visible.
\n      
\n        // returns boolean value instead of jQuery chain\n        $('.demo.icon')\n          .popup('debug', $('.demo.icon').first().popup('is visible') )\n        ;\n      
\n      
\n        // if selector size > 1 returns array of values [boolean, boolean...]\n        $('.demo.icon')\n          .popup('debug', $('.demo.icon').popup('is visible') )\n        ;\n      
\n    
\n  
\n\n\n  
\n\n    
Unlike many javascript components, anything arbitrary in Semantic is a setting. This means no need to dig inside the internals of the component to alter an expected css selector or class name, simply alter the settings object
\n\n    
Common Settings
\n    
The following is a list of common settings usually found in javascript modules.\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
NameUsage
nameName used in debug logs to differentiate this widget from other debug statements.
debugWhether to provide standard debug output to console.
performanceWhether to provide performance logging to console of internal method calls.
verboseWhether to provide extra debug output to console
namespaceNamespace used for DOM event and metadata namespacing. Allows module's destroy method to not affect other modules.
metadataAn object containing any metadata attributes used.
selectorsAn object containing all selectors used in the module, these are usually children of the module.
classNamesAn object containing all class names used in the module.
errorsA javascript array of error statements used in the plugin. These may sometimes appear to the user, but most often appear in debug statements.\n          
\n\n    
Changing Settings
\n    
The following examples use popup as an example for how to modify settings
\n    
\n      
\n        
Setting module defaults
\n        Default settings for the module can be overridden by modifying $.fn.module.settings.\n        
\n        
\n        $.fn.popup.settings.moduleName = 'Godzilla';\n        
\n      
\n      
\n        
At initialization
\n        A settings object can be passed in when initializing the plugin\n        
\n      
\n      $('.foo')\n        .popup({\n          moduleName : 'Godzilla',\n          verbose    : true\n        })\n      ;\n      
\n      
\n      
\n        
After initialization
\n        Settings can be changed after a module is initialized by calling the 'settings' method on the module with either a settings object or a name, value pair.\n        
\n      
\n      $('.foo')\n        // lets initialize that!\n        .popup()\n        // oh wait forgot something\n        .popup('setting', 'moduleName', 'Godzilla')\n        // and some more things\n        .popup('setting', {\n          debug   : true,\n          verbose : true\n        })\n      ;\n      
\n      
\n    
\n    
Reading Settings
\n    
Settings can also be read programmatically:\n    
\n      // outputs 'godzilla' (1) or ['godzilla', 'godzilla'...] (2 or more)\n      $('.foo').popup('setting', 'moduleName');\n    
\n  
\n
",
      "renderSingleExtensions": false,
      "layout": "default",
      "css": "module",
      "description": "Modules are interface elements whose behavior is an essential part of their definition",
      "type": "Semantic",
      "layoutRelativePath": "default.html.eco",
      "meta": {
        "layout": "default",
        "css": "module",
        "title": "UI Modules",
        "description": "Modules are interface elements whose behavior is an essential part of their definition",
        "type": "Semantic"
      }
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/documents/playground.html.eco",
      "relativePath": "playground.html.eco",
      "basename": "playground",
      "outBasename": "playground",
      "extension": "eco",
      "outExtension": "html",
      "extensions": [
        "html",
        "eco"
      ],
      "filename": "playground.html.eco",
      "fullDirPath": "/home/jack/projects/semantic/server/documents",
      "outPath": "/home/jack/projects/semantic/docs/playground.html",
      "outDirPath": "/home/jack/projects/semantic/docs",
      "outFilename": "playground.html",
      "relativeOutPath": "playground.html",
      "relativeDirPath": ".",
      "relativeOutDirPath": ".",
      "relativeBase": "playground",
      "relativeOutBase": "playground",
      "contentType": "application/octet-stream",
      "outContentType": "text/html",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": "2013-12-04T09:15:24.087Z",
      "wtime": "2013-12-04T09:15:28.584Z",
      "exists": true,
      "encoding": "utf8",
      "source": "---\nlayout : 'default'\ncss    : 'playground'\n\ntitle  : 'Playground'\ntype   : 'Library'\n---\n<% uiElements        = @getCollection(\"documents\").findAllLive({type: $in: ['UI Element']},[{title: 1}]).toJSON() %>\n<% uiCollections     = @getCollection(\"documents\").findAllLive({type: $in: ['UI Collection']},[{title: 1}]).toJSON() %>\n<% uiModules         = @getCollection(\"documents\").findAllLive({type: $in: ['UI Module']},[{title: 1}]).toJSON() %>\n<% uiViews           = @getCollection(\"documents\").findAllLive({type: $in: ['UI View']},[{title: 1}]).toJSON() %>\n\n\n\n\n\n\n
\n  
\n    
\n       Playground\n    
\n  
\n
\n
\n  
\n    
\n      
Choose UI
\n      
\n        
\n          
\n            \n            
\n              \n              \n              
Button
\n              
\n                <% for element in uiElements: %>\n                  
\" class=\"item\">\n                    <%= element.title %>\n                  
\n                <% end %>\n              
\n            
\n          
\n          
\n            \n            
\n              \n              \n              
---
\n              
\n                <% for element in uiCollections: %>\n                  
\" class=\"item\">\n                    <%= element.title %>\n                  
\n                <% end %>\n              
\n            
\n          
\n          
\n            \n            
\n              \n              \n              
---
\n              
\n                <% for element in uiModules: %>\n                  
\" class=\"item\">\n                    <%= element.title %>\n                  
\n                <% end %>\n              
\n            
\n          
\n          
\n            \n            
\n              \n              \n              
---
\n              
\n                <% for element in uiViews: %>\n                  
\" class=\"item\">\n                    <%= element.title %>\n                  
\n                <% end %>\n              
\n            
\n          
\n        
\n      
\n      
\n        
Types
\n        
\n          
\n          
\n        
\n      
\n      
\n        
Variations
\n        
\n          
\n          
\n        
\n      
\n      
\n        
Add
\n      
\n    
\n\n\n  
\n  
\n    
\n      
\n        
 No Designs Yet!
\n        Add an element to the left to begin\n      
\n    
\n  
\n  
\n\n  
\n    
Preview
\n    
\n    
\n  
\n  
\n    
Text
\n    
\n      
\n        \n      
\n      
Update Text
\n    
\n  
\n  
\n    
View
\n    
\n      
Preview
\n      
Code
\n    
\n    
Finish Up
\n    
Download
\n  
\n
\n\n\n\n\n\n\n\n",
      "content": "<% uiElements        = @getCollection(\"documents\").findAllLive({type: $in: ['UI Element']},[{title: 1}]).toJSON() %>\n<% uiCollections     = @getCollection(\"documents\").findAllLive({type: $in: ['UI Collection']},[{title: 1}]).toJSON() %>\n<% uiModules         = @getCollection(\"documents\").findAllLive({type: $in: ['UI Module']},[{title: 1}]).toJSON() %>\n<% uiViews           = @getCollection(\"documents\").findAllLive({type: $in: ['UI View']},[{title: 1}]).toJSON() %>\n\n\n\n\n\n\n
\n  
\n    
\n       Playground\n    
\n  
\n
\n
\n  
\n    
\n      
Choose UI
\n      
\n        
\n          
\n            \n            
\n              \n              \n              
Button
\n              
\n                <% for element in uiElements: %>\n                  
\" class=\"item\">\n                    <%= element.title %>\n                  
\n                <% end %>\n              
\n            
\n          
\n          
\n            \n            
\n              \n              \n              
---
\n              
\n                <% for element in uiCollections: %>\n                  
\" class=\"item\">\n                    <%= element.title %>\n                  
\n                <% end %>\n              
\n            
\n          
\n          
\n            \n            
\n              \n              \n              
---
\n              
\n                <% for element in uiModules: %>\n                  
\" class=\"item\">\n                    <%= element.title %>\n                  
\n                <% end %>\n              
\n            
\n          
\n          
\n            \n            
\n              \n              \n              
---
\n              
\n                <% for element in uiViews: %>\n                  
\" class=\"item\">\n                    <%= element.title %>\n                  
\n                <% end %>\n              
\n            
\n          
\n        
\n      
\n      
\n        
Types
\n        
\n          
\n          
\n        
\n      
\n      
\n        
Variations
\n        
\n          
\n          
\n        
\n      
\n      
\n        
Add
\n      
\n    
\n\n\n  
\n  
\n    
\n      
\n        
 No Designs Yet!
\n        Add an element to the left to begin\n      
\n    
\n  
\n  
\n\n  
\n    
Preview
\n    
\n    
\n  
\n  
\n    
Text
\n    
\n      
\n        \n      
\n      
Update Text
\n    
\n  
\n  
\n    
View
\n    
\n      
Preview
\n      
Code
\n    
\n    
Finish Up
\n    
Download
\n  
\n
\n\n\n\n\n\n\n\n",
      "tags": null,
      "render": true,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": "Playground",
      "name": "playground.html",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "playground",
      "url": "/playground.html",
      "urls": [
        "/playground.html"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": true,
      "header": "layout : 'default'\ncss    : 'playground'\n\ntitle  : 'Playground'\ntype   : 'Library'",
      "parser": "yaml",
      "body": "<% uiElements        = @getCollection(\"documents\").findAllLive({type: $in: ['UI Element']},[{title: 1}]).toJSON() %>\n<% uiCollections     = @getCollection(\"documents\").findAllLive({type: $in: ['UI Collection']},[{title: 1}]).toJSON() %>\n<% uiModules         = @getCollection(\"documents\").findAllLive({type: $in: ['UI Module']},[{title: 1}]).toJSON() %>\n<% uiViews           = @getCollection(\"documents\").findAllLive({type: $in: ['UI View']},[{title: 1}]).toJSON() %>\n\n\n\n\n\n\n
\n  
\n    
\n       Playground\n    
\n  
\n
\n
\n  
\n    
\n      
Choose UI
\n      
\n        
\n          
\n            \n            
\n              \n              \n              
Button
\n              
\n                <% for element in uiElements: %>\n                  
\" class=\"item\">\n                    <%= element.title %>\n                  
\n                <% end %>\n              
\n            
\n          
\n          
\n            \n            
\n              \n              \n              
---
\n              
\n                <% for element in uiCollections: %>\n                  
\" class=\"item\">\n                    <%= element.title %>\n                  
\n                <% end %>\n              
\n            
\n          
\n          
\n            \n            
\n              \n              \n              
---
\n              
\n                <% for element in uiModules: %>\n                  
\" class=\"item\">\n                    <%= element.title %>\n                  
\n                <% end %>\n              
\n            
\n          
\n          
\n            \n            
\n              \n              \n              
---
\n              
\n                <% for element in uiViews: %>\n                  
\" class=\"item\">\n                    <%= element.title %>\n                  
\n                <% end %>\n              
\n            
\n          
\n        
\n      
\n      
\n        
Types
\n        
\n          
\n          
\n        
\n      
\n      
\n        
Variations
\n        
\n          
\n          
\n        
\n      
\n      
\n        
Add
\n      
\n    
\n\n\n  
\n  
\n    
\n      
\n        
 No Designs Yet!
\n        Add an element to the left to begin\n      
\n    
\n  
\n  
\n\n  
\n    
Preview
\n    
\n    
\n  
\n  
\n    
Text
\n    
\n      
\n        \n      
\n      
Update Text
\n    
\n  
\n  
\n    
View
\n    
\n      
Preview
\n      
Code
\n    
\n    
Finish Up
\n    
Download
\n  
\n
\n\n\n\n\n\n\n\n",
      "rendered": true,
      "contentRendered": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  \n  \n  \n  \n\n  \n\n  \n  \n  Playground | Semantic UI\n\n  \n  \n\n  \n\n  \n  \n  \n\n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n\n  \n  \n\n\n  
\n    \n       Close Menu\n    \n    \n       Download\n    \n    
\n      \n        Introduction\n      \n      
\n        \n          Definitions\n        \n          Overview\n        \n          Types\n        \n          Variations\n        \n          What's Different\n        \n      
\n    
\n    
\n      Project\n      
\n        \n          Contributing\n        \n          Set-up\n        \n      
\n    
\n    
\n      Elements\n      
\n        \n          Button\n        \n          Divider\n        \n          Header\n        \n          Icon\n        \n          Image\n        \n          Input\n        \n          Label\n        \n          Loader\n        \n          Progress\n        \n          Reveal\n        \n          Segment\n        \n          Step\n        \n      
\n    
\n    
\n      Collections\n      
\n        \n          Breadcrumb\n        \n          Form\n        \n          Grid\n        \n          Menu\n        \n          Message\n        \n          Table\n        \n      
\n    
\n    
\n      Views\n      
\n        \n          Comment\n        \n          Feed\n        \n          Item\n        \n          List\n        \n      
\n    
\n    
\n      Modules\n      
\n        \n          Accordion\n        \n          Checkbox\n        \n          Dimmer\n        \n          Dropdown\n        \n          Modal\n        \n          Popup\n        \n          Rating\n        \n          Shape\n        \n          Sidebar\n        \n          Transition\n        \n      
\n    
\n    
\n      Behavior\n      
\n        \n          Form Validation\n        \n      
\n    
\n    
\n      Style Guide\n      
\n        \n          CSS\n        \n          Javascript\n        \n          Language\n        \n      
\n    
\n\n  
\n\n  
\n    
\n       Content\n      
\n        Library: Playground\n      
\n      \n      \n      \n      
\n        2 of 2\n        
\n          \n            
\n              1. Download\n            
\n          \n            
\n              2. Playground\n            
\n          \n        
\n      
\n      \n      
\n      \n      
\n        \n        
\n          \n        
\n        \n        \n        \n          \n        \n        \n      
\n    
\n  
\n    
\n      \n      Menu\n    
\n  \n\n\n\n\n\n\n\n\n\n
\n  
\n    
\n       Playground\n    
\n  
\n
\n
\n  
\n    
\n      
Choose UI
\n      
\n        
\n          
\n            \n            
\n              \n              \n              
Button
\n              
\n                \n                  
\n                    Button\n                  
\n                \n                  
\n                    Divider\n                  
\n                \n                  
\n                    Header\n                  
\n                \n                  
\n                    Icon\n                  
\n                \n                  
\n                    Image\n                  
\n                \n                  
\n                    Input\n                  
\n                \n                  
\n                    Label\n                  
\n                \n                  
\n                    Loader\n                  
\n                \n                  
\n                    Progress\n                  
\n                \n                  
\n                    Reveal\n                  
\n                \n                  
\n                    Segment\n                  
\n                \n                  
\n                    Step\n                  
\n                \n              
\n            
\n          
\n          
\n            \n            
\n              \n              \n              
---
\n              
\n                \n                  
\n                    Breadcrumb\n                  
\n                \n                  
\n                    Form\n                  
\n                \n                  
\n                    Grid\n                  
\n                \n                  
\n                    Menu\n                  
\n                \n                  
\n                    Message\n                  
\n                \n                  
\n                    Table\n                  
\n                \n              
\n            
\n          
\n          
\n            \n            
\n              \n              \n              
---
\n              
\n                \n                  
\n                    Accordion\n                  
\n                \n                  
\n                    Checkbox\n                  
\n                \n                  
\n                    Dimmer\n                  
\n                \n                  
\n                    Dropdown\n                  
\n                \n                  
\n                    Modal\n                  
\n                \n                  
\n                    Popup\n                  
\n                \n                  
\n                    Rating\n                  
\n                \n                  
\n                    Shape\n                  
\n                \n                  
\n                    Sidebar\n                  
\n                \n                  
\n                    Transition\n                  
\n                \n              
\n            
\n          
\n          
\n            \n            
\n              \n              \n              
---
\n              
\n                \n                  
\n                    Comment\n                  
\n                \n                  
\n                    Feed\n                  
\n                \n                  
\n                    Item\n                  
\n                \n                  
\n                    List\n                  
\n                \n              
\n            
\n          
\n        
\n      
\n      
\n        
Types
\n        
\n          
\n          
\n        
\n      
\n      
\n        
Variations
\n        
\n          
\n          
\n        
\n      
\n      
\n        
Add
\n      
\n    
\n\n\n  
\n  
\n    
\n      
\n        
 No Designs Yet!
\n        Add an element to the left to begin\n      
\n    
\n  
\n  
\n\n  
\n    
Preview
\n    
\n    
\n  
\n  
\n    
Text
\n    
\n      
\n        \n      
\n      
Update Text
\n    
\n  
\n  
\n    
View
\n    
\n      
Preview
\n      
Code
\n    
\n    
Finish Up
\n    
Download
\n  
\n
\n\n\n\n\n\n\n\n\n\n\n",
      "contentRenderedWithoutLayouts": "\n\n\n\n\n\n\n\n\n\n
\n  
\n    
\n       Playground\n    
\n  
\n
\n
\n  
\n    
\n      
Choose UI
\n      
\n        
\n          
\n            \n            
\n              \n              \n              
Button
\n              
\n                \n                  
\n                    Button\n                  
\n                \n                  
\n                    Divider\n                  
\n                \n                  
\n                    Header\n                  
\n                \n                  
\n                    Icon\n                  
\n                \n                  
\n                    Image\n                  
\n                \n                  
\n                    Input\n                  
\n                \n                  
\n                    Label\n                  
\n                \n                  
\n                    Loader\n                  
\n                \n                  
\n                    Progress\n                  
\n                \n                  
\n                    Reveal\n                  
\n                \n                  
\n                    Segment\n                  
\n                \n                  
\n                    Step\n                  
\n                \n              
\n            
\n          
\n          
\n            \n            
\n              \n              \n              
---
\n              
\n                \n                  
\n                    Breadcrumb\n                  
\n                \n                  
\n                    Form\n                  
\n                \n                  
\n                    Grid\n                  
\n                \n                  
\n                    Menu\n                  
\n                \n                  
\n                    Message\n                  
\n                \n                  
\n                    Table\n                  
\n                \n              
\n            
\n          
\n          
\n            \n            
\n              \n              \n              
---
\n              
\n                \n                  
\n                    Accordion\n                  
\n                \n                  
\n                    Checkbox\n                  
\n                \n                  
\n                    Dimmer\n                  
\n                \n                  
\n                    Dropdown\n                  
\n                \n                  
\n                    Modal\n                  
\n                \n                  
\n                    Popup\n                  
\n                \n                  
\n                    Rating\n                  
\n                \n                  
\n                    Shape\n                  
\n                \n                  
\n                    Sidebar\n                  
\n                \n                  
\n                    Transition\n                  
\n                \n              
\n            
\n          
\n          
\n            \n            
\n              \n              \n              
---
\n              
\n                \n                  
\n                    Comment\n                  
\n                \n                  
\n                    Feed\n                  
\n                \n                  
\n                    Item\n                  
\n                \n                  
\n                    List\n                  
\n                \n              
\n            
\n          
\n        
\n      
\n      
\n        
Types
\n        
\n          
\n          
\n        
\n      
\n      
\n        
Variations
\n        
\n          
\n          
\n        
\n      
\n      
\n        
Add
\n      
\n    
\n\n\n  
\n  
\n    
\n      
\n        
 No Designs Yet!
\n        Add an element to the left to begin\n      
\n    
\n  
\n  
\n\n  
\n    
Preview
\n    
\n    
\n  
\n  
\n    
Text
\n    
\n      
\n        \n      
\n      
Update Text
\n    
\n  
\n  
\n    
View
\n    
\n      
Preview
\n      
Code
\n    
\n    
Finish Up
\n    
Download
\n  
\n
\n\n\n\n\n\n\n\n",
      "renderSingleExtensions": false,
      "layout": "default",
      "css": "playground",
      "type": "Library",
      "layoutRelativePath": "default.html.eco",
      "meta": {
        "layout": "default",
        "css": "playground",
        "title": "Playground",
        "type": "Library"
      }
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/documents/test.html",
      "relativePath": "test.html",
      "basename": "test",
      "outBasename": "test",
      "extension": "html",
      "outExtension": "html",
      "extensions": [
        "html"
      ],
      "filename": "test.html",
      "fullDirPath": "/home/jack/projects/semantic/server/documents",
      "outPath": "/home/jack/projects/semantic/docs/test.html",
      "outDirPath": "/home/jack/projects/semantic/docs",
      "outFilename": "test.html",
      "relativeOutPath": "test.html",
      "relativeDirPath": ".",
      "relativeOutDirPath": ".",
      "relativeBase": "test",
      "relativeOutBase": "test",
      "contentType": "text/html",
      "outContentType": "text/html",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": "2013-12-04T09:15:19.449Z",
      "wtime": "2013-12-04T09:15:28.589Z",
      "exists": true,
      "encoding": "utf8",
      "source": "\n\n\n\n\n\n    
\n  
\n    
\n        \n        
\n             \n\n            
 \n\n            
\n        
\n    
\n    
Check
\n
\n",
      "content": "\n\n\n\n\n    
\n  
\n    
\n        \n        
\n             \n\n            
 \n\n            
\n        
\n    
\n    
Check
\n
\n",
      "tags": null,
      "render": true,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "test.html",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "test",
      "url": "/test.html",
      "urls": [
        "/test.html"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": false,
      "header": null,
      "parser": null,
      "body": "\n\n\n\n\n    
\n  
\n    
\n        \n        
\n             \n\n            
 \n\n            
\n        
\n    
\n    
Check
\n
\n",
      "rendered": true,
      "contentRendered": "\n\n\n\n\n    
\n  
\n    
\n        \n        
\n             \n\n            
 \n\n            
\n        
\n    
\n    
Check
\n
\n",
      "contentRenderedWithoutLayouts": "\n\n\n\n\n    
\n  
\n    
\n        \n        
\n             \n\n            
 \n\n            
\n        
\n    
\n    
Check
\n
\n",
      "renderSingleExtensions": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/documents/collections/breadcrumb.html.eco",
      "relativePath": "collections/breadcrumb.html.eco",
      "basename": "breadcrumb",
      "outBasename": "breadcrumb",
      "extension": "eco",
      "outExtension": "html",
      "extensions": [
        "html",
        "eco"
      ],
      "filename": "breadcrumb.html.eco",
      "fullDirPath": "/home/jack/projects/semantic/server/documents/collections",
      "outPath": "/home/jack/projects/semantic/docs/collections/breadcrumb.html",
      "outDirPath": "/home/jack/projects/semantic/docs/collections",
      "outFilename": "breadcrumb.html",
      "relativeOutPath": "collections/breadcrumb.html",
      "relativeDirPath": "collections",
      "relativeOutDirPath": "collections",
      "relativeBase": "collections/breadcrumb",
      "relativeOutBase": "collections/breadcrumb",
      "contentType": "application/octet-stream",
      "outContentType": "text/html",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-03T17:44:32.000Z",
      "rtime": "2013-12-04T09:15:24.580Z",
      "wtime": "2013-12-04T09:15:28.596Z",
      "exists": true,
      "encoding": "utf8",
      "source": "---\nlayout      : 'default'\ncss         : 'breadcrumb'\ntitle       : 'Breadcrumb'\ndescription : 'A breadcrumb is a menu to show the location of the current section in relation to other sections.'\ntype        : 'UI Collection'\n---\n\n<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Types\n      Elements\n      Variations\n    
\n  
\n\n  
Types
\n\n  
\n    
A simple breadcrumb
\n    
\n      Food\n      
 / 
\n      Fruit\n      
 / 
\n      
Apples
\n    
\n  
\n\n  
Elements
\n\n  
\n    
A divider
\n    
A breadcrumb can contain a divider to show the relationship between sections, this can be formatted as an icon or text.
\n    
\n      Food\n      \n      Fruit\n      \n      
Apples
\n    
\n  
\n\n  
\n    
A section
\n    
A breadcrumb can contain sections that can either be formatted as a link or text
\n    
\n      Food\n      
 / 
\n      Fruit\n      
 / 
\n      
Apples
\n    
\n  
\n\n  
Variations
\n\n  
\n    
Size
\n    
A breadcrumb can vary in size
\n    
\n      Food\n      
 / 
\n      Fruit\n      
 / 
\n      
Apples
\n    
\n  
\n  
\n    
\n      Food\n      
 / 
\n      Fruit\n      
 / 
\n      
Apples
\n    
\n  
\n  
\n    
\n      Food\n      
 / 
\n      Fruit\n      
 / 
\n      
Apples
\n    
\n  
\n\n
\n",
      "content": "<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Types\n      Elements\n      Variations\n    
\n  
\n\n  
Types
\n\n  
\n    
A simple breadcrumb
\n    
\n      Food\n      
 / 
\n      Fruit\n      
 / 
\n      
Apples
\n    
\n  
\n\n  
Elements
\n\n  
\n    
A divider
\n    
A breadcrumb can contain a divider to show the relationship between sections, this can be formatted as an icon or text.
\n    
\n      Food\n      \n      Fruit\n      \n      
Apples
\n    
\n  
\n\n  
\n    
A section
\n    
A breadcrumb can contain sections that can either be formatted as a link or text
\n    
\n      Food\n      
 / 
\n      Fruit\n      
 / 
\n      
Apples
\n    
\n  
\n\n  
Variations
\n\n  
\n    
Size
\n    
A breadcrumb can vary in size
\n    
\n      Food\n      
 / 
\n      Fruit\n      
 / 
\n      
Apples
\n    
\n  
\n  
\n    
\n      Food\n      
 / 
\n      Fruit\n      
 / 
\n      
Apples
\n    
\n  
\n  
\n    
\n      Food\n      
 / 
\n      Fruit\n      
 / 
\n      
Apples
\n    
\n  
\n\n
",
      "tags": null,
      "render": true,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": "Breadcrumb",
      "name": "breadcrumb.html",
      "date": "2013-12-03T17:44:32.000Z",
      "slug": "collections-breadcrumb",
      "url": "/collections/breadcrumb.html",
      "urls": [
        "/collections/breadcrumb.html"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": true,
      "header": "layout      : 'default'\ncss         : 'breadcrumb'\ntitle       : 'Breadcrumb'\ndescription : 'A breadcrumb is a menu to show the location of the current section in relation to other sections.'\ntype        : 'UI Collection'",
      "parser": "yaml",
      "body": "<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Types\n      Elements\n      Variations\n    
\n  
\n\n  
Types
\n\n  
\n    
A simple breadcrumb
\n    
\n      Food\n      
 / 
\n      Fruit\n      
 / 
\n      
Apples
\n    
\n  
\n\n  
Elements
\n\n  
\n    
A divider
\n    
A breadcrumb can contain a divider to show the relationship between sections, this can be formatted as an icon or text.
\n    
\n      Food\n      \n      Fruit\n      \n      
Apples
\n    
\n  
\n\n  
\n    
A section
\n    
A breadcrumb can contain sections that can either be formatted as a link or text
\n    
\n      Food\n      
 / 
\n      Fruit\n      
 / 
\n      
Apples
\n    
\n  
\n\n  
Variations
\n\n  
\n    
Size
\n    
A breadcrumb can vary in size
\n    
\n      Food\n      
 / 
\n      Fruit\n      
 / 
\n      
Apples
\n    
\n  
\n  
\n    
\n      Food\n      
 / 
\n      Fruit\n      
 / 
\n      
Apples
\n    
\n  
\n  
\n    
\n      Food\n      
 / 
\n      Fruit\n      
 / 
\n      
Apples
\n    
\n  
\n\n
",
      "rendered": true,
      "contentRendered": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  \n  \n  \n  \n\n  \n\n  \n  \n  Breadcrumb | Semantic UI\n\n  \n  \n\n  \n\n  \n  \n  \n\n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n\n  \n  \n\n\n  
\n    \n       Close Menu\n    \n    \n       Download\n    \n    
\n      \n        Introduction\n      \n      
\n        \n          Definitions\n        \n          Overview\n        \n          Types\n        \n          Variations\n        \n          What's Different\n        \n      
\n    
\n    
\n      Project\n      
\n        \n          Contributing\n        \n          Set-up\n        \n      
\n    
\n    
\n      Elements\n      
\n        \n          Button\n        \n          Divider\n        \n          Header\n        \n          Icon\n        \n          Image\n        \n          Input\n        \n          Label\n        \n          Loader\n        \n          Progress\n        \n          Reveal\n        \n          Segment\n        \n          Step\n        \n      
\n    
\n    
\n      Collections\n      
\n        \n          Breadcrumb\n        \n          Form\n        \n          Grid\n        \n          Menu\n        \n          Message\n        \n          Table\n        \n      
\n    
\n    
\n      Views\n      
\n        \n          Comment\n        \n          Feed\n        \n          Item\n        \n          List\n        \n      
\n    
\n    
\n      Modules\n      
\n        \n          Accordion\n        \n          Checkbox\n        \n          Dimmer\n        \n          Dropdown\n        \n          Modal\n        \n          Popup\n        \n          Rating\n        \n          Shape\n        \n          Sidebar\n        \n          Transition\n        \n      
\n    
\n    
\n      Behavior\n      
\n        \n          Form Validation\n        \n      
\n    
\n    
\n      Style Guide\n      
\n        \n          CSS\n        \n          Javascript\n        \n          Language\n        \n      
\n    
\n\n  
\n\n  
\n    
\n       Content\n      
\n        UI Collection: Breadcrumb\n      
\n      \n      
\n      \n      
\n        1 of 6\n        
\n          \n            
\n              1. Breadcrumb\n            
\n          \n            
\n              2. Form\n            
\n          \n            
\n              3. Grid\n            
\n          \n            
\n              4. Menu\n            
\n          \n            
\n              5. Message\n            
\n          \n            
\n              6. Table\n            
\n          \n        
\n      
\n      \n      \n      \n      
\n        \n        
\n          \n        
\n        \n        \n\n        \n          \n        \n        \n          \n        \n        \n        \n          \n        \n        \n      
\n    
\n  
\n    
\n      \n      Menu\n    
\n  \n\n
\n  
\n    
\n\n      
\n        Breadcrumb\n        \n      
\n\n      
A breadcrumb is a menu to show the location of the current section in relation to other sections.
\n      \n      
\n        Definition Mode\n        \n      
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n\n
\n\n  
\n    
\n      Types\n      Elements\n      Variations\n    
\n  
\n\n  
Types
\n\n  
\n    
A simple breadcrumb
\n    
\n      Food\n      
 / 
\n      Fruit\n      
 / 
\n      
Apples
\n    
\n  
\n\n  
Elements
\n\n  
\n    
A divider
\n    
A breadcrumb can contain a divider to show the relationship between sections, this can be formatted as an icon or text.
\n    
\n      Food\n      \n      Fruit\n      \n      
Apples
\n    
\n  
\n\n  
\n    
A section
\n    
A breadcrumb can contain sections that can either be formatted as a link or text
\n    
\n      Food\n      
 / 
\n      Fruit\n      
 / 
\n      
Apples
\n    
\n  
\n\n  
Variations
\n\n  
\n    
Size
\n    
A breadcrumb can vary in size
\n    
\n      Food\n      
 / 
\n      Fruit\n      
 / 
\n      
Apples
\n    
\n  
\n  
\n    
\n      Food\n      
 / 
\n      Fruit\n      
 / 
\n      
Apples
\n    
\n  
\n  
\n    
\n      Food\n      
 / 
\n      Fruit\n      
 / 
\n      
Apples
\n    
\n  
\n\n
\n\n\n",
      "contentRenderedWithoutLayouts": "\n\n
\n  
\n    
\n\n      
\n        Breadcrumb\n        \n      
\n\n      
A breadcrumb is a menu to show the location of the current section in relation to other sections.
\n      \n      
\n        Definition Mode\n        \n      
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n\n
\n\n  
\n    
\n      Types\n      Elements\n      Variations\n    
\n  
\n\n  
Types
\n\n  
\n    
A simple breadcrumb
\n    
\n      Food\n      
 / 
\n      Fruit\n      
 / 
\n      
Apples
\n    
\n  
\n\n  
Elements
\n\n  
\n    
A divider
\n    
A breadcrumb can contain a divider to show the relationship between sections, this can be formatted as an icon or text.
\n    
\n      Food\n      \n      Fruit\n      \n      
Apples
\n    
\n  
\n\n  
\n    
A section
\n    
A breadcrumb can contain sections that can either be formatted as a link or text
\n    
\n      Food\n      
 / 
\n      Fruit\n      
 / 
\n      
Apples
\n    
\n  
\n\n  
Variations
\n\n  
\n    
Size
\n    
A breadcrumb can vary in size
\n    
\n      Food\n      
 / 
\n      Fruit\n      
 / 
\n      
Apples
\n    
\n  
\n  
\n    
\n      Food\n      
 / 
\n      Fruit\n      
 / 
\n      
Apples
\n    
\n  
\n  
\n    
\n      Food\n      
 / 
\n      Fruit\n      
 / 
\n      
Apples
\n    
\n  
\n\n
",
      "renderSingleExtensions": false,
      "layout": "default",
      "css": "breadcrumb",
      "description": "A breadcrumb is a menu to show the location of the current section in relation to other sections.",
      "type": "UI Collection",
      "layoutRelativePath": "default.html.eco",
      "meta": {
        "layout": "default",
        "css": "breadcrumb",
        "title": "Breadcrumb",
        "description": "A breadcrumb is a menu to show the location of the current section in relation to other sections.",
        "type": "UI Collection"
      }
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/documents/collections/form.html.eco",
      "relativePath": "collections/form.html.eco",
      "basename": "form",
      "outBasename": "form",
      "extension": "eco",
      "outExtension": "html",
      "extensions": [
        "html",
        "eco"
      ],
      "filename": "form.html.eco",
      "fullDirPath": "/home/jack/projects/semantic/server/documents/collections",
      "outPath": "/home/jack/projects/semantic/docs/collections/form.html",
      "outDirPath": "/home/jack/projects/semantic/docs/collections",
      "outFilename": "form.html",
      "relativeOutPath": "collections/form.html",
      "relativeDirPath": "collections",
      "relativeOutDirPath": "collections",
      "relativeBase": "collections/form",
      "relativeOutBase": "collections/form",
      "contentType": "application/octet-stream",
      "outContentType": "text/html",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": "2013-12-04T09:15:24.641Z",
      "wtime": "2013-12-04T09:15:28.601Z",
      "exists": true,
      "encoding": "utf8",
      "source": "---\nlayout      : 'default'\ncss         : 'form'\n\ntitle       : 'Form'\ndescription : 'A form is a collection of user input elements'\ntype        : 'UI Collection'\n---\n\n\n<%- @partial('header') %>\n\n
\n  
\n    
\n      Types\n      Elements\n      States\n      Variations\n      Groups\n    
\n  
\n  
Types
\n\n  
\n    
Form:
\n    
\n      Forms always include fields, and fields always contain form elements. Fields themselves may also include:\n        inputs, standard form fields, labels, selection dropdowns, textareas, as well as:\n        checkboxes, and message blocks.\n    
\n    
Validation messages use messages which are formatted for use inside forms.
\n    
\n      
If you are looking for form validation, you should check out form validation.
\n    
\n    
\n      
This example uses a ui segment to add the padding and background color. This is not required.
\n    
\n    
\n      
\n        \n        
\n          \n          \n          
\n            \n          
\n        
\n      
\n      
\n        \n        
\n          \n          \n          
\n            \n          
\n        
\n      
\n      
\n        
We noticed some issues
\n      
\n      
Login
\n    
\n  
\n\n  
Elements
\n\n  
\n    
Field
\n    
A field is a form element containing a label and an input
\n    
\n      
\n        \n        \n      
\n    
\n  
\n\n  
\n    
Text Area
\n    
A textarea uses the default form element
\n    
\n      
\n        \n        \n      
\n    
\n  
\n\n  
\n    
Checkbox
\n    
UI Checkboxes are styled forms of standard form checkboxes.
\n    
\n    $('.ui.checkbox')\n      .checkbox()\n    ;\n    
\n    
\n      
\n        
\n          \n          \n        
\n      
\n      
\n        
\n          \n          \n        
\n        \n      
\n      
\n        
\n          \n          \n        
\n      
\n    
\n  
\n\n  
\n    
Select
\n    
A selection dropdown, a type of ui dropdown can be used to allow for a selection from multiple choices
\n    
\n    $('.ui.selection.dropdown')\n      .dropdown()\n    ;\n    
\n    
\n      \n      
Gender
\n      \n      
\n        
Male
\n        
Female
\n      
\n    
\n  
\n\n  
\n    
Radio Box
\n    
Radio boxes are styled forms of standard form radio controls.
\n    
\n    $('.ui.radio.checkbox')\n      .checkbox()\n    ;\n    
\n    
\n      
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          
\n            \n            \n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Text Block
\n    
Text blocks have special meaning inside a form tag. Any info, error, or warning message blocks found inside a form are hidden by default.
\n    
\n      
\n        
We had some issues
\n        
    \n          
  • Please enter your first name
    • \n          
  • Please enter your last name
    • \n        
\n      
\n    
\n  
\n\n  
States
\n\n  
Form
\n\n  
\n    
Loading
\n    
If a form is in loading state, it will automatically show a loading indicator:
\n\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
\n        \n        \n      
\n      
\n        \n        \n      
\n      
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n  
\n\n  
\n    
Error
\n    
If a form is in an error state, it will automatically show any error message blocks:
\n    
\n      
\n        
Action Forbidden
\n        
You can only sign up for an account once with a given e-mail address.
\n      
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
\n        \n        \n      
\n      
\n        \n        \n      
\n      
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n  
\n\n  
\n    
Warning
\n    
If a form is in warning state, it will automatically show any warning message block:
\n\n    
\n      
\n        
Could you check something!
\n        
    \n          
  • You forgot your first name
    • \n          
  • And also your last name
    • \n        
\n      
\n      
\n        
\n          \n          \n          
Enter a first name
\n        
\n        
\n          \n          \n          
Enter a last name
\n        
\n      
\n      
\n        \n        \n      
\n      
\n        \n        \n      
\n      
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n  
\n\n  
Form Fields
\n\n  
\n    
Error
\n    
Individual fields may contain an error state
\n\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n    
\n  
\n\n  
\n    
Disabled
\n    
Individual fields may be disabled or read only
\n\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n    
\n  
\n\n  
Variations
\n\n  
Forms
\n\n  
\n    
Fluid
\n    
A form can take the width of its container
\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n  
\n\n  
\n    
Size
\n    
A form can also be small or large
\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n    

\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n  
\n\n  
\n    
Inverted
\n    
A form on a dark background may have to invert its color scheme
\n\n    
\n      
\n        
\n          
We had some issues
\n          
    \n            
  • Please enter your first name
    • \n            
  • Please enter your last name
    • \n          
\n        
\n        
\n          
\n            \n            \n          
\n          
\n            \n            \n          
\n        
\n        
Submit
\n      
\n    
\n  
\n\n\n  
Fields
\n\n  
\n    
Inline
\n    
A field can have its label next to instead of above it.
\n    
\n        
\n          \n          \n        
\n    
\n  
\n\n\n  
\n    
Date
\n    
A field can let users know they are for dates
\n    
\n      
\n        \n        \n      
\n    
\n  
\n\n\n  
Groups
\n\n  
\n    
Fields
\n    
Fields can exist together side by side
\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n    
\n  
\n\n  
\n    
Grouped Fields
\n    
Fields can be grouped to show related choices
\n    
\n      
\n        
\n          
\n            \n            \n          
\n          \n        
\n        
\n          
\n            \n            \n          
\n          \n        
\n        
\n          
\n            \n            \n          
\n          \n        
\n        
\n          
\n            \n            \n          
\n          \n        
\n      
\n    
\n  
\n\n  
\n    
Inline
\n    
Multiple fields may be inline in a row
\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n        
\n        
\n          \n        
\n      
\n    
\n  
\n\n
\n",
      "content": "\n\n<%- @partial('header') %>\n\n
\n  
\n    
\n      Types\n      Elements\n      States\n      Variations\n      Groups\n    
\n  
\n  
Types
\n\n  
\n    
Form:
\n    
\n      Forms always include fields, and fields always contain form elements. Fields themselves may also include:\n        inputs, standard form fields, labels, selection dropdowns, textareas, as well as:\n        checkboxes, and message blocks.\n    
\n    
Validation messages use messages which are formatted for use inside forms.
\n    
\n      
If you are looking for form validation, you should check out form validation.
\n    
\n    
\n      
This example uses a ui segment to add the padding and background color. This is not required.
\n    
\n    
\n      
\n        \n        
\n          \n          \n          
\n            \n          
\n        
\n      
\n      
\n        \n        
\n          \n          \n          
\n            \n          
\n        
\n      
\n      
\n        
We noticed some issues
\n      
\n      
Login
\n    
\n  
\n\n  
Elements
\n\n  
\n    
Field
\n    
A field is a form element containing a label and an input
\n    
\n      
\n        \n        \n      
\n    
\n  
\n\n  
\n    
Text Area
\n    
A textarea uses the default form element
\n    
\n      
\n        \n        \n      
\n    
\n  
\n\n  
\n    
Checkbox
\n    
UI Checkboxes are styled forms of standard form checkboxes.
\n    
\n    $('.ui.checkbox')\n      .checkbox()\n    ;\n    
\n    
\n      
\n        
\n          \n          \n        
\n      
\n      
\n        
\n          \n          \n        
\n        \n      
\n      
\n        
\n          \n          \n        
\n      
\n    
\n  
\n\n  
\n    
Select
\n    
A selection dropdown, a type of ui dropdown can be used to allow for a selection from multiple choices
\n    
\n    $('.ui.selection.dropdown')\n      .dropdown()\n    ;\n    
\n    
\n      \n      
Gender
\n      \n      
\n        
Male
\n        
Female
\n      
\n    
\n  
\n\n  
\n    
Radio Box
\n    
Radio boxes are styled forms of standard form radio controls.
\n    
\n    $('.ui.radio.checkbox')\n      .checkbox()\n    ;\n    
\n    
\n      
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          
\n            \n            \n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Text Block
\n    
Text blocks have special meaning inside a form tag. Any info, error, or warning message blocks found inside a form are hidden by default.
\n    
\n      
\n        
We had some issues
\n        
    \n          
  • Please enter your first name
    • \n          
  • Please enter your last name
    • \n        
\n      
\n    
\n  
\n\n  
States
\n\n  
Form
\n\n  
\n    
Loading
\n    
If a form is in loading state, it will automatically show a loading indicator:
\n\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
\n        \n        \n      
\n      
\n        \n        \n      
\n      
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n  
\n\n  
\n    
Error
\n    
If a form is in an error state, it will automatically show any error message blocks:
\n    
\n      
\n        
Action Forbidden
\n        
You can only sign up for an account once with a given e-mail address.
\n      
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
\n        \n        \n      
\n      
\n        \n        \n      
\n      
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n  
\n\n  
\n    
Warning
\n    
If a form is in warning state, it will automatically show any warning message block:
\n\n    
\n      
\n        
Could you check something!
\n        
    \n          
  • You forgot your first name
    • \n          
  • And also your last name
    • \n        
\n      
\n      
\n        
\n          \n          \n          
Enter a first name
\n        
\n        
\n          \n          \n          
Enter a last name
\n        
\n      
\n      
\n        \n        \n      
\n      
\n        \n        \n      
\n      
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n  
\n\n  
Form Fields
\n\n  
\n    
Error
\n    
Individual fields may contain an error state
\n\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n    
\n  
\n\n  
\n    
Disabled
\n    
Individual fields may be disabled or read only
\n\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n    
\n  
\n\n  
Variations
\n\n  
Forms
\n\n  
\n    
Fluid
\n    
A form can take the width of its container
\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n  
\n\n  
\n    
Size
\n    
A form can also be small or large
\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n    

\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n  
\n\n  
\n    
Inverted
\n    
A form on a dark background may have to invert its color scheme
\n\n    
\n      
\n        
\n          
We had some issues
\n          
    \n            
  • Please enter your first name
    • \n            
  • Please enter your last name
    • \n          
\n        
\n        
\n          
\n            \n            \n          
\n          
\n            \n            \n          
\n        
\n        
Submit
\n      
\n    
\n  
\n\n\n  
Fields
\n\n  
\n    
Inline
\n    
A field can have its label next to instead of above it.
\n    
\n        
\n          \n          \n        
\n    
\n  
\n\n\n  
\n    
Date
\n    
A field can let users know they are for dates
\n    
\n      
\n        \n        \n      
\n    
\n  
\n\n\n  
Groups
\n\n  
\n    
Fields
\n    
Fields can exist together side by side
\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n    
\n  
\n\n  
\n    
Grouped Fields
\n    
Fields can be grouped to show related choices
\n    
\n      
\n        
\n          
\n            \n            \n          
\n          \n        
\n        
\n          
\n            \n            \n          
\n          \n        
\n        
\n          
\n            \n            \n          
\n          \n        
\n        
\n          
\n            \n            \n          
\n          \n        
\n      
\n    
\n  
\n\n  
\n    
Inline
\n    
Multiple fields may be inline in a row
\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n        
\n        
\n          \n        
\n      
\n    
\n  
\n\n
",
      "tags": null,
      "render": true,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": "Form",
      "name": "form.html",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "collections-form",
      "url": "/collections/form.html",
      "urls": [
        "/collections/form.html"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": true,
      "header": "layout      : 'default'\ncss         : 'form'\n\ntitle       : 'Form'\ndescription : 'A form is a collection of user input elements'\ntype        : 'UI Collection'",
      "parser": "yaml",
      "body": "\n\n<%- @partial('header') %>\n\n
\n  
\n    
\n      Types\n      Elements\n      States\n      Variations\n      Groups\n    
\n  
\n  
Types
\n\n  
\n    
Form:
\n    
\n      Forms always include fields, and fields always contain form elements. Fields themselves may also include:\n        inputs, standard form fields, labels, selection dropdowns, textareas, as well as:\n        checkboxes, and message blocks.\n    
\n    
Validation messages use messages which are formatted for use inside forms.
\n    
\n      
If you are looking for form validation, you should check out form validation.
\n    
\n    
\n      
This example uses a ui segment to add the padding and background color. This is not required.
\n    
\n    
\n      
\n        \n        
\n          \n          \n          
\n            \n          
\n        
\n      
\n      
\n        \n        
\n          \n          \n          
\n            \n          
\n        
\n      
\n      
\n        
We noticed some issues
\n      
\n      
Login
\n    
\n  
\n\n  
Elements
\n\n  
\n    
Field
\n    
A field is a form element containing a label and an input
\n    
\n      
\n        \n        \n      
\n    
\n  
\n\n  
\n    
Text Area
\n    
A textarea uses the default form element
\n    
\n      
\n        \n        \n      
\n    
\n  
\n\n  
\n    
Checkbox
\n    
UI Checkboxes are styled forms of standard form checkboxes.
\n    
\n    $('.ui.checkbox')\n      .checkbox()\n    ;\n    
\n    
\n      
\n        
\n          \n          \n        
\n      
\n      
\n        
\n          \n          \n        
\n        \n      
\n      
\n        
\n          \n          \n        
\n      
\n    
\n  
\n\n  
\n    
Select
\n    
A selection dropdown, a type of ui dropdown can be used to allow for a selection from multiple choices
\n    
\n    $('.ui.selection.dropdown')\n      .dropdown()\n    ;\n    
\n    
\n      \n      
Gender
\n      \n      
\n        
Male
\n        
Female
\n      
\n    
\n  
\n\n  
\n    
Radio Box
\n    
Radio boxes are styled forms of standard form radio controls.
\n    
\n    $('.ui.radio.checkbox')\n      .checkbox()\n    ;\n    
\n    
\n      
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          
\n            \n            \n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Text Block
\n    
Text blocks have special meaning inside a form tag. Any info, error, or warning message blocks found inside a form are hidden by default.
\n    
\n      
\n        
We had some issues
\n        
    \n          
  • Please enter your first name
    • \n          
  • Please enter your last name
    • \n        
\n      
\n    
\n  
\n\n  
States
\n\n  
Form
\n\n  
\n    
Loading
\n    
If a form is in loading state, it will automatically show a loading indicator:
\n\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
\n        \n        \n      
\n      
\n        \n        \n      
\n      
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n  
\n\n  
\n    
Error
\n    
If a form is in an error state, it will automatically show any error message blocks:
\n    
\n      
\n        
Action Forbidden
\n        
You can only sign up for an account once with a given e-mail address.
\n      
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
\n        \n        \n      
\n      
\n        \n        \n      
\n      
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n  
\n\n  
\n    
Warning
\n    
If a form is in warning state, it will automatically show any warning message block:
\n\n    
\n      
\n        
Could you check something!
\n        
    \n          
  • You forgot your first name
    • \n          
  • And also your last name
    • \n        
\n      
\n      
\n        
\n          \n          \n          
Enter a first name
\n        
\n        
\n          \n          \n          
Enter a last name
\n        
\n      
\n      
\n        \n        \n      
\n      
\n        \n        \n      
\n      
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n  
\n\n  
Form Fields
\n\n  
\n    
Error
\n    
Individual fields may contain an error state
\n\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n    
\n  
\n\n  
\n    
Disabled
\n    
Individual fields may be disabled or read only
\n\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n    
\n  
\n\n  
Variations
\n\n  
Forms
\n\n  
\n    
Fluid
\n    
A form can take the width of its container
\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n  
\n\n  
\n    
Size
\n    
A form can also be small or large
\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n    

\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n  
\n\n  
\n    
Inverted
\n    
A form on a dark background may have to invert its color scheme
\n\n    
\n      
\n        
\n          
We had some issues
\n          
    \n            
  • Please enter your first name
    • \n            
  • Please enter your last name
    • \n          
\n        
\n        
\n          
\n            \n            \n          
\n          
\n            \n            \n          
\n        
\n        
Submit
\n      
\n    
\n  
\n\n\n  
Fields
\n\n  
\n    
Inline
\n    
A field can have its label next to instead of above it.
\n    
\n        
\n          \n          \n        
\n    
\n  
\n\n\n  
\n    
Date
\n    
A field can let users know they are for dates
\n    
\n      
\n        \n        \n      
\n    
\n  
\n\n\n  
Groups
\n\n  
\n    
Fields
\n    
Fields can exist together side by side
\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n    
\n  
\n\n  
\n    
Grouped Fields
\n    
Fields can be grouped to show related choices
\n    
\n      
\n        
\n          
\n            \n            \n          
\n          \n        
\n        
\n          
\n            \n            \n          
\n          \n        
\n        
\n          
\n            \n            \n          
\n          \n        
\n        
\n          
\n            \n            \n          
\n          \n        
\n      
\n    
\n  
\n\n  
\n    
Inline
\n    
Multiple fields may be inline in a row
\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n        
\n        
\n          \n        
\n      
\n    
\n  
\n\n
",
      "rendered": true,
      "contentRendered": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  \n  \n  \n  \n\n  \n\n  \n  \n  Form | Semantic UI\n\n  \n  \n\n  \n\n  \n  \n  \n\n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n\n  \n  \n\n\n  
\n    \n       Close Menu\n    \n    \n       Download\n    \n    
\n      \n        Introduction\n      \n      
\n        \n          Definitions\n        \n          Overview\n        \n          Types\n        \n          Variations\n        \n          What's Different\n        \n      
\n    
\n    
\n      Project\n      
\n        \n          Contributing\n        \n          Set-up\n        \n      
\n    
\n    
\n      Elements\n      
\n        \n          Button\n        \n          Divider\n        \n          Header\n        \n          Icon\n        \n          Image\n        \n          Input\n        \n          Label\n        \n          Loader\n        \n          Progress\n        \n          Reveal\n        \n          Segment\n        \n          Step\n        \n      
\n    
\n    
\n      Collections\n      
\n        \n          Breadcrumb\n        \n          Form\n        \n          Grid\n        \n          Menu\n        \n          Message\n        \n          Table\n        \n      
\n    
\n    
\n      Views\n      
\n        \n          Comment\n        \n          Feed\n        \n          Item\n        \n          List\n        \n      
\n    
\n    
\n      Modules\n      
\n        \n          Accordion\n        \n          Checkbox\n        \n          Dimmer\n        \n          Dropdown\n        \n          Modal\n        \n          Popup\n        \n          Rating\n        \n          Shape\n        \n          Sidebar\n        \n          Transition\n        \n      
\n    
\n    
\n      Behavior\n      
\n        \n          Form Validation\n        \n      
\n    
\n    
\n      Style Guide\n      
\n        \n          CSS\n        \n          Javascript\n        \n          Language\n        \n      
\n    
\n\n  
\n\n  
\n    
\n       Content\n      
\n        UI Collection: Form\n      
\n      \n      \n      \n      
\n        2 of 6\n        
\n          \n            
\n              1. Breadcrumb\n            
\n          \n            
\n              2. Form\n            
\n          \n            
\n              3. Grid\n            
\n          \n            
\n              4. Menu\n            
\n          \n            
\n              5. Message\n            
\n          \n            
\n              6. Table\n            
\n          \n        
\n      
\n      \n      \n      \n      
\n        \n        
\n          \n        
\n        \n        \n\n        \n          \n        \n        \n          \n        \n        \n        \n          \n        \n        \n      
\n    
\n  
\n    
\n      \n      Menu\n    
\n  \n\n\n\n
\n  
\n    
\n\n      
\n        Form\n        \n      
\n\n      
A form is a collection of user input elements
\n      \n      
\n        Definition Mode\n        \n      
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n\n
\n  
\n    
\n      Types\n      Elements\n      States\n      Variations\n      Groups\n    
\n  
\n  
Types
\n\n  
\n    
Form:
\n    
\n      Forms always include fields, and fields always contain form elements. Fields themselves may also include:\n        inputs, standard form fields, labels, selection dropdowns, textareas, as well as:\n        checkboxes, and message blocks.\n    
\n    
Validation messages use messages which are formatted for use inside forms.
\n    
\n      
If you are looking for form validation, you should check out form validation.
\n    
\n    
\n      
This example uses a ui segment to add the padding and background color. This is not required.
\n    
\n    
\n      
\n        \n        
\n          \n          \n          
\n            \n          
\n        
\n      
\n      
\n        \n        
\n          \n          \n          
\n            \n          
\n        
\n      
\n      
\n        
We noticed some issues
\n      
\n      
Login
\n    
\n  
\n\n  
Elements
\n\n  
\n    
Field
\n    
A field is a form element containing a label and an input
\n    
\n      
\n        \n        \n      
\n    
\n  
\n\n  
\n    
Text Area
\n    
A textarea uses the default form element
\n    
\n      
\n        \n        \n      
\n    
\n  
\n\n  
\n    
Checkbox
\n    
UI Checkboxes are styled forms of standard form checkboxes.
\n    
\n    $('.ui.checkbox')\n      .checkbox()\n    ;\n    
\n    
\n      
\n        
\n          \n          \n        
\n      
\n      
\n        
\n          \n          \n        
\n        \n      
\n      
\n        
\n          \n          \n        
\n      
\n    
\n  
\n\n  
\n    
Select
\n    
A selection dropdown, a type of ui dropdown can be used to allow for a selection from multiple choices
\n    
\n    $('.ui.selection.dropdown')\n      .dropdown()\n    ;\n    
\n    
\n      \n      
Gender
\n      \n      
\n        
Male
\n        
Female
\n      
\n    
\n  
\n\n  
\n    
Radio Box
\n    
Radio boxes are styled forms of standard form radio controls.
\n    
\n    $('.ui.radio.checkbox')\n      .checkbox()\n    ;\n    
\n    
\n      
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          
\n            \n            \n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Text Block
\n    
Text blocks have special meaning inside a form tag. Any info, error, or warning message blocks found inside a form are hidden by default.
\n    
\n      
\n        
We had some issues
\n        
    \n          
  • Please enter your first name
    • \n          
  • Please enter your last name
    • \n        
\n      
\n    
\n  
\n\n  
States
\n\n  
Form
\n\n  
\n    
Loading
\n    
If a form is in loading state, it will automatically show a loading indicator:
\n\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
\n        \n        \n      
\n      
\n        \n        \n      
\n      
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n  
\n\n  
\n    
Error
\n    
If a form is in an error state, it will automatically show any error message blocks:
\n    
\n      
\n        
Action Forbidden
\n        
You can only sign up for an account once with a given e-mail address.
\n      
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
\n        \n        \n      
\n      
\n        \n        \n      
\n      
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n  
\n\n  
\n    
Warning
\n    
If a form is in warning state, it will automatically show any warning message block:
\n\n    
\n      
\n        
Could you check something!
\n        
    \n          
  • You forgot your first name
    • \n          
  • And also your last name
    • \n        
\n      
\n      
\n        
\n          \n          \n          
Enter a first name
\n        
\n        
\n          \n          \n          
Enter a last name
\n        
\n      
\n      
\n        \n        \n      
\n      
\n        \n        \n      
\n      
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n  
\n\n  
Form Fields
\n\n  
\n    
Error
\n    
Individual fields may contain an error state
\n\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n    
\n  
\n\n  
\n    
Disabled
\n    
Individual fields may be disabled or read only
\n\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n    
\n  
\n\n  
Variations
\n\n  
Forms
\n\n  
\n    
Fluid
\n    
A form can take the width of its container
\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n  
\n\n  
\n    
Size
\n    
A form can also be small or large
\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n    

\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n  
\n\n  
\n    
Inverted
\n    
A form on a dark background may have to invert its color scheme
\n\n    
\n      
\n        
\n          
We had some issues
\n          
    \n            
  • Please enter your first name
    • \n            
  • Please enter your last name
    • \n          
\n        
\n        
\n          
\n            \n            \n          
\n          
\n            \n            \n          
\n        
\n        
Submit
\n      
\n    
\n  
\n\n\n  
Fields
\n\n  
\n    
Inline
\n    
A field can have its label next to instead of above it.
\n    
\n        
\n          \n          \n        
\n    
\n  
\n\n\n  
\n    
Date
\n    
A field can let users know they are for dates
\n    
\n      
\n        \n        \n      
\n    
\n  
\n\n\n  
Groups
\n\n  
\n    
Fields
\n    
Fields can exist together side by side
\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n    
\n  
\n\n  
\n    
Grouped Fields
\n    
Fields can be grouped to show related choices
\n    
\n      
\n        
\n          
\n            \n            \n          
\n          \n        
\n        
\n          
\n            \n            \n          
\n          \n        
\n        
\n          
\n            \n            \n          
\n          \n        
\n        
\n          
\n            \n            \n          
\n          \n        
\n      
\n    
\n  
\n\n  
\n    
Inline
\n    
Multiple fields may be inline in a row
\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n        
\n        
\n          \n        
\n      
\n    
\n  
\n\n
\n\n\n",
      "contentRenderedWithoutLayouts": "\n\n\n\n
\n  
\n    
\n\n      
\n        Form\n        \n      
\n\n      
A form is a collection of user input elements
\n      \n      
\n        Definition Mode\n        \n      
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n\n
\n  
\n    
\n      Types\n      Elements\n      States\n      Variations\n      Groups\n    
\n  
\n  
Types
\n\n  
\n    
Form:
\n    
\n      Forms always include fields, and fields always contain form elements. Fields themselves may also include:\n        inputs, standard form fields, labels, selection dropdowns, textareas, as well as:\n        checkboxes, and message blocks.\n    
\n    
Validation messages use messages which are formatted for use inside forms.
\n    
\n      
If you are looking for form validation, you should check out form validation.
\n    
\n    
\n      
This example uses a ui segment to add the padding and background color. This is not required.
\n    
\n    
\n      
\n        \n        
\n          \n          \n          
\n            \n          
\n        
\n      
\n      
\n        \n        
\n          \n          \n          
\n            \n          
\n        
\n      
\n      
\n        
We noticed some issues
\n      
\n      
Login
\n    
\n  
\n\n  
Elements
\n\n  
\n    
Field
\n    
A field is a form element containing a label and an input
\n    
\n      
\n        \n        \n      
\n    
\n  
\n\n  
\n    
Text Area
\n    
A textarea uses the default form element
\n    
\n      
\n        \n        \n      
\n    
\n  
\n\n  
\n    
Checkbox
\n    
UI Checkboxes are styled forms of standard form checkboxes.
\n    
\n    $('.ui.checkbox')\n      .checkbox()\n    ;\n    
\n    
\n      
\n        
\n          \n          \n        
\n      
\n      
\n        
\n          \n          \n        
\n        \n      
\n      
\n        
\n          \n          \n        
\n      
\n    
\n  
\n\n  
\n    
Select
\n    
A selection dropdown, a type of ui dropdown can be used to allow for a selection from multiple choices
\n    
\n    $('.ui.selection.dropdown')\n      .dropdown()\n    ;\n    
\n    
\n      \n      
Gender
\n      \n      
\n        
Male
\n        
Female
\n      
\n    
\n  
\n\n  
\n    
Radio Box
\n    
Radio boxes are styled forms of standard form radio controls.
\n    
\n    $('.ui.radio.checkbox')\n      .checkbox()\n    ;\n    
\n    
\n      
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          
\n            \n            \n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Text Block
\n    
Text blocks have special meaning inside a form tag. Any info, error, or warning message blocks found inside a form are hidden by default.
\n    
\n      
\n        
We had some issues
\n        
    \n          
  • Please enter your first name
    • \n          
  • Please enter your last name
    • \n        
\n      
\n    
\n  
\n\n  
States
\n\n  
Form
\n\n  
\n    
Loading
\n    
If a form is in loading state, it will automatically show a loading indicator:
\n\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
\n        \n        \n      
\n      
\n        \n        \n      
\n      
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n  
\n\n  
\n    
Error
\n    
If a form is in an error state, it will automatically show any error message blocks:
\n    
\n      
\n        
Action Forbidden
\n        
You can only sign up for an account once with a given e-mail address.
\n      
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
\n        \n        \n      
\n      
\n        \n        \n      
\n      
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n  
\n\n  
\n    
Warning
\n    
If a form is in warning state, it will automatically show any warning message block:
\n\n    
\n      
\n        
Could you check something!
\n        
    \n          
  • You forgot your first name
    • \n          
  • And also your last name
    • \n        
\n      
\n      
\n        
\n          \n          \n          
Enter a first name
\n        
\n        
\n          \n          \n          
Enter a last name
\n        
\n      
\n      
\n        \n        \n      
\n      
\n        \n        \n      
\n      
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n  
\n\n  
Form Fields
\n\n  
\n    
Error
\n    
Individual fields may contain an error state
\n\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n    
\n  
\n\n  
\n    
Disabled
\n    
Individual fields may be disabled or read only
\n\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n    
\n  
\n\n  
Variations
\n\n  
Forms
\n\n  
\n    
Fluid
\n    
A form can take the width of its container
\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n  
\n\n  
\n    
Size
\n    
A form can also be small or large
\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n    

\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n  
\n\n  
\n    
Inverted
\n    
A form on a dark background may have to invert its color scheme
\n\n    
\n      
\n        
\n          
We had some issues
\n          
    \n            
  • Please enter your first name
    • \n            
  • Please enter your last name
    • \n          
\n        
\n        
\n          
\n            \n            \n          
\n          
\n            \n            \n          
\n        
\n        
Submit
\n      
\n    
\n  
\n\n\n  
Fields
\n\n  
\n    
Inline
\n    
A field can have its label next to instead of above it.
\n    
\n        
\n          \n          \n        
\n    
\n  
\n\n\n  
\n    
Date
\n    
A field can let users know they are for dates
\n    
\n      
\n        \n        \n      
\n    
\n  
\n\n\n  
Groups
\n\n  
\n    
Fields
\n    
Fields can exist together side by side
\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n    
\n  
\n\n  
\n    
Grouped Fields
\n    
Fields can be grouped to show related choices
\n    
\n      
\n        
\n          
\n            \n            \n          
\n          \n        
\n        
\n          
\n            \n            \n          
\n          \n        
\n        
\n          
\n            \n            \n          
\n          \n        
\n        
\n          
\n            \n            \n          
\n          \n        
\n      
\n    
\n  
\n\n  
\n    
Inline
\n    
Multiple fields may be inline in a row
\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n        
\n        
\n          \n        
\n      
\n    
\n  
\n\n
",
      "renderSingleExtensions": false,
      "layout": "default",
      "css": "form",
      "description": "A form is a collection of user input elements",
      "type": "UI Collection",
      "layoutRelativePath": "default.html.eco",
      "meta": {
        "layout": "default",
        "css": "form",
        "title": "Form",
        "description": "A form is a collection of user input elements",
        "type": "UI Collection"
      }
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/documents/collections/grid.html.eco",
      "relativePath": "collections/grid.html.eco",
      "basename": "grid",
      "outBasename": "grid",
      "extension": "eco",
      "outExtension": "html",
      "extensions": [
        "html",
        "eco"
      ],
      "filename": "grid.html.eco",
      "fullDirPath": "/home/jack/projects/semantic/server/documents/collections",
      "outPath": "/home/jack/projects/semantic/docs/collections/grid.html",
      "outDirPath": "/home/jack/projects/semantic/docs/collections",
      "outFilename": "grid.html",
      "relativeOutPath": "collections/grid.html",
      "relativeDirPath": "collections",
      "relativeOutDirPath": "collections",
      "relativeBase": "collections/grid",
      "relativeOutBase": "collections/grid",
      "contentType": "application/octet-stream",
      "outContentType": "text/html",
      "ctime": "2013-12-04T07:20:20.000Z",
      "mtime": "2013-12-04T07:20:21.000Z",
      "rtime": "2013-12-04T09:15:24.702Z",
      "wtime": "2013-12-04T09:15:28.607Z",
      "exists": true,
      "encoding": "utf8",
      "source": "---\nlayout      : 'default'\ncss         : 'Grid'\n\ntitle       : 'Grid'\ndescription : 'A grid is a structure used to harmonize negative space in a layout'\ntype        : 'UI Collection'\n---\n\n<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Standard\n      Elements\n      Types\n      Variations\n    
\n  
\n\n  
Standard
\n\n  
\n    
Grid
\n    
A grid is made up of columns of content with gutters to provide negative space between columns.
\n\n    
All grid systems must assume an arbitrary amount of column rows. Semantic by default assumes 16 columns
\n    
\n      
\n        
\n        
\n      
\n      
\n        
\n        
\n      
\n      
\n        
\n        
\n      
\n      
\n        
\n        
\n      
\n    
\n  
\n\n  
\n    
Page Grid
\n    
A page grid is used to layout page contents into a grid system. Page grids exists on the top level of a web site. A page grid has gutters to the left and right of its columns to center content on a page.
\n\n    
\n       Semantic UI's page grid by default will change the page gutters to increase at 250pixel intervals.\n    
\n\n    
\n      
\n        
\n          \n            \n            Mail\n          \n          \n            \n            Lab\n          \n          \n            \n            Favorites\n          \n        
\n      
\n      
\n        
\n          Inbox\n          
Welcome to your inbox. Would you like to see more information?
\n        
\n      
\n    
\n  
\n\n  
\n    
Divided Grid
\n    
A grid can have dividers between its columns
\n    
\n      
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n      
\n      
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n      
\n    
\n  
\n\n  
\n    
Vertically Divided Grid
\n    
A grid can have dividers between rows
\n    
\n      
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n      
\n      
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n      
\n    
\n  
\n\n\n  
\n    
Celled Grid
\n    
A grid can have rows divided into cells
\n    
\n      
\n        
\n          
Lorem ipsum do
\n        
\n        
\n          
Lorem ipsum dolor 
\n        
\n        
\n          
Lorem ipsum dolor sitos. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n      
\n      
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n      
\n    
\n  
\n\n  
Elements
\n\n  
\n    
Rows
\n    
A row is used to create vertical padding between groups of columns on a page. If no rows are specified columns will sit flush vertically.
\n    
\n      
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n      
\n      
\n        
\n          
\n           B\n          
\n        
\n        
\n          
\n           B\n          
\n        
\n        
\n          
\n           B\n          
\n        
\n        
\n          
\n           B\n          
\n        
\n        
\n          
\n           B\n          
\n        
\n        
\n          
\n           B\n          
\n        
\n        
\n          
\n           B\n          
\n        
\n        
\n          
\n           B\n          
\n        
\n        
\n          
\n           B\n          
\n        
\n        
\n          
\n            B\n          
\n        
\n        
\n          
\n            B\n          
\n        
\n        
\n          
\n            B\n          
\n        
\n        
\n          
\n            B\n          
\n        
\n        
\n          
\n            B\n          
\n        
\n        
\n          
\n            B\n          
\n        
\n        
\n          
\n            B\n          
\n        
\n      
\n    
\n  
\n  
\n    
Columns
\n    
Columns each contain gutters giving them equal vertical spacing from other columns. Columns by default do not take up their entire row height.
\n    
\n      
\n        
\n          1\n        
\n      
\n      
\n        
\n          2\n        
\n      
\n      
\n        
\n          3\n        
\n      
\n      
\n        
\n          4\n        
\n      
\n    
\n  
\n\n  
Variations
\n\n  
Grid
\n\n  
\n    
Specifying Column Count Per Row
\n    
A grid can have a different number of columns per row
\n    
\n      
\n        
\n          
Log-in
\n          
\n            \n            \n          
\n          
\n            \n            \n          
\n          
Login
\n        
\n      
\n      
\n        
\n          
Register
\n          
\n            
\n              \n              \n            
\n            
\n              \n              \n            
\n          
\n          
\n            \n            \n          
\n          
\n            \n            \n          
\n          
\n            
\n              \n              \n            
\n            \n          
\n          
Submit
\n        
\n      
\n    
\n  
\n\n  
\n    
Relaxed
\n    
A grid can increase its gutters to allow for more negative space
\n    
\n      
\n        
\n          
Log-in
\n          
\n            \n            \n          
\n          
\n            \n            \n          
\n          
Login
\n        
\n      
\n      
\n        
\n          
Register
\n          
\n            
\n              \n              \n            
\n            
\n              \n              \n            
\n          
\n          
\n            \n            \n          
\n          
\n            \n            \n          
\n          
\n            
\n              \n              \n            
\n            \n          
\n          
Submit
\n        
\n      
\n    
\n  
\n\n  
\n    
Stackable Grid
\n    
A grid can have its columns stack on-top of each other after reaching mobile breakpoints
\n    
\n       To see a grid stack, try resizing your browser to a small width\n    
\n    
\n      
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n      
\n      
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n      
\n    
\n  
\n\n  
\n\n    
Text Alignment
\n    
A grid can specify its text alignment
\n    
\n      
\n        
\n          
\n            
\n              Cats\n            
\n          
\n        
\n        
\n          
\n            
\n              Dogs\n            
\n            
\n              Poodle\n            
\n            
\n              Cockerspaniel\n            
\n          
\n        
\n        
\n          
\n            
\n              Monkeys\n            
\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Vertical Alignment
\n    
A grid can specify its vertical alignment to have all its columns vertically centered.
\n    
\n      
\n        
\n          
\n            
\n              Cats\n            
\n          
\n        
\n        
\n          
\n            
\n              Dogs\n            
\n            
\n              Poodle\n            
\n            
\n              Cockerspaniel\n            
\n          
\n        
\n        
\n          
\n            
\n              Monkeys\n            
\n          
\n        
\n      
\n    
\n  
\n\n  
Rows
\n\n  
\n    
Responsive to Device
\n    
A grid can have its columns, or rows only show content for computer, tablet, or mobile.
\n    
\n       Breakpoints are 768px and below for mobile, 768-998px for tablet and 998px+ for pc\n    
\n    
\n      
\n        
\n          
\n            Mobile\n          
\n        
\n        
\n          
\n            Mobile\n          
\n        
\n      
\n      
\n        
\n          
\n            Computer\n          
\n        
\n        
\n          
\n            Tablet and Mobile\n          
\n        
\n        
\n          
\n            All Sizes\n          
\n        
\n        
\n          
\n            All Sizes\n          
\n        
\n      
\n      
\n        
\n          
\n            Computer\n          
\n        
\n        
\n          
\n            Computer\n          
\n        
\n        
\n          
\n            Computer\n          
\n        
\n        
\n          
\n            Computer\n          
\n        
\n      
\n      
\n        
\n          
\n            Tablet\n          
\n        
\n        
\n          
\n            Tablet\n          
\n        
\n        
\n          
\n            Tablet\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Equal Height
\n    
A row can specify that it is equal height so all of its columns appear the length of its longest column.
\n    
\n      
\n        
\n          
This is a short row
\n        
\n        
\n          
This is a short row
\n        
\n        
\n          
This is a very long row with lots of text in it and way more text than the other rows
\n          
It might even span for multiple paragraphs.
\n        
\n      
\n    
\n  
\n  
\n    
Vertical Alignment
\n    
A row can also specify its vertical alignment to have its columns vertically centered.
\n    
\n      
\n        
\n          
\n            
\n              Cats\n            
\n          
\n        
\n        
\n          
\n            
\n              Dogs\n            
\n            
\n              Poodle\n            
\n            
\n              Cockerspaniel\n            
\n          
\n        
\n        
\n          
\n            
\n              Monkeys\n            
\n          
\n        
\n      
\n      
\n        
\n          
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam blandit sagittis elit, nec pharetra justo lobortis vitae. Quisque sed libero ut lacus mattis lacinia. Pellentesque pharetra vel quam sed tristique. Aenean sit amet purus sed sapien suscipit rhoncus. Nunc vel pharetra elit. Integer eleifend in turpis vel suscipit. Mauris porttitor nunc ante, eu vestibulum augue facilisis lacinia. Curabitur blandit urna lorem, et ornare mi laoreet iaculis. Nunc volutpat ultrices libero quis molestie. Nunc ac porta odio. Quisque interdum sodales augue, quis facilisis sem elementum quis.
\n        
\n      
\n      
\n        
\n          
\n            
\n              Dogs\n            
\n          
\n        
\n        
\n          
\n            
\n              Dogs\n            
\n            
\n              Poodle\n            
\n            
\n              Cockerspaniel\n            
\n          
\n        
\n        
\n          
\n            
\n              Monkeys\n            
\n          
\n        
\n      
\n      
\n        
\n          
\n            
\n              Cats\n            
\n          
\n        
\n        
\n          
\n            
\n              Dogs\n            
\n            
\n              Poodle\n            
\n            
\n              Cockerspaniel\n            
\n          
\n        
\n        
\n          
\n            
\n              Monkeys\n            
\n          
\n        
\n      
\n    
\n  
\n\n  
Columns
\n\n  
\n    
Floating
\n    
A column can be \"floated\" to either the left or right of its row.
\n    
\n      
\n        
\n          
\n            Dogs\n          
\n          
\n            Poodle\n          
\n          
\n            Cockerspaniel\n          
\n        
\n      
\n      
\n        
\n          
\n            Cats\n          
\n          
\n            Abysinnian\n          
\n          
\n            Sphynx\n          
\n        
\n      
\n    
\n  
\n  
\n    
Column Width
\n    
A column can vary in width taking up more than a single grid column.
\n    
\n      
\n        
Colume One Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis sapien.
\n      
\n      
\n        
Colume Two Aliquam lobortis commodo sem ac accumsan. Vestibulum non faucibus lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur sed lorem lorem. Nam augue erat, dignissim nec aliquam vel, congue et sapien. Integer viverra justo vel nibh suscipit commodo. Nullam ut turpis nibh, in luctus risus. Sed ut risus nec dui mattis porta. Nam nisi magna, ornare mollis congue a, suscipit at nisl.
\n      
\n      
\n        
Colume Three Donec semper mollis condimentum. Aenean eget rutrum magna. Mauris ornare nibh scelerisque turpis lobortis dignissim. Etiam eleifend justo eget quam semper vulputate. Nulla et risus convallis velit molestie iaculis. Aliquam erat volutpat. 
\n      
\n    
\n  
\n\n
",
      "content": "<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Standard\n      Elements\n      Types\n      Variations\n    
\n  
\n\n  
Standard
\n\n  
\n    
Grid
\n    
A grid is made up of columns of content with gutters to provide negative space between columns.
\n\n    
All grid systems must assume an arbitrary amount of column rows. Semantic by default assumes 16 columns
\n    
\n      
\n        
\n        
\n      
\n      
\n        
\n        
\n      
\n      
\n        
\n        
\n      
\n      
\n        
\n        
\n      
\n    
\n  
\n\n  
\n    
Page Grid
\n    
A page grid is used to layout page contents into a grid system. Page grids exists on the top level of a web site. A page grid has gutters to the left and right of its columns to center content on a page.
\n\n    
\n       Semantic UI's page grid by default will change the page gutters to increase at 250pixel intervals.\n    
\n\n    
\n      
\n        
\n          \n            \n            Mail\n          \n          \n            \n            Lab\n          \n          \n            \n            Favorites\n          \n        
\n      
\n      
\n        
\n          Inbox\n          
Welcome to your inbox. Would you like to see more information?
\n        
\n      
\n    
\n  
\n\n  
\n    
Divided Grid
\n    
A grid can have dividers between its columns
\n    
\n      
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n      
\n      
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n      
\n    
\n  
\n\n  
\n    
Vertically Divided Grid
\n    
A grid can have dividers between rows
\n    
\n      
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n      
\n      
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n      
\n    
\n  
\n\n\n  
\n    
Celled Grid
\n    
A grid can have rows divided into cells
\n    
\n      
\n        
\n          
Lorem ipsum do
\n        
\n        
\n          
Lorem ipsum dolor 
\n        
\n        
\n          
Lorem ipsum dolor sitos. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n      
\n      
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n      
\n    
\n  
\n\n  
Elements
\n\n  
\n    
Rows
\n    
A row is used to create vertical padding between groups of columns on a page. If no rows are specified columns will sit flush vertically.
\n    
\n      
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n      
\n      
\n        
\n          
\n           B\n          
\n        
\n        
\n          
\n           B\n          
\n        
\n        
\n          
\n           B\n          
\n        
\n        
\n          
\n           B\n          
\n        
\n        
\n          
\n           B\n          
\n        
\n        
\n          
\n           B\n          
\n        
\n        
\n          
\n           B\n          
\n        
\n        
\n          
\n           B\n          
\n        
\n        
\n          
\n           B\n          
\n        
\n        
\n          
\n            B\n          
\n        
\n        
\n          
\n            B\n          
\n        
\n        
\n          
\n            B\n          
\n        
\n        
\n          
\n            B\n          
\n        
\n        
\n          
\n            B\n          
\n        
\n        
\n          
\n            B\n          
\n        
\n        
\n          
\n            B\n          
\n        
\n      
\n    
\n  
\n  
\n    
Columns
\n    
Columns each contain gutters giving them equal vertical spacing from other columns. Columns by default do not take up their entire row height.
\n    
\n      
\n        
\n          1\n        
\n      
\n      
\n        
\n          2\n        
\n      
\n      
\n        
\n          3\n        
\n      
\n      
\n        
\n          4\n        
\n      
\n    
\n  
\n\n  
Variations
\n\n  
Grid
\n\n  
\n    
Specifying Column Count Per Row
\n    
A grid can have a different number of columns per row
\n    
\n      
\n        
\n          
Log-in
\n          
\n            \n            \n          
\n          
\n            \n            \n          
\n          
Login
\n        
\n      
\n      
\n        
\n          
Register
\n          
\n            
\n              \n              \n            
\n            
\n              \n              \n            
\n          
\n          
\n            \n            \n          
\n          
\n            \n            \n          
\n          
\n            
\n              \n              \n            
\n            \n          
\n          
Submit
\n        
\n      
\n    
\n  
\n\n  
\n    
Relaxed
\n    
A grid can increase its gutters to allow for more negative space
\n    
\n      
\n        
\n          
Log-in
\n          
\n            \n            \n          
\n          
\n            \n            \n          
\n          
Login
\n        
\n      
\n      
\n        
\n          
Register
\n          
\n            
\n              \n              \n            
\n            
\n              \n              \n            
\n          
\n          
\n            \n            \n          
\n          
\n            \n            \n          
\n          
\n            
\n              \n              \n            
\n            \n          
\n          
Submit
\n        
\n      
\n    
\n  
\n\n  
\n    
Stackable Grid
\n    
A grid can have its columns stack on-top of each other after reaching mobile breakpoints
\n    
\n       To see a grid stack, try resizing your browser to a small width\n    
\n    
\n      
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n      
\n      
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n      
\n    
\n  
\n\n  
\n\n    
Text Alignment
\n    
A grid can specify its text alignment
\n    
\n      
\n        
\n          
\n            
\n              Cats\n            
\n          
\n        
\n        
\n          
\n            
\n              Dogs\n            
\n            
\n              Poodle\n            
\n            
\n              Cockerspaniel\n            
\n          
\n        
\n        
\n          
\n            
\n              Monkeys\n            
\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Vertical Alignment
\n    
A grid can specify its vertical alignment to have all its columns vertically centered.
\n    
\n      
\n        
\n          
\n            
\n              Cats\n            
\n          
\n        
\n        
\n          
\n            
\n              Dogs\n            
\n            
\n              Poodle\n            
\n            
\n              Cockerspaniel\n            
\n          
\n        
\n        
\n          
\n            
\n              Monkeys\n            
\n          
\n        
\n      
\n    
\n  
\n\n  
Rows
\n\n  
\n    
Responsive to Device
\n    
A grid can have its columns, or rows only show content for computer, tablet, or mobile.
\n    
\n       Breakpoints are 768px and below for mobile, 768-998px for tablet and 998px+ for pc\n    
\n    
\n      
\n        
\n          
\n            Mobile\n          
\n        
\n        
\n          
\n            Mobile\n          
\n        
\n      
\n      
\n        
\n          
\n            Computer\n          
\n        
\n        
\n          
\n            Tablet and Mobile\n          
\n        
\n        
\n          
\n            All Sizes\n          
\n        
\n        
\n          
\n            All Sizes\n          
\n        
\n      
\n      
\n        
\n          
\n            Computer\n          
\n        
\n        
\n          
\n            Computer\n          
\n        
\n        
\n          
\n            Computer\n          
\n        
\n        
\n          
\n            Computer\n          
\n        
\n      
\n      
\n        
\n          
\n            Tablet\n          
\n        
\n        
\n          
\n            Tablet\n          
\n        
\n        
\n          
\n            Tablet\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Equal Height
\n    
A row can specify that it is equal height so all of its columns appear the length of its longest column.
\n    
\n      
\n        
\n          
This is a short row
\n        
\n        
\n          
This is a short row
\n        
\n        
\n          
This is a very long row with lots of text in it and way more text than the other rows
\n          
It might even span for multiple paragraphs.
\n        
\n      
\n    
\n  
\n  
\n    
Vertical Alignment
\n    
A row can also specify its vertical alignment to have its columns vertically centered.
\n    
\n      
\n        
\n          
\n            
\n              Cats\n            
\n          
\n        
\n        
\n          
\n            
\n              Dogs\n            
\n            
\n              Poodle\n            
\n            
\n              Cockerspaniel\n            
\n          
\n        
\n        
\n          
\n            
\n              Monkeys\n            
\n          
\n        
\n      
\n      
\n        
\n          
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam blandit sagittis elit, nec pharetra justo lobortis vitae. Quisque sed libero ut lacus mattis lacinia. Pellentesque pharetra vel quam sed tristique. Aenean sit amet purus sed sapien suscipit rhoncus. Nunc vel pharetra elit. Integer eleifend in turpis vel suscipit. Mauris porttitor nunc ante, eu vestibulum augue facilisis lacinia. Curabitur blandit urna lorem, et ornare mi laoreet iaculis. Nunc volutpat ultrices libero quis molestie. Nunc ac porta odio. Quisque interdum sodales augue, quis facilisis sem elementum quis.
\n        
\n      
\n      
\n        
\n          
\n            
\n              Dogs\n            
\n          
\n        
\n        
\n          
\n            
\n              Dogs\n            
\n            
\n              Poodle\n            
\n            
\n              Cockerspaniel\n            
\n          
\n        
\n        
\n          
\n            
\n              Monkeys\n            
\n          
\n        
\n      
\n      
\n        
\n          
\n            
\n              Cats\n            
\n          
\n        
\n        
\n          
\n            
\n              Dogs\n            
\n            
\n              Poodle\n            
\n            
\n              Cockerspaniel\n            
\n          
\n        
\n        
\n          
\n            
\n              Monkeys\n            
\n          
\n        
\n      
\n    
\n  
\n\n  
Columns
\n\n  
\n    
Floating
\n    
A column can be \"floated\" to either the left or right of its row.
\n    
\n      
\n        
\n          
\n            Dogs\n          
\n          
\n            Poodle\n          
\n          
\n            Cockerspaniel\n          
\n        
\n      
\n      
\n        
\n          
\n            Cats\n          
\n          
\n            Abysinnian\n          
\n          
\n            Sphynx\n          
\n        
\n      
\n    
\n  
\n  
\n    
Column Width
\n    
A column can vary in width taking up more than a single grid column.
\n    
\n      
\n        
Colume One Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis sapien.
\n      
\n      
\n        
Colume Two Aliquam lobortis commodo sem ac accumsan. Vestibulum non faucibus lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur sed lorem lorem. Nam augue erat, dignissim nec aliquam vel, congue et sapien. Integer viverra justo vel nibh suscipit commodo. Nullam ut turpis nibh, in luctus risus. Sed ut risus nec dui mattis porta. Nam nisi magna, ornare mollis congue a, suscipit at nisl.
\n      
\n      
\n        
Colume Three Donec semper mollis condimentum. Aenean eget rutrum magna. Mauris ornare nibh scelerisque turpis lobortis dignissim. Etiam eleifend justo eget quam semper vulputate. Nulla et risus convallis velit molestie iaculis. Aliquam erat volutpat. 
\n      
\n    
\n  
\n\n
",
      "tags": null,
      "render": true,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": "Grid",
      "name": "grid.html",
      "date": "2013-12-04T07:20:21.000Z",
      "slug": "collections-grid",
      "url": "/collections/grid.html",
      "urls": [
        "/collections/grid.html"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": true,
      "header": "layout      : 'default'\ncss         : 'Grid'\n\ntitle       : 'Grid'\ndescription : 'A grid is a structure used to harmonize negative space in a layout'\ntype        : 'UI Collection'",
      "parser": "yaml",
      "body": "<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Standard\n      Elements\n      Types\n      Variations\n    
\n  
\n\n  
Standard
\n\n  
\n    
Grid
\n    
A grid is made up of columns of content with gutters to provide negative space between columns.
\n\n    
All grid systems must assume an arbitrary amount of column rows. Semantic by default assumes 16 columns
\n    
\n      
\n        
\n        
\n      
\n      
\n        
\n        
\n      
\n      
\n        
\n        
\n      
\n      
\n        
\n        
\n      
\n    
\n  
\n\n  
\n    
Page Grid
\n    
A page grid is used to layout page contents into a grid system. Page grids exists on the top level of a web site. A page grid has gutters to the left and right of its columns to center content on a page.
\n\n    
\n       Semantic UI's page grid by default will change the page gutters to increase at 250pixel intervals.\n    
\n\n    
\n      
\n        
\n          \n            \n            Mail\n          \n          \n            \n            Lab\n          \n          \n            \n            Favorites\n          \n        
\n      
\n      
\n        
\n          Inbox\n          
Welcome to your inbox. Would you like to see more information?
\n        
\n      
\n    
\n  
\n\n  
\n    
Divided Grid
\n    
A grid can have dividers between its columns
\n    
\n      
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n      
\n      
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n      
\n    
\n  
\n\n  
\n    
Vertically Divided Grid
\n    
A grid can have dividers between rows
\n    
\n      
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n      
\n      
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n      
\n    
\n  
\n\n\n  
\n    
Celled Grid
\n    
A grid can have rows divided into cells
\n    
\n      
\n        
\n          
Lorem ipsum do
\n        
\n        
\n          
Lorem ipsum dolor 
\n        
\n        
\n          
Lorem ipsum dolor sitos. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n      
\n      
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n      
\n    
\n  
\n\n  
Elements
\n\n  
\n    
Rows
\n    
A row is used to create vertical padding between groups of columns on a page. If no rows are specified columns will sit flush vertically.
\n    
\n      
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n      
\n      
\n        
\n          
\n           B\n          
\n        
\n        
\n          
\n           B\n          
\n        
\n        
\n          
\n           B\n          
\n        
\n        
\n          
\n           B\n          
\n        
\n        
\n          
\n           B\n          
\n        
\n        
\n          
\n           B\n          
\n        
\n        
\n          
\n           B\n          
\n        
\n        
\n          
\n           B\n          
\n        
\n        
\n          
\n           B\n          
\n        
\n        
\n          
\n            B\n          
\n        
\n        
\n          
\n            B\n          
\n        
\n        
\n          
\n            B\n          
\n        
\n        
\n          
\n            B\n          
\n        
\n        
\n          
\n            B\n          
\n        
\n        
\n          
\n            B\n          
\n        
\n        
\n          
\n            B\n          
\n        
\n      
\n    
\n  
\n  
\n    
Columns
\n    
Columns each contain gutters giving them equal vertical spacing from other columns. Columns by default do not take up their entire row height.
\n    
\n      
\n        
\n          1\n        
\n      
\n      
\n        
\n          2\n        
\n      
\n      
\n        
\n          3\n        
\n      
\n      
\n        
\n          4\n        
\n      
\n    
\n  
\n\n  
Variations
\n\n  
Grid
\n\n  
\n    
Specifying Column Count Per Row
\n    
A grid can have a different number of columns per row
\n    
\n      
\n        
\n          
Log-in
\n          
\n            \n            \n          
\n          
\n            \n            \n          
\n          
Login
\n        
\n      
\n      
\n        
\n          
Register
\n          
\n            
\n              \n              \n            
\n            
\n              \n              \n            
\n          
\n          
\n            \n            \n          
\n          
\n            \n            \n          
\n          
\n            
\n              \n              \n            
\n            \n          
\n          
Submit
\n        
\n      
\n    
\n  
\n\n  
\n    
Relaxed
\n    
A grid can increase its gutters to allow for more negative space
\n    
\n      
\n        
\n          
Log-in
\n          
\n            \n            \n          
\n          
\n            \n            \n          
\n          
Login
\n        
\n      
\n      
\n        
\n          
Register
\n          
\n            
\n              \n              \n            
\n            
\n              \n              \n            
\n          
\n          
\n            \n            \n          
\n          
\n            \n            \n          
\n          
\n            
\n              \n              \n            
\n            \n          
\n          
Submit
\n        
\n      
\n    
\n  
\n\n  
\n    
Stackable Grid
\n    
A grid can have its columns stack on-top of each other after reaching mobile breakpoints
\n    
\n       To see a grid stack, try resizing your browser to a small width\n    
\n    
\n      
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n      
\n      
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n      
\n    
\n  
\n\n  
\n\n    
Text Alignment
\n    
A grid can specify its text alignment
\n    
\n      
\n        
\n          
\n            
\n              Cats\n            
\n          
\n        
\n        
\n          
\n            
\n              Dogs\n            
\n            
\n              Poodle\n            
\n            
\n              Cockerspaniel\n            
\n          
\n        
\n        
\n          
\n            
\n              Monkeys\n            
\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Vertical Alignment
\n    
A grid can specify its vertical alignment to have all its columns vertically centered.
\n    
\n      
\n        
\n          
\n            
\n              Cats\n            
\n          
\n        
\n        
\n          
\n            
\n              Dogs\n            
\n            
\n              Poodle\n            
\n            
\n              Cockerspaniel\n            
\n          
\n        
\n        
\n          
\n            
\n              Monkeys\n            
\n          
\n        
\n      
\n    
\n  
\n\n  
Rows
\n\n  
\n    
Responsive to Device
\n    
A grid can have its columns, or rows only show content for computer, tablet, or mobile.
\n    
\n       Breakpoints are 768px and below for mobile, 768-998px for tablet and 998px+ for pc\n    
\n    
\n      
\n        
\n          
\n            Mobile\n          
\n        
\n        
\n          
\n            Mobile\n          
\n        
\n      
\n      
\n        
\n          
\n            Computer\n          
\n        
\n        
\n          
\n            Tablet and Mobile\n          
\n        
\n        
\n          
\n            All Sizes\n          
\n        
\n        
\n          
\n            All Sizes\n          
\n        
\n      
\n      
\n        
\n          
\n            Computer\n          
\n        
\n        
\n          
\n            Computer\n          
\n        
\n        
\n          
\n            Computer\n          
\n        
\n        
\n          
\n            Computer\n          
\n        
\n      
\n      
\n        
\n          
\n            Tablet\n          
\n        
\n        
\n          
\n            Tablet\n          
\n        
\n        
\n          
\n            Tablet\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Equal Height
\n    
A row can specify that it is equal height so all of its columns appear the length of its longest column.
\n    
\n      
\n        
\n          
This is a short row
\n        
\n        
\n          
This is a short row
\n        
\n        
\n          
This is a very long row with lots of text in it and way more text than the other rows
\n          
It might even span for multiple paragraphs.
\n        
\n      
\n    
\n  
\n  
\n    
Vertical Alignment
\n    
A row can also specify its vertical alignment to have its columns vertically centered.
\n    
\n      
\n        
\n          
\n            
\n              Cats\n            
\n          
\n        
\n        
\n          
\n            
\n              Dogs\n            
\n            
\n              Poodle\n            
\n            
\n              Cockerspaniel\n            
\n          
\n        
\n        
\n          
\n            
\n              Monkeys\n            
\n          
\n        
\n      
\n      
\n        
\n          
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam blandit sagittis elit, nec pharetra justo lobortis vitae. Quisque sed libero ut lacus mattis lacinia. Pellentesque pharetra vel quam sed tristique. Aenean sit amet purus sed sapien suscipit rhoncus. Nunc vel pharetra elit. Integer eleifend in turpis vel suscipit. Mauris porttitor nunc ante, eu vestibulum augue facilisis lacinia. Curabitur blandit urna lorem, et ornare mi laoreet iaculis. Nunc volutpat ultrices libero quis molestie. Nunc ac porta odio. Quisque interdum sodales augue, quis facilisis sem elementum quis.
\n        
\n      
\n      
\n        
\n          
\n            
\n              Dogs\n            
\n          
\n        
\n        
\n          
\n            
\n              Dogs\n            
\n            
\n              Poodle\n            
\n            
\n              Cockerspaniel\n            
\n          
\n        
\n        
\n          
\n            
\n              Monkeys\n            
\n          
\n        
\n      
\n      
\n        
\n          
\n            
\n              Cats\n            
\n          
\n        
\n        
\n          
\n            
\n              Dogs\n            
\n            
\n              Poodle\n            
\n            
\n              Cockerspaniel\n            
\n          
\n        
\n        
\n          
\n            
\n              Monkeys\n            
\n          
\n        
\n      
\n    
\n  
\n\n  
Columns
\n\n  
\n    
Floating
\n    
A column can be \"floated\" to either the left or right of its row.
\n    
\n      
\n        
\n          
\n            Dogs\n          
\n          
\n            Poodle\n          
\n          
\n            Cockerspaniel\n          
\n        
\n      
\n      
\n        
\n          
\n            Cats\n          
\n          
\n            Abysinnian\n          
\n          
\n            Sphynx\n          
\n        
\n      
\n    
\n  
\n  
\n    
Column Width
\n    
A column can vary in width taking up more than a single grid column.
\n    
\n      
\n        
Colume One Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis sapien.
\n      
\n      
\n        
Colume Two Aliquam lobortis commodo sem ac accumsan. Vestibulum non faucibus lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur sed lorem lorem. Nam augue erat, dignissim nec aliquam vel, congue et sapien. Integer viverra justo vel nibh suscipit commodo. Nullam ut turpis nibh, in luctus risus. Sed ut risus nec dui mattis porta. Nam nisi magna, ornare mollis congue a, suscipit at nisl.
\n      
\n      
\n        
Colume Three Donec semper mollis condimentum. Aenean eget rutrum magna. Mauris ornare nibh scelerisque turpis lobortis dignissim. Etiam eleifend justo eget quam semper vulputate. Nulla et risus convallis velit molestie iaculis. Aliquam erat volutpat. 
\n      
\n    
\n  
\n\n
",
      "rendered": true,
      "contentRendered": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  \n  \n  \n  \n\n  \n\n  \n  \n  Grid | Semantic UI\n\n  \n  \n\n  \n\n  \n  \n  \n\n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n\n  \n  \n\n\n  
\n    \n       Close Menu\n    \n    \n       Download\n    \n    
\n      \n        Introduction\n      \n      
\n        \n          Definitions\n        \n          Overview\n        \n          Types\n        \n          Variations\n        \n          What's Different\n        \n      
\n    
\n    
\n      Project\n      
\n        \n          Contributing\n        \n          Set-up\n        \n      
\n    
\n    
\n      Elements\n      
\n        \n          Button\n        \n          Divider\n        \n          Header\n        \n          Icon\n        \n          Image\n        \n          Input\n        \n          Label\n        \n          Loader\n        \n          Progress\n        \n          Reveal\n        \n          Segment\n        \n          Step\n        \n      
\n    
\n    
\n      Collections\n      
\n        \n          Breadcrumb\n        \n          Form\n        \n          Grid\n        \n          Menu\n        \n          Message\n        \n          Table\n        \n      
\n    
\n    
\n      Views\n      
\n        \n          Comment\n        \n          Feed\n        \n          Item\n        \n          List\n        \n      
\n    
\n    
\n      Modules\n      
\n        \n          Accordion\n        \n          Checkbox\n        \n          Dimmer\n        \n          Dropdown\n        \n          Modal\n        \n          Popup\n        \n          Rating\n        \n          Shape\n        \n          Sidebar\n        \n          Transition\n        \n      
\n    
\n    
\n      Behavior\n      
\n        \n          Form Validation\n        \n      
\n    
\n    
\n      Style Guide\n      
\n        \n          CSS\n        \n          Javascript\n        \n          Language\n        \n      
\n    
\n\n  
\n\n  
\n    
\n       Content\n      
\n        UI Collection: Grid\n      
\n      \n      \n      \n      
\n        3 of 6\n        
\n          \n            
\n              1. Breadcrumb\n            
\n          \n            
\n              2. Form\n            
\n          \n            
\n              3. Grid\n            
\n          \n            
\n              4. Menu\n            
\n          \n            
\n              5. Message\n            
\n          \n            
\n              6. Table\n            
\n          \n        
\n      
\n      \n      \n      \n      
\n        \n        
\n          \n        
\n        \n        \n\n        \n          \n        \n        \n          \n        \n        \n        \n          \n        \n        \n      
\n    
\n  
\n    
\n      \n      Menu\n    
\n  \n\n
\n  
\n    
\n\n      
\n        Grid\n        \n      
\n\n      
A grid is a structure used to harmonize negative space in a layout
\n      \n      
\n        Definition Mode\n        \n      
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n\n
\n\n  
\n    
\n      Standard\n      Elements\n      Types\n      Variations\n    
\n  
\n\n  
Standard
\n\n  
\n    
Grid
\n    
A grid is made up of columns of content with gutters to provide negative space between columns.
\n\n    
All grid systems must assume an arbitrary amount of column rows. Semantic by default assumes 16 columns
\n    
\n      
\n        
\n        
\n      
\n      
\n        
\n        
\n      
\n      
\n        
\n        
\n      
\n      
\n        
\n        
\n      
\n    
\n  
\n\n  
\n    
Page Grid
\n    
A page grid is used to layout page contents into a grid system. Page grids exists on the top level of a web site. A page grid has gutters to the left and right of its columns to center content on a page.
\n\n    
\n       Semantic UI's page grid by default will change the page gutters to increase at 250pixel intervals.\n    
\n\n    
\n      
\n        
\n          \n            \n            Mail\n          \n          \n            \n            Lab\n          \n          \n            \n            Favorites\n          \n        
\n      
\n      
\n        
\n          Inbox\n          
Welcome to your inbox. Would you like to see more information?
\n        
\n      
\n    
\n  
\n\n  
\n    
Divided Grid
\n    
A grid can have dividers between its columns
\n    
\n      
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n      
\n      
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n      
\n    
\n  
\n\n  
\n    
Vertically Divided Grid
\n    
A grid can have dividers between rows
\n    
\n      
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n      
\n      
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n      
\n    
\n  
\n\n\n  
\n    
Celled Grid
\n    
A grid can have rows divided into cells
\n    
\n      
\n        
\n          
Lorem ipsum do
\n        
\n        
\n          
Lorem ipsum dolor 
\n        
\n        
\n          
Lorem ipsum dolor sitos. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n      
\n      
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n      
\n    
\n  
\n\n  
Elements
\n\n  
\n    
Rows
\n    
A row is used to create vertical padding between groups of columns on a page. If no rows are specified columns will sit flush vertically.
\n    
\n      
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n      
\n      
\n        
\n          
\n           B\n          
\n        
\n        
\n          
\n           B\n          
\n        
\n        
\n          
\n           B\n          
\n        
\n        
\n          
\n           B\n          
\n        
\n        
\n          
\n           B\n          
\n        
\n        
\n          
\n           B\n          
\n        
\n        
\n          
\n           B\n          
\n        
\n        
\n          
\n           B\n          
\n        
\n        
\n          
\n           B\n          
\n        
\n        
\n          
\n            B\n          
\n        
\n        
\n          
\n            B\n          
\n        
\n        
\n          
\n            B\n          
\n        
\n        
\n          
\n            B\n          
\n        
\n        
\n          
\n            B\n          
\n        
\n        
\n          
\n            B\n          
\n        
\n        
\n          
\n            B\n          
\n        
\n      
\n    
\n  
\n  
\n    
Columns
\n    
Columns each contain gutters giving them equal vertical spacing from other columns. Columns by default do not take up their entire row height.
\n    
\n      
\n        
\n          1\n        
\n      
\n      
\n        
\n          2\n        
\n      
\n      
\n        
\n          3\n        
\n      
\n      
\n        
\n          4\n        
\n      
\n    
\n  
\n\n  
Variations
\n\n  
Grid
\n\n  
\n    
Specifying Column Count Per Row
\n    
A grid can have a different number of columns per row
\n    
\n      
\n        
\n          
Log-in
\n          
\n            \n            \n          
\n          
\n            \n            \n          
\n          
Login
\n        
\n      
\n      
\n        
\n          
Register
\n          
\n            
\n              \n              \n            
\n            
\n              \n              \n            
\n          
\n          
\n            \n            \n          
\n          
\n            \n            \n          
\n          
\n            
\n              \n              \n            
\n            \n          
\n          
Submit
\n        
\n      
\n    
\n  
\n\n  
\n    
Relaxed
\n    
A grid can increase its gutters to allow for more negative space
\n    
\n      
\n        
\n          
Log-in
\n          
\n            \n            \n          
\n          
\n            \n            \n          
\n          
Login
\n        
\n      
\n      
\n        
\n          
Register
\n          
\n            
\n              \n              \n            
\n            
\n              \n              \n            
\n          
\n          
\n            \n            \n          
\n          
\n            \n            \n          
\n          
\n            
\n              \n              \n            
\n            \n          
\n          
Submit
\n        
\n      
\n    
\n  
\n\n  
\n    
Stackable Grid
\n    
A grid can have its columns stack on-top of each other after reaching mobile breakpoints
\n    
\n       To see a grid stack, try resizing your browser to a small width\n    
\n    
\n      
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n      
\n      
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n      
\n    
\n  
\n\n  
\n\n    
Text Alignment
\n    
A grid can specify its text alignment
\n    
\n      
\n        
\n          
\n            
\n              Cats\n            
\n          
\n        
\n        
\n          
\n            
\n              Dogs\n            
\n            
\n              Poodle\n            
\n            
\n              Cockerspaniel\n            
\n          
\n        
\n        
\n          
\n            
\n              Monkeys\n            
\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Vertical Alignment
\n    
A grid can specify its vertical alignment to have all its columns vertically centered.
\n    
\n      
\n        
\n          
\n            
\n              Cats\n            
\n          
\n        
\n        
\n          
\n            
\n              Dogs\n            
\n            
\n              Poodle\n            
\n            
\n              Cockerspaniel\n            
\n          
\n        
\n        
\n          
\n            
\n              Monkeys\n            
\n          
\n        
\n      
\n    
\n  
\n\n  
Rows
\n\n  
\n    
Responsive to Device
\n    
A grid can have its columns, or rows only show content for computer, tablet, or mobile.
\n    
\n       Breakpoints are 768px and below for mobile, 768-998px for tablet and 998px+ for pc\n    
\n    
\n      
\n        
\n          
\n            Mobile\n          
\n        
\n        
\n          
\n            Mobile\n          
\n        
\n      
\n      
\n        
\n          
\n            Computer\n          
\n        
\n        
\n          
\n            Tablet and Mobile\n          
\n        
\n        
\n          
\n            All Sizes\n          
\n        
\n        
\n          
\n            All Sizes\n          
\n        
\n      
\n      
\n        
\n          
\n            Computer\n          
\n        
\n        
\n          
\n            Computer\n          
\n        
\n        
\n          
\n            Computer\n          
\n        
\n        
\n          
\n            Computer\n          
\n        
\n      
\n      
\n        
\n          
\n            Tablet\n          
\n        
\n        
\n          
\n            Tablet\n          
\n        
\n        
\n          
\n            Tablet\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Equal Height
\n    
A row can specify that it is equal height so all of its columns appear the length of its longest column.
\n    
\n      
\n        
\n          
This is a short row
\n        
\n        
\n          
This is a short row
\n        
\n        
\n          
This is a very long row with lots of text in it and way more text than the other rows
\n          
It might even span for multiple paragraphs.
\n        
\n      
\n    
\n  
\n  
\n    
Vertical Alignment
\n    
A row can also specify its vertical alignment to have its columns vertically centered.
\n    
\n      
\n        
\n          
\n            
\n              Cats\n            
\n          
\n        
\n        
\n          
\n            
\n              Dogs\n            
\n            
\n              Poodle\n            
\n            
\n              Cockerspaniel\n            
\n          
\n        
\n        
\n          
\n            
\n              Monkeys\n            
\n          
\n        
\n      
\n      
\n        
\n          
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam blandit sagittis elit, nec pharetra justo lobortis vitae. Quisque sed libero ut lacus mattis lacinia. Pellentesque pharetra vel quam sed tristique. Aenean sit amet purus sed sapien suscipit rhoncus. Nunc vel pharetra elit. Integer eleifend in turpis vel suscipit. Mauris porttitor nunc ante, eu vestibulum augue facilisis lacinia. Curabitur blandit urna lorem, et ornare mi laoreet iaculis. Nunc volutpat ultrices libero quis molestie. Nunc ac porta odio. Quisque interdum sodales augue, quis facilisis sem elementum quis.
\n        
\n      
\n      
\n        
\n          
\n            
\n              Dogs\n            
\n          
\n        
\n        
\n          
\n            
\n              Dogs\n            
\n            
\n              Poodle\n            
\n            
\n              Cockerspaniel\n            
\n          
\n        
\n        
\n          
\n            
\n              Monkeys\n            
\n          
\n        
\n      
\n      
\n        
\n          
\n            
\n              Cats\n            
\n          
\n        
\n        
\n          
\n            
\n              Dogs\n            
\n            
\n              Poodle\n            
\n            
\n              Cockerspaniel\n            
\n          
\n        
\n        
\n          
\n            
\n              Monkeys\n            
\n          
\n        
\n      
\n    
\n  
\n\n  
Columns
\n\n  
\n    
Floating
\n    
A column can be \"floated\" to either the left or right of its row.
\n    
\n      
\n        
\n          
\n            Dogs\n          
\n          
\n            Poodle\n          
\n          
\n            Cockerspaniel\n          
\n        
\n      
\n      
\n        
\n          
\n            Cats\n          
\n          
\n            Abysinnian\n          
\n          
\n            Sphynx\n          
\n        
\n      
\n    
\n  
\n  
\n    
Column Width
\n    
A column can vary in width taking up more than a single grid column.
\n    
\n      
\n        
Colume One Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis sapien.
\n      
\n      
\n        
Colume Two Aliquam lobortis commodo sem ac accumsan. Vestibulum non faucibus lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur sed lorem lorem. Nam augue erat, dignissim nec aliquam vel, congue et sapien. Integer viverra justo vel nibh suscipit commodo. Nullam ut turpis nibh, in luctus risus. Sed ut risus nec dui mattis porta. Nam nisi magna, ornare mollis congue a, suscipit at nisl.
\n      
\n      
\n        
Colume Three Donec semper mollis condimentum. Aenean eget rutrum magna. Mauris ornare nibh scelerisque turpis lobortis dignissim. Etiam eleifend justo eget quam semper vulputate. Nulla et risus convallis velit molestie iaculis. Aliquam erat volutpat. 
\n      
\n    
\n  
\n\n
\n\n\n",
      "contentRenderedWithoutLayouts": "\n\n
\n  
\n    
\n\n      
\n        Grid\n        \n      
\n\n      
A grid is a structure used to harmonize negative space in a layout
\n      \n      
\n        Definition Mode\n        \n      
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n\n
\n\n  
\n    
\n      Standard\n      Elements\n      Types\n      Variations\n    
\n  
\n\n  
Standard
\n\n  
\n    
Grid
\n    
A grid is made up of columns of content with gutters to provide negative space between columns.
\n\n    
All grid systems must assume an arbitrary amount of column rows. Semantic by default assumes 16 columns
\n    
\n      
\n        
\n        
\n      
\n      
\n        
\n        
\n      
\n      
\n        
\n        
\n      
\n      
\n        
\n        
\n      
\n    
\n  
\n\n  
\n    
Page Grid
\n    
A page grid is used to layout page contents into a grid system. Page grids exists on the top level of a web site. A page grid has gutters to the left and right of its columns to center content on a page.
\n\n    
\n       Semantic UI's page grid by default will change the page gutters to increase at 250pixel intervals.\n    
\n\n    
\n      
\n        
\n          \n            \n            Mail\n          \n          \n            \n            Lab\n          \n          \n            \n            Favorites\n          \n        
\n      
\n      
\n        
\n          Inbox\n          
Welcome to your inbox. Would you like to see more information?
\n        
\n      
\n    
\n  
\n\n  
\n    
Divided Grid
\n    
A grid can have dividers between its columns
\n    
\n      
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n      
\n      
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n      
\n    
\n  
\n\n  
\n    
Vertically Divided Grid
\n    
A grid can have dividers between rows
\n    
\n      
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n      
\n      
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n      
\n    
\n  
\n\n\n  
\n    
Celled Grid
\n    
A grid can have rows divided into cells
\n    
\n      
\n        
\n          
Lorem ipsum do
\n        
\n        
\n          
Lorem ipsum dolor 
\n        
\n        
\n          
Lorem ipsum dolor sitos. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n      
\n      
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n      
\n    
\n  
\n\n  
Elements
\n\n  
\n    
Rows
\n    
A row is used to create vertical padding between groups of columns on a page. If no rows are specified columns will sit flush vertically.
\n    
\n      
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n        
\n          
\n            A\n          
\n        
\n      
\n      
\n        
\n          
\n           B\n          
\n        
\n        
\n          
\n           B\n          
\n        
\n        
\n          
\n           B\n          
\n        
\n        
\n          
\n           B\n          
\n        
\n        
\n          
\n           B\n          
\n        
\n        
\n          
\n           B\n          
\n        
\n        
\n          
\n           B\n          
\n        
\n        
\n          
\n           B\n          
\n        
\n        
\n          
\n           B\n          
\n        
\n        
\n          
\n            B\n          
\n        
\n        
\n          
\n            B\n          
\n        
\n        
\n          
\n            B\n          
\n        
\n        
\n          
\n            B\n          
\n        
\n        
\n          
\n            B\n          
\n        
\n        
\n          
\n            B\n          
\n        
\n        
\n          
\n            B\n          
\n        
\n      
\n    
\n  
\n  
\n    
Columns
\n    
Columns each contain gutters giving them equal vertical spacing from other columns. Columns by default do not take up their entire row height.
\n    
\n      
\n        
\n          1\n        
\n      
\n      
\n        
\n          2\n        
\n      
\n      
\n        
\n          3\n        
\n      
\n      
\n        
\n          4\n        
\n      
\n    
\n  
\n\n  
Variations
\n\n  
Grid
\n\n  
\n    
Specifying Column Count Per Row
\n    
A grid can have a different number of columns per row
\n    
\n      
\n        
\n          
Log-in
\n          
\n            \n            \n          
\n          
\n            \n            \n          
\n          
Login
\n        
\n      
\n      
\n        
\n          
Register
\n          
\n            
\n              \n              \n            
\n            
\n              \n              \n            
\n          
\n          
\n            \n            \n          
\n          
\n            \n            \n          
\n          
\n            
\n              \n              \n            
\n            \n          
\n          
Submit
\n        
\n      
\n    
\n  
\n\n  
\n    
Relaxed
\n    
A grid can increase its gutters to allow for more negative space
\n    
\n      
\n        
\n          
Log-in
\n          
\n            \n            \n          
\n          
\n            \n            \n          
\n          
Login
\n        
\n      
\n      
\n        
\n          
Register
\n          
\n            
\n              \n              \n            
\n            
\n              \n              \n            
\n          
\n          
\n            \n            \n          
\n          
\n            \n            \n          
\n          
\n            
\n              \n              \n            
\n            \n          
\n          
Submit
\n        
\n      
\n    
\n  
\n\n  
\n    
Stackable Grid
\n    
A grid can have its columns stack on-top of each other after reaching mobile breakpoints
\n    
\n       To see a grid stack, try resizing your browser to a small width\n    
\n    
\n      
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n      
\n      
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n      
\n    
\n  
\n\n  
\n\n    
Text Alignment
\n    
A grid can specify its text alignment
\n    
\n      
\n        
\n          
\n            
\n              Cats\n            
\n          
\n        
\n        
\n          
\n            
\n              Dogs\n            
\n            
\n              Poodle\n            
\n            
\n              Cockerspaniel\n            
\n          
\n        
\n        
\n          
\n            
\n              Monkeys\n            
\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Vertical Alignment
\n    
A grid can specify its vertical alignment to have all its columns vertically centered.
\n    
\n      
\n        
\n          
\n            
\n              Cats\n            
\n          
\n        
\n        
\n          
\n            
\n              Dogs\n            
\n            
\n              Poodle\n            
\n            
\n              Cockerspaniel\n            
\n          
\n        
\n        
\n          
\n            
\n              Monkeys\n            
\n          
\n        
\n      
\n    
\n  
\n\n  
Rows
\n\n  
\n    
Responsive to Device
\n    
A grid can have its columns, or rows only show content for computer, tablet, or mobile.
\n    
\n       Breakpoints are 768px and below for mobile, 768-998px for tablet and 998px+ for pc\n    
\n    
\n      
\n        
\n          
\n            Mobile\n          
\n        
\n        
\n          
\n            Mobile\n          
\n        
\n      
\n      
\n        
\n          
\n            Computer\n          
\n        
\n        
\n          
\n            Tablet and Mobile\n          
\n        
\n        
\n          
\n            All Sizes\n          
\n        
\n        
\n          
\n            All Sizes\n          
\n        
\n      
\n      
\n        
\n          
\n            Computer\n          
\n        
\n        
\n          
\n            Computer\n          
\n        
\n        
\n          
\n            Computer\n          
\n        
\n        
\n          
\n            Computer\n          
\n        
\n      
\n      
\n        
\n          
\n            Tablet\n          
\n        
\n        
\n          
\n            Tablet\n          
\n        
\n        
\n          
\n            Tablet\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Equal Height
\n    
A row can specify that it is equal height so all of its columns appear the length of its longest column.
\n    
\n      
\n        
\n          
This is a short row
\n        
\n        
\n          
This is a short row
\n        
\n        
\n          
This is a very long row with lots of text in it and way more text than the other rows
\n          
It might even span for multiple paragraphs.
\n        
\n      
\n    
\n  
\n  
\n    
Vertical Alignment
\n    
A row can also specify its vertical alignment to have its columns vertically centered.
\n    
\n      
\n        
\n          
\n            
\n              Cats\n            
\n          
\n        
\n        
\n          
\n            
\n              Dogs\n            
\n            
\n              Poodle\n            
\n            
\n              Cockerspaniel\n            
\n          
\n        
\n        
\n          
\n            
\n              Monkeys\n            
\n          
\n        
\n      
\n      
\n        
\n          
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam blandit sagittis elit, nec pharetra justo lobortis vitae. Quisque sed libero ut lacus mattis lacinia. Pellentesque pharetra vel quam sed tristique. Aenean sit amet purus sed sapien suscipit rhoncus. Nunc vel pharetra elit. Integer eleifend in turpis vel suscipit. Mauris porttitor nunc ante, eu vestibulum augue facilisis lacinia. Curabitur blandit urna lorem, et ornare mi laoreet iaculis. Nunc volutpat ultrices libero quis molestie. Nunc ac porta odio. Quisque interdum sodales augue, quis facilisis sem elementum quis.
\n        
\n      
\n      
\n        
\n          
\n            
\n              Dogs\n            
\n          
\n        
\n        
\n          
\n            
\n              Dogs\n            
\n            
\n              Poodle\n            
\n            
\n              Cockerspaniel\n            
\n          
\n        
\n        
\n          
\n            
\n              Monkeys\n            
\n          
\n        
\n      
\n      
\n        
\n          
\n            
\n              Cats\n            
\n          
\n        
\n        
\n          
\n            
\n              Dogs\n            
\n            
\n              Poodle\n            
\n            
\n              Cockerspaniel\n            
\n          
\n        
\n        
\n          
\n            
\n              Monkeys\n            
\n          
\n        
\n      
\n    
\n  
\n\n  
Columns
\n\n  
\n    
Floating
\n    
A column can be \"floated\" to either the left or right of its row.
\n    
\n      
\n        
\n          
\n            Dogs\n          
\n          
\n            Poodle\n          
\n          
\n            Cockerspaniel\n          
\n        
\n      
\n      
\n        
\n          
\n            Cats\n          
\n          
\n            Abysinnian\n          
\n          
\n            Sphynx\n          
\n        
\n      
\n    
\n  
\n  
\n    
Column Width
\n    
A column can vary in width taking up more than a single grid column.
\n    
\n      
\n        
Colume One Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis sapien.
\n      
\n      
\n        
Colume Two Aliquam lobortis commodo sem ac accumsan. Vestibulum non faucibus lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur sed lorem lorem. Nam augue erat, dignissim nec aliquam vel, congue et sapien. Integer viverra justo vel nibh suscipit commodo. Nullam ut turpis nibh, in luctus risus. Sed ut risus nec dui mattis porta. Nam nisi magna, ornare mollis congue a, suscipit at nisl.
\n      
\n      
\n        
Colume Three Donec semper mollis condimentum. Aenean eget rutrum magna. Mauris ornare nibh scelerisque turpis lobortis dignissim. Etiam eleifend justo eget quam semper vulputate. Nulla et risus convallis velit molestie iaculis. Aliquam erat volutpat. 
\n      
\n    
\n  
\n\n
",
      "renderSingleExtensions": false,
      "layout": "default",
      "css": "Grid",
      "description": "A grid is a structure used to harmonize negative space in a layout",
      "type": "UI Collection",
      "layoutRelativePath": "default.html.eco",
      "meta": {
        "layout": "default",
        "css": "Grid",
        "title": "Grid",
        "description": "A grid is a structure used to harmonize negative space in a layout",
        "type": "UI Collection"
      }
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/documents/collections/menu.html.eco",
      "relativePath": "collections/menu.html.eco",
      "basename": "menu",
      "outBasename": "menu",
      "extension": "eco",
      "outExtension": "html",
      "extensions": [
        "html",
        "eco"
      ],
      "filename": "menu.html.eco",
      "fullDirPath": "/home/jack/projects/semantic/server/documents/collections",
      "outPath": "/home/jack/projects/semantic/docs/collections/menu.html",
      "outDirPath": "/home/jack/projects/semantic/docs/collections",
      "outFilename": "menu.html",
      "relativeOutPath": "collections/menu.html",
      "relativeDirPath": "collections",
      "relativeOutDirPath": "collections",
      "relativeBase": "collections/menu",
      "relativeOutBase": "collections/menu",
      "contentType": "application/octet-stream",
      "outContentType": "text/html",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": "2013-12-04T09:15:24.765Z",
      "wtime": "2013-12-04T09:15:28.611Z",
      "exists": true,
      "encoding": "utf8",
      "source": "---\nlayout      : 'default'\ncss         : 'menu'\n\ntitle       : 'Menu'\ndescription : 'A menu is a collection of elements showing related user actions'\ntype        : 'UI Collection'\n---\n\n\n<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Types\n      Elements\n      States\n      Variations\n    
\n  
\n\n  
Types
\n  
\n    
Menu
\n\n    
A menu
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      
\n        
\n          
\n            \n            \n          
\n        
\n      
\n    
\n  
\n\n\n  
\n    
Vertical Menu
\n    
A vertical menu displays elements vertically..
\n    
 A vertical menu's width defaults to an arbitrary size. To have it fit your content more precisely use the fluid variation in conjunction with ui grid.
\n\n    
\n      \n        
1
\n        Inbox\n      \n      \n        
51
\n        Spam\n      \n      \n        
1
\n        Updates\n      \n      
\n        
\n          \n          \n        
\n      
\n    
\n  
\n\n  
\n    
Pagination
\n    
A pagination menu is specially formatted to present links to pages of content
\n    
\n      \n        \n      \n      \n        1\n      \n      
\n        ...\n      
\n      \n        10\n      \n      \n        11\n      \n      \n        12\n      \n      \n        \n      \n    
\n  
\n\n  
\n    
Tabular
\n    
A message can be formatted to show tabs of information
\n    
\n      \n        Bio\n      \n      \n        Pics\n      \n    
\n  
\n\n  
\n    
Tiered Menu
\n    
A tiered menu can show the sub-sections available as part of an activated section.
\n    
\n      
\n        \n          \n          Friends\n        \n        \n           Browse\n        \n        \n           Messages\n        \n        
\n          
\n            
\n              \n              \n            
\n          
\n          
\n            More \n            
\n               Edit Profile\n               Choose Language\n               Account Settings\n            
\n          
\n        
\n      
\n      
\n        Search\n        Add\n        Remove\n      
\n    
\n  
\n\n  
\n    
Vertical Menu w/ Sub Menus
\n    
A tiered menu can show the sub-sections available as part of an activated section.
\n    
\n      
\n        
\n      
\n      
\n         Home\n        
\n          Search\n          Add\n          Remove\n        
\n      
\n      \n         Browse\n      \n      \n         Messages\n      \n      
\n        More \n        
\n           Edit Profile\n           Choose Language\n           Account Settings\n        
\n      
\n    
\n  
\n\n\n  
\n    
Secondary Menu
\n    
A secondary menu allows for a section of content on a page to be activated
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n      
\n        
\n          
\n            \n            \n          
\n        
\n        \n          Logout\n        \n      
\n    
\n  
\n\n  
\n    
A vertical secondary menu
\n    
\n      \n        \n        Friends\n      \n      \n         Messages\n      \n      \n         Friends\n      \n      
\n        More \n        
\n           Edit Profile\n           Choose Language\n           Account Settings\n        
\n      
\n    
\n  
\n\n  
\n    
Pointing
\n    
A menu can point to content to show relationship
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n      
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          Language \n          
\n            English\n            Russian\n            Spanish\n          
\n        
\n      
\n    
\n  
\n  
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n      
\n        
\n          
\n            \n            \n          
\n        
\n        \n          Logout\n        \n      
\n    
\n  
\n  
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    

\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n  
\n\n  
\n    
Text
\n    
A menu can display simple text links
\n    
\n      
Sort By
\n      \n         Closest\n      \n      \n         Most Comments\n      \n      \n         Most Popular\n      \n    
\n  
\n  
\n    
A vertical text menu
\n    
\n      
Sort By
\n      \n         Closest\n      \n      \n         Most Comments\n      \n      \n         Most Popular\n      \n    
\n  
\n\n  
Elements
\n\n  
\n    
Header Item
\n    
A menu may have a header to help label sections of a menu.
\n    
\n      
\n        \n        Communities\n      
\n      
\n        College\n        
\n          Baseball\n          Basketball\n          Golf\n        
\n      
\n      \n        Dance\n      \n      \n        Aerobics\n      \n      
\n        \n        Cities\n      
\n      \n        New York\n      \n      \n        Montreal\n      \n      \n        Los Angeles\n      \n      \n        San Francisco\n      \n      
\n        \n        Months\n      
\n      \n        August\n      \n      \n        June\n      \n    
\n  
\n\n  
\n    
Text Item
\n    
A menu may have a simple text item.
\n    
\n      
 Single paragraphs are automatically formatted as text. You can also specify an item as textual by adding the classname text
\n    
\n    
\n      
\n        Promotions\n        New\n      
\n      
\n        Join now and save $10 on a pro membership!\n      
\n      
\n        
Join tomorrow and save $5 on pro.
\n      
\n    
\n  
\n\n  
\n    
Input
\n    
A menu item can contain an input inside of it
\n\n    
\n      
\n        
\n          \n          \n        
\n      
\n    
\n  
\n\n\n  
\n    
Button
\n    
A menu item can contain a button inside of it
\n\n    
\n      
\n        
Sign up
\n      
\n      
\n        
Log-in
\n      
\n    
\n  
\n\n\n  
\n    
Link Item
\n    
A menu may contain a link item, or an item formatted as if it is a link.
\n\n    
\n      
 Items that are anchor tags will automatically be formatted as a link.
\n    
\n    
\n      \n        Visit Google\n      \n      
\n        Javascript Link\n      
\n    
\n  
\n\n  
\n    
Dropdown Item
\n    
An item may contain a nested menu in a dropdown.
\n    
\n      
Dropdowns use UI dropdown elements. To have a dropdown open without javascript, use the simple variation
\n    
\n    
\n      
\n        Categories \n        
\n          Electronics\n          Automotive\n          Home\n        
\n      
\n    
\n  
\n  
\n    
Menu
\n    
A menu may contain another menu group in the same level as menu items.
\n    
\n      Browse\n      Submit\n      
\n        Sign Up\n        Help\n      
\n    
\n  
\n\n  
\n    
Nested Menu
\n    
A menu item may contain another menu nested inside that acts as a grouped sub-menu.
\n    
\n      Friends\n      
\n        Your Profile\n        
\n          Inbox\n          Activity\n          Groups\n        
\n      
\n    
\n  
\n\n\n  
States
\n\n  
\n    
Hover
\n    
A menu item can be hovered
\n    
 Menu items are only hoverable if they are links, defined with the variant \"link\", or are given the class name hover programmatically.
\n    
\n      
\n        Link\n      
\n    
\n  
\n\n\n  
\n    
Down
\n    
A menu item can be pressed in
\n    
\n      
\n        Link\n      
\n    
\n  
\n\n  
\n    
Active
\n    
A menu item can be active
\n    
\n      
\n        Link\n      
\n    
\n  
\n\n\n  
Variations
\n\n  
Menu
\n  
\n    
Inverted
\n    
A menu may have its colors inverted to show greater contrast
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n  
\n  
\n    
Colors
\n    
Additional colors can be specified.
\n    
\n      \n         Green\n      \n      \n         Red\n      \n      \n         Blue\n      \n      \n         Orange\n      \n      \n         Purple\n      \n      \n         Teal\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n  
\n  
\n    
These colors can also be inverted
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n  
\n\n\n  
\n    
Icons
\n    
A menu may have just icons
\n    
\n      \n        \n      \n      \n        \n      \n      \n        \n      \n    
\n    

\n    
\n      \n        \n      \n      \n        \n      \n      \n        \n      \n    
\n  
\n\n  
\n    
Icons
\n    
A menu may have labeled icons
\n    
\n      \n        \n        Mail\n      \n      \n        \n        Lab\n      \n      \n        \n        Favorites\n      \n    
\n    

\n    
\n      \n        \n        Mail\n      \n      \n        \n        Lab\n      \n      \n        \n        Favorites\n      \n    
\n  
\n\n\n  
\n    
Fluid
\n    
A vertical menu may take the size of its container. (A horizontal menu does this by default) 
\n    
\n      Run\n      Walk\n      Bike\n    
\n  
\n\n  
\n    
Evenly sized items
\n    
A menu may divide its items evenly
\n    
\n      Buy\n      Sell\n      Rent\n    
\n  
\n\n  
\n    
A vertical menu can point to content adjacent to itself to show ownership
\n    
\n      \n        Site Title\n      \n      
\n        Grouped Section\n        
\n          Subsection 1\n          Subsection 1\n          Subsection 1\n        
\n      
\n      
\n        Dropdown \n        
\n          
Choice 1
\n          
Choice 2
\n          
Choice 3
\n        
\n      
\n    
\n  
\n\n\n  
\n    
Attached
\n    
A menu may be attached to other content segments
\n    
\n      \n        Tab 1\n      \n      \n        Tab 2\n      \n    
\n    
\n      There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.\n    
\n  
\n\n  
\n    
Horizontal Sizes
\n    
A horizontal menu can vary in size
\n    
\n      \n         Home\n      \n      \n         Messages\n      1\n      
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          Language \n          
\n            English\n            Russian\n            Spanish\n          
\n        
\n        
\n            
Sign Up
\n        
\n      
\n    
\n  
\n  
\n    
\n      \n         Home\n      \n      \n         Messages\n      1\n      
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          Language \n          
\n            English\n            Russian\n            Spanish\n          
\n        
\n        
\n            
Sign Up
\n        
\n      
\n    
\n  
\n  
\n    
A vertical menu can also vary in size
\n    
\n      \n        
1
\n        Inbox\n      \n      \n        
51
\n        Spam\n      \n      \n        
1
\n        Updates\n      \n      
\n        
\n          \n          \n        
\n      
\n    
\n  
\n  
\n    
\n      \n        
1
\n        Inbox\n      \n      \n        
51
\n        Spam\n      \n      \n        
1
\n        Updates\n      \n      
\n        
\n          \n          \n        
\n      
\n    
\n  
\n\n  
Items
\n\n  
\n    
Fitted
\n    
A menu item or menu can remove element padding, vertically or horizontally
\n    
\n      
\n        No padding whatsoever\n      
\n      
\n        No horizontal padding\n      
\n      
\n        No vertical padding\n      
\n    
\n  
\n\n\n  
\n    
Borderless
\n    
A menu item or menu can have no borders
\n    
\n      \n         Previous\n      \n      1\n      2\n      3\n      4\n      5\n      6\n      \n        Next \n      \n    
\n  
\n\n\n
",
      "content": "\n\n<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Types\n      Elements\n      States\n      Variations\n    
\n  
\n\n  
Types
\n  
\n    
Menu
\n\n    
A menu
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      
\n        
\n          
\n            \n            \n          
\n        
\n      
\n    
\n  
\n\n\n  
\n    
Vertical Menu
\n    
A vertical menu displays elements vertically..
\n    
 A vertical menu's width defaults to an arbitrary size. To have it fit your content more precisely use the fluid variation in conjunction with ui grid.
\n\n    
\n      \n        
1
\n        Inbox\n      \n      \n        
51
\n        Spam\n      \n      \n        
1
\n        Updates\n      \n      
\n        
\n          \n          \n        
\n      
\n    
\n  
\n\n  
\n    
Pagination
\n    
A pagination menu is specially formatted to present links to pages of content
\n    
\n      \n        \n      \n      \n        1\n      \n      
\n        ...\n      
\n      \n        10\n      \n      \n        11\n      \n      \n        12\n      \n      \n        \n      \n    
\n  
\n\n  
\n    
Tabular
\n    
A message can be formatted to show tabs of information
\n    
\n      \n        Bio\n      \n      \n        Pics\n      \n    
\n  
\n\n  
\n    
Tiered Menu
\n    
A tiered menu can show the sub-sections available as part of an activated section.
\n    
\n      
\n        \n          \n          Friends\n        \n        \n           Browse\n        \n        \n           Messages\n        \n        
\n          
\n            
\n              \n              \n            
\n          
\n          
\n            More \n            
\n               Edit Profile\n               Choose Language\n               Account Settings\n            
\n          
\n        
\n      
\n      
\n        Search\n        Add\n        Remove\n      
\n    
\n  
\n\n  
\n    
Vertical Menu w/ Sub Menus
\n    
A tiered menu can show the sub-sections available as part of an activated section.
\n    
\n      
\n        
\n      
\n      
\n         Home\n        
\n          Search\n          Add\n          Remove\n        
\n      
\n      \n         Browse\n      \n      \n         Messages\n      \n      
\n        More \n        
\n           Edit Profile\n           Choose Language\n           Account Settings\n        
\n      
\n    
\n  
\n\n\n  
\n    
Secondary Menu
\n    
A secondary menu allows for a section of content on a page to be activated
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n      
\n        
\n          
\n            \n            \n          
\n        
\n        \n          Logout\n        \n      
\n    
\n  
\n\n  
\n    
A vertical secondary menu
\n    
\n      \n        \n        Friends\n      \n      \n         Messages\n      \n      \n         Friends\n      \n      
\n        More \n        
\n           Edit Profile\n           Choose Language\n           Account Settings\n        
\n      
\n    
\n  
\n\n  
\n    
Pointing
\n    
A menu can point to content to show relationship
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n      
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          Language \n          
\n            English\n            Russian\n            Spanish\n          
\n        
\n      
\n    
\n  
\n  
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n      
\n        
\n          
\n            \n            \n          
\n        
\n        \n          Logout\n        \n      
\n    
\n  
\n  
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    

\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n  
\n\n  
\n    
Text
\n    
A menu can display simple text links
\n    
\n      
Sort By
\n      \n         Closest\n      \n      \n         Most Comments\n      \n      \n         Most Popular\n      \n    
\n  
\n  
\n    
A vertical text menu
\n    
\n      
Sort By
\n      \n         Closest\n      \n      \n         Most Comments\n      \n      \n         Most Popular\n      \n    
\n  
\n\n  
Elements
\n\n  
\n    
Header Item
\n    
A menu may have a header to help label sections of a menu.
\n    
\n      
\n        \n        Communities\n      
\n      
\n        College\n        
\n          Baseball\n          Basketball\n          Golf\n        
\n      
\n      \n        Dance\n      \n      \n        Aerobics\n      \n      
\n        \n        Cities\n      
\n      \n        New York\n      \n      \n        Montreal\n      \n      \n        Los Angeles\n      \n      \n        San Francisco\n      \n      
\n        \n        Months\n      
\n      \n        August\n      \n      \n        June\n      \n    
\n  
\n\n  
\n    
Text Item
\n    
A menu may have a simple text item.
\n    
\n      
 Single paragraphs are automatically formatted as text. You can also specify an item as textual by adding the classname text
\n    
\n    
\n      
\n        Promotions\n        New\n      
\n      
\n        Join now and save $10 on a pro membership!\n      
\n      
\n        
Join tomorrow and save $5 on pro.
\n      
\n    
\n  
\n\n  
\n    
Input
\n    
A menu item can contain an input inside of it
\n\n    
\n      
\n        
\n          \n          \n        
\n      
\n    
\n  
\n\n\n  
\n    
Button
\n    
A menu item can contain a button inside of it
\n\n    
\n      
\n        
Sign up
\n      
\n      
\n        
Log-in
\n      
\n    
\n  
\n\n\n  
\n    
Link Item
\n    
A menu may contain a link item, or an item formatted as if it is a link.
\n\n    
\n      
 Items that are anchor tags will automatically be formatted as a link.
\n    
\n    
\n      \n        Visit Google\n      \n      
\n        Javascript Link\n      
\n    
\n  
\n\n  
\n    
Dropdown Item
\n    
An item may contain a nested menu in a dropdown.
\n    
\n      
Dropdowns use UI dropdown elements. To have a dropdown open without javascript, use the simple variation
\n    
\n    
\n      
\n        Categories \n        
\n          Electronics\n          Automotive\n          Home\n        
\n      
\n    
\n  
\n  
\n    
Menu
\n    
A menu may contain another menu group in the same level as menu items.
\n    
\n      Browse\n      Submit\n      
\n        Sign Up\n        Help\n      
\n    
\n  
\n\n  
\n    
Nested Menu
\n    
A menu item may contain another menu nested inside that acts as a grouped sub-menu.
\n    
\n      Friends\n      
\n        Your Profile\n        
\n          Inbox\n          Activity\n          Groups\n        
\n      
\n    
\n  
\n\n\n  
States
\n\n  
\n    
Hover
\n    
A menu item can be hovered
\n    
 Menu items are only hoverable if they are links, defined with the variant \"link\", or are given the class name hover programmatically.
\n    
\n      
\n        Link\n      
\n    
\n  
\n\n\n  
\n    
Down
\n    
A menu item can be pressed in
\n    
\n      
\n        Link\n      
\n    
\n  
\n\n  
\n    
Active
\n    
A menu item can be active
\n    
\n      
\n        Link\n      
\n    
\n  
\n\n\n  
Variations
\n\n  
Menu
\n  
\n    
Inverted
\n    
A menu may have its colors inverted to show greater contrast
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n  
\n  
\n    
Colors
\n    
Additional colors can be specified.
\n    
\n      \n         Green\n      \n      \n         Red\n      \n      \n         Blue\n      \n      \n         Orange\n      \n      \n         Purple\n      \n      \n         Teal\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n  
\n  
\n    
These colors can also be inverted
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n  
\n\n\n  
\n    
Icons
\n    
A menu may have just icons
\n    
\n      \n        \n      \n      \n        \n      \n      \n        \n      \n    
\n    

\n    
\n      \n        \n      \n      \n        \n      \n      \n        \n      \n    
\n  
\n\n  
\n    
Icons
\n    
A menu may have labeled icons
\n    
\n      \n        \n        Mail\n      \n      \n        \n        Lab\n      \n      \n        \n        Favorites\n      \n    
\n    

\n    
\n      \n        \n        Mail\n      \n      \n        \n        Lab\n      \n      \n        \n        Favorites\n      \n    
\n  
\n\n\n  
\n    
Fluid
\n    
A vertical menu may take the size of its container. (A horizontal menu does this by default) 
\n    
\n      Run\n      Walk\n      Bike\n    
\n  
\n\n  
\n    
Evenly sized items
\n    
A menu may divide its items evenly
\n    
\n      Buy\n      Sell\n      Rent\n    
\n  
\n\n  
\n    
A vertical menu can point to content adjacent to itself to show ownership
\n    
\n      \n        Site Title\n      \n      
\n        Grouped Section\n        
\n          Subsection 1\n          Subsection 1\n          Subsection 1\n        
\n      
\n      
\n        Dropdown \n        
\n          
Choice 1
\n          
Choice 2
\n          
Choice 3
\n        
\n      
\n    
\n  
\n\n\n  
\n    
Attached
\n    
A menu may be attached to other content segments
\n    
\n      \n        Tab 1\n      \n      \n        Tab 2\n      \n    
\n    
\n      There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.\n    
\n  
\n\n  
\n    
Horizontal Sizes
\n    
A horizontal menu can vary in size
\n    
\n      \n         Home\n      \n      \n         Messages\n      1\n      
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          Language \n          
\n            English\n            Russian\n            Spanish\n          
\n        
\n        
\n            
Sign Up
\n        
\n      
\n    
\n  
\n  
\n    
\n      \n         Home\n      \n      \n         Messages\n      1\n      
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          Language \n          
\n            English\n            Russian\n            Spanish\n          
\n        
\n        
\n            
Sign Up
\n        
\n      
\n    
\n  
\n  
\n    
A vertical menu can also vary in size
\n    
\n      \n        
1
\n        Inbox\n      \n      \n        
51
\n        Spam\n      \n      \n        
1
\n        Updates\n      \n      
\n        
\n          \n          \n        
\n      
\n    
\n  
\n  
\n    
\n      \n        
1
\n        Inbox\n      \n      \n        
51
\n        Spam\n      \n      \n        
1
\n        Updates\n      \n      
\n        
\n          \n          \n        
\n      
\n    
\n  
\n\n  
Items
\n\n  
\n    
Fitted
\n    
A menu item or menu can remove element padding, vertically or horizontally
\n    
\n      
\n        No padding whatsoever\n      
\n      
\n        No horizontal padding\n      
\n      
\n        No vertical padding\n      
\n    
\n  
\n\n\n  
\n    
Borderless
\n    
A menu item or menu can have no borders
\n    
\n      \n         Previous\n      \n      1\n      2\n      3\n      4\n      5\n      6\n      \n        Next \n      \n    
\n  
\n\n\n
",
      "tags": null,
      "render": true,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": "Menu",
      "name": "menu.html",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "collections-menu",
      "url": "/collections/menu.html",
      "urls": [
        "/collections/menu.html"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": true,
      "header": "layout      : 'default'\ncss         : 'menu'\n\ntitle       : 'Menu'\ndescription : 'A menu is a collection of elements showing related user actions'\ntype        : 'UI Collection'",
      "parser": "yaml",
      "body": "\n\n<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Types\n      Elements\n      States\n      Variations\n    
\n  
\n\n  
Types
\n  
\n    
Menu
\n\n    
A menu
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      
\n        
\n          
\n            \n            \n          
\n        
\n      
\n    
\n  
\n\n\n  
\n    
Vertical Menu
\n    
A vertical menu displays elements vertically..
\n    
 A vertical menu's width defaults to an arbitrary size. To have it fit your content more precisely use the fluid variation in conjunction with ui grid.
\n\n    
\n      \n        
1
\n        Inbox\n      \n      \n        
51
\n        Spam\n      \n      \n        
1
\n        Updates\n      \n      
\n        
\n          \n          \n        
\n      
\n    
\n  
\n\n  
\n    
Pagination
\n    
A pagination menu is specially formatted to present links to pages of content
\n    
\n      \n        \n      \n      \n        1\n      \n      
\n        ...\n      
\n      \n        10\n      \n      \n        11\n      \n      \n        12\n      \n      \n        \n      \n    
\n  
\n\n  
\n    
Tabular
\n    
A message can be formatted to show tabs of information
\n    
\n      \n        Bio\n      \n      \n        Pics\n      \n    
\n  
\n\n  
\n    
Tiered Menu
\n    
A tiered menu can show the sub-sections available as part of an activated section.
\n    
\n      
\n        \n          \n          Friends\n        \n        \n           Browse\n        \n        \n           Messages\n        \n        
\n          
\n            
\n              \n              \n            
\n          
\n          
\n            More \n            
\n               Edit Profile\n               Choose Language\n               Account Settings\n            
\n          
\n        
\n      
\n      
\n        Search\n        Add\n        Remove\n      
\n    
\n  
\n\n  
\n    
Vertical Menu w/ Sub Menus
\n    
A tiered menu can show the sub-sections available as part of an activated section.
\n    
\n      
\n        
\n      
\n      
\n         Home\n        
\n          Search\n          Add\n          Remove\n        
\n      
\n      \n         Browse\n      \n      \n         Messages\n      \n      
\n        More \n        
\n           Edit Profile\n           Choose Language\n           Account Settings\n        
\n      
\n    
\n  
\n\n\n  
\n    
Secondary Menu
\n    
A secondary menu allows for a section of content on a page to be activated
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n      
\n        
\n          
\n            \n            \n          
\n        
\n        \n          Logout\n        \n      
\n    
\n  
\n\n  
\n    
A vertical secondary menu
\n    
\n      \n        \n        Friends\n      \n      \n         Messages\n      \n      \n         Friends\n      \n      
\n        More \n        
\n           Edit Profile\n           Choose Language\n           Account Settings\n        
\n      
\n    
\n  
\n\n  
\n    
Pointing
\n    
A menu can point to content to show relationship
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n      
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          Language \n          
\n            English\n            Russian\n            Spanish\n          
\n        
\n      
\n    
\n  
\n  
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n      
\n        
\n          
\n            \n            \n          
\n        
\n        \n          Logout\n        \n      
\n    
\n  
\n  
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    

\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n  
\n\n  
\n    
Text
\n    
A menu can display simple text links
\n    
\n      
Sort By
\n      \n         Closest\n      \n      \n         Most Comments\n      \n      \n         Most Popular\n      \n    
\n  
\n  
\n    
A vertical text menu
\n    
\n      
Sort By
\n      \n         Closest\n      \n      \n         Most Comments\n      \n      \n         Most Popular\n      \n    
\n  
\n\n  
Elements
\n\n  
\n    
Header Item
\n    
A menu may have a header to help label sections of a menu.
\n    
\n      
\n        \n        Communities\n      
\n      
\n        College\n        
\n          Baseball\n          Basketball\n          Golf\n        
\n      
\n      \n        Dance\n      \n      \n        Aerobics\n      \n      
\n        \n        Cities\n      
\n      \n        New York\n      \n      \n        Montreal\n      \n      \n        Los Angeles\n      \n      \n        San Francisco\n      \n      
\n        \n        Months\n      
\n      \n        August\n      \n      \n        June\n      \n    
\n  
\n\n  
\n    
Text Item
\n    
A menu may have a simple text item.
\n    
\n      
 Single paragraphs are automatically formatted as text. You can also specify an item as textual by adding the classname text
\n    
\n    
\n      
\n        Promotions\n        New\n      
\n      
\n        Join now and save $10 on a pro membership!\n      
\n      
\n        
Join tomorrow and save $5 on pro.
\n      
\n    
\n  
\n\n  
\n    
Input
\n    
A menu item can contain an input inside of it
\n\n    
\n      
\n        
\n          \n          \n        
\n      
\n    
\n  
\n\n\n  
\n    
Button
\n    
A menu item can contain a button inside of it
\n\n    
\n      
\n        
Sign up
\n      
\n      
\n        
Log-in
\n      
\n    
\n  
\n\n\n  
\n    
Link Item
\n    
A menu may contain a link item, or an item formatted as if it is a link.
\n\n    
\n      
 Items that are anchor tags will automatically be formatted as a link.
\n    
\n    
\n      \n        Visit Google\n      \n      
\n        Javascript Link\n      
\n    
\n  
\n\n  
\n    
Dropdown Item
\n    
An item may contain a nested menu in a dropdown.
\n    
\n      
Dropdowns use UI dropdown elements. To have a dropdown open without javascript, use the simple variation
\n    
\n    
\n      
\n        Categories \n        
\n          Electronics\n          Automotive\n          Home\n        
\n      
\n    
\n  
\n  
\n    
Menu
\n    
A menu may contain another menu group in the same level as menu items.
\n    
\n      Browse\n      Submit\n      
\n        Sign Up\n        Help\n      
\n    
\n  
\n\n  
\n    
Nested Menu
\n    
A menu item may contain another menu nested inside that acts as a grouped sub-menu.
\n    
\n      Friends\n      
\n        Your Profile\n        
\n          Inbox\n          Activity\n          Groups\n        
\n      
\n    
\n  
\n\n\n  
States
\n\n  
\n    
Hover
\n    
A menu item can be hovered
\n    
 Menu items are only hoverable if they are links, defined with the variant \"link\", or are given the class name hover programmatically.
\n    
\n      
\n        Link\n      
\n    
\n  
\n\n\n  
\n    
Down
\n    
A menu item can be pressed in
\n    
\n      
\n        Link\n      
\n    
\n  
\n\n  
\n    
Active
\n    
A menu item can be active
\n    
\n      
\n        Link\n      
\n    
\n  
\n\n\n  
Variations
\n\n  
Menu
\n  
\n    
Inverted
\n    
A menu may have its colors inverted to show greater contrast
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n  
\n  
\n    
Colors
\n    
Additional colors can be specified.
\n    
\n      \n         Green\n      \n      \n         Red\n      \n      \n         Blue\n      \n      \n         Orange\n      \n      \n         Purple\n      \n      \n         Teal\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n  
\n  
\n    
These colors can also be inverted
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n  
\n\n\n  
\n    
Icons
\n    
A menu may have just icons
\n    
\n      \n        \n      \n      \n        \n      \n      \n        \n      \n    
\n    

\n    
\n      \n        \n      \n      \n        \n      \n      \n        \n      \n    
\n  
\n\n  
\n    
Icons
\n    
A menu may have labeled icons
\n    
\n      \n        \n        Mail\n      \n      \n        \n        Lab\n      \n      \n        \n        Favorites\n      \n    
\n    

\n    
\n      \n        \n        Mail\n      \n      \n        \n        Lab\n      \n      \n        \n        Favorites\n      \n    
\n  
\n\n\n  
\n    
Fluid
\n    
A vertical menu may take the size of its container. (A horizontal menu does this by default) 
\n    
\n      Run\n      Walk\n      Bike\n    
\n  
\n\n  
\n    
Evenly sized items
\n    
A menu may divide its items evenly
\n    
\n      Buy\n      Sell\n      Rent\n    
\n  
\n\n  
\n    
A vertical menu can point to content adjacent to itself to show ownership
\n    
\n      \n        Site Title\n      \n      
\n        Grouped Section\n        
\n          Subsection 1\n          Subsection 1\n          Subsection 1\n        
\n      
\n      
\n        Dropdown \n        
\n          
Choice 1
\n          
Choice 2
\n          
Choice 3
\n        
\n      
\n    
\n  
\n\n\n  
\n    
Attached
\n    
A menu may be attached to other content segments
\n    
\n      \n        Tab 1\n      \n      \n        Tab 2\n      \n    
\n    
\n      There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.\n    
\n  
\n\n  
\n    
Horizontal Sizes
\n    
A horizontal menu can vary in size
\n    
\n      \n         Home\n      \n      \n         Messages\n      1\n      
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          Language \n          
\n            English\n            Russian\n            Spanish\n          
\n        
\n        
\n            
Sign Up
\n        
\n      
\n    
\n  
\n  
\n    
\n      \n         Home\n      \n      \n         Messages\n      1\n      
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          Language \n          
\n            English\n            Russian\n            Spanish\n          
\n        
\n        
\n            
Sign Up
\n        
\n      
\n    
\n  
\n  
\n    
A vertical menu can also vary in size
\n    
\n      \n        
1
\n        Inbox\n      \n      \n        
51
\n        Spam\n      \n      \n        
1
\n        Updates\n      \n      
\n        
\n          \n          \n        
\n      
\n    
\n  
\n  
\n    
\n      \n        
1
\n        Inbox\n      \n      \n        
51
\n        Spam\n      \n      \n        
1
\n        Updates\n      \n      
\n        
\n          \n          \n        
\n      
\n    
\n  
\n\n  
Items
\n\n  
\n    
Fitted
\n    
A menu item or menu can remove element padding, vertically or horizontally
\n    
\n      
\n        No padding whatsoever\n      
\n      
\n        No horizontal padding\n      
\n      
\n        No vertical padding\n      
\n    
\n  
\n\n\n  
\n    
Borderless
\n    
A menu item or menu can have no borders
\n    
\n      \n         Previous\n      \n      1\n      2\n      3\n      4\n      5\n      6\n      \n        Next \n      \n    
\n  
\n\n\n
",
      "rendered": true,
      "contentRendered": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  \n  \n  \n  \n\n  \n\n  \n  \n  Menu | Semantic UI\n\n  \n  \n\n  \n\n  \n  \n  \n\n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n\n  \n  \n\n\n  
\n    \n       Close Menu\n    \n    \n       Download\n    \n    
\n      \n        Introduction\n      \n      
\n        \n          Definitions\n        \n          Overview\n        \n          Types\n        \n          Variations\n        \n          What's Different\n        \n      
\n    
\n    
\n      Project\n      
\n        \n          Contributing\n        \n          Set-up\n        \n      
\n    
\n    
\n      Elements\n      
\n        \n          Button\n        \n          Divider\n        \n          Header\n        \n          Icon\n        \n          Image\n        \n          Input\n        \n          Label\n        \n          Loader\n        \n          Progress\n        \n          Reveal\n        \n          Segment\n        \n          Step\n        \n      
\n    
\n    
\n      Collections\n      
\n        \n          Breadcrumb\n        \n          Form\n        \n          Grid\n        \n          Menu\n        \n          Message\n        \n          Table\n        \n      
\n    
\n    
\n      Views\n      
\n        \n          Comment\n        \n          Feed\n        \n          Item\n        \n          List\n        \n      
\n    
\n    
\n      Modules\n      
\n        \n          Accordion\n        \n          Checkbox\n        \n          Dimmer\n        \n          Dropdown\n        \n          Modal\n        \n          Popup\n        \n          Rating\n        \n          Shape\n        \n          Sidebar\n        \n          Transition\n        \n      
\n    
\n    
\n      Behavior\n      
\n        \n          Form Validation\n        \n      
\n    
\n    
\n      Style Guide\n      
\n        \n          CSS\n        \n          Javascript\n        \n          Language\n        \n      
\n    
\n\n  
\n\n  
\n    
\n       Content\n      
\n        UI Collection: Menu\n      
\n      \n      \n      \n      
\n        4 of 6\n        
\n          \n            
\n              1. Breadcrumb\n            
\n          \n            
\n              2. Form\n            
\n          \n            
\n              3. Grid\n            
\n          \n            
\n              4. Menu\n            
\n          \n            
\n              5. Message\n            
\n          \n            
\n              6. Table\n            
\n          \n        
\n      
\n      \n      \n      \n      
\n        \n        
\n          \n        
\n        \n        \n\n        \n          \n        \n        \n          \n        \n        \n        \n          \n        \n        \n      
\n    
\n  
\n    
\n      \n      Menu\n    
\n  \n\n\n\n
\n  
\n    
\n\n      
\n        Menu\n        \n      
\n\n      
A menu is a collection of elements showing related user actions
\n      \n      
\n        Definition Mode\n        \n      
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n\n
\n\n  
\n    
\n      Types\n      Elements\n      States\n      Variations\n    
\n  
\n\n  
Types
\n  
\n    
Menu
\n\n    
A menu
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      
\n        
\n          
\n            \n            \n          
\n        
\n      
\n    
\n  
\n\n\n  
\n    
Vertical Menu
\n    
A vertical menu displays elements vertically..
\n    
 A vertical menu's width defaults to an arbitrary size. To have it fit your content more precisely use the fluid variation in conjunction with ui grid.
\n\n    
\n      \n        
1
\n        Inbox\n      \n      \n        
51
\n        Spam\n      \n      \n        
1
\n        Updates\n      \n      
\n        
\n          \n          \n        
\n      
\n    
\n  
\n\n  
\n    
Pagination
\n    
A pagination menu is specially formatted to present links to pages of content
\n    
\n      \n        \n      \n      \n        1\n      \n      
\n        ...\n      
\n      \n        10\n      \n      \n        11\n      \n      \n        12\n      \n      \n        \n      \n    
\n  
\n\n  
\n    
Tabular
\n    
A message can be formatted to show tabs of information
\n    
\n      \n        Bio\n      \n      \n        Pics\n      \n    
\n  
\n\n  
\n    
Tiered Menu
\n    
A tiered menu can show the sub-sections available as part of an activated section.
\n    
\n      
\n        \n          \n          Friends\n        \n        \n           Browse\n        \n        \n           Messages\n        \n        
\n          
\n            
\n              \n              \n            
\n          
\n          
\n            More \n            
\n               Edit Profile\n               Choose Language\n               Account Settings\n            
\n          
\n        
\n      
\n      
\n        Search\n        Add\n        Remove\n      
\n    
\n  
\n\n  
\n    
Vertical Menu w/ Sub Menus
\n    
A tiered menu can show the sub-sections available as part of an activated section.
\n    
\n      
\n        
\n      
\n      
\n         Home\n        
\n          Search\n          Add\n          Remove\n        
\n      
\n      \n         Browse\n      \n      \n         Messages\n      \n      
\n        More \n        
\n           Edit Profile\n           Choose Language\n           Account Settings\n        
\n      
\n    
\n  
\n\n\n  
\n    
Secondary Menu
\n    
A secondary menu allows for a section of content on a page to be activated
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n      
\n        
\n          
\n            \n            \n          
\n        
\n        \n          Logout\n        \n      
\n    
\n  
\n\n  
\n    
A vertical secondary menu
\n    
\n      \n        \n        Friends\n      \n      \n         Messages\n      \n      \n         Friends\n      \n      
\n        More \n        
\n           Edit Profile\n           Choose Language\n           Account Settings\n        
\n      
\n    
\n  
\n\n  
\n    
Pointing
\n    
A menu can point to content to show relationship
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n      
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          Language \n          
\n            English\n            Russian\n            Spanish\n          
\n        
\n      
\n    
\n  
\n  
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n      
\n        
\n          
\n            \n            \n          
\n        
\n        \n          Logout\n        \n      
\n    
\n  
\n  
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    

\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n  
\n\n  
\n    
Text
\n    
A menu can display simple text links
\n    
\n      
Sort By
\n      \n         Closest\n      \n      \n         Most Comments\n      \n      \n         Most Popular\n      \n    
\n  
\n  
\n    
A vertical text menu
\n    
\n      
Sort By
\n      \n         Closest\n      \n      \n         Most Comments\n      \n      \n         Most Popular\n      \n    
\n  
\n\n  
Elements
\n\n  
\n    
Header Item
\n    
A menu may have a header to help label sections of a menu.
\n    
\n      
\n        \n        Communities\n      
\n      
\n        College\n        
\n          Baseball\n          Basketball\n          Golf\n        
\n      
\n      \n        Dance\n      \n      \n        Aerobics\n      \n      
\n        \n        Cities\n      
\n      \n        New York\n      \n      \n        Montreal\n      \n      \n        Los Angeles\n      \n      \n        San Francisco\n      \n      
\n        \n        Months\n      
\n      \n        August\n      \n      \n        June\n      \n    
\n  
\n\n  
\n    
Text Item
\n    
A menu may have a simple text item.
\n    
\n      
 Single paragraphs are automatically formatted as text. You can also specify an item as textual by adding the classname text
\n    
\n    
\n      
\n        Promotions\n        New\n      
\n      
\n        Join now and save $10 on a pro membership!\n      
\n      
\n        
Join tomorrow and save $5 on pro.
\n      
\n    
\n  
\n\n  
\n    
Input
\n    
A menu item can contain an input inside of it
\n\n    
\n      
\n        
\n          \n          \n        
\n      
\n    
\n  
\n\n\n  
\n    
Button
\n    
A menu item can contain a button inside of it
\n\n    
\n      
\n        
Sign up
\n      
\n      
\n        
Log-in
\n      
\n    
\n  
\n\n\n  
\n    
Link Item
\n    
A menu may contain a link item, or an item formatted as if it is a link.
\n\n    
\n      
 Items that are anchor tags will automatically be formatted as a link.
\n    
\n    
\n      \n        Visit Google\n      \n      
\n        Javascript Link\n      
\n    
\n  
\n\n  
\n    
Dropdown Item
\n    
An item may contain a nested menu in a dropdown.
\n    
\n      
Dropdowns use UI dropdown elements. To have a dropdown open without javascript, use the simple variation
\n    
\n    
\n      
\n        Categories \n        
\n          Electronics\n          Automotive\n          Home\n        
\n      
\n    
\n  
\n  
\n    
Menu
\n    
A menu may contain another menu group in the same level as menu items.
\n    
\n      Browse\n      Submit\n      
\n        Sign Up\n        Help\n      
\n    
\n  
\n\n  
\n    
Nested Menu
\n    
A menu item may contain another menu nested inside that acts as a grouped sub-menu.
\n    
\n      Friends\n      
\n        Your Profile\n        
\n          Inbox\n          Activity\n          Groups\n        
\n      
\n    
\n  
\n\n\n  
States
\n\n  
\n    
Hover
\n    
A menu item can be hovered
\n    
 Menu items are only hoverable if they are links, defined with the variant \"link\", or are given the class name hover programmatically.
\n    
\n      
\n        Link\n      
\n    
\n  
\n\n\n  
\n    
Down
\n    
A menu item can be pressed in
\n    
\n      
\n        Link\n      
\n    
\n  
\n\n  
\n    
Active
\n    
A menu item can be active
\n    
\n      
\n        Link\n      
\n    
\n  
\n\n\n  
Variations
\n\n  
Menu
\n  
\n    
Inverted
\n    
A menu may have its colors inverted to show greater contrast
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n  
\n  
\n    
Colors
\n    
Additional colors can be specified.
\n    
\n      \n         Green\n      \n      \n         Red\n      \n      \n         Blue\n      \n      \n         Orange\n      \n      \n         Purple\n      \n      \n         Teal\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n  
\n  
\n    
These colors can also be inverted
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n  
\n\n\n  
\n    
Icons
\n    
A menu may have just icons
\n    
\n      \n        \n      \n      \n        \n      \n      \n        \n      \n    
\n    

\n    
\n      \n        \n      \n      \n        \n      \n      \n        \n      \n    
\n  
\n\n  
\n    
Icons
\n    
A menu may have labeled icons
\n    
\n      \n        \n        Mail\n      \n      \n        \n        Lab\n      \n      \n        \n        Favorites\n      \n    
\n    

\n    
\n      \n        \n        Mail\n      \n      \n        \n        Lab\n      \n      \n        \n        Favorites\n      \n    
\n  
\n\n\n  
\n    
Fluid
\n    
A vertical menu may take the size of its container. (A horizontal menu does this by default) 
\n    
\n      Run\n      Walk\n      Bike\n    
\n  
\n\n  
\n    
Evenly sized items
\n    
A menu may divide its items evenly
\n    
\n      Buy\n      Sell\n      Rent\n    
\n  
\n\n  
\n    
A vertical menu can point to content adjacent to itself to show ownership
\n    
\n      \n        Site Title\n      \n      
\n        Grouped Section\n        
\n          Subsection 1\n          Subsection 1\n          Subsection 1\n        
\n      
\n      
\n        Dropdown \n        
\n          
Choice 1
\n          
Choice 2
\n          
Choice 3
\n        
\n      
\n    
\n  
\n\n\n  
\n    
Attached
\n    
A menu may be attached to other content segments
\n    
\n      \n        Tab 1\n      \n      \n        Tab 2\n      \n    
\n    
\n      There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.\n    
\n  
\n\n  
\n    
Horizontal Sizes
\n    
A horizontal menu can vary in size
\n    
\n      \n         Home\n      \n      \n         Messages\n      1\n      
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          Language \n          
\n            English\n            Russian\n            Spanish\n          
\n        
\n        
\n            
Sign Up
\n        
\n      
\n    
\n  
\n  
\n    
\n      \n         Home\n      \n      \n         Messages\n      1\n      
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          Language \n          
\n            English\n            Russian\n            Spanish\n          
\n        
\n        
\n            
Sign Up
\n        
\n      
\n    
\n  
\n  
\n    
A vertical menu can also vary in size
\n    
\n      \n        
1
\n        Inbox\n      \n      \n        
51
\n        Spam\n      \n      \n        
1
\n        Updates\n      \n      
\n        
\n          \n          \n        
\n      
\n    
\n  
\n  
\n    
\n      \n        
1
\n        Inbox\n      \n      \n        
51
\n        Spam\n      \n      \n        
1
\n        Updates\n      \n      
\n        
\n          \n          \n        
\n      
\n    
\n  
\n\n  
Items
\n\n  
\n    
Fitted
\n    
A menu item or menu can remove element padding, vertically or horizontally
\n    
\n      
\n        No padding whatsoever\n      
\n      
\n        No horizontal padding\n      
\n      
\n        No vertical padding\n      
\n    
\n  
\n\n\n  
\n    
Borderless
\n    
A menu item or menu can have no borders
\n    
\n      \n         Previous\n      \n      1\n      2\n      3\n      4\n      5\n      6\n      \n        Next \n      \n    
\n  
\n\n\n
\n\n\n",
      "contentRenderedWithoutLayouts": "\n\n\n\n
\n  
\n    
\n\n      
\n        Menu\n        \n      
\n\n      
A menu is a collection of elements showing related user actions
\n      \n      
\n        Definition Mode\n        \n      
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n\n
\n\n  
\n    
\n      Types\n      Elements\n      States\n      Variations\n    
\n  
\n\n  
Types
\n  
\n    
Menu
\n\n    
A menu
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      
\n        
\n          
\n            \n            \n          
\n        
\n      
\n    
\n  
\n\n\n  
\n    
Vertical Menu
\n    
A vertical menu displays elements vertically..
\n    
 A vertical menu's width defaults to an arbitrary size. To have it fit your content more precisely use the fluid variation in conjunction with ui grid.
\n\n    
\n      \n        
1
\n        Inbox\n      \n      \n        
51
\n        Spam\n      \n      \n        
1
\n        Updates\n      \n      
\n        
\n          \n          \n        
\n      
\n    
\n  
\n\n  
\n    
Pagination
\n    
A pagination menu is specially formatted to present links to pages of content
\n    
\n      \n        \n      \n      \n        1\n      \n      
\n        ...\n      
\n      \n        10\n      \n      \n        11\n      \n      \n        12\n      \n      \n        \n      \n    
\n  
\n\n  
\n    
Tabular
\n    
A message can be formatted to show tabs of information
\n    
\n      \n        Bio\n      \n      \n        Pics\n      \n    
\n  
\n\n  
\n    
Tiered Menu
\n    
A tiered menu can show the sub-sections available as part of an activated section.
\n    
\n      
\n        \n          \n          Friends\n        \n        \n           Browse\n        \n        \n           Messages\n        \n        
\n          
\n            
\n              \n              \n            
\n          
\n          
\n            More \n            
\n               Edit Profile\n               Choose Language\n               Account Settings\n            
\n          
\n        
\n      
\n      
\n        Search\n        Add\n        Remove\n      
\n    
\n  
\n\n  
\n    
Vertical Menu w/ Sub Menus
\n    
A tiered menu can show the sub-sections available as part of an activated section.
\n    
\n      
\n        
\n      
\n      
\n         Home\n        
\n          Search\n          Add\n          Remove\n        
\n      
\n      \n         Browse\n      \n      \n         Messages\n      \n      
\n        More \n        
\n           Edit Profile\n           Choose Language\n           Account Settings\n        
\n      
\n    
\n  
\n\n\n  
\n    
Secondary Menu
\n    
A secondary menu allows for a section of content on a page to be activated
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n      
\n        
\n          
\n            \n            \n          
\n        
\n        \n          Logout\n        \n      
\n    
\n  
\n\n  
\n    
A vertical secondary menu
\n    
\n      \n        \n        Friends\n      \n      \n         Messages\n      \n      \n         Friends\n      \n      
\n        More \n        
\n           Edit Profile\n           Choose Language\n           Account Settings\n        
\n      
\n    
\n  
\n\n  
\n    
Pointing
\n    
A menu can point to content to show relationship
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n      
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          Language \n          
\n            English\n            Russian\n            Spanish\n          
\n        
\n      
\n    
\n  
\n  
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n      
\n        
\n          
\n            \n            \n          
\n        
\n        \n          Logout\n        \n      
\n    
\n  
\n  
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    

\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n  
\n\n  
\n    
Text
\n    
A menu can display simple text links
\n    
\n      
Sort By
\n      \n         Closest\n      \n      \n         Most Comments\n      \n      \n         Most Popular\n      \n    
\n  
\n  
\n    
A vertical text menu
\n    
\n      
Sort By
\n      \n         Closest\n      \n      \n         Most Comments\n      \n      \n         Most Popular\n      \n    
\n  
\n\n  
Elements
\n\n  
\n    
Header Item
\n    
A menu may have a header to help label sections of a menu.
\n    
\n      
\n        \n        Communities\n      
\n      
\n        College\n        
\n          Baseball\n          Basketball\n          Golf\n        
\n      
\n      \n        Dance\n      \n      \n        Aerobics\n      \n      
\n        \n        Cities\n      
\n      \n        New York\n      \n      \n        Montreal\n      \n      \n        Los Angeles\n      \n      \n        San Francisco\n      \n      
\n        \n        Months\n      
\n      \n        August\n      \n      \n        June\n      \n    
\n  
\n\n  
\n    
Text Item
\n    
A menu may have a simple text item.
\n    
\n      
 Single paragraphs are automatically formatted as text. You can also specify an item as textual by adding the classname text
\n    
\n    
\n      
\n        Promotions\n        New\n      
\n      
\n        Join now and save $10 on a pro membership!\n      
\n      
\n        
Join tomorrow and save $5 on pro.
\n      
\n    
\n  
\n\n  
\n    
Input
\n    
A menu item can contain an input inside of it
\n\n    
\n      
\n        
\n          \n          \n        
\n      
\n    
\n  
\n\n\n  
\n    
Button
\n    
A menu item can contain a button inside of it
\n\n    
\n      
\n        
Sign up
\n      
\n      
\n        
Log-in
\n      
\n    
\n  
\n\n\n  
\n    
Link Item
\n    
A menu may contain a link item, or an item formatted as if it is a link.
\n\n    
\n      
 Items that are anchor tags will automatically be formatted as a link.
\n    
\n    
\n      \n        Visit Google\n      \n      
\n        Javascript Link\n      
\n    
\n  
\n\n  
\n    
Dropdown Item
\n    
An item may contain a nested menu in a dropdown.
\n    
\n      
Dropdowns use UI dropdown elements. To have a dropdown open without javascript, use the simple variation
\n    
\n    
\n      
\n        Categories \n        
\n          Electronics\n          Automotive\n          Home\n        
\n      
\n    
\n  
\n  
\n    
Menu
\n    
A menu may contain another menu group in the same level as menu items.
\n    
\n      Browse\n      Submit\n      
\n        Sign Up\n        Help\n      
\n    
\n  
\n\n  
\n    
Nested Menu
\n    
A menu item may contain another menu nested inside that acts as a grouped sub-menu.
\n    
\n      Friends\n      
\n        Your Profile\n        
\n          Inbox\n          Activity\n          Groups\n        
\n      
\n    
\n  
\n\n\n  
States
\n\n  
\n    
Hover
\n    
A menu item can be hovered
\n    
 Menu items are only hoverable if they are links, defined with the variant \"link\", or are given the class name hover programmatically.
\n    
\n      
\n        Link\n      
\n    
\n  
\n\n\n  
\n    
Down
\n    
A menu item can be pressed in
\n    
\n      
\n        Link\n      
\n    
\n  
\n\n  
\n    
Active
\n    
A menu item can be active
\n    
\n      
\n        Link\n      
\n    
\n  
\n\n\n  
Variations
\n\n  
Menu
\n  
\n    
Inverted
\n    
A menu may have its colors inverted to show greater contrast
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n  
\n  
\n    
Colors
\n    
Additional colors can be specified.
\n    
\n      \n         Green\n      \n      \n         Red\n      \n      \n         Blue\n      \n      \n         Orange\n      \n      \n         Purple\n      \n      \n         Teal\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n  
\n  
\n    
These colors can also be inverted
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n    
\n    
\n      \n         Home\n      \n      \n         Messages\n      \n      \n         Friends\n      \n    
\n  
\n\n\n  
\n    
Icons
\n    
A menu may have just icons
\n    
\n      \n        \n      \n      \n        \n      \n      \n        \n      \n    
\n    

\n    
\n      \n        \n      \n      \n        \n      \n      \n        \n      \n    
\n  
\n\n  
\n    
Icons
\n    
A menu may have labeled icons
\n    
\n      \n        \n        Mail\n      \n      \n        \n        Lab\n      \n      \n        \n        Favorites\n      \n    
\n    

\n    
\n      \n        \n        Mail\n      \n      \n        \n        Lab\n      \n      \n        \n        Favorites\n      \n    
\n  
\n\n\n  
\n    
Fluid
\n    
A vertical menu may take the size of its container. (A horizontal menu does this by default) 
\n    
\n      Run\n      Walk\n      Bike\n    
\n  
\n\n  
\n    
Evenly sized items
\n    
A menu may divide its items evenly
\n    
\n      Buy\n      Sell\n      Rent\n    
\n  
\n\n  
\n    
A vertical menu can point to content adjacent to itself to show ownership
\n    
\n      \n        Site Title\n      \n      
\n        Grouped Section\n        
\n          Subsection 1\n          Subsection 1\n          Subsection 1\n        
\n      
\n      
\n        Dropdown \n        
\n          
Choice 1
\n          
Choice 2
\n          
Choice 3
\n        
\n      
\n    
\n  
\n\n\n  
\n    
Attached
\n    
A menu may be attached to other content segments
\n    
\n      \n        Tab 1\n      \n      \n        Tab 2\n      \n    
\n    
\n      There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.\n    
\n  
\n\n  
\n    
Horizontal Sizes
\n    
A horizontal menu can vary in size
\n    
\n      \n         Home\n      \n      \n         Messages\n      1\n      
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          Language \n          
\n            English\n            Russian\n            Spanish\n          
\n        
\n        
\n            
Sign Up
\n        
\n      
\n    
\n  
\n  
\n    
\n      \n         Home\n      \n      \n         Messages\n      1\n      
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          Language \n          
\n            English\n            Russian\n            Spanish\n          
\n        
\n        
\n            
Sign Up
\n        
\n      
\n    
\n  
\n  
\n    
A vertical menu can also vary in size
\n    
\n      \n        
1
\n        Inbox\n      \n      \n        
51
\n        Spam\n      \n      \n        
1
\n        Updates\n      \n      
\n        
\n          \n          \n        
\n      
\n    
\n  
\n  
\n    
\n      \n        
1
\n        Inbox\n      \n      \n        
51
\n        Spam\n      \n      \n        
1
\n        Updates\n      \n      
\n        
\n          \n          \n        
\n      
\n    
\n  
\n\n  
Items
\n\n  
\n    
Fitted
\n    
A menu item or menu can remove element padding, vertically or horizontally
\n    
\n      
\n        No padding whatsoever\n      
\n      
\n        No horizontal padding\n      
\n      
\n        No vertical padding\n      
\n    
\n  
\n\n\n  
\n    
Borderless
\n    
A menu item or menu can have no borders
\n    
\n      \n         Previous\n      \n      1\n      2\n      3\n      4\n      5\n      6\n      \n        Next \n      \n    
\n  
\n\n\n
",
      "renderSingleExtensions": false,
      "layout": "default",
      "css": "menu",
      "description": "A menu is a collection of elements showing related user actions",
      "type": "UI Collection",
      "layoutRelativePath": "default.html.eco",
      "meta": {
        "layout": "default",
        "css": "menu",
        "title": "Menu",
        "description": "A menu is a collection of elements showing related user actions",
        "type": "UI Collection"
      }
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/documents/collections/message.html.eco",
      "relativePath": "collections/message.html.eco",
      "basename": "message",
      "outBasename": "message",
      "extension": "eco",
      "outExtension": "html",
      "extensions": [
        "html",
        "eco"
      ],
      "filename": "message.html.eco",
      "fullDirPath": "/home/jack/projects/semantic/server/documents/collections",
      "outPath": "/home/jack/projects/semantic/docs/collections/message.html",
      "outDirPath": "/home/jack/projects/semantic/docs/collections",
      "outFilename": "message.html",
      "relativeOutPath": "collections/message.html",
      "relativeDirPath": "collections",
      "relativeOutDirPath": "collections",
      "relativeBase": "collections/message",
      "relativeOutBase": "collections/message",
      "contentType": "application/octet-stream",
      "outContentType": "text/html",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": "2013-12-04T09:15:24.827Z",
      "wtime": "2013-12-04T09:15:28.615Z",
      "exists": true,
      "encoding": "utf8",
      "source": "---\nlayout      : 'default'\ncss         : 'text'\n\ntitle       : 'Message'\ndescription : 'Messages alert a user to information they must immediately consider before proceeding on to the normal content of the page'\ntype        : 'UI Collection'\n---\n\n<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Types\n      States\n      Variations\n    
\n  
\n\n  
Types
\n\n  
\n    
Text Message
\n    
A basic message
\n    
\n      
\n        Welcome back!\n      
\n      
\n        It's good to see you again. I have had a lot to think about since our last visit, I've changed much as a person and I can see that you have too.\n      
\n      
\n        Perhaps we can talk about it if you have the time.\n      
\n    
\n  
\n\n  
\n    
List Message
\n    
A message with a list
\n    
\n      
\n        Welcome back!\n      
\n      
    \n        
  • It's good to see you again.
    • \n        
  • Did you know it's been a while?
    • \n      
\n    
\n  
\n\n  
\n    
Icon Message
\n    
A message can contain an icon.
\n    
\n      \n      
\n        
\n          Have you heard about our mailing list?\n        
\n        
Get all the best inventions in your e-mail every day. Sign up now!
\n      
\n    
\n  
\n\n  
\n    
Dismissable Block
\n    
A message that the user can choose to hide
\n    
\n      \n      
\n        Welcome back!\n      
\n      
This is a special notification which you can dismiss if you're bored with it.
\n    
\n  
\n\n\n  
States
\n\n  
\n    
Hidden
\n    
Text Blocks can be hidden
\n    
\n      \n    
\n  
\n\n  
\n    
Visible
\n    
Text Blocks can be set to visible if they need to force themselves to be shown.
\n    
\n      
You can always see me
\n    
\n  
\n\n  
Variations
\n\n  
\n    
Floating
\n    
A message can float above content that it is related to
\n    
\n      
Way to go!
\n    
\n  
\n\n  
\n    
Compact
\n    
A message can only take up the width of its content.
\n    
\n      
Get all the best inventions in your e-mail every day. Sign up now!
\n    
\n  
\n\n  
\n    
Attached
\n    
A message can be formatted to attach itself to other content
\n    
\n      
\n        Have you heard about our mailing list?\n      
\n      
Get all the best inventions in your e-mail every day. Sign up now!
\n    
\n    
\n      
Let's go ahead and get you signed up.
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
\n        \n        \n      
\n      
\n        \n        \n      
\n      
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n    
\n      Are you sure you know what you're doing?\n    
\n  
\n  
\n    
Colored
\n    
A message can be formatted to be different colors
\n    
Red
\n    
Blue
\n    
Green
\n    
Yellow
\n  
\n\n\n  
\n    
Warning
\n    
A message may be formatted to display warning messages.
\n    
\n      \n      
\n        You must register before you can do that!\n      
\n      Visit our registration page, then try again\n    
\n  
\n\n  
\n    
Info
\n    
A message may be formatted to display information.
\n    
\n      \n      
\n        Was this what you wanted?\n      
\n      
    \n        
  • It's good to see you again.
    • \n        
  • Did you know it's been a while?
    • \n      
\n    
\n  
\n\n  
\n    
Success
\n    
A message may be formatted to display a success message.
\n    
\n      \n      
\n        Congratulations, you are now a member!\n      
\n    
\n  
\n\n  
\n    
Error
\n    
A message may be formatted to display errors.
\n    
\n      \n      
\n        Was this what you wanted?\n      
\n      
    \n        
  • It's good to see you again.
    • \n        
  • Did you know it's been a while?
    • \n      
\n    
\n  
\n\n  
\n    
Sizes
\n    
A message can have different sizes
\n    
\n      This is a very small message.\n    
\n    
\n      This is large\n    
\n    
\n      This is huge\n    
\n    
\n      This is massive\n    
\n  
\n\n  
\n\n
",
      "content": "<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Types\n      States\n      Variations\n    
\n  
\n\n  
Types
\n\n  
\n    
Text Message
\n    
A basic message
\n    
\n      
\n        Welcome back!\n      
\n      
\n        It's good to see you again. I have had a lot to think about since our last visit, I've changed much as a person and I can see that you have too.\n      
\n      
\n        Perhaps we can talk about it if you have the time.\n      
\n    
\n  
\n\n  
\n    
List Message
\n    
A message with a list
\n    
\n      
\n        Welcome back!\n      
\n      
    \n        
  • It's good to see you again.
    • \n        
  • Did you know it's been a while?
    • \n      
\n    
\n  
\n\n  
\n    
Icon Message
\n    
A message can contain an icon.
\n    
\n      \n      
\n        
\n          Have you heard about our mailing list?\n        
\n        
Get all the best inventions in your e-mail every day. Sign up now!
\n      
\n    
\n  
\n\n  
\n    
Dismissable Block
\n    
A message that the user can choose to hide
\n    
\n      \n      
\n        Welcome back!\n      
\n      
This is a special notification which you can dismiss if you're bored with it.
\n    
\n  
\n\n\n  
States
\n\n  
\n    
Hidden
\n    
Text Blocks can be hidden
\n    
\n      \n    
\n  
\n\n  
\n    
Visible
\n    
Text Blocks can be set to visible if they need to force themselves to be shown.
\n    
\n      
You can always see me
\n    
\n  
\n\n  
Variations
\n\n  
\n    
Floating
\n    
A message can float above content that it is related to
\n    
\n      
Way to go!
\n    
\n  
\n\n  
\n    
Compact
\n    
A message can only take up the width of its content.
\n    
\n      
Get all the best inventions in your e-mail every day. Sign up now!
\n    
\n  
\n\n  
\n    
Attached
\n    
A message can be formatted to attach itself to other content
\n    
\n      
\n        Have you heard about our mailing list?\n      
\n      
Get all the best inventions in your e-mail every day. Sign up now!
\n    
\n    
\n      
Let's go ahead and get you signed up.
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
\n        \n        \n      
\n      
\n        \n        \n      
\n      
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n    
\n      Are you sure you know what you're doing?\n    
\n  
\n  
\n    
Colored
\n    
A message can be formatted to be different colors
\n    
Red
\n    
Blue
\n    
Green
\n    
Yellow
\n  
\n\n\n  
\n    
Warning
\n    
A message may be formatted to display warning messages.
\n    
\n      \n      
\n        You must register before you can do that!\n      
\n      Visit our registration page, then try again\n    
\n  
\n\n  
\n    
Info
\n    
A message may be formatted to display information.
\n    
\n      \n      
\n        Was this what you wanted?\n      
\n      
    \n        
  • It's good to see you again.
    • \n        
  • Did you know it's been a while?
    • \n      
\n    
\n  
\n\n  
\n    
Success
\n    
A message may be formatted to display a success message.
\n    
\n      \n      
\n        Congratulations, you are now a member!\n      
\n    
\n  
\n\n  
\n    
Error
\n    
A message may be formatted to display errors.
\n    
\n      \n      
\n        Was this what you wanted?\n      
\n      
    \n        
  • It's good to see you again.
    • \n        
  • Did you know it's been a while?
    • \n      
\n    
\n  
\n\n  
\n    
Sizes
\n    
A message can have different sizes
\n    
\n      This is a very small message.\n    
\n    
\n      This is large\n    
\n    
\n      This is huge\n    
\n    
\n      This is massive\n    
\n  
\n\n  
\n\n
",
      "tags": null,
      "render": true,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": "Message",
      "name": "message.html",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "collections-message",
      "url": "/collections/message.html",
      "urls": [
        "/collections/message.html"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": true,
      "header": "layout      : 'default'\ncss         : 'text'\n\ntitle       : 'Message'\ndescription : 'Messages alert a user to information they must immediately consider before proceeding on to the normal content of the page'\ntype        : 'UI Collection'",
      "parser": "yaml",
      "body": "<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Types\n      States\n      Variations\n    
\n  
\n\n  
Types
\n\n  
\n    
Text Message
\n    
A basic message
\n    
\n      
\n        Welcome back!\n      
\n      
\n        It's good to see you again. I have had a lot to think about since our last visit, I've changed much as a person and I can see that you have too.\n      
\n      
\n        Perhaps we can talk about it if you have the time.\n      
\n    
\n  
\n\n  
\n    
List Message
\n    
A message with a list
\n    
\n      
\n        Welcome back!\n      
\n      
    \n        
  • It's good to see you again.
    • \n        
  • Did you know it's been a while?
    • \n      
\n    
\n  
\n\n  
\n    
Icon Message
\n    
A message can contain an icon.
\n    
\n      \n      
\n        
\n          Have you heard about our mailing list?\n        
\n        
Get all the best inventions in your e-mail every day. Sign up now!
\n      
\n    
\n  
\n\n  
\n    
Dismissable Block
\n    
A message that the user can choose to hide
\n    
\n      \n      
\n        Welcome back!\n      
\n      
This is a special notification which you can dismiss if you're bored with it.
\n    
\n  
\n\n\n  
States
\n\n  
\n    
Hidden
\n    
Text Blocks can be hidden
\n    
\n      \n    
\n  
\n\n  
\n    
Visible
\n    
Text Blocks can be set to visible if they need to force themselves to be shown.
\n    
\n      
You can always see me
\n    
\n  
\n\n  
Variations
\n\n  
\n    
Floating
\n    
A message can float above content that it is related to
\n    
\n      
Way to go!
\n    
\n  
\n\n  
\n    
Compact
\n    
A message can only take up the width of its content.
\n    
\n      
Get all the best inventions in your e-mail every day. Sign up now!
\n    
\n  
\n\n  
\n    
Attached
\n    
A message can be formatted to attach itself to other content
\n    
\n      
\n        Have you heard about our mailing list?\n      
\n      
Get all the best inventions in your e-mail every day. Sign up now!
\n    
\n    
\n      
Let's go ahead and get you signed up.
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
\n        \n        \n      
\n      
\n        \n        \n      
\n      
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n    
\n      Are you sure you know what you're doing?\n    
\n  
\n  
\n    
Colored
\n    
A message can be formatted to be different colors
\n    
Red
\n    
Blue
\n    
Green
\n    
Yellow
\n  
\n\n\n  
\n    
Warning
\n    
A message may be formatted to display warning messages.
\n    
\n      \n      
\n        You must register before you can do that!\n      
\n      Visit our registration page, then try again\n    
\n  
\n\n  
\n    
Info
\n    
A message may be formatted to display information.
\n    
\n      \n      
\n        Was this what you wanted?\n      
\n      
    \n        
  • It's good to see you again.
    • \n        
  • Did you know it's been a while?
    • \n      
\n    
\n  
\n\n  
\n    
Success
\n    
A message may be formatted to display a success message.
\n    
\n      \n      
\n        Congratulations, you are now a member!\n      
\n    
\n  
\n\n  
\n    
Error
\n    
A message may be formatted to display errors.
\n    
\n      \n      
\n        Was this what you wanted?\n      
\n      
    \n        
  • It's good to see you again.
    • \n        
  • Did you know it's been a while?
    • \n      
\n    
\n  
\n\n  
\n    
Sizes
\n    
A message can have different sizes
\n    
\n      This is a very small message.\n    
\n    
\n      This is large\n    
\n    
\n      This is huge\n    
\n    
\n      This is massive\n    
\n  
\n\n  
\n\n
",
      "rendered": true,
      "contentRendered": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  \n  \n  \n  \n\n  \n\n  \n  \n  Message | Semantic UI\n\n  \n  \n\n  \n\n  \n  \n  \n\n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n\n  \n  \n\n\n  
\n    \n       Close Menu\n    \n    \n       Download\n    \n    
\n      \n        Introduction\n      \n      
\n        \n          Definitions\n        \n          Overview\n        \n          Types\n        \n          Variations\n        \n          What's Different\n        \n      
\n    
\n    
\n      Project\n      
\n        \n          Contributing\n        \n          Set-up\n        \n      
\n    
\n    
\n      Elements\n      
\n        \n          Button\n        \n          Divider\n        \n          Header\n        \n          Icon\n        \n          Image\n        \n          Input\n        \n          Label\n        \n          Loader\n        \n          Progress\n        \n          Reveal\n        \n          Segment\n        \n          Step\n        \n      
\n    
\n    
\n      Collections\n      
\n        \n          Breadcrumb\n        \n          Form\n        \n          Grid\n        \n          Menu\n        \n          Message\n        \n          Table\n        \n      
\n    
\n    
\n      Views\n      
\n        \n          Comment\n        \n          Feed\n        \n          Item\n        \n          List\n        \n      
\n    
\n    
\n      Modules\n      
\n        \n          Accordion\n        \n          Checkbox\n        \n          Dimmer\n        \n          Dropdown\n        \n          Modal\n        \n          Popup\n        \n          Rating\n        \n          Shape\n        \n          Sidebar\n        \n          Transition\n        \n      
\n    
\n    
\n      Behavior\n      
\n        \n          Form Validation\n        \n      
\n    
\n    
\n      Style Guide\n      
\n        \n          CSS\n        \n          Javascript\n        \n          Language\n        \n      
\n    
\n\n  
\n\n  
\n    
\n       Content\n      
\n        UI Collection: Message\n      
\n      \n      \n      \n      
\n        5 of 6\n        
\n          \n            
\n              1. Breadcrumb\n            
\n          \n            
\n              2. Form\n            
\n          \n            
\n              3. Grid\n            
\n          \n            
\n              4. Menu\n            
\n          \n            
\n              5. Message\n            
\n          \n            
\n              6. Table\n            
\n          \n        
\n      
\n      \n      \n      \n      
\n        \n        
\n          \n        
\n        \n        \n\n        \n          \n        \n        \n          \n        \n        \n        \n          \n        \n        \n      
\n    
\n  
\n    
\n      \n      Menu\n    
\n  \n\n
\n  
\n    
\n\n      
\n        Message\n        \n      
\n\n      
Messages alert a user to information they must immediately consider before proceeding on to the normal content of the page
\n      \n      
\n        Definition Mode\n        \n      
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n\n
\n\n  
\n    
\n      Types\n      States\n      Variations\n    
\n  
\n\n  
Types
\n\n  
\n    
Text Message
\n    
A basic message
\n    
\n      
\n        Welcome back!\n      
\n      
\n        It's good to see you again. I have had a lot to think about since our last visit, I've changed much as a person and I can see that you have too.\n      
\n      
\n        Perhaps we can talk about it if you have the time.\n      
\n    
\n  
\n\n  
\n    
List Message
\n    
A message with a list
\n    
\n      
\n        Welcome back!\n      
\n      
    \n        
  • It's good to see you again.
    • \n        
  • Did you know it's been a while?
    • \n      
\n    
\n  
\n\n  
\n    
Icon Message
\n    
A message can contain an icon.
\n    
\n      \n      
\n        
\n          Have you heard about our mailing list?\n        
\n        
Get all the best inventions in your e-mail every day. Sign up now!
\n      
\n    
\n  
\n\n  
\n    
Dismissable Block
\n    
A message that the user can choose to hide
\n    
\n      \n      
\n        Welcome back!\n      
\n      
This is a special notification which you can dismiss if you're bored with it.
\n    
\n  
\n\n\n  
States
\n\n  
\n    
Hidden
\n    
Text Blocks can be hidden
\n    
\n      \n    
\n  
\n\n  
\n    
Visible
\n    
Text Blocks can be set to visible if they need to force themselves to be shown.
\n    
\n      
You can always see me
\n    
\n  
\n\n  
Variations
\n\n  
\n    
Floating
\n    
A message can float above content that it is related to
\n    
\n      
Way to go!
\n    
\n  
\n\n  
\n    
Compact
\n    
A message can only take up the width of its content.
\n    
\n      
Get all the best inventions in your e-mail every day. Sign up now!
\n    
\n  
\n\n  
\n    
Attached
\n    
A message can be formatted to attach itself to other content
\n    
\n      
\n        Have you heard about our mailing list?\n      
\n      
Get all the best inventions in your e-mail every day. Sign up now!
\n    
\n    
\n      
Let's go ahead and get you signed up.
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
\n        \n        \n      
\n      
\n        \n        \n      
\n      
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n    
\n      Are you sure you know what you're doing?\n    
\n  
\n  
\n    
Colored
\n    
A message can be formatted to be different colors
\n    
Red
\n    
Blue
\n    
Green
\n    
Yellow
\n  
\n\n\n  
\n    
Warning
\n    
A message may be formatted to display warning messages.
\n    
\n      \n      
\n        You must register before you can do that!\n      
\n      Visit our registration page, then try again\n    
\n  
\n\n  
\n    
Info
\n    
A message may be formatted to display information.
\n    
\n      \n      
\n        Was this what you wanted?\n      
\n      
    \n        
  • It's good to see you again.
    • \n        
  • Did you know it's been a while?
    • \n      
\n    
\n  
\n\n  
\n    
Success
\n    
A message may be formatted to display a success message.
\n    
\n      \n      
\n        Congratulations, you are now a member!\n      
\n    
\n  
\n\n  
\n    
Error
\n    
A message may be formatted to display errors.
\n    
\n      \n      
\n        Was this what you wanted?\n      
\n      
    \n        
  • It's good to see you again.
    • \n        
  • Did you know it's been a while?
    • \n      
\n    
\n  
\n\n  
\n    
Sizes
\n    
A message can have different sizes
\n    
\n      This is a very small message.\n    
\n    
\n      This is large\n    
\n    
\n      This is huge\n    
\n    
\n      This is massive\n    
\n  
\n\n  
\n\n
\n\n\n",
      "contentRenderedWithoutLayouts": "\n\n
\n  
\n    
\n\n      
\n        Message\n        \n      
\n\n      
Messages alert a user to information they must immediately consider before proceeding on to the normal content of the page
\n      \n      
\n        Definition Mode\n        \n      
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n\n
\n\n  
\n    
\n      Types\n      States\n      Variations\n    
\n  
\n\n  
Types
\n\n  
\n    
Text Message
\n    
A basic message
\n    
\n      
\n        Welcome back!\n      
\n      
\n        It's good to see you again. I have had a lot to think about since our last visit, I've changed much as a person and I can see that you have too.\n      
\n      
\n        Perhaps we can talk about it if you have the time.\n      
\n    
\n  
\n\n  
\n    
List Message
\n    
A message with a list
\n    
\n      
\n        Welcome back!\n      
\n      
    \n        
  • It's good to see you again.
    • \n        
  • Did you know it's been a while?
    • \n      
\n    
\n  
\n\n  
\n    
Icon Message
\n    
A message can contain an icon.
\n    
\n      \n      
\n        
\n          Have you heard about our mailing list?\n        
\n        
Get all the best inventions in your e-mail every day. Sign up now!
\n      
\n    
\n  
\n\n  
\n    
Dismissable Block
\n    
A message that the user can choose to hide
\n    
\n      \n      
\n        Welcome back!\n      
\n      
This is a special notification which you can dismiss if you're bored with it.
\n    
\n  
\n\n\n  
States
\n\n  
\n    
Hidden
\n    
Text Blocks can be hidden
\n    
\n      \n    
\n  
\n\n  
\n    
Visible
\n    
Text Blocks can be set to visible if they need to force themselves to be shown.
\n    
\n      
You can always see me
\n    
\n  
\n\n  
Variations
\n\n  
\n    
Floating
\n    
A message can float above content that it is related to
\n    
\n      
Way to go!
\n    
\n  
\n\n  
\n    
Compact
\n    
A message can only take up the width of its content.
\n    
\n      
Get all the best inventions in your e-mail every day. Sign up now!
\n    
\n  
\n\n  
\n    
Attached
\n    
A message can be formatted to attach itself to other content
\n    
\n      
\n        Have you heard about our mailing list?\n      
\n      
Get all the best inventions in your e-mail every day. Sign up now!
\n    
\n    
\n      
Let's go ahead and get you signed up.
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
\n        \n        \n      
\n      
\n        \n        \n      
\n      
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n    
\n      Are you sure you know what you're doing?\n    
\n  
\n  
\n    
Colored
\n    
A message can be formatted to be different colors
\n    
Red
\n    
Blue
\n    
Green
\n    
Yellow
\n  
\n\n\n  
\n    
Warning
\n    
A message may be formatted to display warning messages.
\n    
\n      \n      
\n        You must register before you can do that!\n      
\n      Visit our registration page, then try again\n    
\n  
\n\n  
\n    
Info
\n    
A message may be formatted to display information.
\n    
\n      \n      
\n        Was this what you wanted?\n      
\n      
    \n        
  • It's good to see you again.
    • \n        
  • Did you know it's been a while?
    • \n      
\n    
\n  
\n\n  
\n    
Success
\n    
A message may be formatted to display a success message.
\n    
\n      \n      
\n        Congratulations, you are now a member!\n      
\n    
\n  
\n\n  
\n    
Error
\n    
A message may be formatted to display errors.
\n    
\n      \n      
\n        Was this what you wanted?\n      
\n      
    \n        
  • It's good to see you again.
    • \n        
  • Did you know it's been a while?
    • \n      
\n    
\n  
\n\n  
\n    
Sizes
\n    
A message can have different sizes
\n    
\n      This is a very small message.\n    
\n    
\n      This is large\n    
\n    
\n      This is huge\n    
\n    
\n      This is massive\n    
\n  
\n\n  
\n\n
",
      "renderSingleExtensions": false,
      "layout": "default",
      "css": "text",
      "description": "Messages alert a user to information they must immediately consider before proceeding on to the normal content of the page",
      "type": "UI Collection",
      "layoutRelativePath": "default.html.eco",
      "meta": {
        "layout": "default",
        "css": "text",
        "title": "Message",
        "description": "Messages alert a user to information they must immediately consider before proceeding on to the normal content of the page",
        "type": "UI Collection"
      }
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/documents/collections/table.html.eco",
      "relativePath": "collections/table.html.eco",
      "basename": "table",
      "outBasename": "table",
      "extension": "eco",
      "outExtension": "html",
      "extensions": [
        "html",
        "eco"
      ],
      "filename": "table.html.eco",
      "fullDirPath": "/home/jack/projects/semantic/server/documents/collections",
      "outPath": "/home/jack/projects/semantic/docs/collections/table.html",
      "outDirPath": "/home/jack/projects/semantic/docs/collections",
      "outFilename": "table.html",
      "relativeOutPath": "collections/table.html",
      "relativeDirPath": "collections",
      "relativeOutDirPath": "collections",
      "relativeBase": "collections/table",
      "relativeOutBase": "collections/table",
      "contentType": "application/octet-stream",
      "outContentType": "text/html",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": "2013-12-04T09:15:24.892Z",
      "wtime": "2013-12-04T09:15:28.619Z",
      "exists": true,
      "encoding": "utf8",
      "source": "---\nlayout      : 'default'\ncss         : 'table'\n\ntitle       : 'Table'\ndescription : 'Tables display collections of data grouped into rows'\ntype        : 'UI Collection'\n---\n\n\n<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Types\n      States\n      Variations\n    
\n  
\n\n  
Types
\n  
\n    
Table
\n    
A standard table
\n    
\n      \n      
\n        
Responsive Element
\n        
Tables are designed to be responsive. Table cells will stack when a mobile viewport size is reached.
\n      
\n    
\n    
\n      
This example uses a segment to add padding and a background color.
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
\n          
 Add User
\n        
\n  
\n\n  
States
\n\n  
\n    
Positive / Negative
\n    
A cell or row may let a user know whether a value is good or bad
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
No Name SpecifiedUnknownNone
Jimmy ApprovedNone
JamieUnknown Requires call
JillUnknownNone
\n  
\n\n  
Cells
\n  
\n    
Error
\n    
A cell or row may attention the user to an error or a negative value
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
No Name SpecifiedApprovedNone
JimmyCannot pull dataNone
JamieApproved Classified
JillApprovedNone
\n  
\n\n  
\n    
Warning
\n    
A cell or row may warn a user
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
No Name SpecifiedUnknownNone
Jimmy Requires ActionNone
JamieUnknown Hostile
JillUnknownNone
\n  
\n\n  
\n    
Active
\n    
A cell or row can be active or selected by a user
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
JamieApprovedRequires call
JohnSelectedNone
JamieApprovedRequires call
JillApprovedNone
\n  
\n  
\n    
Disabled
\n    
A cell can be disabled
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
JamieApprovedRequires call
JohnSelectedNone
JamieApprovedRequires call
JillApprovedNone
\n\n  
\n\n  
Variations
\n\n  
\n    
Celled
\n    
A table may be divided each row into separate cells
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n        \n        \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
\n  
\n\n  
\n    
Basic
\n    
A table can reduce its complexity to increase readability.
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
\n  
\n\n\n  
\n    
Even Width
\n    
A table can specify its column count to divide its content evenly
\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n          \n        \n      \n      \n        \n        \n        \n        \n        \n      \n    
NameStatusAgeGenderNotes
JohnApproved22MaleNone
JamieApproved32MaleRequires call
JillDenied22FemaleNone
3 People2 Approved
\n  
\n\n  
\n    
Column Width
\n    
A table can specify the width of individual columns independently.
\n    
Tables use a 16 column grid. This should be the total width of all elements in a column
\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n      \n        \n        \n      \n    
NameStatus
JohnApproved
JamieApproved
JillDenied
3 People2 Approved
\n  
\n\n\n  
\n    
Collapsing
\n    
By default tables take the size of their container. A collapsing takes up only as much space as its rows.
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n        \n        \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
\n  
\n\n\n  
\n    
Inverted
\n    
A tables colors can be inverted
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n        \n        \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
\n  
\n  
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n        \n        \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
\n  
\n\n  
\n    
Definition
\n    
A table may be formatted specifically to provide definitions
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n    
BehaviorArgumentsDescription
reset ratingNoneResets rating to default value
set ratingrating (integer)Sets the current star rating to specified value
\n  
\n\n  
\n    
Sortable
\n    
A table may allow a user to sort contents by clicking on a table header.
\n\n    
Adding a classname of ascending or descending to the th will show the user the direction of sort. This example uses a modified version of the kylefox's tablesort plugin to provide the proper class names.\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n        \n        \n        \n      \n    
NameStatusNotes
JohnNo ActionNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
\n  
\n  
\n    
Padded
\n    
A table may sometimes need to be more padded for legibility
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
JohnApprovedHe is a very nice guy and I enjoyed talking to him on the telephone. I hope we get to talk again.
JamieApprovedJamie was not interested in purchasing our product.
\n  
\n  
\n    
Compact
\n    
A table may sometimes need to be more compact to make more rows visible at a time
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JohnApprovedNone
JamieApprovedRequires call
JohnApprovedNone
JamieApprovedRequires call
JohnApprovedNone
JamieApprovedRequires call
\n  
\n\n  
\n    
Size
\n    
A table can also be small or large
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n        \n        \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
\n  
\n  
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n        \n        \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
\n  
\n
",
      "content": "\n\n<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Types\n      States\n      Variations\n    
\n  
\n\n  
Types
\n  
\n    
Table
\n    
A standard table
\n    
\n      \n      
\n        
Responsive Element
\n        
Tables are designed to be responsive. Table cells will stack when a mobile viewport size is reached.
\n      
\n    
\n    
\n      
This example uses a segment to add padding and a background color.
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
\n          
 Add User
\n        
\n  
\n\n  
States
\n\n  
\n    
Positive / Negative
\n    
A cell or row may let a user know whether a value is good or bad
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
No Name SpecifiedUnknownNone
Jimmy ApprovedNone
JamieUnknown Requires call
JillUnknownNone
\n  
\n\n  
Cells
\n  
\n    
Error
\n    
A cell or row may attention the user to an error or a negative value
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
No Name SpecifiedApprovedNone
JimmyCannot pull dataNone
JamieApproved Classified
JillApprovedNone
\n  
\n\n  
\n    
Warning
\n    
A cell or row may warn a user
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
No Name SpecifiedUnknownNone
Jimmy Requires ActionNone
JamieUnknown Hostile
JillUnknownNone
\n  
\n\n  
\n    
Active
\n    
A cell or row can be active or selected by a user
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
JamieApprovedRequires call
JohnSelectedNone
JamieApprovedRequires call
JillApprovedNone
\n  
\n  
\n    
Disabled
\n    
A cell can be disabled
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
JamieApprovedRequires call
JohnSelectedNone
JamieApprovedRequires call
JillApprovedNone
\n\n  
\n\n  
Variations
\n\n  
\n    
Celled
\n    
A table may be divided each row into separate cells
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n        \n        \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
\n  
\n\n  
\n    
Basic
\n    
A table can reduce its complexity to increase readability.
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
\n  
\n\n\n  
\n    
Even Width
\n    
A table can specify its column count to divide its content evenly
\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n          \n        \n      \n      \n        \n        \n        \n        \n        \n      \n    
NameStatusAgeGenderNotes
JohnApproved22MaleNone
JamieApproved32MaleRequires call
JillDenied22FemaleNone
3 People2 Approved
\n  
\n\n  
\n    
Column Width
\n    
A table can specify the width of individual columns independently.
\n    
Tables use a 16 column grid. This should be the total width of all elements in a column
\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n      \n        \n        \n      \n    
NameStatus
JohnApproved
JamieApproved
JillDenied
3 People2 Approved
\n  
\n\n\n  
\n    
Collapsing
\n    
By default tables take the size of their container. A collapsing takes up only as much space as its rows.
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n        \n        \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
\n  
\n\n\n  
\n    
Inverted
\n    
A tables colors can be inverted
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n        \n        \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
\n  
\n  
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n        \n        \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
\n  
\n\n  
\n    
Definition
\n    
A table may be formatted specifically to provide definitions
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n    
BehaviorArgumentsDescription
reset ratingNoneResets rating to default value
set ratingrating (integer)Sets the current star rating to specified value
\n  
\n\n  
\n    
Sortable
\n    
A table may allow a user to sort contents by clicking on a table header.
\n\n    
Adding a classname of ascending or descending to the th will show the user the direction of sort. This example uses a modified version of the kylefox's tablesort plugin to provide the proper class names.\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n        \n        \n        \n      \n    
NameStatusNotes
JohnNo ActionNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
\n  
\n  
\n    
Padded
\n    
A table may sometimes need to be more padded for legibility
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
JohnApprovedHe is a very nice guy and I enjoyed talking to him on the telephone. I hope we get to talk again.
JamieApprovedJamie was not interested in purchasing our product.
\n  
\n  
\n    
Compact
\n    
A table may sometimes need to be more compact to make more rows visible at a time
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JohnApprovedNone
JamieApprovedRequires call
JohnApprovedNone
JamieApprovedRequires call
JohnApprovedNone
JamieApprovedRequires call
\n  
\n\n  
\n    
Size
\n    
A table can also be small or large
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n        \n        \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
\n  
\n  
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n        \n        \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
\n  
\n
",
      "tags": null,
      "render": true,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": "Table",
      "name": "table.html",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "collections-table",
      "url": "/collections/table.html",
      "urls": [
        "/collections/table.html"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": true,
      "header": "layout      : 'default'\ncss         : 'table'\n\ntitle       : 'Table'\ndescription : 'Tables display collections of data grouped into rows'\ntype        : 'UI Collection'",
      "parser": "yaml",
      "body": "\n\n<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Types\n      States\n      Variations\n    
\n  
\n\n  
Types
\n  
\n    
Table
\n    
A standard table
\n    
\n      \n      
\n        
Responsive Element
\n        
Tables are designed to be responsive. Table cells will stack when a mobile viewport size is reached.
\n      
\n    
\n    
\n      
This example uses a segment to add padding and a background color.
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
\n          
 Add User
\n        
\n  
\n\n  
States
\n\n  
\n    
Positive / Negative
\n    
A cell or row may let a user know whether a value is good or bad
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
No Name SpecifiedUnknownNone
Jimmy ApprovedNone
JamieUnknown Requires call
JillUnknownNone
\n  
\n\n  
Cells
\n  
\n    
Error
\n    
A cell or row may attention the user to an error or a negative value
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
No Name SpecifiedApprovedNone
JimmyCannot pull dataNone
JamieApproved Classified
JillApprovedNone
\n  
\n\n  
\n    
Warning
\n    
A cell or row may warn a user
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
No Name SpecifiedUnknownNone
Jimmy Requires ActionNone
JamieUnknown Hostile
JillUnknownNone
\n  
\n\n  
\n    
Active
\n    
A cell or row can be active or selected by a user
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
JamieApprovedRequires call
JohnSelectedNone
JamieApprovedRequires call
JillApprovedNone
\n  
\n  
\n    
Disabled
\n    
A cell can be disabled
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
JamieApprovedRequires call
JohnSelectedNone
JamieApprovedRequires call
JillApprovedNone
\n\n  
\n\n  
Variations
\n\n  
\n    
Celled
\n    
A table may be divided each row into separate cells
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n        \n        \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
\n  
\n\n  
\n    
Basic
\n    
A table can reduce its complexity to increase readability.
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
\n  
\n\n\n  
\n    
Even Width
\n    
A table can specify its column count to divide its content evenly
\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n          \n        \n      \n      \n        \n        \n        \n        \n        \n      \n    
NameStatusAgeGenderNotes
JohnApproved22MaleNone
JamieApproved32MaleRequires call
JillDenied22FemaleNone
3 People2 Approved
\n  
\n\n  
\n    
Column Width
\n    
A table can specify the width of individual columns independently.
\n    
Tables use a 16 column grid. This should be the total width of all elements in a column
\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n      \n        \n        \n      \n    
NameStatus
JohnApproved
JamieApproved
JillDenied
3 People2 Approved
\n  
\n\n\n  
\n    
Collapsing
\n    
By default tables take the size of their container. A collapsing takes up only as much space as its rows.
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n        \n        \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
\n  
\n\n\n  
\n    
Inverted
\n    
A tables colors can be inverted
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n        \n        \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
\n  
\n  
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n        \n        \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
\n  
\n\n  
\n    
Definition
\n    
A table may be formatted specifically to provide definitions
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n    
BehaviorArgumentsDescription
reset ratingNoneResets rating to default value
set ratingrating (integer)Sets the current star rating to specified value
\n  
\n\n  
\n    
Sortable
\n    
A table may allow a user to sort contents by clicking on a table header.
\n\n    
Adding a classname of ascending or descending to the th will show the user the direction of sort. This example uses a modified version of the kylefox's tablesort plugin to provide the proper class names.\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n        \n        \n        \n      \n    
NameStatusNotes
JohnNo ActionNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
\n  
\n  
\n    
Padded
\n    
A table may sometimes need to be more padded for legibility
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
JohnApprovedHe is a very nice guy and I enjoyed talking to him on the telephone. I hope we get to talk again.
JamieApprovedJamie was not interested in purchasing our product.
\n  
\n  
\n    
Compact
\n    
A table may sometimes need to be more compact to make more rows visible at a time
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JohnApprovedNone
JamieApprovedRequires call
JohnApprovedNone
JamieApprovedRequires call
JohnApprovedNone
JamieApprovedRequires call
\n  
\n\n  
\n    
Size
\n    
A table can also be small or large
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n        \n        \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
\n  
\n  
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n        \n        \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
\n  
\n
",
      "rendered": true,
      "contentRendered": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  \n  \n  \n  \n\n  \n\n  \n  \n  Table | Semantic UI\n\n  \n  \n\n  \n\n  \n  \n  \n\n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n\n  \n  \n\n\n  
\n    \n       Close Menu\n    \n    \n       Download\n    \n    
\n      \n        Introduction\n      \n      
\n        \n          Definitions\n        \n          Overview\n        \n          Types\n        \n          Variations\n        \n          What's Different\n        \n      
\n    
\n    
\n      Project\n      
\n        \n          Contributing\n        \n          Set-up\n        \n      
\n    
\n    
\n      Elements\n      
\n        \n          Button\n        \n          Divider\n        \n          Header\n        \n          Icon\n        \n          Image\n        \n          Input\n        \n          Label\n        \n          Loader\n        \n          Progress\n        \n          Reveal\n        \n          Segment\n        \n          Step\n        \n      
\n    
\n    
\n      Collections\n      
\n        \n          Breadcrumb\n        \n          Form\n        \n          Grid\n        \n          Menu\n        \n          Message\n        \n          Table\n        \n      
\n    
\n    
\n      Views\n      
\n        \n          Comment\n        \n          Feed\n        \n          Item\n        \n          List\n        \n      
\n    
\n    
\n      Modules\n      
\n        \n          Accordion\n        \n          Checkbox\n        \n          Dimmer\n        \n          Dropdown\n        \n          Modal\n        \n          Popup\n        \n          Rating\n        \n          Shape\n        \n          Sidebar\n        \n          Transition\n        \n      
\n    
\n    
\n      Behavior\n      
\n        \n          Form Validation\n        \n      
\n    
\n    
\n      Style Guide\n      
\n        \n          CSS\n        \n          Javascript\n        \n          Language\n        \n      
\n    
\n\n  
\n\n  
\n    
\n       Content\n      
\n        UI Collection: Table\n      
\n      \n      \n      \n      
\n        6 of 6\n        
\n          \n            
\n              1. Breadcrumb\n            
\n          \n            
\n              2. Form\n            
\n          \n            
\n              3. Grid\n            
\n          \n            
\n              4. Menu\n            
\n          \n            
\n              5. Message\n            
\n          \n            
\n              6. Table\n            
\n          \n        
\n      
\n      \n      
\n      \n      
\n        \n        
\n          \n        
\n        \n        \n\n        \n          \n        \n        \n          \n        \n        \n        \n          \n        \n        \n      
\n    
\n  
\n    
\n      \n      Menu\n    
\n  \n\n\n\n
\n  
\n    
\n\n      
\n        Table\n        \n      
\n\n      
Tables display collections of data grouped into rows
\n      \n      
\n        Definition Mode\n        \n      
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n\n
\n\n  
\n    
\n      Types\n      States\n      Variations\n    
\n  
\n\n  
Types
\n  
\n    
Table
\n    
A standard table
\n    
\n      \n      
\n        
Responsive Element
\n        
Tables are designed to be responsive. Table cells will stack when a mobile viewport size is reached.
\n      
\n    
\n    
\n      
This example uses a segment to add padding and a background color.
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
\n          
 Add User
\n        
\n  
\n\n  
States
\n\n  
\n    
Positive / Negative
\n    
A cell or row may let a user know whether a value is good or bad
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
No Name SpecifiedUnknownNone
Jimmy ApprovedNone
JamieUnknown Requires call
JillUnknownNone
\n  
\n\n  
Cells
\n  
\n    
Error
\n    
A cell or row may attention the user to an error or a negative value
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
No Name SpecifiedApprovedNone
JimmyCannot pull dataNone
JamieApproved Classified
JillApprovedNone
\n  
\n\n  
\n    
Warning
\n    
A cell or row may warn a user
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
No Name SpecifiedUnknownNone
Jimmy Requires ActionNone
JamieUnknown Hostile
JillUnknownNone
\n  
\n\n  
\n    
Active
\n    
A cell or row can be active or selected by a user
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
JamieApprovedRequires call
JohnSelectedNone
JamieApprovedRequires call
JillApprovedNone
\n  
\n  
\n    
Disabled
\n    
A cell can be disabled
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
JamieApprovedRequires call
JohnSelectedNone
JamieApprovedRequires call
JillApprovedNone
\n\n  
\n\n  
Variations
\n\n  
\n    
Celled
\n    
A table may be divided each row into separate cells
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n        \n        \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
\n  
\n\n  
\n    
Basic
\n    
A table can reduce its complexity to increase readability.
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
\n  
\n\n\n  
\n    
Even Width
\n    
A table can specify its column count to divide its content evenly
\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n          \n        \n      \n      \n        \n        \n        \n        \n        \n      \n    
NameStatusAgeGenderNotes
JohnApproved22MaleNone
JamieApproved32MaleRequires call
JillDenied22FemaleNone
3 People2 Approved
\n  
\n\n  
\n    
Column Width
\n    
A table can specify the width of individual columns independently.
\n    
Tables use a 16 column grid. This should be the total width of all elements in a column
\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n      \n        \n        \n      \n    
NameStatus
JohnApproved
JamieApproved
JillDenied
3 People2 Approved
\n  
\n\n\n  
\n    
Collapsing
\n    
By default tables take the size of their container. A collapsing takes up only as much space as its rows.
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n        \n        \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
\n  
\n\n\n  
\n    
Inverted
\n    
A tables colors can be inverted
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n        \n        \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
\n  
\n  
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n        \n        \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
\n  
\n\n  
\n    
Definition
\n    
A table may be formatted specifically to provide definitions
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n    
BehaviorArgumentsDescription
reset ratingNoneResets rating to default value
set ratingrating (integer)Sets the current star rating to specified value
\n  
\n\n  
\n    
Sortable
\n    
A table may allow a user to sort contents by clicking on a table header.
\n\n    
Adding a classname of ascending or descending to the th will show the user the direction of sort. This example uses a modified version of the kylefox's tablesort plugin to provide the proper class names.\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n        \n        \n        \n      \n    
NameStatusNotes
JohnNo ActionNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
\n  
\n  
\n    
Padded
\n    
A table may sometimes need to be more padded for legibility
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
JohnApprovedHe is a very nice guy and I enjoyed talking to him on the telephone. I hope we get to talk again.
JamieApprovedJamie was not interested in purchasing our product.
\n  
\n  
\n    
Compact
\n    
A table may sometimes need to be more compact to make more rows visible at a time
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JohnApprovedNone
JamieApprovedRequires call
JohnApprovedNone
JamieApprovedRequires call
JohnApprovedNone
JamieApprovedRequires call
\n  
\n\n  
\n    
Size
\n    
A table can also be small or large
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n        \n        \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
\n  
\n  
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n        \n        \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
\n  
\n
\n\n\n",
      "contentRenderedWithoutLayouts": "\n\n\n\n
\n  
\n    
\n\n      
\n        Table\n        \n      
\n\n      
Tables display collections of data grouped into rows
\n      \n      
\n        Definition Mode\n        \n      
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n\n
\n\n  
\n    
\n      Types\n      States\n      Variations\n    
\n  
\n\n  
Types
\n  
\n    
Table
\n    
A standard table
\n    
\n      \n      
\n        
Responsive Element
\n        
Tables are designed to be responsive. Table cells will stack when a mobile viewport size is reached.
\n      
\n    
\n    
\n      
This example uses a segment to add padding and a background color.
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
\n          
 Add User
\n        
\n  
\n\n  
States
\n\n  
\n    
Positive / Negative
\n    
A cell or row may let a user know whether a value is good or bad
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
No Name SpecifiedUnknownNone
Jimmy ApprovedNone
JamieUnknown Requires call
JillUnknownNone
\n  
\n\n  
Cells
\n  
\n    
Error
\n    
A cell or row may attention the user to an error or a negative value
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
No Name SpecifiedApprovedNone
JimmyCannot pull dataNone
JamieApproved Classified
JillApprovedNone
\n  
\n\n  
\n    
Warning
\n    
A cell or row may warn a user
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
No Name SpecifiedUnknownNone
Jimmy Requires ActionNone
JamieUnknown Hostile
JillUnknownNone
\n  
\n\n  
\n    
Active
\n    
A cell or row can be active or selected by a user
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
JamieApprovedRequires call
JohnSelectedNone
JamieApprovedRequires call
JillApprovedNone
\n  
\n  
\n    
Disabled
\n    
A cell can be disabled
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
JamieApprovedRequires call
JohnSelectedNone
JamieApprovedRequires call
JillApprovedNone
\n\n  
\n\n  
Variations
\n\n  
\n    
Celled
\n    
A table may be divided each row into separate cells
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n        \n        \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
\n  
\n\n  
\n    
Basic
\n    
A table can reduce its complexity to increase readability.
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
\n  
\n\n\n  
\n    
Even Width
\n    
A table can specify its column count to divide its content evenly
\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n          \n        \n      \n      \n        \n        \n        \n        \n        \n      \n    
NameStatusAgeGenderNotes
JohnApproved22MaleNone
JamieApproved32MaleRequires call
JillDenied22FemaleNone
3 People2 Approved
\n  
\n\n  
\n    
Column Width
\n    
A table can specify the width of individual columns independently.
\n    
Tables use a 16 column grid. This should be the total width of all elements in a column
\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n      \n        \n        \n      \n    
NameStatus
JohnApproved
JamieApproved
JillDenied
3 People2 Approved
\n  
\n\n\n  
\n    
Collapsing
\n    
By default tables take the size of their container. A collapsing takes up only as much space as its rows.
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n        \n        \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
\n  
\n\n\n  
\n    
Inverted
\n    
A tables colors can be inverted
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n        \n        \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
\n  
\n  
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n        \n        \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
\n  
\n\n  
\n    
Definition
\n    
A table may be formatted specifically to provide definitions
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n    
BehaviorArgumentsDescription
reset ratingNoneResets rating to default value
set ratingrating (integer)Sets the current star rating to specified value
\n  
\n\n  
\n    
Sortable
\n    
A table may allow a user to sort contents by clicking on a table header.
\n\n    
Adding a classname of ascending or descending to the th will show the user the direction of sort. This example uses a modified version of the kylefox's tablesort plugin to provide the proper class names.\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n        \n        \n        \n      \n    
NameStatusNotes
JohnNo ActionNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
\n  
\n  
\n    
Padded
\n    
A table may sometimes need to be more padded for legibility
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
JohnApprovedHe is a very nice guy and I enjoyed talking to him on the telephone. I hope we get to talk again.
JamieApprovedJamie was not interested in purchasing our product.
\n  
\n  
\n    
Compact
\n    
A table may sometimes need to be more compact to make more rows visible at a time
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JohnApprovedNone
JamieApprovedRequires call
JohnApprovedNone
JamieApprovedRequires call
JohnApprovedNone
JamieApprovedRequires call
\n  
\n\n  
\n    
Size
\n    
A table can also be small or large
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n        \n        \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
\n  
\n  
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n        \n        \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
\n  
\n
",
      "renderSingleExtensions": false,
      "layout": "default",
      "css": "table",
      "description": "Tables display collections of data grouped into rows",
      "type": "UI Collection",
      "layoutRelativePath": "default.html.eco",
      "meta": {
        "layout": "default",
        "css": "table",
        "title": "Table",
        "description": "Tables display collections of data grouped into rows",
        "type": "UI Collection"
      }
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/documents/elements/button.html.eco",
      "relativePath": "elements/button.html.eco",
      "basename": "button",
      "outBasename": "button",
      "extension": "eco",
      "outExtension": "html",
      "extensions": [
        "html",
        "eco"
      ],
      "filename": "button.html.eco",
      "fullDirPath": "/home/jack/projects/semantic/server/documents/elements",
      "outPath": "/home/jack/projects/semantic/docs/elements/button.html",
      "outDirPath": "/home/jack/projects/semantic/docs/elements",
      "outFilename": "button.html",
      "relativeOutPath": "elements/button.html",
      "relativeDirPath": "elements",
      "relativeOutDirPath": "elements",
      "relativeBase": "elements/button",
      "relativeOutBase": "elements/button",
      "contentType": "application/octet-stream",
      "outContentType": "text/html",
      "ctime": "2013-12-04T07:18:24.000Z",
      "mtime": "2013-12-04T07:18:24.000Z",
      "rtime": "2013-12-04T09:15:24.953Z",
      "wtime": "2013-12-04T09:15:28.621Z",
      "exists": true,
      "encoding": "utf8",
      "source": "---\nlayout      : 'default'\ncss         : 'button'\ntitle       : 'Button'\ndescription : 'Buttons indicate a possible user action.'\ntype        : 'UI Element'\n---\n\n\n<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Types\n      Groups\n      States\n      Variations\n    
\n  
\n  
Types
\n\n  
\n    
Button
\n    
A standard button
\n    
\n      Follow\n    
\n  
\n\n  
\n    
Animated
\n    
A button can animate to show hidden content
\n    
The button will be automatically sized according to the visible content size. Make sure there is enough room for the hidden content to show
\n    
\n      
Next
\n      
\n        \n      
\n    
\n    
\n      
Shop
\n      
\n        \n      
\n    
\n    
\n      
Sign-up for a Pro account
\n      
\n        $12.99 a month\n      
\n    
\n\n  
\n\n\n  
\n    
Icon
\n    
A button can have only an icon
\n    
\n      \n    
\n  
\n\n  
\n    
Labeled Icon
\n    
A button can have an icon and a label
\n    
\n      \n      Pause\n    
\n    
\n      \n      Next\n    
\n  
\n  
Groups
\n\n  
\n    
Buttons
\n    
Buttons can exist together as a group
\n    
\n      
One
\n      
Two
\n      
Three
\n    
\n  
\n\n  
\n    
Icons
\n    
Button groups can show groups of icons
\n    
\n      
\n      
\n      
\n      
\n    
\n    
\n      
\n      
\n      
\n    
\n  
\n\n\n  
\n    
Conditionals
\n    
Button groups can be separated by conditionals
\n    
\n      
Cancel
\n      
\n      
Save
\n    
\n  
\n\n  
States
\n\n  
\n    
Hover
\n    
A button can change to show a user has hovered their mouse
\n    
\n      Follow\n    
\n  
\n\n  
\n    
Down
\n    
A button can change when pressed using touch or mouse events
\n    
\n      \n      Follow\n    
\n  
\n\n  
\n    
Active
\n    
A button can show it is currently the active user selection
\n    
\n      \n      Follow\n    
\n  
\n\n  
\n    
Disabled
\n    
A button can show it is currently unable to be interacted with
\n    
\n      \n      Followed\n    
\n  
\n\n  
\n    
Loading
\n    
A button can show a loading indicator
\n    
Loading Button
\n  
\n\n  
Variations
\n\n\n  
\n    
Social
\n    
A button can be formatted to link to a social website
\n    
\n      \n      Facebook\n    
\n    
\n      \n      Twitter\n    
\n    
\n      \n      Google Plus\n    
\n    
\n      \n      LinkedIn\n    
\n    
\n      \n      Instagram\n    
\n    
\n      \n      YouTube\n    
\n  
\n\n\n  
\n    
Sizes
\n    
A button can have different sizes:
\n    
\n      Mini\n    
\n    
\n      Tiny\n    
\n    
\n      Small\n    
\n    
\n      Medium\n    
\n    
\n      Large\n    
\n    
\n      Big\n    
\n    
\n      Huge\n    
\n    
\n      Massive\n    
\n  
\n\n  
\n    
Ordinality
\n    
A button can be formatted to show different levels of emphasis
\n    
\n      Add to Cart\n    
\n    
\n      Save\n    
\n  
\n\n  
\n    
Basic
\n    
A basic button removes all unnecessary formatting
\n    
\n      \n      Add Friend\n    
\n  
\n  
\n    
\n      
\n        \n        Change Language\n      
\n    
\n  
\n\n  
\n    
Colors
\n    
A button can have different colors:
\n    Black Button\n    Green BUtton\n    Red Button\n    Blue Button\n  
\n  
\n    Purple Button\n    Teal Button\n    Orange Button\n  
\n\n  
\n    
Toggle
\n    
A button can be formatted to toggle on and off
\n    
\n      Vote\n    
\n  
\n\n  
\n    
Feedback
\n    
A button can be positive or negative:
\n    
Positive Button
\n    
Negative Button
\n  
\n\n  
\n    
Fluid
\n    
A button can fit parent container:
\n    
Fits container
\n  
\n\n  
\n    
Circular
\n    
A button can be circular:
\n    
Rounded
\n    
\n      
\n  
\n\n  
\n    
Vertically Attached
\n    
A button can be attached to the top or bottom of other content
\n    
Top
\n    
\n    
Bottom
\n  
\n\n  
\n    
Horizontally Attached
\n    
A button can be attached to the left or right of other content
\n    
Left
\n    
Right
\n  
\n\n\n  
Group Variations
\n\n  
\n    
Vertical
\n    
Groups can be formatted to appear vertically
\n    
\n      
Top
\n      
Middle
\n      
Bottom
\n    
\n  
\n\n  
\n    
Icon
\n    
Groups can be formatted as icons
\n    
\n      
\n        \n      
\n      
\n        \n      
\n      
\n        \n      
\n    
\n  
\n\n  
\n    
Labeled Icon
\n    
Groups can be formatted as labeled icons
\n    
\n      
\n        \n        Pause\n      
\n      
\n        \n        Play\n      
\n      
\n        \n        Shuffle\n      
\n    
\n  
\n\n\n  
\n    
Fluid
\n    
Groups can be divided evenly to fit parent
\n    
Evenly divided elements can either use the number or the word, i.e. 2 or \"two\"
\n    
\n      
One
\n      
Two
\n      
Three
\n    
\n    
\n    
\n      
One
\n      
Two
\n      
Three
\n      
Four
\n      
Five
\n    
\n    
\n    
\n      
\n      
\n      
\n      
\n      
\n      
\n      
\n      
\n      
\n      
\n      
\n      
\n    
\n  
\n\n\n  
\n    
Colors
\n    
Groups can have a shared color
\n    
\n      
One
\n      
Two
\n      
Three
\n    
\n  
\n\n  
\n    
Basic
\n    
A button group can be formatted to remove extra formatting
\n    
\n      
One
\n      
Two
\n      
Three
\n    
\n  
\n\n  
\n    
Sizes
\n    
Groups can have a shared size
\n    
\n      
One
\n      
Two
\n      
Three
\n    
\n    
\n      
One
\n      
Two
\n      
Three
\n    
\n  
\n  
\n    
\n      
\n      
\n      
\n      
\n    
\n    
\n      
\n      
\n      
\n      
\n    
\n  
\n  
\n    
\n      
One
\n      
\n      
Two
\n    
\n    
\n      
One
\n      
\n      
Two
\n    
\n  
\n  
\n    
\n      
One
\n      
\n      
Two
\n    
\n    
\n      
One
\n      
\n      
Two
\n    
\n  
\n\n
",
      "content": "\n\n<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Types\n      Groups\n      States\n      Variations\n    
\n  
\n  
Types
\n\n  
\n    
Button
\n    
A standard button
\n    
\n      Follow\n    
\n  
\n\n  
\n    
Animated
\n    
A button can animate to show hidden content
\n    
The button will be automatically sized according to the visible content size. Make sure there is enough room for the hidden content to show
\n    
\n      
Next
\n      
\n        \n      
\n    
\n    
\n      
Shop
\n      
\n        \n      
\n    
\n    
\n      
Sign-up for a Pro account
\n      
\n        $12.99 a month\n      
\n    
\n\n  
\n\n\n  
\n    
Icon
\n    
A button can have only an icon
\n    
\n      \n    
\n  
\n\n  
\n    
Labeled Icon
\n    
A button can have an icon and a label
\n    
\n      \n      Pause\n    
\n    
\n      \n      Next\n    
\n  
\n  
Groups
\n\n  
\n    
Buttons
\n    
Buttons can exist together as a group
\n    
\n      
One
\n      
Two
\n      
Three
\n    
\n  
\n\n  
\n    
Icons
\n    
Button groups can show groups of icons
\n    
\n      
\n      
\n      
\n      
\n    
\n    
\n      
\n      
\n      
\n    
\n  
\n\n\n  
\n    
Conditionals
\n    
Button groups can be separated by conditionals
\n    
\n      
Cancel
\n      
\n      
Save
\n    
\n  
\n\n  
States
\n\n  
\n    
Hover
\n    
A button can change to show a user has hovered their mouse
\n    
\n      Follow\n    
\n  
\n\n  
\n    
Down
\n    
A button can change when pressed using touch or mouse events
\n    
\n      \n      Follow\n    
\n  
\n\n  
\n    
Active
\n    
A button can show it is currently the active user selection
\n    
\n      \n      Follow\n    
\n  
\n\n  
\n    
Disabled
\n    
A button can show it is currently unable to be interacted with
\n    
\n      \n      Followed\n    
\n  
\n\n  
\n    
Loading
\n    
A button can show a loading indicator
\n    
Loading Button
\n  
\n\n  
Variations
\n\n\n  
\n    
Social
\n    
A button can be formatted to link to a social website
\n    
\n      \n      Facebook\n    
\n    
\n      \n      Twitter\n    
\n    
\n      \n      Google Plus\n    
\n    
\n      \n      LinkedIn\n    
\n    
\n      \n      Instagram\n    
\n    
\n      \n      YouTube\n    
\n  
\n\n\n  
\n    
Sizes
\n    
A button can have different sizes:
\n    
\n      Mini\n    
\n    
\n      Tiny\n    
\n    
\n      Small\n    
\n    
\n      Medium\n    
\n    
\n      Large\n    
\n    
\n      Big\n    
\n    
\n      Huge\n    
\n    
\n      Massive\n    
\n  
\n\n  
\n    
Ordinality
\n    
A button can be formatted to show different levels of emphasis
\n    
\n      Add to Cart\n    
\n    
\n      Save\n    
\n  
\n\n  
\n    
Basic
\n    
A basic button removes all unnecessary formatting
\n    
\n      \n      Add Friend\n    
\n  
\n  
\n    
\n      
\n        \n        Change Language\n      
\n    
\n  
\n\n  
\n    
Colors
\n    
A button can have different colors:
\n    Black Button\n    Green BUtton\n    Red Button\n    Blue Button\n  
\n  
\n    Purple Button\n    Teal Button\n    Orange Button\n  
\n\n  
\n    
Toggle
\n    
A button can be formatted to toggle on and off
\n    
\n      Vote\n    
\n  
\n\n  
\n    
Feedback
\n    
A button can be positive or negative:
\n    
Positive Button
\n    
Negative Button
\n  
\n\n  
\n    
Fluid
\n    
A button can fit parent container:
\n    
Fits container
\n  
\n\n  
\n    
Circular
\n    
A button can be circular:
\n    
Rounded
\n    
\n      
\n  
\n\n  
\n    
Vertically Attached
\n    
A button can be attached to the top or bottom of other content
\n    
Top
\n    
\n    
Bottom
\n  
\n\n  
\n    
Horizontally Attached
\n    
A button can be attached to the left or right of other content
\n    
Left
\n    
Right
\n  
\n\n\n  
Group Variations
\n\n  
\n    
Vertical
\n    
Groups can be formatted to appear vertically
\n    
\n      
Top
\n      
Middle
\n      
Bottom
\n    
\n  
\n\n  
\n    
Icon
\n    
Groups can be formatted as icons
\n    
\n      
\n        \n      
\n      
\n        \n      
\n      
\n        \n      
\n    
\n  
\n\n  
\n    
Labeled Icon
\n    
Groups can be formatted as labeled icons
\n    
\n      
\n        \n        Pause\n      
\n      
\n        \n        Play\n      
\n      
\n        \n        Shuffle\n      
\n    
\n  
\n\n\n  
\n    
Fluid
\n    
Groups can be divided evenly to fit parent
\n    
Evenly divided elements can either use the number or the word, i.e. 2 or \"two\"
\n    
\n      
One
\n      
Two
\n      
Three
\n    
\n    
\n    
\n      
One
\n      
Two
\n      
Three
\n      
Four
\n      
Five
\n    
\n    
\n    
\n      
\n      
\n      
\n      
\n      
\n      
\n      
\n      
\n      
\n      
\n      
\n      
\n    
\n  
\n\n\n  
\n    
Colors
\n    
Groups can have a shared color
\n    
\n      
One
\n      
Two
\n      
Three
\n    
\n  
\n\n  
\n    
Basic
\n    
A button group can be formatted to remove extra formatting
\n    
\n      
One
\n      
Two
\n      
Three
\n    
\n  
\n\n  
\n    
Sizes
\n    
Groups can have a shared size
\n    
\n      
One
\n      
Two
\n      
Three
\n    
\n    
\n      
One
\n      
Two
\n      
Three
\n    
\n  
\n  
\n    
\n      
\n      
\n      
\n      
\n    
\n    
\n      
\n      
\n      
\n      
\n    
\n  
\n  
\n    
\n      
One
\n      
\n      
Two
\n    
\n    
\n      
One
\n      
\n      
Two
\n    
\n  
\n  
\n    
\n      
One
\n      
\n      
Two
\n    
\n    
\n      
One
\n      
\n      
Two
\n    
\n  
\n\n
",
      "tags": null,
      "render": true,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": "Button",
      "name": "button.html",
      "date": "2013-12-04T07:18:24.000Z",
      "slug": "elements-button",
      "url": "/elements/button.html",
      "urls": [
        "/elements/button.html"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": true,
      "header": "layout      : 'default'\ncss         : 'button'\ntitle       : 'Button'\ndescription : 'Buttons indicate a possible user action.'\ntype        : 'UI Element'",
      "parser": "yaml",
      "body": "\n\n<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Types\n      Groups\n      States\n      Variations\n    
\n  
\n  
Types
\n\n  
\n    
Button
\n    
A standard button
\n    
\n      Follow\n    
\n  
\n\n  
\n    
Animated
\n    
A button can animate to show hidden content
\n    
The button will be automatically sized according to the visible content size. Make sure there is enough room for the hidden content to show
\n    
\n      
Next
\n      
\n        \n      
\n    
\n    
\n      
Shop
\n      
\n        \n      
\n    
\n    
\n      
Sign-up for a Pro account
\n      
\n        $12.99 a month\n      
\n    
\n\n  
\n\n\n  
\n    
Icon
\n    
A button can have only an icon
\n    
\n      \n    
\n  
\n\n  
\n    
Labeled Icon
\n    
A button can have an icon and a label
\n    
\n      \n      Pause\n    
\n    
\n      \n      Next\n    
\n  
\n  
Groups
\n\n  
\n    
Buttons
\n    
Buttons can exist together as a group
\n    
\n      
One
\n      
Two
\n      
Three
\n    
\n  
\n\n  
\n    
Icons
\n    
Button groups can show groups of icons
\n    
\n      
\n      
\n      
\n      
\n    
\n    
\n      
\n      
\n      
\n    
\n  
\n\n\n  
\n    
Conditionals
\n    
Button groups can be separated by conditionals
\n    
\n      
Cancel
\n      
\n      
Save
\n    
\n  
\n\n  
States
\n\n  
\n    
Hover
\n    
A button can change to show a user has hovered their mouse
\n    
\n      Follow\n    
\n  
\n\n  
\n    
Down
\n    
A button can change when pressed using touch or mouse events
\n    
\n      \n      Follow\n    
\n  
\n\n  
\n    
Active
\n    
A button can show it is currently the active user selection
\n    
\n      \n      Follow\n    
\n  
\n\n  
\n    
Disabled
\n    
A button can show it is currently unable to be interacted with
\n    
\n      \n      Followed\n    
\n  
\n\n  
\n    
Loading
\n    
A button can show a loading indicator
\n    
Loading Button
\n  
\n\n  
Variations
\n\n\n  
\n    
Social
\n    
A button can be formatted to link to a social website
\n    
\n      \n      Facebook\n    
\n    
\n      \n      Twitter\n    
\n    
\n      \n      Google Plus\n    
\n    
\n      \n      LinkedIn\n    
\n    
\n      \n      Instagram\n    
\n    
\n      \n      YouTube\n    
\n  
\n\n\n  
\n    
Sizes
\n    
A button can have different sizes:
\n    
\n      Mini\n    
\n    
\n      Tiny\n    
\n    
\n      Small\n    
\n    
\n      Medium\n    
\n    
\n      Large\n    
\n    
\n      Big\n    
\n    
\n      Huge\n    
\n    
\n      Massive\n    
\n  
\n\n  
\n    
Ordinality
\n    
A button can be formatted to show different levels of emphasis
\n    
\n      Add to Cart\n    
\n    
\n      Save\n    
\n  
\n\n  
\n    
Basic
\n    
A basic button removes all unnecessary formatting
\n    
\n      \n      Add Friend\n    
\n  
\n  
\n    
\n      
\n        \n        Change Language\n      
\n    
\n  
\n\n  
\n    
Colors
\n    
A button can have different colors:
\n    Black Button\n    Green BUtton\n    Red Button\n    Blue Button\n  
\n  
\n    Purple Button\n    Teal Button\n    Orange Button\n  
\n\n  
\n    
Toggle
\n    
A button can be formatted to toggle on and off
\n    
\n      Vote\n    
\n  
\n\n  
\n    
Feedback
\n    
A button can be positive or negative:
\n    
Positive Button
\n    
Negative Button
\n  
\n\n  
\n    
Fluid
\n    
A button can fit parent container:
\n    
Fits container
\n  
\n\n  
\n    
Circular
\n    
A button can be circular:
\n    
Rounded
\n    
\n      
\n  
\n\n  
\n    
Vertically Attached
\n    
A button can be attached to the top or bottom of other content
\n    
Top
\n    
\n    
Bottom
\n  
\n\n  
\n    
Horizontally Attached
\n    
A button can be attached to the left or right of other content
\n    
Left
\n    
Right
\n  
\n\n\n  
Group Variations
\n\n  
\n    
Vertical
\n    
Groups can be formatted to appear vertically
\n    
\n      
Top
\n      
Middle
\n      
Bottom
\n    
\n  
\n\n  
\n    
Icon
\n    
Groups can be formatted as icons
\n    
\n      
\n        \n      
\n      
\n        \n      
\n      
\n        \n      
\n    
\n  
\n\n  
\n    
Labeled Icon
\n    
Groups can be formatted as labeled icons
\n    
\n      
\n        \n        Pause\n      
\n      
\n        \n        Play\n      
\n      
\n        \n        Shuffle\n      
\n    
\n  
\n\n\n  
\n    
Fluid
\n    
Groups can be divided evenly to fit parent
\n    
Evenly divided elements can either use the number or the word, i.e. 2 or \"two\"
\n    
\n      
One
\n      
Two
\n      
Three
\n    
\n    
\n    
\n      
One
\n      
Two
\n      
Three
\n      
Four
\n      
Five
\n    
\n    
\n    
\n      
\n      
\n      
\n      
\n      
\n      
\n      
\n      
\n      
\n      
\n      
\n      
\n    
\n  
\n\n\n  
\n    
Colors
\n    
Groups can have a shared color
\n    
\n      
One
\n      
Two
\n      
Three
\n    
\n  
\n\n  
\n    
Basic
\n    
A button group can be formatted to remove extra formatting
\n    
\n      
One
\n      
Two
\n      
Three
\n    
\n  
\n\n  
\n    
Sizes
\n    
Groups can have a shared size
\n    
\n      
One
\n      
Two
\n      
Three
\n    
\n    
\n      
One
\n      
Two
\n      
Three
\n    
\n  
\n  
\n    
\n      
\n      
\n      
\n      
\n    
\n    
\n      
\n      
\n      
\n      
\n    
\n  
\n  
\n    
\n      
One
\n      
\n      
Two
\n    
\n    
\n      
One
\n      
\n      
Two
\n    
\n  
\n  
\n    
\n      
One
\n      
\n      
Two
\n    
\n    
\n      
One
\n      
\n      
Two
\n    
\n  
\n\n
",
      "rendered": true,
      "contentRendered": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  \n  \n  \n  \n\n  \n\n  \n  \n  Button | Semantic UI\n\n  \n  \n\n  \n\n  \n  \n  \n\n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n\n  \n  \n\n\n  
\n    \n       Close Menu\n    \n    \n       Download\n    \n    
\n      \n        Introduction\n      \n      
\n        \n          Definitions\n        \n          Overview\n        \n          Types\n        \n          Variations\n        \n          What's Different\n        \n      
\n    
\n    
\n      Project\n      
\n        \n          Contributing\n        \n          Set-up\n        \n      
\n    
\n    
\n      Elements\n      
\n        \n          Button\n        \n          Divider\n        \n          Header\n        \n          Icon\n        \n          Image\n        \n          Input\n        \n          Label\n        \n          Loader\n        \n          Progress\n        \n          Reveal\n        \n          Segment\n        \n          Step\n        \n      
\n    
\n    
\n      Collections\n      
\n        \n          Breadcrumb\n        \n          Form\n        \n          Grid\n        \n          Menu\n        \n          Message\n        \n          Table\n        \n      
\n    
\n    
\n      Views\n      
\n        \n          Comment\n        \n          Feed\n        \n          Item\n        \n          List\n        \n      
\n    
\n    
\n      Modules\n      
\n        \n          Accordion\n        \n          Checkbox\n        \n          Dimmer\n        \n          Dropdown\n        \n          Modal\n        \n          Popup\n        \n          Rating\n        \n          Shape\n        \n          Sidebar\n        \n          Transition\n        \n      
\n    
\n    
\n      Behavior\n      
\n        \n          Form Validation\n        \n      
\n    
\n    
\n      Style Guide\n      
\n        \n          CSS\n        \n          Javascript\n        \n          Language\n        \n      
\n    
\n\n  
\n\n  
\n    
\n       Content\n      
\n        UI Element: Button\n      
\n      \n      
\n      \n      
\n        1 of 12\n        
\n          \n            
\n              1. Button\n            
\n          \n            
\n              2. Divider\n            
\n          \n            
\n              3. Header\n            
\n          \n            
\n              4. Icon\n            
\n          \n            
\n              5. Image\n            
\n          \n            
\n              6. Input\n            
\n          \n            
\n              7. Label\n            
\n          \n            
\n              8. Loader\n            
\n          \n            
\n              9. Progress\n            
\n          \n            
\n              10. Reveal\n            
\n          \n            
\n              11. Segment\n            
\n          \n            
\n              12. Step\n            
\n          \n        
\n      
\n      \n      \n      \n      
\n        \n        
\n          \n        
\n        \n        \n\n        \n          \n        \n        \n          \n        \n        \n        \n          \n        \n        \n      
\n    
\n  
\n    
\n      \n      Menu\n    
\n  \n\n\n\n
\n  
\n    
\n\n      
\n        Button\n        \n      
\n\n      
Buttons indicate a possible user action.
\n      \n      
\n        Definition Mode\n        \n      
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n\n
\n\n  
\n    
\n      Types\n      Groups\n      States\n      Variations\n    
\n  
\n  
Types
\n\n  
\n    
Button
\n    
A standard button
\n    
\n      Follow\n    
\n  
\n\n  
\n    
Animated
\n    
A button can animate to show hidden content
\n    
The button will be automatically sized according to the visible content size. Make sure there is enough room for the hidden content to show
\n    
\n      
Next
\n      
\n        \n      
\n    
\n    
\n      
Shop
\n      
\n        \n      
\n    
\n    
\n      
Sign-up for a Pro account
\n      
\n        $12.99 a month\n      
\n    
\n\n  
\n\n\n  
\n    
Icon
\n    
A button can have only an icon
\n    
\n      \n    
\n  
\n\n  
\n    
Labeled Icon
\n    
A button can have an icon and a label
\n    
\n      \n      Pause\n    
\n    
\n      \n      Next\n    
\n  
\n  
Groups
\n\n  
\n    
Buttons
\n    
Buttons can exist together as a group
\n    
\n      
One
\n      
Two
\n      
Three
\n    
\n  
\n\n  
\n    
Icons
\n    
Button groups can show groups of icons
\n    
\n      
\n      
\n      
\n      
\n    
\n    
\n      
\n      
\n      
\n    
\n  
\n\n\n  
\n    
Conditionals
\n    
Button groups can be separated by conditionals
\n    
\n      
Cancel
\n      
\n      
Save
\n    
\n  
\n\n  
States
\n\n  
\n    
Hover
\n    
A button can change to show a user has hovered their mouse
\n    
\n      Follow\n    
\n  
\n\n  
\n    
Down
\n    
A button can change when pressed using touch or mouse events
\n    
\n      \n      Follow\n    
\n  
\n\n  
\n    
Active
\n    
A button can show it is currently the active user selection
\n    
\n      \n      Follow\n    
\n  
\n\n  
\n    
Disabled
\n    
A button can show it is currently unable to be interacted with
\n    
\n      \n      Followed\n    
\n  
\n\n  
\n    
Loading
\n    
A button can show a loading indicator
\n    
Loading Button
\n  
\n\n  
Variations
\n\n\n  
\n    
Social
\n    
A button can be formatted to link to a social website
\n    
\n      \n      Facebook\n    
\n    
\n      \n      Twitter\n    
\n    
\n      \n      Google Plus\n    
\n    
\n      \n      LinkedIn\n    
\n    
\n      \n      Instagram\n    
\n    
\n      \n      YouTube\n    
\n  
\n\n\n  
\n    
Sizes
\n    
A button can have different sizes:
\n    
\n      Mini\n    
\n    
\n      Tiny\n    
\n    
\n      Small\n    
\n    
\n      Medium\n    
\n    
\n      Large\n    
\n    
\n      Big\n    
\n    
\n      Huge\n    
\n    
\n      Massive\n    
\n  
\n\n  
\n    
Ordinality
\n    
A button can be formatted to show different levels of emphasis
\n    
\n      Add to Cart\n    
\n    
\n      Save\n    
\n  
\n\n  
\n    
Basic
\n    
A basic button removes all unnecessary formatting
\n    
\n      \n      Add Friend\n    
\n  
\n  
\n    
\n      
\n        \n        Change Language\n      
\n    
\n  
\n\n  
\n    
Colors
\n    
A button can have different colors:
\n    Black Button\n    Green BUtton\n    Red Button\n    Blue Button\n  
\n  
\n    Purple Button\n    Teal Button\n    Orange Button\n  
\n\n  
\n    
Toggle
\n    
A button can be formatted to toggle on and off
\n    
\n      Vote\n    
\n  
\n\n  
\n    
Feedback
\n    
A button can be positive or negative:
\n    
Positive Button
\n    
Negative Button
\n  
\n\n  
\n    
Fluid
\n    
A button can fit parent container:
\n    
Fits container
\n  
\n\n  
\n    
Circular
\n    
A button can be circular:
\n    
Rounded
\n    
\n      
\n  
\n\n  
\n    
Vertically Attached
\n    
A button can be attached to the top or bottom of other content
\n    
Top
\n    
\n    
Bottom
\n  
\n\n  
\n    
Horizontally Attached
\n    
A button can be attached to the left or right of other content
\n    
Left
\n    
Right
\n  
\n\n\n  
Group Variations
\n\n  
\n    
Vertical
\n    
Groups can be formatted to appear vertically
\n    
\n      
Top
\n      
Middle
\n      
Bottom
\n    
\n  
\n\n  
\n    
Icon
\n    
Groups can be formatted as icons
\n    
\n      
\n        \n      
\n      
\n        \n      
\n      
\n        \n      
\n    
\n  
\n\n  
\n    
Labeled Icon
\n    
Groups can be formatted as labeled icons
\n    
\n      
\n        \n        Pause\n      
\n      
\n        \n        Play\n      
\n      
\n        \n        Shuffle\n      
\n    
\n  
\n\n\n  
\n    
Fluid
\n    
Groups can be divided evenly to fit parent
\n    
Evenly divided elements can either use the number or the word, i.e. 2 or \"two\"
\n    
\n      
One
\n      
Two
\n      
Three
\n    
\n    
\n    
\n      
One
\n      
Two
\n      
Three
\n      
Four
\n      
Five
\n    
\n    
\n    
\n      
\n      
\n      
\n      
\n      
\n      
\n      
\n      
\n      
\n      
\n      
\n      
\n    
\n  
\n\n\n  
\n    
Colors
\n    
Groups can have a shared color
\n    
\n      
One
\n      
Two
\n      
Three
\n    
\n  
\n\n  
\n    
Basic
\n    
A button group can be formatted to remove extra formatting
\n    
\n      
One
\n      
Two
\n      
Three
\n    
\n  
\n\n  
\n    
Sizes
\n    
Groups can have a shared size
\n    
\n      
One
\n      
Two
\n      
Three
\n    
\n    
\n      
One
\n      
Two
\n      
Three
\n    
\n  
\n  
\n    
\n      
\n      
\n      
\n      
\n    
\n    
\n      
\n      
\n      
\n      
\n    
\n  
\n  
\n    
\n      
One
\n      
\n      
Two
\n    
\n    
\n      
One
\n      
\n      
Two
\n    
\n  
\n  
\n    
\n      
One
\n      
\n      
Two
\n    
\n    
\n      
One
\n      
\n      
Two
\n    
\n  
\n\n
\n\n\n",
      "contentRenderedWithoutLayouts": "\n\n\n\n
\n  
\n    
\n\n      
\n        Button\n        \n      
\n\n      
Buttons indicate a possible user action.
\n      \n      
\n        Definition Mode\n        \n      
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n\n
\n\n  
\n    
\n      Types\n      Groups\n      States\n      Variations\n    
\n  
\n  
Types
\n\n  
\n    
Button
\n    
A standard button
\n    
\n      Follow\n    
\n  
\n\n  
\n    
Animated
\n    
A button can animate to show hidden content
\n    
The button will be automatically sized according to the visible content size. Make sure there is enough room for the hidden content to show
\n    
\n      
Next
\n      
\n        \n      
\n    
\n    
\n      
Shop
\n      
\n        \n      
\n    
\n    
\n      
Sign-up for a Pro account
\n      
\n        $12.99 a month\n      
\n    
\n\n  
\n\n\n  
\n    
Icon
\n    
A button can have only an icon
\n    
\n      \n    
\n  
\n\n  
\n    
Labeled Icon
\n    
A button can have an icon and a label
\n    
\n      \n      Pause\n    
\n    
\n      \n      Next\n    
\n  
\n  
Groups
\n\n  
\n    
Buttons
\n    
Buttons can exist together as a group
\n    
\n      
One
\n      
Two
\n      
Three
\n    
\n  
\n\n  
\n    
Icons
\n    
Button groups can show groups of icons
\n    
\n      
\n      
\n      
\n      
\n    
\n    
\n      
\n      
\n      
\n    
\n  
\n\n\n  
\n    
Conditionals
\n    
Button groups can be separated by conditionals
\n    
\n      
Cancel
\n      
\n      
Save
\n    
\n  
\n\n  
States
\n\n  
\n    
Hover
\n    
A button can change to show a user has hovered their mouse
\n    
\n      Follow\n    
\n  
\n\n  
\n    
Down
\n    
A button can change when pressed using touch or mouse events
\n    
\n      \n      Follow\n    
\n  
\n\n  
\n    
Active
\n    
A button can show it is currently the active user selection
\n    
\n      \n      Follow\n    
\n  
\n\n  
\n    
Disabled
\n    
A button can show it is currently unable to be interacted with
\n    
\n      \n      Followed\n    
\n  
\n\n  
\n    
Loading
\n    
A button can show a loading indicator
\n    
Loading Button
\n  
\n\n  
Variations
\n\n\n  
\n    
Social
\n    
A button can be formatted to link to a social website
\n    
\n      \n      Facebook\n    
\n    
\n      \n      Twitter\n    
\n    
\n      \n      Google Plus\n    
\n    
\n      \n      LinkedIn\n    
\n    
\n      \n      Instagram\n    
\n    
\n      \n      YouTube\n    
\n  
\n\n\n  
\n    
Sizes
\n    
A button can have different sizes:
\n    
\n      Mini\n    
\n    
\n      Tiny\n    
\n    
\n      Small\n    
\n    
\n      Medium\n    
\n    
\n      Large\n    
\n    
\n      Big\n    
\n    
\n      Huge\n    
\n    
\n      Massive\n    
\n  
\n\n  
\n    
Ordinality
\n    
A button can be formatted to show different levels of emphasis
\n    
\n      Add to Cart\n    
\n    
\n      Save\n    
\n  
\n\n  
\n    
Basic
\n    
A basic button removes all unnecessary formatting
\n    
\n      \n      Add Friend\n    
\n  
\n  
\n    
\n      
\n        \n        Change Language\n      
\n    
\n  
\n\n  
\n    
Colors
\n    
A button can have different colors:
\n    Black Button\n    Green BUtton\n    Red Button\n    Blue Button\n  
\n  
\n    Purple Button\n    Teal Button\n    Orange Button\n  
\n\n  
\n    
Toggle
\n    
A button can be formatted to toggle on and off
\n    
\n      Vote\n    
\n  
\n\n  
\n    
Feedback
\n    
A button can be positive or negative:
\n    
Positive Button
\n    
Negative Button
\n  
\n\n  
\n    
Fluid
\n    
A button can fit parent container:
\n    
Fits container
\n  
\n\n  
\n    
Circular
\n    
A button can be circular:
\n    
Rounded
\n    
\n      
\n  
\n\n  
\n    
Vertically Attached
\n    
A button can be attached to the top or bottom of other content
\n    
Top
\n    
\n    
Bottom
\n  
\n\n  
\n    
Horizontally Attached
\n    
A button can be attached to the left or right of other content
\n    
Left
\n    
Right
\n  
\n\n\n  
Group Variations
\n\n  
\n    
Vertical
\n    
Groups can be formatted to appear vertically
\n    
\n      
Top
\n      
Middle
\n      
Bottom
\n    
\n  
\n\n  
\n    
Icon
\n    
Groups can be formatted as icons
\n    
\n      
\n        \n      
\n      
\n        \n      
\n      
\n        \n      
\n    
\n  
\n\n  
\n    
Labeled Icon
\n    
Groups can be formatted as labeled icons
\n    
\n      
\n        \n        Pause\n      
\n      
\n        \n        Play\n      
\n      
\n        \n        Shuffle\n      
\n    
\n  
\n\n\n  
\n    
Fluid
\n    
Groups can be divided evenly to fit parent
\n    
Evenly divided elements can either use the number or the word, i.e. 2 or \"two\"
\n    
\n      
One
\n      
Two
\n      
Three
\n    
\n    
\n    
\n      
One
\n      
Two
\n      
Three
\n      
Four
\n      
Five
\n    
\n    
\n    
\n      
\n      
\n      
\n      
\n      
\n      
\n      
\n      
\n      
\n      
\n      
\n      
\n    
\n  
\n\n\n  
\n    
Colors
\n    
Groups can have a shared color
\n    
\n      
One
\n      
Two
\n      
Three
\n    
\n  
\n\n  
\n    
Basic
\n    
A button group can be formatted to remove extra formatting
\n    
\n      
One
\n      
Two
\n      
Three
\n    
\n  
\n\n  
\n    
Sizes
\n    
Groups can have a shared size
\n    
\n      
One
\n      
Two
\n      
Three
\n    
\n    
\n      
One
\n      
Two
\n      
Three
\n    
\n  
\n  
\n    
\n      
\n      
\n      
\n      
\n    
\n    
\n      
\n      
\n      
\n      
\n    
\n  
\n  
\n    
\n      
One
\n      
\n      
Two
\n    
\n    
\n      
One
\n      
\n      
Two
\n    
\n  
\n  
\n    
\n      
One
\n      
\n      
Two
\n    
\n    
\n      
One
\n      
\n      
Two
\n    
\n  
\n\n
",
      "renderSingleExtensions": false,
      "layout": "default",
      "css": "button",
      "description": "Buttons indicate a possible user action.",
      "type": "UI Element",
      "layoutRelativePath": "default.html.eco",
      "meta": {
        "layout": "default",
        "css": "button",
        "title": "Button",
        "description": "Buttons indicate a possible user action.",
        "type": "UI Element"
      }
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/documents/elements/divider.html.eco",
      "relativePath": "elements/divider.html.eco",
      "basename": "divider",
      "outBasename": "divider",
      "extension": "eco",
      "outExtension": "html",
      "extensions": [
        "html",
        "eco"
      ],
      "filename": "divider.html.eco",
      "fullDirPath": "/home/jack/projects/semantic/server/documents/elements",
      "outPath": "/home/jack/projects/semantic/docs/elements/divider.html",
      "outDirPath": "/home/jack/projects/semantic/docs/elements",
      "outFilename": "divider.html",
      "relativeOutPath": "elements/divider.html",
      "relativeDirPath": "elements",
      "relativeOutDirPath": "elements",
      "relativeBase": "elements/divider",
      "relativeOutBase": "elements/divider",
      "contentType": "application/octet-stream",
      "outContentType": "text/html",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": "2013-12-04T09:15:25.020Z",
      "wtime": "2013-12-04T09:15:28.626Z",
      "exists": true,
      "encoding": "utf8",
      "source": "---\nlayout      : 'default'\ncss         : 'divider'\ntitle       : 'Divider'\ndescription : 'A divider visually segments content into separate groups'\ntype        : 'UI Element'\n---\n\n<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Types\n      Variations\n    
\n  
\n\n  
Types
\n  
\n    
Divider
\n    
A standard divider
\n    
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n  
\n\n  
\n    
Vertical Divider
\n    
A divider can segment content vertically
\n    
\n      
\n        
\n          
\n            \n            
\n              \n              \n              
\n                \n              
\n            
\n          
\n          
\n            \n            
\n              \n              \n              
\n                \n              
\n            
\n          
\n          
Login
\n        
\n      
\n      
\n        Or\n      
\n      
\n        
\n          \n          Sign Up\n        
\n      
\n    
\n  
\n\n  
\n    
Horizontal Divider
\n    
A divider can segment content horizontally
\n    
Retrieve Order
\n    
\n      
\n        \n        
\n          \n          \n        
\n      
\n      
Search
\n    
\n    
\n      Or\n    
\n    
\n      Create New Order\n      \n    
\n  
\n\n  
\n    
Icon Divider
\n    
A divider can include an icon
\n    
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n      \n    
\n    
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n  
\n\n\n  
Variations
\n\n  
\n    
Inverted
\n    
A divider can have its colors inverted
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n\n  
\n    
Fitted
\n    
A divider can be fitted, without any space above or below it.
\n    
\n      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.\n      
\n      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.\n    
\n  
\n\n  
\n    
Section
\n    
A divider can provide greater margins to divide sections of content
\n    
Section One
\n    
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
Section Two
\n    
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n  
\n\n  
\n    
Clearing
\n    
A divider can clear the contents above it
\n    
\n      
Left Header
\n      
Right Header
\n      
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n\n
\n\n\n",
      "content": "<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Types\n      Variations\n    
\n  
\n\n  
Types
\n  
\n    
Divider
\n    
A standard divider
\n    
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n  
\n\n  
\n    
Vertical Divider
\n    
A divider can segment content vertically
\n    
\n      
\n        
\n          
\n            \n            
\n              \n              \n              
\n                \n              
\n            
\n          
\n          
\n            \n            
\n              \n              \n              
\n                \n              
\n            
\n          
\n          
Login
\n        
\n      
\n      
\n        Or\n      
\n      
\n        
\n          \n          Sign Up\n        
\n      
\n    
\n  
\n\n  
\n    
Horizontal Divider
\n    
A divider can segment content horizontally
\n    
Retrieve Order
\n    
\n      
\n        \n        
\n          \n          \n        
\n      
\n      
Search
\n    
\n    
\n      Or\n    
\n    
\n      Create New Order\n      \n    
\n  
\n\n  
\n    
Icon Divider
\n    
A divider can include an icon
\n    
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n      \n    
\n    
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n  
\n\n\n  
Variations
\n\n  
\n    
Inverted
\n    
A divider can have its colors inverted
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n\n  
\n    
Fitted
\n    
A divider can be fitted, without any space above or below it.
\n    
\n      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.\n      
\n      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.\n    
\n  
\n\n  
\n    
Section
\n    
A divider can provide greater margins to divide sections of content
\n    
Section One
\n    
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
Section Two
\n    
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n  
\n\n  
\n    
Clearing
\n    
A divider can clear the contents above it
\n    
\n      
Left Header
\n      
Right Header
\n      
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n\n
\n\n\n",
      "tags": null,
      "render": true,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": "Divider",
      "name": "divider.html",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "elements-divider",
      "url": "/elements/divider.html",
      "urls": [
        "/elements/divider.html"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": true,
      "header": "layout      : 'default'\ncss         : 'divider'\ntitle       : 'Divider'\ndescription : 'A divider visually segments content into separate groups'\ntype        : 'UI Element'",
      "parser": "yaml",
      "body": "<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Types\n      Variations\n    
\n  
\n\n  
Types
\n  
\n    
Divider
\n    
A standard divider
\n    
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n  
\n\n  
\n    
Vertical Divider
\n    
A divider can segment content vertically
\n    
\n      
\n        
\n          
\n            \n            
\n              \n              \n              
\n                \n              
\n            
\n          
\n          
\n            \n            
\n              \n              \n              
\n                \n              
\n            
\n          
\n          
Login
\n        
\n      
\n      
\n        Or\n      
\n      
\n        
\n          \n          Sign Up\n        
\n      
\n    
\n  
\n\n  
\n    
Horizontal Divider
\n    
A divider can segment content horizontally
\n    
Retrieve Order
\n    
\n      
\n        \n        
\n          \n          \n        
\n      
\n      
Search
\n    
\n    
\n      Or\n    
\n    
\n      Create New Order\n      \n    
\n  
\n\n  
\n    
Icon Divider
\n    
A divider can include an icon
\n    
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n      \n    
\n    
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n  
\n\n\n  
Variations
\n\n  
\n    
Inverted
\n    
A divider can have its colors inverted
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n\n  
\n    
Fitted
\n    
A divider can be fitted, without any space above or below it.
\n    
\n      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.\n      
\n      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.\n    
\n  
\n\n  
\n    
Section
\n    
A divider can provide greater margins to divide sections of content
\n    
Section One
\n    
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
Section Two
\n    
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n  
\n\n  
\n    
Clearing
\n    
A divider can clear the contents above it
\n    
\n      
Left Header
\n      
Right Header
\n      
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n\n
\n\n\n",
      "rendered": true,
      "contentRendered": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  \n  \n  \n  \n\n  \n\n  \n  \n  Divider | Semantic UI\n\n  \n  \n\n  \n\n  \n  \n  \n\n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n\n  \n  \n\n\n  
\n    \n       Close Menu\n    \n    \n       Download\n    \n    
\n      \n        Introduction\n      \n      
\n        \n          Definitions\n        \n          Overview\n        \n          Types\n        \n          Variations\n        \n          What's Different\n        \n      
\n    
\n    
\n      Project\n      
\n        \n          Contributing\n        \n          Set-up\n        \n      
\n    
\n    
\n      Elements\n      
\n        \n          Button\n        \n          Divider\n        \n          Header\n        \n          Icon\n        \n          Image\n        \n          Input\n        \n          Label\n        \n          Loader\n        \n          Progress\n        \n          Reveal\n        \n          Segment\n        \n          Step\n        \n      
\n    
\n    
\n      Collections\n      
\n        \n          Breadcrumb\n        \n          Form\n        \n          Grid\n        \n          Menu\n        \n          Message\n        \n          Table\n        \n      
\n    
\n    
\n      Views\n      
\n        \n          Comment\n        \n          Feed\n        \n          Item\n        \n          List\n        \n      
\n    
\n    
\n      Modules\n      
\n        \n          Accordion\n        \n          Checkbox\n        \n          Dimmer\n        \n          Dropdown\n        \n          Modal\n        \n          Popup\n        \n          Rating\n        \n          Shape\n        \n          Sidebar\n        \n          Transition\n        \n      
\n    
\n    
\n      Behavior\n      
\n        \n          Form Validation\n        \n      
\n    
\n    
\n      Style Guide\n      
\n        \n          CSS\n        \n          Javascript\n        \n          Language\n        \n      
\n    
\n\n  
\n\n  
\n    
\n       Content\n      
\n        UI Element: Divider\n      
\n      \n      \n      \n      
\n        2 of 12\n        
\n          \n            
\n              1. Button\n            
\n          \n            
\n              2. Divider\n            
\n          \n            
\n              3. Header\n            
\n          \n            
\n              4. Icon\n            
\n          \n            
\n              5. Image\n            
\n          \n            
\n              6. Input\n            
\n          \n            
\n              7. Label\n            
\n          \n            
\n              8. Loader\n            
\n          \n            
\n              9. Progress\n            
\n          \n            
\n              10. Reveal\n            
\n          \n            
\n              11. Segment\n            
\n          \n            
\n              12. Step\n            
\n          \n        
\n      
\n      \n      \n      \n      
\n        \n        
\n          \n        
\n        \n        \n\n        \n          \n        \n        \n          \n        \n        \n        \n          \n        \n        \n      
\n    
\n  
\n    
\n      \n      Menu\n    
\n  \n\n
\n  
\n    
\n\n      
\n        Divider\n        \n      
\n\n      
A divider visually segments content into separate groups
\n      \n      
\n        Definition Mode\n        \n      
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n\n
\n\n  
\n    
\n      Types\n      Variations\n    
\n  
\n\n  
Types
\n  
\n    
Divider
\n    
A standard divider
\n    
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n  
\n\n  
\n    
Vertical Divider
\n    
A divider can segment content vertically
\n    
\n      
\n        
\n          
\n            \n            
\n              \n              \n              
\n                \n              
\n            
\n          
\n          
\n            \n            
\n              \n              \n              
\n                \n              
\n            
\n          
\n          
Login
\n        
\n      
\n      
\n        Or\n      
\n      
\n        
\n          \n          Sign Up\n        
\n      
\n    
\n  
\n\n  
\n    
Horizontal Divider
\n    
A divider can segment content horizontally
\n    
Retrieve Order
\n    
\n      
\n        \n        
\n          \n          \n        
\n      
\n      
Search
\n    
\n    
\n      Or\n    
\n    
\n      Create New Order\n      \n    
\n  
\n\n  
\n    
Icon Divider
\n    
A divider can include an icon
\n    
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n      \n    
\n    
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n  
\n\n\n  
Variations
\n\n  
\n    
Inverted
\n    
A divider can have its colors inverted
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n\n  
\n    
Fitted
\n    
A divider can be fitted, without any space above or below it.
\n    
\n      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.\n      
\n      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.\n    
\n  
\n\n  
\n    
Section
\n    
A divider can provide greater margins to divide sections of content
\n    
Section One
\n    
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
Section Two
\n    
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n  
\n\n  
\n    
Clearing
\n    
A divider can clear the contents above it
\n    
\n      
Left Header
\n      
Right Header
\n      
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n\n
\n\n\n\n\n\n",
      "contentRenderedWithoutLayouts": "\n\n
\n  
\n    
\n\n      
\n        Divider\n        \n      
\n\n      
A divider visually segments content into separate groups
\n      \n      
\n        Definition Mode\n        \n      
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n\n
\n\n  
\n    
\n      Types\n      Variations\n    
\n  
\n\n  
Types
\n  
\n    
Divider
\n    
A standard divider
\n    
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n  
\n\n  
\n    
Vertical Divider
\n    
A divider can segment content vertically
\n    
\n      
\n        
\n          
\n            \n            
\n              \n              \n              
\n                \n              
\n            
\n          
\n          
\n            \n            
\n              \n              \n              
\n                \n              
\n            
\n          
\n          
Login
\n        
\n      
\n      
\n        Or\n      
\n      
\n        
\n          \n          Sign Up\n        
\n      
\n    
\n  
\n\n  
\n    
Horizontal Divider
\n    
A divider can segment content horizontally
\n    
Retrieve Order
\n    
\n      
\n        \n        
\n          \n          \n        
\n      
\n      
Search
\n    
\n    
\n      Or\n    
\n    
\n      Create New Order\n      \n    
\n  
\n\n  
\n    
Icon Divider
\n    
A divider can include an icon
\n    
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n      \n    
\n    
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n  
\n\n\n  
Variations
\n\n  
\n    
Inverted
\n    
A divider can have its colors inverted
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n\n  
\n    
Fitted
\n    
A divider can be fitted, without any space above or below it.
\n    
\n      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.\n      
\n      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.\n    
\n  
\n\n  
\n    
Section
\n    
A divider can provide greater margins to divide sections of content
\n    
Section One
\n    
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
Section Two
\n    
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n  
\n\n  
\n    
Clearing
\n    
A divider can clear the contents above it
\n    
\n      
Left Header
\n      
Right Header
\n      
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n\n
\n\n\n",
      "renderSingleExtensions": false,
      "layout": "default",
      "css": "divider",
      "description": "A divider visually segments content into separate groups",
      "type": "UI Element",
      "layoutRelativePath": "default.html.eco",
      "meta": {
        "layout": "default",
        "css": "divider",
        "title": "Divider",
        "description": "A divider visually segments content into separate groups",
        "type": "UI Element"
      }
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/documents/elements/header.html.eco",
      "relativePath": "elements/header.html.eco",
      "basename": "header",
      "outBasename": "header",
      "extension": "eco",
      "outExtension": "html",
      "extensions": [
        "html",
        "eco"
      ],
      "filename": "header.html.eco",
      "fullDirPath": "/home/jack/projects/semantic/server/documents/elements",
      "outPath": "/home/jack/projects/semantic/docs/elements/header.html",
      "outDirPath": "/home/jack/projects/semantic/docs/elements",
      "outFilename": "header.html",
      "relativeOutPath": "elements/header.html",
      "relativeDirPath": "elements",
      "relativeOutDirPath": "elements",
      "relativeBase": "elements/header",
      "relativeOutBase": "elements/header",
      "contentType": "application/octet-stream",
      "outContentType": "text/html",
      "ctime": "2013-12-04T08:59:23.000Z",
      "mtime": "2013-12-04T08:59:23.000Z",
      "rtime": "2013-12-04T09:15:25.081Z",
      "wtime": "2013-12-04T09:15:28.629Z",
      "exists": true,
      "encoding": "utf8",
      "source": "---\nlayout      : 'default'\ncss         : 'header'\ntitle       : 'Header'\ndescription : 'Headers provide a short summary of content'\ntype        : 'UI Element'\n---\n\n<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Types\n      States\n      Variations\n    
\n  
\n  
Types
\n\n  
\n    
Header
\n    
A standard header
\n    
\n      Account Settings\n    
\n  
\n\n  
\n    
Descriptive Headers
\n    
Headers may have sub headers containing further context to the section
\n    
\n      Account Settings\n      
Manage your account settings and set e-mail preferences.
\n    
\n    
\n      \n      Account Settings\n    
\n    
\n      \n      
\n        Account Settings\n        
Manage your account settings and set e-mail preferences.
\n      
\n    
\n  
\n\n  
\n    
Icon
\n    
A header can be formatted to emphasize an icon
\n    
\n      Questions\n      
Have any questions? Contact Us
\n    
\n  
\n\n\n  
\n    
Page Headings
\n    
Headers may be oriented to give the heirarchy of a section in the context of the page
\n    
Page headings size themselves relative to the base font of the entire page not the surrounding text.
\n    
\n      
First header
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
Second header
\n      
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
\n      
Third header
\n      
Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
\n      
Fourth header
\n      
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
\n      
Fifth header
\n      
Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
\n    
\n    
\n        Base Font\n        Base Font\n    
\n  
\n\n  
\n    
Content Headings
\n    
Headers may be oriented to give the importance of a section in the context of the content that surrounds it
\n    
Content headings size themselves relative to the base font of the surrounding text
\n    
\n      
Huge Header
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
Large Header
\n      
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
\n      
Medium Header
\n      
Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
\n      
Small Header
\n      
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
\n      
Tiny Header
\n      
Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
\n    
\n    
\n        Base Font\n        Base Font\n    
\n  
\n\n  
States
\n\n  
\n    
Disabled
\n    
A header can show that it is inactive
\n    
\n      Disabled Header\n    
\n  
\n\n  
Variations
\n\n  
\n    
Attached
\n    
A header can be attached to other content
\n    
\n      Sign Up For Our Site\n    
\n    
\n      
Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
\n      
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
\n    
\n    
\n      Thanks\n    
\n  
\n\n  
\n    
Floating
\n    
A header can sit to the left or right of other content
\n    
\n      
\n        Go Forward\n      
\n      
\n        Go Back\n      
\n    
\n  
\n  
\n    
Text Alignment
\n    
A header can have its text aligned to a side
\n    
\n      
\n        Right\n      
\n      
\n        Left\n      
\n      
\n        This should take up the full width even if only one line\n      
\n      
\n        Center\n      
\n    
\n  
\n\n  
\n    
Colors
\n    
A header can be formatted with different colors
\n    
\n      Black\n      
An excellent color
\n    
\n    
\n      Blue\n      
An excellent color
\n    
\n    
\n      Red\n      
An excellent color
\n    
\n    
\n      Green\n      
An excellent color
\n    
\n    
\n      Purple\n      
An excellent color
\n    
\n    
\n      Teal\n      
An excellent color
\n    
\n  
\n\n  
\n    
Dividing
\n    
A header can be formatted to divide itself from the content below it
\n    
\n      The nature of dogs\n    
\n    
Understanding how dogs behave in nature can help us to better fulfill their needs when we bring them into our homes.
\n    
When a puppy enters the world, his first pack leader is his mother. Canine moms teach rules, boundaries, and limitations from day one!
\n    
Newborn puppies don't get a name like we do. The closest thing to a personality is a dog's status within the pack. In the animal world, there are two positions: the leader and the follower.
\n  
\n\n\n  
\n    
Block
\n    
A header can be formatted to create a block
\n    
\n      Block Header\n    
\n    
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
\n  
\n\n\n  
\n    
Inverted
\n    
A header can have its colors inverted for contrast
\n    
\n      Black\n    
\n    
\n      Blue\n    
\n    
\n      Red\n    
\n    
\n      Green\n    
\n    
\n      Purple\n    
\n    
\n      Teal\n    
\n  
\n\n
",
      "content": "<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Types\n      States\n      Variations\n    
\n  
\n  
Types
\n\n  
\n    
Header
\n    
A standard header
\n    
\n      Account Settings\n    
\n  
\n\n  
\n    
Descriptive Headers
\n    
Headers may have sub headers containing further context to the section
\n    
\n      Account Settings\n      
Manage your account settings and set e-mail preferences.
\n    
\n    
\n      \n      Account Settings\n    
\n    
\n      \n      
\n        Account Settings\n        
Manage your account settings and set e-mail preferences.
\n      
\n    
\n  
\n\n  
\n    
Icon
\n    
A header can be formatted to emphasize an icon
\n    
\n      Questions\n      
Have any questions? Contact Us
\n    
\n  
\n\n\n  
\n    
Page Headings
\n    
Headers may be oriented to give the heirarchy of a section in the context of the page
\n    
Page headings size themselves relative to the base font of the entire page not the surrounding text.
\n    
\n      
First header
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
Second header
\n      
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
\n      
Third header
\n      
Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
\n      
Fourth header
\n      
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
\n      
Fifth header
\n      
Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
\n    
\n    
\n        Base Font\n        Base Font\n    
\n  
\n\n  
\n    
Content Headings
\n    
Headers may be oriented to give the importance of a section in the context of the content that surrounds it
\n    
Content headings size themselves relative to the base font of the surrounding text
\n    
\n      
Huge Header
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
Large Header
\n      
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
\n      
Medium Header
\n      
Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
\n      
Small Header
\n      
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
\n      
Tiny Header
\n      
Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
\n    
\n    
\n        Base Font\n        Base Font\n    
\n  
\n\n  
States
\n\n  
\n    
Disabled
\n    
A header can show that it is inactive
\n    
\n      Disabled Header\n    
\n  
\n\n  
Variations
\n\n  
\n    
Attached
\n    
A header can be attached to other content
\n    
\n      Sign Up For Our Site\n    
\n    
\n      
Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
\n      
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
\n    
\n    
\n      Thanks\n    
\n  
\n\n  
\n    
Floating
\n    
A header can sit to the left or right of other content
\n    
\n      
\n        Go Forward\n      
\n      
\n        Go Back\n      
\n    
\n  
\n  
\n    
Text Alignment
\n    
A header can have its text aligned to a side
\n    
\n      
\n        Right\n      
\n      
\n        Left\n      
\n      
\n        This should take up the full width even if only one line\n      
\n      
\n        Center\n      
\n    
\n  
\n\n  
\n    
Colors
\n    
A header can be formatted with different colors
\n    
\n      Black\n      
An excellent color
\n    
\n    
\n      Blue\n      
An excellent color
\n    
\n    
\n      Red\n      
An excellent color
\n    
\n    
\n      Green\n      
An excellent color
\n    
\n    
\n      Purple\n      
An excellent color
\n    
\n    
\n      Teal\n      
An excellent color
\n    
\n  
\n\n  
\n    
Dividing
\n    
A header can be formatted to divide itself from the content below it
\n    
\n      The nature of dogs\n    
\n    
Understanding how dogs behave in nature can help us to better fulfill their needs when we bring them into our homes.
\n    
When a puppy enters the world, his first pack leader is his mother. Canine moms teach rules, boundaries, and limitations from day one!
\n    
Newborn puppies don't get a name like we do. The closest thing to a personality is a dog's status within the pack. In the animal world, there are two positions: the leader and the follower.
\n  
\n\n\n  
\n    
Block
\n    
A header can be formatted to create a block
\n    
\n      Block Header\n    
\n    
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
\n  
\n\n\n  
\n    
Inverted
\n    
A header can have its colors inverted for contrast
\n    
\n      Black\n    
\n    
\n      Blue\n    
\n    
\n      Red\n    
\n    
\n      Green\n    
\n    
\n      Purple\n    
\n    
\n      Teal\n    
\n  
\n\n
",
      "tags": null,
      "render": true,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": "Header",
      "name": "header.html",
      "date": "2013-12-04T08:59:23.000Z",
      "slug": "elements-header",
      "url": "/elements/header.html",
      "urls": [
        "/elements/header.html"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": true,
      "header": "layout      : 'default'\ncss         : 'header'\ntitle       : 'Header'\ndescription : 'Headers provide a short summary of content'\ntype        : 'UI Element'",
      "parser": "yaml",
      "body": "<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Types\n      States\n      Variations\n    
\n  
\n  
Types
\n\n  
\n    
Header
\n    
A standard header
\n    
\n      Account Settings\n    
\n  
\n\n  
\n    
Descriptive Headers
\n    
Headers may have sub headers containing further context to the section
\n    
\n      Account Settings\n      
Manage your account settings and set e-mail preferences.
\n    
\n    
\n      \n      Account Settings\n    
\n    
\n      \n      
\n        Account Settings\n        
Manage your account settings and set e-mail preferences.
\n      
\n    
\n  
\n\n  
\n    
Icon
\n    
A header can be formatted to emphasize an icon
\n    
\n      Questions\n      
Have any questions? Contact Us
\n    
\n  
\n\n\n  
\n    
Page Headings
\n    
Headers may be oriented to give the heirarchy of a section in the context of the page
\n    
Page headings size themselves relative to the base font of the entire page not the surrounding text.
\n    
\n      
First header
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
Second header
\n      
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
\n      
Third header
\n      
Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
\n      
Fourth header
\n      
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
\n      
Fifth header
\n      
Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
\n    
\n    
\n        Base Font\n        Base Font\n    
\n  
\n\n  
\n    
Content Headings
\n    
Headers may be oriented to give the importance of a section in the context of the content that surrounds it
\n    
Content headings size themselves relative to the base font of the surrounding text
\n    
\n      
Huge Header
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
Large Header
\n      
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
\n      
Medium Header
\n      
Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
\n      
Small Header
\n      
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
\n      
Tiny Header
\n      
Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
\n    
\n    
\n        Base Font\n        Base Font\n    
\n  
\n\n  
States
\n\n  
\n    
Disabled
\n    
A header can show that it is inactive
\n    
\n      Disabled Header\n    
\n  
\n\n  
Variations
\n\n  
\n    
Attached
\n    
A header can be attached to other content
\n    
\n      Sign Up For Our Site\n    
\n    
\n      
Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
\n      
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
\n    
\n    
\n      Thanks\n    
\n  
\n\n  
\n    
Floating
\n    
A header can sit to the left or right of other content
\n    
\n      
\n        Go Forward\n      
\n      
\n        Go Back\n      
\n    
\n  
\n  
\n    
Text Alignment
\n    
A header can have its text aligned to a side
\n    
\n      
\n        Right\n      
\n      
\n        Left\n      
\n      
\n        This should take up the full width even if only one line\n      
\n      
\n        Center\n      
\n    
\n  
\n\n  
\n    
Colors
\n    
A header can be formatted with different colors
\n    
\n      Black\n      
An excellent color
\n    
\n    
\n      Blue\n      
An excellent color
\n    
\n    
\n      Red\n      
An excellent color
\n    
\n    
\n      Green\n      
An excellent color
\n    
\n    
\n      Purple\n      
An excellent color
\n    
\n    
\n      Teal\n      
An excellent color
\n    
\n  
\n\n  
\n    
Dividing
\n    
A header can be formatted to divide itself from the content below it
\n    
\n      The nature of dogs\n    
\n    
Understanding how dogs behave in nature can help us to better fulfill their needs when we bring them into our homes.
\n    
When a puppy enters the world, his first pack leader is his mother. Canine moms teach rules, boundaries, and limitations from day one!
\n    
Newborn puppies don't get a name like we do. The closest thing to a personality is a dog's status within the pack. In the animal world, there are two positions: the leader and the follower.
\n  
\n\n\n  
\n    
Block
\n    
A header can be formatted to create a block
\n    
\n      Block Header\n    
\n    
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
\n  
\n\n\n  
\n    
Inverted
\n    
A header can have its colors inverted for contrast
\n    
\n      Black\n    
\n    
\n      Blue\n    
\n    
\n      Red\n    
\n    
\n      Green\n    
\n    
\n      Purple\n    
\n    
\n      Teal\n    
\n  
\n\n
",
      "rendered": true,
      "contentRendered": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  \n  \n  \n  \n\n  \n\n  \n  \n  Header | Semantic UI\n\n  \n  \n\n  \n\n  \n  \n  \n\n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n\n  \n  \n\n\n  
\n    \n       Close Menu\n    \n    \n       Download\n    \n    
\n      \n        Introduction\n      \n      
\n        \n          Definitions\n        \n          Overview\n        \n          Types\n        \n          Variations\n        \n          What's Different\n        \n      
\n    
\n    
\n      Project\n      
\n        \n          Contributing\n        \n          Set-up\n        \n      
\n    
\n    
\n      Elements\n      
\n        \n          Button\n        \n          Divider\n        \n          Header\n        \n          Icon\n        \n          Image\n        \n          Input\n        \n          Label\n        \n          Loader\n        \n          Progress\n        \n          Reveal\n        \n          Segment\n        \n          Step\n        \n      
\n    
\n    
\n      Collections\n      
\n        \n          Breadcrumb\n        \n          Form\n        \n          Grid\n        \n          Menu\n        \n          Message\n        \n          Table\n        \n      
\n    
\n    
\n      Views\n      
\n        \n          Comment\n        \n          Feed\n        \n          Item\n        \n          List\n        \n      
\n    
\n    
\n      Modules\n      
\n        \n          Accordion\n        \n          Checkbox\n        \n          Dimmer\n        \n          Dropdown\n        \n          Modal\n        \n          Popup\n        \n          Rating\n        \n          Shape\n        \n          Sidebar\n        \n          Transition\n        \n      
\n    
\n    
\n      Behavior\n      
\n        \n          Form Validation\n        \n      
\n    
\n    
\n      Style Guide\n      
\n        \n          CSS\n        \n          Javascript\n        \n          Language\n        \n      
\n    
\n\n  
\n\n  
\n    
\n       Content\n      
\n        UI Element: Header\n      
\n      \n      \n      \n      
\n        3 of 12\n        
\n          \n            
\n              1. Button\n            
\n          \n            
\n              2. Divider\n            
\n          \n            
\n              3. Header\n            
\n          \n            
\n              4. Icon\n            
\n          \n            
\n              5. Image\n            
\n          \n            
\n              6. Input\n            
\n          \n            
\n              7. Label\n            
\n          \n            
\n              8. Loader\n            
\n          \n            
\n              9. Progress\n            
\n          \n            
\n              10. Reveal\n            
\n          \n            
\n              11. Segment\n            
\n          \n            
\n              12. Step\n            
\n          \n        
\n      
\n      \n      \n      \n      
\n        \n        
\n          \n        
\n        \n        \n\n        \n          \n        \n        \n          \n        \n        \n        \n          \n        \n        \n      
\n    
\n  
\n    
\n      \n      Menu\n    
\n  \n\n
\n  
\n    
\n\n      
\n        Header\n        \n      
\n\n      
Headers provide a short summary of content
\n      \n      
\n        Definition Mode\n        \n      
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n\n
\n\n  
\n    
\n      Types\n      States\n      Variations\n    
\n  
\n  
Types
\n\n  
\n    
Header
\n    
A standard header
\n    
\n      Account Settings\n    
\n  
\n\n  
\n    
Descriptive Headers
\n    
Headers may have sub headers containing further context to the section
\n    
\n      Account Settings\n      
Manage your account settings and set e-mail preferences.
\n    
\n    
\n      \n      Account Settings\n    
\n    
\n      \n      
\n        Account Settings\n        
Manage your account settings and set e-mail preferences.
\n      
\n    
\n  
\n\n  
\n    
Icon
\n    
A header can be formatted to emphasize an icon
\n    
\n      Questions\n      
Have any questions? Contact Us
\n    
\n  
\n\n\n  
\n    
Page Headings
\n    
Headers may be oriented to give the heirarchy of a section in the context of the page
\n    
Page headings size themselves relative to the base font of the entire page not the surrounding text.
\n    
\n      
First header
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
Second header
\n      
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
\n      
Third header
\n      
Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
\n      
Fourth header
\n      
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
\n      
Fifth header
\n      
Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
\n    
\n    
\n        Base Font\n        Base Font\n    
\n  
\n\n  
\n    
Content Headings
\n    
Headers may be oriented to give the importance of a section in the context of the content that surrounds it
\n    
Content headings size themselves relative to the base font of the surrounding text
\n    
\n      
Huge Header
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
Large Header
\n      
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
\n      
Medium Header
\n      
Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
\n      
Small Header
\n      
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
\n      
Tiny Header
\n      
Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
\n    
\n    
\n        Base Font\n        Base Font\n    
\n  
\n\n  
States
\n\n  
\n    
Disabled
\n    
A header can show that it is inactive
\n    
\n      Disabled Header\n    
\n  
\n\n  
Variations
\n\n  
\n    
Attached
\n    
A header can be attached to other content
\n    
\n      Sign Up For Our Site\n    
\n    
\n      
Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
\n      
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
\n    
\n    
\n      Thanks\n    
\n  
\n\n  
\n    
Floating
\n    
A header can sit to the left or right of other content
\n    
\n      
\n        Go Forward\n      
\n      
\n        Go Back\n      
\n    
\n  
\n  
\n    
Text Alignment
\n    
A header can have its text aligned to a side
\n    
\n      
\n        Right\n      
\n      
\n        Left\n      
\n      
\n        This should take up the full width even if only one line\n      
\n      
\n        Center\n      
\n    
\n  
\n\n  
\n    
Colors
\n    
A header can be formatted with different colors
\n    
\n      Black\n      
An excellent color
\n    
\n    
\n      Blue\n      
An excellent color
\n    
\n    
\n      Red\n      
An excellent color
\n    
\n    
\n      Green\n      
An excellent color
\n    
\n    
\n      Purple\n      
An excellent color
\n    
\n    
\n      Teal\n      
An excellent color
\n    
\n  
\n\n  
\n    
Dividing
\n    
A header can be formatted to divide itself from the content below it
\n    
\n      The nature of dogs\n    
\n    
Understanding how dogs behave in nature can help us to better fulfill their needs when we bring them into our homes.
\n    
When a puppy enters the world, his first pack leader is his mother. Canine moms teach rules, boundaries, and limitations from day one!
\n    
Newborn puppies don't get a name like we do. The closest thing to a personality is a dog's status within the pack. In the animal world, there are two positions: the leader and the follower.
\n  
\n\n\n  
\n    
Block
\n    
A header can be formatted to create a block
\n    
\n      Block Header\n    
\n    
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
\n  
\n\n\n  
\n    
Inverted
\n    
A header can have its colors inverted for contrast
\n    
\n      Black\n    
\n    
\n      Blue\n    
\n    
\n      Red\n    
\n    
\n      Green\n    
\n    
\n      Purple\n    
\n    
\n      Teal\n    
\n  
\n\n
\n\n\n",
      "contentRenderedWithoutLayouts": "\n\n
\n  
\n    
\n\n      
\n        Header\n        \n      
\n\n      
Headers provide a short summary of content
\n      \n      
\n        Definition Mode\n        \n      
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n\n
\n\n  
\n    
\n      Types\n      States\n      Variations\n    
\n  
\n  
Types
\n\n  
\n    
Header
\n    
A standard header
\n    
\n      Account Settings\n    
\n  
\n\n  
\n    
Descriptive Headers
\n    
Headers may have sub headers containing further context to the section
\n    
\n      Account Settings\n      
Manage your account settings and set e-mail preferences.
\n    
\n    
\n      \n      Account Settings\n    
\n    
\n      \n      
\n        Account Settings\n        
Manage your account settings and set e-mail preferences.
\n      
\n    
\n  
\n\n  
\n    
Icon
\n    
A header can be formatted to emphasize an icon
\n    
\n      Questions\n      
Have any questions? Contact Us
\n    
\n  
\n\n\n  
\n    
Page Headings
\n    
Headers may be oriented to give the heirarchy of a section in the context of the page
\n    
Page headings size themselves relative to the base font of the entire page not the surrounding text.
\n    
\n      
First header
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
Second header
\n      
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
\n      
Third header
\n      
Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
\n      
Fourth header
\n      
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
\n      
Fifth header
\n      
Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
\n    
\n    
\n        Base Font\n        Base Font\n    
\n  
\n\n  
\n    
Content Headings
\n    
Headers may be oriented to give the importance of a section in the context of the content that surrounds it
\n    
Content headings size themselves relative to the base font of the surrounding text
\n    
\n      
Huge Header
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
Large Header
\n      
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
\n      
Medium Header
\n      
Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
\n      
Small Header
\n      
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
\n      
Tiny Header
\n      
Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
\n    
\n    
\n        Base Font\n        Base Font\n    
\n  
\n\n  
States
\n\n  
\n    
Disabled
\n    
A header can show that it is inactive
\n    
\n      Disabled Header\n    
\n  
\n\n  
Variations
\n\n  
\n    
Attached
\n    
A header can be attached to other content
\n    
\n      Sign Up For Our Site\n    
\n    
\n      
Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
\n      
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
\n    
\n    
\n      Thanks\n    
\n  
\n\n  
\n    
Floating
\n    
A header can sit to the left or right of other content
\n    
\n      
\n        Go Forward\n      
\n      
\n        Go Back\n      
\n    
\n  
\n  
\n    
Text Alignment
\n    
A header can have its text aligned to a side
\n    
\n      
\n        Right\n      
\n      
\n        Left\n      
\n      
\n        This should take up the full width even if only one line\n      
\n      
\n        Center\n      
\n    
\n  
\n\n  
\n    
Colors
\n    
A header can be formatted with different colors
\n    
\n      Black\n      
An excellent color
\n    
\n    
\n      Blue\n      
An excellent color
\n    
\n    
\n      Red\n      
An excellent color
\n    
\n    
\n      Green\n      
An excellent color
\n    
\n    
\n      Purple\n      
An excellent color
\n    
\n    
\n      Teal\n      
An excellent color
\n    
\n  
\n\n  
\n    
Dividing
\n    
A header can be formatted to divide itself from the content below it
\n    
\n      The nature of dogs\n    
\n    
Understanding how dogs behave in nature can help us to better fulfill their needs when we bring them into our homes.
\n    
When a puppy enters the world, his first pack leader is his mother. Canine moms teach rules, boundaries, and limitations from day one!
\n    
Newborn puppies don't get a name like we do. The closest thing to a personality is a dog's status within the pack. In the animal world, there are two positions: the leader and the follower.
\n  
\n\n\n  
\n    
Block
\n    
A header can be formatted to create a block
\n    
\n      Block Header\n    
\n    
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
\n  
\n\n\n  
\n    
Inverted
\n    
A header can have its colors inverted for contrast
\n    
\n      Black\n    
\n    
\n      Blue\n    
\n    
\n      Red\n    
\n    
\n      Green\n    
\n    
\n      Purple\n    
\n    
\n      Teal\n    
\n  
\n\n
",
      "renderSingleExtensions": false,
      "layout": "default",
      "css": "header",
      "description": "Headers provide a short summary of content",
      "type": "UI Element",
      "layoutRelativePath": "default.html.eco",
      "meta": {
        "layout": "default",
        "css": "header",
        "title": "Header",
        "description": "Headers provide a short summary of content",
        "type": "UI Element"
      }
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/documents/elements/icon.html.eco",
      "relativePath": "elements/icon.html.eco",
      "basename": "icon",
      "outBasename": "icon",
      "extension": "eco",
      "outExtension": "html",
      "extensions": [
        "html",
        "eco"
      ],
      "filename": "icon.html.eco",
      "fullDirPath": "/home/jack/projects/semantic/server/documents/elements",
      "outPath": "/home/jack/projects/semantic/docs/elements/icon.html",
      "outDirPath": "/home/jack/projects/semantic/docs/elements",
      "outFilename": "icon.html",
      "relativeOutPath": "elements/icon.html",
      "relativeDirPath": "elements",
      "relativeOutDirPath": "elements",
      "relativeBase": "elements/icon",
      "relativeOutBase": "elements/icon",
      "contentType": "application/octet-stream",
      "outContentType": "text/html",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-03T17:44:32.000Z",
      "rtime": "2013-12-04T09:15:25.145Z",
      "wtime": "2013-12-04T09:15:28.633Z",
      "exists": true,
      "encoding": "utf8",
      "source": "---\nlayout      : 'default'\ncss         : 'icon'\ntitle       : 'Icon'\ndescription : 'An icon is a glyph used to represent another concept more simply'\ntype        : 'UI Element'\n---\n\n<%- @partial('header') %>\n\n\n
\n\n  
\n    
\n      Types\n      States\n      Variations\n    
\n  
\n\n  
Types
\n\n  
Icon Set
\n  
An icon sets contains an arbitrary number of glyphs
\n  
\n    Icons serve a very similar function to text in a page. In semantic icons receive a special tag \"i\" which allow for an abbreviated markup when sitting along-side text.\n  
\n\n  
\n    Standard\n    Basic\n  
\n\n  
\n    
Standard Icon Set
\n\n    
Semantic includes a complete port of Font Awesome designed by Dave Gandy for its standard icon set.
\n\n    
\n      
Content
\n      
Icons can represent types of web content
\n      
\n        
Archive
\n        
Attachment
\n        
Browser
\n        
Bug
\n        
Calendar
\n        
Cart
\n        
Certificate
\n        
Chat
\n        
Cloud
\n        
Code
\n        
Comment
\n        
Dashboard
\n        
Desktop
\n        
Empty Calendar
\n        
External URL
\n        
External URL Sign
\n        
File
\n        
File Outline
\n        
Folder
\n        
Open Folder
\n        
Open Folder Outline
\n        
Folder Outline
\n        
Help
\n        
Home
\n        
Inbox
\n        
Info
\n        
Info Letter
\n        
Legal
\n        
Location
\n        
Mail
\n        
Mail Outline
\n        
Map
\n        
Map Marker
\n        
Mobile
\n        
Music
\n        
Chat Outline
\n        
Comment Outline
\n        
Payment
\n        
Photo
\n        
QR Code
\n        
Question
\n        
RSS
\n        
RSS Sign
\n        
Setting
\n        
Settings
\n        
Signal
\n        
Sitemap
\n        
Table
\n        
Tablet
\n        
Tag
\n        
Tags
\n        
Tasks
\n        
Terminal
\n        
Text File
\n        
Text File Outline
\n        
Time
\n        
Trash
\n        
URL
\n        
User
\n        
Users
\n        
Video
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
User Actions
\n      
Icons can represent a possible user action
\n      
\n        
Add
\n        
Add Sign
\n        
Add Sign Box
\n        
Adjust
\n        
Empty Bookmark
\n        
Bookmark
\n        
Cloud Download
\n        
Cloud Upload
\n        
Collapse
\n        
Crop
\n        
Download Disk
\n        
Download
\n        
Edit
\n        
Edit sign
\n        
Empty Flag
\n        
Exchange
\n        
Expand
\n        
Filter
\n        
Flag
\n        
Fork Code
\n        
Forward
\n        
Fullscreen
\n        
Hide
\n        
Level Down
\n        
Level Up
\n        
Off
\n        
Refresh
\n        
Remove Circle
\n        
Remove
\n        
Remove Sign
\n        
Reorder
\n        
Reply All
\n        
Reply
\n        
Retweet
\n        
Save
\n        
Screenshot
\n        
Search
\n        
Share
\n        
Share Sign
\n        
Sign in
\n        
Sign out
\n        
Tint
\n        
Unhide
\n        
Upload Disk
\n        
Upload
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
View Actions
\n      
Icons can represent actions that modify a page view
\n      
\n        
Block Layout
\n        
Column Layout
\n        
Grid
\n        
List Layout
\n        
Resize Full
\n        
Resize Horizontal
\n        
Resize Small
\n        
Resize Vertical
\n        
Sort Alphabet Descending
\n        
Sort Alphabet Ascending
\n        
Sort Ascending
\n        
Sort Attributes Descending
\n        
Sort Attributes Ascending
\n        
Sort Descending
\n        
Sort
\n        
Sort Order Descending
\n        
Sort Order Ascending
\n        
Zoom In
\n        
Zoom Out
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
Text Actions
\n      
Icons can represent actions that modify text
\n      
\n        
Align Center
\n        
Align Justify
\n        
Align Left
\n        
Align Right
\n        
Bold
\n        
Copy
\n        
Cut
\n        
Ellipsis Horizontal
\n        
Ellipsis Vertical
\n        
Font
\n        
Indent Left
\n        
Indent Right
\n        
Italic
\n        
List
\n        
Move
\n        
Ordered List
\n        
Paste
\n        
Print
\n        
Quote left
\n        
Quote right
\n        
Strikethrough
\n        
Subscript
\n        
Superscript
\n        
Text Height
\n        
Text Width
\n        
Underline
\n        
Undo
\n        
Unlink
\n        
Unordered List
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
Media Actions
\n      
Icons can represent actions that occur on media
\n      
\n        
Backward
\n        
Eject
\n        
Fast Backward
\n        
Fast Forward
\n        
Mute
\n        
Pause
\n        
Play Circle
\n        
Play
\n        
Play Sign
\n        
Shuffle
\n        
Repeat
\n        
Step Backward
\n        
Step Forward
\n        
Stop
\n        
Unmute
\n        
Volume Down
\n        
Volume Off
\n        
Volume Up
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
Objects
\n      
Icons can represent literal objects
\n      
\n        
Ambulance
\n        
Anchor
\n        
Barcode
\n        
Lab
\n        
Beer
\n        
Bell Outline
\n        
Bolt
\n        
Book
\n        
Briefcase
\n        
Building
\n        
Bullhorn
\n        
Bullseye
\n        
Camera
\n        
Camera retro
\n        
Coffee
\n        
Doctor
\n        
Eraser
\n        
Female
\n        
Fighter Jet
\n        
Fire Extinguisher
\n        
Fire
\n        
Checkered Flag
\n        
Food
\n        
Gamepad
\n        
Gift
\n        
Glass
\n        
Globe
\n        
HDD
\n        
Headphones
\n        
Hospital
\n        
Key
\n        
Keyboard
\n        
Laptop
\n        
Leaf
\n        
Lemon
\n        
Lightbulb
\n        
Magic
\n        
Magnet
\n        
Male
\n        
Medkit
\n        
Money
\n        
Moon
\n        
Pencil
\n        
Phone
\n        
Phone Sign
\n        
Pin
\n        
Plane
\n        
Puzzle Piece
\n        
Road
\n        
Rocket
\n        
Shield
\n        
Stethoscope
\n        
Suitcase
\n        
Sun
\n        
Ticket
\n        
Trophy
\n        
Truck
\n        
Umbrella
\n        
Wrench
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n\n    
\n      
Status Indication
\n      
Icons can indicate the status of something
\n      
\n        
Ban Circle
\n        
Checkmark
\n        
Checkmark Sign
\n        
Minus Checkbox
\n        
Empty Checkbox
\n        
Checked Checkbox
\n        
Exclamation
\n        
attention
\n        
Frown
\n        
Heart Empty
\n        
Heart
\n        
Loading
\n        
Lock
\n        
Meh
\n        
OK Circle
\n        
OK Sign
\n        
Smile
\n        
Empty Star
\n        
Half Empty Star
\n        
Half Star
\n        
Star
\n        
Thumbs Down
\n        
Thumbs Down Outline
\n        
Thumbs Up
\n        
Thumbs Up Outline
\n        
Unlock Alternate
\n        
Unlock
\n        
Warning
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
Symbols
\n      
Icons can represent common symbols
\n      
\n        
Angle Down
\n        
Angle Left
\n        
Angle Right
\n        
Angle up
\n        
Arrow Box Down
\n        
Arrow Box Right
\n        
Arrow Box Up
\n        
Down
\n        
Left
\n        
Right
\n        
Up
\n        
Asterisk
\n        
Triangle Down
\n        
Triangle Left
\n        
Triangle Right
\n        
Triangle Up
\n        
Down Arrow
\n        
Left Arrow
\n        
Right Arrow
\n        
Up Arrow
\n        
Arrow Sign Down
\n        
Arrow Sign Left
\n        
Arrow Sign Right
\n        
Arrow Sign Up
\n        
Circle Arrow Left
\n        
Circle Arrow Right
\n        
Circle Arrow Up
\n        
Circle Down Arrow
\n        
Circle Blank
\n        
Circle
\n        
Double Angle Down
\n        
Double Angle Left
\n        
Double angle Right
\n        
Double Angle Up
\n        
Hand Down
\n        
Hand Left
\n        
Hand Right
\n        
Hand Up
\n        
Long Arrow Down
\n        
Long Arrow Left
\n        
Long Arrow Right
\n        
Long Arrow Up
\n        
Minus
\n        
Minus Sign Alternate
\n        
Minus sign
\n        
Sign
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
Currency
\n      
Icons can represent units of currency
\n      
\n        
US Dollar
\n        
Euro
\n        
British Pound
\n        
Rupee
\n        
Korean Won
\n        
Japanese Yen
\n        
Chinese Yuan
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
Brands
\n      
Icons can represent logos to common brands
\n      
\n        
Adn
\n        
Android
\n        
Apple
\n        
Bitbucket
\n        
Bitbucket Sign
\n        
Bitcoin
\n        
CSS3
\n        
Dribbble
\n        
Dropbox
\n        
Facebook
\n        
Facebook Sign
\n        
Facetime Video
\n        
Flickr
\n        
Foursquare
\n        
Github Alternate
\n        
Github
\n        
Github Sign
\n        
Gittip
\n        
Google Plus
\n        
Google Plus Sign
\n        
H Sign
\n        
HTML5
\n        
Instagram
\n        
Linkedin
\n        
Linkedin Sign
\n        
Linux
\n        
Maxcdn
\n        
Pinterest
\n        
Pinterest Sign
\n        
Renren
\n        
Skype
\n        
Stackexchange
\n        
Trello
\n        
Tumblr
\n        
Tumblr Sign
\n        
Twitter
\n        
Twitter Sign
\n        
Vk
\n        
Weibo
\n        
Windows
\n        
Xing
\n        
Xing Sign
\n        
YouTube
\n        
YouTube Play
\n        
YouTube Sign
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n  
\n\n  
\n\n    
Custom Icon Set
\n    
\n      
This icon set was built using a custom combination of fonts using the amazing web tool Fontello, to only include the most frequently used icons for websites. The filesize for the basic icon set is about 50% smaller than the standard icon set.
\n      
\n      
\n      
Basic.icons uses a sub-class i.basic.icon so they can be used on the same page as other icon sets. If this is your only icon set, you can safely remove the prefix.
\n    
\n\n    
\n      
Content
\n      
Icons can represent typical web content
\n      
\n        
 Attachment
\n        
 Barcode
\n        
 Bookmark
\n        
 Cart
\n        
 Chart
\n        
 Bar Chart
\n        
 Pie Chart
\n        
 Date
\n        
 Doc
\n        
 Docs
\n        
 Email
\n        
 Folder
\n        
 Open Folder
\n        
 Home
\n        
 Mail
\n        
 Photo
\n        
 Photos
\n        
 Search
\n        
 Setting
\n        
 Settings
\n        
 Tag
\n        
 Tags
\n        
 Time
\n        
 Top List
\n        
 Trash
\n        
 Community
\n        
 URL
\n        
 User
\n        
 Users
\n        
 Chat
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n    
\n      
Special Content
\n      
Icons can represent special types of web content
\n      
\n        
 Trophy
\n        
 Cloud
\n        
 Flight
\n        
 Gift
\n        
 Dollar
\n        
 Lab
\n        
 RSS
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
User Actions
\n      
Icons can represent a possible user action
\n      
\n        
 Add User
\n        
 Block
\n        
 Hide
\n        
 Unhide
\n        
 Lock
\n        
 Unlock
\n        
 Flag
\n        
 Cancel
\n        
 Close
\n        
 Delete
\n        
 Check
\n        
 Edit
\n        
 Open
\n        
 Export
\n        
 Forward
\n        
 Upload
\n        
 Like
\n        
 Dislike
\n        
 Pin
\n        
 Star
\n        
 Empty Star
\n        
 Half Star
\n        
 Print
\n        
 Comment
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
View
\n      
Icons can represent ways to modify a page view
\n      
\n        
 Content
\n        
 Grid Layout
\n        
 Block Layout
\n        
 List Layout
>\n        
 Resize Full
\n        
 Resize Horizontal
\n        
 Resize Small
\n        
 Resize Vertical
\n        
 Zoom in
\n        
 Zoom out
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n    
\n      
Media Actions
\n      
Icons can represent actions that occur on media
\n      
\n        
 Eject
\n        
 Fast-forward
\n        
 Pause
\n        
 Play
\n        
 To-start
\n        
 To-end
\n        
 Forward
\n        
 Shuffle
\n        
 Clockwise
\n        
 Counter clockwise
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n    
\n      
Objects
\n      
Icons can represent literal objects
\n      
\n        
 Book
\n        
 Calendar
\n        
 Color
\n        
 Desk globe
\n        
 Fire
\n        
 Globe
\n        
 Headphones
\n        
 Id
\n        
 Idea
\n        
 Lightning
\n        
 Money
\n        
 Paint
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n\n    
\n      
Indications
\n      
Icons can indicate the status of something
\n      
\n        
 Cancel Circle
\n        
 Asterisk
\n        
 Attention Circle
\n        
 Attention
\n        
 Empty Heart
\n        
 Heart
\n        
 Thumbs Down
\n        
 Thumbs Up
\n        
 Terminal
\n        
 Direction
\n        
 Location
\n        
 Help
\n        
 Info
\n        
 Mic
\n        
 Off
\n        
 Add
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
Symbols
\n      
Icons can represent common symbols
\n      
\n        
 Left Open
\n        
 Left Triangle
\n        
 Left
\n        
 Right
\n        
 Right Triangle
\n        
 Right Arrow
\n        
 Up
\n        
 Up Triangle
\n        
 Up Arrow
\n        
 Down Arrow
\n        
 Down Triangle
\n        
 Down Arrow
\n        
 Cube
\n        
 Minus
\n        
 Plus
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
Websites
\n      
Icons can represent logos to common websites
\n      
\n        
 Facebook
\n        
 Twitter
\n        
 Github
\n      
\n    
\n  
\n\n\n  
States
\n\n  
\n    
Disabled
\n    
An icon can show that it is disabled
\n    \n  
\n\n  
Variations
\n\n  
\n    
Size
\n    
An icon can vary in size
\n    \n    
\n    \n    
\n    \n    
\n    \n    
\n    \n  
\n\n  
\n    
Link
\n    
An icon can be formatted as a link
\n    \n    \n  
\n\n  
\n    
Flipped
\n    
An icon can be flipped
\n    \n    \n  
\n\n  
\n    
Rotated
\n    
An icon can be rotated
\n    \n    \n  
\n\n\n  
\n    
Circular
\n    
An icon can be formatted to appear circular
\n    \n    \n    \n    \n  
\n\n\n  
\n    
Square
\n    
An icon can be formatted to appear square
\n    \n    \n    \n    \n  
\n\n  
\n    
Colors
\n    
An icon can be formatted with different colors
\n    \n    \n    \n    \n    \n    \n  
\n\n  
\n    
Inverted
\n    
an icon can have its colors inverted for contrast
\n    \n    \n    \n    \n    \n    \n  
\n\n\n
",
      "content": "<%- @partial('header') %>\n\n\n
\n\n  
\n    
\n      Types\n      States\n      Variations\n    
\n  
\n\n  
Types
\n\n  
Icon Set
\n  
An icon sets contains an arbitrary number of glyphs
\n  
\n    Icons serve a very similar function to text in a page. In semantic icons receive a special tag \"i\" which allow for an abbreviated markup when sitting along-side text.\n  
\n\n  
\n    Standard\n    Basic\n  
\n\n  
\n    
Standard Icon Set
\n\n    
Semantic includes a complete port of Font Awesome designed by Dave Gandy for its standard icon set.
\n\n    
\n      
Content
\n      
Icons can represent types of web content
\n      
\n        
Archive
\n        
Attachment
\n        
Browser
\n        
Bug
\n        
Calendar
\n        
Cart
\n        
Certificate
\n        
Chat
\n        
Cloud
\n        
Code
\n        
Comment
\n        
Dashboard
\n        
Desktop
\n        
Empty Calendar
\n        
External URL
\n        
External URL Sign
\n        
File
\n        
File Outline
\n        
Folder
\n        
Open Folder
\n        
Open Folder Outline
\n        
Folder Outline
\n        
Help
\n        
Home
\n        
Inbox
\n        
Info
\n        
Info Letter
\n        
Legal
\n        
Location
\n        
Mail
\n        
Mail Outline
\n        
Map
\n        
Map Marker
\n        
Mobile
\n        
Music
\n        
Chat Outline
\n        
Comment Outline
\n        
Payment
\n        
Photo
\n        
QR Code
\n        
Question
\n        
RSS
\n        
RSS Sign
\n        
Setting
\n        
Settings
\n        
Signal
\n        
Sitemap
\n        
Table
\n        
Tablet
\n        
Tag
\n        
Tags
\n        
Tasks
\n        
Terminal
\n        
Text File
\n        
Text File Outline
\n        
Time
\n        
Trash
\n        
URL
\n        
User
\n        
Users
\n        
Video
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
User Actions
\n      
Icons can represent a possible user action
\n      
\n        
Add
\n        
Add Sign
\n        
Add Sign Box
\n        
Adjust
\n        
Empty Bookmark
\n        
Bookmark
\n        
Cloud Download
\n        
Cloud Upload
\n        
Collapse
\n        
Crop
\n        
Download Disk
\n        
Download
\n        
Edit
\n        
Edit sign
\n        
Empty Flag
\n        
Exchange
\n        
Expand
\n        
Filter
\n        
Flag
\n        
Fork Code
\n        
Forward
\n        
Fullscreen
\n        
Hide
\n        
Level Down
\n        
Level Up
\n        
Off
\n        
Refresh
\n        
Remove Circle
\n        
Remove
\n        
Remove Sign
\n        
Reorder
\n        
Reply All
\n        
Reply
\n        
Retweet
\n        
Save
\n        
Screenshot
\n        
Search
\n        
Share
\n        
Share Sign
\n        
Sign in
\n        
Sign out
\n        
Tint
\n        
Unhide
\n        
Upload Disk
\n        
Upload
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
View Actions
\n      
Icons can represent actions that modify a page view
\n      
\n        
Block Layout
\n        
Column Layout
\n        
Grid
\n        
List Layout
\n        
Resize Full
\n        
Resize Horizontal
\n        
Resize Small
\n        
Resize Vertical
\n        
Sort Alphabet Descending
\n        
Sort Alphabet Ascending
\n        
Sort Ascending
\n        
Sort Attributes Descending
\n        
Sort Attributes Ascending
\n        
Sort Descending
\n        
Sort
\n        
Sort Order Descending
\n        
Sort Order Ascending
\n        
Zoom In
\n        
Zoom Out
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
Text Actions
\n      
Icons can represent actions that modify text
\n      
\n        
Align Center
\n        
Align Justify
\n        
Align Left
\n        
Align Right
\n        
Bold
\n        
Copy
\n        
Cut
\n        
Ellipsis Horizontal
\n        
Ellipsis Vertical
\n        
Font
\n        
Indent Left
\n        
Indent Right
\n        
Italic
\n        
List
\n        
Move
\n        
Ordered List
\n        
Paste
\n        
Print
\n        
Quote left
\n        
Quote right
\n        
Strikethrough
\n        
Subscript
\n        
Superscript
\n        
Text Height
\n        
Text Width
\n        
Underline
\n        
Undo
\n        
Unlink
\n        
Unordered List
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
Media Actions
\n      
Icons can represent actions that occur on media
\n      
\n        
Backward
\n        
Eject
\n        
Fast Backward
\n        
Fast Forward
\n        
Mute
\n        
Pause
\n        
Play Circle
\n        
Play
\n        
Play Sign
\n        
Shuffle
\n        
Repeat
\n        
Step Backward
\n        
Step Forward
\n        
Stop
\n        
Unmute
\n        
Volume Down
\n        
Volume Off
\n        
Volume Up
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
Objects
\n      
Icons can represent literal objects
\n      
\n        
Ambulance
\n        
Anchor
\n        
Barcode
\n        
Lab
\n        
Beer
\n        
Bell Outline
\n        
Bolt
\n        
Book
\n        
Briefcase
\n        
Building
\n        
Bullhorn
\n        
Bullseye
\n        
Camera
\n        
Camera retro
\n        
Coffee
\n        
Doctor
\n        
Eraser
\n        
Female
\n        
Fighter Jet
\n        
Fire Extinguisher
\n        
Fire
\n        
Checkered Flag
\n        
Food
\n        
Gamepad
\n        
Gift
\n        
Glass
\n        
Globe
\n        
HDD
\n        
Headphones
\n        
Hospital
\n        
Key
\n        
Keyboard
\n        
Laptop
\n        
Leaf
\n        
Lemon
\n        
Lightbulb
\n        
Magic
\n        
Magnet
\n        
Male
\n        
Medkit
\n        
Money
\n        
Moon
\n        
Pencil
\n        
Phone
\n        
Phone Sign
\n        
Pin
\n        
Plane
\n        
Puzzle Piece
\n        
Road
\n        
Rocket
\n        
Shield
\n        
Stethoscope
\n        
Suitcase
\n        
Sun
\n        
Ticket
\n        
Trophy
\n        
Truck
\n        
Umbrella
\n        
Wrench
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n\n    
\n      
Status Indication
\n      
Icons can indicate the status of something
\n      
\n        
Ban Circle
\n        
Checkmark
\n        
Checkmark Sign
\n        
Minus Checkbox
\n        
Empty Checkbox
\n        
Checked Checkbox
\n        
Exclamation
\n        
attention
\n        
Frown
\n        
Heart Empty
\n        
Heart
\n        
Loading
\n        
Lock
\n        
Meh
\n        
OK Circle
\n        
OK Sign
\n        
Smile
\n        
Empty Star
\n        
Half Empty Star
\n        
Half Star
\n        
Star
\n        
Thumbs Down
\n        
Thumbs Down Outline
\n        
Thumbs Up
\n        
Thumbs Up Outline
\n        
Unlock Alternate
\n        
Unlock
\n        
Warning
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
Symbols
\n      
Icons can represent common symbols
\n      
\n        
Angle Down
\n        
Angle Left
\n        
Angle Right
\n        
Angle up
\n        
Arrow Box Down
\n        
Arrow Box Right
\n        
Arrow Box Up
\n        
Down
\n        
Left
\n        
Right
\n        
Up
\n        
Asterisk
\n        
Triangle Down
\n        
Triangle Left
\n        
Triangle Right
\n        
Triangle Up
\n        
Down Arrow
\n        
Left Arrow
\n        
Right Arrow
\n        
Up Arrow
\n        
Arrow Sign Down
\n        
Arrow Sign Left
\n        
Arrow Sign Right
\n        
Arrow Sign Up
\n        
Circle Arrow Left
\n        
Circle Arrow Right
\n        
Circle Arrow Up
\n        
Circle Down Arrow
\n        
Circle Blank
\n        
Circle
\n        
Double Angle Down
\n        
Double Angle Left
\n        
Double angle Right
\n        
Double Angle Up
\n        
Hand Down
\n        
Hand Left
\n        
Hand Right
\n        
Hand Up
\n        
Long Arrow Down
\n        
Long Arrow Left
\n        
Long Arrow Right
\n        
Long Arrow Up
\n        
Minus
\n        
Minus Sign Alternate
\n        
Minus sign
\n        
Sign
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
Currency
\n      
Icons can represent units of currency
\n      
\n        
US Dollar
\n        
Euro
\n        
British Pound
\n        
Rupee
\n        
Korean Won
\n        
Japanese Yen
\n        
Chinese Yuan
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
Brands
\n      
Icons can represent logos to common brands
\n      
\n        
Adn
\n        
Android
\n        
Apple
\n        
Bitbucket
\n        
Bitbucket Sign
\n        
Bitcoin
\n        
CSS3
\n        
Dribbble
\n        
Dropbox
\n        
Facebook
\n        
Facebook Sign
\n        
Facetime Video
\n        
Flickr
\n        
Foursquare
\n        
Github Alternate
\n        
Github
\n        
Github Sign
\n        
Gittip
\n        
Google Plus
\n        
Google Plus Sign
\n        
H Sign
\n        
HTML5
\n        
Instagram
\n        
Linkedin
\n        
Linkedin Sign
\n        
Linux
\n        
Maxcdn
\n        
Pinterest
\n        
Pinterest Sign
\n        
Renren
\n        
Skype
\n        
Stackexchange
\n        
Trello
\n        
Tumblr
\n        
Tumblr Sign
\n        
Twitter
\n        
Twitter Sign
\n        
Vk
\n        
Weibo
\n        
Windows
\n        
Xing
\n        
Xing Sign
\n        
YouTube
\n        
YouTube Play
\n        
YouTube Sign
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n  
\n\n  
\n\n    
Custom Icon Set
\n    
\n      
This icon set was built using a custom combination of fonts using the amazing web tool Fontello, to only include the most frequently used icons for websites. The filesize for the basic icon set is about 50% smaller than the standard icon set.
\n      
\n      
\n      
Basic.icons uses a sub-class i.basic.icon so they can be used on the same page as other icon sets. If this is your only icon set, you can safely remove the prefix.
\n    
\n\n    
\n      
Content
\n      
Icons can represent typical web content
\n      
\n        
 Attachment
\n        
 Barcode
\n        
 Bookmark
\n        
 Cart
\n        
 Chart
\n        
 Bar Chart
\n        
 Pie Chart
\n        
 Date
\n        
 Doc
\n        
 Docs
\n        
 Email
\n        
 Folder
\n        
 Open Folder
\n        
 Home
\n        
 Mail
\n        
 Photo
\n        
 Photos
\n        
 Search
\n        
 Setting
\n        
 Settings
\n        
 Tag
\n        
 Tags
\n        
 Time
\n        
 Top List
\n        
 Trash
\n        
 Community
\n        
 URL
\n        
 User
\n        
 Users
\n        
 Chat
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n    
\n      
Special Content
\n      
Icons can represent special types of web content
\n      
\n        
 Trophy
\n        
 Cloud
\n        
 Flight
\n        
 Gift
\n        
 Dollar
\n        
 Lab
\n        
 RSS
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
User Actions
\n      
Icons can represent a possible user action
\n      
\n        
 Add User
\n        
 Block
\n        
 Hide
\n        
 Unhide
\n        
 Lock
\n        
 Unlock
\n        
 Flag
\n        
 Cancel
\n        
 Close
\n        
 Delete
\n        
 Check
\n        
 Edit
\n        
 Open
\n        
 Export
\n        
 Forward
\n        
 Upload
\n        
 Like
\n        
 Dislike
\n        
 Pin
\n        
 Star
\n        
 Empty Star
\n        
 Half Star
\n        
 Print
\n        
 Comment
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
View
\n      
Icons can represent ways to modify a page view
\n      
\n        
 Content
\n        
 Grid Layout
\n        
 Block Layout
\n        
 List Layout
>\n        
 Resize Full
\n        
 Resize Horizontal
\n        
 Resize Small
\n        
 Resize Vertical
\n        
 Zoom in
\n        
 Zoom out
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n    
\n      
Media Actions
\n      
Icons can represent actions that occur on media
\n      
\n        
 Eject
\n        
 Fast-forward
\n        
 Pause
\n        
 Play
\n        
 To-start
\n        
 To-end
\n        
 Forward
\n        
 Shuffle
\n        
 Clockwise
\n        
 Counter clockwise
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n    
\n      
Objects
\n      
Icons can represent literal objects
\n      
\n        
 Book
\n        
 Calendar
\n        
 Color
\n        
 Desk globe
\n        
 Fire
\n        
 Globe
\n        
 Headphones
\n        
 Id
\n        
 Idea
\n        
 Lightning
\n        
 Money
\n        
 Paint
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n\n    
\n      
Indications
\n      
Icons can indicate the status of something
\n      
\n        
 Cancel Circle
\n        
 Asterisk
\n        
 Attention Circle
\n        
 Attention
\n        
 Empty Heart
\n        
 Heart
\n        
 Thumbs Down
\n        
 Thumbs Up
\n        
 Terminal
\n        
 Direction
\n        
 Location
\n        
 Help
\n        
 Info
\n        
 Mic
\n        
 Off
\n        
 Add
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
Symbols
\n      
Icons can represent common symbols
\n      
\n        
 Left Open
\n        
 Left Triangle
\n        
 Left
\n        
 Right
\n        
 Right Triangle
\n        
 Right Arrow
\n        
 Up
\n        
 Up Triangle
\n        
 Up Arrow
\n        
 Down Arrow
\n        
 Down Triangle
\n        
 Down Arrow
\n        
 Cube
\n        
 Minus
\n        
 Plus
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
Websites
\n      
Icons can represent logos to common websites
\n      
\n        
 Facebook
\n        
 Twitter
\n        
 Github
\n      
\n    
\n  
\n\n\n  
States
\n\n  
\n    
Disabled
\n    
An icon can show that it is disabled
\n    \n  
\n\n  
Variations
\n\n  
\n    
Size
\n    
An icon can vary in size
\n    \n    
\n    \n    
\n    \n    
\n    \n    
\n    \n  
\n\n  
\n    
Link
\n    
An icon can be formatted as a link
\n    \n    \n  
\n\n  
\n    
Flipped
\n    
An icon can be flipped
\n    \n    \n  
\n\n  
\n    
Rotated
\n    
An icon can be rotated
\n    \n    \n  
\n\n\n  
\n    
Circular
\n    
An icon can be formatted to appear circular
\n    \n    \n    \n    \n  
\n\n\n  
\n    
Square
\n    
An icon can be formatted to appear square
\n    \n    \n    \n    \n  
\n\n  
\n    
Colors
\n    
An icon can be formatted with different colors
\n    \n    \n    \n    \n    \n    \n  
\n\n  
\n    
Inverted
\n    
an icon can have its colors inverted for contrast
\n    \n    \n    \n    \n    \n    \n  
\n\n\n
",
      "tags": null,
      "render": true,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": "Icon",
      "name": "icon.html",
      "date": "2013-12-03T17:44:32.000Z",
      "slug": "elements-icon",
      "url": "/elements/icon.html",
      "urls": [
        "/elements/icon.html"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": true,
      "header": "layout      : 'default'\ncss         : 'icon'\ntitle       : 'Icon'\ndescription : 'An icon is a glyph used to represent another concept more simply'\ntype        : 'UI Element'",
      "parser": "yaml",
      "body": "<%- @partial('header') %>\n\n\n
\n\n  
\n    
\n      Types\n      States\n      Variations\n    
\n  
\n\n  
Types
\n\n  
Icon Set
\n  
An icon sets contains an arbitrary number of glyphs
\n  
\n    Icons serve a very similar function to text in a page. In semantic icons receive a special tag \"i\" which allow for an abbreviated markup when sitting along-side text.\n  
\n\n  
\n    Standard\n    Basic\n  
\n\n  
\n    
Standard Icon Set
\n\n    
Semantic includes a complete port of Font Awesome designed by Dave Gandy for its standard icon set.
\n\n    
\n      
Content
\n      
Icons can represent types of web content
\n      
\n        
Archive
\n        
Attachment
\n        
Browser
\n        
Bug
\n        
Calendar
\n        
Cart
\n        
Certificate
\n        
Chat
\n        
Cloud
\n        
Code
\n        
Comment
\n        
Dashboard
\n        
Desktop
\n        
Empty Calendar
\n        
External URL
\n        
External URL Sign
\n        
File
\n        
File Outline
\n        
Folder
\n        
Open Folder
\n        
Open Folder Outline
\n        
Folder Outline
\n        
Help
\n        
Home
\n        
Inbox
\n        
Info
\n        
Info Letter
\n        
Legal
\n        
Location
\n        
Mail
\n        
Mail Outline
\n        
Map
\n        
Map Marker
\n        
Mobile
\n        
Music
\n        
Chat Outline
\n        
Comment Outline
\n        
Payment
\n        
Photo
\n        
QR Code
\n        
Question
\n        
RSS
\n        
RSS Sign
\n        
Setting
\n        
Settings
\n        
Signal
\n        
Sitemap
\n        
Table
\n        
Tablet
\n        
Tag
\n        
Tags
\n        
Tasks
\n        
Terminal
\n        
Text File
\n        
Text File Outline
\n        
Time
\n        
Trash
\n        
URL
\n        
User
\n        
Users
\n        
Video
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
User Actions
\n      
Icons can represent a possible user action
\n      
\n        
Add
\n        
Add Sign
\n        
Add Sign Box
\n        
Adjust
\n        
Empty Bookmark
\n        
Bookmark
\n        
Cloud Download
\n        
Cloud Upload
\n        
Collapse
\n        
Crop
\n        
Download Disk
\n        
Download
\n        
Edit
\n        
Edit sign
\n        
Empty Flag
\n        
Exchange
\n        
Expand
\n        
Filter
\n        
Flag
\n        
Fork Code
\n        
Forward
\n        
Fullscreen
\n        
Hide
\n        
Level Down
\n        
Level Up
\n        
Off
\n        
Refresh
\n        
Remove Circle
\n        
Remove
\n        
Remove Sign
\n        
Reorder
\n        
Reply All
\n        
Reply
\n        
Retweet
\n        
Save
\n        
Screenshot
\n        
Search
\n        
Share
\n        
Share Sign
\n        
Sign in
\n        
Sign out
\n        
Tint
\n        
Unhide
\n        
Upload Disk
\n        
Upload
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
View Actions
\n      
Icons can represent actions that modify a page view
\n      
\n        
Block Layout
\n        
Column Layout
\n        
Grid
\n        
List Layout
\n        
Resize Full
\n        
Resize Horizontal
\n        
Resize Small
\n        
Resize Vertical
\n        
Sort Alphabet Descending
\n        
Sort Alphabet Ascending
\n        
Sort Ascending
\n        
Sort Attributes Descending
\n        
Sort Attributes Ascending
\n        
Sort Descending
\n        
Sort
\n        
Sort Order Descending
\n        
Sort Order Ascending
\n        
Zoom In
\n        
Zoom Out
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
Text Actions
\n      
Icons can represent actions that modify text
\n      
\n        
Align Center
\n        
Align Justify
\n        
Align Left
\n        
Align Right
\n        
Bold
\n        
Copy
\n        
Cut
\n        
Ellipsis Horizontal
\n        
Ellipsis Vertical
\n        
Font
\n        
Indent Left
\n        
Indent Right
\n        
Italic
\n        
List
\n        
Move
\n        
Ordered List
\n        
Paste
\n        
Print
\n        
Quote left
\n        
Quote right
\n        
Strikethrough
\n        
Subscript
\n        
Superscript
\n        
Text Height
\n        
Text Width
\n        
Underline
\n        
Undo
\n        
Unlink
\n        
Unordered List
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
Media Actions
\n      
Icons can represent actions that occur on media
\n      
\n        
Backward
\n        
Eject
\n        
Fast Backward
\n        
Fast Forward
\n        
Mute
\n        
Pause
\n        
Play Circle
\n        
Play
\n        
Play Sign
\n        
Shuffle
\n        
Repeat
\n        
Step Backward
\n        
Step Forward
\n        
Stop
\n        
Unmute
\n        
Volume Down
\n        
Volume Off
\n        
Volume Up
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
Objects
\n      
Icons can represent literal objects
\n      
\n        
Ambulance
\n        
Anchor
\n        
Barcode
\n        
Lab
\n        
Beer
\n        
Bell Outline
\n        
Bolt
\n        
Book
\n        
Briefcase
\n        
Building
\n        
Bullhorn
\n        
Bullseye
\n        
Camera
\n        
Camera retro
\n        
Coffee
\n        
Doctor
\n        
Eraser
\n        
Female
\n        
Fighter Jet
\n        
Fire Extinguisher
\n        
Fire
\n        
Checkered Flag
\n        
Food
\n        
Gamepad
\n        
Gift
\n        
Glass
\n        
Globe
\n        
HDD
\n        
Headphones
\n        
Hospital
\n        
Key
\n        
Keyboard
\n        
Laptop
\n        
Leaf
\n        
Lemon
\n        
Lightbulb
\n        
Magic
\n        
Magnet
\n        
Male
\n        
Medkit
\n        
Money
\n        
Moon
\n        
Pencil
\n        
Phone
\n        
Phone Sign
\n        
Pin
\n        
Plane
\n        
Puzzle Piece
\n        
Road
\n        
Rocket
\n        
Shield
\n        
Stethoscope
\n        
Suitcase
\n        
Sun
\n        
Ticket
\n        
Trophy
\n        
Truck
\n        
Umbrella
\n        
Wrench
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n\n    
\n      
Status Indication
\n      
Icons can indicate the status of something
\n      
\n        
Ban Circle
\n        
Checkmark
\n        
Checkmark Sign
\n        
Minus Checkbox
\n        
Empty Checkbox
\n        
Checked Checkbox
\n        
Exclamation
\n        
attention
\n        
Frown
\n        
Heart Empty
\n        
Heart
\n        
Loading
\n        
Lock
\n        
Meh
\n        
OK Circle
\n        
OK Sign
\n        
Smile
\n        
Empty Star
\n        
Half Empty Star
\n        
Half Star
\n        
Star
\n        
Thumbs Down
\n        
Thumbs Down Outline
\n        
Thumbs Up
\n        
Thumbs Up Outline
\n        
Unlock Alternate
\n        
Unlock
\n        
Warning
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
Symbols
\n      
Icons can represent common symbols
\n      
\n        
Angle Down
\n        
Angle Left
\n        
Angle Right
\n        
Angle up
\n        
Arrow Box Down
\n        
Arrow Box Right
\n        
Arrow Box Up
\n        
Down
\n        
Left
\n        
Right
\n        
Up
\n        
Asterisk
\n        
Triangle Down
\n        
Triangle Left
\n        
Triangle Right
\n        
Triangle Up
\n        
Down Arrow
\n        
Left Arrow
\n        
Right Arrow
\n        
Up Arrow
\n        
Arrow Sign Down
\n        
Arrow Sign Left
\n        
Arrow Sign Right
\n        
Arrow Sign Up
\n        
Circle Arrow Left
\n        
Circle Arrow Right
\n        
Circle Arrow Up
\n        
Circle Down Arrow
\n        
Circle Blank
\n        
Circle
\n        
Double Angle Down
\n        
Double Angle Left
\n        
Double angle Right
\n        
Double Angle Up
\n        
Hand Down
\n        
Hand Left
\n        
Hand Right
\n        
Hand Up
\n        
Long Arrow Down
\n        
Long Arrow Left
\n        
Long Arrow Right
\n        
Long Arrow Up
\n        
Minus
\n        
Minus Sign Alternate
\n        
Minus sign
\n        
Sign
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
Currency
\n      
Icons can represent units of currency
\n      
\n        
US Dollar
\n        
Euro
\n        
British Pound
\n        
Rupee
\n        
Korean Won
\n        
Japanese Yen
\n        
Chinese Yuan
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
Brands
\n      
Icons can represent logos to common brands
\n      
\n        
Adn
\n        
Android
\n        
Apple
\n        
Bitbucket
\n        
Bitbucket Sign
\n        
Bitcoin
\n        
CSS3
\n        
Dribbble
\n        
Dropbox
\n        
Facebook
\n        
Facebook Sign
\n        
Facetime Video
\n        
Flickr
\n        
Foursquare
\n        
Github Alternate
\n        
Github
\n        
Github Sign
\n        
Gittip
\n        
Google Plus
\n        
Google Plus Sign
\n        
H Sign
\n        
HTML5
\n        
Instagram
\n        
Linkedin
\n        
Linkedin Sign
\n        
Linux
\n        
Maxcdn
\n        
Pinterest
\n        
Pinterest Sign
\n        
Renren
\n        
Skype
\n        
Stackexchange
\n        
Trello
\n        
Tumblr
\n        
Tumblr Sign
\n        
Twitter
\n        
Twitter Sign
\n        
Vk
\n        
Weibo
\n        
Windows
\n        
Xing
\n        
Xing Sign
\n        
YouTube
\n        
YouTube Play
\n        
YouTube Sign
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n  
\n\n  
\n\n    
Custom Icon Set
\n    
\n      
This icon set was built using a custom combination of fonts using the amazing web tool Fontello, to only include the most frequently used icons for websites. The filesize for the basic icon set is about 50% smaller than the standard icon set.
\n      
\n      
\n      
Basic.icons uses a sub-class i.basic.icon so they can be used on the same page as other icon sets. If this is your only icon set, you can safely remove the prefix.
\n    
\n\n    
\n      
Content
\n      
Icons can represent typical web content
\n      
\n        
 Attachment
\n        
 Barcode
\n        
 Bookmark
\n        
 Cart
\n        
 Chart
\n        
 Bar Chart
\n        
 Pie Chart
\n        
 Date
\n        
 Doc
\n        
 Docs
\n        
 Email
\n        
 Folder
\n        
 Open Folder
\n        
 Home
\n        
 Mail
\n        
 Photo
\n        
 Photos
\n        
 Search
\n        
 Setting
\n        
 Settings
\n        
 Tag
\n        
 Tags
\n        
 Time
\n        
 Top List
\n        
 Trash
\n        
 Community
\n        
 URL
\n        
 User
\n        
 Users
\n        
 Chat
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n    
\n      
Special Content
\n      
Icons can represent special types of web content
\n      
\n        
 Trophy
\n        
 Cloud
\n        
 Flight
\n        
 Gift
\n        
 Dollar
\n        
 Lab
\n        
 RSS
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
User Actions
\n      
Icons can represent a possible user action
\n      
\n        
 Add User
\n        
 Block
\n        
 Hide
\n        
 Unhide
\n        
 Lock
\n        
 Unlock
\n        
 Flag
\n        
 Cancel
\n        
 Close
\n        
 Delete
\n        
 Check
\n        
 Edit
\n        
 Open
\n        
 Export
\n        
 Forward
\n        
 Upload
\n        
 Like
\n        
 Dislike
\n        
 Pin
\n        
 Star
\n        
 Empty Star
\n        
 Half Star
\n        
 Print
\n        
 Comment
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
View
\n      
Icons can represent ways to modify a page view
\n      
\n        
 Content
\n        
 Grid Layout
\n        
 Block Layout
\n        
 List Layout
>\n        
 Resize Full
\n        
 Resize Horizontal
\n        
 Resize Small
\n        
 Resize Vertical
\n        
 Zoom in
\n        
 Zoom out
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n    
\n      
Media Actions
\n      
Icons can represent actions that occur on media
\n      
\n        
 Eject
\n        
 Fast-forward
\n        
 Pause
\n        
 Play
\n        
 To-start
\n        
 To-end
\n        
 Forward
\n        
 Shuffle
\n        
 Clockwise
\n        
 Counter clockwise
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n    
\n      
Objects
\n      
Icons can represent literal objects
\n      
\n        
 Book
\n        
 Calendar
\n        
 Color
\n        
 Desk globe
\n        
 Fire
\n        
 Globe
\n        
 Headphones
\n        
 Id
\n        
 Idea
\n        
 Lightning
\n        
 Money
\n        
 Paint
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n\n    
\n      
Indications
\n      
Icons can indicate the status of something
\n      
\n        
 Cancel Circle
\n        
 Asterisk
\n        
 Attention Circle
\n        
 Attention
\n        
 Empty Heart
\n        
 Heart
\n        
 Thumbs Down
\n        
 Thumbs Up
\n        
 Terminal
\n        
 Direction
\n        
 Location
\n        
 Help
\n        
 Info
\n        
 Mic
\n        
 Off
\n        
 Add
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
Symbols
\n      
Icons can represent common symbols
\n      
\n        
 Left Open
\n        
 Left Triangle
\n        
 Left
\n        
 Right
\n        
 Right Triangle
\n        
 Right Arrow
\n        
 Up
\n        
 Up Triangle
\n        
 Up Arrow
\n        
 Down Arrow
\n        
 Down Triangle
\n        
 Down Arrow
\n        
 Cube
\n        
 Minus
\n        
 Plus
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
Websites
\n      
Icons can represent logos to common websites
\n      
\n        
 Facebook
\n        
 Twitter
\n        
 Github
\n      
\n    
\n  
\n\n\n  
States
\n\n  
\n    
Disabled
\n    
An icon can show that it is disabled
\n    \n  
\n\n  
Variations
\n\n  
\n    
Size
\n    
An icon can vary in size
\n    \n    
\n    \n    
\n    \n    
\n    \n    
\n    \n  
\n\n  
\n    
Link
\n    
An icon can be formatted as a link
\n    \n    \n  
\n\n  
\n    
Flipped
\n    
An icon can be flipped
\n    \n    \n  
\n\n  
\n    
Rotated
\n    
An icon can be rotated
\n    \n    \n  
\n\n\n  
\n    
Circular
\n    
An icon can be formatted to appear circular
\n    \n    \n    \n    \n  
\n\n\n  
\n    
Square
\n    
An icon can be formatted to appear square
\n    \n    \n    \n    \n  
\n\n  
\n    
Colors
\n    
An icon can be formatted with different colors
\n    \n    \n    \n    \n    \n    \n  
\n\n  
\n    
Inverted
\n    
an icon can have its colors inverted for contrast
\n    \n    \n    \n    \n    \n    \n  
\n\n\n
",
      "rendered": true,
      "contentRendered": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  \n  \n  \n  \n\n  \n\n  \n  \n  Icon | Semantic UI\n\n  \n  \n\n  \n\n  \n  \n  \n\n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n\n  \n  \n\n\n  
\n    \n       Close Menu\n    \n    \n       Download\n    \n    
\n      \n        Introduction\n      \n      
\n        \n          Definitions\n        \n          Overview\n        \n          Types\n        \n          Variations\n        \n          What's Different\n        \n      
\n    
\n    
\n      Project\n      
\n        \n          Contributing\n        \n          Set-up\n        \n      
\n    
\n    
\n      Elements\n      
\n        \n          Button\n        \n          Divider\n        \n          Header\n        \n          Icon\n        \n          Image\n        \n          Input\n        \n          Label\n        \n          Loader\n        \n          Progress\n        \n          Reveal\n        \n          Segment\n        \n          Step\n        \n      
\n    
\n    
\n      Collections\n      
\n        \n          Breadcrumb\n        \n          Form\n        \n          Grid\n        \n          Menu\n        \n          Message\n        \n          Table\n        \n      
\n    
\n    
\n      Views\n      
\n        \n          Comment\n        \n          Feed\n        \n          Item\n        \n          List\n        \n      
\n    
\n    
\n      Modules\n      
\n        \n          Accordion\n        \n          Checkbox\n        \n          Dimmer\n        \n          Dropdown\n        \n          Modal\n        \n          Popup\n        \n          Rating\n        \n          Shape\n        \n          Sidebar\n        \n          Transition\n        \n      
\n    
\n    
\n      Behavior\n      
\n        \n          Form Validation\n        \n      
\n    
\n    
\n      Style Guide\n      
\n        \n          CSS\n        \n          Javascript\n        \n          Language\n        \n      
\n    
\n\n  
\n\n  
\n    
\n       Content\n      
\n        UI Element: Icon\n      
\n      \n      \n      \n      
\n        4 of 12\n        
\n          \n            
\n              1. Button\n            
\n          \n            
\n              2. Divider\n            
\n          \n            
\n              3. Header\n            
\n          \n            
\n              4. Icon\n            
\n          \n            
\n              5. Image\n            
\n          \n            
\n              6. Input\n            
\n          \n            
\n              7. Label\n            
\n          \n            
\n              8. Loader\n            
\n          \n            
\n              9. Progress\n            
\n          \n            
\n              10. Reveal\n            
\n          \n            
\n              11. Segment\n            
\n          \n            
\n              12. Step\n            
\n          \n        
\n      
\n      \n      \n      \n      
\n        \n        
\n          \n        
\n        \n        \n\n        \n          \n        \n        \n          \n        \n        \n        \n          \n        \n        \n      
\n    
\n  
\n    
\n      \n      Menu\n    
\n  \n\n
\n  
\n    
\n\n      
\n        Icon\n        \n      
\n\n      
An icon is a glyph used to represent another concept more simply
\n      \n      
\n        Definition Mode\n        \n      
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n\n\n
\n\n  
\n    
\n      Types\n      States\n      Variations\n    
\n  
\n\n  
Types
\n\n  
Icon Set
\n  
An icon sets contains an arbitrary number of glyphs
\n  
\n    Icons serve a very similar function to text in a page. In semantic icons receive a special tag \"i\" which allow for an abbreviated markup when sitting along-side text.\n  
\n\n  
\n    Standard\n    Basic\n  
\n\n  
\n    
Standard Icon Set
\n\n    
Semantic includes a complete port of Font Awesome designed by Dave Gandy for its standard icon set.
\n\n    
\n      
Content
\n      
Icons can represent types of web content
\n      
\n        
Archive
\n        
Attachment
\n        
Browser
\n        
Bug
\n        
Calendar
\n        
Cart
\n        
Certificate
\n        
Chat
\n        
Cloud
\n        
Code
\n        
Comment
\n        
Dashboard
\n        
Desktop
\n        
Empty Calendar
\n        
External URL
\n        
External URL Sign
\n        
File
\n        
File Outline
\n        
Folder
\n        
Open Folder
\n        
Open Folder Outline
\n        
Folder Outline
\n        
Help
\n        
Home
\n        
Inbox
\n        
Info
\n        
Info Letter
\n        
Legal
\n        
Location
\n        
Mail
\n        
Mail Outline
\n        
Map
\n        
Map Marker
\n        
Mobile
\n        
Music
\n        
Chat Outline
\n        
Comment Outline
\n        
Payment
\n        
Photo
\n        
QR Code
\n        
Question
\n        
RSS
\n        
RSS Sign
\n        
Setting
\n        
Settings
\n        
Signal
\n        
Sitemap
\n        
Table
\n        
Tablet
\n        
Tag
\n        
Tags
\n        
Tasks
\n        
Terminal
\n        
Text File
\n        
Text File Outline
\n        
Time
\n        
Trash
\n        
URL
\n        
User
\n        
Users
\n        
Video
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
User Actions
\n      
Icons can represent a possible user action
\n      
\n        
Add
\n        
Add Sign
\n        
Add Sign Box
\n        
Adjust
\n        
Empty Bookmark
\n        
Bookmark
\n        
Cloud Download
\n        
Cloud Upload
\n        
Collapse
\n        
Crop
\n        
Download Disk
\n        
Download
\n        
Edit
\n        
Edit sign
\n        
Empty Flag
\n        
Exchange
\n        
Expand
\n        
Filter
\n        
Flag
\n        
Fork Code
\n        
Forward
\n        
Fullscreen
\n        
Hide
\n        
Level Down
\n        
Level Up
\n        
Off
\n        
Refresh
\n        
Remove Circle
\n        
Remove
\n        
Remove Sign
\n        
Reorder
\n        
Reply All
\n        
Reply
\n        
Retweet
\n        
Save
\n        
Screenshot
\n        
Search
\n        
Share
\n        
Share Sign
\n        
Sign in
\n        
Sign out
\n        
Tint
\n        
Unhide
\n        
Upload Disk
\n        
Upload
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
View Actions
\n      
Icons can represent actions that modify a page view
\n      
\n        
Block Layout
\n        
Column Layout
\n        
Grid
\n        
List Layout
\n        
Resize Full
\n        
Resize Horizontal
\n        
Resize Small
\n        
Resize Vertical
\n        
Sort Alphabet Descending
\n        
Sort Alphabet Ascending
\n        
Sort Ascending
\n        
Sort Attributes Descending
\n        
Sort Attributes Ascending
\n        
Sort Descending
\n        
Sort
\n        
Sort Order Descending
\n        
Sort Order Ascending
\n        
Zoom In
\n        
Zoom Out
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
Text Actions
\n      
Icons can represent actions that modify text
\n      
\n        
Align Center
\n        
Align Justify
\n        
Align Left
\n        
Align Right
\n        
Bold
\n        
Copy
\n        
Cut
\n        
Ellipsis Horizontal
\n        
Ellipsis Vertical
\n        
Font
\n        
Indent Left
\n        
Indent Right
\n        
Italic
\n        
List
\n        
Move
\n        
Ordered List
\n        
Paste
\n        
Print
\n        
Quote left
\n        
Quote right
\n        
Strikethrough
\n        
Subscript
\n        
Superscript
\n        
Text Height
\n        
Text Width
\n        
Underline
\n        
Undo
\n        
Unlink
\n        
Unordered List
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
Media Actions
\n      
Icons can represent actions that occur on media
\n      
\n        
Backward
\n        
Eject
\n        
Fast Backward
\n        
Fast Forward
\n        
Mute
\n        
Pause
\n        
Play Circle
\n        
Play
\n        
Play Sign
\n        
Shuffle
\n        
Repeat
\n        
Step Backward
\n        
Step Forward
\n        
Stop
\n        
Unmute
\n        
Volume Down
\n        
Volume Off
\n        
Volume Up
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
Objects
\n      
Icons can represent literal objects
\n      
\n        
Ambulance
\n        
Anchor
\n        
Barcode
\n        
Lab
\n        
Beer
\n        
Bell Outline
\n        
Bolt
\n        
Book
\n        
Briefcase
\n        
Building
\n        
Bullhorn
\n        
Bullseye
\n        
Camera
\n        
Camera retro
\n        
Coffee
\n        
Doctor
\n        
Eraser
\n        
Female
\n        
Fighter Jet
\n        
Fire Extinguisher
\n        
Fire
\n        
Checkered Flag
\n        
Food
\n        
Gamepad
\n        
Gift
\n        
Glass
\n        
Globe
\n        
HDD
\n        
Headphones
\n        
Hospital
\n        
Key
\n        
Keyboard
\n        
Laptop
\n        
Leaf
\n        
Lemon
\n        
Lightbulb
\n        
Magic
\n        
Magnet
\n        
Male
\n        
Medkit
\n        
Money
\n        
Moon
\n        
Pencil
\n        
Phone
\n        
Phone Sign
\n        
Pin
\n        
Plane
\n        
Puzzle Piece
\n        
Road
\n        
Rocket
\n        
Shield
\n        
Stethoscope
\n        
Suitcase
\n        
Sun
\n        
Ticket
\n        
Trophy
\n        
Truck
\n        
Umbrella
\n        
Wrench
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n\n    
\n      
Status Indication
\n      
Icons can indicate the status of something
\n      
\n        
Ban Circle
\n        
Checkmark
\n        
Checkmark Sign
\n        
Minus Checkbox
\n        
Empty Checkbox
\n        
Checked Checkbox
\n        
Exclamation
\n        
attention
\n        
Frown
\n        
Heart Empty
\n        
Heart
\n        
Loading
\n        
Lock
\n        
Meh
\n        
OK Circle
\n        
OK Sign
\n        
Smile
\n        
Empty Star
\n        
Half Empty Star
\n        
Half Star
\n        
Star
\n        
Thumbs Down
\n        
Thumbs Down Outline
\n        
Thumbs Up
\n        
Thumbs Up Outline
\n        
Unlock Alternate
\n        
Unlock
\n        
Warning
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
Symbols
\n      
Icons can represent common symbols
\n      
\n        
Angle Down
\n        
Angle Left
\n        
Angle Right
\n        
Angle up
\n        
Arrow Box Down
\n        
Arrow Box Right
\n        
Arrow Box Up
\n        
Down
\n        
Left
\n        
Right
\n        
Up
\n        
Asterisk
\n        
Triangle Down
\n        
Triangle Left
\n        
Triangle Right
\n        
Triangle Up
\n        
Down Arrow
\n        
Left Arrow
\n        
Right Arrow
\n        
Up Arrow
\n        
Arrow Sign Down
\n        
Arrow Sign Left
\n        
Arrow Sign Right
\n        
Arrow Sign Up
\n        
Circle Arrow Left
\n        
Circle Arrow Right
\n        
Circle Arrow Up
\n        
Circle Down Arrow
\n        
Circle Blank
\n        
Circle
\n        
Double Angle Down
\n        
Double Angle Left
\n        
Double angle Right
\n        
Double Angle Up
\n        
Hand Down
\n        
Hand Left
\n        
Hand Right
\n        
Hand Up
\n        
Long Arrow Down
\n        
Long Arrow Left
\n        
Long Arrow Right
\n        
Long Arrow Up
\n        
Minus
\n        
Minus Sign Alternate
\n        
Minus sign
\n        
Sign
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
Currency
\n      
Icons can represent units of currency
\n      
\n        
US Dollar
\n        
Euro
\n        
British Pound
\n        
Rupee
\n        
Korean Won
\n        
Japanese Yen
\n        
Chinese Yuan
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
Brands
\n      
Icons can represent logos to common brands
\n      
\n        
Adn
\n        
Android
\n        
Apple
\n        
Bitbucket
\n        
Bitbucket Sign
\n        
Bitcoin
\n        
CSS3
\n        
Dribbble
\n        
Dropbox
\n        
Facebook
\n        
Facebook Sign
\n        
Facetime Video
\n        
Flickr
\n        
Foursquare
\n        
Github Alternate
\n        
Github
\n        
Github Sign
\n        
Gittip
\n        
Google Plus
\n        
Google Plus Sign
\n        
H Sign
\n        
HTML5
\n        
Instagram
\n        
Linkedin
\n        
Linkedin Sign
\n        
Linux
\n        
Maxcdn
\n        
Pinterest
\n        
Pinterest Sign
\n        
Renren
\n        
Skype
\n        
Stackexchange
\n        
Trello
\n        
Tumblr
\n        
Tumblr Sign
\n        
Twitter
\n        
Twitter Sign
\n        
Vk
\n        
Weibo
\n        
Windows
\n        
Xing
\n        
Xing Sign
\n        
YouTube
\n        
YouTube Play
\n        
YouTube Sign
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n  
\n\n  
\n\n    
Custom Icon Set
\n    
\n      
This icon set was built using a custom combination of fonts using the amazing web tool Fontello, to only include the most frequently used icons for websites. The filesize for the basic icon set is about 50% smaller than the standard icon set.
\n      
\n      
\n      
Basic.icons uses a sub-class i.basic.icon so they can be used on the same page as other icon sets. If this is your only icon set, you can safely remove the prefix.
\n    
\n\n    
\n      
Content
\n      
Icons can represent typical web content
\n      
\n        
 Attachment
\n        
 Barcode
\n        
 Bookmark
\n        
 Cart
\n        
 Chart
\n        
 Bar Chart
\n        
 Pie Chart
\n        
 Date
\n        
 Doc
\n        
 Docs
\n        
 Email
\n        
 Folder
\n        
 Open Folder
\n        
 Home
\n        
 Mail
\n        
 Photo
\n        
 Photos
\n        
 Search
\n        
 Setting
\n        
 Settings
\n        
 Tag
\n        
 Tags
\n        
 Time
\n        
 Top List
\n        
 Trash
\n        
 Community
\n        
 URL
\n        
 User
\n        
 Users
\n        
 Chat
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n    
\n      
Special Content
\n      
Icons can represent special types of web content
\n      
\n        
 Trophy
\n        
 Cloud
\n        
 Flight
\n        
 Gift
\n        
 Dollar
\n        
 Lab
\n        
 RSS
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
User Actions
\n      
Icons can represent a possible user action
\n      
\n        
 Add User
\n        
 Block
\n        
 Hide
\n        
 Unhide
\n        
 Lock
\n        
 Unlock
\n        
 Flag
\n        
 Cancel
\n        
 Close
\n        
 Delete
\n        
 Check
\n        
 Edit
\n        
 Open
\n        
 Export
\n        
 Forward
\n        
 Upload
\n        
 Like
\n        
 Dislike
\n        
 Pin
\n        
 Star
\n        
 Empty Star
\n        
 Half Star
\n        
 Print
\n        
 Comment
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
View
\n      
Icons can represent ways to modify a page view
\n      
\n        
 Content
\n        
 Grid Layout
\n        
 Block Layout
\n        
 List Layout
>\n        
 Resize Full
\n        
 Resize Horizontal
\n        
 Resize Small
\n        
 Resize Vertical
\n        
 Zoom in
\n        
 Zoom out
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n    
\n      
Media Actions
\n      
Icons can represent actions that occur on media
\n      
\n        
 Eject
\n        
 Fast-forward
\n        
 Pause
\n        
 Play
\n        
 To-start
\n        
 To-end
\n        
 Forward
\n        
 Shuffle
\n        
 Clockwise
\n        
 Counter clockwise
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n    
\n      
Objects
\n      
Icons can represent literal objects
\n      
\n        
 Book
\n        
 Calendar
\n        
 Color
\n        
 Desk globe
\n        
 Fire
\n        
 Globe
\n        
 Headphones
\n        
 Id
\n        
 Idea
\n        
 Lightning
\n        
 Money
\n        
 Paint
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n\n    
\n      
Indications
\n      
Icons can indicate the status of something
\n      
\n        
 Cancel Circle
\n        
 Asterisk
\n        
 Attention Circle
\n        
 Attention
\n        
 Empty Heart
\n        
 Heart
\n        
 Thumbs Down
\n        
 Thumbs Up
\n        
 Terminal
\n        
 Direction
\n        
 Location
\n        
 Help
\n        
 Info
\n        
 Mic
\n        
 Off
\n        
 Add
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
Symbols
\n      
Icons can represent common symbols
\n      
\n        
 Left Open
\n        
 Left Triangle
\n        
 Left
\n        
 Right
\n        
 Right Triangle
\n        
 Right Arrow
\n        
 Up
\n        
 Up Triangle
\n        
 Up Arrow
\n        
 Down Arrow
\n        
 Down Triangle
\n        
 Down Arrow
\n        
 Cube
\n        
 Minus
\n        
 Plus
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
Websites
\n      
Icons can represent logos to common websites
\n      
\n        
 Facebook
\n        
 Twitter
\n        
 Github
\n      
\n    
\n  
\n\n\n  
States
\n\n  
\n    
Disabled
\n    
An icon can show that it is disabled
\n    \n  
\n\n  
Variations
\n\n  
\n    
Size
\n    
An icon can vary in size
\n    \n    
\n    \n    
\n    \n    
\n    \n    
\n    \n  
\n\n  
\n    
Link
\n    
An icon can be formatted as a link
\n    \n    \n  
\n\n  
\n    
Flipped
\n    
An icon can be flipped
\n    \n    \n  
\n\n  
\n    
Rotated
\n    
An icon can be rotated
\n    \n    \n  
\n\n\n  
\n    
Circular
\n    
An icon can be formatted to appear circular
\n    \n    \n    \n    \n  
\n\n\n  
\n    
Square
\n    
An icon can be formatted to appear square
\n    \n    \n    \n    \n  
\n\n  
\n    
Colors
\n    
An icon can be formatted with different colors
\n    \n    \n    \n    \n    \n    \n  
\n\n  
\n    
Inverted
\n    
an icon can have its colors inverted for contrast
\n    \n    \n    \n    \n    \n    \n  
\n\n\n
\n\n\n",
      "contentRenderedWithoutLayouts": "\n\n
\n  
\n    
\n\n      
\n        Icon\n        \n      
\n\n      
An icon is a glyph used to represent another concept more simply
\n      \n      
\n        Definition Mode\n        \n      
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n\n\n
\n\n  
\n    
\n      Types\n      States\n      Variations\n    
\n  
\n\n  
Types
\n\n  
Icon Set
\n  
An icon sets contains an arbitrary number of glyphs
\n  
\n    Icons serve a very similar function to text in a page. In semantic icons receive a special tag \"i\" which allow for an abbreviated markup when sitting along-side text.\n  
\n\n  
\n    Standard\n    Basic\n  
\n\n  
\n    
Standard Icon Set
\n\n    
Semantic includes a complete port of Font Awesome designed by Dave Gandy for its standard icon set.
\n\n    
\n      
Content
\n      
Icons can represent types of web content
\n      
\n        
Archive
\n        
Attachment
\n        
Browser
\n        
Bug
\n        
Calendar
\n        
Cart
\n        
Certificate
\n        
Chat
\n        
Cloud
\n        
Code
\n        
Comment
\n        
Dashboard
\n        
Desktop
\n        
Empty Calendar
\n        
External URL
\n        
External URL Sign
\n        
File
\n        
File Outline
\n        
Folder
\n        
Open Folder
\n        
Open Folder Outline
\n        
Folder Outline
\n        
Help
\n        
Home
\n        
Inbox
\n        
Info
\n        
Info Letter
\n        
Legal
\n        
Location
\n        
Mail
\n        
Mail Outline
\n        
Map
\n        
Map Marker
\n        
Mobile
\n        
Music
\n        
Chat Outline
\n        
Comment Outline
\n        
Payment
\n        
Photo
\n        
QR Code
\n        
Question
\n        
RSS
\n        
RSS Sign
\n        
Setting
\n        
Settings
\n        
Signal
\n        
Sitemap
\n        
Table
\n        
Tablet
\n        
Tag
\n        
Tags
\n        
Tasks
\n        
Terminal
\n        
Text File
\n        
Text File Outline
\n        
Time
\n        
Trash
\n        
URL
\n        
User
\n        
Users
\n        
Video
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
User Actions
\n      
Icons can represent a possible user action
\n      
\n        
Add
\n        
Add Sign
\n        
Add Sign Box
\n        
Adjust
\n        
Empty Bookmark
\n        
Bookmark
\n        
Cloud Download
\n        
Cloud Upload
\n        
Collapse
\n        
Crop
\n        
Download Disk
\n        
Download
\n        
Edit
\n        
Edit sign
\n        
Empty Flag
\n        
Exchange
\n        
Expand
\n        
Filter
\n        
Flag
\n        
Fork Code
\n        
Forward
\n        
Fullscreen
\n        
Hide
\n        
Level Down
\n        
Level Up
\n        
Off
\n        
Refresh
\n        
Remove Circle
\n        
Remove
\n        
Remove Sign
\n        
Reorder
\n        
Reply All
\n        
Reply
\n        
Retweet
\n        
Save
\n        
Screenshot
\n        
Search
\n        
Share
\n        
Share Sign
\n        
Sign in
\n        
Sign out
\n        
Tint
\n        
Unhide
\n        
Upload Disk
\n        
Upload
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
View Actions
\n      
Icons can represent actions that modify a page view
\n      
\n        
Block Layout
\n        
Column Layout
\n        
Grid
\n        
List Layout
\n        
Resize Full
\n        
Resize Horizontal
\n        
Resize Small
\n        
Resize Vertical
\n        
Sort Alphabet Descending
\n        
Sort Alphabet Ascending
\n        
Sort Ascending
\n        
Sort Attributes Descending
\n        
Sort Attributes Ascending
\n        
Sort Descending
\n        
Sort
\n        
Sort Order Descending
\n        
Sort Order Ascending
\n        
Zoom In
\n        
Zoom Out
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
Text Actions
\n      
Icons can represent actions that modify text
\n      
\n        
Align Center
\n        
Align Justify
\n        
Align Left
\n        
Align Right
\n        
Bold
\n        
Copy
\n        
Cut
\n        
Ellipsis Horizontal
\n        
Ellipsis Vertical
\n        
Font
\n        
Indent Left
\n        
Indent Right
\n        
Italic
\n        
List
\n        
Move
\n        
Ordered List
\n        
Paste
\n        
Print
\n        
Quote left
\n        
Quote right
\n        
Strikethrough
\n        
Subscript
\n        
Superscript
\n        
Text Height
\n        
Text Width
\n        
Underline
\n        
Undo
\n        
Unlink
\n        
Unordered List
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
Media Actions
\n      
Icons can represent actions that occur on media
\n      
\n        
Backward
\n        
Eject
\n        
Fast Backward
\n        
Fast Forward
\n        
Mute
\n        
Pause
\n        
Play Circle
\n        
Play
\n        
Play Sign
\n        
Shuffle
\n        
Repeat
\n        
Step Backward
\n        
Step Forward
\n        
Stop
\n        
Unmute
\n        
Volume Down
\n        
Volume Off
\n        
Volume Up
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
Objects
\n      
Icons can represent literal objects
\n      
\n        
Ambulance
\n        
Anchor
\n        
Barcode
\n        
Lab
\n        
Beer
\n        
Bell Outline
\n        
Bolt
\n        
Book
\n        
Briefcase
\n        
Building
\n        
Bullhorn
\n        
Bullseye
\n        
Camera
\n        
Camera retro
\n        
Coffee
\n        
Doctor
\n        
Eraser
\n        
Female
\n        
Fighter Jet
\n        
Fire Extinguisher
\n        
Fire
\n        
Checkered Flag
\n        
Food
\n        
Gamepad
\n        
Gift
\n        
Glass
\n        
Globe
\n        
HDD
\n        
Headphones
\n        
Hospital
\n        
Key
\n        
Keyboard
\n        
Laptop
\n        
Leaf
\n        
Lemon
\n        
Lightbulb
\n        
Magic
\n        
Magnet
\n        
Male
\n        
Medkit
\n        
Money
\n        
Moon
\n        
Pencil
\n        
Phone
\n        
Phone Sign
\n        
Pin
\n        
Plane
\n        
Puzzle Piece
\n        
Road
\n        
Rocket
\n        
Shield
\n        
Stethoscope
\n        
Suitcase
\n        
Sun
\n        
Ticket
\n        
Trophy
\n        
Truck
\n        
Umbrella
\n        
Wrench
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n\n    
\n      
Status Indication
\n      
Icons can indicate the status of something
\n      
\n        
Ban Circle
\n        
Checkmark
\n        
Checkmark Sign
\n        
Minus Checkbox
\n        
Empty Checkbox
\n        
Checked Checkbox
\n        
Exclamation
\n        
attention
\n        
Frown
\n        
Heart Empty
\n        
Heart
\n        
Loading
\n        
Lock
\n        
Meh
\n        
OK Circle
\n        
OK Sign
\n        
Smile
\n        
Empty Star
\n        
Half Empty Star
\n        
Half Star
\n        
Star
\n        
Thumbs Down
\n        
Thumbs Down Outline
\n        
Thumbs Up
\n        
Thumbs Up Outline
\n        
Unlock Alternate
\n        
Unlock
\n        
Warning
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
Symbols
\n      
Icons can represent common symbols
\n      
\n        
Angle Down
\n        
Angle Left
\n        
Angle Right
\n        
Angle up
\n        
Arrow Box Down
\n        
Arrow Box Right
\n        
Arrow Box Up
\n        
Down
\n        
Left
\n        
Right
\n        
Up
\n        
Asterisk
\n        
Triangle Down
\n        
Triangle Left
\n        
Triangle Right
\n        
Triangle Up
\n        
Down Arrow
\n        
Left Arrow
\n        
Right Arrow
\n        
Up Arrow
\n        
Arrow Sign Down
\n        
Arrow Sign Left
\n        
Arrow Sign Right
\n        
Arrow Sign Up
\n        
Circle Arrow Left
\n        
Circle Arrow Right
\n        
Circle Arrow Up
\n        
Circle Down Arrow
\n        
Circle Blank
\n        
Circle
\n        
Double Angle Down
\n        
Double Angle Left
\n        
Double angle Right
\n        
Double Angle Up
\n        
Hand Down
\n        
Hand Left
\n        
Hand Right
\n        
Hand Up
\n        
Long Arrow Down
\n        
Long Arrow Left
\n        
Long Arrow Right
\n        
Long Arrow Up
\n        
Minus
\n        
Minus Sign Alternate
\n        
Minus sign
\n        
Sign
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
Currency
\n      
Icons can represent units of currency
\n      
\n        
US Dollar
\n        
Euro
\n        
British Pound
\n        
Rupee
\n        
Korean Won
\n        
Japanese Yen
\n        
Chinese Yuan
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
Brands
\n      
Icons can represent logos to common brands
\n      
\n        
Adn
\n        
Android
\n        
Apple
\n        
Bitbucket
\n        
Bitbucket Sign
\n        
Bitcoin
\n        
CSS3
\n        
Dribbble
\n        
Dropbox
\n        
Facebook
\n        
Facebook Sign
\n        
Facetime Video
\n        
Flickr
\n        
Foursquare
\n        
Github Alternate
\n        
Github
\n        
Github Sign
\n        
Gittip
\n        
Google Plus
\n        
Google Plus Sign
\n        
H Sign
\n        
HTML5
\n        
Instagram
\n        
Linkedin
\n        
Linkedin Sign
\n        
Linux
\n        
Maxcdn
\n        
Pinterest
\n        
Pinterest Sign
\n        
Renren
\n        
Skype
\n        
Stackexchange
\n        
Trello
\n        
Tumblr
\n        
Tumblr Sign
\n        
Twitter
\n        
Twitter Sign
\n        
Vk
\n        
Weibo
\n        
Windows
\n        
Xing
\n        
Xing Sign
\n        
YouTube
\n        
YouTube Play
\n        
YouTube Sign
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n  
\n\n  
\n\n    
Custom Icon Set
\n    
\n      
This icon set was built using a custom combination of fonts using the amazing web tool Fontello, to only include the most frequently used icons for websites. The filesize for the basic icon set is about 50% smaller than the standard icon set.
\n      
\n      
\n      
Basic.icons uses a sub-class i.basic.icon so they can be used on the same page as other icon sets. If this is your only icon set, you can safely remove the prefix.
\n    
\n\n    
\n      
Content
\n      
Icons can represent typical web content
\n      
\n        
 Attachment
\n        
 Barcode
\n        
 Bookmark
\n        
 Cart
\n        
 Chart
\n        
 Bar Chart
\n        
 Pie Chart
\n        
 Date
\n        
 Doc
\n        
 Docs
\n        
 Email
\n        
 Folder
\n        
 Open Folder
\n        
 Home
\n        
 Mail
\n        
 Photo
\n        
 Photos
\n        
 Search
\n        
 Setting
\n        
 Settings
\n        
 Tag
\n        
 Tags
\n        
 Time
\n        
 Top List
\n        
 Trash
\n        
 Community
\n        
 URL
\n        
 User
\n        
 Users
\n        
 Chat
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n    
\n      
Special Content
\n      
Icons can represent special types of web content
\n      
\n        
 Trophy
\n        
 Cloud
\n        
 Flight
\n        
 Gift
\n        
 Dollar
\n        
 Lab
\n        
 RSS
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
User Actions
\n      
Icons can represent a possible user action
\n      
\n        
 Add User
\n        
 Block
\n        
 Hide
\n        
 Unhide
\n        
 Lock
\n        
 Unlock
\n        
 Flag
\n        
 Cancel
\n        
 Close
\n        
 Delete
\n        
 Check
\n        
 Edit
\n        
 Open
\n        
 Export
\n        
 Forward
\n        
 Upload
\n        
 Like
\n        
 Dislike
\n        
 Pin
\n        
 Star
\n        
 Empty Star
\n        
 Half Star
\n        
 Print
\n        
 Comment
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
View
\n      
Icons can represent ways to modify a page view
\n      
\n        
 Content
\n        
 Grid Layout
\n        
 Block Layout
\n        
 List Layout
>\n        
 Resize Full
\n        
 Resize Horizontal
\n        
 Resize Small
\n        
 Resize Vertical
\n        
 Zoom in
\n        
 Zoom out
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n    
\n      
Media Actions
\n      
Icons can represent actions that occur on media
\n      
\n        
 Eject
\n        
 Fast-forward
\n        
 Pause
\n        
 Play
\n        
 To-start
\n        
 To-end
\n        
 Forward
\n        
 Shuffle
\n        
 Clockwise
\n        
 Counter clockwise
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n    
\n      
Objects
\n      
Icons can represent literal objects
\n      
\n        
 Book
\n        
 Calendar
\n        
 Color
\n        
 Desk globe
\n        
 Fire
\n        
 Globe
\n        
 Headphones
\n        
 Id
\n        
 Idea
\n        
 Lightning
\n        
 Money
\n        
 Paint
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n\n    
\n      
Indications
\n      
Icons can indicate the status of something
\n      
\n        
 Cancel Circle
\n        
 Asterisk
\n        
 Attention Circle
\n        
 Attention
\n        
 Empty Heart
\n        
 Heart
\n        
 Thumbs Down
\n        
 Thumbs Up
\n        
 Terminal
\n        
 Direction
\n        
 Location
\n        
 Help
\n        
 Info
\n        
 Mic
\n        
 Off
\n        
 Add
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
Symbols
\n      
Icons can represent common symbols
\n      
\n        
 Left Open
\n        
 Left Triangle
\n        
 Left
\n        
 Right
\n        
 Right Triangle
\n        
 Right Arrow
\n        
 Up
\n        
 Up Triangle
\n        
 Up Arrow
\n        
 Down Arrow
\n        
 Down Triangle
\n        
 Down Arrow
\n        
 Cube
\n        
 Minus
\n        
 Plus
\n      
\n      
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n      
\n    
\n\n    
\n      
Websites
\n      
Icons can represent logos to common websites
\n      
\n        
 Facebook
\n        
 Twitter
\n        
 Github
\n      
\n    
\n  
\n\n\n  
States
\n\n  
\n    
Disabled
\n    
An icon can show that it is disabled
\n    \n  
\n\n  
Variations
\n\n  
\n    
Size
\n    
An icon can vary in size
\n    \n    
\n    \n    
\n    \n    
\n    \n    
\n    \n  
\n\n  
\n    
Link
\n    
An icon can be formatted as a link
\n    \n    \n  
\n\n  
\n    
Flipped
\n    
An icon can be flipped
\n    \n    \n  
\n\n  
\n    
Rotated
\n    
An icon can be rotated
\n    \n    \n  
\n\n\n  
\n    
Circular
\n    
An icon can be formatted to appear circular
\n    \n    \n    \n    \n  
\n\n\n  
\n    
Square
\n    
An icon can be formatted to appear square
\n    \n    \n    \n    \n  
\n\n  
\n    
Colors
\n    
An icon can be formatted with different colors
\n    \n    \n    \n    \n    \n    \n  
\n\n  
\n    
Inverted
\n    
an icon can have its colors inverted for contrast
\n    \n    \n    \n    \n    \n    \n  
\n\n\n
",
      "renderSingleExtensions": false,
      "layout": "default",
      "css": "icon",
      "description": "An icon is a glyph used to represent another concept more simply",
      "type": "UI Element",
      "layoutRelativePath": "default.html.eco",
      "meta": {
        "layout": "default",
        "css": "icon",
        "title": "Icon",
        "description": "An icon is a glyph used to represent another concept more simply",
        "type": "UI Element"
      }
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/documents/elements/image.html.eco",
      "relativePath": "elements/image.html.eco",
      "basename": "image",
      "outBasename": "image",
      "extension": "eco",
      "outExtension": "html",
      "extensions": [
        "html",
        "eco"
      ],
      "filename": "image.html.eco",
      "fullDirPath": "/home/jack/projects/semantic/server/documents/elements",
      "outPath": "/home/jack/projects/semantic/docs/elements/image.html",
      "outDirPath": "/home/jack/projects/semantic/docs/elements",
      "outFilename": "image.html",
      "relativeOutPath": "elements/image.html",
      "relativeDirPath": "elements",
      "relativeOutDirPath": "elements",
      "relativeBase": "elements/image",
      "relativeOutBase": "elements/image",
      "contentType": "application/octet-stream",
      "outContentType": "text/html",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-03T17:44:32.000Z",
      "rtime": "2013-12-04T09:15:25.210Z",
      "wtime": "2013-12-04T09:15:28.637Z",
      "exists": true,
      "encoding": "utf8",
      "source": "---\nlayout      : 'default'\ncss         : 'image'\ntitle       : 'Image'\ndescription : 'An image is a graphic representation of something'\ntype        : 'UI Element'\n---\n\n<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Standard\n      States\n      Variations\n      Groups\n    
\n  
\n\n  
Types
\n  
\n    
Image
\n    
An image
\n    
Images will, by default, take up the same size as the original image. Specifying an image size will force an image to only take up a specific size.
\n    \n  
\n\n  
\n    
Image Link
\n    
An image can be formatted to link to other content
\n    \n      \n    \n  
\n\n  
\n    States\n  
\n\n  
\n    
Disabled
\n    
An image can show that it is disabled and cannot be selected
\n    \n  
\n\n  
Variations
\n\n  
\n    
Avatar
\n    
An image may be formatted to appear inline with text as an avatar
\n     Dog Doggington\n  
\n\n  
\n    
Rounded
\n    
An image may appear rounded
\n    \n  
\n\n  
\n    
Circular
\n    
An image may appear circular
\n    \n  
\n\n  
\n    
Floated
\n    
An image can sit to the left or right of other content
\n    
\n    \n    
Te eum doming eirmod, nominati pertinacia argumentum ad his. Ex eam alia facete scriptorem, est autem aliquip detraxit at. Usu ocurreret referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei ex natum rebum iisque.
\n    \n    
Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide phaedrum, vim vivendum maiestatis in.
\n\n    
Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id. Mei ut facer dolores adolescens, no illum aperiri quo, usu odio brute at. Qui te porro electram, ea dico facete utroque quo. Populo quodsi te eam, wisi everti eos ex, eum elitr altera utamur at. Quodsi convenire mnesarchum eu per, quas minimum postulant per id.
\n    
\n  
\n\n  
\n    
Sizes
\n    
An image may be formatted to be different sizes
\n    \n\n    
\n    \n\n    
\n    \n\n    
\n    \n\n    
\n    \n  
\n\n\n\n  
Groups
\n\n  
\n    
Sizes
\n    
A group of images can be formatted to have the same size.
\n    
\n      \n      \n      \n      \n    
\n  
\n  
\n    
\n      \n      \n      \n      \n    
\n  
\n\n
",
      "content": "<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Standard\n      States\n      Variations\n      Groups\n    
\n  
\n\n  
Types
\n  
\n    
Image
\n    
An image
\n    
Images will, by default, take up the same size as the original image. Specifying an image size will force an image to only take up a specific size.
\n    \n  
\n\n  
\n    
Image Link
\n    
An image can be formatted to link to other content
\n    \n      \n    \n  
\n\n  
\n    States\n  
\n\n  
\n    
Disabled
\n    
An image can show that it is disabled and cannot be selected
\n    \n  
\n\n  
Variations
\n\n  
\n    
Avatar
\n    
An image may be formatted to appear inline with text as an avatar
\n     Dog Doggington\n  
\n\n  
\n    
Rounded
\n    
An image may appear rounded
\n    \n  
\n\n  
\n    
Circular
\n    
An image may appear circular
\n    \n  
\n\n  
\n    
Floated
\n    
An image can sit to the left or right of other content
\n    
\n    \n    
Te eum doming eirmod, nominati pertinacia argumentum ad his. Ex eam alia facete scriptorem, est autem aliquip detraxit at. Usu ocurreret referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei ex natum rebum iisque.
\n    \n    
Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide phaedrum, vim vivendum maiestatis in.
\n\n    
Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id. Mei ut facer dolores adolescens, no illum aperiri quo, usu odio brute at. Qui te porro electram, ea dico facete utroque quo. Populo quodsi te eam, wisi everti eos ex, eum elitr altera utamur at. Quodsi convenire mnesarchum eu per, quas minimum postulant per id.
\n    
\n  
\n\n  
\n    
Sizes
\n    
An image may be formatted to be different sizes
\n    \n\n    
\n    \n\n    
\n    \n\n    
\n    \n\n    
\n    \n  
\n\n\n\n  
Groups
\n\n  
\n    
Sizes
\n    
A group of images can be formatted to have the same size.
\n    
\n      \n      \n      \n      \n    
\n  
\n  
\n    
\n      \n      \n      \n      \n    
\n  
\n\n
",
      "tags": null,
      "render": true,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": "Image",
      "name": "image.html",
      "date": "2013-12-03T17:44:32.000Z",
      "slug": "elements-image",
      "url": "/elements/image.html",
      "urls": [
        "/elements/image.html"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": true,
      "header": "layout      : 'default'\ncss         : 'image'\ntitle       : 'Image'\ndescription : 'An image is a graphic representation of something'\ntype        : 'UI Element'",
      "parser": "yaml",
      "body": "<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Standard\n      States\n      Variations\n      Groups\n    
\n  
\n\n  
Types
\n  
\n    
Image
\n    
An image
\n    
Images will, by default, take up the same size as the original image. Specifying an image size will force an image to only take up a specific size.
\n    \n  
\n\n  
\n    
Image Link
\n    
An image can be formatted to link to other content
\n    \n      \n    \n  
\n\n  
\n    States\n  
\n\n  
\n    
Disabled
\n    
An image can show that it is disabled and cannot be selected
\n    \n  
\n\n  
Variations
\n\n  
\n    
Avatar
\n    
An image may be formatted to appear inline with text as an avatar
\n     Dog Doggington\n  
\n\n  
\n    
Rounded
\n    
An image may appear rounded
\n    \n  
\n\n  
\n    
Circular
\n    
An image may appear circular
\n    \n  
\n\n  
\n    
Floated
\n    
An image can sit to the left or right of other content
\n    
\n    \n    
Te eum doming eirmod, nominati pertinacia argumentum ad his. Ex eam alia facete scriptorem, est autem aliquip detraxit at. Usu ocurreret referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei ex natum rebum iisque.
\n    \n    
Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide phaedrum, vim vivendum maiestatis in.
\n\n    
Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id. Mei ut facer dolores adolescens, no illum aperiri quo, usu odio brute at. Qui te porro electram, ea dico facete utroque quo. Populo quodsi te eam, wisi everti eos ex, eum elitr altera utamur at. Quodsi convenire mnesarchum eu per, quas minimum postulant per id.
\n    
\n  
\n\n  
\n    
Sizes
\n    
An image may be formatted to be different sizes
\n    \n\n    
\n    \n\n    
\n    \n\n    
\n    \n\n    
\n    \n  
\n\n\n\n  
Groups
\n\n  
\n    
Sizes
\n    
A group of images can be formatted to have the same size.
\n    
\n      \n      \n      \n      \n    
\n  
\n  
\n    
\n      \n      \n      \n      \n    
\n  
\n\n
",
      "rendered": true,
      "contentRendered": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  \n  \n  \n  \n\n  \n\n  \n  \n  Image | Semantic UI\n\n  \n  \n\n  \n\n  \n  \n  \n\n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n\n  \n  \n\n\n  
\n    \n       Close Menu\n    \n    \n       Download\n    \n    
\n      \n        Introduction\n      \n      
\n        \n          Definitions\n        \n          Overview\n        \n          Types\n        \n          Variations\n        \n          What's Different\n        \n      
\n    
\n    
\n      Project\n      
\n        \n          Contributing\n        \n          Set-up\n        \n      
\n    
\n    
\n      Elements\n      
\n        \n          Button\n        \n          Divider\n        \n          Header\n        \n          Icon\n        \n          Image\n        \n          Input\n        \n          Label\n        \n          Loader\n        \n          Progress\n        \n          Reveal\n        \n          Segment\n        \n          Step\n        \n      
\n    
\n    
\n      Collections\n      
\n        \n          Breadcrumb\n        \n          Form\n        \n          Grid\n        \n          Menu\n        \n          Message\n        \n          Table\n        \n      
\n    
\n    
\n      Views\n      
\n        \n          Comment\n        \n          Feed\n        \n          Item\n        \n          List\n        \n      
\n    
\n    
\n      Modules\n      
\n        \n          Accordion\n        \n          Checkbox\n        \n          Dimmer\n        \n          Dropdown\n        \n          Modal\n        \n          Popup\n        \n          Rating\n        \n          Shape\n        \n          Sidebar\n        \n          Transition\n        \n      
\n    
\n    
\n      Behavior\n      
\n        \n          Form Validation\n        \n      
\n    
\n    
\n      Style Guide\n      
\n        \n          CSS\n        \n          Javascript\n        \n          Language\n        \n      
\n    
\n\n  
\n\n  
\n    
\n       Content\n      
\n        UI Element: Image\n      
\n      \n      \n      \n      
\n        5 of 12\n        
\n          \n            
\n              1. Button\n            
\n          \n            
\n              2. Divider\n            
\n          \n            
\n              3. Header\n            
\n          \n            
\n              4. Icon\n            
\n          \n            
\n              5. Image\n            
\n          \n            
\n              6. Input\n            
\n          \n            
\n              7. Label\n            
\n          \n            
\n              8. Loader\n            
\n          \n            
\n              9. Progress\n            
\n          \n            
\n              10. Reveal\n            
\n          \n            
\n              11. Segment\n            
\n          \n            
\n              12. Step\n            
\n          \n        
\n      
\n      \n      \n      \n      
\n        \n        
\n          \n        
\n        \n        \n\n        \n          \n        \n        \n          \n        \n        \n        \n          \n        \n        \n      
\n    
\n  
\n    
\n      \n      Menu\n    
\n  \n\n
\n  
\n    
\n\n      
\n        Image\n        \n      
\n\n      
An image is a graphic representation of something
\n      \n      
\n        Definition Mode\n        \n      
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n\n
\n\n  
\n    
\n      Standard\n      States\n      Variations\n      Groups\n    
\n  
\n\n  
Types
\n  
\n    
Image
\n    
An image
\n    
Images will, by default, take up the same size as the original image. Specifying an image size will force an image to only take up a specific size.
\n    \n  
\n\n  
\n    
Image Link
\n    
An image can be formatted to link to other content
\n    \n      \n    \n  
\n\n  
\n    States\n  
\n\n  
\n    
Disabled
\n    
An image can show that it is disabled and cannot be selected
\n    \n  
\n\n  
Variations
\n\n  
\n    
Avatar
\n    
An image may be formatted to appear inline with text as an avatar
\n     Dog Doggington\n  
\n\n  
\n    
Rounded
\n    
An image may appear rounded
\n    \n  
\n\n  
\n    
Circular
\n    
An image may appear circular
\n    \n  
\n\n  
\n    
Floated
\n    
An image can sit to the left or right of other content
\n    
\n    \n    
Te eum doming eirmod, nominati pertinacia argumentum ad his. Ex eam alia facete scriptorem, est autem aliquip detraxit at. Usu ocurreret referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei ex natum rebum iisque.
\n    \n    
Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide phaedrum, vim vivendum maiestatis in.
\n\n    
Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id. Mei ut facer dolores adolescens, no illum aperiri quo, usu odio brute at. Qui te porro electram, ea dico facete utroque quo. Populo quodsi te eam, wisi everti eos ex, eum elitr altera utamur at. Quodsi convenire mnesarchum eu per, quas minimum postulant per id.
\n    
\n  
\n\n  
\n    
Sizes
\n    
An image may be formatted to be different sizes
\n    \n\n    
\n    \n\n    
\n    \n\n    
\n    \n\n    
\n    \n  
\n\n\n\n  
Groups
\n\n  
\n    
Sizes
\n    
A group of images can be formatted to have the same size.
\n    
\n      \n      \n      \n      \n    
\n  
\n  
\n    
\n      \n      \n      \n      \n    
\n  
\n\n
\n\n\n",
      "contentRenderedWithoutLayouts": "\n\n
\n  
\n    
\n\n      
\n        Image\n        \n      
\n\n      
An image is a graphic representation of something
\n      \n      
\n        Definition Mode\n        \n      
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n\n
\n\n  
\n    
\n      Standard\n      States\n      Variations\n      Groups\n    
\n  
\n\n  
Types
\n  
\n    
Image
\n    
An image
\n    
Images will, by default, take up the same size as the original image. Specifying an image size will force an image to only take up a specific size.
\n    \n  
\n\n  
\n    
Image Link
\n    
An image can be formatted to link to other content
\n    \n      \n    \n  
\n\n  
\n    States\n  
\n\n  
\n    
Disabled
\n    
An image can show that it is disabled and cannot be selected
\n    \n  
\n\n  
Variations
\n\n  
\n    
Avatar
\n    
An image may be formatted to appear inline with text as an avatar
\n     Dog Doggington\n  
\n\n  
\n    
Rounded
\n    
An image may appear rounded
\n    \n  
\n\n  
\n    
Circular
\n    
An image may appear circular
\n    \n  
\n\n  
\n    
Floated
\n    
An image can sit to the left or right of other content
\n    
\n    \n    
Te eum doming eirmod, nominati pertinacia argumentum ad his. Ex eam alia facete scriptorem, est autem aliquip detraxit at. Usu ocurreret referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei ex natum rebum iisque.
\n    \n    
Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide phaedrum, vim vivendum maiestatis in.
\n\n    
Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id. Mei ut facer dolores adolescens, no illum aperiri quo, usu odio brute at. Qui te porro electram, ea dico facete utroque quo. Populo quodsi te eam, wisi everti eos ex, eum elitr altera utamur at. Quodsi convenire mnesarchum eu per, quas minimum postulant per id.
\n    
\n  
\n\n  
\n    
Sizes
\n    
An image may be formatted to be different sizes
\n    \n\n    
\n    \n\n    
\n    \n\n    
\n    \n\n    
\n    \n  
\n\n\n\n  
Groups
\n\n  
\n    
Sizes
\n    
A group of images can be formatted to have the same size.
\n    
\n      \n      \n      \n      \n    
\n  
\n  
\n    
\n      \n      \n      \n      \n    
\n  
\n\n
",
      "renderSingleExtensions": false,
      "layout": "default",
      "css": "image",
      "description": "An image is a graphic representation of something",
      "type": "UI Element",
      "layoutRelativePath": "default.html.eco",
      "meta": {
        "layout": "default",
        "css": "image",
        "title": "Image",
        "description": "An image is a graphic representation of something",
        "type": "UI Element"
      }
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/documents/elements/input.html.eco",
      "relativePath": "elements/input.html.eco",
      "basename": "input",
      "outBasename": "input",
      "extension": "eco",
      "outExtension": "html",
      "extensions": [
        "html",
        "eco"
      ],
      "filename": "input.html.eco",
      "fullDirPath": "/home/jack/projects/semantic/server/documents/elements",
      "outPath": "/home/jack/projects/semantic/docs/elements/input.html",
      "outDirPath": "/home/jack/projects/semantic/docs/elements",
      "outFilename": "input.html",
      "relativeOutPath": "elements/input.html",
      "relativeDirPath": "elements",
      "relativeOutDirPath": "elements",
      "relativeBase": "elements/input",
      "relativeOutBase": "elements/input",
      "contentType": "application/octet-stream",
      "outContentType": "text/html",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": "2013-12-04T09:15:25.271Z",
      "wtime": "2013-12-04T09:15:28.640Z",
      "exists": true,
      "encoding": "utf8",
      "source": "---\nlayout      : 'default'\ncss         : 'input'\ntitle       : 'Input'\ndescription : 'Inputs allow a user to enter information'\ntype        : 'UI Element'\n---\n\n<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Types\n      States\n      Variations\n    
\n  
\n  
Types
\n\n  
\n    
Input
\n    
A standard input
\n    
\n      \n    
\n  
\n\n  
States
\n\n  
\n    
Focus
\n    
An input field can show a user is currently interacting with it
\n    
\n      \n    
\n  
\n\n  
\n    
Loading
\n    
An icon input field can show that it is currently loading data
\n    
\n      \n      \n    
\n  
\n\n  
\n    
Error
\n    
An input field can show the data contains errors
\n    
\n      \n    
\n  
\n\n  
Variations
\n\n  
\n    
Icon
\n    
An input can be formatted with an icon
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n\n  
\n    
Labeled
\n    
An input can be formatted with a label
\n    
\n      \n      
\n        \n      
\n    
\n  
\n\n  
\n    
Action
\n    
An input can be formatted to alert the user to an action they may perform
\n    
\n      \n      
Search
\n    
\n  
\n  
\n    
\n      \n      
 Copy
\n    
\n  
\n  
\n    
\n      \n      
\n    
\n  
\n\n  
\n    
Fluid
\n    
An input can take the size of its container
\n    
\n      \n      \n    
\n  
\n\n  
\n    
Size
\n    
An input can vary in size
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n\n
",
      "content": "<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Types\n      States\n      Variations\n    
\n  
\n  
Types
\n\n  
\n    
Input
\n    
A standard input
\n    
\n      \n    
\n  
\n\n  
States
\n\n  
\n    
Focus
\n    
An input field can show a user is currently interacting with it
\n    
\n      \n    
\n  
\n\n  
\n    
Loading
\n    
An icon input field can show that it is currently loading data
\n    
\n      \n      \n    
\n  
\n\n  
\n    
Error
\n    
An input field can show the data contains errors
\n    
\n      \n    
\n  
\n\n  
Variations
\n\n  
\n    
Icon
\n    
An input can be formatted with an icon
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n\n  
\n    
Labeled
\n    
An input can be formatted with a label
\n    
\n      \n      
\n        \n      
\n    
\n  
\n\n  
\n    
Action
\n    
An input can be formatted to alert the user to an action they may perform
\n    
\n      \n      
Search
\n    
\n  
\n  
\n    
\n      \n      
 Copy
\n    
\n  
\n  
\n    
\n      \n      
\n    
\n  
\n\n  
\n    
Fluid
\n    
An input can take the size of its container
\n    
\n      \n      \n    
\n  
\n\n  
\n    
Size
\n    
An input can vary in size
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n\n
",
      "tags": null,
      "render": true,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": "Input",
      "name": "input.html",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "elements-input",
      "url": "/elements/input.html",
      "urls": [
        "/elements/input.html"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": true,
      "header": "layout      : 'default'\ncss         : 'input'\ntitle       : 'Input'\ndescription : 'Inputs allow a user to enter information'\ntype        : 'UI Element'",
      "parser": "yaml",
      "body": "<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Types\n      States\n      Variations\n    
\n  
\n  
Types
\n\n  
\n    
Input
\n    
A standard input
\n    
\n      \n    
\n  
\n\n  
States
\n\n  
\n    
Focus
\n    
An input field can show a user is currently interacting with it
\n    
\n      \n    
\n  
\n\n  
\n    
Loading
\n    
An icon input field can show that it is currently loading data
\n    
\n      \n      \n    
\n  
\n\n  
\n    
Error
\n    
An input field can show the data contains errors
\n    
\n      \n    
\n  
\n\n  
Variations
\n\n  
\n    
Icon
\n    
An input can be formatted with an icon
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n\n  
\n    
Labeled
\n    
An input can be formatted with a label
\n    
\n      \n      
\n        \n      
\n    
\n  
\n\n  
\n    
Action
\n    
An input can be formatted to alert the user to an action they may perform
\n    
\n      \n      
Search
\n    
\n  
\n  
\n    
\n      \n      
 Copy
\n    
\n  
\n  
\n    
\n      \n      
\n    
\n  
\n\n  
\n    
Fluid
\n    
An input can take the size of its container
\n    
\n      \n      \n    
\n  
\n\n  
\n    
Size
\n    
An input can vary in size
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n\n
",
      "rendered": true,
      "contentRendered": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  \n  \n  \n  \n\n  \n\n  \n  \n  Input | Semantic UI\n\n  \n  \n\n  \n\n  \n  \n  \n\n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n\n  \n  \n\n\n  
\n    \n       Close Menu\n    \n    \n       Download\n    \n    
\n      \n        Introduction\n      \n      
\n        \n          Definitions\n        \n          Overview\n        \n          Types\n        \n          Variations\n        \n          What's Different\n        \n      
\n    
\n    
\n      Project\n      
\n        \n          Contributing\n        \n          Set-up\n        \n      
\n    
\n    
\n      Elements\n      
\n        \n          Button\n        \n          Divider\n        \n          Header\n        \n          Icon\n        \n          Image\n        \n          Input\n        \n          Label\n        \n          Loader\n        \n          Progress\n        \n          Reveal\n        \n          Segment\n        \n          Step\n        \n      
\n    
\n    
\n      Collections\n      
\n        \n          Breadcrumb\n        \n          Form\n        \n          Grid\n        \n          Menu\n        \n          Message\n        \n          Table\n        \n      
\n    
\n    
\n      Views\n      
\n        \n          Comment\n        \n          Feed\n        \n          Item\n        \n          List\n        \n      
\n    
\n    
\n      Modules\n      
\n        \n          Accordion\n        \n          Checkbox\n        \n          Dimmer\n        \n          Dropdown\n        \n          Modal\n        \n          Popup\n        \n          Rating\n        \n          Shape\n        \n          Sidebar\n        \n          Transition\n        \n      
\n    
\n    
\n      Behavior\n      
\n        \n          Form Validation\n        \n      
\n    
\n    
\n      Style Guide\n      
\n        \n          CSS\n        \n          Javascript\n        \n          Language\n        \n      
\n    
\n\n  
\n\n  
\n    
\n       Content\n      
\n        UI Element: Input\n      
\n      \n      \n      \n      
\n        6 of 12\n        
\n          \n            
\n              1. Button\n            
\n          \n            
\n              2. Divider\n            
\n          \n            
\n              3. Header\n            
\n          \n            
\n              4. Icon\n            
\n          \n            
\n              5. Image\n            
\n          \n            
\n              6. Input\n            
\n          \n            
\n              7. Label\n            
\n          \n            
\n              8. Loader\n            
\n          \n            
\n              9. Progress\n            
\n          \n            
\n              10. Reveal\n            
\n          \n            
\n              11. Segment\n            
\n          \n            
\n              12. Step\n            
\n          \n        
\n      
\n      \n      \n      \n      
\n        \n        
\n          \n        
\n        \n        \n\n        \n          \n        \n        \n          \n        \n        \n        \n          \n        \n        \n      
\n    
\n  
\n    
\n      \n      Menu\n    
\n  \n\n
\n  
\n    
\n\n      
\n        Input\n        \n      
\n\n      
Inputs allow a user to enter information
\n      \n      
\n        Definition Mode\n        \n      
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n\n
\n\n  
\n    
\n      Types\n      States\n      Variations\n    
\n  
\n  
Types
\n\n  
\n    
Input
\n    
A standard input
\n    
\n      \n    
\n  
\n\n  
States
\n\n  
\n    
Focus
\n    
An input field can show a user is currently interacting with it
\n    
\n      \n    
\n  
\n\n  
\n    
Loading
\n    
An icon input field can show that it is currently loading data
\n    
\n      \n      \n    
\n  
\n\n  
\n    
Error
\n    
An input field can show the data contains errors
\n    
\n      \n    
\n  
\n\n  
Variations
\n\n  
\n    
Icon
\n    
An input can be formatted with an icon
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n\n  
\n    
Labeled
\n    
An input can be formatted with a label
\n    
\n      \n      
\n        \n      
\n    
\n  
\n\n  
\n    
Action
\n    
An input can be formatted to alert the user to an action they may perform
\n    
\n      \n      
Search
\n    
\n  
\n  
\n    
\n      \n      
 Copy
\n    
\n  
\n  
\n    
\n      \n      
\n    
\n  
\n\n  
\n    
Fluid
\n    
An input can take the size of its container
\n    
\n      \n      \n    
\n  
\n\n  
\n    
Size
\n    
An input can vary in size
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n\n
\n\n\n",
      "contentRenderedWithoutLayouts": "\n\n
\n  
\n    
\n\n      
\n        Input\n        \n      
\n\n      
Inputs allow a user to enter information
\n      \n      
\n        Definition Mode\n        \n      
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n\n
\n\n  
\n    
\n      Types\n      States\n      Variations\n    
\n  
\n  
Types
\n\n  
\n    
Input
\n    
A standard input
\n    
\n      \n    
\n  
\n\n  
States
\n\n  
\n    
Focus
\n    
An input field can show a user is currently interacting with it
\n    
\n      \n    
\n  
\n\n  
\n    
Loading
\n    
An icon input field can show that it is currently loading data
\n    
\n      \n      \n    
\n  
\n\n  
\n    
Error
\n    
An input field can show the data contains errors
\n    
\n      \n    
\n  
\n\n  
Variations
\n\n  
\n    
Icon
\n    
An input can be formatted with an icon
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n\n  
\n    
Labeled
\n    
An input can be formatted with a label
\n    
\n      \n      
\n        \n      
\n    
\n  
\n\n  
\n    
Action
\n    
An input can be formatted to alert the user to an action they may perform
\n    
\n      \n      
Search
\n    
\n  
\n  
\n    
\n      \n      
 Copy
\n    
\n  
\n  
\n    
\n      \n      
\n    
\n  
\n\n  
\n    
Fluid
\n    
An input can take the size of its container
\n    
\n      \n      \n    
\n  
\n\n  
\n    
Size
\n    
An input can vary in size
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n\n
",
      "renderSingleExtensions": false,
      "layout": "default",
      "css": "input",
      "description": "Inputs allow a user to enter information",
      "type": "UI Element",
      "layoutRelativePath": "default.html.eco",
      "meta": {
        "layout": "default",
        "css": "input",
        "title": "Input",
        "description": "Inputs allow a user to enter information",
        "type": "UI Element"
      }
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/documents/elements/label.html.eco",
      "relativePath": "elements/label.html.eco",
      "basename": "label",
      "outBasename": "label",
      "extension": "eco",
      "outExtension": "html",
      "extensions": [
        "html",
        "eco"
      ],
      "filename": "label.html.eco",
      "fullDirPath": "/home/jack/projects/semantic/server/documents/elements",
      "outPath": "/home/jack/projects/semantic/docs/elements/label.html",
      "outDirPath": "/home/jack/projects/semantic/docs/elements",
      "outFilename": "label.html",
      "relativeOutPath": "elements/label.html",
      "relativeDirPath": "elements",
      "relativeOutDirPath": "elements",
      "relativeBase": "elements/label",
      "relativeOutBase": "elements/label",
      "contentType": "application/octet-stream",
      "outContentType": "text/html",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": "2013-12-04T09:15:25.342Z",
      "wtime": "2013-12-04T09:15:28.644Z",
      "exists": true,
      "encoding": "utf8",
      "source": "---\nlayout      : 'default'\ncss         : \"label\"\ntitle       : 'Label'\ndescription : 'Labels give descriptions to pieces of content'\ntype        : 'UI Element'\n---\n\n<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Types\n      Variations\n      Groups\n    
\n  
\n\n  
Types
\n\n  
\n    
Label
\n    
A basic label
\n    
\n       23\n    
\n  
\n  
\n    
Detail
\n    
A label can contain a detail
\n    
\n      Dogs\n      
214
\n    
\n  
\n\n  
\n    
Removable
\n    
A label can contain a delete icon
\n    
\n      Witty\n      \n    
\n  
\n\n  
\n    
Link
\n    
A label can contain a text link
\n    
\n      Inbox\n       23\n    
\n  
\n\n  
\n    
Image
\n    
A label can be formatted to include an image
\n    \n      \n      dog@doggington.com\n      \n    \n    \n      \n      james@thepooch.com\n      \n    \n    \n      \n      kelly@bellyscratcher.com\n      \n    \n  
\n\n  
\n    
Corner
\n    
A label can position itself in the corner of an element
\n    
A corner label must be positioned inside a container with position: relative to display properly
\n    
\n      
\n        \n      
\n      
\n        
New
\n      
\n      This is a normal text segment\n    
\n    
\n      \n        
New
\n      \n      \n    
\n    
\n      \n        \n      \n      \n    
\n  
\n\n  
\n    
Ribbon
\n    
A label can appear as a ribbon attaching itself to an element.
\n    
\n      
\n        
\n          
\n            
Dogs
\n            
Pretty nice animals.
\n            
Cats
\n            
Also pretty nice animals, but can prefer solitude.
\n            
Ogres and monsters
\n            
Never seen one as a pet before, but I imagine they'd make pretty terrible companions.
\n          
\n        
\n      
\n    
\n      
\n      
Dogs
\n      
\n  
\n\n  
\n    
Attached
\n    
A label can attach to a content segment
\n    
\n      
\n        
\n          
\n            
HTML
\n            
This is some pretend content
\n          
\n        
\n        
\n          
\n            
CSS
\n            
This is some pretend content
\n          
\n        
\n        
\n          
\n            
Code
\n            
This is some pretend content
\n          
\n        
\n      
\n      
\n        
\n          
\n            
View
\n            
This is some pretend content
\n          
\n        
\n        
\n          
\n            
User View
\n            
This is some pretend content
\n          
\n        
\n        
\n          
\n            
Admin View
\n            
This is some pretend content
\n          
\n        
\n      
\n    
\n      
\n    
HTML
\n    
CSS
\n    
Code
\n    
View
\n    
User View
\n    
Admin View
\n      
\n  
\n\n  
Variations
\n  
\n    
Colors
\n    
A label can have different colors
\n    \n      First\n    \n    \n      Fun\n    \n    \n      Happy\n    \n    \n      Smart\n    \n    \n      Radical\n    \n    \n      Insane\n    \n    \n      Exciting\n    \n  
\n\n  
\n    
Horizontal
\n    
A horizontal label is formatted to label content along-side it horizontally
\n    
\n      \n        
Fruit
\n        Kumquats\n      \n      \n        
Candy
\n        Ice Cream\n      \n      \n        
Fruit
\n        Orange\n      \n      \n        
Dog
\n        Poodle\n      \n    
\n  
\n\n  
\n    
Circular
\n    
A label can be circular
\n    \n      12\n    \n    \n      11\n    \n    \n      10\n    \n    \n      64\n    \n    \n      62\n    \n    \n      1\n    \n  
\n  
\n    
\n    
\n    
\n    
\n    
\n    
\n  
\n\n  
\n    
Floating
\n    
A label can float above another element
\n    
\n      \n         Messages\n        
22
\n      \n      \n         Friends\n        
22
\n      \n    
\n  
\n\n\n\n  
\n    
Pointing
\n    
A label can point to content next to it
\n    
\n      
\n        \n        
\n          Please enter a value\n        
\n      
\n      
\n      
\n        
\n          Please enter a value\n        
\n        \n      
\n      
\n      
\n        \n        
\n          That name is taken!\n        
\n      
\n      
\n      
\n        
\n          Your password must be 6 characters or more\n        
\n        \n      
\n    
\n  
\n\n  
\n    
Size
\n    
A label can be small or large
\n    
\n      Fun\n    
\n    

\n    
\n      Fun\n    
\n  
\n\n  
Groups
\n\n  
\n    
Size
\n    
Labels can share sizes together
\n    
\n      
\n        Fun\n      
\n      
\n        Happy\n      
\n      
\n        Smart\n      
\n      
\n        Witty\n      
\n    
\n  
\n  
\n    
Colors
\n    
Labels can share colors together
\n    
\n      \n        Fun \n      \n      \n        Happy\n        
22
\n      \n      \n        Smart\n      \n      \n        Insane\n      \n      \n        Exciting\n      \n    
\n  
\n\n  
\n    
Circular
\n    
Labels can share shapes
\n    
\n      \n        11\n      \n      \n        22\n      \n      \n        33\n      \n      \n        44\n      \n      \n        141\n      \n    
\n  
\n\n
",
      "content": "<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Types\n      Variations\n      Groups\n    
\n  
\n\n  
Types
\n\n  
\n    
Label
\n    
A basic label
\n    
\n       23\n    
\n  
\n  
\n    
Detail
\n    
A label can contain a detail
\n    
\n      Dogs\n      
214
\n    
\n  
\n\n  
\n    
Removable
\n    
A label can contain a delete icon
\n    
\n      Witty\n      \n    
\n  
\n\n  
\n    
Link
\n    
A label can contain a text link
\n    
\n      Inbox\n       23\n    
\n  
\n\n  
\n    
Image
\n    
A label can be formatted to include an image
\n    \n      \n      dog@doggington.com\n      \n    \n    \n      \n      james@thepooch.com\n      \n    \n    \n      \n      kelly@bellyscratcher.com\n      \n    \n  
\n\n  
\n    
Corner
\n    
A label can position itself in the corner of an element
\n    
A corner label must be positioned inside a container with position: relative to display properly
\n    
\n      
\n        \n      
\n      
\n        
New
\n      
\n      This is a normal text segment\n    
\n    
\n      \n        
New
\n      \n      \n    
\n    
\n      \n        \n      \n      \n    
\n  
\n\n  
\n    
Ribbon
\n    
A label can appear as a ribbon attaching itself to an element.
\n    
\n      
\n        
\n          
\n            
Dogs
\n            
Pretty nice animals.
\n            
Cats
\n            
Also pretty nice animals, but can prefer solitude.
\n            
Ogres and monsters
\n            
Never seen one as a pet before, but I imagine they'd make pretty terrible companions.
\n          
\n        
\n      
\n    
\n      
\n      
Dogs
\n      
\n  
\n\n  
\n    
Attached
\n    
A label can attach to a content segment
\n    
\n      
\n        
\n          
\n            
HTML
\n            
This is some pretend content
\n          
\n        
\n        
\n          
\n            
CSS
\n            
This is some pretend content
\n          
\n        
\n        
\n          
\n            
Code
\n            
This is some pretend content
\n          
\n        
\n      
\n      
\n        
\n          
\n            
View
\n            
This is some pretend content
\n          
\n        
\n        
\n          
\n            
User View
\n            
This is some pretend content
\n          
\n        
\n        
\n          
\n            
Admin View
\n            
This is some pretend content
\n          
\n        
\n      
\n    
\n      
\n    
HTML
\n    
CSS
\n    
Code
\n    
View
\n    
User View
\n    
Admin View
\n      
\n  
\n\n  
Variations
\n  
\n    
Colors
\n    
A label can have different colors
\n    \n      First\n    \n    \n      Fun\n    \n    \n      Happy\n    \n    \n      Smart\n    \n    \n      Radical\n    \n    \n      Insane\n    \n    \n      Exciting\n    \n  
\n\n  
\n    
Horizontal
\n    
A horizontal label is formatted to label content along-side it horizontally
\n    
\n      \n        
Fruit
\n        Kumquats\n      \n      \n        
Candy
\n        Ice Cream\n      \n      \n        
Fruit
\n        Orange\n      \n      \n        
Dog
\n        Poodle\n      \n    
\n  
\n\n  
\n    
Circular
\n    
A label can be circular
\n    \n      12\n    \n    \n      11\n    \n    \n      10\n    \n    \n      64\n    \n    \n      62\n    \n    \n      1\n    \n  
\n  
\n    
\n    
\n    
\n    
\n    
\n    
\n  
\n\n  
\n    
Floating
\n    
A label can float above another element
\n    
\n      \n         Messages\n        
22
\n      \n      \n         Friends\n        
22
\n      \n    
\n  
\n\n\n\n  
\n    
Pointing
\n    
A label can point to content next to it
\n    
\n      
\n        \n        
\n          Please enter a value\n        
\n      
\n      
\n      
\n        
\n          Please enter a value\n        
\n        \n      
\n      
\n      
\n        \n        
\n          That name is taken!\n        
\n      
\n      
\n      
\n        
\n          Your password must be 6 characters or more\n        
\n        \n      
\n    
\n  
\n\n  
\n    
Size
\n    
A label can be small or large
\n    
\n      Fun\n    
\n    

\n    
\n      Fun\n    
\n  
\n\n  
Groups
\n\n  
\n    
Size
\n    
Labels can share sizes together
\n    
\n      
\n        Fun\n      
\n      
\n        Happy\n      
\n      
\n        Smart\n      
\n      
\n        Witty\n      
\n    
\n  
\n  
\n    
Colors
\n    
Labels can share colors together
\n    
\n      \n        Fun \n      \n      \n        Happy\n        
22
\n      \n      \n        Smart\n      \n      \n        Insane\n      \n      \n        Exciting\n      \n    
\n  
\n\n  
\n    
Circular
\n    
Labels can share shapes
\n    
\n      \n        11\n      \n      \n        22\n      \n      \n        33\n      \n      \n        44\n      \n      \n        141\n      \n    
\n  
\n\n
",
      "tags": null,
      "render": true,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": "Label",
      "name": "label.html",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "elements-label",
      "url": "/elements/label.html",
      "urls": [
        "/elements/label.html"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": true,
      "header": "layout      : 'default'\ncss         : \"label\"\ntitle       : 'Label'\ndescription : 'Labels give descriptions to pieces of content'\ntype        : 'UI Element'",
      "parser": "yaml",
      "body": "<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Types\n      Variations\n      Groups\n    
\n  
\n\n  
Types
\n\n  
\n    
Label
\n    
A basic label
\n    
\n       23\n    
\n  
\n  
\n    
Detail
\n    
A label can contain a detail
\n    
\n      Dogs\n      
214
\n    
\n  
\n\n  
\n    
Removable
\n    
A label can contain a delete icon
\n    
\n      Witty\n      \n    
\n  
\n\n  
\n    
Link
\n    
A label can contain a text link
\n    
\n      Inbox\n       23\n    
\n  
\n\n  
\n    
Image
\n    
A label can be formatted to include an image
\n    \n      \n      dog@doggington.com\n      \n    \n    \n      \n      james@thepooch.com\n      \n    \n    \n      \n      kelly@bellyscratcher.com\n      \n    \n  
\n\n  
\n    
Corner
\n    
A label can position itself in the corner of an element
\n    
A corner label must be positioned inside a container with position: relative to display properly
\n    
\n      
\n        \n      
\n      
\n        
New
\n      
\n      This is a normal text segment\n    
\n    
\n      \n        
New
\n      \n      \n    
\n    
\n      \n        \n      \n      \n    
\n  
\n\n  
\n    
Ribbon
\n    
A label can appear as a ribbon attaching itself to an element.
\n    
\n      
\n        
\n          
\n            
Dogs
\n            
Pretty nice animals.
\n            
Cats
\n            
Also pretty nice animals, but can prefer solitude.
\n            
Ogres and monsters
\n            
Never seen one as a pet before, but I imagine they'd make pretty terrible companions.
\n          
\n        
\n      
\n    
\n      
\n      
Dogs
\n      
\n  
\n\n  
\n    
Attached
\n    
A label can attach to a content segment
\n    
\n      
\n        
\n          
\n            
HTML
\n            
This is some pretend content
\n          
\n        
\n        
\n          
\n            
CSS
\n            
This is some pretend content
\n          
\n        
\n        
\n          
\n            
Code
\n            
This is some pretend content
\n          
\n        
\n      
\n      
\n        
\n          
\n            
View
\n            
This is some pretend content
\n          
\n        
\n        
\n          
\n            
User View
\n            
This is some pretend content
\n          
\n        
\n        
\n          
\n            
Admin View
\n            
This is some pretend content
\n          
\n        
\n      
\n    
\n      
\n    
HTML
\n    
CSS
\n    
Code
\n    
View
\n    
User View
\n    
Admin View
\n      
\n  
\n\n  
Variations
\n  
\n    
Colors
\n    
A label can have different colors
\n    \n      First\n    \n    \n      Fun\n    \n    \n      Happy\n    \n    \n      Smart\n    \n    \n      Radical\n    \n    \n      Insane\n    \n    \n      Exciting\n    \n  
\n\n  
\n    
Horizontal
\n    
A horizontal label is formatted to label content along-side it horizontally
\n    
\n      \n        
Fruit
\n        Kumquats\n      \n      \n        
Candy
\n        Ice Cream\n      \n      \n        
Fruit
\n        Orange\n      \n      \n        
Dog
\n        Poodle\n      \n    
\n  
\n\n  
\n    
Circular
\n    
A label can be circular
\n    \n      12\n    \n    \n      11\n    \n    \n      10\n    \n    \n      64\n    \n    \n      62\n    \n    \n      1\n    \n  
\n  
\n    
\n    
\n    
\n    
\n    
\n    
\n  
\n\n  
\n    
Floating
\n    
A label can float above another element
\n    
\n      \n         Messages\n        
22
\n      \n      \n         Friends\n        
22
\n      \n    
\n  
\n\n\n\n  
\n    
Pointing
\n    
A label can point to content next to it
\n    
\n      
\n        \n        
\n          Please enter a value\n        
\n      
\n      
\n      
\n        
\n          Please enter a value\n        
\n        \n      
\n      
\n      
\n        \n        
\n          That name is taken!\n        
\n      
\n      
\n      
\n        
\n          Your password must be 6 characters or more\n        
\n        \n      
\n    
\n  
\n\n  
\n    
Size
\n    
A label can be small or large
\n    
\n      Fun\n    
\n    

\n    
\n      Fun\n    
\n  
\n\n  
Groups
\n\n  
\n    
Size
\n    
Labels can share sizes together
\n    
\n      
\n        Fun\n      
\n      
\n        Happy\n      
\n      
\n        Smart\n      
\n      
\n        Witty\n      
\n    
\n  
\n  
\n    
Colors
\n    
Labels can share colors together
\n    
\n      \n        Fun \n      \n      \n        Happy\n        
22
\n      \n      \n        Smart\n      \n      \n        Insane\n      \n      \n        Exciting\n      \n    
\n  
\n\n  
\n    
Circular
\n    
Labels can share shapes
\n    
\n      \n        11\n      \n      \n        22\n      \n      \n        33\n      \n      \n        44\n      \n      \n        141\n      \n    
\n  
\n\n
",
      "rendered": true,
      "contentRendered": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  \n  \n  \n  \n\n  \n\n  \n  \n  Label | Semantic UI\n\n  \n  \n\n  \n\n  \n  \n  \n\n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n\n  \n  \n\n\n  
\n    \n       Close Menu\n    \n    \n       Download\n    \n    
\n      \n        Introduction\n      \n      
\n        \n          Definitions\n        \n          Overview\n        \n          Types\n        \n          Variations\n        \n          What's Different\n        \n      
\n    
\n    
\n      Project\n      
\n        \n          Contributing\n        \n          Set-up\n        \n      
\n    
\n    
\n      Elements\n      
\n        \n          Button\n        \n          Divider\n        \n          Header\n        \n          Icon\n        \n          Image\n        \n          Input\n        \n          Label\n        \n          Loader\n        \n          Progress\n        \n          Reveal\n        \n          Segment\n        \n          Step\n        \n      
\n    
\n    
\n      Collections\n      
\n        \n          Breadcrumb\n        \n          Form\n        \n          Grid\n        \n          Menu\n        \n          Message\n        \n          Table\n        \n      
\n    
\n    
\n      Views\n      
\n        \n          Comment\n        \n          Feed\n        \n          Item\n        \n          List\n        \n      
\n    
\n    
\n      Modules\n      
\n        \n          Accordion\n        \n          Checkbox\n        \n          Dimmer\n        \n          Dropdown\n        \n          Modal\n        \n          Popup\n        \n          Rating\n        \n          Shape\n        \n          Sidebar\n        \n          Transition\n        \n      
\n    
\n    
\n      Behavior\n      
\n        \n          Form Validation\n        \n      
\n    
\n    
\n      Style Guide\n      
\n        \n          CSS\n        \n          Javascript\n        \n          Language\n        \n      
\n    
\n\n  
\n\n  
\n    
\n       Content\n      
\n        UI Element: Label\n      
\n      \n      \n      \n      
\n        7 of 12\n        
\n          \n            
\n              1. Button\n            
\n          \n            
\n              2. Divider\n            
\n          \n            
\n              3. Header\n            
\n          \n            
\n              4. Icon\n            
\n          \n            
\n              5. Image\n            
\n          \n            
\n              6. Input\n            
\n          \n            
\n              7. Label\n            
\n          \n            
\n              8. Loader\n            
\n          \n            
\n              9. Progress\n            
\n          \n            
\n              10. Reveal\n            
\n          \n            
\n              11. Segment\n            
\n          \n            
\n              12. Step\n            
\n          \n        
\n      
\n      \n      \n      \n      
\n        \n        
\n          \n        
\n        \n        \n\n        \n          \n        \n        \n          \n        \n        \n        \n          \n        \n        \n      
\n    
\n  
\n    
\n      \n      Menu\n    
\n  \n\n
\n  
\n    
\n\n      
\n        Label\n        \n      
\n\n      
Labels give descriptions to pieces of content
\n      \n      
\n        Definition Mode\n        \n      
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n\n
\n\n  
\n    
\n      Types\n      Variations\n      Groups\n    
\n  
\n\n  
Types
\n\n  
\n    
Label
\n    
A basic label
\n    
\n       23\n    
\n  
\n  
\n    
Detail
\n    
A label can contain a detail
\n    
\n      Dogs\n      
214
\n    
\n  
\n\n  
\n    
Removable
\n    
A label can contain a delete icon
\n    
\n      Witty\n      \n    
\n  
\n\n  
\n    
Link
\n    
A label can contain a text link
\n    
\n      Inbox\n       23\n    
\n  
\n\n  
\n    
Image
\n    
A label can be formatted to include an image
\n    \n      \n      dog@doggington.com\n      \n    \n    \n      \n      james@thepooch.com\n      \n    \n    \n      \n      kelly@bellyscratcher.com\n      \n    \n  
\n\n  
\n    
Corner
\n    
A label can position itself in the corner of an element
\n    
A corner label must be positioned inside a container with position: relative to display properly
\n    
\n      
\n        \n      
\n      
\n        
New
\n      
\n      This is a normal text segment\n    
\n    
\n      \n        
New
\n      \n      \n    
\n    
\n      \n        \n      \n      \n    
\n  
\n\n  
\n    
Ribbon
\n    
A label can appear as a ribbon attaching itself to an element.
\n    
\n      
\n        
\n          
\n            
Dogs
\n            
Pretty nice animals.
\n            
Cats
\n            
Also pretty nice animals, but can prefer solitude.
\n            
Ogres and monsters
\n            
Never seen one as a pet before, but I imagine they'd make pretty terrible companions.
\n          
\n        
\n      
\n    
\n      
\n      
Dogs
\n      
\n  
\n\n  
\n    
Attached
\n    
A label can attach to a content segment
\n    
\n      
\n        
\n          
\n            
HTML
\n            
This is some pretend content
\n          
\n        
\n        
\n          
\n            
CSS
\n            
This is some pretend content
\n          
\n        
\n        
\n          
\n            
Code
\n            
This is some pretend content
\n          
\n        
\n      
\n      
\n        
\n          
\n            
View
\n            
This is some pretend content
\n          
\n        
\n        
\n          
\n            
User View
\n            
This is some pretend content
\n          
\n        
\n        
\n          
\n            
Admin View
\n            
This is some pretend content
\n          
\n        
\n      
\n    
\n      
\n    
HTML
\n    
CSS
\n    
Code
\n    
View
\n    
User View
\n    
Admin View
\n      
\n  
\n\n  
Variations
\n  
\n    
Colors
\n    
A label can have different colors
\n    \n      First\n    \n    \n      Fun\n    \n    \n      Happy\n    \n    \n      Smart\n    \n    \n      Radical\n    \n    \n      Insane\n    \n    \n      Exciting\n    \n  
\n\n  
\n    
Horizontal
\n    
A horizontal label is formatted to label content along-side it horizontally
\n    
\n      \n        
Fruit
\n        Kumquats\n      \n      \n        
Candy
\n        Ice Cream\n      \n      \n        
Fruit
\n        Orange\n      \n      \n        
Dog
\n        Poodle\n      \n    
\n  
\n\n  
\n    
Circular
\n    
A label can be circular
\n    \n      12\n    \n    \n      11\n    \n    \n      10\n    \n    \n      64\n    \n    \n      62\n    \n    \n      1\n    \n  
\n  
\n    
\n    
\n    
\n    
\n    
\n    
\n  
\n\n  
\n    
Floating
\n    
A label can float above another element
\n    
\n      \n         Messages\n        
22
\n      \n      \n         Friends\n        
22
\n      \n    
\n  
\n\n\n\n  
\n    
Pointing
\n    
A label can point to content next to it
\n    
\n      
\n        \n        
\n          Please enter a value\n        
\n      
\n      
\n      
\n        
\n          Please enter a value\n        
\n        \n      
\n      
\n      
\n        \n        
\n          That name is taken!\n        
\n      
\n      
\n      
\n        
\n          Your password must be 6 characters or more\n        
\n        \n      
\n    
\n  
\n\n  
\n    
Size
\n    
A label can be small or large
\n    
\n      Fun\n    
\n    

\n    
\n      Fun\n    
\n  
\n\n  
Groups
\n\n  
\n    
Size
\n    
Labels can share sizes together
\n    
\n      
\n        Fun\n      
\n      
\n        Happy\n      
\n      
\n        Smart\n      
\n      
\n        Witty\n      
\n    
\n  
\n  
\n    
Colors
\n    
Labels can share colors together
\n    
\n      \n        Fun \n      \n      \n        Happy\n        
22
\n      \n      \n        Smart\n      \n      \n        Insane\n      \n      \n        Exciting\n      \n    
\n  
\n\n  
\n    
Circular
\n    
Labels can share shapes
\n    
\n      \n        11\n      \n      \n        22\n      \n      \n        33\n      \n      \n        44\n      \n      \n        141\n      \n    
\n  
\n\n
\n\n\n",
      "contentRenderedWithoutLayouts": "\n\n
\n  
\n    
\n\n      
\n        Label\n        \n      
\n\n      
Labels give descriptions to pieces of content
\n      \n      
\n        Definition Mode\n        \n      
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n\n
\n\n  
\n    
\n      Types\n      Variations\n      Groups\n    
\n  
\n\n  
Types
\n\n  
\n    
Label
\n    
A basic label
\n    
\n       23\n    
\n  
\n  
\n    
Detail
\n    
A label can contain a detail
\n    
\n      Dogs\n      
214
\n    
\n  
\n\n  
\n    
Removable
\n    
A label can contain a delete icon
\n    
\n      Witty\n      \n    
\n  
\n\n  
\n    
Link
\n    
A label can contain a text link
\n    
\n      Inbox\n       23\n    
\n  
\n\n  
\n    
Image
\n    
A label can be formatted to include an image
\n    \n      \n      dog@doggington.com\n      \n    \n    \n      \n      james@thepooch.com\n      \n    \n    \n      \n      kelly@bellyscratcher.com\n      \n    \n  
\n\n  
\n    
Corner
\n    
A label can position itself in the corner of an element
\n    
A corner label must be positioned inside a container with position: relative to display properly
\n    
\n      
\n        \n      
\n      
\n        
New
\n      
\n      This is a normal text segment\n    
\n    
\n      \n        
New
\n      \n      \n    
\n    
\n      \n        \n      \n      \n    
\n  
\n\n  
\n    
Ribbon
\n    
A label can appear as a ribbon attaching itself to an element.
\n    
\n      
\n        
\n          
\n            
Dogs
\n            
Pretty nice animals.
\n            
Cats
\n            
Also pretty nice animals, but can prefer solitude.
\n            
Ogres and monsters
\n            
Never seen one as a pet before, but I imagine they'd make pretty terrible companions.
\n          
\n        
\n      
\n    
\n      
\n      
Dogs
\n      
\n  
\n\n  
\n    
Attached
\n    
A label can attach to a content segment
\n    
\n      
\n        
\n          
\n            
HTML
\n            
This is some pretend content
\n          
\n        
\n        
\n          
\n            
CSS
\n            
This is some pretend content
\n          
\n        
\n        
\n          
\n            
Code
\n            
This is some pretend content
\n          
\n        
\n      
\n      
\n        
\n          
\n            
View
\n            
This is some pretend content
\n          
\n        
\n        
\n          
\n            
User View
\n            
This is some pretend content
\n          
\n        
\n        
\n          
\n            
Admin View
\n            
This is some pretend content
\n          
\n        
\n      
\n    
\n      
\n    
HTML
\n    
CSS
\n    
Code
\n    
View
\n    
User View
\n    
Admin View
\n      
\n  
\n\n  
Variations
\n  
\n    
Colors
\n    
A label can have different colors
\n    \n      First\n    \n    \n      Fun\n    \n    \n      Happy\n    \n    \n      Smart\n    \n    \n      Radical\n    \n    \n      Insane\n    \n    \n      Exciting\n    \n  
\n\n  
\n    
Horizontal
\n    
A horizontal label is formatted to label content along-side it horizontally
\n    
\n      \n        
Fruit
\n        Kumquats\n      \n      \n        
Candy
\n        Ice Cream\n      \n      \n        
Fruit
\n        Orange\n      \n      \n        
Dog
\n        Poodle\n      \n    
\n  
\n\n  
\n    
Circular
\n    
A label can be circular
\n    \n      12\n    \n    \n      11\n    \n    \n      10\n    \n    \n      64\n    \n    \n      62\n    \n    \n      1\n    \n  
\n  
\n    
\n    
\n    
\n    
\n    
\n    
\n  
\n\n  
\n    
Floating
\n    
A label can float above another element
\n    
\n      \n         Messages\n        
22
\n      \n      \n         Friends\n        
22
\n      \n    
\n  
\n\n\n\n  
\n    
Pointing
\n    
A label can point to content next to it
\n    
\n      
\n        \n        
\n          Please enter a value\n        
\n      
\n      
\n      
\n        
\n          Please enter a value\n        
\n        \n      
\n      
\n      
\n        \n        
\n          That name is taken!\n        
\n      
\n      
\n      
\n        
\n          Your password must be 6 characters or more\n        
\n        \n      
\n    
\n  
\n\n  
\n    
Size
\n    
A label can be small or large
\n    
\n      Fun\n    
\n    

\n    
\n      Fun\n    
\n  
\n\n  
Groups
\n\n  
\n    
Size
\n    
Labels can share sizes together
\n    
\n      
\n        Fun\n      
\n      
\n        Happy\n      
\n      
\n        Smart\n      
\n      
\n        Witty\n      
\n    
\n  
\n  
\n    
Colors
\n    
Labels can share colors together
\n    
\n      \n        Fun \n      \n      \n        Happy\n        
22
\n      \n      \n        Smart\n      \n      \n        Insane\n      \n      \n        Exciting\n      \n    
\n  
\n\n  
\n    
Circular
\n    
Labels can share shapes
\n    
\n      \n        11\n      \n      \n        22\n      \n      \n        33\n      \n      \n        44\n      \n      \n        141\n      \n    
\n  
\n\n
",
      "renderSingleExtensions": false,
      "layout": "default",
      "css": "label",
      "description": "Labels give descriptions to pieces of content",
      "type": "UI Element",
      "layoutRelativePath": "default.html.eco",
      "meta": {
        "layout": "default",
        "css": "label",
        "title": "Label",
        "description": "Labels give descriptions to pieces of content",
        "type": "UI Element"
      }
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/documents/elements/loader.html.eco",
      "relativePath": "elements/loader.html.eco",
      "basename": "loader",
      "outBasename": "loader",
      "extension": "eco",
      "outExtension": "html",
      "extensions": [
        "html",
        "eco"
      ],
      "filename": "loader.html.eco",
      "fullDirPath": "/home/jack/projects/semantic/server/documents/elements",
      "outPath": "/home/jack/projects/semantic/docs/elements/loader.html",
      "outDirPath": "/home/jack/projects/semantic/docs/elements",
      "outFilename": "loader.html",
      "relativeOutPath": "elements/loader.html",
      "relativeDirPath": "elements",
      "relativeOutDirPath": "elements",
      "relativeBase": "elements/loader",
      "relativeOutBase": "elements/loader",
      "contentType": "application/octet-stream",
      "outContentType": "text/html",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": "2013-12-04T09:15:25.404Z",
      "wtime": "2013-12-04T09:15:28.648Z",
      "exists": true,
      "encoding": "utf8",
      "source": "---\nlayout      : 'default'\ncss         : 'loader'\ntitle       : 'Loader'\ndescription : 'Loaders lets a user know to wait for activity to finish'\ntype        : 'UI Element'\n---\n\n<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Types\n      States\n      Variations\n    
\n  
\n\n  
Types
\n  
\n    
Loader
\n    
A loader
\n    
Loaders by default are hidden unless inside of a dimmer.
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
\n        
\n      
\n    
\n  
\n\n  
\n    
Text Loader
\n    
A loader can contain text
\n    
\n      
\n        
Loading
\n      
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n  
\n    
\n      
\n        
Loading
\n      
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n\n\n  
States
\n\n  
\n    
Active
\n    
A loader can be active or visible
\n    
\n      
\n      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.\n    
\n  
\n\n  
\n    
Disabled
\n    
A loader can be disabled or hidden
\n    
\n      
\n      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.\n    
\n  
\n\n\n  
Variations
\n\n  
\n    
Inline
\n    
Loaders can appear inline with content 
\n    
\n  
\n  
\n    
Size
\n    
Loaders can have different sizes
\n\n    
\n      
Loading
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Loading
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Loading
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Loading
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n\n  
\n    
Inverted
\n    
Loaders can have their colors inverted.
\n    
Loaders will automatically be inverted inside dimmers to maintain consistency
\n    
\n      
Loading
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Loading
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Loading
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Loading
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n  
\n  
\n\n\n
",
      "content": "<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Types\n      States\n      Variations\n    
\n  
\n\n  
Types
\n  
\n    
Loader
\n    
A loader
\n    
Loaders by default are hidden unless inside of a dimmer.
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
\n        
\n      
\n    
\n  
\n\n  
\n    
Text Loader
\n    
A loader can contain text
\n    
\n      
\n        
Loading
\n      
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n  
\n    
\n      
\n        
Loading
\n      
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n\n\n  
States
\n\n  
\n    
Active
\n    
A loader can be active or visible
\n    
\n      
\n      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.\n    
\n  
\n\n  
\n    
Disabled
\n    
A loader can be disabled or hidden
\n    
\n      
\n      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.\n    
\n  
\n\n\n  
Variations
\n\n  
\n    
Inline
\n    
Loaders can appear inline with content 
\n    
\n  
\n  
\n    
Size
\n    
Loaders can have different sizes
\n\n    
\n      
Loading
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Loading
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Loading
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Loading
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n\n  
\n    
Inverted
\n    
Loaders can have their colors inverted.
\n    
Loaders will automatically be inverted inside dimmers to maintain consistency
\n    
\n      
Loading
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Loading
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Loading
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Loading
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n  
\n  
\n\n\n
",
      "tags": null,
      "render": true,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": "Loader",
      "name": "loader.html",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "elements-loader",
      "url": "/elements/loader.html",
      "urls": [
        "/elements/loader.html"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": true,
      "header": "layout      : 'default'\ncss         : 'loader'\ntitle       : 'Loader'\ndescription : 'Loaders lets a user know to wait for activity to finish'\ntype        : 'UI Element'",
      "parser": "yaml",
      "body": "<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Types\n      States\n      Variations\n    
\n  
\n\n  
Types
\n  
\n    
Loader
\n    
A loader
\n    
Loaders by default are hidden unless inside of a dimmer.
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
\n        
\n      
\n    
\n  
\n\n  
\n    
Text Loader
\n    
A loader can contain text
\n    
\n      
\n        
Loading
\n      
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n  
\n    
\n      
\n        
Loading
\n      
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n\n\n  
States
\n\n  
\n    
Active
\n    
A loader can be active or visible
\n    
\n      
\n      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.\n    
\n  
\n\n  
\n    
Disabled
\n    
A loader can be disabled or hidden
\n    
\n      
\n      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.\n    
\n  
\n\n\n  
Variations
\n\n  
\n    
Inline
\n    
Loaders can appear inline with content 
\n    
\n  
\n  
\n    
Size
\n    
Loaders can have different sizes
\n\n    
\n      
Loading
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Loading
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Loading
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Loading
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n\n  
\n    
Inverted
\n    
Loaders can have their colors inverted.
\n    
Loaders will automatically be inverted inside dimmers to maintain consistency
\n    
\n      
Loading
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Loading
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Loading
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Loading
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n  
\n  
\n\n\n",
      "rendered": true,
      "contentRendered": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  \n  \n  \n  \n\n  \n\n  \n  \n  Loader | Semantic UI\n\n  \n  \n\n  \n\n  \n  \n  \n\n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n\n  \n  \n\n\n  
\n    \n       Close Menu\n    \n    \n       Download\n    \n    
\n      \n        Introduction\n      \n      
\n        \n          Definitions\n        \n          Overview\n        \n          Types\n        \n          Variations\n        \n          What's Different\n        \n      
\n    
\n    
\n      Project\n      
\n        \n          Contributing\n        \n          Set-up\n        \n      
\n    
\n    
\n      Elements\n      
\n        \n          Button\n        \n          Divider\n        \n          Header\n        \n          Icon\n        \n          Image\n        \n          Input\n        \n          Label\n        \n          Loader\n        \n          Progress\n        \n          Reveal\n        \n          Segment\n        \n          Step\n        \n      
\n    
\n    
\n      Collections\n      
\n        \n          Breadcrumb\n        \n          Form\n        \n          Grid\n        \n          Menu\n        \n          Message\n        \n          Table\n        \n      
\n    
\n    
\n      Views\n      
\n        \n          Comment\n        \n          Feed\n        \n          Item\n        \n          List\n        \n      
\n    
\n    
\n      Modules\n      
\n        \n          Accordion\n        \n          Checkbox\n        \n          Dimmer\n        \n          Dropdown\n        \n          Modal\n        \n          Popup\n        \n          Rating\n        \n          Shape\n        \n          Sidebar\n        \n          Transition\n        \n      
\n    
\n    
\n      Behavior\n      
\n        \n          Form Validation\n        \n      
\n    
\n    
\n      Style Guide\n      
\n        \n          CSS\n        \n          Javascript\n        \n          Language\n        \n      
\n    
\n\n  
\n\n  
\n    
\n       Content\n      
\n        UI Element: Loader\n      
\n      \n      \n      \n      
\n        8 of 12\n        
\n          \n            
\n              1. Button\n            
\n          \n            
\n              2. Divider\n            
\n          \n            
\n              3. Header\n            
\n          \n            
\n              4. Icon\n            
\n          \n            
\n              5. Image\n            
\n          \n            
\n              6. Input\n            
\n          \n            
\n              7. Label\n            
\n          \n            
\n              8. Loader\n            
\n          \n            
\n              9. Progress\n            
\n          \n            
\n              10. Reveal\n            
\n          \n            
\n              11. Segment\n            
\n          \n            
\n              12. Step\n            
\n          \n        
\n      
\n      \n      \n      \n      
\n        \n        
\n          \n        
\n        \n        \n\n        \n          \n        \n        \n          \n        \n        \n        \n          \n        \n        \n      
\n    
\n  
\n    
\n      \n      Menu\n    
\n  \n\n
\n  
\n    
\n\n      
\n        Loader\n        \n      
\n\n      
Loaders lets a user know to wait for activity to finish
\n      \n      
\n        Definition Mode\n        \n      
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n\n
\n\n  
\n    
\n      Types\n      States\n      Variations\n    
\n  
\n\n  
Types
\n  
\n    
Loader
\n    
A loader
\n    
Loaders by default are hidden unless inside of a dimmer.
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
\n        
\n      
\n    
\n  
\n\n  
\n    
Text Loader
\n    
A loader can contain text
\n    
\n      
\n        
Loading
\n      
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n  
\n    
\n      
\n        
Loading
\n      
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n\n\n  
States
\n\n  
\n    
Active
\n    
A loader can be active or visible
\n    
\n      
\n      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.\n    
\n  
\n\n  
\n    
Disabled
\n    
A loader can be disabled or hidden
\n    
\n      
\n      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.\n    
\n  
\n\n\n  
Variations
\n\n  
\n    
Inline
\n    
Loaders can appear inline with content 
\n    
\n  
\n  
\n    
Size
\n    
Loaders can have different sizes
\n\n    
\n      
Loading
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Loading
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Loading
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Loading
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n\n  
\n    
Inverted
\n    
Loaders can have their colors inverted.
\n    
Loaders will automatically be inverted inside dimmers to maintain consistency
\n    
\n      
Loading
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Loading
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Loading
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Loading
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n  
\n  \n\n\n\n\n\n",
      "contentRenderedWithoutLayouts": "\n\n
\n  
\n    
\n\n      
\n        Loader\n        \n      
\n\n      
Loaders lets a user know to wait for activity to finish
\n      \n      
\n        Definition Mode\n        \n      
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n\n
\n\n  
\n    
\n      Types\n      States\n      Variations\n    
\n  
\n\n  
Types
\n  
\n    
Loader
\n    
A loader
\n    
Loaders by default are hidden unless inside of a dimmer.
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
\n        
\n      
\n    
\n  
\n\n  
\n    
Text Loader
\n    
A loader can contain text
\n    
\n      
\n        
Loading
\n      
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n  
\n    
\n      
\n        
Loading
\n      
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n\n\n  
States
\n\n  
\n    
Active
\n    
A loader can be active or visible
\n    
\n      
\n      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.\n    
\n  
\n\n  
\n    
Disabled
\n    
A loader can be disabled or hidden
\n    
\n      
\n      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.\n    
\n  
\n\n\n  
Variations
\n\n  
\n    
Inline
\n    
Loaders can appear inline with content 
\n    
\n  
\n  
\n    
Size
\n    
Loaders can have different sizes
\n\n    
\n      
Loading
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Loading
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Loading
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Loading
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n\n  
\n    
Inverted
\n    
Loaders can have their colors inverted.
\n    
Loaders will automatically be inverted inside dimmers to maintain consistency
\n    
\n      
Loading
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Loading
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Loading
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Loading
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n  
\n  \n\n\n",
      "renderSingleExtensions": false,
      "layout": "default",
      "css": "loader",
      "description": "Loaders lets a user know to wait for activity to finish",
      "type": "UI Element",
      "layoutRelativePath": "default.html.eco",
      "meta": {
        "layout": "default",
        "css": "loader",
        "title": "Loader",
        "description": "Loaders lets a user know to wait for activity to finish",
        "type": "UI Element"
      }
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/documents/elements/progress.html.eco",
      "relativePath": "elements/progress.html.eco",
      "basename": "progress",
      "outBasename": "progress",
      "extension": "eco",
      "outExtension": "html",
      "extensions": [
        "html",
        "eco"
      ],
      "filename": "progress.html.eco",
      "fullDirPath": "/home/jack/projects/semantic/server/documents/elements",
      "outPath": "/home/jack/projects/semantic/docs/elements/progress.html",
      "outDirPath": "/home/jack/projects/semantic/docs/elements",
      "outFilename": "progress.html",
      "relativeOutPath": "elements/progress.html",
      "relativeDirPath": "elements",
      "relativeOutDirPath": "elements",
      "relativeBase": "elements/progress",
      "relativeOutBase": "elements/progress",
      "contentType": "application/octet-stream",
      "outContentType": "text/html",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": "2013-12-04T09:15:25.472Z",
      "wtime": "2013-12-04T09:15:28.651Z",
      "exists": true,
      "encoding": "utf8",
      "source": "---\nlayout      : 'default'\ncss         : 'progress'\ntitle       : 'Progress'\ndescription : 'Progress bars show the percent of a task complete'\ntype        : 'UI Element'\n---\n\n<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Types\n      States\n      Variations\n    
\n  
\n  
Types
\n\n  
\n    
Progress Bar
\n    
A standard progress bar
\n    
\n      
\n    
\n  
\n\n  
States
\n\n  
\n    
Active
\n    
A progress bar can show activity
\n    
\n      
\n    
\n  
\n\n\n  
\n  
Successful
\n  
A progress bar can show success
\n    
\n      
\n    
\n  
\n\n  
\n  
Failed
\n  
A progress bar can show failure
\n    
\n      
\n    
\n  
\n\n  
\n  
Disabled
\n  
A progress bar can be disabled
\n    
\n      
\n    
\n  
\n\n  
Variations
\n\n\n  
\n    
Attached
\n    
A progress bar can show progress of an element
\n    
\n      
\n    
\n    
\n      
La la la la
\n    
\n    
\n      
\n    
\n  
\n\n\n  
\n    
Color
\n    
Can have different colors:
\n    
\n      
\n    
\n    
\n      
\n    
\n    
\n      
\n    
\n    
\n      
\n    
\n    
\n      
\n    
\n    
\n      
\n    
\n    
\n      
\n    
\n  
\n\n  
\n    
Striped
\n    
A progress bar can be striped
\n    
\n      
\n    
\n  
\n  
\n    
\n      
\n    
\n  
\n\n
",
      "content": "<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Types\n      States\n      Variations\n    
\n  
\n  
Types
\n\n  
\n    
Progress Bar
\n    
A standard progress bar
\n    
\n      
\n    
\n  
\n\n  
States
\n\n  
\n    
Active
\n    
A progress bar can show activity
\n    
\n      
\n    
\n  
\n\n\n  
\n  
Successful
\n  
A progress bar can show success
\n    
\n      
\n    
\n  
\n\n  
\n  
Failed
\n  
A progress bar can show failure
\n    
\n      
\n    
\n  
\n\n  
\n  
Disabled
\n  
A progress bar can be disabled
\n    
\n      
\n    
\n  
\n\n  
Variations
\n\n\n  
\n    
Attached
\n    
A progress bar can show progress of an element
\n    
\n      
\n    
\n    
\n      
La la la la
\n    
\n    
\n      
\n    
\n  
\n\n\n  
\n    
Color
\n    
Can have different colors:
\n    
\n      
\n    
\n    
\n      
\n    
\n    
\n      
\n    
\n    
\n      
\n    
\n    
\n      
\n    
\n    
\n      
\n    
\n    
\n      
\n    
\n  
\n\n  
\n    
Striped
\n    
A progress bar can be striped
\n    
\n      
\n    
\n  
\n  
\n    
\n      
\n    
\n  
\n\n
",
      "tags": null,
      "render": true,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": "Progress",
      "name": "progress.html",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "elements-progress",
      "url": "/elements/progress.html",
      "urls": [
        "/elements/progress.html"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": true,
      "header": "layout      : 'default'\ncss         : 'progress'\ntitle       : 'Progress'\ndescription : 'Progress bars show the percent of a task complete'\ntype        : 'UI Element'",
      "parser": "yaml",
      "body": "<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Types\n      States\n      Variations\n    
\n  
\n  
Types
\n\n  
\n    
Progress Bar
\n    
A standard progress bar
\n    
\n      
\n    
\n  
\n\n  
States
\n\n  
\n    
Active
\n    
A progress bar can show activity
\n    
\n      
\n    
\n  
\n\n\n  
\n  
Successful
\n  
A progress bar can show success
\n    
\n      
\n    
\n  
\n\n  
\n  
Failed
\n  
A progress bar can show failure
\n    
\n      
\n    
\n  
\n\n  
\n  
Disabled
\n  
A progress bar can be disabled
\n    
\n      
\n    
\n  
\n\n  
Variations
\n\n\n  
\n    
Attached
\n    
A progress bar can show progress of an element
\n    
\n      
\n    
\n    
\n      
La la la la
\n    
\n    
\n      
\n    
\n  
\n\n\n  
\n    
Color
\n    
Can have different colors:
\n    
\n      
\n    
\n    
\n      
\n    
\n    
\n      
\n    
\n    
\n      
\n    
\n    
\n      
\n    
\n    
\n      
\n    
\n    
\n      
\n    
\n  
\n\n  
\n    
Striped
\n    
A progress bar can be striped
\n    
\n      
\n    
\n  
\n  
\n    
\n      
\n    
\n  
\n\n
",
      "rendered": true,
      "contentRendered": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  \n  \n  \n  \n\n  \n\n  \n  \n  Progress | Semantic UI\n\n  \n  \n\n  \n\n  \n  \n  \n\n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n\n  \n  \n\n\n  
\n    \n       Close Menu\n    \n    \n       Download\n    \n    
\n      \n        Introduction\n      \n      
\n        \n          Definitions\n        \n          Overview\n        \n          Types\n        \n          Variations\n        \n          What's Different\n        \n      
\n    
\n    
\n      Project\n      
\n        \n          Contributing\n        \n          Set-up\n        \n      
\n    
\n    
\n      Elements\n      
\n        \n          Button\n        \n          Divider\n        \n          Header\n        \n          Icon\n        \n          Image\n        \n          Input\n        \n          Label\n        \n          Loader\n        \n          Progress\n        \n          Reveal\n        \n          Segment\n        \n          Step\n        \n      
\n    
\n    
\n      Collections\n      
\n        \n          Breadcrumb\n        \n          Form\n        \n          Grid\n        \n          Menu\n        \n          Message\n        \n          Table\n        \n      
\n    
\n    
\n      Views\n      
\n        \n          Comment\n        \n          Feed\n        \n          Item\n        \n          List\n        \n      
\n    
\n    
\n      Modules\n      
\n        \n          Accordion\n        \n          Checkbox\n        \n          Dimmer\n        \n          Dropdown\n        \n          Modal\n        \n          Popup\n        \n          Rating\n        \n          Shape\n        \n          Sidebar\n        \n          Transition\n        \n      
\n    
\n    
\n      Behavior\n      
\n        \n          Form Validation\n        \n      
\n    
\n    
\n      Style Guide\n      
\n        \n          CSS\n        \n          Javascript\n        \n          Language\n        \n      
\n    
\n\n  
\n\n  
\n    
\n       Content\n      
\n        UI Element: Progress\n      
\n      \n      \n      \n      
\n        9 of 12\n        
\n          \n            
\n              1. Button\n            
\n          \n            
\n              2. Divider\n            
\n          \n            
\n              3. Header\n            
\n          \n            
\n              4. Icon\n            
\n          \n            
\n              5. Image\n            
\n          \n            
\n              6. Input\n            
\n          \n            
\n              7. Label\n            
\n          \n            
\n              8. Loader\n            
\n          \n            
\n              9. Progress\n            
\n          \n            
\n              10. Reveal\n            
\n          \n            
\n              11. Segment\n            
\n          \n            
\n              12. Step\n            
\n          \n        
\n      
\n      \n      \n      \n      
\n        \n        
\n          \n        
\n        \n        \n\n        \n          \n        \n        \n          \n        \n        \n        \n          \n        \n        \n      
\n    
\n  
\n    
\n      \n      Menu\n    
\n  \n\n
\n  
\n    
\n\n      
\n        Progress\n        \n      
\n\n      
Progress bars show the percent of a task complete
\n      \n      
\n        Definition Mode\n        \n      
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n\n
\n\n  
\n    
\n      Types\n      States\n      Variations\n    
\n  
\n  
Types
\n\n  
\n    
Progress Bar
\n    
A standard progress bar
\n    
\n      
\n    
\n  
\n\n  
States
\n\n  
\n    
Active
\n    
A progress bar can show activity
\n    
\n      
\n    
\n  
\n\n\n  
\n  
Successful
\n  
A progress bar can show success
\n    
\n      
\n    
\n  
\n\n  
\n  
Failed
\n  
A progress bar can show failure
\n    
\n      
\n    
\n  
\n\n  
\n  
Disabled
\n  
A progress bar can be disabled
\n    
\n      
\n    
\n  
\n\n  
Variations
\n\n\n  
\n    
Attached
\n    
A progress bar can show progress of an element
\n    
\n      
\n    
\n    
\n      
La la la la
\n    
\n    
\n      
\n    
\n  
\n\n\n  
\n    
Color
\n    
Can have different colors:
\n    
\n      
\n    
\n    
\n      
\n    
\n    
\n      
\n    
\n    
\n      
\n    
\n    
\n      
\n    
\n    
\n      
\n    
\n    
\n      
\n    
\n  
\n\n  
\n    
Striped
\n    
A progress bar can be striped
\n    
\n      
\n    
\n  
\n  
\n    
\n      
\n    
\n  
\n\n
\n\n\n",
      "contentRenderedWithoutLayouts": "\n\n
\n  
\n    
\n\n      
\n        Progress\n        \n      
\n\n      
Progress bars show the percent of a task complete
\n      \n      
\n        Definition Mode\n        \n      
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n\n
\n\n  
\n    
\n      Types\n      States\n      Variations\n    
\n  
\n  
Types
\n\n  
\n    
Progress Bar
\n    
A standard progress bar
\n    
\n      
\n    
\n  
\n\n  
States
\n\n  
\n    
Active
\n    
A progress bar can show activity
\n    
\n      
\n    
\n  
\n\n\n  
\n  
Successful
\n  
A progress bar can show success
\n    
\n      
\n    
\n  
\n\n  
\n  
Failed
\n  
A progress bar can show failure
\n    
\n      
\n    
\n  
\n\n  
\n  
Disabled
\n  
A progress bar can be disabled
\n    
\n      
\n    
\n  
\n\n  
Variations
\n\n\n  
\n    
Attached
\n    
A progress bar can show progress of an element
\n    
\n      
\n    
\n    
\n      
La la la la
\n    
\n    
\n      
\n    
\n  
\n\n\n  
\n    
Color
\n    
Can have different colors:
\n    
\n      
\n    
\n    
\n      
\n    
\n    
\n      
\n    
\n    
\n      
\n    
\n    
\n      
\n    
\n    
\n      
\n    
\n    
\n      
\n    
\n  
\n\n  
\n    
Striped
\n    
A progress bar can be striped
\n    
\n      
\n    
\n  
\n  
\n    
\n      
\n    
\n  
\n\n
",
      "renderSingleExtensions": false,
      "layout": "default",
      "css": "progress",
      "description": "Progress bars show the percent of a task complete",
      "type": "UI Element",
      "layoutRelativePath": "default.html.eco",
      "meta": {
        "layout": "default",
        "css": "progress",
        "title": "Progress",
        "description": "Progress bars show the percent of a task complete",
        "type": "UI Element"
      }
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/documents/elements/segment.html.eco",
      "relativePath": "elements/segment.html.eco",
      "basename": "segment",
      "outBasename": "segment",
      "extension": "eco",
      "outExtension": "html",
      "extensions": [
        "html",
        "eco"
      ],
      "filename": "segment.html.eco",
      "fullDirPath": "/home/jack/projects/semantic/server/documents/elements",
      "outPath": "/home/jack/projects/semantic/docs/elements/segment.html",
      "outDirPath": "/home/jack/projects/semantic/docs/elements",
      "outFilename": "segment.html",
      "relativeOutPath": "elements/segment.html",
      "relativeDirPath": "elements",
      "relativeOutDirPath": "elements",
      "relativeBase": "elements/segment",
      "relativeOutBase": "elements/segment",
      "contentType": "application/octet-stream",
      "outContentType": "text/html",
      "ctime": "2013-12-04T08:59:02.000Z",
      "mtime": "2013-12-04T08:59:02.000Z",
      "rtime": "2013-12-04T09:15:25.536Z",
      "wtime": "2013-12-04T09:15:28.655Z",
      "exists": true,
      "encoding": "utf8",
      "source": "---\nlayout      : 'default'\ncss         : 'segment'\ntitle       : 'Segment'\ndescription : 'A segment is used to create a grouping of related content.'\ntype        : 'UI Element'\n---\n<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Types\n      States\n      Variations\n    
\n  
\n  
Types
\n\n  
\n    
Segment
\n    
A segment of content
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n  
\n    
Vertical Segment
\n    
A vertical segment divides content vertically
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n  
\n    
Horizontal Segment
\n    
A horizontal segment divides content horizontally
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n\n  
\n    
Piled
\n    
A segment can be formatted to look like a pile of pages
\n    
\n      
A header
\n      
Te eum doming eirmod, nominati pertinacia argumentum ad his. Ex eam alia facete scriptorem, est autem aliquip detraxit at. Usu ocurreret referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei ex natum rebum iisque.
\n\n      
Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide phaedrum, vim vivendum maiestatis in.
\n\n      
Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id. Mei ut facer dolores adolescens, no illum aperiri quo, usu odio brute at. Qui te porro electram, ea dico facete utroque quo. Populo quodsi te eam, wisi everti eos ex, eum elitr altera utamur at. Quodsi convenire mnesarchum eu per, quas minimum postulant per id.
\n    
\n  
\n\n  
\n    
Stacked
\n    
A segment can be formatted to show it contains multiple pages
\n    
\n      
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
\n    
\n  
\n\n\n\n  
States
\n\n  
\n    
Disabled
\n    
A segment may show its content is disabled\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n\n  
Variations
\n\n  
\n    
Inverted
\n    
A segment can have its colors inverted for contrast
\n    
\n      
I'm here to tell you something, and you will probably read me first.
\n    
\n  
\n\n  
\n    
Raised
\n    
A segment may be formatted to raise above the page.
\n    
\n      
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
\n    
\n  
\n\n  
\n    
Colored
\n    
A segment can be colored
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
\n        
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n          
\n            
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n            
\n              
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n              
\n                
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n              
\n            
\n          
\n        
\n      
\n    
\n  
\n  
\n    
These colors can be inverted
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n\n  
\n    
Ordinality
\n    
A segment can be formatted to appear more or less noticeable
\n    
\n      
I'm here to tell you something, and you will probably read me first.
\n    
\n    
\n      
I am pretty noticeable but you might check out other content before you look at me.
\n    
\n    
\n      
If you notice me you must be looking very hard.
\n    
\n  
\n  
\n    
Inverted colors may also be more or less noticeable
\n    
\n      
I'm here to tell you something, and you will probably read me first.
\n    
\n    
\n      
I am pretty noticeable but you might check out other content before you look at me.
\n    
\n    
\n      
If you notice me you must be looking very hard.
\n    
\n  
\n  
\n    
\n      
I'm here to tell you something, and you will probably read me first.
\n    
\n    
\n      
I am pretty noticeable but you might check out other content before you look at me.
\n    
\n    
\n      
If you notice me you must be looking very hard.
\n    
\n  
\n\n  
\n    
Circular
\n    
A segment can be circular
\n    
A circular segment will most likely have to have its content manually sized to be equal width and height, otherwise it will flow to the size of your content
\n    
\n      
\n        Buy Now\n        
$10.99
\n      
\n    
\n    
\n      
\n        Buy Now\n        
$10.99
\n      
\n    
\n  
\n  
\n  
\n\n  
\n    
Floated
\n    
A segment cant sit to the left or right of other content
\n    
\n      
This segment will appear to the right\n    
\n    
\n      This segment will appear to the left\n    
\n  
\n\n  
\n    
Text Alignment
\n    
A segment cant have its text aligned to a side
\n    
\n      Right\n    
\n    
\n      Left\n    
\n    
\n      Center\n    
\n    
\n      This segment is justified to take up the whole width. Justified content must be at least the content width to be justified correctly.\n    
\n  
\n\n  
\n    
Basic
\n    
A basic segment has no special formatting
\n    
\n      
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
\n    
\n  
\n  
\n    
Attached
\n    
A segment can be attached to other content on a page
\n\n    
\n      
This segment is on top
\n    
\n    
\n      
This segment is attached on both sides
\n    
\n    
\n      
This segment is on bottom
\n    
\n  
\n\n\n
",
      "content": "<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Types\n      States\n      Variations\n    
\n  
\n  
Types
\n\n  
\n    
Segment
\n    
A segment of content
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n  
\n    
Vertical Segment
\n    
A vertical segment divides content vertically
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n  
\n    
Horizontal Segment
\n    
A horizontal segment divides content horizontally
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n\n  
\n    
Piled
\n    
A segment can be formatted to look like a pile of pages
\n    
\n      
A header
\n      
Te eum doming eirmod, nominati pertinacia argumentum ad his. Ex eam alia facete scriptorem, est autem aliquip detraxit at. Usu ocurreret referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei ex natum rebum iisque.
\n\n      
Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide phaedrum, vim vivendum maiestatis in.
\n\n      
Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id. Mei ut facer dolores adolescens, no illum aperiri quo, usu odio brute at. Qui te porro electram, ea dico facete utroque quo. Populo quodsi te eam, wisi everti eos ex, eum elitr altera utamur at. Quodsi convenire mnesarchum eu per, quas minimum postulant per id.
\n    
\n  
\n\n  
\n    
Stacked
\n    
A segment can be formatted to show it contains multiple pages
\n    
\n      
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
\n    
\n  
\n\n\n\n  
States
\n\n  
\n    
Disabled
\n    
A segment may show its content is disabled\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n\n  
Variations
\n\n  
\n    
Inverted
\n    
A segment can have its colors inverted for contrast
\n    
\n      
I'm here to tell you something, and you will probably read me first.
\n    
\n  
\n\n  
\n    
Raised
\n    
A segment may be formatted to raise above the page.
\n    
\n      
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
\n    
\n  
\n\n  
\n    
Colored
\n    
A segment can be colored
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
\n        
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n          
\n            
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n            
\n              
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n              
\n                
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n              
\n            
\n          
\n        
\n      
\n    
\n  
\n  
\n    
These colors can be inverted
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n\n  
\n    
Ordinality
\n    
A segment can be formatted to appear more or less noticeable
\n    
\n      
I'm here to tell you something, and you will probably read me first.
\n    
\n    
\n      
I am pretty noticeable but you might check out other content before you look at me.
\n    
\n    
\n      
If you notice me you must be looking very hard.
\n    
\n  
\n  
\n    
Inverted colors may also be more or less noticeable
\n    
\n      
I'm here to tell you something, and you will probably read me first.
\n    
\n    
\n      
I am pretty noticeable but you might check out other content before you look at me.
\n    
\n    
\n      
If you notice me you must be looking very hard.
\n    
\n  
\n  
\n    
\n      
I'm here to tell you something, and you will probably read me first.
\n    
\n    
\n      
I am pretty noticeable but you might check out other content before you look at me.
\n    
\n    
\n      
If you notice me you must be looking very hard.
\n    
\n  
\n\n  
\n    
Circular
\n    
A segment can be circular
\n    
A circular segment will most likely have to have its content manually sized to be equal width and height, otherwise it will flow to the size of your content
\n    
\n      
\n        Buy Now\n        
$10.99
\n      
\n    
\n    
\n      
\n        Buy Now\n        
$10.99
\n      
\n    
\n  
\n  
\n  
\n\n  
\n    
Floated
\n    
A segment cant sit to the left or right of other content
\n    
\n      
This segment will appear to the right\n    
\n    
\n      This segment will appear to the left\n    
\n  
\n\n  
\n    
Text Alignment
\n    
A segment cant have its text aligned to a side
\n    
\n      Right\n    
\n    
\n      Left\n    
\n    
\n      Center\n    
\n    
\n      This segment is justified to take up the whole width. Justified content must be at least the content width to be justified correctly.\n    
\n  
\n\n  
\n    
Basic
\n    
A basic segment has no special formatting
\n    
\n      
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
\n    
\n  
\n  
\n    
Attached
\n    
A segment can be attached to other content on a page
\n\n    
\n      
This segment is on top
\n    
\n    
\n      
This segment is attached on both sides
\n    
\n    
\n      
This segment is on bottom
\n    
\n  
\n\n\n
",
      "tags": null,
      "render": true,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": "Segment",
      "name": "segment.html",
      "date": "2013-12-04T08:59:02.000Z",
      "slug": "elements-segment",
      "url": "/elements/segment.html",
      "urls": [
        "/elements/segment.html"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": true,
      "header": "layout      : 'default'\ncss         : 'segment'\ntitle       : 'Segment'\ndescription : 'A segment is used to create a grouping of related content.'\ntype        : 'UI Element'",
      "parser": "yaml",
      "body": "<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Types\n      States\n      Variations\n    
\n  
\n  
Types
\n\n  
\n    
Segment
\n    
A segment of content
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n  
\n    
Vertical Segment
\n    
A vertical segment divides content vertically
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n  
\n    
Horizontal Segment
\n    
A horizontal segment divides content horizontally
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n\n  
\n    
Piled
\n    
A segment can be formatted to look like a pile of pages
\n    
\n      
A header
\n      
Te eum doming eirmod, nominati pertinacia argumentum ad his. Ex eam alia facete scriptorem, est autem aliquip detraxit at. Usu ocurreret referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei ex natum rebum iisque.
\n\n      
Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide phaedrum, vim vivendum maiestatis in.
\n\n      
Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id. Mei ut facer dolores adolescens, no illum aperiri quo, usu odio brute at. Qui te porro electram, ea dico facete utroque quo. Populo quodsi te eam, wisi everti eos ex, eum elitr altera utamur at. Quodsi convenire mnesarchum eu per, quas minimum postulant per id.
\n    
\n  
\n\n  
\n    
Stacked
\n    
A segment can be formatted to show it contains multiple pages
\n    
\n      
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
\n    
\n  
\n\n\n\n  
States
\n\n  
\n    
Disabled
\n    
A segment may show its content is disabled\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n\n  
Variations
\n\n  
\n    
Inverted
\n    
A segment can have its colors inverted for contrast
\n    
\n      
I'm here to tell you something, and you will probably read me first.
\n    
\n  
\n\n  
\n    
Raised
\n    
A segment may be formatted to raise above the page.
\n    
\n      
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
\n    
\n  
\n\n  
\n    
Colored
\n    
A segment can be colored
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
\n        
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n          
\n            
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n            
\n              
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n              
\n                
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n              
\n            
\n          
\n        
\n      
\n    
\n  
\n  
\n    
These colors can be inverted
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n\n  
\n    
Ordinality
\n    
A segment can be formatted to appear more or less noticeable
\n    
\n      
I'm here to tell you something, and you will probably read me first.
\n    
\n    
\n      
I am pretty noticeable but you might check out other content before you look at me.
\n    
\n    
\n      
If you notice me you must be looking very hard.
\n    
\n  
\n  
\n    
Inverted colors may also be more or less noticeable
\n    
\n      
I'm here to tell you something, and you will probably read me first.
\n    
\n    
\n      
I am pretty noticeable but you might check out other content before you look at me.
\n    
\n    
\n      
If you notice me you must be looking very hard.
\n    
\n  
\n  
\n    
\n      
I'm here to tell you something, and you will probably read me first.
\n    
\n    
\n      
I am pretty noticeable but you might check out other content before you look at me.
\n    
\n    
\n      
If you notice me you must be looking very hard.
\n    
\n  
\n\n  
\n    
Circular
\n    
A segment can be circular
\n    
A circular segment will most likely have to have its content manually sized to be equal width and height, otherwise it will flow to the size of your content
\n    
\n      
\n        Buy Now\n        
$10.99
\n      
\n    
\n    
\n      
\n        Buy Now\n        
$10.99
\n      
\n    
\n  
\n  
\n  
\n\n  
\n    
Floated
\n    
A segment cant sit to the left or right of other content
\n    
\n      
This segment will appear to the right\n    
\n    
\n      This segment will appear to the left\n    
\n  
\n\n  
\n    
Text Alignment
\n    
A segment cant have its text aligned to a side
\n    
\n      Right\n    
\n    
\n      Left\n    
\n    
\n      Center\n    
\n    
\n      This segment is justified to take up the whole width. Justified content must be at least the content width to be justified correctly.\n    
\n  
\n\n  
\n    
Basic
\n    
A basic segment has no special formatting
\n    
\n      
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
\n    
\n  
\n  
\n    
Attached
\n    
A segment can be attached to other content on a page
\n\n    
\n      
This segment is on top
\n    
\n    
\n      
This segment is attached on both sides
\n    
\n    
\n      
This segment is on bottom
\n    
\n  
\n\n\n
",
      "rendered": true,
      "contentRendered": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  \n  \n  \n  \n\n  \n\n  \n  \n  Segment | Semantic UI\n\n  \n  \n\n  \n\n  \n  \n  \n\n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n\n  \n  \n\n\n  
\n    \n       Close Menu\n    \n    \n       Download\n    \n    
\n      \n        Introduction\n      \n      
\n        \n          Definitions\n        \n          Overview\n        \n          Types\n        \n          Variations\n        \n          What's Different\n        \n      
\n    
\n    
\n      Project\n      
\n        \n          Contributing\n        \n          Set-up\n        \n      
\n    
\n    
\n      Elements\n      
\n        \n          Button\n        \n          Divider\n        \n          Header\n        \n          Icon\n        \n          Image\n        \n          Input\n        \n          Label\n        \n          Loader\n        \n          Progress\n        \n          Reveal\n        \n          Segment\n        \n          Step\n        \n      
\n    
\n    
\n      Collections\n      
\n        \n          Breadcrumb\n        \n          Form\n        \n          Grid\n        \n          Menu\n        \n          Message\n        \n          Table\n        \n      
\n    
\n    
\n      Views\n      
\n        \n          Comment\n        \n          Feed\n        \n          Item\n        \n          List\n        \n      
\n    
\n    
\n      Modules\n      
\n        \n          Accordion\n        \n          Checkbox\n        \n          Dimmer\n        \n          Dropdown\n        \n          Modal\n        \n          Popup\n        \n          Rating\n        \n          Shape\n        \n          Sidebar\n        \n          Transition\n        \n      
\n    
\n    
\n      Behavior\n      
\n        \n          Form Validation\n        \n      
\n    
\n    
\n      Style Guide\n      
\n        \n          CSS\n        \n          Javascript\n        \n          Language\n        \n      
\n    
\n\n  
\n\n  
\n    
\n       Content\n      
\n        UI Element: Segment\n      
\n      \n      \n      \n      
\n        11 of 12\n        
\n          \n            
\n              1. Button\n            
\n          \n            
\n              2. Divider\n            
\n          \n            
\n              3. Header\n            
\n          \n            
\n              4. Icon\n            
\n          \n            
\n              5. Image\n            
\n          \n            
\n              6. Input\n            
\n          \n            
\n              7. Label\n            
\n          \n            
\n              8. Loader\n            
\n          \n            
\n              9. Progress\n            
\n          \n            
\n              10. Reveal\n            
\n          \n            
\n              11. Segment\n            
\n          \n            
\n              12. Step\n            
\n          \n        
\n      
\n      \n      \n      \n      
\n        \n        
\n          \n        
\n        \n        \n\n        \n          \n        \n        \n          \n        \n        \n        \n          \n        \n        \n      
\n    
\n  
\n    
\n      \n      Menu\n    
\n  \n\n
\n  
\n    
\n\n      
\n        Segment\n        \n      
\n\n      
A segment is used to create a grouping of related content.
\n      \n      
\n        Definition Mode\n        \n      
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n\n
\n\n  
\n    
\n      Types\n      States\n      Variations\n    
\n  
\n  
Types
\n\n  
\n    
Segment
\n    
A segment of content
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n  
\n    
Vertical Segment
\n    
A vertical segment divides content vertically
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n  
\n    
Horizontal Segment
\n    
A horizontal segment divides content horizontally
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n\n  
\n    
Piled
\n    
A segment can be formatted to look like a pile of pages
\n    
\n      
A header
\n      
Te eum doming eirmod, nominati pertinacia argumentum ad his. Ex eam alia facete scriptorem, est autem aliquip detraxit at. Usu ocurreret referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei ex natum rebum iisque.
\n\n      
Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide phaedrum, vim vivendum maiestatis in.
\n\n      
Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id. Mei ut facer dolores adolescens, no illum aperiri quo, usu odio brute at. Qui te porro electram, ea dico facete utroque quo. Populo quodsi te eam, wisi everti eos ex, eum elitr altera utamur at. Quodsi convenire mnesarchum eu per, quas minimum postulant per id.
\n    
\n  
\n\n  
\n    
Stacked
\n    
A segment can be formatted to show it contains multiple pages
\n    
\n      
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
\n    
\n  
\n\n\n\n  
States
\n\n  
\n    
Disabled
\n    
A segment may show its content is disabled\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n\n  
Variations
\n\n  
\n    
Inverted
\n    
A segment can have its colors inverted for contrast
\n    
\n      
I'm here to tell you something, and you will probably read me first.
\n    
\n  
\n\n  
\n    
Raised
\n    
A segment may be formatted to raise above the page.
\n    
\n      
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
\n    
\n  
\n\n  
\n    
Colored
\n    
A segment can be colored
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
\n        
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n          
\n            
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n            
\n              
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n              
\n                
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n              
\n            
\n          
\n        
\n      
\n    
\n  
\n  
\n    
These colors can be inverted
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n\n  
\n    
Ordinality
\n    
A segment can be formatted to appear more or less noticeable
\n    
\n      
I'm here to tell you something, and you will probably read me first.
\n    
\n    
\n      
I am pretty noticeable but you might check out other content before you look at me.
\n    
\n    
\n      
If you notice me you must be looking very hard.
\n    
\n  
\n  
\n    
Inverted colors may also be more or less noticeable
\n    
\n      
I'm here to tell you something, and you will probably read me first.
\n    
\n    
\n      
I am pretty noticeable but you might check out other content before you look at me.
\n    
\n    
\n      
If you notice me you must be looking very hard.
\n    
\n  
\n  
\n    
\n      
I'm here to tell you something, and you will probably read me first.
\n    
\n    
\n      
I am pretty noticeable but you might check out other content before you look at me.
\n    
\n    
\n      
If you notice me you must be looking very hard.
\n    
\n  
\n\n  
\n    
Circular
\n    
A segment can be circular
\n    
A circular segment will most likely have to have its content manually sized to be equal width and height, otherwise it will flow to the size of your content
\n    
\n      
\n        Buy Now\n        
$10.99
\n      
\n    
\n    
\n      
\n        Buy Now\n        
$10.99
\n      
\n    
\n  
\n  
\n  
\n\n  
\n    
Floated
\n    
A segment cant sit to the left or right of other content
\n    
\n      
This segment will appear to the right\n    
\n    
\n      This segment will appear to the left\n    
\n  
\n\n  
\n    
Text Alignment
\n    
A segment cant have its text aligned to a side
\n    
\n      Right\n    
\n    
\n      Left\n    
\n    
\n      Center\n    
\n    
\n      This segment is justified to take up the whole width. Justified content must be at least the content width to be justified correctly.\n    
\n  
\n\n  
\n    
Basic
\n    
A basic segment has no special formatting
\n    
\n      
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
\n    
\n  
\n  
\n    
Attached
\n    
A segment can be attached to other content on a page
\n\n    
\n      
This segment is on top
\n    
\n    
\n      
This segment is attached on both sides
\n    
\n    
\n      
This segment is on bottom
\n    
\n  
\n\n\n
\n\n\n",
      "contentRenderedWithoutLayouts": "\n\n
\n  
\n    
\n\n      
\n        Segment\n        \n      
\n\n      
A segment is used to create a grouping of related content.
\n      \n      
\n        Definition Mode\n        \n      
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n\n
\n\n  
\n    
\n      Types\n      States\n      Variations\n    
\n  
\n  
Types
\n\n  
\n    
Segment
\n    
A segment of content
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n  
\n    
Vertical Segment
\n    
A vertical segment divides content vertically
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n  
\n    
Horizontal Segment
\n    
A horizontal segment divides content horizontally
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n\n  
\n    
Piled
\n    
A segment can be formatted to look like a pile of pages
\n    
\n      
A header
\n      
Te eum doming eirmod, nominati pertinacia argumentum ad his. Ex eam alia facete scriptorem, est autem aliquip detraxit at. Usu ocurreret referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei ex natum rebum iisque.
\n\n      
Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide phaedrum, vim vivendum maiestatis in.
\n\n      
Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id. Mei ut facer dolores adolescens, no illum aperiri quo, usu odio brute at. Qui te porro electram, ea dico facete utroque quo. Populo quodsi te eam, wisi everti eos ex, eum elitr altera utamur at. Quodsi convenire mnesarchum eu per, quas minimum postulant per id.
\n    
\n  
\n\n  
\n    
Stacked
\n    
A segment can be formatted to show it contains multiple pages
\n    
\n      
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
\n    
\n  
\n\n\n\n  
States
\n\n  
\n    
Disabled
\n    
A segment may show its content is disabled\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n\n  
Variations
\n\n  
\n    
Inverted
\n    
A segment can have its colors inverted for contrast
\n    
\n      
I'm here to tell you something, and you will probably read me first.
\n    
\n  
\n\n  
\n    
Raised
\n    
A segment may be formatted to raise above the page.
\n    
\n      
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
\n    
\n  
\n\n  
\n    
Colored
\n    
A segment can be colored
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
\n        
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n          
\n            
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n            
\n              
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n              
\n                
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n              
\n            
\n          
\n        
\n      
\n    
\n  
\n  
\n    
These colors can be inverted
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n    
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n    
\n  
\n\n  
\n    
Ordinality
\n    
A segment can be formatted to appear more or less noticeable
\n    
\n      
I'm here to tell you something, and you will probably read me first.
\n    
\n    
\n      
I am pretty noticeable but you might check out other content before you look at me.
\n    
\n    
\n      
If you notice me you must be looking very hard.
\n    
\n  
\n  
\n    
Inverted colors may also be more or less noticeable
\n    
\n      
I'm here to tell you something, and you will probably read me first.
\n    
\n    
\n      
I am pretty noticeable but you might check out other content before you look at me.
\n    
\n    
\n      
If you notice me you must be looking very hard.
\n    
\n  
\n  
\n    
\n      
I'm here to tell you something, and you will probably read me first.
\n    
\n    
\n      
I am pretty noticeable but you might check out other content before you look at me.
\n    
\n    
\n      
If you notice me you must be looking very hard.
\n    
\n  
\n\n  
\n    
Circular
\n    
A segment can be circular
\n    
A circular segment will most likely have to have its content manually sized to be equal width and height, otherwise it will flow to the size of your content
\n    
\n      
\n        Buy Now\n        
$10.99
\n      
\n    
\n    
\n      
\n        Buy Now\n        
$10.99
\n      
\n    
\n  
\n  
\n  
\n\n  
\n    
Floated
\n    
A segment cant sit to the left or right of other content
\n    
\n      
This segment will appear to the right\n    
\n    
\n      This segment will appear to the left\n    
\n  
\n\n  
\n    
Text Alignment
\n    
A segment cant have its text aligned to a side
\n    
\n      Right\n    
\n    
\n      Left\n    
\n    
\n      Center\n    
\n    
\n      This segment is justified to take up the whole width. Justified content must be at least the content width to be justified correctly.\n    
\n  
\n\n  
\n    
Basic
\n    
A basic segment has no special formatting
\n    
\n      
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
\n    
\n  
\n  
\n    
Attached
\n    
A segment can be attached to other content on a page
\n\n    
\n      
This segment is on top
\n    
\n    
\n      
This segment is attached on both sides
\n    
\n    
\n      
This segment is on bottom
\n    
\n  
\n\n\n
",
      "renderSingleExtensions": false,
      "layout": "default",
      "css": "segment",
      "description": "A segment is used to create a grouping of related content.",
      "type": "UI Element",
      "layoutRelativePath": "default.html.eco",
      "meta": {
        "layout": "default",
        "css": "segment",
        "title": "Segment",
        "description": "A segment is used to create a grouping of related content.",
        "type": "UI Element"
      }
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/documents/elements/step.html.eco",
      "relativePath": "elements/step.html.eco",
      "basename": "step",
      "outBasename": "step",
      "extension": "eco",
      "outExtension": "html",
      "extensions": [
        "html",
        "eco"
      ],
      "filename": "step.html.eco",
      "fullDirPath": "/home/jack/projects/semantic/server/documents/elements",
      "outPath": "/home/jack/projects/semantic/docs/elements/step.html",
      "outDirPath": "/home/jack/projects/semantic/docs/elements",
      "outFilename": "step.html",
      "relativeOutPath": "elements/step.html",
      "relativeDirPath": "elements",
      "relativeOutDirPath": "elements",
      "relativeBase": "elements/step",
      "relativeOutBase": "elements/step",
      "contentType": "application/octet-stream",
      "outContentType": "text/html",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": "2013-12-04T09:15:25.607Z",
      "wtime": "2013-12-04T09:15:28.658Z",
      "exists": true,
      "encoding": "utf8",
      "source": "---\nlayout      : 'default'\ncss         : 'steps'\ntitle       : 'Step'\ndescription : 'Steps show the current activity in a series of consecutive activities.'\ntype        : 'UI Element'\n---\n\n<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Element\n      Groups\n      States\n      Variations\n    
\n  
\n\n  
Standard
\n  
\n    
Step
\n    
A step
\n    
\n      
\n        Shipping\n      
\n    
\n  
\n\n  
Groups
\n  
\n    
Steps
\n    
A set of step
\n    
\n      
\n        Shipping\n      
\n      
\n        Billing\n      
\n      
\n        Confirm Order\n      
\n      
\n        Complete\n      
\n    
\n  
\n\n  
States
\n\n  
\n    
Active
\n    
A step can be highlighted as active
\n    
\n      
\n        Billing\n      
\n    
\n  
\n\n  
\n    
Disabled
\n    
A step can show that it cannot be selected
\n    
\n      
\n        Billing\n      
\n    
\n  
\n\n  
Variations
\n\n  
\n    
Size
\n    
Steps can have different sizes
\n\n    
\n      
\n        Shipping\n      
\n      
\n        Billing\n      
\n      
\n        Confirm Order\n      
\n      
\n        Complete\n      
\n    
\n    

\n    
\n      
\n        Shipping\n      
\n      
\n        Billing\n      
\n      
\n        Confirm Order\n      
\n      
\n        Complete\n      
\n    
\n  
\n\n\n  
\n    
Step
\n    
Steps can be divided evenly inside their parent
\n    
\n      
\n        Shipping\n      
\n      
\n        Billing\n      
\n      
\n        Confirm Order\n      
\n      
\n        Complete\n      
\n    
\n  
\n\n\n
",
      "content": "<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Element\n      Groups\n      States\n      Variations\n    
\n  
\n\n  
Standard
\n  
\n    
Step
\n    
A step
\n    
\n      
\n        Shipping\n      
\n    
\n  
\n\n  
Groups
\n  
\n    
Steps
\n    
A set of step
\n    
\n      
\n        Shipping\n      
\n      
\n        Billing\n      
\n      
\n        Confirm Order\n      
\n      
\n        Complete\n      
\n    
\n  
\n\n  
States
\n\n  
\n    
Active
\n    
A step can be highlighted as active
\n    
\n      
\n        Billing\n      
\n    
\n  
\n\n  
\n    
Disabled
\n    
A step can show that it cannot be selected
\n    
\n      
\n        Billing\n      
\n    
\n  
\n\n  
Variations
\n\n  
\n    
Size
\n    
Steps can have different sizes
\n\n    
\n      
\n        Shipping\n      
\n      
\n        Billing\n      
\n      
\n        Confirm Order\n      
\n      
\n        Complete\n      
\n    
\n    

\n    
\n      
\n        Shipping\n      
\n      
\n        Billing\n      
\n      
\n        Confirm Order\n      
\n      
\n        Complete\n      
\n    
\n  
\n\n\n  
\n    
Step
\n    
Steps can be divided evenly inside their parent
\n    
\n      
\n        Shipping\n      
\n      
\n        Billing\n      
\n      
\n        Confirm Order\n      
\n      
\n        Complete\n      
\n    
\n  
\n\n\n
",
      "tags": null,
      "render": true,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": "Step",
      "name": "step.html",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "elements-step",
      "url": "/elements/step.html",
      "urls": [
        "/elements/step.html"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": true,
      "header": "layout      : 'default'\ncss         : 'steps'\ntitle       : 'Step'\ndescription : 'Steps show the current activity in a series of consecutive activities.'\ntype        : 'UI Element'",
      "parser": "yaml",
      "body": "<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Element\n      Groups\n      States\n      Variations\n    
\n  
\n\n  
Standard
\n  
\n    
Step
\n    
A step
\n    
\n      
\n        Shipping\n      
\n    
\n  
\n\n  
Groups
\n  
\n    
Steps
\n    
A set of step
\n    
\n      
\n        Shipping\n      
\n      
\n        Billing\n      
\n      
\n        Confirm Order\n      
\n      
\n        Complete\n      
\n    
\n  
\n\n  
States
\n\n  
\n    
Active
\n    
A step can be highlighted as active
\n    
\n      
\n        Billing\n      
\n    
\n  
\n\n  
\n    
Disabled
\n    
A step can show that it cannot be selected
\n    
\n      
\n        Billing\n      
\n    
\n  
\n\n  
Variations
\n\n  
\n    
Size
\n    
Steps can have different sizes
\n\n    
\n      
\n        Shipping\n      
\n      
\n        Billing\n      
\n      
\n        Confirm Order\n      
\n      
\n        Complete\n      
\n    
\n    

\n    
\n      
\n        Shipping\n      
\n      
\n        Billing\n      
\n      
\n        Confirm Order\n      
\n      
\n        Complete\n      
\n    
\n  
\n\n\n  
\n    
Step
\n    
Steps can be divided evenly inside their parent
\n    
\n      
\n        Shipping\n      
\n      
\n        Billing\n      
\n      
\n        Confirm Order\n      
\n      
\n        Complete\n      
\n    
\n  
\n\n\n
",
      "rendered": true,
      "contentRendered": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  \n  \n  \n  \n\n  \n\n  \n  \n  Step | Semantic UI\n\n  \n  \n\n  \n\n  \n  \n  \n\n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n\n  \n  \n\n\n  
\n    \n       Close Menu\n    \n    \n       Download\n    \n    
\n      \n        Introduction\n      \n      
\n        \n          Definitions\n        \n          Overview\n        \n          Types\n        \n          Variations\n        \n          What's Different\n        \n      
\n    
\n    
\n      Project\n      
\n        \n          Contributing\n        \n          Set-up\n        \n      
\n    
\n    
\n      Elements\n      
\n        \n          Button\n        \n          Divider\n        \n          Header\n        \n          Icon\n        \n          Image\n        \n          Input\n        \n          Label\n        \n          Loader\n        \n          Progress\n        \n          Reveal\n        \n          Segment\n        \n          Step\n        \n      
\n    
\n    
\n      Collections\n      
\n        \n          Breadcrumb\n        \n          Form\n        \n          Grid\n        \n          Menu\n        \n          Message\n        \n          Table\n        \n      
\n    
\n    
\n      Views\n      
\n        \n          Comment\n        \n          Feed\n        \n          Item\n        \n          List\n        \n      
\n    
\n    
\n      Modules\n      
\n        \n          Accordion\n        \n          Checkbox\n        \n          Dimmer\n        \n          Dropdown\n        \n          Modal\n        \n          Popup\n        \n          Rating\n        \n          Shape\n        \n          Sidebar\n        \n          Transition\n        \n      
\n    
\n    
\n      Behavior\n      
\n        \n          Form Validation\n        \n      
\n    
\n    
\n      Style Guide\n      
\n        \n          CSS\n        \n          Javascript\n        \n          Language\n        \n      
\n    
\n\n  
\n\n  
\n    
\n       Content\n      
\n        UI Element: Step\n      
\n      \n      \n      \n      
\n        12 of 12\n        
\n          \n            
\n              1. Button\n            
\n          \n            
\n              2. Divider\n            
\n          \n            
\n              3. Header\n            
\n          \n            
\n              4. Icon\n            
\n          \n            
\n              5. Image\n            
\n          \n            
\n              6. Input\n            
\n          \n            
\n              7. Label\n            
\n          \n            
\n              8. Loader\n            
\n          \n            
\n              9. Progress\n            
\n          \n            
\n              10. Reveal\n            
\n          \n            
\n              11. Segment\n            
\n          \n            
\n              12. Step\n            
\n          \n        
\n      
\n      \n      
\n      \n      
\n        \n        
\n          \n        
\n        \n        \n\n        \n          \n        \n        \n          \n        \n        \n        \n          \n        \n        \n      
\n    
\n  
\n    
\n      \n      Menu\n    
\n  \n\n
\n  
\n    
\n\n      
\n        Step\n        \n      
\n\n      
Steps show the current activity in a series of consecutive activities.
\n      \n      
\n        Definition Mode\n        \n      
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n\n
\n\n  
\n    
\n      Element\n      Groups\n      States\n      Variations\n    
\n  
\n\n  
Standard
\n  
\n    
Step
\n    
A step
\n    
\n      
\n        Shipping\n      
\n    
\n  
\n\n  
Groups
\n  
\n    
Steps
\n    
A set of step
\n    
\n      
\n        Shipping\n      
\n      
\n        Billing\n      
\n      
\n        Confirm Order\n      
\n      
\n        Complete\n      
\n    
\n  
\n\n  
States
\n\n  
\n    
Active
\n    
A step can be highlighted as active
\n    
\n      
\n        Billing\n      
\n    
\n  
\n\n  
\n    
Disabled
\n    
A step can show that it cannot be selected
\n    
\n      
\n        Billing\n      
\n    
\n  
\n\n  
Variations
\n\n  
\n    
Size
\n    
Steps can have different sizes
\n\n    
\n      
\n        Shipping\n      
\n      
\n        Billing\n      
\n      
\n        Confirm Order\n      
\n      
\n        Complete\n      
\n    
\n    

\n    
\n      
\n        Shipping\n      
\n      
\n        Billing\n      
\n      
\n        Confirm Order\n      
\n      
\n        Complete\n      
\n    
\n  
\n\n\n  
\n    
Step
\n    
Steps can be divided evenly inside their parent
\n    
\n      
\n        Shipping\n      
\n      
\n        Billing\n      
\n      
\n        Confirm Order\n      
\n      
\n        Complete\n      
\n    
\n  
\n\n\n
\n\n\n",
      "contentRenderedWithoutLayouts": "\n\n
\n  
\n    
\n\n      
\n        Step\n        \n      
\n\n      
Steps show the current activity in a series of consecutive activities.
\n      \n      
\n        Definition Mode\n        \n      
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n\n
\n\n  
\n    
\n      Element\n      Groups\n      States\n      Variations\n    
\n  
\n\n  
Standard
\n  
\n    
Step
\n    
A step
\n    
\n      
\n        Shipping\n      
\n    
\n  
\n\n  
Groups
\n  
\n    
Steps
\n    
A set of step
\n    
\n      
\n        Shipping\n      
\n      
\n        Billing\n      
\n      
\n        Confirm Order\n      
\n      
\n        Complete\n      
\n    
\n  
\n\n  
States
\n\n  
\n    
Active
\n    
A step can be highlighted as active
\n    
\n      
\n        Billing\n      
\n    
\n  
\n\n  
\n    
Disabled
\n    
A step can show that it cannot be selected
\n    
\n      
\n        Billing\n      
\n    
\n  
\n\n  
Variations
\n\n  
\n    
Size
\n    
Steps can have different sizes
\n\n    
\n      
\n        Shipping\n      
\n      
\n        Billing\n      
\n      
\n        Confirm Order\n      
\n      
\n        Complete\n      
\n    
\n    

\n    
\n      
\n        Shipping\n      
\n      
\n        Billing\n      
\n      
\n        Confirm Order\n      
\n      
\n        Complete\n      
\n    
\n  
\n\n\n  
\n    
Step
\n    
Steps can be divided evenly inside their parent
\n    
\n      
\n        Shipping\n      
\n      
\n        Billing\n      
\n      
\n        Confirm Order\n      
\n      
\n        Complete\n      
\n    
\n  
\n\n\n
",
      "renderSingleExtensions": false,
      "layout": "default",
      "css": "steps",
      "description": "Steps show the current activity in a series of consecutive activities.",
      "type": "UI Element",
      "layoutRelativePath": "default.html.eco",
      "meta": {
        "layout": "default",
        "css": "steps",
        "title": "Step",
        "description": "Steps show the current activity in a series of consecutive activities.",
        "type": "UI Element"
      }
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/documents/guide/cssguide.html.eco",
      "relativePath": "guide/cssguide.html.eco",
      "basename": "cssguide",
      "outBasename": "cssguide",
      "extension": "eco",
      "outExtension": "html",
      "extensions": [
        "html",
        "eco"
      ],
      "filename": "cssguide.html.eco",
      "fullDirPath": "/home/jack/projects/semantic/server/documents/guide",
      "outPath": "/home/jack/projects/semantic/docs/guide/cssguide.html",
      "outDirPath": "/home/jack/projects/semantic/docs/guide",
      "outFilename": "cssguide.html",
      "relativeOutPath": "guide/cssguide.html",
      "relativeDirPath": "guide",
      "relativeOutDirPath": "guide",
      "relativeBase": "guide/cssguide",
      "relativeOutBase": "guide/cssguide",
      "contentType": "application/octet-stream",
      "outContentType": "text/html",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": "2013-12-04T09:15:25.670Z",
      "wtime": "2013-12-04T09:15:28.662Z",
      "exists": true,
      "encoding": "utf8",
      "source": "  ---\nlayout      : 'default'\ncss         : 'guide'\n\ntitle       : 'CSS'\ndescription : 'Suggestions for CSS development practices'\ntype        : 'UI Guide'\n---\n<%- @partial('header') %>\n
\n\n  
\n    
\n      Techniques\n      Style Guide\n      Units\n    
\n  
\n\n\n\n  
Techniques
\n\n    
Conditional Content Formatting
\n    
Sometimes content should be formatted differently depending on whether other content exists alongside it. A useful way to do that is use the next adjacent sibling selector '+'. The content that should have the conditional formatting should always appear second because there is no previous sibling selector in css.
\n\n    
\n    .ui.widget .image {\n      float: left;\n      width: 2em;\n    }\n    .ui.widget .content {\n      color: #000000;\n    }\n    /* content is only floated if image exists */\n    .ui.widget .image + .content {\n      margin-left: 3em;\n    }\n    
\n\n    
Box Shadow Inheritance
\n    
Unfortunately box shadow must be defined as a single rule, without the ability, like border, to be broken up into separate parts for positioning, color and distance. There is however one trick to allowing for a single box shadow definition to appear as multiple colors. Box shadow inherits its color from the color attribute if no color is specified.
\n    
\n    .ui.widget {\n      -webkit-box-shadow: 0em 0.2em 0em inset;\n      -moz-box-shadow: 0em 0.2em 0em inset;\n      box-shadow: 0em 0.2em 0em inset;\n    }\n    /* This will also have a red box shadow */\n    .ui.red.widget {\n      color: #FF0000;\n    }\n    
\n\n\n    
Not Sure the Size? Table It
\n    
If content needs to fill a specified size exactly, but may be made up of parts with arbitrary size, it can be useful to use display table and table-cell. This will make sure the parent width is always obeyed regardless of alterations to an element's width.
\n    
Keep in mind any table-cell element must have a parent with display:table to appear formatted correctly.
\n\n    
\n    .ui.input {\n      display: table;\n    }\n    /* these two elements will always fill the input exactly regardlesss of the text content of the button */\n    .ui.input input {\n      display: table-cell;\n    }\n    .ui.input .button {\n      display: table-cell;\n    }\n    
\n\n    
Fixing Whitespace with Inline Block
\n    
In HTML usually whitespace doesn't change a page's layouts. However, when using inline block any whitespace will create unwanted space between consecutive inline-block elements. The simple and effective fix is to make sure font-size on the parent element is 0, making all whitespace 0 pixels. Then you can reset font-size on the child element to body font size or 1 relative em.
\n    
\n    /* remove whitespace */\n    .ui.group {\n      font-size: 0em;\n    }\n    .ui.group .item {\n      display: inline-block;\n      font-size: 1rem;\n    }\n    
\n\n    
CSS :not is Awesome
\n    
Inheritance can be hell sometimes. Consider changing the opacity of an element. There is no way to \"cancel out\" of that opacity change on content inside.
\n    
Sometimes the only way to avoid creating inheritance problems is to specify what elements should not receive a set of rules. Consider blurring content while a dimmer is present. Blurring should only apply to elements that are not inside the dimmer, but there is no way to know what the content is beforehand.
\n    
\n    /* blur everything but the dimmer */\n    body.dimmed :not(.dimmer){\n      -webkit-filter: blur(15px) grayscale(0.7);\n      -moz-filter: blur(15px) grayscale(0.7);\n    }\n    
\n\n    
Prevent Accidental Highlighting
\n    
Sometimes text can be accidentally highlighted when a user double clicks an element. No need to pull out javascript to solve this.
\n    
\n    .ui.thingy {\n      -webkit-user-select: none;\n      -moz-user-select: none;\n      -ms-user-select: none;\n      user-select: none;\n    }\n    
\n\n    
Multiple Highlight Colors
\n    
It's fairly commonly known that you can set text selection colors in css for a page, but its less commonly known that you can use multiple highlight colors in a single page.
\n    
\n    /* text selected turns highlighted yellow */\n    ::-webkit-selection {\n      background-color: #FFFFCC;\n      color: #555555;\n    }\n    ::-moz-selection {\n      background-color: #FFFFCC;\n      color: #555555;\n    }\n    ::selection {\n      background-color: #FFFFCC;\n      color: #555555;\n    }\n    /* headers selected turn red */\n    h1::-moz-selection,\n    h2::-moz-selection,\n    h3::-moz-selection {\n      background-color: #F1C1C2;\n      color: #222222;\n    }\n    h1::selection,\n    h2::selection,\n    h3::selection {\n      background-color: #F1C1C2;\n      color: #222222;\n    }\n    
\n\n\n    
Shading Borders
\n    
When you have colored content that needs a border to match its current color, try using a 1 pixel inset box shadow with an RGBA value.
\n\n    
\n\n    /* this border will be grey */\n    .ui.thingy {\n      -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;\n      -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;\n      box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;\n    }\n    /* this border will be red tinted */\n    .ui.red.thingy {\n      background-color: #FFF8F8;\n    }\n    
\n\n\n    
Joining borders
\n    
Sometimes bordered content must sit next to other bordered content. If each element uses border the borders will double. Consider using either outline or a box shadow to accomplish the same effect but without overlapping borders.
\n    
\n    /* this might not go so well */\n    .ui.thingy {\n      border: 1px solid #DDDDDD;\n    }\n    /* rgba is great, but keep in mind the overlapping borders will be added together to create a darker shade */\n    .ui.thingy {\n      outline: 1px solid rgba(0, 0, 0, 0.1);\n    }\n    /* classic but works */\n    .ui.thingy {\n      outline: 1px solid #DDDDDD;\n    }\n    /* this works too */\n    .ui.thingy {\n      -moz-box-shadow: 0px 0px 0px 1px #DDDDDD;\n      -webkit-box-shadow: 0px 0px 0px 1px #DDDDDD;\n      box-shadow: 0px 0px 0px 1px #DDDDDD;\n    }\n    
\n\n    
Using transparency
\n    
RGBA colors in css allow you to specify colors with a transparency channel. This is very useful.
\n    
Consider for example, defining the text states of an element. If the elements color changes, the text might appear more complementary as a shade of black with a portion of the original color. This can be done easily with rgba
\n    
\n    .ui.thingy {\n      background-color: #FAFAFA;\n      color: rgba(0, 0, 0, 0.7);\n    }\n    .red.ui.thingy {\n      background-color: #FF0000;\n    }\n    
\n\n    
Nothing is always Fixed
\n    
CSS fixed allows you to have content stick to an offset position in a page regardlesss of the scroll position of the page. Fixed menus will use the page as the offset parent, in all circumstances except when css transform is used on a parent element. This will change the offset context to the transformed element instead of the page.\n    
This behavior may seem unexpected, but using this quirk can allow you to have fixed position content relative to any element in a page.
\n    
\n    .ui.content {\n      transform: rotateZ(0deg);\n      overflow: scroll;\n    }\n    /* fixed will stay in its current offset relative to the parent container */\n    .ui.content .fixed.thingy {\n      position: fixed;\n      top: 0px;\n      width: 100%;\n    }\n    
\n\n    
Centering Content with Transform
\n    
Using percentages in CSS will give you a ratio based on the size of the parent element. For example, setting content to be left 50% will set content to start at exactly halfway across its parent.
\n    
If you want content to positioned relative to its own size use transform. Percentages specified inside a transform are unique in that they are based on the current element size not its parent.
\n    
\n\n    /* doesnt work */\n    .ui.modal {\n      width: 800px;\n      height: 500px;\n      left: 50%;\n      top: 50%;\n      margin: -50% 0px 0px -50%x;\n    }\n\n    /* works with measurements */\n    .ui.modal {\n      width: 800px;\n      height: 500px;\n      left: 50%;\n      top: 50%;\n      margin: -250px 0px 0px -400px;\n    }\n\n    /* with transform no measurements needed */\n    .ui.modal {\n      position: absolute;\n      width: 800px;\n      top: 50%;\n      left: 50%;\n      transform: transformX(-50%) transformY(-50%);\n    }\n    
\n\n    
Consider alternatives to floats
\n    
CSS floats can create issues with the containing element not receiving the size of its children. Using overflow:hidden to clear floats means that no piece of an element can be shown outside the bounding box of the element, which limits the possibilities in an element. Clearfixes can use up one of two available pseudo class which can often be useful for styling elements.
\n    
Consider using another means of putting content side by side like inline-block or table-cell. These provide more freedom than floated block elements, and can add additional benefits.
\n    
To avoid issues with inline-block causing spacing between elements, specify no font size on the group and 1rem on the floated content
\n    
\n    /* not the best */\n    .ui.thingy {\n      display: block;\n      overflow: hidden;\n    }\n    .ui.thingy .part {\n      display: block;\n      float: left;\n    }\n\n    /* these do the same thing */\n    .ui.thingy {\n      display: block;\n      font-size: 0rem;\n    }\n    .ui.thingy .part {\n      display: inline-block;\n      font-size: 1rem;\n    }\n    
\n\n\n    
Onion Skinning
\n    
One technique that is useful for allowing for multiple color variations of an element, without having to completely reskin each variation and shade is to use background-image gradients to define shading and state, and background-color to define the color of an element. If done well you can add a variety of colors with very little code.
\n    
\n    .ui.thingy {\n      background-color: #FAFAFA;\n    }\n    .ui.red.thingy {\n      background-color: #FF0000;\n    }\n    .ui.green.thingy {\n      background-color: #00FF00;\n    }\n    .ui.blue.thingy {\n      background-color: #0000FF;\n    }\n    .ui.thingy:hover {\n      background-image:\n        -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.05)))\n      ;\n      background-image: -webkit-linear-gradient(\n        rgba(0, 0, 0, 0.1) 0%,\n        rgba(0, 0, 0, 0.05) 100%)\n      ;\n      background-image: -moz-linear-gradient(\n        rgba(0, 0, 0, 0.1) 0%,\n        rgba(0, 0, 0, 0.05) 100%)\n      ;\n      background-image: -o-linear-gradient(\n        rgba(0, 0, 0, 0.1) 0%,\n        rgba(0, 0, 0, 0.05) 100%)\n      ;\n      background-image: linear-gradient(\n        rgba(0, 0, 0, 0.1) 0%,\n        rgba(0, 0, 0, 0.05) 100%)\n      ;\n    }\n    
\n\n\n\n  
Style Guide
\n\n    
Don't Hyphenate
\n    
All elements are designed to include their own namespace. As long as rules descend from their parent element there is no possibility of rule collision.
\n    
Hyphenated class names often describe the intersection of separate concepts, and can be better written to represent each concept separately.
\n    
\n    /* no no no */\n    .ui.button-active-red {\n      background-color: #FF0000;\n      font-weight: bold;\n      color: #FFFFFF;\n    }\n\n    /* better */\n    .red.ui.button {\n      background-color: #FF0000;\n      color: #FFFFFF;\n    }\n    .active.ui.button {\n      font-weight: bold;\n    }\n    
\n\n    
CSS Legibility
\n    
Adding extra formatting can help increase clarity in your code. We suggest separating css selectors on separate lines, adding a space after css properties with commas (like box-shadow) and placing a zero before any decimal value.
\n\n    
\n    /* not so easy to read */\n    .ui.widgets .widget, ui.widget, .ui.widget.type, ui.widgets .widget.type {\n      color: #FFFFFF;\n    }\n    /* this should have spaces after commas and a zero before any decimal value */\n    .ui.widget {\n      color:rgba(0,0,0,.3);\n    }\n\n    /* easier to read */\n    .ui.widgets .widget,\n    .ui.widget,\n    .ui.widgets .widget.type,\n    .ui.widget.type {\n      color: #FFFFFF;\n    }\n    /* properly formatted */\n    .ui.widget {\n      color: rgba(0, 0, 0, 0.3);\n    }\n    
\n\n\n    
Keep Things Ordered
\n    
Although css rule order may be considered a chore, grouping related rules together can help keep css code organized.
\n    
An easy way to do this is to consider ordering rules from the outside in. First describing positioning rules, then border rules, margin, sizing, padding, font-size, line height and ending with vendor prefixed attributes.
\n\n    
\n    /* not so easy to read */\n    .ui.widgets .widget, ui.widget, .ui.widget.type, ui.widgets .widget.type {\n      color: #FFFFFF;\n    }\n    /* more legible */\n    .ui.widgets .widget,\n    .ui.widget,\n    .ui.widgets .widget.type,\n    .ui.widget.type {\n      color: #FFFFFF;\n    }\n\n    /* i have some extra time so lets group these rules */\n    .ui.widget {\n      position: relative;\n      top: 0em;\n      left: 0em;\n\n      margin: 1em;\n      border: 1px solid rgba(0, 0, 0, 0.1);\n      width: 100px;\n      height: 100px;\n      padding: 1em;\n\n      font-size: 1.2em;\n      color: rgba(0, 0, 0, 0.8);\n      line-height: 1.2em;\n\n      -webkit-border-radius: 0.3em;\n      -moz-border-radius: 0.3em;\n      border-radius: 0.3em;\n    }\n    
\n\n  
Avoid non-semantic tags, make wrappers groups
\n  
UI elements should be designed to include the minimum footprint of an element. If extra styling is needed, consider using pseudo selectors :after and :before. This allows for the creation of two extra divs inside each div context which can almost always be enough to accommodate extra styling.
\n  
If there is no other option than wrapping content in a containing HTML element, consider using a singular/plural relationship by having the wrapper describe its contents instead of an arbitrary class name like wrapper
\n    
\n    /* not tops */\n    .ui.message .wrapper .title,\n    .ui.message .wrapper .description {\n\n    }\n    /* better */\n    .ui.message .content .title,\n    .ui.message .content .description {\n\n    }\n    
\n\n    
Margins
\n    
Adding default margins to your content allow for it to have vertical rhythm in a page, but be careful about forcing margin in all circumstances. Here's a useful way to make sure content inside container elements doesn't receieve unnecessary padding.
\n    
\n    .ui.thingy {\n      margin: 1em 0em;\n    }\n    .ui.thingy:first-child {\n      margin-top: 0em;\n    }\n    .ui.thingy:last-child {\n      margin-bottom: 0em;\n    }\n    
\n\n\n    
Grammatical order
\n    
Consider using similar class syntax as if you were actually describing the element in English. Although this is by no means required it may help provide clarity in some circumstances.
\n    
\n    /* confusing word order */\n    .ui.red.button.pointing {\n\n    }\n    /* much more semantic */\n    .red.pointing.ui.button {\n\n    }\n    
\n\n    
Use Border Box
\n    
Border box fixes the box model, and allows padding to be included as part of width and height definitions. Using it opens up another world of possibilities for sizing content to fit fluidly
\n    
\n    .two.ui.thingies .ui.thingy {\n      width: 50%;\n      padding: 1em;\n      -webkit-box-sizing: border-box;\n      -moz-box-sizing: border-box;\n      -ms-box-sizing: border-box;\n      box-sizing: border-box;\n    }\n    
\n\n  
Units and Measurements
\n\n    
Unit Consistency
\n    
CSS provides a broad selection of measurements for values. It is helpful to keep unit definitions consistent across a single property definition. Including consistent units for 0 values also allows for quicker tweaking and shows greater precision in a property definition.
\n\n    
\n    /* not tops */\n    .ui.widget {\n      padding:  0 16px .6em;\n    }\n    /* hex are uppercase */\n    .ui.widget {\n      color: #09ffda;\n    }\n    /* good */\n    .ui.widget {\n      padding: 0em 0em 0em 0.2em;\n      color: #009FDA;\n    }\n    
\n\n    
Inheritance is Magical
\n    
Many CSS properties can use the value 'inherit' to specify, quite unintuitively, to take on the value of parent element for values that do not normally inherit. For example, an element can use inherit to double whatever its parents padding size is, or to receive the same type of border as a parent without knowing what it is beforehand.
\n    
\n    /* inheriting borders */\n    .ui.widget {\n      border: 2px solid rgba(0, 0, 0, 0.1);\n    }\n    /* will receive same border treatment as parent */\n    .ui.widget .foo {\n      border: inherit;\n    }\n    /* inheriting positioning */\n    .ui.widget {\n      padding: 0.5em 1em;\n    }\n    /* will use the same padding as parent */\n    .ui.widget .foo {\n      padding: inherit;\n    }\n    
\n\n    
Relatively Relative
\n    
EMs are defined so that 1em is equal to the current font size inside of an element. Using EMs can allow you to size content inside an element in proportion to the overall size of the element. Be careful though because this will stack with nested elements.
\n    
\n    .ui.thingy {\n      font-size: 14px;\n    }\n    /* this is 28 pixels */\n    .ui.thingy .thing {\n      font-size: 2em;\n    }\n    /* woah this is now 48 pixels */\n    .ui.thingy .thing .thing {\n      font-size: 2em;\n    }\n\n    /* .ui.thingy .thingy should grow as well */\n    .ui.large.thingy {\n      font-size: 16px;\n    }\n    
\n\n    
Recursively Relative
\n    
Using EMs multiplicative nature can be used to your advantage. Instead of defining multiple tiers of a menu system, consider using ems to reduce each tier's sizing. As you continue to nest menu elements each nested menu will computer its values with smaller proportions.
\n    
\n    .ui.menu {\n      font-size: 1rem;\n    }\n    .ui.menu .menu {\n      margin-left: 0.5em;\n      font-size: 0.9em;\n    }\n    
\n\n    
Absolutely Relative
\n    
Relative EMs (rems) are calculated relative to the font size of the entire page. This is needed to explain how content should be sized related to the overall size of elements on the page, and will not increase geometrically when nested like EMs.
\n    
\n    /* i am a weird page with very tiny fonts */\n    html {\n      font-size: 10px;\n    }\n    /* thats ok i am sizing everything relative to your tiny fonts */\n    .ui.menu {\n      font-size: 1rem;\n    }\n    /* i am sizing relative to the menu element */\n    .ui.menu .menu {\n      font-size: 0.8em;\n    }\n    /* i am the same size as the rule above */\n    .ui.menu .menu .menu {\n      font-size: 0.8em;\n    }\n    
\n
",
      "content": "<%- @partial('header') %>\n
\n\n  
\n    
\n      Techniques\n      Style Guide\n      Units\n    
\n  
\n\n\n\n  
Techniques
\n\n    
Conditional Content Formatting
\n    
Sometimes content should be formatted differently depending on whether other content exists alongside it. A useful way to do that is use the next adjacent sibling selector '+'. The content that should have the conditional formatting should always appear second because there is no previous sibling selector in css.
\n\n    
\n    .ui.widget .image {\n      float: left;\n      width: 2em;\n    }\n    .ui.widget .content {\n      color: #000000;\n    }\n    /* content is only floated if image exists */\n    .ui.widget .image + .content {\n      margin-left: 3em;\n    }\n    
\n\n    
Box Shadow Inheritance
\n    
Unfortunately box shadow must be defined as a single rule, without the ability, like border, to be broken up into separate parts for positioning, color and distance. There is however one trick to allowing for a single box shadow definition to appear as multiple colors. Box shadow inherits its color from the color attribute if no color is specified.
\n    
\n    .ui.widget {\n      -webkit-box-shadow: 0em 0.2em 0em inset;\n      -moz-box-shadow: 0em 0.2em 0em inset;\n      box-shadow: 0em 0.2em 0em inset;\n    }\n    /* This will also have a red box shadow */\n    .ui.red.widget {\n      color: #FF0000;\n    }\n    
\n\n\n    
Not Sure the Size? Table It
\n    
If content needs to fill a specified size exactly, but may be made up of parts with arbitrary size, it can be useful to use display table and table-cell. This will make sure the parent width is always obeyed regardless of alterations to an element's width.
\n    
Keep in mind any table-cell element must have a parent with display:table to appear formatted correctly.
\n\n    
\n    .ui.input {\n      display: table;\n    }\n    /* these two elements will always fill the input exactly regardlesss of the text content of the button */\n    .ui.input input {\n      display: table-cell;\n    }\n    .ui.input .button {\n      display: table-cell;\n    }\n    
\n\n    
Fixing Whitespace with Inline Block
\n    
In HTML usually whitespace doesn't change a page's layouts. However, when using inline block any whitespace will create unwanted space between consecutive inline-block elements. The simple and effective fix is to make sure font-size on the parent element is 0, making all whitespace 0 pixels. Then you can reset font-size on the child element to body font size or 1 relative em.
\n    
\n    /* remove whitespace */\n    .ui.group {\n      font-size: 0em;\n    }\n    .ui.group .item {\n      display: inline-block;\n      font-size: 1rem;\n    }\n    
\n\n    
CSS :not is Awesome
\n    
Inheritance can be hell sometimes. Consider changing the opacity of an element. There is no way to \"cancel out\" of that opacity change on content inside.
\n    
Sometimes the only way to avoid creating inheritance problems is to specify what elements should not receive a set of rules. Consider blurring content while a dimmer is present. Blurring should only apply to elements that are not inside the dimmer, but there is no way to know what the content is beforehand.
\n    
\n    /* blur everything but the dimmer */\n    body.dimmed :not(.dimmer){\n      -webkit-filter: blur(15px) grayscale(0.7);\n      -moz-filter: blur(15px) grayscale(0.7);\n    }\n    
\n\n    
Prevent Accidental Highlighting
\n    
Sometimes text can be accidentally highlighted when a user double clicks an element. No need to pull out javascript to solve this.
\n    
\n    .ui.thingy {\n      -webkit-user-select: none;\n      -moz-user-select: none;\n      -ms-user-select: none;\n      user-select: none;\n    }\n    
\n\n    
Multiple Highlight Colors
\n    
It's fairly commonly known that you can set text selection colors in css for a page, but its less commonly known that you can use multiple highlight colors in a single page.
\n    
\n    /* text selected turns highlighted yellow */\n    ::-webkit-selection {\n      background-color: #FFFFCC;\n      color: #555555;\n    }\n    ::-moz-selection {\n      background-color: #FFFFCC;\n      color: #555555;\n    }\n    ::selection {\n      background-color: #FFFFCC;\n      color: #555555;\n    }\n    /* headers selected turn red */\n    h1::-moz-selection,\n    h2::-moz-selection,\n    h3::-moz-selection {\n      background-color: #F1C1C2;\n      color: #222222;\n    }\n    h1::selection,\n    h2::selection,\n    h3::selection {\n      background-color: #F1C1C2;\n      color: #222222;\n    }\n    
\n\n\n    
Shading Borders
\n    
When you have colored content that needs a border to match its current color, try using a 1 pixel inset box shadow with an RGBA value.
\n\n    
\n\n    /* this border will be grey */\n    .ui.thingy {\n      -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;\n      -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;\n      box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;\n    }\n    /* this border will be red tinted */\n    .ui.red.thingy {\n      background-color: #FFF8F8;\n    }\n    
\n\n\n    
Joining borders
\n    
Sometimes bordered content must sit next to other bordered content. If each element uses border the borders will double. Consider using either outline or a box shadow to accomplish the same effect but without overlapping borders.
\n    
\n    /* this might not go so well */\n    .ui.thingy {\n      border: 1px solid #DDDDDD;\n    }\n    /* rgba is great, but keep in mind the overlapping borders will be added together to create a darker shade */\n    .ui.thingy {\n      outline: 1px solid rgba(0, 0, 0, 0.1);\n    }\n    /* classic but works */\n    .ui.thingy {\n      outline: 1px solid #DDDDDD;\n    }\n    /* this works too */\n    .ui.thingy {\n      -moz-box-shadow: 0px 0px 0px 1px #DDDDDD;\n      -webkit-box-shadow: 0px 0px 0px 1px #DDDDDD;\n      box-shadow: 0px 0px 0px 1px #DDDDDD;\n    }\n    
\n\n    
Using transparency
\n    
RGBA colors in css allow you to specify colors with a transparency channel. This is very useful.
\n    
Consider for example, defining the text states of an element. If the elements color changes, the text might appear more complementary as a shade of black with a portion of the original color. This can be done easily with rgba
\n    
\n    .ui.thingy {\n      background-color: #FAFAFA;\n      color: rgba(0, 0, 0, 0.7);\n    }\n    .red.ui.thingy {\n      background-color: #FF0000;\n    }\n    
\n\n    
Nothing is always Fixed
\n    
CSS fixed allows you to have content stick to an offset position in a page regardlesss of the scroll position of the page. Fixed menus will use the page as the offset parent, in all circumstances except when css transform is used on a parent element. This will change the offset context to the transformed element instead of the page.\n    
This behavior may seem unexpected, but using this quirk can allow you to have fixed position content relative to any element in a page.
\n    
\n    .ui.content {\n      transform: rotateZ(0deg);\n      overflow: scroll;\n    }\n    /* fixed will stay in its current offset relative to the parent container */\n    .ui.content .fixed.thingy {\n      position: fixed;\n      top: 0px;\n      width: 100%;\n    }\n    
\n\n    
Centering Content with Transform
\n    
Using percentages in CSS will give you a ratio based on the size of the parent element. For example, setting content to be left 50% will set content to start at exactly halfway across its parent.
\n    
If you want content to positioned relative to its own size use transform. Percentages specified inside a transform are unique in that they are based on the current element size not its parent.
\n    
\n\n    /* doesnt work */\n    .ui.modal {\n      width: 800px;\n      height: 500px;\n      left: 50%;\n      top: 50%;\n      margin: -50% 0px 0px -50%x;\n    }\n\n    /* works with measurements */\n    .ui.modal {\n      width: 800px;\n      height: 500px;\n      left: 50%;\n      top: 50%;\n      margin: -250px 0px 0px -400px;\n    }\n\n    /* with transform no measurements needed */\n    .ui.modal {\n      position: absolute;\n      width: 800px;\n      top: 50%;\n      left: 50%;\n      transform: transformX(-50%) transformY(-50%);\n    }\n    
\n\n    
Consider alternatives to floats
\n    
CSS floats can create issues with the containing element not receiving the size of its children. Using overflow:hidden to clear floats means that no piece of an element can be shown outside the bounding box of the element, which limits the possibilities in an element. Clearfixes can use up one of two available pseudo class which can often be useful for styling elements.
\n    
Consider using another means of putting content side by side like inline-block or table-cell. These provide more freedom than floated block elements, and can add additional benefits.
\n    
To avoid issues with inline-block causing spacing between elements, specify no font size on the group and 1rem on the floated content
\n    
\n    /* not the best */\n    .ui.thingy {\n      display: block;\n      overflow: hidden;\n    }\n    .ui.thingy .part {\n      display: block;\n      float: left;\n    }\n\n    /* these do the same thing */\n    .ui.thingy {\n      display: block;\n      font-size: 0rem;\n    }\n    .ui.thingy .part {\n      display: inline-block;\n      font-size: 1rem;\n    }\n    
\n\n\n    
Onion Skinning
\n    
One technique that is useful for allowing for multiple color variations of an element, without having to completely reskin each variation and shade is to use background-image gradients to define shading and state, and background-color to define the color of an element. If done well you can add a variety of colors with very little code.
\n    
\n    .ui.thingy {\n      background-color: #FAFAFA;\n    }\n    .ui.red.thingy {\n      background-color: #FF0000;\n    }\n    .ui.green.thingy {\n      background-color: #00FF00;\n    }\n    .ui.blue.thingy {\n      background-color: #0000FF;\n    }\n    .ui.thingy:hover {\n      background-image:\n        -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.05)))\n      ;\n      background-image: -webkit-linear-gradient(\n        rgba(0, 0, 0, 0.1) 0%,\n        rgba(0, 0, 0, 0.05) 100%)\n      ;\n      background-image: -moz-linear-gradient(\n        rgba(0, 0, 0, 0.1) 0%,\n        rgba(0, 0, 0, 0.05) 100%)\n      ;\n      background-image: -o-linear-gradient(\n        rgba(0, 0, 0, 0.1) 0%,\n        rgba(0, 0, 0, 0.05) 100%)\n      ;\n      background-image: linear-gradient(\n        rgba(0, 0, 0, 0.1) 0%,\n        rgba(0, 0, 0, 0.05) 100%)\n      ;\n    }\n    
\n\n\n\n  
Style Guide
\n\n    
Don't Hyphenate
\n    
All elements are designed to include their own namespace. As long as rules descend from their parent element there is no possibility of rule collision.
\n    
Hyphenated class names often describe the intersection of separate concepts, and can be better written to represent each concept separately.
\n    
\n    /* no no no */\n    .ui.button-active-red {\n      background-color: #FF0000;\n      font-weight: bold;\n      color: #FFFFFF;\n    }\n\n    /* better */\n    .red.ui.button {\n      background-color: #FF0000;\n      color: #FFFFFF;\n    }\n    .active.ui.button {\n      font-weight: bold;\n    }\n    
\n\n    
CSS Legibility
\n    
Adding extra formatting can help increase clarity in your code. We suggest separating css selectors on separate lines, adding a space after css properties with commas (like box-shadow) and placing a zero before any decimal value.
\n\n    
\n    /* not so easy to read */\n    .ui.widgets .widget, ui.widget, .ui.widget.type, ui.widgets .widget.type {\n      color: #FFFFFF;\n    }\n    /* this should have spaces after commas and a zero before any decimal value */\n    .ui.widget {\n      color:rgba(0,0,0,.3);\n    }\n\n    /* easier to read */\n    .ui.widgets .widget,\n    .ui.widget,\n    .ui.widgets .widget.type,\n    .ui.widget.type {\n      color: #FFFFFF;\n    }\n    /* properly formatted */\n    .ui.widget {\n      color: rgba(0, 0, 0, 0.3);\n    }\n    
\n\n\n    
Keep Things Ordered
\n    
Although css rule order may be considered a chore, grouping related rules together can help keep css code organized.
\n    
An easy way to do this is to consider ordering rules from the outside in. First describing positioning rules, then border rules, margin, sizing, padding, font-size, line height and ending with vendor prefixed attributes.
\n\n    
\n    /* not so easy to read */\n    .ui.widgets .widget, ui.widget, .ui.widget.type, ui.widgets .widget.type {\n      color: #FFFFFF;\n    }\n    /* more legible */\n    .ui.widgets .widget,\n    .ui.widget,\n    .ui.widgets .widget.type,\n    .ui.widget.type {\n      color: #FFFFFF;\n    }\n\n    /* i have some extra time so lets group these rules */\n    .ui.widget {\n      position: relative;\n      top: 0em;\n      left: 0em;\n\n      margin: 1em;\n      border: 1px solid rgba(0, 0, 0, 0.1);\n      width: 100px;\n      height: 100px;\n      padding: 1em;\n\n      font-size: 1.2em;\n      color: rgba(0, 0, 0, 0.8);\n      line-height: 1.2em;\n\n      -webkit-border-radius: 0.3em;\n      -moz-border-radius: 0.3em;\n      border-radius: 0.3em;\n    }\n    
\n\n  
Avoid non-semantic tags, make wrappers groups
\n  
UI elements should be designed to include the minimum footprint of an element. If extra styling is needed, consider using pseudo selectors :after and :before. This allows for the creation of two extra divs inside each div context which can almost always be enough to accommodate extra styling.
\n  
If there is no other option than wrapping content in a containing HTML element, consider using a singular/plural relationship by having the wrapper describe its contents instead of an arbitrary class name like wrapper
\n    
\n    /* not tops */\n    .ui.message .wrapper .title,\n    .ui.message .wrapper .description {\n\n    }\n    /* better */\n    .ui.message .content .title,\n    .ui.message .content .description {\n\n    }\n    
\n\n    
Margins
\n    
Adding default margins to your content allow for it to have vertical rhythm in a page, but be careful about forcing margin in all circumstances. Here's a useful way to make sure content inside container elements doesn't receieve unnecessary padding.
\n    
\n    .ui.thingy {\n      margin: 1em 0em;\n    }\n    .ui.thingy:first-child {\n      margin-top: 0em;\n    }\n    .ui.thingy:last-child {\n      margin-bottom: 0em;\n    }\n    
\n\n\n    
Grammatical order
\n    
Consider using similar class syntax as if you were actually describing the element in English. Although this is by no means required it may help provide clarity in some circumstances.
\n    
\n    /* confusing word order */\n    .ui.red.button.pointing {\n\n    }\n    /* much more semantic */\n    .red.pointing.ui.button {\n\n    }\n    
\n\n    
Use Border Box
\n    
Border box fixes the box model, and allows padding to be included as part of width and height definitions. Using it opens up another world of possibilities for sizing content to fit fluidly
\n    
\n    .two.ui.thingies .ui.thingy {\n      width: 50%;\n      padding: 1em;\n      -webkit-box-sizing: border-box;\n      -moz-box-sizing: border-box;\n      -ms-box-sizing: border-box;\n      box-sizing: border-box;\n    }\n    
\n\n  
Units and Measurements
\n\n    
Unit Consistency
\n    
CSS provides a broad selection of measurements for values. It is helpful to keep unit definitions consistent across a single property definition. Including consistent units for 0 values also allows for quicker tweaking and shows greater precision in a property definition.
\n\n    
\n    /* not tops */\n    .ui.widget {\n      padding:  0 16px .6em;\n    }\n    /* hex are uppercase */\n    .ui.widget {\n      color: #09ffda;\n    }\n    /* good */\n    .ui.widget {\n      padding: 0em 0em 0em 0.2em;\n      color: #009FDA;\n    }\n    
\n\n    
Inheritance is Magical
\n    
Many CSS properties can use the value 'inherit' to specify, quite unintuitively, to take on the value of parent element for values that do not normally inherit. For example, an element can use inherit to double whatever its parents padding size is, or to receive the same type of border as a parent without knowing what it is beforehand.
\n    
\n    /* inheriting borders */\n    .ui.widget {\n      border: 2px solid rgba(0, 0, 0, 0.1);\n    }\n    /* will receive same border treatment as parent */\n    .ui.widget .foo {\n      border: inherit;\n    }\n    /* inheriting positioning */\n    .ui.widget {\n      padding: 0.5em 1em;\n    }\n    /* will use the same padding as parent */\n    .ui.widget .foo {\n      padding: inherit;\n    }\n    
\n\n    
Relatively Relative
\n    
EMs are defined so that 1em is equal to the current font size inside of an element. Using EMs can allow you to size content inside an element in proportion to the overall size of the element. Be careful though because this will stack with nested elements.
\n    
\n    .ui.thingy {\n      font-size: 14px;\n    }\n    /* this is 28 pixels */\n    .ui.thingy .thing {\n      font-size: 2em;\n    }\n    /* woah this is now 48 pixels */\n    .ui.thingy .thing .thing {\n      font-size: 2em;\n    }\n\n    /* .ui.thingy .thingy should grow as well */\n    .ui.large.thingy {\n      font-size: 16px;\n    }\n    
\n\n    
Recursively Relative
\n    
Using EMs multiplicative nature can be used to your advantage. Instead of defining multiple tiers of a menu system, consider using ems to reduce each tier's sizing. As you continue to nest menu elements each nested menu will computer its values with smaller proportions.
\n    
\n    .ui.menu {\n      font-size: 1rem;\n    }\n    .ui.menu .menu {\n      margin-left: 0.5em;\n      font-size: 0.9em;\n    }\n    
\n\n    
Absolutely Relative
\n    
Relative EMs (rems) are calculated relative to the font size of the entire page. This is needed to explain how content should be sized related to the overall size of elements on the page, and will not increase geometrically when nested like EMs.
\n    
\n    /* i am a weird page with very tiny fonts */\n    html {\n      font-size: 10px;\n    }\n    /* thats ok i am sizing everything relative to your tiny fonts */\n    .ui.menu {\n      font-size: 1rem;\n    }\n    /* i am sizing relative to the menu element */\n    .ui.menu .menu {\n      font-size: 0.8em;\n    }\n    /* i am the same size as the rule above */\n    .ui.menu .menu .menu {\n      font-size: 0.8em;\n    }\n    
\n
",
      "tags": null,
      "render": true,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": "CSS",
      "name": "cssguide.html",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "guide-cssguide",
      "url": "/guide/cssguide.html",
      "urls": [
        "/guide/cssguide.html"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": true,
      "header": "layout      : 'default'\ncss         : 'guide'\n\ntitle       : 'CSS'\ndescription : 'Suggestions for CSS development practices'\ntype        : 'UI Guide'",
      "parser": "yaml",
      "body": "<%- @partial('header') %>\n
\n\n  
\n    
\n      Techniques\n      Style Guide\n      Units\n    
\n  
\n\n\n\n  
Techniques
\n\n    
Conditional Content Formatting
\n    
Sometimes content should be formatted differently depending on whether other content exists alongside it. A useful way to do that is use the next adjacent sibling selector '+'. The content that should have the conditional formatting should always appear second because there is no previous sibling selector in css.
\n\n    
\n    .ui.widget .image {\n      float: left;\n      width: 2em;\n    }\n    .ui.widget .content {\n      color: #000000;\n    }\n    /* content is only floated if image exists */\n    .ui.widget .image + .content {\n      margin-left: 3em;\n    }\n    
\n\n    
Box Shadow Inheritance
\n    
Unfortunately box shadow must be defined as a single rule, without the ability, like border, to be broken up into separate parts for positioning, color and distance. There is however one trick to allowing for a single box shadow definition to appear as multiple colors. Box shadow inherits its color from the color attribute if no color is specified.
\n    
\n    .ui.widget {\n      -webkit-box-shadow: 0em 0.2em 0em inset;\n      -moz-box-shadow: 0em 0.2em 0em inset;\n      box-shadow: 0em 0.2em 0em inset;\n    }\n    /* This will also have a red box shadow */\n    .ui.red.widget {\n      color: #FF0000;\n    }\n    
\n\n\n    
Not Sure the Size? Table It
\n    
If content needs to fill a specified size exactly, but may be made up of parts with arbitrary size, it can be useful to use display table and table-cell. This will make sure the parent width is always obeyed regardless of alterations to an element's width.
\n    
Keep in mind any table-cell element must have a parent with display:table to appear formatted correctly.
\n\n    
\n    .ui.input {\n      display: table;\n    }\n    /* these two elements will always fill the input exactly regardlesss of the text content of the button */\n    .ui.input input {\n      display: table-cell;\n    }\n    .ui.input .button {\n      display: table-cell;\n    }\n    
\n\n    
Fixing Whitespace with Inline Block
\n    
In HTML usually whitespace doesn't change a page's layouts. However, when using inline block any whitespace will create unwanted space between consecutive inline-block elements. The simple and effective fix is to make sure font-size on the parent element is 0, making all whitespace 0 pixels. Then you can reset font-size on the child element to body font size or 1 relative em.
\n    
\n    /* remove whitespace */\n    .ui.group {\n      font-size: 0em;\n    }\n    .ui.group .item {\n      display: inline-block;\n      font-size: 1rem;\n    }\n    
\n\n    
CSS :not is Awesome
\n    
Inheritance can be hell sometimes. Consider changing the opacity of an element. There is no way to \"cancel out\" of that opacity change on content inside.
\n    
Sometimes the only way to avoid creating inheritance problems is to specify what elements should not receive a set of rules. Consider blurring content while a dimmer is present. Blurring should only apply to elements that are not inside the dimmer, but there is no way to know what the content is beforehand.
\n    
\n    /* blur everything but the dimmer */\n    body.dimmed :not(.dimmer){\n      -webkit-filter: blur(15px) grayscale(0.7);\n      -moz-filter: blur(15px) grayscale(0.7);\n    }\n    
\n\n    
Prevent Accidental Highlighting
\n    
Sometimes text can be accidentally highlighted when a user double clicks an element. No need to pull out javascript to solve this.
\n    
\n    .ui.thingy {\n      -webkit-user-select: none;\n      -moz-user-select: none;\n      -ms-user-select: none;\n      user-select: none;\n    }\n    
\n\n    
Multiple Highlight Colors
\n    
It's fairly commonly known that you can set text selection colors in css for a page, but its less commonly known that you can use multiple highlight colors in a single page.
\n    
\n    /* text selected turns highlighted yellow */\n    ::-webkit-selection {\n      background-color: #FFFFCC;\n      color: #555555;\n    }\n    ::-moz-selection {\n      background-color: #FFFFCC;\n      color: #555555;\n    }\n    ::selection {\n      background-color: #FFFFCC;\n      color: #555555;\n    }\n    /* headers selected turn red */\n    h1::-moz-selection,\n    h2::-moz-selection,\n    h3::-moz-selection {\n      background-color: #F1C1C2;\n      color: #222222;\n    }\n    h1::selection,\n    h2::selection,\n    h3::selection {\n      background-color: #F1C1C2;\n      color: #222222;\n    }\n    
\n\n\n    
Shading Borders
\n    
When you have colored content that needs a border to match its current color, try using a 1 pixel inset box shadow with an RGBA value.
\n\n    
\n\n    /* this border will be grey */\n    .ui.thingy {\n      -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;\n      -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;\n      box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;\n    }\n    /* this border will be red tinted */\n    .ui.red.thingy {\n      background-color: #FFF8F8;\n    }\n    
\n\n\n    
Joining borders
\n    
Sometimes bordered content must sit next to other bordered content. If each element uses border the borders will double. Consider using either outline or a box shadow to accomplish the same effect but without overlapping borders.
\n    
\n    /* this might not go so well */\n    .ui.thingy {\n      border: 1px solid #DDDDDD;\n    }\n    /* rgba is great, but keep in mind the overlapping borders will be added together to create a darker shade */\n    .ui.thingy {\n      outline: 1px solid rgba(0, 0, 0, 0.1);\n    }\n    /* classic but works */\n    .ui.thingy {\n      outline: 1px solid #DDDDDD;\n    }\n    /* this works too */\n    .ui.thingy {\n      -moz-box-shadow: 0px 0px 0px 1px #DDDDDD;\n      -webkit-box-shadow: 0px 0px 0px 1px #DDDDDD;\n      box-shadow: 0px 0px 0px 1px #DDDDDD;\n    }\n    
\n\n    
Using transparency
\n    
RGBA colors in css allow you to specify colors with a transparency channel. This is very useful.
\n    
Consider for example, defining the text states of an element. If the elements color changes, the text might appear more complementary as a shade of black with a portion of the original color. This can be done easily with rgba
\n    
\n    .ui.thingy {\n      background-color: #FAFAFA;\n      color: rgba(0, 0, 0, 0.7);\n    }\n    .red.ui.thingy {\n      background-color: #FF0000;\n    }\n    
\n\n    
Nothing is always Fixed
\n    
CSS fixed allows you to have content stick to an offset position in a page regardlesss of the scroll position of the page. Fixed menus will use the page as the offset parent, in all circumstances except when css transform is used on a parent element. This will change the offset context to the transformed element instead of the page.\n    
This behavior may seem unexpected, but using this quirk can allow you to have fixed position content relative to any element in a page.
\n    
\n    .ui.content {\n      transform: rotateZ(0deg);\n      overflow: scroll;\n    }\n    /* fixed will stay in its current offset relative to the parent container */\n    .ui.content .fixed.thingy {\n      position: fixed;\n      top: 0px;\n      width: 100%;\n    }\n    
\n\n    
Centering Content with Transform
\n    
Using percentages in CSS will give you a ratio based on the size of the parent element. For example, setting content to be left 50% will set content to start at exactly halfway across its parent.
\n    
If you want content to positioned relative to its own size use transform. Percentages specified inside a transform are unique in that they are based on the current element size not its parent.
\n    
\n\n    /* doesnt work */\n    .ui.modal {\n      width: 800px;\n      height: 500px;\n      left: 50%;\n      top: 50%;\n      margin: -50% 0px 0px -50%x;\n    }\n\n    /* works with measurements */\n    .ui.modal {\n      width: 800px;\n      height: 500px;\n      left: 50%;\n      top: 50%;\n      margin: -250px 0px 0px -400px;\n    }\n\n    /* with transform no measurements needed */\n    .ui.modal {\n      position: absolute;\n      width: 800px;\n      top: 50%;\n      left: 50%;\n      transform: transformX(-50%) transformY(-50%);\n    }\n    
\n\n    
Consider alternatives to floats
\n    
CSS floats can create issues with the containing element not receiving the size of its children. Using overflow:hidden to clear floats means that no piece of an element can be shown outside the bounding box of the element, which limits the possibilities in an element. Clearfixes can use up one of two available pseudo class which can often be useful for styling elements.
\n    
Consider using another means of putting content side by side like inline-block or table-cell. These provide more freedom than floated block elements, and can add additional benefits.
\n    
To avoid issues with inline-block causing spacing between elements, specify no font size on the group and 1rem on the floated content
\n    
\n    /* not the best */\n    .ui.thingy {\n      display: block;\n      overflow: hidden;\n    }\n    .ui.thingy .part {\n      display: block;\n      float: left;\n    }\n\n    /* these do the same thing */\n    .ui.thingy {\n      display: block;\n      font-size: 0rem;\n    }\n    .ui.thingy .part {\n      display: inline-block;\n      font-size: 1rem;\n    }\n    
\n\n\n    
Onion Skinning
\n    
One technique that is useful for allowing for multiple color variations of an element, without having to completely reskin each variation and shade is to use background-image gradients to define shading and state, and background-color to define the color of an element. If done well you can add a variety of colors with very little code.
\n    
\n    .ui.thingy {\n      background-color: #FAFAFA;\n    }\n    .ui.red.thingy {\n      background-color: #FF0000;\n    }\n    .ui.green.thingy {\n      background-color: #00FF00;\n    }\n    .ui.blue.thingy {\n      background-color: #0000FF;\n    }\n    .ui.thingy:hover {\n      background-image:\n        -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.05)))\n      ;\n      background-image: -webkit-linear-gradient(\n        rgba(0, 0, 0, 0.1) 0%,\n        rgba(0, 0, 0, 0.05) 100%)\n      ;\n      background-image: -moz-linear-gradient(\n        rgba(0, 0, 0, 0.1) 0%,\n        rgba(0, 0, 0, 0.05) 100%)\n      ;\n      background-image: -o-linear-gradient(\n        rgba(0, 0, 0, 0.1) 0%,\n        rgba(0, 0, 0, 0.05) 100%)\n      ;\n      background-image: linear-gradient(\n        rgba(0, 0, 0, 0.1) 0%,\n        rgba(0, 0, 0, 0.05) 100%)\n      ;\n    }\n    
\n\n\n\n  
Style Guide
\n\n    
Don't Hyphenate
\n    
All elements are designed to include their own namespace. As long as rules descend from their parent element there is no possibility of rule collision.
\n    
Hyphenated class names often describe the intersection of separate concepts, and can be better written to represent each concept separately.
\n    
\n    /* no no no */\n    .ui.button-active-red {\n      background-color: #FF0000;\n      font-weight: bold;\n      color: #FFFFFF;\n    }\n\n    /* better */\n    .red.ui.button {\n      background-color: #FF0000;\n      color: #FFFFFF;\n    }\n    .active.ui.button {\n      font-weight: bold;\n    }\n    
\n\n    
CSS Legibility
\n    
Adding extra formatting can help increase clarity in your code. We suggest separating css selectors on separate lines, adding a space after css properties with commas (like box-shadow) and placing a zero before any decimal value.
\n\n    
\n    /* not so easy to read */\n    .ui.widgets .widget, ui.widget, .ui.widget.type, ui.widgets .widget.type {\n      color: #FFFFFF;\n    }\n    /* this should have spaces after commas and a zero before any decimal value */\n    .ui.widget {\n      color:rgba(0,0,0,.3);\n    }\n\n    /* easier to read */\n    .ui.widgets .widget,\n    .ui.widget,\n    .ui.widgets .widget.type,\n    .ui.widget.type {\n      color: #FFFFFF;\n    }\n    /* properly formatted */\n    .ui.widget {\n      color: rgba(0, 0, 0, 0.3);\n    }\n    
\n\n\n    
Keep Things Ordered
\n    
Although css rule order may be considered a chore, grouping related rules together can help keep css code organized.
\n    
An easy way to do this is to consider ordering rules from the outside in. First describing positioning rules, then border rules, margin, sizing, padding, font-size, line height and ending with vendor prefixed attributes.
\n\n    
\n    /* not so easy to read */\n    .ui.widgets .widget, ui.widget, .ui.widget.type, ui.widgets .widget.type {\n      color: #FFFFFF;\n    }\n    /* more legible */\n    .ui.widgets .widget,\n    .ui.widget,\n    .ui.widgets .widget.type,\n    .ui.widget.type {\n      color: #FFFFFF;\n    }\n\n    /* i have some extra time so lets group these rules */\n    .ui.widget {\n      position: relative;\n      top: 0em;\n      left: 0em;\n\n      margin: 1em;\n      border: 1px solid rgba(0, 0, 0, 0.1);\n      width: 100px;\n      height: 100px;\n      padding: 1em;\n\n      font-size: 1.2em;\n      color: rgba(0, 0, 0, 0.8);\n      line-height: 1.2em;\n\n      -webkit-border-radius: 0.3em;\n      -moz-border-radius: 0.3em;\n      border-radius: 0.3em;\n    }\n    
\n\n  
Avoid non-semantic tags, make wrappers groups
\n  
UI elements should be designed to include the minimum footprint of an element. If extra styling is needed, consider using pseudo selectors :after and :before. This allows for the creation of two extra divs inside each div context which can almost always be enough to accommodate extra styling.
\n  
If there is no other option than wrapping content in a containing HTML element, consider using a singular/plural relationship by having the wrapper describe its contents instead of an arbitrary class name like wrapper
\n    
\n    /* not tops */\n    .ui.message .wrapper .title,\n    .ui.message .wrapper .description {\n\n    }\n    /* better */\n    .ui.message .content .title,\n    .ui.message .content .description {\n\n    }\n    
\n\n    
Margins
\n    
Adding default margins to your content allow for it to have vertical rhythm in a page, but be careful about forcing margin in all circumstances. Here's a useful way to make sure content inside container elements doesn't receieve unnecessary padding.
\n    
\n    .ui.thingy {\n      margin: 1em 0em;\n    }\n    .ui.thingy:first-child {\n      margin-top: 0em;\n    }\n    .ui.thingy:last-child {\n      margin-bottom: 0em;\n    }\n    
\n\n\n    
Grammatical order
\n    
Consider using similar class syntax as if you were actually describing the element in English. Although this is by no means required it may help provide clarity in some circumstances.
\n    
\n    /* confusing word order */\n    .ui.red.button.pointing {\n\n    }\n    /* much more semantic */\n    .red.pointing.ui.button {\n\n    }\n    
\n\n    
Use Border Box
\n    
Border box fixes the box model, and allows padding to be included as part of width and height definitions. Using it opens up another world of possibilities for sizing content to fit fluidly
\n    
\n    .two.ui.thingies .ui.thingy {\n      width: 50%;\n      padding: 1em;\n      -webkit-box-sizing: border-box;\n      -moz-box-sizing: border-box;\n      -ms-box-sizing: border-box;\n      box-sizing: border-box;\n    }\n    
\n\n  
Units and Measurements
\n\n    
Unit Consistency
\n    
CSS provides a broad selection of measurements for values. It is helpful to keep unit definitions consistent across a single property definition. Including consistent units for 0 values also allows for quicker tweaking and shows greater precision in a property definition.
\n\n    
\n    /* not tops */\n    .ui.widget {\n      padding:  0 16px .6em;\n    }\n    /* hex are uppercase */\n    .ui.widget {\n      color: #09ffda;\n    }\n    /* good */\n    .ui.widget {\n      padding: 0em 0em 0em 0.2em;\n      color: #009FDA;\n    }\n    
\n\n    
Inheritance is Magical
\n    
Many CSS properties can use the value 'inherit' to specify, quite unintuitively, to take on the value of parent element for values that do not normally inherit. For example, an element can use inherit to double whatever its parents padding size is, or to receive the same type of border as a parent without knowing what it is beforehand.
\n    
\n    /* inheriting borders */\n    .ui.widget {\n      border: 2px solid rgba(0, 0, 0, 0.1);\n    }\n    /* will receive same border treatment as parent */\n    .ui.widget .foo {\n      border: inherit;\n    }\n    /* inheriting positioning */\n    .ui.widget {\n      padding: 0.5em 1em;\n    }\n    /* will use the same padding as parent */\n    .ui.widget .foo {\n      padding: inherit;\n    }\n    
\n\n    
Relatively Relative
\n    
EMs are defined so that 1em is equal to the current font size inside of an element. Using EMs can allow you to size content inside an element in proportion to the overall size of the element. Be careful though because this will stack with nested elements.
\n    
\n    .ui.thingy {\n      font-size: 14px;\n    }\n    /* this is 28 pixels */\n    .ui.thingy .thing {\n      font-size: 2em;\n    }\n    /* woah this is now 48 pixels */\n    .ui.thingy .thing .thing {\n      font-size: 2em;\n    }\n\n    /* .ui.thingy .thingy should grow as well */\n    .ui.large.thingy {\n      font-size: 16px;\n    }\n    
\n\n    
Recursively Relative
\n    
Using EMs multiplicative nature can be used to your advantage. Instead of defining multiple tiers of a menu system, consider using ems to reduce each tier's sizing. As you continue to nest menu elements each nested menu will computer its values with smaller proportions.
\n    
\n    .ui.menu {\n      font-size: 1rem;\n    }\n    .ui.menu .menu {\n      margin-left: 0.5em;\n      font-size: 0.9em;\n    }\n    
\n\n    
Absolutely Relative
\n    
Relative EMs (rems) are calculated relative to the font size of the entire page. This is needed to explain how content should be sized related to the overall size of elements on the page, and will not increase geometrically when nested like EMs.
\n    
\n    /* i am a weird page with very tiny fonts */\n    html {\n      font-size: 10px;\n    }\n    /* thats ok i am sizing everything relative to your tiny fonts */\n    .ui.menu {\n      font-size: 1rem;\n    }\n    /* i am sizing relative to the menu element */\n    .ui.menu .menu {\n      font-size: 0.8em;\n    }\n    /* i am the same size as the rule above */\n    .ui.menu .menu .menu {\n      font-size: 0.8em;\n    }\n    
\n
",
      "rendered": true,
      "contentRendered": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  \n  \n  \n  \n\n  \n\n  \n  \n  CSS | Semantic UI\n\n  \n  \n\n  \n\n  \n  \n  \n\n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n\n  \n  \n\n\n  
\n    \n       Close Menu\n    \n    \n       Download\n    \n    
\n      \n        Introduction\n      \n      
\n        \n          Definitions\n        \n          Overview\n        \n          Types\n        \n          Variations\n        \n          What's Different\n        \n      
\n    
\n    
\n      Project\n      
\n        \n          Contributing\n        \n          Set-up\n        \n      
\n    
\n    
\n      Elements\n      
\n        \n          Button\n        \n          Divider\n        \n          Header\n        \n          Icon\n        \n          Image\n        \n          Input\n        \n          Label\n        \n          Loader\n        \n          Progress\n        \n          Reveal\n        \n          Segment\n        \n          Step\n        \n      
\n    
\n    
\n      Collections\n      
\n        \n          Breadcrumb\n        \n          Form\n        \n          Grid\n        \n          Menu\n        \n          Message\n        \n          Table\n        \n      
\n    
\n    
\n      Views\n      
\n        \n          Comment\n        \n          Feed\n        \n          Item\n        \n          List\n        \n      
\n    
\n    
\n      Modules\n      
\n        \n          Accordion\n        \n          Checkbox\n        \n          Dimmer\n        \n          Dropdown\n        \n          Modal\n        \n          Popup\n        \n          Rating\n        \n          Shape\n        \n          Sidebar\n        \n          Transition\n        \n      
\n    
\n    
\n      Behavior\n      
\n        \n          Form Validation\n        \n      
\n    
\n    
\n      Style Guide\n      
\n        \n          CSS\n        \n          Javascript\n        \n          Language\n        \n      
\n    
\n\n  
\n\n  
\n    
\n       Content\n      
\n        UI Guide: CSS\n      
\n      \n      
\n      \n      
\n        1 of 3\n        
\n          \n            
\n              1. CSS\n            
\n          \n            
\n              2. Javascript\n            
\n          \n            
\n              3. Language\n            
\n          \n        
\n      
\n      \n      \n      \n      
\n        \n        
\n          \n        
\n        \n        \n        \n          \n        \n        \n      
\n    
\n  
\n    
\n      \n      Menu\n    
\n  \n\n
\n  
\n    
\n\n      
\n        CSS\n        \n      
\n\n      
Suggestions for CSS development practices
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n
\n\n  
\n    
\n      Techniques\n      Style Guide\n      Units\n    
\n  
\n\n\n\n  
Techniques
\n\n    
Conditional Content Formatting
\n    
Sometimes content should be formatted differently depending on whether other content exists alongside it. A useful way to do that is use the next adjacent sibling selector '+'. The content that should have the conditional formatting should always appear second because there is no previous sibling selector in css.
\n\n    
\n    .ui.widget .image {\n      float: left;\n      width: 2em;\n    }\n    .ui.widget .content {\n      color: #000000;\n    }\n    /* content is only floated if image exists */\n    .ui.widget .image + .content {\n      margin-left: 3em;\n    }\n    
\n\n    
Box Shadow Inheritance
\n    
Unfortunately box shadow must be defined as a single rule, without the ability, like border, to be broken up into separate parts for positioning, color and distance. There is however one trick to allowing for a single box shadow definition to appear as multiple colors. Box shadow inherits its color from the color attribute if no color is specified.
\n    
\n    .ui.widget {\n      -webkit-box-shadow: 0em 0.2em 0em inset;\n      -moz-box-shadow: 0em 0.2em 0em inset;\n      box-shadow: 0em 0.2em 0em inset;\n    }\n    /* This will also have a red box shadow */\n    .ui.red.widget {\n      color: #FF0000;\n    }\n    
\n\n\n    
Not Sure the Size? Table It
\n    
If content needs to fill a specified size exactly, but may be made up of parts with arbitrary size, it can be useful to use display table and table-cell. This will make sure the parent width is always obeyed regardless of alterations to an element's width.
\n    
Keep in mind any table-cell element must have a parent with display:table to appear formatted correctly.
\n\n    
\n    .ui.input {\n      display: table;\n    }\n    /* these two elements will always fill the input exactly regardlesss of the text content of the button */\n    .ui.input input {\n      display: table-cell;\n    }\n    .ui.input .button {\n      display: table-cell;\n    }\n    
\n\n    
Fixing Whitespace with Inline Block
\n    
In HTML usually whitespace doesn't change a page's layouts. However, when using inline block any whitespace will create unwanted space between consecutive inline-block elements. The simple and effective fix is to make sure font-size on the parent element is 0, making all whitespace 0 pixels. Then you can reset font-size on the child element to body font size or 1 relative em.
\n    
\n    /* remove whitespace */\n    .ui.group {\n      font-size: 0em;\n    }\n    .ui.group .item {\n      display: inline-block;\n      font-size: 1rem;\n    }\n    
\n\n    
CSS :not is Awesome
\n    
Inheritance can be hell sometimes. Consider changing the opacity of an element. There is no way to \"cancel out\" of that opacity change on content inside.
\n    
Sometimes the only way to avoid creating inheritance problems is to specify what elements should not receive a set of rules. Consider blurring content while a dimmer is present. Blurring should only apply to elements that are not inside the dimmer, but there is no way to know what the content is beforehand.
\n    
\n    /* blur everything but the dimmer */\n    body.dimmed :not(.dimmer){\n      -webkit-filter: blur(15px) grayscale(0.7);\n      -moz-filter: blur(15px) grayscale(0.7);\n    }\n    
\n\n    
Prevent Accidental Highlighting
\n    
Sometimes text can be accidentally highlighted when a user double clicks an element. No need to pull out javascript to solve this.
\n    
\n    .ui.thingy {\n      -webkit-user-select: none;\n      -moz-user-select: none;\n      -ms-user-select: none;\n      user-select: none;\n    }\n    
\n\n    
Multiple Highlight Colors
\n    
It's fairly commonly known that you can set text selection colors in css for a page, but its less commonly known that you can use multiple highlight colors in a single page.
\n    
\n    /* text selected turns highlighted yellow */\n    ::-webkit-selection {\n      background-color: #FFFFCC;\n      color: #555555;\n    }\n    ::-moz-selection {\n      background-color: #FFFFCC;\n      color: #555555;\n    }\n    ::selection {\n      background-color: #FFFFCC;\n      color: #555555;\n    }\n    /* headers selected turn red */\n    h1::-moz-selection,\n    h2::-moz-selection,\n    h3::-moz-selection {\n      background-color: #F1C1C2;\n      color: #222222;\n    }\n    h1::selection,\n    h2::selection,\n    h3::selection {\n      background-color: #F1C1C2;\n      color: #222222;\n    }\n    
\n\n\n    
Shading Borders
\n    
When you have colored content that needs a border to match its current color, try using a 1 pixel inset box shadow with an RGBA value.
\n\n    
\n\n    /* this border will be grey */\n    .ui.thingy {\n      -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;\n      -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;\n      box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;\n    }\n    /* this border will be red tinted */\n    .ui.red.thingy {\n      background-color: #FFF8F8;\n    }\n    
\n\n\n    
Joining borders
\n    
Sometimes bordered content must sit next to other bordered content. If each element uses border the borders will double. Consider using either outline or a box shadow to accomplish the same effect but without overlapping borders.
\n    
\n    /* this might not go so well */\n    .ui.thingy {\n      border: 1px solid #DDDDDD;\n    }\n    /* rgba is great, but keep in mind the overlapping borders will be added together to create a darker shade */\n    .ui.thingy {\n      outline: 1px solid rgba(0, 0, 0, 0.1);\n    }\n    /* classic but works */\n    .ui.thingy {\n      outline: 1px solid #DDDDDD;\n    }\n    /* this works too */\n    .ui.thingy {\n      -moz-box-shadow: 0px 0px 0px 1px #DDDDDD;\n      -webkit-box-shadow: 0px 0px 0px 1px #DDDDDD;\n      box-shadow: 0px 0px 0px 1px #DDDDDD;\n    }\n    
\n\n    
Using transparency
\n    
RGBA colors in css allow you to specify colors with a transparency channel. This is very useful.
\n    
Consider for example, defining the text states of an element. If the elements color changes, the text might appear more complementary as a shade of black with a portion of the original color. This can be done easily with rgba
\n    
\n    .ui.thingy {\n      background-color: #FAFAFA;\n      color: rgba(0, 0, 0, 0.7);\n    }\n    .red.ui.thingy {\n      background-color: #FF0000;\n    }\n    
\n\n    
Nothing is always Fixed
\n    
CSS fixed allows you to have content stick to an offset position in a page regardlesss of the scroll position of the page. Fixed menus will use the page as the offset parent, in all circumstances except when css transform is used on a parent element. This will change the offset context to the transformed element instead of the page.\n    
This behavior may seem unexpected, but using this quirk can allow you to have fixed position content relative to any element in a page.
\n    
\n    .ui.content {\n      transform: rotateZ(0deg);\n      overflow: scroll;\n    }\n    /* fixed will stay in its current offset relative to the parent container */\n    .ui.content .fixed.thingy {\n      position: fixed;\n      top: 0px;\n      width: 100%;\n    }\n    
\n\n    
Centering Content with Transform
\n    
Using percentages in CSS will give you a ratio based on the size of the parent element. For example, setting content to be left 50% will set content to start at exactly halfway across its parent.
\n    
If you want content to positioned relative to its own size use transform. Percentages specified inside a transform are unique in that they are based on the current element size not its parent.
\n    
\n\n    /* doesnt work */\n    .ui.modal {\n      width: 800px;\n      height: 500px;\n      left: 50%;\n      top: 50%;\n      margin: -50% 0px 0px -50%x;\n    }\n\n    /* works with measurements */\n    .ui.modal {\n      width: 800px;\n      height: 500px;\n      left: 50%;\n      top: 50%;\n      margin: -250px 0px 0px -400px;\n    }\n\n    /* with transform no measurements needed */\n    .ui.modal {\n      position: absolute;\n      width: 800px;\n      top: 50%;\n      left: 50%;\n      transform: transformX(-50%) transformY(-50%);\n    }\n    
\n\n    
Consider alternatives to floats
\n    
CSS floats can create issues with the containing element not receiving the size of its children. Using overflow:hidden to clear floats means that no piece of an element can be shown outside the bounding box of the element, which limits the possibilities in an element. Clearfixes can use up one of two available pseudo class which can often be useful for styling elements.
\n    
Consider using another means of putting content side by side like inline-block or table-cell. These provide more freedom than floated block elements, and can add additional benefits.
\n    
To avoid issues with inline-block causing spacing between elements, specify no font size on the group and 1rem on the floated content
\n    
\n    /* not the best */\n    .ui.thingy {\n      display: block;\n      overflow: hidden;\n    }\n    .ui.thingy .part {\n      display: block;\n      float: left;\n    }\n\n    /* these do the same thing */\n    .ui.thingy {\n      display: block;\n      font-size: 0rem;\n    }\n    .ui.thingy .part {\n      display: inline-block;\n      font-size: 1rem;\n    }\n    
\n\n\n    
Onion Skinning
\n    
One technique that is useful for allowing for multiple color variations of an element, without having to completely reskin each variation and shade is to use background-image gradients to define shading and state, and background-color to define the color of an element. If done well you can add a variety of colors with very little code.
\n    
\n    .ui.thingy {\n      background-color: #FAFAFA;\n    }\n    .ui.red.thingy {\n      background-color: #FF0000;\n    }\n    .ui.green.thingy {\n      background-color: #00FF00;\n    }\n    .ui.blue.thingy {\n      background-color: #0000FF;\n    }\n    .ui.thingy:hover {\n      background-image:\n        -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.05)))\n      ;\n      background-image: -webkit-linear-gradient(\n        rgba(0, 0, 0, 0.1) 0%,\n        rgba(0, 0, 0, 0.05) 100%)\n      ;\n      background-image: -moz-linear-gradient(\n        rgba(0, 0, 0, 0.1) 0%,\n        rgba(0, 0, 0, 0.05) 100%)\n      ;\n      background-image: -o-linear-gradient(\n        rgba(0, 0, 0, 0.1) 0%,\n        rgba(0, 0, 0, 0.05) 100%)\n      ;\n      background-image: linear-gradient(\n        rgba(0, 0, 0, 0.1) 0%,\n        rgba(0, 0, 0, 0.05) 100%)\n      ;\n    }\n    
\n\n\n\n  
Style Guide
\n\n    
Don't Hyphenate
\n    
All elements are designed to include their own namespace. As long as rules descend from their parent element there is no possibility of rule collision.
\n    
Hyphenated class names often describe the intersection of separate concepts, and can be better written to represent each concept separately.
\n    
\n    /* no no no */\n    .ui.button-active-red {\n      background-color: #FF0000;\n      font-weight: bold;\n      color: #FFFFFF;\n    }\n\n    /* better */\n    .red.ui.button {\n      background-color: #FF0000;\n      color: #FFFFFF;\n    }\n    .active.ui.button {\n      font-weight: bold;\n    }\n    
\n\n    
CSS Legibility
\n    
Adding extra formatting can help increase clarity in your code. We suggest separating css selectors on separate lines, adding a space after css properties with commas (like box-shadow) and placing a zero before any decimal value.
\n\n    
\n    /* not so easy to read */\n    .ui.widgets .widget, ui.widget, .ui.widget.type, ui.widgets .widget.type {\n      color: #FFFFFF;\n    }\n    /* this should have spaces after commas and a zero before any decimal value */\n    .ui.widget {\n      color:rgba(0,0,0,.3);\n    }\n\n    /* easier to read */\n    .ui.widgets .widget,\n    .ui.widget,\n    .ui.widgets .widget.type,\n    .ui.widget.type {\n      color: #FFFFFF;\n    }\n    /* properly formatted */\n    .ui.widget {\n      color: rgba(0, 0, 0, 0.3);\n    }\n    
\n\n\n    
Keep Things Ordered
\n    
Although css rule order may be considered a chore, grouping related rules together can help keep css code organized.
\n    
An easy way to do this is to consider ordering rules from the outside in. First describing positioning rules, then border rules, margin, sizing, padding, font-size, line height and ending with vendor prefixed attributes.
\n\n    
\n    /* not so easy to read */\n    .ui.widgets .widget, ui.widget, .ui.widget.type, ui.widgets .widget.type {\n      color: #FFFFFF;\n    }\n    /* more legible */\n    .ui.widgets .widget,\n    .ui.widget,\n    .ui.widgets .widget.type,\n    .ui.widget.type {\n      color: #FFFFFF;\n    }\n\n    /* i have some extra time so lets group these rules */\n    .ui.widget {\n      position: relative;\n      top: 0em;\n      left: 0em;\n\n      margin: 1em;\n      border: 1px solid rgba(0, 0, 0, 0.1);\n      width: 100px;\n      height: 100px;\n      padding: 1em;\n\n      font-size: 1.2em;\n      color: rgba(0, 0, 0, 0.8);\n      line-height: 1.2em;\n\n      -webkit-border-radius: 0.3em;\n      -moz-border-radius: 0.3em;\n      border-radius: 0.3em;\n    }\n    
\n\n  
Avoid non-semantic tags, make wrappers groups
\n  
UI elements should be designed to include the minimum footprint of an element. If extra styling is needed, consider using pseudo selectors :after and :before. This allows for the creation of two extra divs inside each div context which can almost always be enough to accommodate extra styling.
\n  
If there is no other option than wrapping content in a containing HTML element, consider using a singular/plural relationship by having the wrapper describe its contents instead of an arbitrary class name like wrapper
\n    
\n    /* not tops */\n    .ui.message .wrapper .title,\n    .ui.message .wrapper .description {\n\n    }\n    /* better */\n    .ui.message .content .title,\n    .ui.message .content .description {\n\n    }\n    
\n\n    
Margins
\n    
Adding default margins to your content allow for it to have vertical rhythm in a page, but be careful about forcing margin in all circumstances. Here's a useful way to make sure content inside container elements doesn't receieve unnecessary padding.
\n    
\n    .ui.thingy {\n      margin: 1em 0em;\n    }\n    .ui.thingy:first-child {\n      margin-top: 0em;\n    }\n    .ui.thingy:last-child {\n      margin-bottom: 0em;\n    }\n    
\n\n\n    
Grammatical order
\n    
Consider using similar class syntax as if you were actually describing the element in English. Although this is by no means required it may help provide clarity in some circumstances.
\n    
\n    /* confusing word order */\n    .ui.red.button.pointing {\n\n    }\n    /* much more semantic */\n    .red.pointing.ui.button {\n\n    }\n    
\n\n    
Use Border Box
\n    
Border box fixes the box model, and allows padding to be included as part of width and height definitions. Using it opens up another world of possibilities for sizing content to fit fluidly
\n    
\n    .two.ui.thingies .ui.thingy {\n      width: 50%;\n      padding: 1em;\n      -webkit-box-sizing: border-box;\n      -moz-box-sizing: border-box;\n      -ms-box-sizing: border-box;\n      box-sizing: border-box;\n    }\n    
\n\n  
Units and Measurements
\n\n    
Unit Consistency
\n    
CSS provides a broad selection of measurements for values. It is helpful to keep unit definitions consistent across a single property definition. Including consistent units for 0 values also allows for quicker tweaking and shows greater precision in a property definition.
\n\n    
\n    /* not tops */\n    .ui.widget {\n      padding:  0 16px .6em;\n    }\n    /* hex are uppercase */\n    .ui.widget {\n      color: #09ffda;\n    }\n    /* good */\n    .ui.widget {\n      padding: 0em 0em 0em 0.2em;\n      color: #009FDA;\n    }\n    
\n\n    
Inheritance is Magical
\n    
Many CSS properties can use the value 'inherit' to specify, quite unintuitively, to take on the value of parent element for values that do not normally inherit. For example, an element can use inherit to double whatever its parents padding size is, or to receive the same type of border as a parent without knowing what it is beforehand.
\n    
\n    /* inheriting borders */\n    .ui.widget {\n      border: 2px solid rgba(0, 0, 0, 0.1);\n    }\n    /* will receive same border treatment as parent */\n    .ui.widget .foo {\n      border: inherit;\n    }\n    /* inheriting positioning */\n    .ui.widget {\n      padding: 0.5em 1em;\n    }\n    /* will use the same padding as parent */\n    .ui.widget .foo {\n      padding: inherit;\n    }\n    
\n\n    
Relatively Relative
\n    
EMs are defined so that 1em is equal to the current font size inside of an element. Using EMs can allow you to size content inside an element in proportion to the overall size of the element. Be careful though because this will stack with nested elements.
\n    
\n    .ui.thingy {\n      font-size: 14px;\n    }\n    /* this is 28 pixels */\n    .ui.thingy .thing {\n      font-size: 2em;\n    }\n    /* woah this is now 48 pixels */\n    .ui.thingy .thing .thing {\n      font-size: 2em;\n    }\n\n    /* .ui.thingy .thingy should grow as well */\n    .ui.large.thingy {\n      font-size: 16px;\n    }\n    
\n\n    
Recursively Relative
\n    
Using EMs multiplicative nature can be used to your advantage. Instead of defining multiple tiers of a menu system, consider using ems to reduce each tier's sizing. As you continue to nest menu elements each nested menu will computer its values with smaller proportions.
\n    
\n    .ui.menu {\n      font-size: 1rem;\n    }\n    .ui.menu .menu {\n      margin-left: 0.5em;\n      font-size: 0.9em;\n    }\n    
\n\n    
Absolutely Relative
\n    
Relative EMs (rems) are calculated relative to the font size of the entire page. This is needed to explain how content should be sized related to the overall size of elements on the page, and will not increase geometrically when nested like EMs.
\n    
\n    /* i am a weird page with very tiny fonts */\n    html {\n      font-size: 10px;\n    }\n    /* thats ok i am sizing everything relative to your tiny fonts */\n    .ui.menu {\n      font-size: 1rem;\n    }\n    /* i am sizing relative to the menu element */\n    .ui.menu .menu {\n      font-size: 0.8em;\n    }\n    /* i am the same size as the rule above */\n    .ui.menu .menu .menu {\n      font-size: 0.8em;\n    }\n    
\n
\n\n\n",
      "contentRenderedWithoutLayouts": "\n\n
\n  
\n    
\n\n      
\n        CSS\n        \n      
\n\n      
Suggestions for CSS development practices
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n
\n\n  
\n    
\n      Techniques\n      Style Guide\n      Units\n    
\n  
\n\n\n\n  
Techniques
\n\n    
Conditional Content Formatting
\n    
Sometimes content should be formatted differently depending on whether other content exists alongside it. A useful way to do that is use the next adjacent sibling selector '+'. The content that should have the conditional formatting should always appear second because there is no previous sibling selector in css.
\n\n    
\n    .ui.widget .image {\n      float: left;\n      width: 2em;\n    }\n    .ui.widget .content {\n      color: #000000;\n    }\n    /* content is only floated if image exists */\n    .ui.widget .image + .content {\n      margin-left: 3em;\n    }\n    
\n\n    
Box Shadow Inheritance
\n    
Unfortunately box shadow must be defined as a single rule, without the ability, like border, to be broken up into separate parts for positioning, color and distance. There is however one trick to allowing for a single box shadow definition to appear as multiple colors. Box shadow inherits its color from the color attribute if no color is specified.
\n    
\n    .ui.widget {\n      -webkit-box-shadow: 0em 0.2em 0em inset;\n      -moz-box-shadow: 0em 0.2em 0em inset;\n      box-shadow: 0em 0.2em 0em inset;\n    }\n    /* This will also have a red box shadow */\n    .ui.red.widget {\n      color: #FF0000;\n    }\n    
\n\n\n    
Not Sure the Size? Table It
\n    
If content needs to fill a specified size exactly, but may be made up of parts with arbitrary size, it can be useful to use display table and table-cell. This will make sure the parent width is always obeyed regardless of alterations to an element's width.
\n    
Keep in mind any table-cell element must have a parent with display:table to appear formatted correctly.
\n\n    
\n    .ui.input {\n      display: table;\n    }\n    /* these two elements will always fill the input exactly regardlesss of the text content of the button */\n    .ui.input input {\n      display: table-cell;\n    }\n    .ui.input .button {\n      display: table-cell;\n    }\n    
\n\n    
Fixing Whitespace with Inline Block
\n    
In HTML usually whitespace doesn't change a page's layouts. However, when using inline block any whitespace will create unwanted space between consecutive inline-block elements. The simple and effective fix is to make sure font-size on the parent element is 0, making all whitespace 0 pixels. Then you can reset font-size on the child element to body font size or 1 relative em.
\n    
\n    /* remove whitespace */\n    .ui.group {\n      font-size: 0em;\n    }\n    .ui.group .item {\n      display: inline-block;\n      font-size: 1rem;\n    }\n    
\n\n    
CSS :not is Awesome
\n    
Inheritance can be hell sometimes. Consider changing the opacity of an element. There is no way to \"cancel out\" of that opacity change on content inside.
\n    
Sometimes the only way to avoid creating inheritance problems is to specify what elements should not receive a set of rules. Consider blurring content while a dimmer is present. Blurring should only apply to elements that are not inside the dimmer, but there is no way to know what the content is beforehand.
\n    
\n    /* blur everything but the dimmer */\n    body.dimmed :not(.dimmer){\n      -webkit-filter: blur(15px) grayscale(0.7);\n      -moz-filter: blur(15px) grayscale(0.7);\n    }\n    
\n\n    
Prevent Accidental Highlighting
\n    
Sometimes text can be accidentally highlighted when a user double clicks an element. No need to pull out javascript to solve this.
\n    
\n    .ui.thingy {\n      -webkit-user-select: none;\n      -moz-user-select: none;\n      -ms-user-select: none;\n      user-select: none;\n    }\n    
\n\n    
Multiple Highlight Colors
\n    
It's fairly commonly known that you can set text selection colors in css for a page, but its less commonly known that you can use multiple highlight colors in a single page.
\n    
\n    /* text selected turns highlighted yellow */\n    ::-webkit-selection {\n      background-color: #FFFFCC;\n      color: #555555;\n    }\n    ::-moz-selection {\n      background-color: #FFFFCC;\n      color: #555555;\n    }\n    ::selection {\n      background-color: #FFFFCC;\n      color: #555555;\n    }\n    /* headers selected turn red */\n    h1::-moz-selection,\n    h2::-moz-selection,\n    h3::-moz-selection {\n      background-color: #F1C1C2;\n      color: #222222;\n    }\n    h1::selection,\n    h2::selection,\n    h3::selection {\n      background-color: #F1C1C2;\n      color: #222222;\n    }\n    
\n\n\n    
Shading Borders
\n    
When you have colored content that needs a border to match its current color, try using a 1 pixel inset box shadow with an RGBA value.
\n\n    
\n\n    /* this border will be grey */\n    .ui.thingy {\n      -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;\n      -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;\n      box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;\n    }\n    /* this border will be red tinted */\n    .ui.red.thingy {\n      background-color: #FFF8F8;\n    }\n    
\n\n\n    
Joining borders
\n    
Sometimes bordered content must sit next to other bordered content. If each element uses border the borders will double. Consider using either outline or a box shadow to accomplish the same effect but without overlapping borders.
\n    
\n    /* this might not go so well */\n    .ui.thingy {\n      border: 1px solid #DDDDDD;\n    }\n    /* rgba is great, but keep in mind the overlapping borders will be added together to create a darker shade */\n    .ui.thingy {\n      outline: 1px solid rgba(0, 0, 0, 0.1);\n    }\n    /* classic but works */\n    .ui.thingy {\n      outline: 1px solid #DDDDDD;\n    }\n    /* this works too */\n    .ui.thingy {\n      -moz-box-shadow: 0px 0px 0px 1px #DDDDDD;\n      -webkit-box-shadow: 0px 0px 0px 1px #DDDDDD;\n      box-shadow: 0px 0px 0px 1px #DDDDDD;\n    }\n    
\n\n    
Using transparency
\n    
RGBA colors in css allow you to specify colors with a transparency channel. This is very useful.
\n    
Consider for example, defining the text states of an element. If the elements color changes, the text might appear more complementary as a shade of black with a portion of the original color. This can be done easily with rgba
\n    
\n    .ui.thingy {\n      background-color: #FAFAFA;\n      color: rgba(0, 0, 0, 0.7);\n    }\n    .red.ui.thingy {\n      background-color: #FF0000;\n    }\n    
\n\n    
Nothing is always Fixed
\n    
CSS fixed allows you to have content stick to an offset position in a page regardlesss of the scroll position of the page. Fixed menus will use the page as the offset parent, in all circumstances except when css transform is used on a parent element. This will change the offset context to the transformed element instead of the page.\n    
This behavior may seem unexpected, but using this quirk can allow you to have fixed position content relative to any element in a page.
\n    
\n    .ui.content {\n      transform: rotateZ(0deg);\n      overflow: scroll;\n    }\n    /* fixed will stay in its current offset relative to the parent container */\n    .ui.content .fixed.thingy {\n      position: fixed;\n      top: 0px;\n      width: 100%;\n    }\n    
\n\n    
Centering Content with Transform
\n    
Using percentages in CSS will give you a ratio based on the size of the parent element. For example, setting content to be left 50% will set content to start at exactly halfway across its parent.
\n    
If you want content to positioned relative to its own size use transform. Percentages specified inside a transform are unique in that they are based on the current element size not its parent.
\n    
\n\n    /* doesnt work */\n    .ui.modal {\n      width: 800px;\n      height: 500px;\n      left: 50%;\n      top: 50%;\n      margin: -50% 0px 0px -50%x;\n    }\n\n    /* works with measurements */\n    .ui.modal {\n      width: 800px;\n      height: 500px;\n      left: 50%;\n      top: 50%;\n      margin: -250px 0px 0px -400px;\n    }\n\n    /* with transform no measurements needed */\n    .ui.modal {\n      position: absolute;\n      width: 800px;\n      top: 50%;\n      left: 50%;\n      transform: transformX(-50%) transformY(-50%);\n    }\n    
\n\n    
Consider alternatives to floats
\n    
CSS floats can create issues with the containing element not receiving the size of its children. Using overflow:hidden to clear floats means that no piece of an element can be shown outside the bounding box of the element, which limits the possibilities in an element. Clearfixes can use up one of two available pseudo class which can often be useful for styling elements.
\n    
Consider using another means of putting content side by side like inline-block or table-cell. These provide more freedom than floated block elements, and can add additional benefits.
\n    
To avoid issues with inline-block causing spacing between elements, specify no font size on the group and 1rem on the floated content
\n    
\n    /* not the best */\n    .ui.thingy {\n      display: block;\n      overflow: hidden;\n    }\n    .ui.thingy .part {\n      display: block;\n      float: left;\n    }\n\n    /* these do the same thing */\n    .ui.thingy {\n      display: block;\n      font-size: 0rem;\n    }\n    .ui.thingy .part {\n      display: inline-block;\n      font-size: 1rem;\n    }\n    
\n\n\n    
Onion Skinning
\n    
One technique that is useful for allowing for multiple color variations of an element, without having to completely reskin each variation and shade is to use background-image gradients to define shading and state, and background-color to define the color of an element. If done well you can add a variety of colors with very little code.
\n    
\n    .ui.thingy {\n      background-color: #FAFAFA;\n    }\n    .ui.red.thingy {\n      background-color: #FF0000;\n    }\n    .ui.green.thingy {\n      background-color: #00FF00;\n    }\n    .ui.blue.thingy {\n      background-color: #0000FF;\n    }\n    .ui.thingy:hover {\n      background-image:\n        -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.05)))\n      ;\n      background-image: -webkit-linear-gradient(\n        rgba(0, 0, 0, 0.1) 0%,\n        rgba(0, 0, 0, 0.05) 100%)\n      ;\n      background-image: -moz-linear-gradient(\n        rgba(0, 0, 0, 0.1) 0%,\n        rgba(0, 0, 0, 0.05) 100%)\n      ;\n      background-image: -o-linear-gradient(\n        rgba(0, 0, 0, 0.1) 0%,\n        rgba(0, 0, 0, 0.05) 100%)\n      ;\n      background-image: linear-gradient(\n        rgba(0, 0, 0, 0.1) 0%,\n        rgba(0, 0, 0, 0.05) 100%)\n      ;\n    }\n    
\n\n\n\n  
Style Guide
\n\n    
Don't Hyphenate
\n    
All elements are designed to include their own namespace. As long as rules descend from their parent element there is no possibility of rule collision.
\n    
Hyphenated class names often describe the intersection of separate concepts, and can be better written to represent each concept separately.
\n    
\n    /* no no no */\n    .ui.button-active-red {\n      background-color: #FF0000;\n      font-weight: bold;\n      color: #FFFFFF;\n    }\n\n    /* better */\n    .red.ui.button {\n      background-color: #FF0000;\n      color: #FFFFFF;\n    }\n    .active.ui.button {\n      font-weight: bold;\n    }\n    
\n\n    
CSS Legibility
\n    
Adding extra formatting can help increase clarity in your code. We suggest separating css selectors on separate lines, adding a space after css properties with commas (like box-shadow) and placing a zero before any decimal value.
\n\n    
\n    /* not so easy to read */\n    .ui.widgets .widget, ui.widget, .ui.widget.type, ui.widgets .widget.type {\n      color: #FFFFFF;\n    }\n    /* this should have spaces after commas and a zero before any decimal value */\n    .ui.widget {\n      color:rgba(0,0,0,.3);\n    }\n\n    /* easier to read */\n    .ui.widgets .widget,\n    .ui.widget,\n    .ui.widgets .widget.type,\n    .ui.widget.type {\n      color: #FFFFFF;\n    }\n    /* properly formatted */\n    .ui.widget {\n      color: rgba(0, 0, 0, 0.3);\n    }\n    
\n\n\n    
Keep Things Ordered
\n    
Although css rule order may be considered a chore, grouping related rules together can help keep css code organized.
\n    
An easy way to do this is to consider ordering rules from the outside in. First describing positioning rules, then border rules, margin, sizing, padding, font-size, line height and ending with vendor prefixed attributes.
\n\n    
\n    /* not so easy to read */\n    .ui.widgets .widget, ui.widget, .ui.widget.type, ui.widgets .widget.type {\n      color: #FFFFFF;\n    }\n    /* more legible */\n    .ui.widgets .widget,\n    .ui.widget,\n    .ui.widgets .widget.type,\n    .ui.widget.type {\n      color: #FFFFFF;\n    }\n\n    /* i have some extra time so lets group these rules */\n    .ui.widget {\n      position: relative;\n      top: 0em;\n      left: 0em;\n\n      margin: 1em;\n      border: 1px solid rgba(0, 0, 0, 0.1);\n      width: 100px;\n      height: 100px;\n      padding: 1em;\n\n      font-size: 1.2em;\n      color: rgba(0, 0, 0, 0.8);\n      line-height: 1.2em;\n\n      -webkit-border-radius: 0.3em;\n      -moz-border-radius: 0.3em;\n      border-radius: 0.3em;\n    }\n    
\n\n  
Avoid non-semantic tags, make wrappers groups
\n  
UI elements should be designed to include the minimum footprint of an element. If extra styling is needed, consider using pseudo selectors :after and :before. This allows for the creation of two extra divs inside each div context which can almost always be enough to accommodate extra styling.
\n  
If there is no other option than wrapping content in a containing HTML element, consider using a singular/plural relationship by having the wrapper describe its contents instead of an arbitrary class name like wrapper
\n    
\n    /* not tops */\n    .ui.message .wrapper .title,\n    .ui.message .wrapper .description {\n\n    }\n    /* better */\n    .ui.message .content .title,\n    .ui.message .content .description {\n\n    }\n    
\n\n    
Margins
\n    
Adding default margins to your content allow for it to have vertical rhythm in a page, but be careful about forcing margin in all circumstances. Here's a useful way to make sure content inside container elements doesn't receieve unnecessary padding.
\n    
\n    .ui.thingy {\n      margin: 1em 0em;\n    }\n    .ui.thingy:first-child {\n      margin-top: 0em;\n    }\n    .ui.thingy:last-child {\n      margin-bottom: 0em;\n    }\n    
\n\n\n    
Grammatical order
\n    
Consider using similar class syntax as if you were actually describing the element in English. Although this is by no means required it may help provide clarity in some circumstances.
\n    
\n    /* confusing word order */\n    .ui.red.button.pointing {\n\n    }\n    /* much more semantic */\n    .red.pointing.ui.button {\n\n    }\n    
\n\n    
Use Border Box
\n    
Border box fixes the box model, and allows padding to be included as part of width and height definitions. Using it opens up another world of possibilities for sizing content to fit fluidly
\n    
\n    .two.ui.thingies .ui.thingy {\n      width: 50%;\n      padding: 1em;\n      -webkit-box-sizing: border-box;\n      -moz-box-sizing: border-box;\n      -ms-box-sizing: border-box;\n      box-sizing: border-box;\n    }\n    
\n\n  
Units and Measurements
\n\n    
Unit Consistency
\n    
CSS provides a broad selection of measurements for values. It is helpful to keep unit definitions consistent across a single property definition. Including consistent units for 0 values also allows for quicker tweaking and shows greater precision in a property definition.
\n\n    
\n    /* not tops */\n    .ui.widget {\n      padding:  0 16px .6em;\n    }\n    /* hex are uppercase */\n    .ui.widget {\n      color: #09ffda;\n    }\n    /* good */\n    .ui.widget {\n      padding: 0em 0em 0em 0.2em;\n      color: #009FDA;\n    }\n    
\n\n    
Inheritance is Magical
\n    
Many CSS properties can use the value 'inherit' to specify, quite unintuitively, to take on the value of parent element for values that do not normally inherit. For example, an element can use inherit to double whatever its parents padding size is, or to receive the same type of border as a parent without knowing what it is beforehand.
\n    
\n    /* inheriting borders */\n    .ui.widget {\n      border: 2px solid rgba(0, 0, 0, 0.1);\n    }\n    /* will receive same border treatment as parent */\n    .ui.widget .foo {\n      border: inherit;\n    }\n    /* inheriting positioning */\n    .ui.widget {\n      padding: 0.5em 1em;\n    }\n    /* will use the same padding as parent */\n    .ui.widget .foo {\n      padding: inherit;\n    }\n    
\n\n    
Relatively Relative
\n    
EMs are defined so that 1em is equal to the current font size inside of an element. Using EMs can allow you to size content inside an element in proportion to the overall size of the element. Be careful though because this will stack with nested elements.
\n    
\n    .ui.thingy {\n      font-size: 14px;\n    }\n    /* this is 28 pixels */\n    .ui.thingy .thing {\n      font-size: 2em;\n    }\n    /* woah this is now 48 pixels */\n    .ui.thingy .thing .thing {\n      font-size: 2em;\n    }\n\n    /* .ui.thingy .thingy should grow as well */\n    .ui.large.thingy {\n      font-size: 16px;\n    }\n    
\n\n    
Recursively Relative
\n    
Using EMs multiplicative nature can be used to your advantage. Instead of defining multiple tiers of a menu system, consider using ems to reduce each tier's sizing. As you continue to nest menu elements each nested menu will computer its values with smaller proportions.
\n    
\n    .ui.menu {\n      font-size: 1rem;\n    }\n    .ui.menu .menu {\n      margin-left: 0.5em;\n      font-size: 0.9em;\n    }\n    
\n\n    
Absolutely Relative
\n    
Relative EMs (rems) are calculated relative to the font size of the entire page. This is needed to explain how content should be sized related to the overall size of elements on the page, and will not increase geometrically when nested like EMs.
\n    
\n    /* i am a weird page with very tiny fonts */\n    html {\n      font-size: 10px;\n    }\n    /* thats ok i am sizing everything relative to your tiny fonts */\n    .ui.menu {\n      font-size: 1rem;\n    }\n    /* i am sizing relative to the menu element */\n    .ui.menu .menu {\n      font-size: 0.8em;\n    }\n    /* i am the same size as the rule above */\n    .ui.menu .menu .menu {\n      font-size: 0.8em;\n    }\n    
\n
",
      "renderSingleExtensions": false,
      "layout": "default",
      "css": "guide",
      "description": "Suggestions for CSS development practices",
      "type": "UI Guide",
      "layoutRelativePath": "default.html.eco",
      "meta": {
        "layout": "default",
        "css": "guide",
        "title": "CSS",
        "description": "Suggestions for CSS development practices",
        "type": "UI Guide"
      }
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/documents/guide/javascriptguide.html.eco",
      "relativePath": "guide/javascriptguide.html.eco",
      "basename": "javascriptguide",
      "outBasename": "javascriptguide",
      "extension": "eco",
      "outExtension": "html",
      "extensions": [
        "html",
        "eco"
      ],
      "filename": "javascriptguide.html.eco",
      "fullDirPath": "/home/jack/projects/semantic/server/documents/guide",
      "outPath": "/home/jack/projects/semantic/docs/guide/javascriptguide.html",
      "outDirPath": "/home/jack/projects/semantic/docs/guide",
      "outFilename": "javascriptguide.html",
      "relativeOutPath": "guide/javascriptguide.html",
      "relativeDirPath": "guide",
      "relativeOutDirPath": "guide",
      "relativeBase": "guide/javascriptguide",
      "relativeOutBase": "guide/javascriptguide",
      "contentType": "application/octet-stream",
      "outContentType": "text/html",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": "2013-12-04T09:15:25.732Z",
      "wtime": "2013-12-04T09:15:28.666Z",
      "exists": true,
      "encoding": "utf8",
      "source": "  ---\nlayout      : 'default'\ncss         : 'javascript'\n\ntitle       : 'Javascript'\ndescription : 'Suggestions for Javascript development practices'\ntype        : 'UI Guide'\n---\n\n<%- @partial('header') %>\n
\n\n  
\n    
\n      General\n      Optional\n    
\n  
\n\n  
General
\n\n  
Airbnb has compiled a wonderful list for a mostly reasonable approach to javascript. This is an excellent starting point for community consensus on javascript standards.
\n\n  
https://github.com/airbnb/javascript
\n\n  
Optional Considerations
\n\n  
Variable Alignment
\n  
Matching equal signs increases code legibility but may take more time. There is a great plugin for Sublime Text called Alignment which can automatically manage this for you.
\n  
\n    var\n      dog      = 'Poodle',\n      cat      = 'Cat',\n      elephant = 'A long name'\n    ;\n  
\n\n  
Chaining
\n  
Indent chained code to show changes in the original selector. Use the ending semicolon as you would a closing bracket to show the original indentation level of the rule
\n  
\n    $element\n      .find('.one')\n        .doSomething()\n        .end()\n      .find('.two')\n        .doSomethingElse()\n    ;\n  
\n\n  
Verbs
\n  
When creating javascript modules consider using verbs to show behavior. This may be more intuitive than allowing a user to directly set properties or manage your internal namespace.
\n  
\n\n    // this might require some more times with docs\n    $element\n      .widget('states.select.set')\n    ;\n\n    // reduce complexity to api\n    $(element)\n      .widget('activate', true)\n    ;\n  
\n\n  
Default Values
\n  
Using an OR value allows you to set defaults for any falsey value
\n  
\n    (function(someBoolean, name) {\n      var\n        // this will have issues (false will evaluate same as undefined)\n        someBoolean = someBoolean || true,\n        // default name will be sally\n        name        = name        || 'Sally'\n      ;\n      if(someBoolean) {\n        alert(name);\n      }\n    }());\n  
\n\n  
Grouping Variables
\n  
\n    // ok\n    var\n      offsetX = 2,\n      offsetY = 5\n    ;\n    // nice\n    var\n      offset = {\n        x: 2,\n        y: 5\n      }\n    ;\n  
\n\n
",
      "content": "<%- @partial('header') %>\n
\n\n  
\n    
\n      General\n      Optional\n    
\n  
\n\n  
General
\n\n  
Airbnb has compiled a wonderful list for a mostly reasonable approach to javascript. This is an excellent starting point for community consensus on javascript standards.
\n\n  
https://github.com/airbnb/javascript
\n\n  
Optional Considerations
\n\n  
Variable Alignment
\n  
Matching equal signs increases code legibility but may take more time. There is a great plugin for Sublime Text called Alignment which can automatically manage this for you.
\n  
\n    var\n      dog      = 'Poodle',\n      cat      = 'Cat',\n      elephant = 'A long name'\n    ;\n  
\n\n  
Chaining
\n  
Indent chained code to show changes in the original selector. Use the ending semicolon as you would a closing bracket to show the original indentation level of the rule
\n  
\n    $element\n      .find('.one')\n        .doSomething()\n        .end()\n      .find('.two')\n        .doSomethingElse()\n    ;\n  
\n\n  
Verbs
\n  
When creating javascript modules consider using verbs to show behavior. This may be more intuitive than allowing a user to directly set properties or manage your internal namespace.
\n  
\n\n    // this might require some more times with docs\n    $element\n      .widget('states.select.set')\n    ;\n\n    // reduce complexity to api\n    $(element)\n      .widget('activate', true)\n    ;\n  
\n\n  
Default Values
\n  
Using an OR value allows you to set defaults for any falsey value
\n  
\n    (function(someBoolean, name) {\n      var\n        // this will have issues (false will evaluate same as undefined)\n        someBoolean = someBoolean || true,\n        // default name will be sally\n        name        = name        || 'Sally'\n      ;\n      if(someBoolean) {\n        alert(name);\n      }\n    }());\n  
\n\n  
Grouping Variables
\n  
\n    // ok\n    var\n      offsetX = 2,\n      offsetY = 5\n    ;\n    // nice\n    var\n      offset = {\n        x: 2,\n        y: 5\n      }\n    ;\n  
\n\n
",
      "tags": null,
      "render": true,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": "Javascript",
      "name": "javascriptguide.html",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "guide-javascriptguide",
      "url": "/guide/javascriptguide.html",
      "urls": [
        "/guide/javascriptguide.html"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": true,
      "header": "layout      : 'default'\ncss         : 'javascript'\n\ntitle       : 'Javascript'\ndescription : 'Suggestions for Javascript development practices'\ntype        : 'UI Guide'",
      "parser": "yaml",
      "body": "<%- @partial('header') %>\n
\n\n  
\n    
\n      General\n      Optional\n    
\n  
\n\n  
General
\n\n  
Airbnb has compiled a wonderful list for a mostly reasonable approach to javascript. This is an excellent starting point for community consensus on javascript standards.
\n\n  
https://github.com/airbnb/javascript
\n\n  
Optional Considerations
\n\n  
Variable Alignment
\n  
Matching equal signs increases code legibility but may take more time. There is a great plugin for Sublime Text called Alignment which can automatically manage this for you.
\n  
\n    var\n      dog      = 'Poodle',\n      cat      = 'Cat',\n      elephant = 'A long name'\n    ;\n  
\n\n  
Chaining
\n  
Indent chained code to show changes in the original selector. Use the ending semicolon as you would a closing bracket to show the original indentation level of the rule
\n  
\n    $element\n      .find('.one')\n        .doSomething()\n        .end()\n      .find('.two')\n        .doSomethingElse()\n    ;\n  
\n\n  
Verbs
\n  
When creating javascript modules consider using verbs to show behavior. This may be more intuitive than allowing a user to directly set properties or manage your internal namespace.
\n  
\n\n    // this might require some more times with docs\n    $element\n      .widget('states.select.set')\n    ;\n\n    // reduce complexity to api\n    $(element)\n      .widget('activate', true)\n    ;\n  
\n\n  
Default Values
\n  
Using an OR value allows you to set defaults for any falsey value
\n  
\n    (function(someBoolean, name) {\n      var\n        // this will have issues (false will evaluate same as undefined)\n        someBoolean = someBoolean || true,\n        // default name will be sally\n        name        = name        || 'Sally'\n      ;\n      if(someBoolean) {\n        alert(name);\n      }\n    }());\n  
\n\n  
Grouping Variables
\n  
\n    // ok\n    var\n      offsetX = 2,\n      offsetY = 5\n    ;\n    // nice\n    var\n      offset = {\n        x: 2,\n        y: 5\n      }\n    ;\n  
\n\n
",
      "rendered": true,
      "contentRendered": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  \n  \n  \n  \n\n  \n\n  \n  \n  Javascript | Semantic UI\n\n  \n  \n\n  \n\n  \n  \n  \n\n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n\n  \n  \n\n\n  
\n    \n       Close Menu\n    \n    \n       Download\n    \n    
\n      \n        Introduction\n      \n      
\n        \n          Definitions\n        \n          Overview\n        \n          Types\n        \n          Variations\n        \n          What's Different\n        \n      
\n    
\n    
\n      Project\n      
\n        \n          Contributing\n        \n          Set-up\n        \n      
\n    
\n    
\n      Elements\n      
\n        \n          Button\n        \n          Divider\n        \n          Header\n        \n          Icon\n        \n          Image\n        \n          Input\n        \n          Label\n        \n          Loader\n        \n          Progress\n        \n          Reveal\n        \n          Segment\n        \n          Step\n        \n      
\n    
\n    
\n      Collections\n      
\n        \n          Breadcrumb\n        \n          Form\n        \n          Grid\n        \n          Menu\n        \n          Message\n        \n          Table\n        \n      
\n    
\n    
\n      Views\n      
\n        \n          Comment\n        \n          Feed\n        \n          Item\n        \n          List\n        \n      
\n    
\n    
\n      Modules\n      
\n        \n          Accordion\n        \n          Checkbox\n        \n          Dimmer\n        \n          Dropdown\n        \n          Modal\n        \n          Popup\n        \n          Rating\n        \n          Shape\n        \n          Sidebar\n        \n          Transition\n        \n      
\n    
\n    
\n      Behavior\n      
\n        \n          Form Validation\n        \n      
\n    
\n    
\n      Style Guide\n      
\n        \n          CSS\n        \n          Javascript\n        \n          Language\n        \n      
\n    
\n\n  
\n\n  
\n    
\n       Content\n      
\n        UI Guide: Javascript\n      
\n      \n      \n      \n      
\n        2 of 3\n        
\n          \n            
\n              1. CSS\n            
\n          \n            
\n              2. Javascript\n            
\n          \n            
\n              3. Language\n            
\n          \n        
\n      
\n      \n      \n      \n      
\n        \n        
\n          \n        
\n        \n        \n        \n          \n        \n        \n      
\n    
\n  
\n    
\n      \n      Menu\n    
\n  \n\n
\n  
\n    
\n\n      
\n        Javascript\n        \n      
\n\n      
Suggestions for Javascript development practices
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n
\n\n  
\n    
\n      General\n      Optional\n    
\n  
\n\n  
General
\n\n  
Airbnb has compiled a wonderful list for a mostly reasonable approach to javascript. This is an excellent starting point for community consensus on javascript standards.
\n\n  
https://github.com/airbnb/javascript
\n\n  
Optional Considerations
\n\n  
Variable Alignment
\n  
Matching equal signs increases code legibility but may take more time. There is a great plugin for Sublime Text called Alignment which can automatically manage this for you.
\n  
\n    var\n      dog      = 'Poodle',\n      cat      = 'Cat',\n      elephant = 'A long name'\n    ;\n  
\n\n  
Chaining
\n  
Indent chained code to show changes in the original selector. Use the ending semicolon as you would a closing bracket to show the original indentation level of the rule
\n  
\n    $element\n      .find('.one')\n        .doSomething()\n        .end()\n      .find('.two')\n        .doSomethingElse()\n    ;\n  
\n\n  
Verbs
\n  
When creating javascript modules consider using verbs to show behavior. This may be more intuitive than allowing a user to directly set properties or manage your internal namespace.
\n  
\n\n    // this might require some more times with docs\n    $element\n      .widget('states.select.set')\n    ;\n\n    // reduce complexity to api\n    $(element)\n      .widget('activate', true)\n    ;\n  
\n\n  
Default Values
\n  
Using an OR value allows you to set defaults for any falsey value
\n  
\n    (function(someBoolean, name) {\n      var\n        // this will have issues (false will evaluate same as undefined)\n        someBoolean = someBoolean || true,\n        // default name will be sally\n        name        = name        || 'Sally'\n      ;\n      if(someBoolean) {\n        alert(name);\n      }\n    }());\n  
\n\n  
Grouping Variables
\n  
\n    // ok\n    var\n      offsetX = 2,\n      offsetY = 5\n    ;\n    // nice\n    var\n      offset = {\n        x: 2,\n        y: 5\n      }\n    ;\n  
\n\n
\n\n\n",
      "contentRenderedWithoutLayouts": "\n\n
\n  
\n    
\n\n      
\n        Javascript\n        \n      
\n\n      
Suggestions for Javascript development practices
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n
\n\n  
\n    
\n      General\n      Optional\n    
\n  
\n\n  
General
\n\n  
Airbnb has compiled a wonderful list for a mostly reasonable approach to javascript. This is an excellent starting point for community consensus on javascript standards.
\n\n  
https://github.com/airbnb/javascript
\n\n  
Optional Considerations
\n\n  
Variable Alignment
\n  
Matching equal signs increases code legibility but may take more time. There is a great plugin for Sublime Text called Alignment which can automatically manage this for you.
\n  
\n    var\n      dog      = 'Poodle',\n      cat      = 'Cat',\n      elephant = 'A long name'\n    ;\n  
\n\n  
Chaining
\n  
Indent chained code to show changes in the original selector. Use the ending semicolon as you would a closing bracket to show the original indentation level of the rule
\n  
\n    $element\n      .find('.one')\n        .doSomething()\n        .end()\n      .find('.two')\n        .doSomethingElse()\n    ;\n  
\n\n  
Verbs
\n  
When creating javascript modules consider using verbs to show behavior. This may be more intuitive than allowing a user to directly set properties or manage your internal namespace.
\n  
\n\n    // this might require some more times with docs\n    $element\n      .widget('states.select.set')\n    ;\n\n    // reduce complexity to api\n    $(element)\n      .widget('activate', true)\n    ;\n  
\n\n  
Default Values
\n  
Using an OR value allows you to set defaults for any falsey value
\n  
\n    (function(someBoolean, name) {\n      var\n        // this will have issues (false will evaluate same as undefined)\n        someBoolean = someBoolean || true,\n        // default name will be sally\n        name        = name        || 'Sally'\n      ;\n      if(someBoolean) {\n        alert(name);\n      }\n    }());\n  
\n\n  
Grouping Variables
\n  
\n    // ok\n    var\n      offsetX = 2,\n      offsetY = 5\n    ;\n    // nice\n    var\n      offset = {\n        x: 2,\n        y: 5\n      }\n    ;\n  
\n\n
",
      "renderSingleExtensions": false,
      "layout": "default",
      "css": "javascript",
      "description": "Suggestions for Javascript development practices",
      "type": "UI Guide",
      "layoutRelativePath": "default.html.eco",
      "meta": {
        "layout": "default",
        "css": "javascript",
        "title": "Javascript",
        "description": "Suggestions for Javascript development practices",
        "type": "UI Guide"
      }
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/documents/guide/styleguide.html.eco",
      "relativePath": "guide/styleguide.html.eco",
      "basename": "styleguide",
      "outBasename": "styleguide",
      "extension": "eco",
      "outExtension": "html",
      "extensions": [
        "html",
        "eco"
      ],
      "filename": "styleguide.html.eco",
      "fullDirPath": "/home/jack/projects/semantic/server/documents/guide",
      "outPath": "/home/jack/projects/semantic/docs/guide/styleguide.html",
      "outDirPath": "/home/jack/projects/semantic/docs/guide",
      "outFilename": "styleguide.html",
      "relativeOutPath": "guide/styleguide.html",
      "relativeDirPath": "guide",
      "relativeOutDirPath": "guide",
      "relativeBase": "guide/styleguide",
      "relativeOutBase": "guide/styleguide",
      "contentType": "application/octet-stream",
      "outContentType": "text/html",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": "2013-12-04T09:15:25.802Z",
      "wtime": "2013-12-04T09:15:28.671Z",
      "exists": true,
      "encoding": "utf8",
      "source": "  ---\nlayout      : 'default'\ncss         : 'guide'\n\ntitle       : 'Language'\ndescription : 'Suggestions for language usage when developing user interfaces'\ntype        : 'UI Guide'\n---\n<%- @partial('header') %>\n
\n\n  
\n  
\n    Language\n    Variations\n  
\n  
\n\n  
Language
\n\n  
Defining anything will involve some subjectivity. The goal of semantic is not to create code that is free from prescription, but to create code that tends to avoid arbitrary decisions if a conventional choice presents itself.
\n  
The following are some guidelines which help avoid some common pitfalls in writing UI element definitions.
\n\n  
\n\n  
Neutral Base Form
\n  
In order to make UI components be able to exist in most websites, the prototype version of an element should be neutrally styled using greytones and neutral colors. This will allow other elements to be more robust giving other developers freedom to make decisions about color and style when adapting your element for their website.
\n\n  
Namespacing
\n  
All css code must live inside a namespace. By default all ui elements use the class \"ui\". This prevents rules from altering styles of other content in the page. This also helps differentiate between UI elements and parts of an element
\n  
Tags inside of a ui element do not need to be prefixed with ui. They can simple descend from the element.
\n    
\n    /* incorrect */\n    .menu {\n\n    }\n\n    /* incorrect */\n    .ui.menu .ui.item {\n\n    }\n\n    /* correct */\n    .ui.menu {\n\n    }\n    .ui.menu .item {\n\n    }\n    
\n  
Commonality
\n  
Try to use the most obvious names for classes. If you're not sure, prototype the element, then ask a friend or two what they would call it.
\n    
\n    /* hmm */\n    .ginormous.ui.thingy {\n      font-size: 1.5em;\n    }\n    /* better */\n    .large.ui.thingy {\n      font-size: 1.5em;\n    }\n    
\n\n  
Precision
\n  
Classes should be defined in one word, if the concept cannot be reduced to a single word then consider factoring it into multiple sub classes
\n    
\n    .attached.ui.thingy {\n      position: relative;\n    }\n    .left.attached.ui.thingy {\n      left: 0px;\n      top: 50%;\n      margin-top: -0.5em;\n    }\n    .right.attached.ui.thingy {\n      right: 0px;\n      top: 50%;\n      margin-top: -0.5em\n    }\n    
\n\n  
Use real words
\n  
Abbreviations are useful for taking notes, but css definitions should attempt to use consistent, common language.
\n    
\n    /* nope */\n    .ui.btn {\n\n    }\n    .ui.widget .cpttext {\n\n    }\n    /* good */\n    .ui.button {\n\n    }\n    .ui.widget .caption {\n\n    }\n    
\n\n  
Non prescriptive
\n  
Avoid requiring any specific tags in your definitions. This will allow developers to choose which tags they would like to use with an element.
\n  
Sometimes however it makes sense to allow for common tags to be used in place of classnames for brevity. Paragraph tags, links, labels, and tables may be useful to use in a UI element definition without classnames.
\n  
Be cautious though, for example, requiring a form definition to use a form tag limits a developers ability to nest form elements inside other forms. The same is true for anchor tags
\n    
\n\n    /* hey how do you know this is the third heading? */\n    /* and what about all the other possible sizes?   */\n    .ui.thingy h3 {\n\n    }\n\n    /* yay the developer can choose what type of heading tag to use */\n    .ui.thingy .header {\n\n    }\n    
\n\n    
\n\n    /* wow this guy is going to have to do a lot of typing... */\n    .ui.table .cell {\n\n    }\n    /* this seems like a reasonable assumption, html is a bit strict about these things */\n    .ui.table td {\n\n    }\n    
\n\n\n  
Writing Variations
\n\n  
Same but not the same
\n  
Multiple elements may contain similar variations that function slightly different.
\n  
For example it may be useful for various elements to float left or right. At first it may seem most useful to write a helper class that floats all UI element types when given a certain class name, but the way which an element may be floated might vary depending on the type of element.
\n    
\n    /*\n    this element will default to floating left if any float is specified\n    it will receive margins on its float relative to its size\n    */\n    .ui.floated.widget,\n    .ui.left.floated.widget {\n      float: left;\n      margin-right: 1em;\n    }\n    .ui.right.floated.widget {\n      float: right;\n      margin-left: 1em;\n    }\n    /* this will not receive margins when floated and will default to floating right */\n    .ui.floated.thingy,\n    .ui.right.floated.thingy {\n      float: right;\n    }\n    .ui.right.floated.thingy {\n      float: left;\n    }\n    
\n\n  
Inversion
\n  
Elements are often inverted to stand out on dark backgrounds. Consider creating a variation of your element defines how the element can invert its colors.
\n  
Keep in mind you might have to increase the contrast between shades of your element when inverting colors, its much easier to detect in a design between multiple shades of a light color than a dark one.
\n    
\n    .ui.thingy {\n      background-color: #FFFFFF;\n      color: rgba(0, 0, 0, 0.7);\n    }\n    .ui.inverted.thingy {\n      background-color: #222222;\n      color: rgba(255, 255, 255, 0.7);\n    }\n    
\n\n\n
",
      "content": "<%- @partial('header') %>\n
\n\n  
\n  
\n    Language\n    Variations\n  
\n  
\n\n  
Language
\n\n  
Defining anything will involve some subjectivity. The goal of semantic is not to create code that is free from prescription, but to create code that tends to avoid arbitrary decisions if a conventional choice presents itself.
\n  
The following are some guidelines which help avoid some common pitfalls in writing UI element definitions.
\n\n  
\n\n  
Neutral Base Form
\n  
In order to make UI components be able to exist in most websites, the prototype version of an element should be neutrally styled using greytones and neutral colors. This will allow other elements to be more robust giving other developers freedom to make decisions about color and style when adapting your element for their website.
\n\n  
Namespacing
\n  
All css code must live inside a namespace. By default all ui elements use the class \"ui\". This prevents rules from altering styles of other content in the page. This also helps differentiate between UI elements and parts of an element
\n  
Tags inside of a ui element do not need to be prefixed with ui. They can simple descend from the element.
\n    
\n    /* incorrect */\n    .menu {\n\n    }\n\n    /* incorrect */\n    .ui.menu .ui.item {\n\n    }\n\n    /* correct */\n    .ui.menu {\n\n    }\n    .ui.menu .item {\n\n    }\n    
\n  
Commonality
\n  
Try to use the most obvious names for classes. If you're not sure, prototype the element, then ask a friend or two what they would call it.
\n    
\n    /* hmm */\n    .ginormous.ui.thingy {\n      font-size: 1.5em;\n    }\n    /* better */\n    .large.ui.thingy {\n      font-size: 1.5em;\n    }\n    
\n\n  
Precision
\n  
Classes should be defined in one word, if the concept cannot be reduced to a single word then consider factoring it into multiple sub classes
\n    
\n    .attached.ui.thingy {\n      position: relative;\n    }\n    .left.attached.ui.thingy {\n      left: 0px;\n      top: 50%;\n      margin-top: -0.5em;\n    }\n    .right.attached.ui.thingy {\n      right: 0px;\n      top: 50%;\n      margin-top: -0.5em\n    }\n    
\n\n  
Use real words
\n  
Abbreviations are useful for taking notes, but css definitions should attempt to use consistent, common language.
\n    
\n    /* nope */\n    .ui.btn {\n\n    }\n    .ui.widget .cpttext {\n\n    }\n    /* good */\n    .ui.button {\n\n    }\n    .ui.widget .caption {\n\n    }\n    
\n\n  
Non prescriptive
\n  
Avoid requiring any specific tags in your definitions. This will allow developers to choose which tags they would like to use with an element.
\n  
Sometimes however it makes sense to allow for common tags to be used in place of classnames for brevity. Paragraph tags, links, labels, and tables may be useful to use in a UI element definition without classnames.
\n  
Be cautious though, for example, requiring a form definition to use a form tag limits a developers ability to nest form elements inside other forms. The same is true for anchor tags
\n    
\n\n    /* hey how do you know this is the third heading? */\n    /* and what about all the other possible sizes?   */\n    .ui.thingy h3 {\n\n    }\n\n    /* yay the developer can choose what type of heading tag to use */\n    .ui.thingy .header {\n\n    }\n    
\n\n    
\n\n    /* wow this guy is going to have to do a lot of typing... */\n    .ui.table .cell {\n\n    }\n    /* this seems like a reasonable assumption, html is a bit strict about these things */\n    .ui.table td {\n\n    }\n    
\n\n\n  
Writing Variations
\n\n  
Same but not the same
\n  
Multiple elements may contain similar variations that function slightly different.
\n  
For example it may be useful for various elements to float left or right. At first it may seem most useful to write a helper class that floats all UI element types when given a certain class name, but the way which an element may be floated might vary depending on the type of element.
\n    
\n    /*\n    this element will default to floating left if any float is specified\n    it will receive margins on its float relative to its size\n    */\n    .ui.floated.widget,\n    .ui.left.floated.widget {\n      float: left;\n      margin-right: 1em;\n    }\n    .ui.right.floated.widget {\n      float: right;\n      margin-left: 1em;\n    }\n    /* this will not receive margins when floated and will default to floating right */\n    .ui.floated.thingy,\n    .ui.right.floated.thingy {\n      float: right;\n    }\n    .ui.right.floated.thingy {\n      float: left;\n    }\n    
\n\n  
Inversion
\n  
Elements are often inverted to stand out on dark backgrounds. Consider creating a variation of your element defines how the element can invert its colors.
\n  
Keep in mind you might have to increase the contrast between shades of your element when inverting colors, its much easier to detect in a design between multiple shades of a light color than a dark one.
\n    
\n    .ui.thingy {\n      background-color: #FFFFFF;\n      color: rgba(0, 0, 0, 0.7);\n    }\n    .ui.inverted.thingy {\n      background-color: #222222;\n      color: rgba(255, 255, 255, 0.7);\n    }\n    
\n\n\n
",
      "tags": null,
      "render": true,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": "Language",
      "name": "styleguide.html",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "guide-styleguide",
      "url": "/guide/styleguide.html",
      "urls": [
        "/guide/styleguide.html"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": true,
      "header": "layout      : 'default'\ncss         : 'guide'\n\ntitle       : 'Language'\ndescription : 'Suggestions for language usage when developing user interfaces'\ntype        : 'UI Guide'",
      "parser": "yaml",
      "body": "<%- @partial('header') %>\n
\n\n  
\n  
\n    Language\n    Variations\n  
\n  
\n\n  
Language
\n\n  
Defining anything will involve some subjectivity. The goal of semantic is not to create code that is free from prescription, but to create code that tends to avoid arbitrary decisions if a conventional choice presents itself.
\n  
The following are some guidelines which help avoid some common pitfalls in writing UI element definitions.
\n\n  
\n\n  
Neutral Base Form
\n  
In order to make UI components be able to exist in most websites, the prototype version of an element should be neutrally styled using greytones and neutral colors. This will allow other elements to be more robust giving other developers freedom to make decisions about color and style when adapting your element for their website.
\n\n  
Namespacing
\n  
All css code must live inside a namespace. By default all ui elements use the class \"ui\". This prevents rules from altering styles of other content in the page. This also helps differentiate between UI elements and parts of an element
\n  
Tags inside of a ui element do not need to be prefixed with ui. They can simple descend from the element.
\n    
\n    /* incorrect */\n    .menu {\n\n    }\n\n    /* incorrect */\n    .ui.menu .ui.item {\n\n    }\n\n    /* correct */\n    .ui.menu {\n\n    }\n    .ui.menu .item {\n\n    }\n    
\n  
Commonality
\n  
Try to use the most obvious names for classes. If you're not sure, prototype the element, then ask a friend or two what they would call it.
\n    
\n    /* hmm */\n    .ginormous.ui.thingy {\n      font-size: 1.5em;\n    }\n    /* better */\n    .large.ui.thingy {\n      font-size: 1.5em;\n    }\n    
\n\n  
Precision
\n  
Classes should be defined in one word, if the concept cannot be reduced to a single word then consider factoring it into multiple sub classes
\n    
\n    .attached.ui.thingy {\n      position: relative;\n    }\n    .left.attached.ui.thingy {\n      left: 0px;\n      top: 50%;\n      margin-top: -0.5em;\n    }\n    .right.attached.ui.thingy {\n      right: 0px;\n      top: 50%;\n      margin-top: -0.5em\n    }\n    
\n\n  
Use real words
\n  
Abbreviations are useful for taking notes, but css definitions should attempt to use consistent, common language.
\n    
\n    /* nope */\n    .ui.btn {\n\n    }\n    .ui.widget .cpttext {\n\n    }\n    /* good */\n    .ui.button {\n\n    }\n    .ui.widget .caption {\n\n    }\n    
\n\n  
Non prescriptive
\n  
Avoid requiring any specific tags in your definitions. This will allow developers to choose which tags they would like to use with an element.
\n  
Sometimes however it makes sense to allow for common tags to be used in place of classnames for brevity. Paragraph tags, links, labels, and tables may be useful to use in a UI element definition without classnames.
\n  
Be cautious though, for example, requiring a form definition to use a form tag limits a developers ability to nest form elements inside other forms. The same is true for anchor tags
\n    
\n\n    /* hey how do you know this is the third heading? */\n    /* and what about all the other possible sizes?   */\n    .ui.thingy h3 {\n\n    }\n\n    /* yay the developer can choose what type of heading tag to use */\n    .ui.thingy .header {\n\n    }\n    
\n\n    
\n\n    /* wow this guy is going to have to do a lot of typing... */\n    .ui.table .cell {\n\n    }\n    /* this seems like a reasonable assumption, html is a bit strict about these things */\n    .ui.table td {\n\n    }\n    
\n\n\n  
Writing Variations
\n\n  
Same but not the same
\n  
Multiple elements may contain similar variations that function slightly different.
\n  
For example it may be useful for various elements to float left or right. At first it may seem most useful to write a helper class that floats all UI element types when given a certain class name, but the way which an element may be floated might vary depending on the type of element.
\n    
\n    /*\n    this element will default to floating left if any float is specified\n    it will receive margins on its float relative to its size\n    */\n    .ui.floated.widget,\n    .ui.left.floated.widget {\n      float: left;\n      margin-right: 1em;\n    }\n    .ui.right.floated.widget {\n      float: right;\n      margin-left: 1em;\n    }\n    /* this will not receive margins when floated and will default to floating right */\n    .ui.floated.thingy,\n    .ui.right.floated.thingy {\n      float: right;\n    }\n    .ui.right.floated.thingy {\n      float: left;\n    }\n    
\n\n  
Inversion
\n  
Elements are often inverted to stand out on dark backgrounds. Consider creating a variation of your element defines how the element can invert its colors.
\n  
Keep in mind you might have to increase the contrast between shades of your element when inverting colors, its much easier to detect in a design between multiple shades of a light color than a dark one.
\n    
\n    .ui.thingy {\n      background-color: #FFFFFF;\n      color: rgba(0, 0, 0, 0.7);\n    }\n    .ui.inverted.thingy {\n      background-color: #222222;\n      color: rgba(255, 255, 255, 0.7);\n    }\n    
\n\n\n
",
      "rendered": true,
      "contentRendered": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  \n  \n  \n  \n\n  \n\n  \n  \n  Language | Semantic UI\n\n  \n  \n\n  \n\n  \n  \n  \n\n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n\n  \n  \n\n\n  
\n    \n       Close Menu\n    \n    \n       Download\n    \n    
\n      \n        Introduction\n      \n      
\n        \n          Definitions\n        \n          Overview\n        \n          Types\n        \n          Variations\n        \n          What's Different\n        \n      
\n    
\n    
\n      Project\n      
\n        \n          Contributing\n        \n          Set-up\n        \n      
\n    
\n    
\n      Elements\n      
\n        \n          Button\n        \n          Divider\n        \n          Header\n        \n          Icon\n        \n          Image\n        \n          Input\n        \n          Label\n        \n          Loader\n        \n          Progress\n        \n          Reveal\n        \n          Segment\n        \n          Step\n        \n      
\n    
\n    
\n      Collections\n      
\n        \n          Breadcrumb\n        \n          Form\n        \n          Grid\n        \n          Menu\n        \n          Message\n        \n          Table\n        \n      
\n    
\n    
\n      Views\n      
\n        \n          Comment\n        \n          Feed\n        \n          Item\n        \n          List\n        \n      
\n    
\n    
\n      Modules\n      
\n        \n          Accordion\n        \n          Checkbox\n        \n          Dimmer\n        \n          Dropdown\n        \n          Modal\n        \n          Popup\n        \n          Rating\n        \n          Shape\n        \n          Sidebar\n        \n          Transition\n        \n      
\n    
\n    
\n      Behavior\n      
\n        \n          Form Validation\n        \n      
\n    
\n    
\n      Style Guide\n      
\n        \n          CSS\n        \n          Javascript\n        \n          Language\n        \n      
\n    
\n\n  
\n\n  
\n    
\n       Content\n      
\n        UI Guide: Language\n      
\n      \n      \n      \n      
\n        3 of 3\n        
\n          \n            
\n              1. CSS\n            
\n          \n            
\n              2. Javascript\n            
\n          \n            
\n              3. Language\n            
\n          \n        
\n      
\n      \n      
\n      \n      
\n        \n        
\n          \n        
\n        \n        \n        \n          \n        \n        \n      
\n    
\n  
\n    
\n      \n      Menu\n    
\n  \n\n
\n  
\n    
\n\n      
\n        Language\n        \n      
\n\n      
Suggestions for language usage when developing user interfaces
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n
\n\n  
\n  
\n    Language\n    Variations\n  
\n  
\n\n  
Language
\n\n  
Defining anything will involve some subjectivity. The goal of semantic is not to create code that is free from prescription, but to create code that tends to avoid arbitrary decisions if a conventional choice presents itself.
\n  
The following are some guidelines which help avoid some common pitfalls in writing UI element definitions.
\n\n  
\n\n  
Neutral Base Form
\n  
In order to make UI components be able to exist in most websites, the prototype version of an element should be neutrally styled using greytones and neutral colors. This will allow other elements to be more robust giving other developers freedom to make decisions about color and style when adapting your element for their website.
\n\n  
Namespacing
\n  
All css code must live inside a namespace. By default all ui elements use the class \"ui\". This prevents rules from altering styles of other content in the page. This also helps differentiate between UI elements and parts of an element
\n  
Tags inside of a ui element do not need to be prefixed with ui. They can simple descend from the element.
\n    
\n    /* incorrect */\n    .menu {\n\n    }\n\n    /* incorrect */\n    .ui.menu .ui.item {\n\n    }\n\n    /* correct */\n    .ui.menu {\n\n    }\n    .ui.menu .item {\n\n    }\n    
\n  
Commonality
\n  
Try to use the most obvious names for classes. If you're not sure, prototype the element, then ask a friend or two what they would call it.
\n    
\n    /* hmm */\n    .ginormous.ui.thingy {\n      font-size: 1.5em;\n    }\n    /* better */\n    .large.ui.thingy {\n      font-size: 1.5em;\n    }\n    
\n\n  
Precision
\n  
Classes should be defined in one word, if the concept cannot be reduced to a single word then consider factoring it into multiple sub classes
\n    
\n    .attached.ui.thingy {\n      position: relative;\n    }\n    .left.attached.ui.thingy {\n      left: 0px;\n      top: 50%;\n      margin-top: -0.5em;\n    }\n    .right.attached.ui.thingy {\n      right: 0px;\n      top: 50%;\n      margin-top: -0.5em\n    }\n    
\n\n  
Use real words
\n  
Abbreviations are useful for taking notes, but css definitions should attempt to use consistent, common language.
\n    
\n    /* nope */\n    .ui.btn {\n\n    }\n    .ui.widget .cpttext {\n\n    }\n    /* good */\n    .ui.button {\n\n    }\n    .ui.widget .caption {\n\n    }\n    
\n\n  
Non prescriptive
\n  
Avoid requiring any specific tags in your definitions. This will allow developers to choose which tags they would like to use with an element.
\n  
Sometimes however it makes sense to allow for common tags to be used in place of classnames for brevity. Paragraph tags, links, labels, and tables may be useful to use in a UI element definition without classnames.
\n  
Be cautious though, for example, requiring a form definition to use a form tag limits a developers ability to nest form elements inside other forms. The same is true for anchor tags
\n    
\n\n    /* hey how do you know this is the third heading? */\n    /* and what about all the other possible sizes?   */\n    .ui.thingy h3 {\n\n    }\n\n    /* yay the developer can choose what type of heading tag to use */\n    .ui.thingy .header {\n\n    }\n    
\n\n    
\n\n    /* wow this guy is going to have to do a lot of typing... */\n    .ui.table .cell {\n\n    }\n    /* this seems like a reasonable assumption, html is a bit strict about these things */\n    .ui.table td {\n\n    }\n    
\n\n\n  
Writing Variations
\n\n  
Same but not the same
\n  
Multiple elements may contain similar variations that function slightly different.
\n  
For example it may be useful for various elements to float left or right. At first it may seem most useful to write a helper class that floats all UI element types when given a certain class name, but the way which an element may be floated might vary depending on the type of element.
\n    
\n    /*\n    this element will default to floating left if any float is specified\n    it will receive margins on its float relative to its size\n    */\n    .ui.floated.widget,\n    .ui.left.floated.widget {\n      float: left;\n      margin-right: 1em;\n    }\n    .ui.right.floated.widget {\n      float: right;\n      margin-left: 1em;\n    }\n    /* this will not receive margins when floated and will default to floating right */\n    .ui.floated.thingy,\n    .ui.right.floated.thingy {\n      float: right;\n    }\n    .ui.right.floated.thingy {\n      float: left;\n    }\n    
\n\n  
Inversion
\n  
Elements are often inverted to stand out on dark backgrounds. Consider creating a variation of your element defines how the element can invert its colors.
\n  
Keep in mind you might have to increase the contrast between shades of your element when inverting colors, its much easier to detect in a design between multiple shades of a light color than a dark one.
\n    
\n    .ui.thingy {\n      background-color: #FFFFFF;\n      color: rgba(0, 0, 0, 0.7);\n    }\n    .ui.inverted.thingy {\n      background-color: #222222;\n      color: rgba(255, 255, 255, 0.7);\n    }\n    
\n\n\n
\n\n\n",
      "contentRenderedWithoutLayouts": "\n\n
\n  
\n    
\n\n      
\n        Language\n        \n      
\n\n      
Suggestions for language usage when developing user interfaces
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n
\n\n  
\n  
\n    Language\n    Variations\n  
\n  
\n\n  
Language
\n\n  
Defining anything will involve some subjectivity. The goal of semantic is not to create code that is free from prescription, but to create code that tends to avoid arbitrary decisions if a conventional choice presents itself.
\n  
The following are some guidelines which help avoid some common pitfalls in writing UI element definitions.
\n\n  
\n\n  
Neutral Base Form
\n  
In order to make UI components be able to exist in most websites, the prototype version of an element should be neutrally styled using greytones and neutral colors. This will allow other elements to be more robust giving other developers freedom to make decisions about color and style when adapting your element for their website.
\n\n  
Namespacing
\n  
All css code must live inside a namespace. By default all ui elements use the class \"ui\". This prevents rules from altering styles of other content in the page. This also helps differentiate between UI elements and parts of an element
\n  
Tags inside of a ui element do not need to be prefixed with ui. They can simple descend from the element.
\n    
\n    /* incorrect */\n    .menu {\n\n    }\n\n    /* incorrect */\n    .ui.menu .ui.item {\n\n    }\n\n    /* correct */\n    .ui.menu {\n\n    }\n    .ui.menu .item {\n\n    }\n    
\n  
Commonality
\n  
Try to use the most obvious names for classes. If you're not sure, prototype the element, then ask a friend or two what they would call it.
\n    
\n    /* hmm */\n    .ginormous.ui.thingy {\n      font-size: 1.5em;\n    }\n    /* better */\n    .large.ui.thingy {\n      font-size: 1.5em;\n    }\n    
\n\n  
Precision
\n  
Classes should be defined in one word, if the concept cannot be reduced to a single word then consider factoring it into multiple sub classes
\n    
\n    .attached.ui.thingy {\n      position: relative;\n    }\n    .left.attached.ui.thingy {\n      left: 0px;\n      top: 50%;\n      margin-top: -0.5em;\n    }\n    .right.attached.ui.thingy {\n      right: 0px;\n      top: 50%;\n      margin-top: -0.5em\n    }\n    
\n\n  
Use real words
\n  
Abbreviations are useful for taking notes, but css definitions should attempt to use consistent, common language.
\n    
\n    /* nope */\n    .ui.btn {\n\n    }\n    .ui.widget .cpttext {\n\n    }\n    /* good */\n    .ui.button {\n\n    }\n    .ui.widget .caption {\n\n    }\n    
\n\n  
Non prescriptive
\n  
Avoid requiring any specific tags in your definitions. This will allow developers to choose which tags they would like to use with an element.
\n  
Sometimes however it makes sense to allow for common tags to be used in place of classnames for brevity. Paragraph tags, links, labels, and tables may be useful to use in a UI element definition without classnames.
\n  
Be cautious though, for example, requiring a form definition to use a form tag limits a developers ability to nest form elements inside other forms. The same is true for anchor tags
\n    
\n\n    /* hey how do you know this is the third heading? */\n    /* and what about all the other possible sizes?   */\n    .ui.thingy h3 {\n\n    }\n\n    /* yay the developer can choose what type of heading tag to use */\n    .ui.thingy .header {\n\n    }\n    
\n\n    
\n\n    /* wow this guy is going to have to do a lot of typing... */\n    .ui.table .cell {\n\n    }\n    /* this seems like a reasonable assumption, html is a bit strict about these things */\n    .ui.table td {\n\n    }\n    
\n\n\n  
Writing Variations
\n\n  
Same but not the same
\n  
Multiple elements may contain similar variations that function slightly different.
\n  
For example it may be useful for various elements to float left or right. At first it may seem most useful to write a helper class that floats all UI element types when given a certain class name, but the way which an element may be floated might vary depending on the type of element.
\n    
\n    /*\n    this element will default to floating left if any float is specified\n    it will receive margins on its float relative to its size\n    */\n    .ui.floated.widget,\n    .ui.left.floated.widget {\n      float: left;\n      margin-right: 1em;\n    }\n    .ui.right.floated.widget {\n      float: right;\n      margin-left: 1em;\n    }\n    /* this will not receive margins when floated and will default to floating right */\n    .ui.floated.thingy,\n    .ui.right.floated.thingy {\n      float: right;\n    }\n    .ui.right.floated.thingy {\n      float: left;\n    }\n    
\n\n  
Inversion
\n  
Elements are often inverted to stand out on dark backgrounds. Consider creating a variation of your element defines how the element can invert its colors.
\n  
Keep in mind you might have to increase the contrast between shades of your element when inverting colors, its much easier to detect in a design between multiple shades of a light color than a dark one.
\n    
\n    .ui.thingy {\n      background-color: #FFFFFF;\n      color: rgba(0, 0, 0, 0.7);\n    }\n    .ui.inverted.thingy {\n      background-color: #222222;\n      color: rgba(255, 255, 255, 0.7);\n    }\n    
\n\n\n
",
      "renderSingleExtensions": false,
      "layout": "default",
      "css": "guide",
      "description": "Suggestions for language usage when developing user interfaces",
      "type": "UI Guide",
      "layoutRelativePath": "default.html.eco",
      "meta": {
        "layout": "default",
        "css": "guide",
        "title": "Language",
        "description": "Suggestions for language usage when developing user interfaces",
        "type": "UI Guide"
      }
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/documents/introduction/definitions.html.eco",
      "relativePath": "introduction/definitions.html.eco",
      "basename": "definitions",
      "outBasename": "definitions",
      "extension": "eco",
      "outExtension": "html",
      "extensions": [
        "html",
        "eco"
      ],
      "filename": "definitions.html.eco",
      "fullDirPath": "/home/jack/projects/semantic/server/documents/introduction",
      "outPath": "/home/jack/projects/semantic/docs/introduction/definitions.html",
      "outDirPath": "/home/jack/projects/semantic/docs/introduction",
      "outFilename": "definitions.html",
      "relativeOutPath": "introduction/definitions.html",
      "relativeDirPath": "introduction",
      "relativeOutDirPath": "introduction",
      "relativeBase": "introduction/definitions",
      "relativeOutBase": "introduction/definitions",
      "contentType": "application/octet-stream",
      "outContentType": "text/html",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": "2013-12-04T09:15:25.883Z",
      "wtime": "2013-12-04T09:15:28.697Z",
      "exists": true,
      "encoding": "utf8",
      "source": "  ---\nlayout      : 'default'\ncss         : 'guide'\n\ntitle       : 'Definitions'\ndescription : 'Definitions provide a re-usable format for sharing an interface design'\ntype        : 'UI Introduction'\n---\n\n\n<%- @partial('header') %>\n
\n  
\n    
\n      Definitions\n      Elements\n      Types\n    
\n  
\n\n  
Defining Definitions
\n\n  
Definitions in semantic are groups of css, fonts, images, and javascript which make up a single element. Unlike other javascript libraries, semantic UI elements are stand-alone and only require their own assets to function correctly.
\n\n  
Definition Types
\n  
Semantic has five different ui definitions. These are useful patterns for describing re-usable parts of a website.
\n  \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n  
UI ElementA basic building block of a website, exists alone or in homogenous groups
UI CollectionA heterogeneous group of several elements which can usually be found together.
UI ViewA way to present common website content like comments, activity feeds
UI ModuleAn element where its behavior is an essential part of its definition
UI BehaviorA set of free-standing actions not specifically tied to an element
\n\n  
Definition Sections
\n  
All UI components of a single type are defined similarly.
\n  \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n  
All UI\n        
\n          
\n            
Types
\n            
Defines mutually exclusive types which each may have their own html
\n          
\n          
\n            
States
\n            
Defines element states like disabled, hovered, pressed down
\n          
\n          
\n            
Variations
\n            
Defines changes to an element which are not mutually exclusive and can be used together
\n          
\n        
\n      
Elements\n        
\n          
\n            
Group
\n            
An element can optionally define how attributes can be shared across a group
\n          
\n          
\n            
\n              UI Button\n            
\n          
\n        
\n      
Collections\n        
\n          
\n            
Content
\n            
A collection can define elements which might be found inside
\n          
\n          
\n            
States
\n            
A collection may define states for content elements or itself
\n          
\n          
\n            
Variations
\n            
A collection may define variations for content elements or itself
\n          
\n          
\n            
\n              UI Form\n            
\n          
\n        
\n      
Views\n        
\n          
\n            
Content
\n            
A view may define elements which can exist inside of the view
\n          
\n          
\n            
States
\n            
A view may define states for content elements or itself
\n          
\n          
\n            
Variations
\n            
A view may define variations for a content elements or itself
\n          
\n          
\n            
\n              UI Item\n            
\n          
\n        
\n      
Modules & Behaviors\n        
\n          
\n            
Behavior
\n            
A module will define a set of behaviors which can be used as an API
\n          
\n          
\n            
Settings
\n            
A settings object which can alter the default behavior when instantiating a module
\n          
\n          
\n            
Examples
\n            
A list of examples to showcase the variations in behavior of a module
\n          
\n          
\n            
\n              UI Dropdown\n            
\n          
\n        
\n      
\n  
Types of Definitions
\n\n  
UI Elements
\n\n  
UI Elements are page elements which are indivisible. This can be thought of as similar in definition as an \"element\" in chemistry.
\n\n  
UI elements can have plural definitions when they are known to exist together in groups. Plural variations allow you to only specify qualities once, allowing them to be inferred across all members of a group.
\n\n  
\n    
\n      
Cancel
\n      
Continue
\n    
\n  
\n\n  
Examples of UI elements:
\n  \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n  
Button\n        
Button
\n      
Label\n        
label
\n      
Input\n        
\n          \n          \n        
\n      
Loader\n        
\n      
Segment\n        
Segment
\n      
\n\n  
UI Collections
\n\n  
UI Collections are groups of heterogeneous page elements which are usually found together. Carrying the chemistry metaphor, these can be thought of as molecules.
\n\n  
UI collections have a definition of elements that exist, or could exist inside of them. They do not usually require all elements to be found, but they describe a list of the \"usual suspects\". Unlike elements definitions, collections are not typically useful to define in plural.
\n\n  
Examples of UI collections:
\n  \n\n  
UI Modules
\n\n  
UI modules are elements whose behavior is a fundamental part of its definition. UI Modules are usually dependent on javascript which carries the implementation of it's behavior, although in some special circumstances the behavior can include css alone.
\n\n  
Examples of UI modules:
\n  \n\n  
UI Views
\n\n  
UI Views are common tropes for presenting specific types of information. Unlike collections which focus specifically on the relation of interface elements, views focus specifically on the relation of site content to other pieces of site content.
\n\n  
Examples of UI views:
\n  \n\n  
\n  \n    Next: Semantic Coding\n    \n  \n\n
",
      "content": "\n\n<%- @partial('header') %>\n
\n  
\n    
\n      Definitions\n      Elements\n      Types\n    
\n  
\n\n  
Defining Definitions
\n\n  
Definitions in semantic are groups of css, fonts, images, and javascript which make up a single element. Unlike other javascript libraries, semantic UI elements are stand-alone and only require their own assets to function correctly.
\n\n  
Definition Types
\n  
Semantic has five different ui definitions. These are useful patterns for describing re-usable parts of a website.
\n  \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n  
UI ElementA basic building block of a website, exists alone or in homogenous groups
UI CollectionA heterogeneous group of several elements which can usually be found together.
UI ViewA way to present common website content like comments, activity feeds
UI ModuleAn element where its behavior is an essential part of its definition
UI BehaviorA set of free-standing actions not specifically tied to an element
\n\n  
Definition Sections
\n  
All UI components of a single type are defined similarly.
\n  \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n  
All UI\n        
\n          
\n            
Types
\n            
Defines mutually exclusive types which each may have their own html
\n          
\n          
\n            
States
\n            
Defines element states like disabled, hovered, pressed down
\n          
\n          
\n            
Variations
\n            
Defines changes to an element which are not mutually exclusive and can be used together
\n          
\n        
\n      
Elements\n        
\n          
\n            
Group
\n            
An element can optionally define how attributes can be shared across a group
\n          
\n          
\n            
\n              UI Button\n            
\n          
\n        
\n      
Collections\n        
\n          
\n            
Content
\n            
A collection can define elements which might be found inside
\n          
\n          
\n            
States
\n            
A collection may define states for content elements or itself
\n          
\n          
\n            
Variations
\n            
A collection may define variations for content elements or itself
\n          
\n          
\n            
\n              UI Form\n            
\n          
\n        
\n      
Views\n        
\n          
\n            
Content
\n            
A view may define elements which can exist inside of the view
\n          
\n          
\n            
States
\n            
A view may define states for content elements or itself
\n          
\n          
\n            
Variations
\n            
A view may define variations for a content elements or itself
\n          
\n          
\n            
\n              UI Item\n            
\n          
\n        
\n      
Modules & Behaviors\n        
\n          
\n            
Behavior
\n            
A module will define a set of behaviors which can be used as an API
\n          
\n          
\n            
Settings
\n            
A settings object which can alter the default behavior when instantiating a module
\n          
\n          
\n            
Examples
\n            
A list of examples to showcase the variations in behavior of a module
\n          
\n          
\n            
\n              UI Dropdown\n            
\n          
\n        
\n      
\n  
Types of Definitions
\n\n  
UI Elements
\n\n  
UI Elements are page elements which are indivisible. This can be thought of as similar in definition as an \"element\" in chemistry.
\n\n  
UI elements can have plural definitions when they are known to exist together in groups. Plural variations allow you to only specify qualities once, allowing them to be inferred across all members of a group.
\n\n  
\n    
\n      
Cancel
\n      
Continue
\n    
\n  
\n\n  
Examples of UI elements:
\n  \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n  
Button\n        
Button
\n      
Label\n        
label
\n      
Input\n        
\n          \n          \n        
\n      
Loader\n        
\n      
Segment\n        
Segment
\n      
\n\n  
UI Collections
\n\n  
UI Collections are groups of heterogeneous page elements which are usually found together. Carrying the chemistry metaphor, these can be thought of as molecules.
\n\n  
UI collections have a definition of elements that exist, or could exist inside of them. They do not usually require all elements to be found, but they describe a list of the \"usual suspects\". Unlike elements definitions, collections are not typically useful to define in plural.
\n\n  
Examples of UI collections:
\n  \n\n  
UI Modules
\n\n  
UI modules are elements whose behavior is a fundamental part of its definition. UI Modules are usually dependent on javascript which carries the implementation of it's behavior, although in some special circumstances the behavior can include css alone.
\n\n  
Examples of UI modules:
\n  \n\n  
UI Views
\n\n  
UI Views are common tropes for presenting specific types of information. Unlike collections which focus specifically on the relation of interface elements, views focus specifically on the relation of site content to other pieces of site content.
\n\n  
Examples of UI views:
\n  \n\n  
\n  \n    Next: Semantic Coding\n    \n  \n\n
",
      "tags": null,
      "render": true,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": "Definitions",
      "name": "definitions.html",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "introduction-definitions",
      "url": "/introduction/definitions.html",
      "urls": [
        "/introduction/definitions.html"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": true,
      "header": "layout      : 'default'\ncss         : 'guide'\n\ntitle       : 'Definitions'\ndescription : 'Definitions provide a re-usable format for sharing an interface design'\ntype        : 'UI Introduction'",
      "parser": "yaml",
      "body": "\n\n<%- @partial('header') %>\n
\n  
\n    
\n      Definitions\n      Elements\n      Types\n    
\n  
\n\n  
Defining Definitions
\n\n  
Definitions in semantic are groups of css, fonts, images, and javascript which make up a single element. Unlike other javascript libraries, semantic UI elements are stand-alone and only require their own assets to function correctly.
\n\n  
Definition Types
\n  
Semantic has five different ui definitions. These are useful patterns for describing re-usable parts of a website.
\n  \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n  
UI ElementA basic building block of a website, exists alone or in homogenous groups
UI CollectionA heterogeneous group of several elements which can usually be found together.
UI ViewA way to present common website content like comments, activity feeds
UI ModuleAn element where its behavior is an essential part of its definition
UI BehaviorA set of free-standing actions not specifically tied to an element
\n\n  
Definition Sections
\n  
All UI components of a single type are defined similarly.
\n  \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n  
All UI\n        
\n          
\n            
Types
\n            
Defines mutually exclusive types which each may have their own html
\n          
\n          
\n            
States
\n            
Defines element states like disabled, hovered, pressed down
\n          
\n          
\n            
Variations
\n            
Defines changes to an element which are not mutually exclusive and can be used together
\n          
\n        
\n      
Elements\n        
\n          
\n            
Group
\n            
An element can optionally define how attributes can be shared across a group
\n          
\n          
\n            
\n              UI Button\n            
\n          
\n        
\n      
Collections\n        
\n          
\n            
Content
\n            
A collection can define elements which might be found inside
\n          
\n          
\n            
States
\n            
A collection may define states for content elements or itself
\n          
\n          
\n            
Variations
\n            
A collection may define variations for content elements or itself
\n          
\n          
\n            
\n              UI Form\n            
\n          
\n        
\n      
Views\n        
\n          
\n            
Content
\n            
A view may define elements which can exist inside of the view
\n          
\n          
\n            
States
\n            
A view may define states for content elements or itself
\n          
\n          
\n            
Variations
\n            
A view may define variations for a content elements or itself
\n          
\n          
\n            
\n              UI Item\n            
\n          
\n        
\n      
Modules & Behaviors\n        
\n          
\n            
Behavior
\n            
A module will define a set of behaviors which can be used as an API
\n          
\n          
\n            
Settings
\n            
A settings object which can alter the default behavior when instantiating a module
\n          
\n          
\n            
Examples
\n            
A list of examples to showcase the variations in behavior of a module
\n          
\n          
\n            
\n              UI Dropdown\n            
\n          
\n        
\n      
\n  
Types of Definitions
\n\n  
UI Elements
\n\n  
UI Elements are page elements which are indivisible. This can be thought of as similar in definition as an \"element\" in chemistry.
\n\n  
UI elements can have plural definitions when they are known to exist together in groups. Plural variations allow you to only specify qualities once, allowing them to be inferred across all members of a group.
\n\n  
\n    
\n      
Cancel
\n      
Continue
\n    
\n  
\n\n  
Examples of UI elements:
\n  \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n  
Button\n        
Button
\n      
Label\n        
label
\n      
Input\n        
\n          \n          \n        
\n      
Loader\n        
\n      
Segment\n        
Segment
\n      
\n\n  
UI Collections
\n\n  
UI Collections are groups of heterogeneous page elements which are usually found together. Carrying the chemistry metaphor, these can be thought of as molecules.
\n\n  
UI collections have a definition of elements that exist, or could exist inside of them. They do not usually require all elements to be found, but they describe a list of the \"usual suspects\". Unlike elements definitions, collections are not typically useful to define in plural.
\n\n  
Examples of UI collections:
\n  \n\n  
UI Modules
\n\n  
UI modules are elements whose behavior is a fundamental part of its definition. UI Modules are usually dependent on javascript which carries the implementation of it's behavior, although in some special circumstances the behavior can include css alone.
\n\n  
Examples of UI modules:
\n  \n\n  
UI Views
\n\n  
UI Views are common tropes for presenting specific types of information. Unlike collections which focus specifically on the relation of interface elements, views focus specifically on the relation of site content to other pieces of site content.
\n\n  
Examples of UI views:
\n  \n\n  
\n  \n    Next: Semantic Coding\n    \n  \n\n
",
      "rendered": true,
      "contentRendered": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  \n  \n  \n  \n\n  \n\n  \n  \n  Definitions | Semantic UI\n\n  \n  \n\n  \n\n  \n  \n  \n\n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n\n  \n  \n\n\n  
\n    \n       Close Menu\n    \n    \n       Download\n    \n    
\n      \n        Introduction\n      \n      
\n        \n          Definitions\n        \n          Overview\n        \n          Types\n        \n          Variations\n        \n          What's Different\n        \n      
\n    
\n    
\n      Project\n      
\n        \n          Contributing\n        \n          Set-up\n        \n      
\n    
\n    
\n      Elements\n      
\n        \n          Button\n        \n          Divider\n        \n          Header\n        \n          Icon\n        \n          Image\n        \n          Input\n        \n          Label\n        \n          Loader\n        \n          Progress\n        \n          Reveal\n        \n          Segment\n        \n          Step\n        \n      
\n    
\n    
\n      Collections\n      
\n        \n          Breadcrumb\n        \n          Form\n        \n          Grid\n        \n          Menu\n        \n          Message\n        \n          Table\n        \n      
\n    
\n    
\n      Views\n      
\n        \n          Comment\n        \n          Feed\n        \n          Item\n        \n          List\n        \n      
\n    
\n    
\n      Modules\n      
\n        \n          Accordion\n        \n          Checkbox\n        \n          Dimmer\n        \n          Dropdown\n        \n          Modal\n        \n          Popup\n        \n          Rating\n        \n          Shape\n        \n          Sidebar\n        \n          Transition\n        \n      
\n    
\n    
\n      Behavior\n      
\n        \n          Form Validation\n        \n      
\n    
\n    
\n      Style Guide\n      
\n        \n          CSS\n        \n          Javascript\n        \n          Language\n        \n      
\n    
\n\n  
\n\n  
\n    
\n       Content\n      
\n        UI Introduction: Definitions\n      
\n      \n      
\n      \n      
\n        1 of 5\n        
\n          \n            
\n              1. Definitions\n            
\n          \n            
\n              2. Overview\n            
\n          \n            
\n              3. Types\n            
\n          \n            
\n              4. Variations\n            
\n          \n            
\n              5. What's Different\n            
\n          \n        
\n      
\n      \n      \n      \n      
\n        \n        
\n          \n        
\n        \n        \n        \n          \n        \n        \n      
\n    
\n  
\n    
\n      \n      Menu\n    
\n  \n\n\n\n
\n  
\n    
\n\n      
\n        Definitions\n        \n      
\n\n      
Definitions provide a re-usable format for sharing an interface design
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n
\n  
\n    
\n      Definitions\n      Elements\n      Types\n    
\n  
\n\n  
Defining Definitions
\n\n  
Definitions in semantic are groups of css, fonts, images, and javascript which make up a single element. Unlike other javascript libraries, semantic UI elements are stand-alone and only require their own assets to function correctly.
\n\n  
Definition Types
\n  
Semantic has five different ui definitions. These are useful patterns for describing re-usable parts of a website.
\n  \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n  
UI ElementA basic building block of a website, exists alone or in homogenous groups
UI CollectionA heterogeneous group of several elements which can usually be found together.
UI ViewA way to present common website content like comments, activity feeds
UI ModuleAn element where its behavior is an essential part of its definition
UI BehaviorA set of free-standing actions not specifically tied to an element
\n\n  
Definition Sections
\n  
All UI components of a single type are defined similarly.
\n  \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n  
All UI\n        
\n          
\n            
Types
\n            
Defines mutually exclusive types which each may have their own html
\n          
\n          
\n            
States
\n            
Defines element states like disabled, hovered, pressed down
\n          
\n          
\n            
Variations
\n            
Defines changes to an element which are not mutually exclusive and can be used together
\n          
\n        
\n      
Elements\n        
\n          
\n            
Group
\n            
An element can optionally define how attributes can be shared across a group
\n          
\n          
\n            
\n              UI Button\n            
\n          
\n        
\n      
Collections\n        
\n          
\n            
Content
\n            
A collection can define elements which might be found inside
\n          
\n          
\n            
States
\n            
A collection may define states for content elements or itself
\n          
\n          
\n            
Variations
\n            
A collection may define variations for content elements or itself
\n          
\n          
\n            
\n              UI Form\n            
\n          
\n        
\n      
Views\n        
\n          
\n            
Content
\n            
A view may define elements which can exist inside of the view
\n          
\n          
\n            
States
\n            
A view may define states for content elements or itself
\n          
\n          
\n            
Variations
\n            
A view may define variations for a content elements or itself
\n          
\n          
\n            
\n              UI Item\n            
\n          
\n        
\n      
Modules & Behaviors\n        
\n          
\n            
Behavior
\n            
A module will define a set of behaviors which can be used as an API
\n          
\n          
\n            
Settings
\n            
A settings object which can alter the default behavior when instantiating a module
\n          
\n          
\n            
Examples
\n            
A list of examples to showcase the variations in behavior of a module
\n          
\n          
\n            
\n              UI Dropdown\n            
\n          
\n        
\n      
\n  
Types of Definitions
\n\n  
UI Elements
\n\n  
UI Elements are page elements which are indivisible. This can be thought of as similar in definition as an \"element\" in chemistry.
\n\n  
UI elements can have plural definitions when they are known to exist together in groups. Plural variations allow you to only specify qualities once, allowing them to be inferred across all members of a group.
\n\n  
\n    
\n      
Cancel
\n      
Continue
\n    
\n  
\n\n  
Examples of UI elements:
\n  \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n  
Button\n        
Button
\n      
Label\n        
label
\n      
Input\n        
\n          \n          \n        
\n      
Loader\n        
\n      
Segment\n        
Segment
\n      
\n\n  
UI Collections
\n\n  
UI Collections are groups of heterogeneous page elements which are usually found together. Carrying the chemistry metaphor, these can be thought of as molecules.
\n\n  
UI collections have a definition of elements that exist, or could exist inside of them. They do not usually require all elements to be found, but they describe a list of the \"usual suspects\". Unlike elements definitions, collections are not typically useful to define in plural.
\n\n  
Examples of UI collections:
\n  \n\n  
UI Modules
\n\n  
UI modules are elements whose behavior is a fundamental part of its definition. UI Modules are usually dependent on javascript which carries the implementation of it's behavior, although in some special circumstances the behavior can include css alone.
\n\n  
Examples of UI modules:
\n  \n\n  
UI Views
\n\n  
UI Views are common tropes for presenting specific types of information. Unlike collections which focus specifically on the relation of interface elements, views focus specifically on the relation of site content to other pieces of site content.
\n\n  
Examples of UI views:
\n  \n\n  
\n  \n    Next: Semantic Coding\n    \n  \n\n
\n\n\n",
      "contentRenderedWithoutLayouts": "\n\n\n\n
\n  
\n    
\n\n      
\n        Definitions\n        \n      
\n\n      
Definitions provide a re-usable format for sharing an interface design
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n
\n  
\n    
\n      Definitions\n      Elements\n      Types\n    
\n  
\n\n  
Defining Definitions
\n\n  
Definitions in semantic are groups of css, fonts, images, and javascript which make up a single element. Unlike other javascript libraries, semantic UI elements are stand-alone and only require their own assets to function correctly.
\n\n  
Definition Types
\n  
Semantic has five different ui definitions. These are useful patterns for describing re-usable parts of a website.
\n  \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n  
UI ElementA basic building block of a website, exists alone or in homogenous groups
UI CollectionA heterogeneous group of several elements which can usually be found together.
UI ViewA way to present common website content like comments, activity feeds
UI ModuleAn element where its behavior is an essential part of its definition
UI BehaviorA set of free-standing actions not specifically tied to an element
\n\n  
Definition Sections
\n  
All UI components of a single type are defined similarly.
\n  \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n  
All UI\n        
\n          
\n            
Types
\n            
Defines mutually exclusive types which each may have their own html
\n          
\n          
\n            
States
\n            
Defines element states like disabled, hovered, pressed down
\n          
\n          
\n            
Variations
\n            
Defines changes to an element which are not mutually exclusive and can be used together
\n          
\n        
\n      
Elements\n        
\n          
\n            
Group
\n            
An element can optionally define how attributes can be shared across a group
\n          
\n          
\n            
\n              UI Button\n            
\n          
\n        
\n      
Collections\n        
\n          
\n            
Content
\n            
A collection can define elements which might be found inside
\n          
\n          
\n            
States
\n            
A collection may define states for content elements or itself
\n          
\n          
\n            
Variations
\n            
A collection may define variations for content elements or itself
\n          
\n          
\n            
\n              UI Form\n            
\n          
\n        
\n      
Views\n        
\n          
\n            
Content
\n            
A view may define elements which can exist inside of the view
\n          
\n          
\n            
States
\n            
A view may define states for content elements or itself
\n          
\n          
\n            
Variations
\n            
A view may define variations for a content elements or itself
\n          
\n          
\n            
\n              UI Item\n            
\n          
\n        
\n      
Modules & Behaviors\n        
\n          
\n            
Behavior
\n            
A module will define a set of behaviors which can be used as an API
\n          
\n          
\n            
Settings
\n            
A settings object which can alter the default behavior when instantiating a module
\n          
\n          
\n            
Examples
\n            
A list of examples to showcase the variations in behavior of a module
\n          
\n          
\n            
\n              UI Dropdown\n            
\n          
\n        
\n      
\n  
Types of Definitions
\n\n  
UI Elements
\n\n  
UI Elements are page elements which are indivisible. This can be thought of as similar in definition as an \"element\" in chemistry.
\n\n  
UI elements can have plural definitions when they are known to exist together in groups. Plural variations allow you to only specify qualities once, allowing them to be inferred across all members of a group.
\n\n  
\n    
\n      
Cancel
\n      
Continue
\n    
\n  
\n\n  
Examples of UI elements:
\n  \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n  
Button\n        
Button
\n      
Label\n        
label
\n      
Input\n        
\n          \n          \n        
\n      
Loader\n        
\n      
Segment\n        
Segment
\n      
\n\n  
UI Collections
\n\n  
UI Collections are groups of heterogeneous page elements which are usually found together. Carrying the chemistry metaphor, these can be thought of as molecules.
\n\n  
UI collections have a definition of elements that exist, or could exist inside of them. They do not usually require all elements to be found, but they describe a list of the \"usual suspects\". Unlike elements definitions, collections are not typically useful to define in plural.
\n\n  
Examples of UI collections:
\n  \n\n  
UI Modules
\n\n  
UI modules are elements whose behavior is a fundamental part of its definition. UI Modules are usually dependent on javascript which carries the implementation of it's behavior, although in some special circumstances the behavior can include css alone.
\n\n  
Examples of UI modules:
\n  \n\n  
UI Views
\n\n  
UI Views are common tropes for presenting specific types of information. Unlike collections which focus specifically on the relation of interface elements, views focus specifically on the relation of site content to other pieces of site content.
\n\n  
Examples of UI views:
\n  \n\n  
\n  \n    Next: Semantic Coding\n    \n  \n\n
",
      "renderSingleExtensions": false,
      "layout": "default",
      "css": "guide",
      "description": "Definitions provide a re-usable format for sharing an interface design",
      "type": "UI Introduction",
      "layoutRelativePath": "default.html.eco",
      "meta": {
        "layout": "default",
        "css": "guide",
        "title": "Definitions",
        "description": "Definitions provide a re-usable format for sharing an interface design",
        "type": "UI Introduction"
      }
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/documents/introduction/overview.html.eco",
      "relativePath": "introduction/overview.html.eco",
      "basename": "overview",
      "outBasename": "overview",
      "extension": "eco",
      "outExtension": "html",
      "extensions": [
        "html",
        "eco"
      ],
      "filename": "overview.html.eco",
      "fullDirPath": "/home/jack/projects/semantic/server/documents/introduction",
      "outPath": "/home/jack/projects/semantic/docs/introduction/overview.html",
      "outDirPath": "/home/jack/projects/semantic/docs/introduction",
      "outFilename": "overview.html",
      "relativeOutPath": "introduction/overview.html",
      "relativeDirPath": "introduction",
      "relativeOutDirPath": "introduction",
      "relativeBase": "introduction/overview",
      "relativeOutBase": "introduction/overview",
      "contentType": "application/octet-stream",
      "outContentType": "text/html",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": "2013-12-04T09:15:25.950Z",
      "wtime": "2013-12-04T09:15:28.700Z",
      "exists": true,
      "encoding": "utf8",
      "source": "  ---\nlayout      : 'default'\ncss         : 'guide'\n\ntitle       : 'Overview'\ndescription : 'An introduction to Semantic style coding'\ntype        : 'UI Introduction'\n---\n\n\n\n<%- @partial('header') %>\n
\n  
\n    
\n      Interfacing\n      APIs\n    
\n  
\n  
Interfacing Carefully
\n\n  
UI definitions in Semantic are given the class name ui. This is to help tell the difference between ui elements and parts of the definition of an element. This means any element with the class name UI has a corresponding UI definition.\n\n  
For example a menu may have menu items inside of it. These items are contained as part of the menu definition but do not receive the class name ui because they are part of a UI menu collection.
\n\n  
\n    
\n      Home\n      Inbox\n    
\n  
\n\n  
Changing an Element
\n\n  
Class names in Semantic always use single english words. If a class name is an adjective it is either a type of element or variation of an element. CSS definitions always define adjectives in the context of a noun. In this way class names cannot pollute the namespace.
\n\n  
\n    
\n      Home\n      Inbox\n    
\n  
\n  
\n\n  
Combining elements
\n  
All UI definitions in semantic are stand-alone, and do not require other components to function. However, components can choose to have optional couplings with other components.
\n\n  
For example you might want to include a badge inside a menu. A label inside of a menu will automatically function as a badge.
\n\n  
\n    
\n      Home\n      \n        Inbox\n        
22
\n      \n    
\n  
\n\n  
Semantic APIs
\n\n  
Modules define a public API using verbs and simple phrases. When methods are invoked internally those phrases are matched to internal methods automatically.
\n\n    
\n    
\n      First\n      Second\n      Third\n    
\n    
First
\n    
Second
\n    
Third
\n    
\n        
Opening a new tab with a behavior
\n        
Modules have simple behaviors for triggering common actions
\n        
\n    $('.demo.menu .item')\n      .tab('change tab', 'second')\n    ;\n        
\n\n        
Opening a new tab with multiple behaviors
\n        
Any internal behavior is accessible as well
\n        
\n    $('.demo.menu .item')\n      .tab('deactivate all')\n      .tab('activate tab', 'third')\n      .tab('activate navigation', 'third')\n    ;\n        
\n      
Turning on HTML5 State
\n      
Modules can be re-initialized at any time with different settings
\n        
\n    $('.demo.menu .item')\n      .tab({\n        history : true,\n        path    : '/introduction/getting-started.html'\n      })\n    ;\n        
\n\n  
\n\n  \n    Next: UI Types\n    \n  \n\n
",
      "content": "\n\n\n<%- @partial('header') %>\n
\n  
\n    
\n      Interfacing\n      APIs\n    
\n  
\n  
Interfacing Carefully
\n\n  
UI definitions in Semantic are given the class name ui. This is to help tell the difference between ui elements and parts of the definition of an element. This means any element with the class name UI has a corresponding UI definition.\n\n  
For example a menu may have menu items inside of it. These items are contained as part of the menu definition but do not receive the class name ui because they are part of a UI menu collection.
\n\n  
\n    
\n      Home\n      Inbox\n    
\n  
\n\n  
Changing an Element
\n\n  
Class names in Semantic always use single english words. If a class name is an adjective it is either a type of element or variation of an element. CSS definitions always define adjectives in the context of a noun. In this way class names cannot pollute the namespace.
\n\n  
\n    
\n      Home\n      Inbox\n    
\n  
\n  
\n\n  
Combining elements
\n  
All UI definitions in semantic are stand-alone, and do not require other components to function. However, components can choose to have optional couplings with other components.
\n\n  
For example you might want to include a badge inside a menu. A label inside of a menu will automatically function as a badge.
\n\n  
\n    
\n      Home\n      \n        Inbox\n        
22
\n      \n    
\n  
\n\n  
Semantic APIs
\n\n  
Modules define a public API using verbs and simple phrases. When methods are invoked internally those phrases are matched to internal methods automatically.
\n\n    
\n    
\n      First\n      Second\n      Third\n    
\n    
First
\n    
Second
\n    
Third
\n    
\n        
Opening a new tab with a behavior
\n        
Modules have simple behaviors for triggering common actions
\n        
\n    $('.demo.menu .item')\n      .tab('change tab', 'second')\n    ;\n        
\n\n        
Opening a new tab with multiple behaviors
\n        
Any internal behavior is accessible as well
\n        
\n    $('.demo.menu .item')\n      .tab('deactivate all')\n      .tab('activate tab', 'third')\n      .tab('activate navigation', 'third')\n    ;\n        
\n      
Turning on HTML5 State
\n      
Modules can be re-initialized at any time with different settings
\n        
\n    $('.demo.menu .item')\n      .tab({\n        history : true,\n        path    : '/introduction/getting-started.html'\n      })\n    ;\n        
\n\n  
\n\n  \n    Next: UI Types\n    \n  \n\n
",
      "tags": null,
      "render": true,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": "Overview",
      "name": "overview.html",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "introduction-overview",
      "url": "/introduction/overview.html",
      "urls": [
        "/introduction/overview.html"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": true,
      "header": "layout      : 'default'\ncss         : 'guide'\n\ntitle       : 'Overview'\ndescription : 'An introduction to Semantic style coding'\ntype        : 'UI Introduction'",
      "parser": "yaml",
      "body": "\n\n\n<%- @partial('header') %>\n
\n  
\n    
\n      Interfacing\n      APIs\n    
\n  
\n  
Interfacing Carefully
\n\n  
UI definitions in Semantic are given the class name ui. This is to help tell the difference between ui elements and parts of the definition of an element. This means any element with the class name UI has a corresponding UI definition.\n\n  
For example a menu may have menu items inside of it. These items are contained as part of the menu definition but do not receive the class name ui because they are part of a UI menu collection.
\n\n  
\n    
\n      Home\n      Inbox\n    
\n  
\n\n  
Changing an Element
\n\n  
Class names in Semantic always use single english words. If a class name is an adjective it is either a type of element or variation of an element. CSS definitions always define adjectives in the context of a noun. In this way class names cannot pollute the namespace.
\n\n  
\n    
\n      Home\n      Inbox\n    
\n  
\n  
\n\n  
Combining elements
\n  
All UI definitions in semantic are stand-alone, and do not require other components to function. However, components can choose to have optional couplings with other components.
\n\n  
For example you might want to include a badge inside a menu. A label inside of a menu will automatically function as a badge.
\n\n  
\n    
\n      Home\n      \n        Inbox\n        
22
\n      \n    
\n  
\n\n  
Semantic APIs
\n\n  
Modules define a public API using verbs and simple phrases. When methods are invoked internally those phrases are matched to internal methods automatically.
\n\n    
\n    
\n      First\n      Second\n      Third\n    
\n    
First
\n    
Second
\n    
Third
\n    
\n        
Opening a new tab with a behavior
\n        
Modules have simple behaviors for triggering common actions
\n        
\n    $('.demo.menu .item')\n      .tab('change tab', 'second')\n    ;\n        
\n\n        
Opening a new tab with multiple behaviors
\n        
Any internal behavior is accessible as well
\n        
\n    $('.demo.menu .item')\n      .tab('deactivate all')\n      .tab('activate tab', 'third')\n      .tab('activate navigation', 'third')\n    ;\n        
\n      
Turning on HTML5 State
\n      
Modules can be re-initialized at any time with different settings
\n        
\n    $('.demo.menu .item')\n      .tab({\n        history : true,\n        path    : '/introduction/getting-started.html'\n      })\n    ;\n        
\n\n  
\n\n  \n    Next: UI Types\n    \n  \n\n
",
      "rendered": true,
      "contentRendered": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  \n  \n  \n  \n\n  \n\n  \n  \n  Overview | Semantic UI\n\n  \n  \n\n  \n\n  \n  \n  \n\n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n\n  \n  \n\n\n  
\n    \n       Close Menu\n    \n    \n       Download\n    \n    
\n      \n        Introduction\n      \n      
\n        \n          Definitions\n        \n          Overview\n        \n          Types\n        \n          Variations\n        \n          What's Different\n        \n      
\n    
\n    
\n      Project\n      
\n        \n          Contributing\n        \n          Set-up\n        \n      
\n    
\n    
\n      Elements\n      
\n        \n          Button\n        \n          Divider\n        \n          Header\n        \n          Icon\n        \n          Image\n        \n          Input\n        \n          Label\n        \n          Loader\n        \n          Progress\n        \n          Reveal\n        \n          Segment\n        \n          Step\n        \n      
\n    
\n    
\n      Collections\n      
\n        \n          Breadcrumb\n        \n          Form\n        \n          Grid\n        \n          Menu\n        \n          Message\n        \n          Table\n        \n      
\n    
\n    
\n      Views\n      
\n        \n          Comment\n        \n          Feed\n        \n          Item\n        \n          List\n        \n      
\n    
\n    
\n      Modules\n      
\n        \n          Accordion\n        \n          Checkbox\n        \n          Dimmer\n        \n          Dropdown\n        \n          Modal\n        \n          Popup\n        \n          Rating\n        \n          Shape\n        \n          Sidebar\n        \n          Transition\n        \n      
\n    
\n    
\n      Behavior\n      
\n        \n          Form Validation\n        \n      
\n    
\n    
\n      Style Guide\n      
\n        \n          CSS\n        \n          Javascript\n        \n          Language\n        \n      
\n    
\n\n  
\n\n  
\n    
\n       Content\n      
\n        UI Introduction: Overview\n      
\n      \n      \n      \n      
\n        2 of 5\n        
\n          \n            
\n              1. Definitions\n            
\n          \n            
\n              2. Overview\n            
\n          \n            
\n              3. Types\n            
\n          \n            
\n              4. Variations\n            
\n          \n            
\n              5. What's Different\n            
\n          \n        
\n      
\n      \n      \n      \n      
\n        \n        
\n          \n        
\n        \n        \n        \n          \n        \n        \n      
\n    
\n  
\n    
\n      \n      Menu\n    
\n  \n\n\n\n\n
\n  
\n    
\n\n      
\n        Overview\n        \n      
\n\n      
An introduction to Semantic style coding
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n
\n  
\n    
\n      Interfacing\n      APIs\n    
\n  
\n  
Interfacing Carefully
\n\n  
UI definitions in Semantic are given the class name ui. This is to help tell the difference between ui elements and parts of the definition of an element. This means any element with the class name UI has a corresponding UI definition.\n\n  
For example a menu may have menu items inside of it. These items are contained as part of the menu definition but do not receive the class name ui because they are part of a UI menu collection.
\n\n  
\n    
\n      Home\n      Inbox\n    
\n  
\n\n  
Changing an Element
\n\n  
Class names in Semantic always use single english words. If a class name is an adjective it is either a type of element or variation of an element. CSS definitions always define adjectives in the context of a noun. In this way class names cannot pollute the namespace.
\n\n  
\n    
\n      Home\n      Inbox\n    
\n  
\n  
\n\n  
Combining elements
\n  
All UI definitions in semantic are stand-alone, and do not require other components to function. However, components can choose to have optional couplings with other components.
\n\n  
For example you might want to include a badge inside a menu. A label inside of a menu will automatically function as a badge.
\n\n  
\n    
\n      Home\n      \n        Inbox\n        
22
\n      \n    
\n  
\n\n  
Semantic APIs
\n\n  
Modules define a public API using verbs and simple phrases. When methods are invoked internally those phrases are matched to internal methods automatically.
\n\n    
\n    
\n      First\n      Second\n      Third\n    
\n    
First
\n    
Second
\n    
Third
\n    
\n        
Opening a new tab with a behavior
\n        
Modules have simple behaviors for triggering common actions
\n        
\n    $('.demo.menu .item')\n      .tab('change tab', 'second')\n    ;\n        
\n\n        
Opening a new tab with multiple behaviors
\n        
Any internal behavior is accessible as well
\n        
\n    $('.demo.menu .item')\n      .tab('deactivate all')\n      .tab('activate tab', 'third')\n      .tab('activate navigation', 'third')\n    ;\n        
\n      
Turning on HTML5 State
\n      
Modules can be re-initialized at any time with different settings
\n        
\n    $('.demo.menu .item')\n      .tab({\n        history : true,\n        path    : '/introduction/getting-started.html'\n      })\n    ;\n        
\n\n  
\n\n  \n    Next: UI Types\n    \n  \n\n
\n\n\n",
      "contentRenderedWithoutLayouts": "\n\n\n\n\n
\n  
\n    
\n\n      
\n        Overview\n        \n      
\n\n      
An introduction to Semantic style coding
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n
\n  
\n    
\n      Interfacing\n      APIs\n    
\n  
\n  
Interfacing Carefully
\n\n  
UI definitions in Semantic are given the class name ui. This is to help tell the difference between ui elements and parts of the definition of an element. This means any element with the class name UI has a corresponding UI definition.\n\n  
For example a menu may have menu items inside of it. These items are contained as part of the menu definition but do not receive the class name ui because they are part of a UI menu collection.
\n\n  
\n    
\n      Home\n      Inbox\n    
\n  
\n\n  
Changing an Element
\n\n  
Class names in Semantic always use single english words. If a class name is an adjective it is either a type of element or variation of an element. CSS definitions always define adjectives in the context of a noun. In this way class names cannot pollute the namespace.
\n\n  
\n    
\n      Home\n      Inbox\n    
\n  
\n  
\n\n  
Combining elements
\n  
All UI definitions in semantic are stand-alone, and do not require other components to function. However, components can choose to have optional couplings with other components.
\n\n  
For example you might want to include a badge inside a menu. A label inside of a menu will automatically function as a badge.
\n\n  
\n    
\n      Home\n      \n        Inbox\n        
22
\n      \n    
\n  
\n\n  
Semantic APIs
\n\n  
Modules define a public API using verbs and simple phrases. When methods are invoked internally those phrases are matched to internal methods automatically.
\n\n    
\n    
\n      First\n      Second\n      Third\n    
\n    
First
\n    
Second
\n    
Third
\n    
\n        
Opening a new tab with a behavior
\n        
Modules have simple behaviors for triggering common actions
\n        
\n    $('.demo.menu .item')\n      .tab('change tab', 'second')\n    ;\n        
\n\n        
Opening a new tab with multiple behaviors
\n        
Any internal behavior is accessible as well
\n        
\n    $('.demo.menu .item')\n      .tab('deactivate all')\n      .tab('activate tab', 'third')\n      .tab('activate navigation', 'third')\n    ;\n        
\n      
Turning on HTML5 State
\n      
Modules can be re-initialized at any time with different settings
\n        
\n    $('.demo.menu .item')\n      .tab({\n        history : true,\n        path    : '/introduction/getting-started.html'\n      })\n    ;\n        
\n\n  
\n\n  \n    Next: UI Types\n    \n  \n\n
",
      "renderSingleExtensions": false,
      "layout": "default",
      "css": "guide",
      "description": "An introduction to Semantic style coding",
      "type": "UI Introduction",
      "layoutRelativePath": "default.html.eco",
      "meta": {
        "layout": "default",
        "css": "guide",
        "title": "Overview",
        "description": "An introduction to Semantic style coding",
        "type": "UI Introduction"
      }
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/documents/introduction/types.html.eco",
      "relativePath": "introduction/types.html.eco",
      "basename": "types",
      "outBasename": "types",
      "extension": "eco",
      "outExtension": "html",
      "extensions": [
        "html",
        "eco"
      ],
      "filename": "types.html.eco",
      "fullDirPath": "/home/jack/projects/semantic/server/documents/introduction",
      "outPath": "/home/jack/projects/semantic/docs/introduction/types.html",
      "outDirPath": "/home/jack/projects/semantic/docs/introduction",
      "outFilename": "types.html",
      "relativeOutPath": "introduction/types.html",
      "relativeDirPath": "introduction",
      "relativeOutDirPath": "introduction",
      "relativeBase": "introduction/types",
      "relativeOutBase": "introduction/types",
      "contentType": "application/octet-stream",
      "outContentType": "text/html",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": "2013-12-04T09:15:26.012Z",
      "wtime": "2013-12-04T09:15:28.703Z",
      "exists": true,
      "encoding": "utf8",
      "source": "---\nlayout      : 'default'\ncss         : 'guide'\n\ntitle       : 'Types'\ndescription : 'A type is an mutually exclusive version of an element'\ntype        : 'UI Introduction'\n---\n\n\n<%- @partial('header') %>\n
\n  
\n    
\n      Overview\n    
\n  
\n\n  
Overview
\n\n  
A ui definition in Semantic usually contains a list of mutually exclusive variations on an element design. A type is designated by an additional class name on a UI element
\n\n  
\n    
\n      Download \n    
\n    
\n      \n    
\n    
\n      Download\n    
\n    
\n      \n      Facebook\n    
\n  
\n\n  
Content
\n  
Types may require different html structures to work correctly. For example, an icon menu might expect different content like icons glyphs instead of text to be formatted correctly
\n\n  
\n    
\n      \n        \n      \n      \n        \n      \n      \n        \n      \n    
\n  
\n\n  
HTML Differences
\n  
Types may also each require slightly different html. For example, a tiered menu needs html specified for a sub menu to display itself correctly
\n\n  
\n    
\n      
\n        
\n          \n          Home\n        
\n        \n          \n          Mail\n          22\n        \n      
\n      
\n        
Activity
\n        Profile\n      
\n    
\n  
\n  
\n  \n    Next: UI Variations\n    \n  \n\n
",
      "content": "\n\n<%- @partial('header') %>\n
\n  
\n    
\n      Overview\n    
\n  
\n\n  
Overview
\n\n  
A ui definition in Semantic usually contains a list of mutually exclusive variations on an element design. A type is designated by an additional class name on a UI element
\n\n  
\n    
\n      Download \n    
\n    
\n      \n    
\n    
\n      Download\n    
\n    
\n      \n      Facebook\n    
\n  
\n\n  
Content
\n  
Types may require different html structures to work correctly. For example, an icon menu might expect different content like icons glyphs instead of text to be formatted correctly
\n\n  
\n    
\n      \n        \n      \n      \n        \n      \n      \n        \n      \n    
\n  
\n\n  
HTML Differences
\n  
Types may also each require slightly different html. For example, a tiered menu needs html specified for a sub menu to display itself correctly
\n\n  
\n    
\n      
\n        
\n          \n          Home\n        
\n        \n          \n          Mail\n          22\n        \n      
\n      
\n        
Activity
\n        Profile\n      
\n    
\n  
\n  
\n  \n    Next: UI Variations\n    \n  \n\n
",
      "tags": null,
      "render": true,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": "Types",
      "name": "types.html",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "introduction-types",
      "url": "/introduction/types.html",
      "urls": [
        "/introduction/types.html"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": true,
      "header": "layout      : 'default'\ncss         : 'guide'\n\ntitle       : 'Types'\ndescription : 'A type is an mutually exclusive version of an element'\ntype        : 'UI Introduction'",
      "parser": "yaml",
      "body": "\n\n<%- @partial('header') %>\n
\n  
\n    
\n      Overview\n    
\n  
\n\n  
Overview
\n\n  
A ui definition in Semantic usually contains a list of mutually exclusive variations on an element design. A type is designated by an additional class name on a UI element
\n\n  
\n    
\n      Download \n    
\n    
\n      \n    
\n    
\n      Download\n    
\n    
\n      \n      Facebook\n    
\n  
\n\n  
Content
\n  
Types may require different html structures to work correctly. For example, an icon menu might expect different content like icons glyphs instead of text to be formatted correctly
\n\n  
\n    
\n      \n        \n      \n      \n        \n      \n      \n        \n      \n    
\n  
\n\n  
HTML Differences
\n  
Types may also each require slightly different html. For example, a tiered menu needs html specified for a sub menu to display itself correctly
\n\n  
\n    
\n      
\n        
\n          \n          Home\n        
\n        \n          \n          Mail\n          22\n        \n      
\n      
\n        
Activity
\n        Profile\n      
\n    
\n  
\n  
\n  \n    Next: UI Variations\n    \n  \n\n
",
      "rendered": true,
      "contentRendered": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  \n  \n  \n  \n\n  \n\n  \n  \n  Types | Semantic UI\n\n  \n  \n\n  \n\n  \n  \n  \n\n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n\n  \n  \n\n\n  
\n    \n       Close Menu\n    \n    \n       Download\n    \n    
\n      \n        Introduction\n      \n      
\n        \n          Definitions\n        \n          Overview\n        \n          Types\n        \n          Variations\n        \n          What's Different\n        \n      
\n    
\n    
\n      Project\n      
\n        \n          Contributing\n        \n          Set-up\n        \n      
\n    
\n    
\n      Elements\n      
\n        \n          Button\n        \n          Divider\n        \n          Header\n        \n          Icon\n        \n          Image\n        \n          Input\n        \n          Label\n        \n          Loader\n        \n          Progress\n        \n          Reveal\n        \n          Segment\n        \n          Step\n        \n      
\n    
\n    
\n      Collections\n      
\n        \n          Breadcrumb\n        \n          Form\n        \n          Grid\n        \n          Menu\n        \n          Message\n        \n          Table\n        \n      
\n    
\n    
\n      Views\n      
\n        \n          Comment\n        \n          Feed\n        \n          Item\n        \n          List\n        \n      
\n    
\n    
\n      Modules\n      
\n        \n          Accordion\n        \n          Checkbox\n        \n          Dimmer\n        \n          Dropdown\n        \n          Modal\n        \n          Popup\n        \n          Rating\n        \n          Shape\n        \n          Sidebar\n        \n          Transition\n        \n      
\n    
\n    
\n      Behavior\n      
\n        \n          Form Validation\n        \n      
\n    
\n    
\n      Style Guide\n      
\n        \n          CSS\n        \n          Javascript\n        \n          Language\n        \n      
\n    
\n\n  
\n\n  
\n    
\n       Content\n      
\n        UI Introduction: Types\n      
\n      \n      \n      \n      
\n        3 of 5\n        
\n          \n            
\n              1. Definitions\n            
\n          \n            
\n              2. Overview\n            
\n          \n            
\n              3. Types\n            
\n          \n            
\n              4. Variations\n            
\n          \n            
\n              5. What's Different\n            
\n          \n        
\n      
\n      \n      \n      \n      
\n        \n        
\n          \n        
\n        \n        \n        \n          \n        \n        \n      
\n    
\n  
\n    
\n      \n      Menu\n    
\n  \n\n\n\n
\n  
\n    
\n\n      
\n        Types\n        \n      
\n\n      
A type is an mutually exclusive version of an element
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n
\n  
\n    
\n      Overview\n    
\n  
\n\n  
Overview
\n\n  
A ui definition in Semantic usually contains a list of mutually exclusive variations on an element design. A type is designated by an additional class name on a UI element
\n\n  
\n    
\n      Download \n    
\n    
\n      \n    
\n    
\n      Download\n    
\n    
\n      \n      Facebook\n    
\n  
\n\n  
Content
\n  
Types may require different html structures to work correctly. For example, an icon menu might expect different content like icons glyphs instead of text to be formatted correctly
\n\n  
\n    
\n      \n        \n      \n      \n        \n      \n      \n        \n      \n    
\n  
\n\n  
HTML Differences
\n  
Types may also each require slightly different html. For example, a tiered menu needs html specified for a sub menu to display itself correctly
\n\n  
\n    
\n      
\n        
\n          \n          Home\n        
\n        \n          \n          Mail\n          22\n        \n      
\n      
\n        
Activity
\n        Profile\n      
\n    
\n  
\n  
\n  \n    Next: UI Variations\n    \n  \n\n
\n\n\n",
      "contentRenderedWithoutLayouts": "\n\n\n\n
\n  
\n    
\n\n      
\n        Types\n        \n      
\n\n      
A type is an mutually exclusive version of an element
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n
\n  
\n    
\n      Overview\n    
\n  
\n\n  
Overview
\n\n  
A ui definition in Semantic usually contains a list of mutually exclusive variations on an element design. A type is designated by an additional class name on a UI element
\n\n  
\n    
\n      Download \n    
\n    
\n      \n    
\n    
\n      Download\n    
\n    
\n      \n      Facebook\n    
\n  
\n\n  
Content
\n  
Types may require different html structures to work correctly. For example, an icon menu might expect different content like icons glyphs instead of text to be formatted correctly
\n\n  
\n    
\n      \n        \n      \n      \n        \n      \n      \n        \n      \n    
\n  
\n\n  
HTML Differences
\n  
Types may also each require slightly different html. For example, a tiered menu needs html specified for a sub menu to display itself correctly
\n\n  
\n    
\n      
\n        
\n          \n          Home\n        
\n        \n          \n          Mail\n          22\n        \n      
\n      
\n        
Activity
\n        Profile\n      
\n    
\n  
\n  
\n  \n    Next: UI Variations\n    \n  \n\n
",
      "renderSingleExtensions": false,
      "layout": "default",
      "css": "guide",
      "description": "A type is an mutually exclusive version of an element",
      "type": "UI Introduction",
      "layoutRelativePath": "default.html.eco",
      "meta": {
        "layout": "default",
        "css": "guide",
        "title": "Types",
        "description": "A type is an mutually exclusive version of an element",
        "type": "UI Introduction"
      }
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/documents/introduction/variations.html.eco",
      "relativePath": "introduction/variations.html.eco",
      "basename": "variations",
      "outBasename": "variations",
      "extension": "eco",
      "outExtension": "html",
      "extensions": [
        "html",
        "eco"
      ],
      "filename": "variations.html.eco",
      "fullDirPath": "/home/jack/projects/semantic/server/documents/introduction",
      "outPath": "/home/jack/projects/semantic/docs/introduction/variations.html",
      "outDirPath": "/home/jack/projects/semantic/docs/introduction",
      "outFilename": "variations.html",
      "relativeOutPath": "introduction/variations.html",
      "relativeDirPath": "introduction",
      "relativeOutDirPath": "introduction",
      "relativeBase": "introduction/variations",
      "relativeOutBase": "introduction/variations",
      "contentType": "application/octet-stream",
      "outContentType": "text/html",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": "2013-12-04T09:15:26.076Z",
      "wtime": "2013-12-04T09:15:28.706Z",
      "exists": true,
      "encoding": "utf8",
      "source": "  ---\nlayout      : 'default'\ncss         : 'guide'\n\ntitle       : 'Variations'\ndescription : 'Variations are stackable, symbiotic changes to an elements appearance'\ntype        : 'UI Introduction'\n---\n\n\n<%- @partial('header') %>\n
\n  
\n    
\n      Overview\n      Usage\n    
\n  
\n\n  
Overview
\n\n  
A variation alters the design of an element but is not mutually exclusive. Variations can be stacked together, or be used along with altering an element's type.
\n\n  
For example, having wide menus that take up the full width of its parent may sometimes be overwhelming. You can use the compact variation of a menu to alter its format to only take up the necessary space.
\n\n  
\n    
\n      ...\n    
\n  
\n  
\n    
\n      
\n        \n        Home\n      
\n      \n        \n        Mail\n        
22
\n      \n    
\n    
\n      Activity\n      Profile\n    
\n  
\n\n  
Context sensitive
\n\n  
In Semantic, variations maintain context based on the element they modify, but keep the same vocabulary between elements. Just like how in English, the adjective 'big' may describe a different scale for a big planet versus a big insect.
\n\n  
For example an icon might need to modify it's vertical alignment when it is larger than the surrounding text, while a form does not.
\n\n  
All definitions in Semantic are based around em and rem so resizing an element usually is as simple as altering the base font size of the element, padding, margins, and other properties will adjust automatically.
\n\n  
\n    /* a large form is not quite as large as a large icon */\n    .ui.large.form {\n      font-size: 1.125em;\n    }\n    /* icons need to adjust vertical alignment as they grow past 1em */\n    i.large.icon {\n      font-size: 1.5em;\n      vertical-align: middle;\n    }\n  
\n\n\n  
Using Variations Together
\n  
Another variation of a menu is an inverted menu. This alters the color contrast to appear inverted for darker backgrounds. Some variations may also mutate when used together. Lets try adding the class name red as well.
\n  
Variations are not mutually exclusive and can be used together harmoniously, so we can use these together to create an inverted red tiered menu
\n\n  
\n    
\n      ...\n    
\n  
\n  
\n    
\n      
\n        \n        Home\n      
\n      \n        \n        Mail\n        
22
\n      \n    
\n    
\n      Activity\n      Profile\n    
\n  
\n  
\n\n  
Intersecting Variations
\n  
The definition for the variation red contains css specifically for describing the intersection of both red and inverted. For example, lets see the same menu with only the red variation.
\n\n  
\n    
\n      ...\n    
\n  
\n  
\n    
\n      
\n        \n        Home\n      
\n      \n        \n        Mail\n        
22
\n      \n    
\n    
\n      Activity\n      Profile\n    
\n  
\n\n\n  
\n  \n    Next: View Elements\n    \n  \n\n  \n  \n  \n\n  \n\n  \n  \n  Variations | Semantic UI\n\n  \n  \n\n  \n\n  \n  \n  \n\n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n\n  \n  \n\n\n  
\n    \n       Close Menu\n    \n    \n       Download\n    \n    
\n      \n        Introduction\n      \n      
\n        \n          Definitions\n        \n          Overview\n        \n          Types\n        \n          Variations\n        \n          What's Different\n        \n      
\n    
\n    
\n      Project\n      
\n        \n          Contributing\n        \n          Set-up\n        \n      
\n    
\n    
\n      Elements\n      
\n        \n          Button\n        \n          Divider\n        \n          Header\n        \n          Icon\n        \n          Image\n        \n          Input\n        \n          Label\n        \n          Loader\n        \n          Progress\n        \n          Reveal\n        \n          Segment\n        \n          Step\n        \n      
\n    
\n    
\n      Collections\n      
\n        \n          Breadcrumb\n        \n          Form\n        \n          Grid\n        \n          Menu\n        \n          Message\n        \n          Table\n        \n      
\n    
\n    
\n      Views\n      
\n        \n          Comment\n        \n          Feed\n        \n          Item\n        \n          List\n        \n      
\n    
\n    
\n      Modules\n      
\n        \n          Accordion\n        \n          Checkbox\n        \n          Dimmer\n        \n          Dropdown\n        \n          Modal\n        \n          Popup\n        \n          Rating\n        \n          Shape\n        \n          Sidebar\n        \n          Transition\n        \n      
\n    
\n    
\n      Behavior\n      
\n        \n          Form Validation\n        \n      
\n    
\n    
\n      Style Guide\n      
\n        \n          CSS\n        \n          Javascript\n        \n          Language\n        \n      
\n    
\n\n  
\n\n  
\n    
\n       Content\n      
\n        UI Introduction: Variations\n      
\n      \n      \n      \n      
\n        4 of 5\n        
\n          \n            
\n              1. Definitions\n            
\n          \n            
\n              2. Overview\n            
\n          \n            
\n              3. Types\n            
\n          \n            
\n              4. Variations\n            
\n          \n            
\n              5. What's Different\n            
\n          \n        
\n      
\n      \n      \n      \n      
\n        \n        
\n          \n        
\n        \n        \n        \n          \n        \n        \n      
\n    
\n  
\n    
\n      \n      Menu\n    
\n  \n\n\n\n
\n  
\n    
\n\n      
\n        Variations\n        \n      
\n\n      
Variations are stackable, symbiotic changes to an elements appearance
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n
\n  
\n    
\n      Overview\n      Usage\n    
\n  
\n\n  
Overview
\n\n  
A variation alters the design of an element but is not mutually exclusive. Variations can be stacked together, or be used along with altering an element's type.
\n\n  
For example, having wide menus that take up the full width of its parent may sometimes be overwhelming. You can use the compact variation of a menu to alter its format to only take up the necessary space.
\n\n  
\n    
\n      ...\n    
\n  
\n  
\n    
\n      
\n        \n        Home\n      
\n      \n        \n        Mail\n        
22
\n      \n    
\n    
\n      Activity\n      Profile\n    
\n  
\n\n  
Context sensitive
\n\n  
In Semantic, variations maintain context based on the element they modify, but keep the same vocabulary between elements. Just like how in English, the adjective 'big' may describe a different scale for a big planet versus a big insect.
\n\n  
For example an icon might need to modify it's vertical alignment when it is larger than the surrounding text, while a form does not.
\n\n  
All definitions in Semantic are based around em and rem so resizing an element usually is as simple as altering the base font size of the element, padding, margins, and other properties will adjust automatically.
\n\n  
\n    /* a large form is not quite as large as a large icon */\n    .ui.large.form {\n      font-size: 1.125em;\n    }\n    /* icons need to adjust vertical alignment as they grow past 1em */\n    i.large.icon {\n      font-size: 1.5em;\n      vertical-align: middle;\n    }\n  
\n\n\n  
Using Variations Together
\n  
Another variation of a menu is an inverted menu. This alters the color contrast to appear inverted for darker backgrounds. Some variations may also mutate when used together. Lets try adding the class name red as well.
\n  
Variations are not mutually exclusive and can be used together harmoniously, so we can use these together to create an inverted red tiered menu
\n\n  
\n    
\n      ...\n    
\n  
\n  
\n    
\n      
\n        \n        Home\n      
\n      \n        \n        Mail\n        
22
\n      \n    
\n    
\n      Activity\n      Profile\n    
\n  
\n  
\n\n  
Intersecting Variations
\n  
The definition for the variation red contains css specifically for describing the intersection of both red and inverted. For example, lets see the same menu with only the red variation.
\n\n  
\n    
\n      ...\n    
\n  
\n  
\n    
\n      
\n        \n        Home\n      
\n      \n        \n        Mail\n        
22
\n      \n    
\n    
\n      Activity\n      Profile\n    
\n  
\n\n\n  
\n  \n    Next: View Elements\n    \n  \n\n  \n  \n  \n\n  \n\n  \n  \n  Accordion | Semantic UI\n\n  \n  \n\n  \n\n  \n  \n  \n\n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n\n  \n  \n\n\n  
\n    \n       Close Menu\n    \n    \n       Download\n    \n    
\n      \n        Introduction\n      \n      
\n        \n          Definitions\n        \n          Overview\n        \n          Types\n        \n          Variations\n        \n          What's Different\n        \n      
\n    
\n    
\n      Project\n      
\n        \n          Contributing\n        \n          Set-up\n        \n      
\n    
\n    
\n      Elements\n      
\n        \n          Button\n        \n          Divider\n        \n          Header\n        \n          Icon\n        \n          Image\n        \n          Input\n        \n          Label\n        \n          Loader\n        \n          Progress\n        \n          Reveal\n        \n          Segment\n        \n          Step\n        \n      
\n    
\n    
\n      Collections\n      
\n        \n          Breadcrumb\n        \n          Form\n        \n          Grid\n        \n          Menu\n        \n          Message\n        \n          Table\n        \n      
\n    
\n    
\n      Views\n      
\n        \n          Comment\n        \n          Feed\n        \n          Item\n        \n          List\n        \n      
\n    
\n    
\n      Modules\n      
\n        \n          Accordion\n        \n          Checkbox\n        \n          Dimmer\n        \n          Dropdown\n        \n          Modal\n        \n          Popup\n        \n          Rating\n        \n          Shape\n        \n          Sidebar\n        \n          Transition\n        \n      
\n    
\n    
\n      Behavior\n      
\n        \n          Form Validation\n        \n      
\n    
\n    
\n      Style Guide\n      
\n        \n          CSS\n        \n          Javascript\n        \n          Language\n        \n      
\n    
\n\n  
\n\n  
\n    
\n       Content\n      
\n        UI Module: Accordion\n      
\n      \n      
\n      \n      
\n        1 of 10\n        
\n          \n            
\n              1. Accordion\n            
\n          \n            
\n              2. Checkbox\n            
\n          \n            
\n              3. Dimmer\n            
\n          \n            
\n              4. Dropdown\n            
\n          \n            
\n              5. Modal\n            
\n          \n            
\n              6. Popup\n            
\n          \n            
\n              7. Rating\n            
\n          \n            
\n              8. Shape\n            
\n          \n            
\n              9. Sidebar\n            
\n          \n            
\n              10. Transition\n            
\n          \n        
\n      
\n      \n      \n      \n      
\n        \n        
\n          \n        
\n        \n        \n\n        \n          \n        \n        \n          \n        \n        \n        \n          \n        \n        \n      
\n    
\n  
\n    
\n      \n      Menu\n    
\n  \n\n\n\n
\n  
\n    
\n\n      
\n        Accordion\n        \n      
\n\n      
An accordion displays a single piece of content, while allowing the option of displaying other related content
\n      \n      \n      \n        Learn about Modules\n        \n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n    \n    \n    \n    \n      \n        \n      \n        \n      \n        \n      \n        \n      \n      
\n        \n          Definition\n          \n        \n          Examples\n          \n        \n          Usage\n          \n        \n          Settings\n          \n        \n      
\n      \n      
\n        \n          Definition\n          \n        \n          Examples\n          \n        \n          Usage\n          \n        \n          Settings\n          \n        \n      
\n    \n  
\n
\n\n
\n\n  
\n\n    
\n      
\n        Types\n        Variations\n      
\n    
\n\n    
Types
\n    
\n      
Accordion
\n      
A standard accordion
\n      
\n        
\n          \n          What is a dog?\n        
\n        
\n          
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
\n        
\n        
\n          \n          What kinds of dogs are there?\n        
\n        
\n          
There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.
\n        
\n        
\n          \n          How do you acquire a dog?\n        
\n        
\n          
Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.
\n          
A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.
\n        
\n      
\n    
\n\n    
\n      
Basic
\n      
A basic accordion does not add any extra formatting
\n      
\n        
\n          \n          What is a dog?\n        
\n        
\n          
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
\n        
\n        
\n          \n          What kinds of dogs are there?\n        
\n        
\n          
There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.
\n        
\n        
\n          \n          How do you acquire a dog?\n        
\n        
\n          
Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.
\n          
A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.
\n        
\n      
\n    
\n\n    
Variations
\n    
\n      
Fluid
\n      
An accordion can take up the width of its container
\n      
\n        
\n          \n          What is a dog?\n        
\n        
\n          
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
\n        
\n        
\n          \n          What kinds of dogs are there?\n        
\n        
\n          
There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.
\n        
\n        
\n          \n          How do you acquire a dog?\n        
\n        
\n          
Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.
\n          
A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.
\n        
\n      
\n    
\n\n  
\n\n  
\n\n    
Examples
\n\n    
\n      
Nested
\n      
An accordion can have multiple levels of nested content. This content can either be in a nested accordion or simply another level of title and content
\n      
\n        
\n          \n          Level 1\n        
\n        
\n          
Welcome to level 1 where sub content formatted as its own accordion.
\n          
\n            
\n                \n                Level 1A\n            
\n            
\n              
Level 1A Contents
\n              
\n                
\n                    \n                    Level 1A-A\n                
\n                
\n                    Level 1A-A Contents\n                
\n                
\n                    \n                    Level 1A-B\n                
\n                
\n                    Level 1A-B Contents\n                
\n              
\n            
\n            
\n                \n                Level 1B\n            
\n            
\n                Level 1B Contents\n            
\n            
\n                \n                Level 1C\n            
\n            
\n                Level 1C Contents\n            
\n          
\n        
\n        
\n          \n          Level 2\n        
\n        
\n          
Welcome to level 2 where content is formatted without nested accordions
\n          
\n            \n            Level 2A\n          
\n          
\n            
Level 2A Contents
\n            
\n                \n                Level 2A-A\n            
\n            
\n                Level 2A-A Contents\n            
\n            
\n                \n                Level 2A-B\n            
\n            
\n                Level 2A-B Contents\n            
\n          
\n          
\n              \n              Level 2B\n          
\n          
\n              Level 2B Contents\n          
\n          
\n              \n              Level 2C\n          
\n          
\n              Level 2C Contents\n          
\n        
\n        
\n      
\n    
\n\n    
\n      
Form
\n      
An accordion can be used anywhere where content can be shown or hidden. For example, to show optional form fields.
\n      
\n        
\n          
\n            
\n              \n              \n            
\n            
\n              \n              \n            
\n          
\n          
\n            
\n              \n              Optional Details\n            
\n            
\n              \n              \n            
\n          
\n          
Sign Up
\n        
\n      
\n    
\n    
\n      
Menu
\n      
An accordion can be used to create content drawers inside a menu
\n      
\n        
\n          \n            \n            Size\n          \n          
\n            
\n              
\n                
\n                  
\n                    \n                    \n                  
\n                
\n                
\n                  
\n                    \n                    \n                  
\n                
\n                
\n                  
\n                    \n                    \n                  
\n                
\n                
\n                  
\n                    \n                    \n                  
\n                
\n              
\n            
\n          
\n        
\n        
\n          \n            \n            Colors\n          \n          
\n            
\n              
\n                
\n                  
\n                    \n                    \n                  
\n                
\n                
\n                  
\n                    \n                    \n                  
\n                
\n                
\n                  
\n                    \n                    \n                  
\n                
\n                
\n                  
\n                    \n                    \n                  
\n                
\n              
\n            
\n          
\n        
\n      
\n    
\n  
\n  
\n\n    
Initializing
\n    
Initializing an accordion
\n    
\n    $('.ui.accordion')\n      .accordion()\n    ;\n    
\n\n    
Behaviors
\n\n    
Behaviors are accessible with javascript using the syntax:
\n    
\n    $('.ui.accordion').accordion('behavior', argumentOne, argumentTwo...);\n    
\n\n    \n      \n        \n        \n      \n      \n        \n        \n      \n      \n        \n        \n      \n    
open (index)Opens accordion content at index
close (index)Closes accordion content at index
toggle (index)Toggles accordion content at index
\n\n  
\n\n  
\n\n    
\n      Accordion Settings\n      
Accordion settings modify its behavior
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
exclusivetrueSet to false to allow multiple sections to be open at the same time
collapsibletrueSet to false to require an accordion to always have a section open
duration500Duration in ms of opening animation
easingeaseInOutQuintEaseInOutQuint is included with accordion, for additional options consider jQuery easing)
\n\n    
\n      Callbacks\n      
Callbacks specify a function to occur after a specific behavior.
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingContextDescription
onOpenactive contentCallback on element open
onCloseactive contentCallback on element close
onChangeactive contentCallback on element open or close
\n\n    
\n      DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
namespaceaccordionEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n            
\n            {\n              title   : '.title',\n              content : '.content'\n            }\n            
\n          		Object containing selectors used by module.
className\n            
\n            className : {\n              active : 'active'\n            }\n            
\n          		Class names used to attach style to state
\n\n    
\n      Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
nameAccordionName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
errors\n            
\n            error   : {\n              method   : 'The method you called is not defined.',\n              notFound : 'There were no elements that matched the specified selector'\n            }\n            
\n          
\n  
\n
\n\n\n",
      "contentRenderedWithoutLayouts": "\n\n\n\n
\n  
\n    
\n\n      
\n        Accordion\n        \n      
\n\n      
An accordion displays a single piece of content, while allowing the option of displaying other related content
\n      \n      \n      \n        Learn about Modules\n        \n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n    \n    \n    \n    \n      \n        \n      \n        \n      \n        \n      \n        \n      \n      
\n        \n          Definition\n          \n        \n          Examples\n          \n        \n          Usage\n          \n        \n          Settings\n          \n        \n      
\n      \n      
\n        \n          Definition\n          \n        \n          Examples\n          \n        \n          Usage\n          \n        \n          Settings\n          \n        \n      
\n    \n  
\n
\n\n
\n\n  
\n\n    
\n      
\n        Types\n        Variations\n      
\n    
\n\n    
Types
\n    
\n      
Accordion
\n      
A standard accordion
\n      
\n        
\n          \n          What is a dog?\n        
\n        
\n          
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
\n        
\n        
\n          \n          What kinds of dogs are there?\n        
\n        
\n          
There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.
\n        
\n        
\n          \n          How do you acquire a dog?\n        
\n        
\n          
Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.
\n          
A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.
\n        
\n      
\n    
\n\n    
\n      
Basic
\n      
A basic accordion does not add any extra formatting
\n      
\n        
\n          \n          What is a dog?\n        
\n        
\n          
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
\n        
\n        
\n          \n          What kinds of dogs are there?\n        
\n        
\n          
There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.
\n        
\n        
\n          \n          How do you acquire a dog?\n        
\n        
\n          
Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.
\n          
A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.
\n        
\n      
\n    
\n\n    
Variations
\n    
\n      
Fluid
\n      
An accordion can take up the width of its container
\n      
\n        
\n          \n          What is a dog?\n        
\n        
\n          
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
\n        
\n        
\n          \n          What kinds of dogs are there?\n        
\n        
\n          
There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.
\n        
\n        
\n          \n          How do you acquire a dog?\n        
\n        
\n          
Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.
\n          
A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.
\n        
\n      
\n    
\n\n  
\n\n  
\n\n    
Examples
\n\n    
\n      
Nested
\n      
An accordion can have multiple levels of nested content. This content can either be in a nested accordion or simply another level of title and content
\n      
\n        
\n          \n          Level 1\n        
\n        
\n          
Welcome to level 1 where sub content formatted as its own accordion.
\n          
\n            
\n                \n                Level 1A\n            
\n            
\n              
Level 1A Contents
\n              
\n                
\n                    \n                    Level 1A-A\n                
\n                
\n                    Level 1A-A Contents\n                
\n                
\n                    \n                    Level 1A-B\n                
\n                
\n                    Level 1A-B Contents\n                
\n              
\n            
\n            
\n                \n                Level 1B\n            
\n            
\n                Level 1B Contents\n            
\n            
\n                \n                Level 1C\n            
\n            
\n                Level 1C Contents\n            
\n          
\n        
\n        
\n          \n          Level 2\n        
\n        
\n          
Welcome to level 2 where content is formatted without nested accordions
\n          
\n            \n            Level 2A\n          
\n          
\n            
Level 2A Contents
\n            
\n                \n                Level 2A-A\n            
\n            
\n                Level 2A-A Contents\n            
\n            
\n                \n                Level 2A-B\n            
\n            
\n                Level 2A-B Contents\n            
\n          
\n          
\n              \n              Level 2B\n          
\n          
\n              Level 2B Contents\n          
\n          
\n              \n              Level 2C\n          
\n          
\n              Level 2C Contents\n          
\n        
\n        
\n      
\n    
\n\n    
\n      
Form
\n      
An accordion can be used anywhere where content can be shown or hidden. For example, to show optional form fields.
\n      
\n        
\n          
\n            
\n              \n              \n            
\n            
\n              \n              \n            
\n          
\n          
\n            
\n              \n              Optional Details\n            
\n            
\n              \n              \n            
\n          
\n          
Sign Up
\n        
\n      
\n    
\n    
\n      
Menu
\n      
An accordion can be used to create content drawers inside a menu
\n      
\n        
\n          \n            \n            Size\n          \n          
\n            
\n              
\n                
\n                  
\n                    \n                    \n                  
\n                
\n                
\n                  
\n                    \n                    \n                  
\n                
\n                
\n                  
\n                    \n                    \n                  
\n                
\n                
\n                  
\n                    \n                    \n                  
\n                
\n              
\n            
\n          
\n        
\n        
\n          \n            \n            Colors\n          \n          
\n            
\n              
\n                
\n                  
\n                    \n                    \n                  
\n                
\n                
\n                  
\n                    \n                    \n                  
\n                
\n                
\n                  
\n                    \n                    \n                  
\n                
\n                
\n                  
\n                    \n                    \n                  
\n                
\n              
\n            
\n          
\n        
\n      
\n    
\n  
\n  
\n\n    
Initializing
\n    
Initializing an accordion
\n    
\n    $('.ui.accordion')\n      .accordion()\n    ;\n    
\n\n    
Behaviors
\n\n    
Behaviors are accessible with javascript using the syntax:
\n    
\n    $('.ui.accordion').accordion('behavior', argumentOne, argumentTwo...);\n    
\n\n    \n      \n        \n        \n      \n      \n        \n        \n      \n      \n        \n        \n      \n    
open (index)Opens accordion content at index
close (index)Closes accordion content at index
toggle (index)Toggles accordion content at index
\n\n  
\n\n  
\n\n    
\n      Accordion Settings\n      
Accordion settings modify its behavior
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
exclusivetrueSet to false to allow multiple sections to be open at the same time
collapsibletrueSet to false to require an accordion to always have a section open
duration500Duration in ms of opening animation
easingeaseInOutQuintEaseInOutQuint is included with accordion, for additional options consider jQuery easing)
\n\n    
\n      Callbacks\n      
Callbacks specify a function to occur after a specific behavior.
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingContextDescription
onOpenactive contentCallback on element open
onCloseactive contentCallback on element close
onChangeactive contentCallback on element open or close
\n\n    
\n      DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
namespaceaccordionEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n            
\n            {\n              title   : '.title',\n              content : '.content'\n            }\n            
\n          		Object containing selectors used by module.
className\n            
\n            className : {\n              active : 'active'\n            }\n            
\n          		Class names used to attach style to state
\n\n    
\n      Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
nameAccordionName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
errors\n            
\n            error   : {\n              method   : 'The method you called is not defined.',\n              notFound : 'There were no elements that matched the specified selector'\n            }\n            
\n          
\n  
\n
",
      "renderSingleExtensions": false,
      "layout": "default",
      "css": "accordion",
      "description": "An accordion displays a single piece of content, while allowing the option of displaying other related content",
      "type": "UI Module",
      "layoutRelativePath": "default.html.eco",
      "meta": {
        "layout": "default",
        "css": "accordion",
        "title": "Accordion",
        "description": "An accordion displays a single piece of content, while allowing the option of displaying other related content",
        "type": "UI Module"
      }
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/documents/modules/checkbox.html.eco",
      "relativePath": "modules/checkbox.html.eco",
      "basename": "checkbox",
      "outBasename": "checkbox",
      "extension": "eco",
      "outExtension": "html",
      "extensions": [
        "html",
        "eco"
      ],
      "filename": "checkbox.html.eco",
      "fullDirPath": "/home/jack/projects/semantic/server/documents/modules",
      "outPath": "/home/jack/projects/semantic/docs/modules/checkbox.html",
      "outDirPath": "/home/jack/projects/semantic/docs/modules",
      "outFilename": "checkbox.html",
      "relativeOutPath": "modules/checkbox.html",
      "relativeDirPath": "modules",
      "relativeOutDirPath": "modules",
      "relativeBase": "modules/checkbox",
      "relativeOutBase": "modules/checkbox",
      "contentType": "application/octet-stream",
      "outContentType": "text/html",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": "2013-12-04T09:15:26.202Z",
      "wtime": "2013-12-04T09:15:28.714Z",
      "exists": true,
      "encoding": "utf8",
      "source": "---\nlayout      : 'default'\ncss         : 'checkbox'\n\ntitle       : 'Checkbox'\ndescription : \"A checkbox visually indicates the status of a user's selection\"\ntype        : 'UI Module'\n---\n\n\n<%- @partial('header', { tabs: 'module' }) %>\n\n
\n\n  
\n\n    
\n      
\n        Types\n        Variations\n      
\n    
\n\n    
Types
\n\n    
\n      
Checkbox
\n      
A standard checkbox
\n      
\n        \n        \n      
\n    
\n\n    
\n      
Slider
\n      
A checkbox can be formatted to show user selection as a slider
\n      
\n        \n        \n      
\n    
\n\n    
\n      
Toggle
\n      
A checkbox can be formatted to show user selection as a toggle
\n      
\n        \n        \n      
\n    
\n\n\n\n    
\n      
Radio Box
\n      
A checkbox can be formatted as a radio element. This means it is an exclusive option.
\n      
\n        
\n          
\n            
\n              \n              \n            
\n          
\n          
\n            
\n              \n              \n            
\n          
\n          
\n            
\n              \n              \n            
\n          
\n          
\n            
\n              \n              \n            
\n          
\n        
\n      
\n    
\n\n    
Variations
\n\n    
\n      
Size
\n      
A checkbox can be a different size.
\n      
\n        \n        \n      
\n    
\n    
\n      
\n        \n        \n      
\n    
\n\n  
\n\n  
\n\n    
Check Box
\n    
A checkbox can be initialized with javascript for increase programmatic control
\n\n    
\n    $('.ui.checkbox')\n      .checkbox()\n    ;\n    
\n    
\n      
\n        \n        \n      
\n    
\n\n    
Check Box without Javascript
\n    
A checkbox can also be used without using javascript by matching the id attribute of the input field to the for attribute of the accompanying label
\n    
\n      
\n        \n        \n      
\n    
\n\n    
Behavior
\n    \n      \n        \n        \n      \n      \n        \n        \n      \n      \n        \n        \n      \n    
enableA checkbox can change to show a user has selected it
disableA checkbox can change to show a user has deselected it
toggleA checkbox can toggle its current selection state
\n\n\n  
\n\n  
\n\n    
Examples
\n\n    
\n      
Example of using checkbox states to alter multiple checkboxes
\n      
\n      $('.enable.button')\n        .on('click', function() {\n          $(this)\n            .nextAll('.checkbox')\n              .checkbox('enable')\n          ;\n        })\n      ;\n      $('.disable.button')\n        .on('click', function() {\n          $(this)\n            .nextAll('.checkbox')\n              .checkbox('disable')\n          ;\n        })\n      ;\n      $('.toggle.button')\n        .on('click', function() {\n          $(this)\n            .nextAll('.checkbox')\n              .checkbox('toggle')\n          ;\n        })\n      ;\n      
\n      
Toggle
\n      
Enable
\n      
Disable
\n      

\n      
\n        \n        
\n      
\n      
\n        \n        
\n      
\n      
\n        \n        
\n      
\n      
\n        \n        
\n      
\n      
\n        \n        
\n      
\n      
\n        \n        
\n      
\n      
\n        \n        
\n      
\n      
\n        \n        
\n      
\n      
\n        \n        
\n      
\n      
\n        \n        
\n      
\n    
\n  
\n\n  
\n\n    
\n      Checkbox Settings\n      
Checkbox settings modify its behavior
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
requiredautoSetting to true/false will determine whether an input will allow no selection. Auto will set disallow this behavior only for radio boxes
contextfalseA selector or jQuery object to use as a delegated event context
\n\n    
\n      Callbacks\n      
Callbacks specify a function to occur after a specific behavior.
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingContextDescription
onChangeCheckboxCallback after a checkbox is either disabled or enabled.
onEnableCheckboxCallback after a checkbox is enabled.
onDisableCheckboxCallback after a checkbox is disabled.
\n\n    
DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
namespacecheckboxEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n            
\n      selector : {\n        input  : 'input',\n        label  : 'label'\n      }\n            
\n          
className\n            
\n      className : {\n        radio  : 'radio'\n      }\n            
\n          
\n  
\n\n
",
      "content": "\n\n<%- @partial('header', { tabs: 'module' }) %>\n\n
\n\n  
\n\n    
\n      
\n        Types\n        Variations\n      
\n    
\n\n    
Types
\n\n    
\n      
Checkbox
\n      
A standard checkbox
\n      
\n        \n        \n      
\n    
\n\n    
\n      
Slider
\n      
A checkbox can be formatted to show user selection as a slider
\n      
\n        \n        \n      
\n    
\n\n    
\n      
Toggle
\n      
A checkbox can be formatted to show user selection as a toggle
\n      
\n        \n        \n      
\n    
\n\n\n\n    
\n      
Radio Box
\n      
A checkbox can be formatted as a radio element. This means it is an exclusive option.
\n      
\n        
\n          
\n            
\n              \n              \n            
\n          
\n          
\n            
\n              \n              \n            
\n          
\n          
\n            
\n              \n              \n            
\n          
\n          
\n            
\n              \n              \n            
\n          
\n        
\n      
\n    
\n\n    
Variations
\n\n    
\n      
Size
\n      
A checkbox can be a different size.
\n      
\n        \n        \n      
\n    
\n    
\n      
\n        \n        \n      
\n    
\n\n  
\n\n  
\n\n    
Check Box
\n    
A checkbox can be initialized with javascript for increase programmatic control
\n\n    
\n    $('.ui.checkbox')\n      .checkbox()\n    ;\n    
\n    
\n      
\n        \n        \n      
\n    
\n\n    
Check Box without Javascript
\n    
A checkbox can also be used without using javascript by matching the id attribute of the input field to the for attribute of the accompanying label
\n    
\n      
\n        \n        \n      
\n    
\n\n    
Behavior
\n    \n      \n        \n        \n      \n      \n        \n        \n      \n      \n        \n        \n      \n    
enableA checkbox can change to show a user has selected it
disableA checkbox can change to show a user has deselected it
toggleA checkbox can toggle its current selection state
\n\n\n  
\n\n  
\n\n    
Examples
\n\n    
\n      
Example of using checkbox states to alter multiple checkboxes
\n      
\n      $('.enable.button')\n        .on('click', function() {\n          $(this)\n            .nextAll('.checkbox')\n              .checkbox('enable')\n          ;\n        })\n      ;\n      $('.disable.button')\n        .on('click', function() {\n          $(this)\n            .nextAll('.checkbox')\n              .checkbox('disable')\n          ;\n        })\n      ;\n      $('.toggle.button')\n        .on('click', function() {\n          $(this)\n            .nextAll('.checkbox')\n              .checkbox('toggle')\n          ;\n        })\n      ;\n      
\n      
Toggle
\n      
Enable
\n      
Disable
\n      

\n      
\n        \n        
\n      
\n      
\n        \n        
\n      
\n      
\n        \n        
\n      
\n      
\n        \n        
\n      
\n      
\n        \n        
\n      
\n      
\n        \n        
\n      
\n      
\n        \n        
\n      
\n      
\n        \n        
\n      
\n      
\n        \n        
\n      
\n      
\n        \n        
\n      
\n    
\n  
\n\n  
\n\n    
\n      Checkbox Settings\n      
Checkbox settings modify its behavior
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
requiredautoSetting to true/false will determine whether an input will allow no selection. Auto will set disallow this behavior only for radio boxes
contextfalseA selector or jQuery object to use as a delegated event context
\n\n    
\n      Callbacks\n      
Callbacks specify a function to occur after a specific behavior.
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingContextDescription
onChangeCheckboxCallback after a checkbox is either disabled or enabled.
onEnableCheckboxCallback after a checkbox is enabled.
onDisableCheckboxCallback after a checkbox is disabled.
\n\n    
DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
namespacecheckboxEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n            
\n      selector : {\n        input  : 'input',\n        label  : 'label'\n      }\n            
\n          
className\n            
\n      className : {\n        radio  : 'radio'\n      }\n            
\n          
\n  
\n\n
",
      "tags": null,
      "render": true,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": "Checkbox",
      "name": "checkbox.html",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "modules-checkbox",
      "url": "/modules/checkbox.html",
      "urls": [
        "/modules/checkbox.html"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": true,
      "header": "layout      : 'default'\ncss         : 'checkbox'\n\ntitle       : 'Checkbox'\ndescription : \"A checkbox visually indicates the status of a user's selection\"\ntype        : 'UI Module'",
      "parser": "yaml",
      "body": "\n\n<%- @partial('header', { tabs: 'module' }) %>\n\n
\n\n  
\n\n    
\n      
\n        Types\n        Variations\n      
\n    
\n\n    
Types
\n\n    
\n      
Checkbox
\n      
A standard checkbox
\n      
\n        \n        \n      
\n    
\n\n    
\n      
Slider
\n      
A checkbox can be formatted to show user selection as a slider
\n      
\n        \n        \n      
\n    
\n\n    
\n      
Toggle
\n      
A checkbox can be formatted to show user selection as a toggle
\n      
\n        \n        \n      
\n    
\n\n\n\n    
\n      
Radio Box
\n      
A checkbox can be formatted as a radio element. This means it is an exclusive option.
\n      
\n        
\n          
\n            
\n              \n              \n            
\n          
\n          
\n            
\n              \n              \n            
\n          
\n          
\n            
\n              \n              \n            
\n          
\n          
\n            
\n              \n              \n            
\n          
\n        
\n      
\n    
\n\n    
Variations
\n\n    
\n      
Size
\n      
A checkbox can be a different size.
\n      
\n        \n        \n      
\n    
\n    
\n      
\n        \n        \n      
\n    
\n\n  
\n\n  
\n\n    
Check Box
\n    
A checkbox can be initialized with javascript for increase programmatic control
\n\n    
\n    $('.ui.checkbox')\n      .checkbox()\n    ;\n    
\n    
\n      
\n        \n        \n      
\n    
\n\n    
Check Box without Javascript
\n    
A checkbox can also be used without using javascript by matching the id attribute of the input field to the for attribute of the accompanying label
\n    
\n      
\n        \n        \n      
\n    
\n\n    
Behavior
\n    \n      \n        \n        \n      \n      \n        \n        \n      \n      \n        \n        \n      \n    
enableA checkbox can change to show a user has selected it
disableA checkbox can change to show a user has deselected it
toggleA checkbox can toggle its current selection state
\n\n\n  
\n\n  
\n\n    
Examples
\n\n    
\n      
Example of using checkbox states to alter multiple checkboxes
\n      
\n      $('.enable.button')\n        .on('click', function() {\n          $(this)\n            .nextAll('.checkbox')\n              .checkbox('enable')\n          ;\n        })\n      ;\n      $('.disable.button')\n        .on('click', function() {\n          $(this)\n            .nextAll('.checkbox')\n              .checkbox('disable')\n          ;\n        })\n      ;\n      $('.toggle.button')\n        .on('click', function() {\n          $(this)\n            .nextAll('.checkbox')\n              .checkbox('toggle')\n          ;\n        })\n      ;\n      
\n      
Toggle
\n      
Enable
\n      
Disable
\n      

\n      
\n        \n        
\n      
\n      
\n        \n        
\n      
\n      
\n        \n        
\n      
\n      
\n        \n        
\n      
\n      
\n        \n        
\n      
\n      
\n        \n        
\n      
\n      
\n        \n        
\n      
\n      
\n        \n        
\n      
\n      
\n        \n        
\n      
\n      
\n        \n        
\n      
\n    
\n  
\n\n  
\n\n    
\n      Checkbox Settings\n      
Checkbox settings modify its behavior
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
requiredautoSetting to true/false will determine whether an input will allow no selection. Auto will set disallow this behavior only for radio boxes
contextfalseA selector or jQuery object to use as a delegated event context
\n\n    
\n      Callbacks\n      
Callbacks specify a function to occur after a specific behavior.
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingContextDescription
onChangeCheckboxCallback after a checkbox is either disabled or enabled.
onEnableCheckboxCallback after a checkbox is enabled.
onDisableCheckboxCallback after a checkbox is disabled.
\n\n    
DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
namespacecheckboxEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n            
\n      selector : {\n        input  : 'input',\n        label  : 'label'\n      }\n            
\n          
className\n            
\n      className : {\n        radio  : 'radio'\n      }\n            
\n          
\n  
\n\n
",
      "rendered": true,
      "contentRendered": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  \n  \n  \n  \n\n  \n\n  \n  \n  Checkbox | Semantic UI\n\n  \n  \n\n  \n\n  \n  \n  \n\n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n\n  \n  \n\n\n  
\n    \n       Close Menu\n    \n    \n       Download\n    \n    
\n      \n        Introduction\n      \n      
\n        \n          Definitions\n        \n          Overview\n        \n          Types\n        \n          Variations\n        \n          What's Different\n        \n      
\n    
\n    
\n      Project\n      
\n        \n          Contributing\n        \n          Set-up\n        \n      
\n    
\n    
\n      Elements\n      
\n        \n          Button\n        \n          Divider\n        \n          Header\n        \n          Icon\n        \n          Image\n        \n          Input\n        \n          Label\n        \n          Loader\n        \n          Progress\n        \n          Reveal\n        \n          Segment\n        \n          Step\n        \n      
\n    
\n    
\n      Collections\n      
\n        \n          Breadcrumb\n        \n          Form\n        \n          Grid\n        \n          Menu\n        \n          Message\n        \n          Table\n        \n      
\n    
\n    
\n      Views\n      
\n        \n          Comment\n        \n          Feed\n        \n          Item\n        \n          List\n        \n      
\n    
\n    
\n      Modules\n      
\n        \n          Accordion\n        \n          Checkbox\n        \n          Dimmer\n        \n          Dropdown\n        \n          Modal\n        \n          Popup\n        \n          Rating\n        \n          Shape\n        \n          Sidebar\n        \n          Transition\n        \n      
\n    
\n    
\n      Behavior\n      
\n        \n          Form Validation\n        \n      
\n    
\n    
\n      Style Guide\n      
\n        \n          CSS\n        \n          Javascript\n        \n          Language\n        \n      
\n    
\n\n  
\n\n  
\n    
\n       Content\n      
\n        UI Module: Checkbox\n      
\n      \n      \n      \n      
\n        2 of 10\n        
\n          \n            
\n              1. Accordion\n            
\n          \n            
\n              2. Checkbox\n            
\n          \n            
\n              3. Dimmer\n            
\n          \n            
\n              4. Dropdown\n            
\n          \n            
\n              5. Modal\n            
\n          \n            
\n              6. Popup\n            
\n          \n            
\n              7. Rating\n            
\n          \n            
\n              8. Shape\n            
\n          \n            
\n              9. Sidebar\n            
\n          \n            
\n              10. Transition\n            
\n          \n        
\n      
\n      \n      \n      \n      
\n        \n        
\n          \n        
\n        \n        \n\n        \n          \n        \n        \n          \n        \n        \n        \n          \n        \n        \n      
\n    
\n  
\n    
\n      \n      Menu\n    
\n  \n\n\n\n
\n  
\n    
\n\n      
\n        Checkbox\n        \n      
\n\n      
A checkbox visually indicates the status of a user's selection
\n      \n      \n      \n        Learn about Modules\n        \n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n    \n    \n    \n    \n      \n        \n      \n        \n      \n        \n      \n        \n      \n      
\n        \n          Definition\n          \n        \n          Examples\n          \n        \n          Usage\n          \n        \n          Settings\n          \n        \n      
\n      \n      
\n        \n          Definition\n          \n        \n          Examples\n          \n        \n          Usage\n          \n        \n          Settings\n          \n        \n      
\n    \n  
\n
\n\n
\n\n  
\n\n    
\n      
\n        Types\n        Variations\n      
\n    
\n\n    
Types
\n\n    
\n      
Checkbox
\n      
A standard checkbox
\n      
\n        \n        \n      
\n    
\n\n    
\n      
Slider
\n      
A checkbox can be formatted to show user selection as a slider
\n      
\n        \n        \n      
\n    
\n\n    
\n      
Toggle
\n      
A checkbox can be formatted to show user selection as a toggle
\n      
\n        \n        \n      
\n    
\n\n\n\n    
\n      
Radio Box
\n      
A checkbox can be formatted as a radio element. This means it is an exclusive option.
\n      
\n        
\n          
\n            
\n              \n              \n            
\n          
\n          
\n            
\n              \n              \n            
\n          
\n          
\n            
\n              \n              \n            
\n          
\n          
\n            
\n              \n              \n            
\n          
\n        
\n      
\n    
\n\n    
Variations
\n\n    
\n      
Size
\n      
A checkbox can be a different size.
\n      
\n        \n        \n      
\n    
\n    
\n      
\n        \n        \n      
\n    
\n\n  
\n\n  
\n\n    
Check Box
\n    
A checkbox can be initialized with javascript for increase programmatic control
\n\n    
\n    $('.ui.checkbox')\n      .checkbox()\n    ;\n    
\n    
\n      
\n        \n        \n      
\n    
\n\n    
Check Box without Javascript
\n    
A checkbox can also be used without using javascript by matching the id attribute of the input field to the for attribute of the accompanying label
\n    
\n      
\n        \n        \n      
\n    
\n\n    
Behavior
\n    \n      \n        \n        \n      \n      \n        \n        \n      \n      \n        \n        \n      \n    
enableA checkbox can change to show a user has selected it
disableA checkbox can change to show a user has deselected it
toggleA checkbox can toggle its current selection state
\n\n\n  
\n\n  
\n\n    
Examples
\n\n    
\n      
Example of using checkbox states to alter multiple checkboxes
\n      
\n      $('.enable.button')\n        .on('click', function() {\n          $(this)\n            .nextAll('.checkbox')\n              .checkbox('enable')\n          ;\n        })\n      ;\n      $('.disable.button')\n        .on('click', function() {\n          $(this)\n            .nextAll('.checkbox')\n              .checkbox('disable')\n          ;\n        })\n      ;\n      $('.toggle.button')\n        .on('click', function() {\n          $(this)\n            .nextAll('.checkbox')\n              .checkbox('toggle')\n          ;\n        })\n      ;\n      
\n      
Toggle
\n      
Enable
\n      
Disable
\n      

\n      
\n        \n        
\n      
\n      
\n        \n        
\n      
\n      
\n        \n        
\n      
\n      
\n        \n        
\n      
\n      
\n        \n        
\n      
\n      
\n        \n        
\n      
\n      
\n        \n        
\n      
\n      
\n        \n        
\n      
\n      
\n        \n        
\n      
\n      
\n        \n        
\n      
\n    
\n  
\n\n  
\n\n    
\n      Checkbox Settings\n      
Checkbox settings modify its behavior
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
requiredautoSetting to true/false will determine whether an input will allow no selection. Auto will set disallow this behavior only for radio boxes
contextfalseA selector or jQuery object to use as a delegated event context
\n\n    
\n      Callbacks\n      
Callbacks specify a function to occur after a specific behavior.
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingContextDescription
onChangeCheckboxCallback after a checkbox is either disabled or enabled.
onEnableCheckboxCallback after a checkbox is enabled.
onDisableCheckboxCallback after a checkbox is disabled.
\n\n    
DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
namespacecheckboxEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n            
\n      selector : {\n        input  : 'input',\n        label  : 'label'\n      }\n            
\n          
className\n            
\n      className : {\n        radio  : 'radio'\n      }\n            
\n          
\n  
\n\n
\n\n\n",
      "contentRenderedWithoutLayouts": "\n\n\n\n
\n  
\n    
\n\n      
\n        Checkbox\n        \n      
\n\n      
A checkbox visually indicates the status of a user's selection
\n      \n      \n      \n        Learn about Modules\n        \n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n    \n    \n    \n    \n      \n        \n      \n        \n      \n        \n      \n        \n      \n      
\n        \n          Definition\n          \n        \n          Examples\n          \n        \n          Usage\n          \n        \n          Settings\n          \n        \n      
\n      \n      
\n        \n          Definition\n          \n        \n          Examples\n          \n        \n          Usage\n          \n        \n          Settings\n          \n        \n      
\n    \n  
\n
\n\n
\n\n  
\n\n    
\n      
\n        Types\n        Variations\n      
\n    
\n\n    
Types
\n\n    
\n      
Checkbox
\n      
A standard checkbox
\n      
\n        \n        \n      
\n    
\n\n    
\n      
Slider
\n      
A checkbox can be formatted to show user selection as a slider
\n      
\n        \n        \n      
\n    
\n\n    
\n      
Toggle
\n      
A checkbox can be formatted to show user selection as a toggle
\n      
\n        \n        \n      
\n    
\n\n\n\n    
\n      
Radio Box
\n      
A checkbox can be formatted as a radio element. This means it is an exclusive option.
\n      
\n        
\n          
\n            
\n              \n              \n            
\n          
\n          
\n            
\n              \n              \n            
\n          
\n          
\n            
\n              \n              \n            
\n          
\n          
\n            
\n              \n              \n            
\n          
\n        
\n      
\n    
\n\n    
Variations
\n\n    
\n      
Size
\n      
A checkbox can be a different size.
\n      
\n        \n        \n      
\n    
\n    
\n      
\n        \n        \n      
\n    
\n\n  
\n\n  
\n\n    
Check Box
\n    
A checkbox can be initialized with javascript for increase programmatic control
\n\n    
\n    $('.ui.checkbox')\n      .checkbox()\n    ;\n    
\n    
\n      
\n        \n        \n      
\n    
\n\n    
Check Box without Javascript
\n    
A checkbox can also be used without using javascript by matching the id attribute of the input field to the for attribute of the accompanying label
\n    
\n      
\n        \n        \n      
\n    
\n\n    
Behavior
\n    \n      \n        \n        \n      \n      \n        \n        \n      \n      \n        \n        \n      \n    
enableA checkbox can change to show a user has selected it
disableA checkbox can change to show a user has deselected it
toggleA checkbox can toggle its current selection state
\n\n\n  
\n\n  
\n\n    
Examples
\n\n    
\n      
Example of using checkbox states to alter multiple checkboxes
\n      
\n      $('.enable.button')\n        .on('click', function() {\n          $(this)\n            .nextAll('.checkbox')\n              .checkbox('enable')\n          ;\n        })\n      ;\n      $('.disable.button')\n        .on('click', function() {\n          $(this)\n            .nextAll('.checkbox')\n              .checkbox('disable')\n          ;\n        })\n      ;\n      $('.toggle.button')\n        .on('click', function() {\n          $(this)\n            .nextAll('.checkbox')\n              .checkbox('toggle')\n          ;\n        })\n      ;\n      
\n      
Toggle
\n      
Enable
\n      
Disable
\n      

\n      
\n        \n        
\n      
\n      
\n        \n        
\n      
\n      
\n        \n        
\n      
\n      
\n        \n        
\n      
\n      
\n        \n        
\n      
\n      
\n        \n        
\n      
\n      
\n        \n        
\n      
\n      
\n        \n        
\n      
\n      
\n        \n        
\n      
\n      
\n        \n        
\n      
\n    
\n  
\n\n  
\n\n    
\n      Checkbox Settings\n      
Checkbox settings modify its behavior
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
requiredautoSetting to true/false will determine whether an input will allow no selection. Auto will set disallow this behavior only for radio boxes
contextfalseA selector or jQuery object to use as a delegated event context
\n\n    
\n      Callbacks\n      
Callbacks specify a function to occur after a specific behavior.
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingContextDescription
onChangeCheckboxCallback after a checkbox is either disabled or enabled.
onEnableCheckboxCallback after a checkbox is enabled.
onDisableCheckboxCallback after a checkbox is disabled.
\n\n    
DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
namespacecheckboxEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n            
\n      selector : {\n        input  : 'input',\n        label  : 'label'\n      }\n            
\n          
className\n            
\n      className : {\n        radio  : 'radio'\n      }\n            
\n          
\n  
\n\n
",
      "renderSingleExtensions": false,
      "layout": "default",
      "css": "checkbox",
      "description": "A checkbox visually indicates the status of a user's selection",
      "type": "UI Module",
      "layoutRelativePath": "default.html.eco",
      "meta": {
        "layout": "default",
        "css": "checkbox",
        "title": "Checkbox",
        "description": "A checkbox visually indicates the status of a user's selection",
        "type": "UI Module"
      }
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/documents/modules/dimmer.html.eco",
      "relativePath": "modules/dimmer.html.eco",
      "basename": "dimmer",
      "outBasename": "dimmer",
      "extension": "eco",
      "outExtension": "html",
      "extensions": [
        "html",
        "eco"
      ],
      "filename": "dimmer.html.eco",
      "fullDirPath": "/home/jack/projects/semantic/server/documents/modules",
      "outPath": "/home/jack/projects/semantic/docs/modules/dimmer.html",
      "outDirPath": "/home/jack/projects/semantic/docs/modules",
      "outFilename": "dimmer.html",
      "relativeOutPath": "modules/dimmer.html",
      "relativeDirPath": "modules",
      "relativeOutDirPath": "modules",
      "relativeBase": "modules/dimmer",
      "relativeOutBase": "modules/dimmer",
      "contentType": "application/octet-stream",
      "outContentType": "text/html",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": "2013-12-04T09:15:26.267Z",
      "wtime": "2013-12-04T09:15:28.717Z",
      "exists": true,
      "encoding": "utf8",
      "source": "---\nlayout      : 'default'\ncss         : ''\n\ntitle       : 'Dimmer'\ndescription : \"Dimmers hide distractions to focus user's attention on particular content\"\ntype        : 'UI Module'\n---\n\n\n
\n  
\n    
\n      
\n        \n        You're all signed up for the weekly dog tips newsletter!\n        
Your first edition will be sent on January 22
\n      
\n    
\n  
\n
\n\n<%- @partial('header', { tabs: 'module' }) %>\n\n
\n\n  
\n\n    
\n      
\n        Types\n        States\n        Variations\n      
\n    
\n\n    
Types
\n\n    
\n      
Content Dimmer
\n      
A dimmer can display content
\n      
Content must be included inside .content .center to display centered correctly in the modal.
\n      
\n        
\n          Dog Photos\n        
\n        \n        \n        
\n          
\n            
\n              
\n                \n                Your poodle photo uploaded successfully!\n              
\n            
\n          
\n        
\n      
\n      
\n        
\n        
\n      
\n      
\n        
\n          
\n            
\n              
\n                \n                Your poodle photo uploaded successfully!\n              
\n            
\n          
\n        
\n      
\n    
\n\n    
\n      
Page Dimmer
\n      
A dimmer can be formatted to be fixed to the page
\n      
\n      
\n        
\n          
Hello
\n        
\n      
\n      
\n      
 Show
\n    
\n\n\n    
States
\n\n    
\n      
Active
\n      
An active dimmer will dim its parent container
\n      
\n        
\n      
\n    
\n\n    
\n      
Disabled
\n      
A disabled dimmer cannot be activated
\n      
\n        
\n      
\n    
\n\n    
Variations
\n\n    
Dimmer
\n    
\n      
Simple Dimmer
\n      
A dimmer can be controlled without javascript
\n      
Having any parent element receive the class ui dimmable dimmed will trigger the dimmer to display.
\n      
\n        
\n        
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
\n    
\n\n    
\n      
Inverted Dimmer
\n      
A dimmer can be formatted to have its colors inverted
\n      
\n        
\n        
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
\n      
\n        
\n        
\n      
\n    
\n  
\n  
\n\n    
\n      
Dimmer Events
\n      
A dimmer can trigger a visibility change on an event
\n      
\n      $('.event.example .image')\n        .dimmer({\n          on: 'hover'\n        })\n      ;\n      
\n      
\n        
\n          
\n            
\n              
Puppy
\n              
Vote
\n              View\n            
\n          
\n        
\n        \n      
\n      
\n        
\n          
\n            
\n              
Vote
\n              View\n            
\n          
\n        
\n        \n      
\n    
\n\n    
\n      
Loaders inside Dimmers
\n      
Any loader inside a dimmer will automatically use an appropriate color to match
\n      
\n        
\n          
Loading
\n        
\n        
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
\n      
\n        
\n        
\n      
\n    
\n\n  
\n\n  
\n\n    
Usage
\n\n    
Display
\n    
You can display a dimmer by either invoking dimmer show on a section or a dimmer itself. If you choose to dim a dimmable section, a dimmer will automatically be created.
\n    
\n    // these two are the same\n    $('.ui.dimmable)\n      .dimmer('show')\n    ;\n    $('.ui.dimmable .dimmer')\n      .dimmer('show')\n    ;\n    
\n\n    
Creating Dimmers
\n    
If a dimmer does not exist inside the element it will be created on first use.
\n    
\n      $('h3')\n        .dimmer('toggle')\n      ;\n    
\n    
Showing a specific dimmer
\n    
If a dimmer is already inside an element, you can call behavior on the dimmable section or the dimmer itself.
\n    
\n      // If a dimmer exists on a page, you can make it appear by calling it directly\n      $('.page.dimmer:first')\n        .dimmer('toggle')\n      ;\n    
\n\n    
Behavior
\n\n    
All the following behaviors can be called using the syntax:
\n    
\n    $('.your.element')\n      .dimmer('behavior name', argumentOne, argumentTwo)\n    ;\n    
\n\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
BehaviorDescription
add content (element)Detaches a given element from DOM and reattaches element inside dimmer
showShows dimmer
hideHides dimmer
toggleToggles current dimmer visibility
get durationReturns current duration for show or hide event depending on current visibility
get dimmerReturns DOM element for dimmer
has dimmerReturns whether current dimmable has a dimmer
is dimmerWhether current element is a dimmer
is dimmableWhether current element is a dimmable section
is activeWhether section's dimmer is active
is animatingWhether dimmer is animating
is pageWhether dimmable section is body
is enabledWhether dimmer is not disabled
is disabledWhether dimmer is disabled
is page dimmerWhether dimmer is a page dimmer
set activeSets page dimmer to active
set dimmableSets an element as a dimmable section
set dimmedSets a dimmable section as dimmed
set page dimmerSets current dimmer as a page dimmer
set disabledSets a dimmer as disabled
\n\n  
\n\n  
\n\n    
\n      Dimmer Settings\n      
Dimmer settings modify its behavior
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n    
SettingDefaultDescription
closabletrueWhether clicking on the dimmer should close it automatically
onfalseCan be set to hover or click to show/hide dimmer on dimmable event
duration\n            
\n      duration    : {\n        show : 500,\n        hide : 500\n      }\n            
\n          		Animation duration of dimming. If an integer is used, that value will apply to both show and hide animations.
transition\n            Fade\n          Named transition to use when animating menu in and out. Fade and slide down are available without including ui transitions
\n\n    
\n      Callbacks\n      
Callbacks specify a function to occur after a specific behavior.
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingContextDescription
onShowdimmableCallback on element show
onHidedimmableCallback on element hide
onChangedimmableCallback on element show or hide
\n\n    
\n      Templates\n      
Templates are used to generate DOM elements
\n    
\n\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n      \n    
GeneratesDefault
dimmer\n            
\n            function() {\n             return $('
').attr('class', 'ui dimmer');\n            }\n            
\n          
\n\n    
\n      DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
namespacedimmerEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n            
\n            selector: {\n              dimmable : '.ui.dimmable',\n              dimmer   : '.ui.dimmer',\n              content  : '.ui.dimmer > .content, .ui.dimmer > .content > .center'\n            }\n            
\n          		Object containing selectors used by module.
className\n            
\n            className : {\n              active     : 'active',\n              dimmable   : 'ui dimmable',\n              dimmed     : 'dimmed',\n              disabled   : 'disabled',\n              pageDimmer : 'page',\n              hide       : 'hide',\n              show       : 'show',\n              transition : 'transition'\n            }\n            
\n          		Class names used to attach style to state
\n\n    
\n      Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
nameDimmerName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
errors\n            
\n            error   : {\n              method   : 'The method you called is not defined.'\n            }\n            
\n          
\n\n  
\n\n
",
      "content": "\n
\n  
\n    
\n      
\n        \n        You're all signed up for the weekly dog tips newsletter!\n        
Your first edition will be sent on January 22
\n      
\n    
\n  
\n
\n\n<%- @partial('header', { tabs: 'module' }) %>\n\n
\n\n  
\n\n    
\n      
\n        Types\n        States\n        Variations\n      
\n    
\n\n    
Types
\n\n    
\n      
Content Dimmer
\n      
A dimmer can display content
\n      
Content must be included inside .content .center to display centered correctly in the modal.
\n      
\n        
\n          Dog Photos\n        
\n        \n        \n        
\n          
\n            
\n              
\n                \n                Your poodle photo uploaded successfully!\n              
\n            
\n          
\n        
\n      
\n      
\n        
\n        
\n      
\n      
\n        
\n          
\n            
\n              
\n                \n                Your poodle photo uploaded successfully!\n              
\n            
\n          
\n        
\n      
\n    
\n\n    
\n      
Page Dimmer
\n      
A dimmer can be formatted to be fixed to the page
\n      
\n      
\n        
\n          
Hello
\n        
\n      
\n      
\n      
 Show
\n    
\n\n\n    
States
\n\n    
\n      
Active
\n      
An active dimmer will dim its parent container
\n      
\n        
\n      
\n    
\n\n    
\n      
Disabled
\n      
A disabled dimmer cannot be activated
\n      
\n        
\n      
\n    
\n\n    
Variations
\n\n    
Dimmer
\n    
\n      
Simple Dimmer
\n      
A dimmer can be controlled without javascript
\n      
Having any parent element receive the class ui dimmable dimmed will trigger the dimmer to display.
\n      
\n        
\n        
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
\n    
\n\n    
\n      
Inverted Dimmer
\n      
A dimmer can be formatted to have its colors inverted
\n      
\n        
\n        
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
\n      
\n        
\n        
\n      
\n    
\n  
\n  
\n\n    
\n      
Dimmer Events
\n      
A dimmer can trigger a visibility change on an event
\n      
\n      $('.event.example .image')\n        .dimmer({\n          on: 'hover'\n        })\n      ;\n      
\n      
\n        
\n          
\n            
\n              
Puppy
\n              
Vote
\n              View\n            
\n          
\n        
\n        \n      
\n      
\n        
\n          
\n            
\n              
Vote
\n              View\n            
\n          
\n        
\n        \n      
\n    
\n\n    
\n      
Loaders inside Dimmers
\n      
Any loader inside a dimmer will automatically use an appropriate color to match
\n      
\n        
\n          
Loading
\n        
\n        
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
\n      
\n        
\n        
\n      
\n    
\n\n  
\n\n  
\n\n    
Usage
\n\n    
Display
\n    
You can display a dimmer by either invoking dimmer show on a section or a dimmer itself. If you choose to dim a dimmable section, a dimmer will automatically be created.
\n    
\n    // these two are the same\n    $('.ui.dimmable)\n      .dimmer('show')\n    ;\n    $('.ui.dimmable .dimmer')\n      .dimmer('show')\n    ;\n    
\n\n    
Creating Dimmers
\n    
If a dimmer does not exist inside the element it will be created on first use.
\n    
\n      $('h3')\n        .dimmer('toggle')\n      ;\n    
\n    
Showing a specific dimmer
\n    
If a dimmer is already inside an element, you can call behavior on the dimmable section or the dimmer itself.
\n    
\n      // If a dimmer exists on a page, you can make it appear by calling it directly\n      $('.page.dimmer:first')\n        .dimmer('toggle')\n      ;\n    
\n\n    
Behavior
\n\n    
All the following behaviors can be called using the syntax:
\n    
\n    $('.your.element')\n      .dimmer('behavior name', argumentOne, argumentTwo)\n    ;\n    
\n\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
BehaviorDescription
add content (element)Detaches a given element from DOM and reattaches element inside dimmer
showShows dimmer
hideHides dimmer
toggleToggles current dimmer visibility
get durationReturns current duration for show or hide event depending on current visibility
get dimmerReturns DOM element for dimmer
has dimmerReturns whether current dimmable has a dimmer
is dimmerWhether current element is a dimmer
is dimmableWhether current element is a dimmable section
is activeWhether section's dimmer is active
is animatingWhether dimmer is animating
is pageWhether dimmable section is body
is enabledWhether dimmer is not disabled
is disabledWhether dimmer is disabled
is page dimmerWhether dimmer is a page dimmer
set activeSets page dimmer to active
set dimmableSets an element as a dimmable section
set dimmedSets a dimmable section as dimmed
set page dimmerSets current dimmer as a page dimmer
set disabledSets a dimmer as disabled
\n\n  
\n\n  
\n\n    
\n      Dimmer Settings\n      
Dimmer settings modify its behavior
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n    
SettingDefaultDescription
closabletrueWhether clicking on the dimmer should close it automatically
onfalseCan be set to hover or click to show/hide dimmer on dimmable event
duration\n            
\n      duration    : {\n        show : 500,\n        hide : 500\n      }\n            
\n          		Animation duration of dimming. If an integer is used, that value will apply to both show and hide animations.
transition\n            Fade\n          Named transition to use when animating menu in and out. Fade and slide down are available without including ui transitions
\n\n    
\n      Callbacks\n      
Callbacks specify a function to occur after a specific behavior.
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingContextDescription
onShowdimmableCallback on element show
onHidedimmableCallback on element hide
onChangedimmableCallback on element show or hide
\n\n    
\n      Templates\n      
Templates are used to generate DOM elements
\n    
\n\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n      \n    
GeneratesDefault
dimmer\n            
\n            function() {\n             return $('
').attr('class', 'ui dimmer');\n            }\n            
\n          
\n\n    
\n      DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
namespacedimmerEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n            
\n            selector: {\n              dimmable : '.ui.dimmable',\n              dimmer   : '.ui.dimmer',\n              content  : '.ui.dimmer > .content, .ui.dimmer > .content > .center'\n            }\n            
\n          		Object containing selectors used by module.
className\n            
\n            className : {\n              active     : 'active',\n              dimmable   : 'ui dimmable',\n              dimmed     : 'dimmed',\n              disabled   : 'disabled',\n              pageDimmer : 'page',\n              hide       : 'hide',\n              show       : 'show',\n              transition : 'transition'\n            }\n            
\n          		Class names used to attach style to state
\n\n    
\n      Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
nameDimmerName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
errors\n            
\n            error   : {\n              method   : 'The method you called is not defined.'\n            }\n            
\n          
\n\n  
\n\n
",
      "tags": null,
      "render": true,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": "Dimmer",
      "name": "dimmer.html",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "modules-dimmer",
      "url": "/modules/dimmer.html",
      "urls": [
        "/modules/dimmer.html"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": true,
      "header": "layout      : 'default'\ncss         : ''\n\ntitle       : 'Dimmer'\ndescription : \"Dimmers hide distractions to focus user's attention on particular content\"\ntype        : 'UI Module'",
      "parser": "yaml",
      "body": "\n
\n  
\n    
\n      
\n        \n        You're all signed up for the weekly dog tips newsletter!\n        
Your first edition will be sent on January 22
\n      
\n    
\n  
\n
\n\n<%- @partial('header', { tabs: 'module' }) %>\n\n
\n\n  
\n\n    
\n      
\n        Types\n        States\n        Variations\n      
\n    
\n\n    
Types
\n\n    
\n      
Content Dimmer
\n      
A dimmer can display content
\n      
Content must be included inside .content .center to display centered correctly in the modal.
\n      
\n        
\n          Dog Photos\n        
\n        \n        \n        
\n          
\n            
\n              
\n                \n                Your poodle photo uploaded successfully!\n              
\n            
\n          
\n        
\n      
\n      
\n        
\n        
\n      
\n      
\n        
\n          
\n            
\n              
\n                \n                Your poodle photo uploaded successfully!\n              
\n            
\n          
\n        
\n      
\n    
\n\n    
\n      
Page Dimmer
\n      
A dimmer can be formatted to be fixed to the page
\n      
\n      
\n        
\n          
Hello
\n        
\n      
\n      
\n      
 Show
\n    
\n\n\n    
States
\n\n    
\n      
Active
\n      
An active dimmer will dim its parent container
\n      
\n        
\n      
\n    
\n\n    
\n      
Disabled
\n      
A disabled dimmer cannot be activated
\n      
\n        
\n      
\n    
\n\n    
Variations
\n\n    
Dimmer
\n    
\n      
Simple Dimmer
\n      
A dimmer can be controlled without javascript
\n      
Having any parent element receive the class ui dimmable dimmed will trigger the dimmer to display.
\n      
\n        
\n        
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
\n    
\n\n    
\n      
Inverted Dimmer
\n      
A dimmer can be formatted to have its colors inverted
\n      
\n        
\n        
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
\n      
\n        
\n        
\n      
\n    
\n  
\n  
\n\n    
\n      
Dimmer Events
\n      
A dimmer can trigger a visibility change on an event
\n      
\n      $('.event.example .image')\n        .dimmer({\n          on: 'hover'\n        })\n      ;\n      
\n      
\n        
\n          
\n            
\n              
Puppy
\n              
Vote
\n              View\n            
\n          
\n        
\n        \n      
\n      
\n        
\n          
\n            
\n              
Vote
\n              View\n            
\n          
\n        
\n        \n      
\n    
\n\n    
\n      
Loaders inside Dimmers
\n      
Any loader inside a dimmer will automatically use an appropriate color to match
\n      
\n        
\n          
Loading
\n        
\n        
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
\n      
\n        
\n        
\n      
\n    
\n\n  
\n\n  
\n\n    
Usage
\n\n    
Display
\n    
You can display a dimmer by either invoking dimmer show on a section or a dimmer itself. If you choose to dim a dimmable section, a dimmer will automatically be created.
\n    
\n    // these two are the same\n    $('.ui.dimmable)\n      .dimmer('show')\n    ;\n    $('.ui.dimmable .dimmer')\n      .dimmer('show')\n    ;\n    
\n\n    
Creating Dimmers
\n    
If a dimmer does not exist inside the element it will be created on first use.
\n    
\n      $('h3')\n        .dimmer('toggle')\n      ;\n    
\n    
Showing a specific dimmer
\n    
If a dimmer is already inside an element, you can call behavior on the dimmable section or the dimmer itself.
\n    
\n      // If a dimmer exists on a page, you can make it appear by calling it directly\n      $('.page.dimmer:first')\n        .dimmer('toggle')\n      ;\n    
\n\n    
Behavior
\n\n    
All the following behaviors can be called using the syntax:
\n    
\n    $('.your.element')\n      .dimmer('behavior name', argumentOne, argumentTwo)\n    ;\n    
\n\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
BehaviorDescription
add content (element)Detaches a given element from DOM and reattaches element inside dimmer
showShows dimmer
hideHides dimmer
toggleToggles current dimmer visibility
get durationReturns current duration for show or hide event depending on current visibility
get dimmerReturns DOM element for dimmer
has dimmerReturns whether current dimmable has a dimmer
is dimmerWhether current element is a dimmer
is dimmableWhether current element is a dimmable section
is activeWhether section's dimmer is active
is animatingWhether dimmer is animating
is pageWhether dimmable section is body
is enabledWhether dimmer is not disabled
is disabledWhether dimmer is disabled
is page dimmerWhether dimmer is a page dimmer
set activeSets page dimmer to active
set dimmableSets an element as a dimmable section
set dimmedSets a dimmable section as dimmed
set page dimmerSets current dimmer as a page dimmer
set disabledSets a dimmer as disabled
\n\n  
\n\n  
\n\n    
\n      Dimmer Settings\n      
Dimmer settings modify its behavior
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n    
SettingDefaultDescription
closabletrueWhether clicking on the dimmer should close it automatically
onfalseCan be set to hover or click to show/hide dimmer on dimmable event
duration\n            
\n      duration    : {\n        show : 500,\n        hide : 500\n      }\n            
\n          		Animation duration of dimming. If an integer is used, that value will apply to both show and hide animations.
transition\n            Fade\n          Named transition to use when animating menu in and out. Fade and slide down are available without including ui transitions
\n\n    
\n      Callbacks\n      
Callbacks specify a function to occur after a specific behavior.
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingContextDescription
onShowdimmableCallback on element show
onHidedimmableCallback on element hide
onChangedimmableCallback on element show or hide
\n\n    
\n      Templates\n      
Templates are used to generate DOM elements
\n    
\n\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n      \n    
GeneratesDefault
dimmer\n            
\n            function() {\n             return $('
').attr('class', 'ui dimmer');\n            }\n            
\n          
\n\n    
\n      DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
namespacedimmerEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n            
\n            selector: {\n              dimmable : '.ui.dimmable',\n              dimmer   : '.ui.dimmer',\n              content  : '.ui.dimmer > .content, .ui.dimmer > .content > .center'\n            }\n            
\n          		Object containing selectors used by module.
className\n            
\n            className : {\n              active     : 'active',\n              dimmable   : 'ui dimmable',\n              dimmed     : 'dimmed',\n              disabled   : 'disabled',\n              pageDimmer : 'page',\n              hide       : 'hide',\n              show       : 'show',\n              transition : 'transition'\n            }\n            
\n          		Class names used to attach style to state
\n\n    
\n      Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
nameDimmerName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
errors\n            
\n            error   : {\n              method   : 'The method you called is not defined.'\n            }\n            
\n          
\n\n  
\n\n
",
      "rendered": true,
      "contentRendered": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  \n  \n  \n  \n\n  \n\n  \n  \n  Dimmer | Semantic UI\n\n  \n  \n\n  \n\n  \n  \n  \n\n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n\n  \n  \n\n\n  
\n    \n       Close Menu\n    \n    \n       Download\n    \n    
\n      \n        Introduction\n      \n      
\n        \n          Definitions\n        \n          Overview\n        \n          Types\n        \n          Variations\n        \n          What's Different\n        \n      
\n    
\n    
\n      Project\n      
\n        \n          Contributing\n        \n          Set-up\n        \n      
\n    
\n    
\n      Elements\n      
\n        \n          Button\n        \n          Divider\n        \n          Header\n        \n          Icon\n        \n          Image\n        \n          Input\n        \n          Label\n        \n          Loader\n        \n          Progress\n        \n          Reveal\n        \n          Segment\n        \n          Step\n        \n      
\n    
\n    
\n      Collections\n      
\n        \n          Breadcrumb\n        \n          Form\n        \n          Grid\n        \n          Menu\n        \n          Message\n        \n          Table\n        \n      
\n    
\n    
\n      Views\n      
\n        \n          Comment\n        \n          Feed\n        \n          Item\n        \n          List\n        \n      
\n    
\n    
\n      Modules\n      
\n        \n          Accordion\n        \n          Checkbox\n        \n          Dimmer\n        \n          Dropdown\n        \n          Modal\n        \n          Popup\n        \n          Rating\n        \n          Shape\n        \n          Sidebar\n        \n          Transition\n        \n      
\n    
\n    
\n      Behavior\n      
\n        \n          Form Validation\n        \n      
\n    
\n    
\n      Style Guide\n      
\n        \n          CSS\n        \n          Javascript\n        \n          Language\n        \n      
\n    
\n\n  
\n\n  
\n    
\n       Content\n      
\n        UI Module: Dimmer\n      
\n      \n      \n      \n      
\n        3 of 10\n        
\n          \n            
\n              1. Accordion\n            
\n          \n            
\n              2. Checkbox\n            
\n          \n            
\n              3. Dimmer\n            
\n          \n            
\n              4. Dropdown\n            
\n          \n            
\n              5. Modal\n            
\n          \n            
\n              6. Popup\n            
\n          \n            
\n              7. Rating\n            
\n          \n            
\n              8. Shape\n            
\n          \n            
\n              9. Sidebar\n            
\n          \n            
\n              10. Transition\n            
\n          \n        
\n      
\n      \n      \n      \n      
\n        \n        
\n          \n        
\n        \n        \n\n        \n          \n        \n        \n          \n        \n        \n        \n          \n        \n        \n      
\n    
\n  
\n    
\n      \n      Menu\n    
\n  \n
\n  
\n    
\n      
\n        \n        You're all signed up for the weekly dog tips newsletter!\n        
Your first edition will be sent on January 22
\n      
\n    
\n  
\n
\n\n\n\n
\n  
\n    
\n\n      
\n        Dimmer\n        \n      
\n\n      
Dimmers hide distractions to focus user's attention on particular content
\n      \n      \n      \n        Learn about Modules\n        \n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n    \n    \n    \n    \n      \n        \n      \n        \n      \n        \n      \n        \n      \n      
\n        \n          Definition\n          \n        \n          Examples\n          \n        \n          Usage\n          \n        \n          Settings\n          \n        \n      
\n      \n      
\n        \n          Definition\n          \n        \n          Examples\n          \n        \n          Usage\n          \n        \n          Settings\n          \n        \n      
\n    \n  
\n
\n\n
\n\n  
\n\n    
\n      
\n        Types\n        States\n        Variations\n      
\n    
\n\n    
Types
\n\n    
\n      
Content Dimmer
\n      
A dimmer can display content
\n      
Content must be included inside .content .center to display centered correctly in the modal.
\n      
\n        
\n          Dog Photos\n        
\n        \n        \n        
\n          
\n            
\n              
\n                \n                Your poodle photo uploaded successfully!\n              
\n            
\n          
\n        
\n      
\n      
\n        
\n        
\n      
\n      
\n        
\n          
\n            
\n              
\n                \n                Your poodle photo uploaded successfully!\n              
\n            
\n          
\n        
\n      
\n    
\n\n    
\n      
Page Dimmer
\n      
A dimmer can be formatted to be fixed to the page
\n      
\n      
\n        
\n          
Hello
\n        
\n      
\n      
\n      
 Show
\n    
\n\n\n    
States
\n\n    
\n      
Active
\n      
An active dimmer will dim its parent container
\n      
\n        
\n      
\n    
\n\n    
\n      
Disabled
\n      
A disabled dimmer cannot be activated
\n      
\n        
\n      
\n    
\n\n    
Variations
\n\n    
Dimmer
\n    
\n      
Simple Dimmer
\n      
A dimmer can be controlled without javascript
\n      
Having any parent element receive the class ui dimmable dimmed will trigger the dimmer to display.
\n      
\n        
\n        
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
\n    
\n\n    
\n      
Inverted Dimmer
\n      
A dimmer can be formatted to have its colors inverted
\n      
\n        
\n        
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
\n      
\n        
\n        
\n      
\n    
\n  
\n  
\n\n    
\n      
Dimmer Events
\n      
A dimmer can trigger a visibility change on an event
\n      
\n      $('.event.example .image')\n        .dimmer({\n          on: 'hover'\n        })\n      ;\n      
\n      
\n        
\n          
\n            
\n              
Puppy
\n              
Vote
\n              View\n            
\n          
\n        
\n        \n      
\n      
\n        
\n          
\n            
\n              
Vote
\n              View\n            
\n          
\n        
\n        \n      
\n    
\n\n    
\n      
Loaders inside Dimmers
\n      
Any loader inside a dimmer will automatically use an appropriate color to match
\n      
\n        
\n          
Loading
\n        
\n        
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
\n      
\n        
\n        
\n      
\n    
\n\n  
\n\n  
\n\n    
Usage
\n\n    
Display
\n    
You can display a dimmer by either invoking dimmer show on a section or a dimmer itself. If you choose to dim a dimmable section, a dimmer will automatically be created.
\n    
\n    // these two are the same\n    $('.ui.dimmable)\n      .dimmer('show')\n    ;\n    $('.ui.dimmable .dimmer')\n      .dimmer('show')\n    ;\n    
\n\n    
Creating Dimmers
\n    
If a dimmer does not exist inside the element it will be created on first use.
\n    
\n      $('h3')\n        .dimmer('toggle')\n      ;\n    
\n    
Showing a specific dimmer
\n    
If a dimmer is already inside an element, you can call behavior on the dimmable section or the dimmer itself.
\n    
\n      // If a dimmer exists on a page, you can make it appear by calling it directly\n      $('.page.dimmer:first')\n        .dimmer('toggle')\n      ;\n    
\n\n    
Behavior
\n\n    
All the following behaviors can be called using the syntax:
\n    
\n    $('.your.element')\n      .dimmer('behavior name', argumentOne, argumentTwo)\n    ;\n    
\n\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
BehaviorDescription
add content (element)Detaches a given element from DOM and reattaches element inside dimmer
showShows dimmer
hideHides dimmer
toggleToggles current dimmer visibility
get durationReturns current duration for show or hide event depending on current visibility
get dimmerReturns DOM element for dimmer
has dimmerReturns whether current dimmable has a dimmer
is dimmerWhether current element is a dimmer
is dimmableWhether current element is a dimmable section
is activeWhether section's dimmer is active
is animatingWhether dimmer is animating
is pageWhether dimmable section is body
is enabledWhether dimmer is not disabled
is disabledWhether dimmer is disabled
is page dimmerWhether dimmer is a page dimmer
set activeSets page dimmer to active
set dimmableSets an element as a dimmable section
set dimmedSets a dimmable section as dimmed
set page dimmerSets current dimmer as a page dimmer
set disabledSets a dimmer as disabled
\n\n  
\n\n  
\n\n    
\n      Dimmer Settings\n      
Dimmer settings modify its behavior
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n    
SettingDefaultDescription
closabletrueWhether clicking on the dimmer should close it automatically
onfalseCan be set to hover or click to show/hide dimmer on dimmable event
duration\n            
\n      duration    : {\n        show : 500,\n        hide : 500\n      }\n            
\n          		Animation duration of dimming. If an integer is used, that value will apply to both show and hide animations.
transition\n            Fade\n          Named transition to use when animating menu in and out. Fade and slide down are available without including ui transitions
\n\n    
\n      Callbacks\n      
Callbacks specify a function to occur after a specific behavior.
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingContextDescription
onShowdimmableCallback on element show
onHidedimmableCallback on element hide
onChangedimmableCallback on element show or hide
\n\n    
\n      Templates\n      
Templates are used to generate DOM elements
\n    
\n\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n      \n    
GeneratesDefault
dimmer\n            
\n            function() {\n             return $('
').attr('class', 'ui dimmer');\n            }\n            
\n          
\n\n    
\n      DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
namespacedimmerEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n            
\n            selector: {\n              dimmable : '.ui.dimmable',\n              dimmer   : '.ui.dimmer',\n              content  : '.ui.dimmer > .content, .ui.dimmer > .content > .center'\n            }\n            
\n          		Object containing selectors used by module.
className\n            
\n            className : {\n              active     : 'active',\n              dimmable   : 'ui dimmable',\n              dimmed     : 'dimmed',\n              disabled   : 'disabled',\n              pageDimmer : 'page',\n              hide       : 'hide',\n              show       : 'show',\n              transition : 'transition'\n            }\n            
\n          		Class names used to attach style to state
\n\n    
\n      Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
nameDimmerName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
errors\n            
\n            error   : {\n              method   : 'The method you called is not defined.'\n            }\n            
\n          
\n\n  
\n\n
\n\n\n",
      "contentRenderedWithoutLayouts": "\n
\n  
\n    
\n      
\n        \n        You're all signed up for the weekly dog tips newsletter!\n        
Your first edition will be sent on January 22
\n      
\n    
\n  
\n
\n\n\n\n
\n  
\n    
\n\n      
\n        Dimmer\n        \n      
\n\n      
Dimmers hide distractions to focus user's attention on particular content
\n      \n      \n      \n        Learn about Modules\n        \n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n    \n    \n    \n    \n      \n        \n      \n        \n      \n        \n      \n        \n      \n      
\n        \n          Definition\n          \n        \n          Examples\n          \n        \n          Usage\n          \n        \n          Settings\n          \n        \n      
\n      \n      
\n        \n          Definition\n          \n        \n          Examples\n          \n        \n          Usage\n          \n        \n          Settings\n          \n        \n      
\n    \n  
\n
\n\n
\n\n  
\n\n    
\n      
\n        Types\n        States\n        Variations\n      
\n    
\n\n    
Types
\n\n    
\n      
Content Dimmer
\n      
A dimmer can display content
\n      
Content must be included inside .content .center to display centered correctly in the modal.
\n      
\n        
\n          Dog Photos\n        
\n        \n        \n        
\n          
\n            
\n              
\n                \n                Your poodle photo uploaded successfully!\n              
\n            
\n          
\n        
\n      
\n      
\n        
\n        
\n      
\n      
\n        
\n          
\n            
\n              
\n                \n                Your poodle photo uploaded successfully!\n              
\n            
\n          
\n        
\n      
\n    
\n\n    
\n      
Page Dimmer
\n      
A dimmer can be formatted to be fixed to the page
\n      
\n      
\n        
\n          
Hello
\n        
\n      
\n      
\n      
 Show
\n    
\n\n\n    
States
\n\n    
\n      
Active
\n      
An active dimmer will dim its parent container
\n      
\n        
\n      
\n    
\n\n    
\n      
Disabled
\n      
A disabled dimmer cannot be activated
\n      
\n        
\n      
\n    
\n\n    
Variations
\n\n    
Dimmer
\n    
\n      
Simple Dimmer
\n      
A dimmer can be controlled without javascript
\n      
Having any parent element receive the class ui dimmable dimmed will trigger the dimmer to display.
\n      
\n        
\n        
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
\n    
\n\n    
\n      
Inverted Dimmer
\n      
A dimmer can be formatted to have its colors inverted
\n      
\n        
\n        
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
\n      
\n        
\n        
\n      
\n    
\n  
\n  
\n\n    
\n      
Dimmer Events
\n      
A dimmer can trigger a visibility change on an event
\n      
\n      $('.event.example .image')\n        .dimmer({\n          on: 'hover'\n        })\n      ;\n      
\n      
\n        
\n          
\n            
\n              
Puppy
\n              
Vote
\n              View\n            
\n          
\n        
\n        \n      
\n      
\n        
\n          
\n            
\n              
Vote
\n              View\n            
\n          
\n        
\n        \n      
\n    
\n\n    
\n      
Loaders inside Dimmers
\n      
Any loader inside a dimmer will automatically use an appropriate color to match
\n      
\n        
\n          
Loading
\n        
\n        
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n        
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
\n      
\n      
\n        
\n        
\n      
\n    
\n\n  
\n\n  
\n\n    
Usage
\n\n    
Display
\n    
You can display a dimmer by either invoking dimmer show on a section or a dimmer itself. If you choose to dim a dimmable section, a dimmer will automatically be created.
\n    
\n    // these two are the same\n    $('.ui.dimmable)\n      .dimmer('show')\n    ;\n    $('.ui.dimmable .dimmer')\n      .dimmer('show')\n    ;\n    
\n\n    
Creating Dimmers
\n    
If a dimmer does not exist inside the element it will be created on first use.
\n    
\n      $('h3')\n        .dimmer('toggle')\n      ;\n    
\n    
Showing a specific dimmer
\n    
If a dimmer is already inside an element, you can call behavior on the dimmable section or the dimmer itself.
\n    
\n      // If a dimmer exists on a page, you can make it appear by calling it directly\n      $('.page.dimmer:first')\n        .dimmer('toggle')\n      ;\n    
\n\n    
Behavior
\n\n    
All the following behaviors can be called using the syntax:
\n    
\n    $('.your.element')\n      .dimmer('behavior name', argumentOne, argumentTwo)\n    ;\n    
\n\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
BehaviorDescription
add content (element)Detaches a given element from DOM and reattaches element inside dimmer
showShows dimmer
hideHides dimmer
toggleToggles current dimmer visibility
get durationReturns current duration for show or hide event depending on current visibility
get dimmerReturns DOM element for dimmer
has dimmerReturns whether current dimmable has a dimmer
is dimmerWhether current element is a dimmer
is dimmableWhether current element is a dimmable section
is activeWhether section's dimmer is active
is animatingWhether dimmer is animating
is pageWhether dimmable section is body
is enabledWhether dimmer is not disabled
is disabledWhether dimmer is disabled
is page dimmerWhether dimmer is a page dimmer
set activeSets page dimmer to active
set dimmableSets an element as a dimmable section
set dimmedSets a dimmable section as dimmed
set page dimmerSets current dimmer as a page dimmer
set disabledSets a dimmer as disabled
\n\n  
\n\n  
\n\n    
\n      Dimmer Settings\n      
Dimmer settings modify its behavior
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n    
SettingDefaultDescription
closabletrueWhether clicking on the dimmer should close it automatically
onfalseCan be set to hover or click to show/hide dimmer on dimmable event
duration\n            
\n      duration    : {\n        show : 500,\n        hide : 500\n      }\n            
\n          		Animation duration of dimming. If an integer is used, that value will apply to both show and hide animations.
transition\n            Fade\n          Named transition to use when animating menu in and out. Fade and slide down are available without including ui transitions
\n\n    
\n      Callbacks\n      
Callbacks specify a function to occur after a specific behavior.
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingContextDescription
onShowdimmableCallback on element show
onHidedimmableCallback on element hide
onChangedimmableCallback on element show or hide
\n\n    
\n      Templates\n      
Templates are used to generate DOM elements
\n    
\n\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n      \n    
GeneratesDefault
dimmer\n            
\n            function() {\n             return $('
').attr('class', 'ui dimmer');\n            }\n            
\n          
\n\n    
\n      DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
namespacedimmerEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n            
\n            selector: {\n              dimmable : '.ui.dimmable',\n              dimmer   : '.ui.dimmer',\n              content  : '.ui.dimmer > .content, .ui.dimmer > .content > .center'\n            }\n            
\n          		Object containing selectors used by module.
className\n            
\n            className : {\n              active     : 'active',\n              dimmable   : 'ui dimmable',\n              dimmed     : 'dimmed',\n              disabled   : 'disabled',\n              pageDimmer : 'page',\n              hide       : 'hide',\n              show       : 'show',\n              transition : 'transition'\n            }\n            
\n          		Class names used to attach style to state
\n\n    
\n      Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
nameDimmerName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
errors\n            
\n            error   : {\n              method   : 'The method you called is not defined.'\n            }\n            
\n          
\n\n  
\n\n
",
      "renderSingleExtensions": false,
      "layout": "default",
      "css": "",
      "description": "Dimmers hide distractions to focus user's attention on particular content",
      "type": "UI Module",
      "layoutRelativePath": "default.html.eco",
      "meta": {
        "layout": "default",
        "css": "",
        "title": "Dimmer",
        "description": "Dimmers hide distractions to focus user's attention on particular content",
        "type": "UI Module"
      }
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/documents/modules/dropdown.html.eco",
      "relativePath": "modules/dropdown.html.eco",
      "basename": "dropdown",
      "outBasename": "dropdown",
      "extension": "eco",
      "outExtension": "html",
      "extensions": [
        "html",
        "eco"
      ],
      "filename": "dropdown.html.eco",
      "fullDirPath": "/home/jack/projects/semantic/server/documents/modules",
      "outPath": "/home/jack/projects/semantic/docs/modules/dropdown.html",
      "outDirPath": "/home/jack/projects/semantic/docs/modules",
      "outFilename": "dropdown.html",
      "relativeOutPath": "modules/dropdown.html",
      "relativeDirPath": "modules",
      "relativeOutDirPath": "modules",
      "relativeBase": "modules/dropdown",
      "relativeOutBase": "modules/dropdown",
      "contentType": "application/octet-stream",
      "outContentType": "text/html",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-03T17:44:32.000Z",
      "rtime": "2013-12-04T09:15:26.334Z",
      "wtime": "2013-12-04T09:15:28.720Z",
      "exists": true,
      "encoding": "utf8",
      "source": "---\nlayout      : 'default'\ncss         : 'dropdown'\n\ntitle       : 'Dropdown'\ndescription : 'A dropdown is a hidden list of selections that a user can choose to have appear'\ntype        : 'UI Module'\n---\n\n\n\n<%- @partial('header', { tabs: 'module' }) %>\n\n
\n\n  
\n\n    
\n      
\n        Types\n        Variations\n        States\n      
\n    
\n\n\n    
Types
\n\n    
\n      
Dropdown
\n      
A basic dropdown has no special formatting of its own
\n      
\n        
Select
\n        \n        
\n          
Edit
\n          
Remove
\n          
Hide
\n        
\n      
\n    
\n\n    
\n      
Inline
\n      
A dropdown can be formatted to appear inline in other content
\n      
Show me posts trending\n        
\n          
today
\n          \n          
\n            
Today
\n            
This Week
\n            
This Month
\n          
\n        
\n      
\n    
\n\n    
\n      
Selection
\n      
A dropdown can be formatted to allow selection of a menu choice.
\n      
\n        \n        
Gender
\n        \n        
\n          
Male
\n          
Female
\n        
\n      
\n    
\n\n\n    
\n      
Floating
\n      
A dropdown menu can appear to be floating below an element.
\n      
\n        
Save
\n        
\n          \n          
\n            
Edit Post
\n            
Remove Post
\n            
Hide Post
\n          
\n        
\n      
\n    
\n\n    
\n    
Pointing
\n    
A dropdown can be formatted so that its menu is pointing
\n      
\n        
\n          \n             Home\n          \n          
\n             Messages \n            
\n              Inbox\n              Archive\n            
\n          
\n          \n             Browse\n          \n          \n             Help\n          \n        
\n      
\n    
\n    
\n      
\n        \n        Settings\n        
\n          
Edit
\n          
Remove
\n          
Hide
\n        
\n      
\n      
\n        \n        Settings\n        
\n          
Edit
\n          
Remove
\n          
Hide
\n        
\n      
\n    
\n    
\n      
\n        \n        
\n          
Edit
\n          
Remove
\n          
Hide
\n        
\n      
\n      
\n        \n        
\n          
Edit
\n          
Remove
\n          
Hide
\n        
\n      
\n    
\n\n    
\n      
Simple
\n      
A simple dropdown can open without javascript
\n      
\n        
\n          Dropdown \n          
\n            
Choice 1
\n            
Choice 2
\n            
Choice 3
\n          
\n        
\n      
\n    
\n\n    
Variations
\n\n    
\n      
Fluid
\n      
A dropdown can take the full width of its parent
\n      
\n        Link 1\n        Link 2\n        
All Sections
\n        
\n          
\n            
More
\n            \n            
\n              
Choice 1
\n              
Choice 2
\n              
Choice 3
\n            
\n          
\n        
\n      
\n    
\n\n    
States
\n\n    
\n      
Active
\n      
An active dropdown menu has its menu open
\n      
\n        
\n          Dropdown \n          
\n            
Choice 1
\n            
Choice 2
\n          
\n        
\n      
\n    
\n\n    
\n      
Disabled
\n      
A disabled dropdown menu will not open or close
\n      
\n        
\n          Dropdown \n          
\n            
Choice 1
\n            
Choice 2
\n            
Choice 3
\n          
\n        
\n      
\n    
\n\n  
\n\n  
\n    
Initializing
\n\n    
Initializing a dropdown
\n    
\n      
\n        
Select
\n        \n        
\n          
Option 1
\n          
Option 2
\n        
\n      
\n    
\n    
\n      $('.ui.dropdown')\n        .dropdown()\n      ;\n    
\n\n    
Behavior
\n\n    
All the following behaviors can be called using the syntax:
\n    
\n    $('.your.element')\n      .dropdown('behavior name', argumentOne, argumentTwo)\n    ;\n    
\n\n    \n      \n        \n        \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
BehaviorDescription
toggleToggles current visibility of dropdown
showShows dropdown
hideHides dropdown
hide othersHides all other dropdowns that is not current dropdown
set selected(value)Sets selected state to a given value
set text(text)Sets dropdown text to a value
set value(value)Sets dropdown input to value
get textReturns current dropdown text
get valueReturns current dropdown input value
get item(value)Returns DOM element that matches a given input value
bind touch eventsAdds touch events to element
mouse eventsAdds mouse events to element
bind intentBinds a click to document to determine if you click away from a dropdown
unbind intentUnbinds document intent click
determine intentReturns whether event occurred inside dropdown
determine select action(text, value)Triggers preset item selection action based on settings passing text/value
set activeSets dropdown to active state\n        
set visibleSets dropdown to visible state
remove activerRemoves dropdown active state\n        
remove visibleRemoves dropdown visible state
is selectionReturns whether dropdown is a selection dropdown
is animatedReturns whether dropdown is animated
is visibleReturns whether dropdown is visible
is hiddenReturns whether dropdown is hidden
\n  
\n\n  
\n\n    
Examples
\n\n    
\n      
Re-selecting values
\n      
A dropdown will automatically select on page load any menu item that includes the currently value of text or your dropdown's hidden input value. This is used to preserve a user's selection on page navigation and will automatically remove and default text placeholder formatting.
\n\n      Current action: 
\n        
Hide
\n        \n        
\n          
Edit
\n          
Remove
\n          
Hide
\n        
\n      
\n\n    
\n\n    
\n    
Button Group
\n      
A button group can be formatted to show additional content as a dropdown
\n      
\n        
\n          \n          
\n            
Edit User
\n            
Remove User
\n            
Make Invisible
\n          
\n        
\n        
\n          \n          
\n            
Edit Group
\n            
Remove Group
\n            
Hide from Group
\n          
\n        
\n        
\n          \n          
\n            
Edit
\n            
Remove
\n            
Hide
\n          
\n        
\n      
\n    
\n\n\n    
\n      
Combo Button
\n      
A button can be formatted with a dropdown
\n      
\n        
Update Post
\n        
\n          \n          
\n            
Edit Post
\n            
Remove Post
\n            
Hide Post
\n          
\n        
\n      
\n    
\n\n    
\n      
Multiple Levels
\n      
A dropdown menu can also contain sub menus inside of it
\n      My favorite animal breed is 
\n        \n        
Shiba Inu
\n        \n        
\n          
\n            \n            Dogs\n            
\n              
Shiba Inu
\n              
Poodle
\n              
Labrador
\n            
\n          
\n          
\n            \n            Cats\n            
\n              
Aegean
\n              
Balinese
\n              
Persian
\n            
\n          
\n        
\n      
\n    
\n\n\n    
\n      
Menu
\n      
A menu element can contain a dropdown
\n        
\n          
\n            \n               Home\n            \n            \n               Messages \n              
\n                
\n                  Categories\n                  
\n                    
Unread
\n                    
Promotions
\n                    
Updates
\n                  
\n                
\n                
Archive
\n              
\n            \n            \n               Browse\n            \n          
\n          
\n            Activity Feed\n            Profile\n            Events\n          
\n        
\n    
\n\n    
\n      
Form
\n      
A dropdown can be formatted to allow selection inside a form
\n      
\n        
Let's go ahead and get you signed up.
\n        
\n          
\n            \n            \n          
\n          
\n            \n            \n          
\n        
\n        
\n          \n          
\n            \n            
...
\n            \n            
\n              
Male
\n              
Female
\n            
\n          
\n        
\n      
\n    
\n\n    
\n      
Transitions
\n      
A dropdown can have different transitions.
\n      
\n        
Toggle
\n        
\n          \n          
\n            
Horizontal Flip
\n            
Fade Up
\n            
Scale
\n          
\n        
\n      
\n    
\n  
\n\n  
\n\n    
\n      Dropdown Settings\n      
Dropdown settings modify the dropdown's behavior
\n    
\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n      \n    
SettingDefaultDescription
onclickEvent used to trigger dropdown (Hover, Click)
delay\n          
\n      delay: {\n        show: 50,\n        hide: 300\n      }\n          
\n          		Time in milliseconds to debounce show or hide behavior when on: hover is used.
transition\n            slide down\n          Named transition to use when animating menu in and out. Fade and slide down are available without including ui transitions
duration\n            250\n          Duration of animation events
actionautoSets a default action to occur.\n          
\n            
\n              
activate
\n              
Most likely action will be determined by type of dropdown, for example a selection dropdown will automatically use updateForm
\n            
\n            
\n              
nothing
\n              
no action occurs
\n            
\n            
\n              
hide
\n              
Dropdown menu is hidden
\n            
\n            
\n              
function(){}
\n              
custom function is executed
\n            
\n          
\n        
\n\n    
\n    
\n      Callbacks\n      
Callbacks specify a function to occur after a specific behavior.
\n    
\n\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingContextDescription
onChange(value, text)DropdownIs called after a dropdown item is selected. receives the name and value of selection.
onShowDropdownIs called after a dropdown is shown.
onHideDropdownIs called after a dropdown is hidden.
\n\n    
\n      DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
namespacedropdownEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n            
\n      selector : {\n        input : '> input[type=\"hidden\"]',\n        item  : '.menu > .item',\n        menu  : '.menu',\n        text  : '> .text'\n      }\n            
\n          
metadata\n            
\n      metadata: {\n        text  : 'text',\n        value : 'value'\n      }\n            
\n          
className\n            
\n      className : {\n        active      : 'active',\n        disabled    : 'disabled',\n        placeholder : 'default',\n        visible     : 'visible'\n      }\n            
\n          
\n\n    
\n      Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
nameDropdownName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
error\n            
\n      error   : {\n        action    : 'You called a dropdown action that was not defined',\n        method    : 'The method you called is not defined.',\n        transition : 'The requested transition was not found'\n      }\n            
\n          
\n\n  
\n\n
\n",
      "content": "\n\n<%- @partial('header', { tabs: 'module' }) %>\n\n
\n\n  
\n\n    
\n      
\n        Types\n        Variations\n        States\n      
\n    
\n\n\n    
Types
\n\n    
\n      
Dropdown
\n      
A basic dropdown has no special formatting of its own
\n      
\n        
Select
\n        \n        
\n          
Edit
\n          
Remove
\n          
Hide
\n        
\n      
\n    
\n\n    
\n      
Inline
\n      
A dropdown can be formatted to appear inline in other content
\n      
Show me posts trending\n        
\n          
today
\n          \n          
\n            
Today
\n            
This Week
\n            
This Month
\n          
\n        
\n      
\n    
\n\n    
\n      
Selection
\n      
A dropdown can be formatted to allow selection of a menu choice.
\n      
\n        \n        
Gender
\n        \n        
\n          
Male
\n          
Female
\n        
\n      
\n    
\n\n\n    
\n      
Floating
\n      
A dropdown menu can appear to be floating below an element.
\n      
\n        
Save
\n        
\n          \n          
\n            
Edit Post
\n            
Remove Post
\n            
Hide Post
\n          
\n        
\n      
\n    
\n\n    
\n    
Pointing
\n    
A dropdown can be formatted so that its menu is pointing
\n      
\n        
\n          \n             Home\n          \n          
\n             Messages \n            
\n              Inbox\n              Archive\n            
\n          
\n          \n             Browse\n          \n          \n             Help\n          \n        
\n      
\n    
\n    
\n      
\n        \n        Settings\n        
\n          
Edit
\n          
Remove
\n          
Hide
\n        
\n      
\n      
\n        \n        Settings\n        
\n          
Edit
\n          
Remove
\n          
Hide
\n        
\n      
\n    
\n    
\n      
\n        \n        
\n          
Edit
\n          
Remove
\n          
Hide
\n        
\n      
\n      
\n        \n        
\n          
Edit
\n          
Remove
\n          
Hide
\n        
\n      
\n    
\n\n    
\n      
Simple
\n      
A simple dropdown can open without javascript
\n      
\n        
\n          Dropdown \n          
\n            
Choice 1
\n            
Choice 2
\n            
Choice 3
\n          
\n        
\n      
\n    
\n\n    
Variations
\n\n    
\n      
Fluid
\n      
A dropdown can take the full width of its parent
\n      
\n        Link 1\n        Link 2\n        
All Sections
\n        
\n          
\n            
More
\n            \n            
\n              
Choice 1
\n              
Choice 2
\n              
Choice 3
\n            
\n          
\n        
\n      
\n    
\n\n    
States
\n\n    
\n      
Active
\n      
An active dropdown menu has its menu open
\n      
\n        
\n          Dropdown \n          
\n            
Choice 1
\n            
Choice 2
\n          
\n        
\n      
\n    
\n\n    
\n      
Disabled
\n      
A disabled dropdown menu will not open or close
\n      
\n        
\n          Dropdown \n          
\n            
Choice 1
\n            
Choice 2
\n            
Choice 3
\n          
\n        
\n      
\n    
\n\n  
\n\n  
\n    
Initializing
\n\n    
Initializing a dropdown
\n    
\n      
\n        
Select
\n        \n        
\n          
Option 1
\n          
Option 2
\n        
\n      
\n    
\n    
\n      $('.ui.dropdown')\n        .dropdown()\n      ;\n    
\n\n    
Behavior
\n\n    
All the following behaviors can be called using the syntax:
\n    
\n    $('.your.element')\n      .dropdown('behavior name', argumentOne, argumentTwo)\n    ;\n    
\n\n    \n      \n        \n        \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
BehaviorDescription
toggleToggles current visibility of dropdown
showShows dropdown
hideHides dropdown
hide othersHides all other dropdowns that is not current dropdown
set selected(value)Sets selected state to a given value
set text(text)Sets dropdown text to a value
set value(value)Sets dropdown input to value
get textReturns current dropdown text
get valueReturns current dropdown input value
get item(value)Returns DOM element that matches a given input value
bind touch eventsAdds touch events to element
mouse eventsAdds mouse events to element
bind intentBinds a click to document to determine if you click away from a dropdown
unbind intentUnbinds document intent click
determine intentReturns whether event occurred inside dropdown
determine select action(text, value)Triggers preset item selection action based on settings passing text/value
set activeSets dropdown to active state\n        
set visibleSets dropdown to visible state
remove activerRemoves dropdown active state\n        
remove visibleRemoves dropdown visible state
is selectionReturns whether dropdown is a selection dropdown
is animatedReturns whether dropdown is animated
is visibleReturns whether dropdown is visible
is hiddenReturns whether dropdown is hidden
\n  
\n\n  
\n\n    
Examples
\n\n    
\n      
Re-selecting values
\n      
A dropdown will automatically select on page load any menu item that includes the currently value of text or your dropdown's hidden input value. This is used to preserve a user's selection on page navigation and will automatically remove and default text placeholder formatting.
\n\n      Current action: 
\n        
Hide
\n        \n        
\n          
Edit
\n          
Remove
\n          
Hide
\n        
\n      
\n\n    
\n\n    
\n    
Button Group
\n      
A button group can be formatted to show additional content as a dropdown
\n      
\n        
\n          \n          
\n            
Edit User
\n            
Remove User
\n            
Make Invisible
\n          
\n        
\n        
\n          \n          
\n            
Edit Group
\n            
Remove Group
\n            
Hide from Group
\n          
\n        
\n        
\n          \n          
\n            
Edit
\n            
Remove
\n            
Hide
\n          
\n        
\n      
\n    
\n\n\n    
\n      
Combo Button
\n      
A button can be formatted with a dropdown
\n      
\n        
Update Post
\n        
\n          \n          
\n            
Edit Post
\n            
Remove Post
\n            
Hide Post
\n          
\n        
\n      
\n    
\n\n    
\n      
Multiple Levels
\n      
A dropdown menu can also contain sub menus inside of it
\n      My favorite animal breed is 
\n        \n        
Shiba Inu
\n        \n        
\n          
\n            \n            Dogs\n            
\n              
Shiba Inu
\n              
Poodle
\n              
Labrador
\n            
\n          
\n          
\n            \n            Cats\n            
\n              
Aegean
\n              
Balinese
\n              
Persian
\n            
\n          
\n        
\n      
\n    
\n\n\n    
\n      
Menu
\n      
A menu element can contain a dropdown
\n        
\n          
\n            \n               Home\n            \n            \n               Messages \n              
\n                
\n                  Categories\n                  
\n                    
Unread
\n                    
Promotions
\n                    
Updates
\n                  
\n                
\n                
Archive
\n              
\n            \n            \n               Browse\n            \n          
\n          
\n            Activity Feed\n            Profile\n            Events\n          
\n        
\n    
\n\n    
\n      
Form
\n      
A dropdown can be formatted to allow selection inside a form
\n      
\n        
Let's go ahead and get you signed up.
\n        
\n          
\n            \n            \n          
\n          
\n            \n            \n          
\n        
\n        
\n          \n          
\n            \n            
...
\n            \n            
\n              
Male
\n              
Female
\n            
\n          
\n        
\n      
\n    
\n\n    
\n      
Transitions
\n      
A dropdown can have different transitions.
\n      
\n        
Toggle
\n        
\n          \n          
\n            
Horizontal Flip
\n            
Fade Up
\n            
Scale
\n          
\n        
\n      
\n    
\n  
\n\n  
\n\n    
\n      Dropdown Settings\n      
Dropdown settings modify the dropdown's behavior
\n    
\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n      \n    
SettingDefaultDescription
onclickEvent used to trigger dropdown (Hover, Click)
delay\n          
\n      delay: {\n        show: 50,\n        hide: 300\n      }\n          
\n          		Time in milliseconds to debounce show or hide behavior when on: hover is used.
transition\n            slide down\n          Named transition to use when animating menu in and out. Fade and slide down are available without including ui transitions
duration\n            250\n          Duration of animation events
actionautoSets a default action to occur.\n          
\n            
\n              
activate
\n              
Most likely action will be determined by type of dropdown, for example a selection dropdown will automatically use updateForm
\n            
\n            
\n              
nothing
\n              
no action occurs
\n            
\n            
\n              
hide
\n              
Dropdown menu is hidden
\n            
\n            
\n              
function(){}
\n              
custom function is executed
\n            
\n          
\n        
\n\n    
\n    
\n      Callbacks\n      
Callbacks specify a function to occur after a specific behavior.
\n    
\n\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingContextDescription
onChange(value, text)DropdownIs called after a dropdown item is selected. receives the name and value of selection.
onShowDropdownIs called after a dropdown is shown.
onHideDropdownIs called after a dropdown is hidden.
\n\n    
\n      DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
namespacedropdownEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n            
\n      selector : {\n        input : '> input[type=\"hidden\"]',\n        item  : '.menu > .item',\n        menu  : '.menu',\n        text  : '> .text'\n      }\n            
\n          
metadata\n            
\n      metadata: {\n        text  : 'text',\n        value : 'value'\n      }\n            
\n          
className\n            
\n      className : {\n        active      : 'active',\n        disabled    : 'disabled',\n        placeholder : 'default',\n        visible     : 'visible'\n      }\n            
\n          
\n\n    
\n      Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
nameDropdownName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
error\n            
\n      error   : {\n        action    : 'You called a dropdown action that was not defined',\n        method    : 'The method you called is not defined.',\n        transition : 'The requested transition was not found'\n      }\n            
\n          
\n\n  
\n\n
",
      "tags": null,
      "render": true,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": "Dropdown",
      "name": "dropdown.html",
      "date": "2013-12-03T17:44:32.000Z",
      "slug": "modules-dropdown",
      "url": "/modules/dropdown.html",
      "urls": [
        "/modules/dropdown.html"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": true,
      "header": "layout      : 'default'\ncss         : 'dropdown'\n\ntitle       : 'Dropdown'\ndescription : 'A dropdown is a hidden list of selections that a user can choose to have appear'\ntype        : 'UI Module'",
      "parser": "yaml",
      "body": "\n\n<%- @partial('header', { tabs: 'module' }) %>\n\n
\n\n  
\n\n    
\n      
\n        Types\n        Variations\n        States\n      
\n    
\n\n\n    
Types
\n\n    
\n      
Dropdown
\n      
A basic dropdown has no special formatting of its own
\n      
\n        
Select
\n        \n        
\n          
Edit
\n          
Remove
\n          
Hide
\n        
\n      
\n    
\n\n    
\n      
Inline
\n      
A dropdown can be formatted to appear inline in other content
\n      
Show me posts trending\n        
\n          
today
\n          \n          
\n            
Today
\n            
This Week
\n            
This Month
\n          
\n        
\n      
\n    
\n\n    
\n      
Selection
\n      
A dropdown can be formatted to allow selection of a menu choice.
\n      
\n        \n        
Gender
\n        \n        
\n          
Male
\n          
Female
\n        
\n      
\n    
\n\n\n    
\n      
Floating
\n      
A dropdown menu can appear to be floating below an element.
\n      
\n        
Save
\n        
\n          \n          
\n            
Edit Post
\n            
Remove Post
\n            
Hide Post
\n          
\n        
\n      
\n    
\n\n    
\n    
Pointing
\n    
A dropdown can be formatted so that its menu is pointing
\n      
\n        
\n          \n             Home\n          \n          
\n             Messages \n            
\n              Inbox\n              Archive\n            
\n          
\n          \n             Browse\n          \n          \n             Help\n          \n        
\n      
\n    
\n    
\n      
\n        \n        Settings\n        
\n          
Edit
\n          
Remove
\n          
Hide
\n        
\n      
\n      
\n        \n        Settings\n        
\n          
Edit
\n          
Remove
\n          
Hide
\n        
\n      
\n    
\n    
\n      
\n        \n        
\n          
Edit
\n          
Remove
\n          
Hide
\n        
\n      
\n      
\n        \n        
\n          
Edit
\n          
Remove
\n          
Hide
\n        
\n      
\n    
\n\n    
\n      
Simple
\n      
A simple dropdown can open without javascript
\n      
\n        
\n          Dropdown \n          
\n            
Choice 1
\n            
Choice 2
\n            
Choice 3
\n          
\n        
\n      
\n    
\n\n    
Variations
\n\n    
\n      
Fluid
\n      
A dropdown can take the full width of its parent
\n      
\n        Link 1\n        Link 2\n        
All Sections
\n        
\n          
\n            
More
\n            \n            
\n              
Choice 1
\n              
Choice 2
\n              
Choice 3
\n            
\n          
\n        
\n      
\n    
\n\n    
States
\n\n    
\n      
Active
\n      
An active dropdown menu has its menu open
\n      
\n        
\n          Dropdown \n          
\n            
Choice 1
\n            
Choice 2
\n          
\n        
\n      
\n    
\n\n    
\n      
Disabled
\n      
A disabled dropdown menu will not open or close
\n      
\n        
\n          Dropdown \n          
\n            
Choice 1
\n            
Choice 2
\n            
Choice 3
\n          
\n        
\n      
\n    
\n\n  
\n\n  
\n    
Initializing
\n\n    
Initializing a dropdown
\n    
\n      
\n        
Select
\n        \n        
\n          
Option 1
\n          
Option 2
\n        
\n      
\n    
\n    
\n      $('.ui.dropdown')\n        .dropdown()\n      ;\n    
\n\n    
Behavior
\n\n    
All the following behaviors can be called using the syntax:
\n    
\n    $('.your.element')\n      .dropdown('behavior name', argumentOne, argumentTwo)\n    ;\n    
\n\n    \n      \n        \n        \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
BehaviorDescription
toggleToggles current visibility of dropdown
showShows dropdown
hideHides dropdown
hide othersHides all other dropdowns that is not current dropdown
set selected(value)Sets selected state to a given value
set text(text)Sets dropdown text to a value
set value(value)Sets dropdown input to value
get textReturns current dropdown text
get valueReturns current dropdown input value
get item(value)Returns DOM element that matches a given input value
bind touch eventsAdds touch events to element
mouse eventsAdds mouse events to element
bind intentBinds a click to document to determine if you click away from a dropdown
unbind intentUnbinds document intent click
determine intentReturns whether event occurred inside dropdown
determine select action(text, value)Triggers preset item selection action based on settings passing text/value
set activeSets dropdown to active state\n        
set visibleSets dropdown to visible state
remove activerRemoves dropdown active state\n        
remove visibleRemoves dropdown visible state
is selectionReturns whether dropdown is a selection dropdown
is animatedReturns whether dropdown is animated
is visibleReturns whether dropdown is visible
is hiddenReturns whether dropdown is hidden
\n  
\n\n  
\n\n    
Examples
\n\n    
\n      
Re-selecting values
\n      
A dropdown will automatically select on page load any menu item that includes the currently value of text or your dropdown's hidden input value. This is used to preserve a user's selection on page navigation and will automatically remove and default text placeholder formatting.
\n\n      Current action: 
\n        
Hide
\n        \n        
\n          
Edit
\n          
Remove
\n          
Hide
\n        
\n      
\n\n    
\n\n    
\n    
Button Group
\n      
A button group can be formatted to show additional content as a dropdown
\n      
\n        
\n          \n          
\n            
Edit User
\n            
Remove User
\n            
Make Invisible
\n          
\n        
\n        
\n          \n          
\n            
Edit Group
\n            
Remove Group
\n            
Hide from Group
\n          
\n        
\n        
\n          \n          
\n            
Edit
\n            
Remove
\n            
Hide
\n          
\n        
\n      
\n    
\n\n\n    
\n      
Combo Button
\n      
A button can be formatted with a dropdown
\n      
\n        
Update Post
\n        
\n          \n          
\n            
Edit Post
\n            
Remove Post
\n            
Hide Post
\n          
\n        
\n      
\n    
\n\n    
\n      
Multiple Levels
\n      
A dropdown menu can also contain sub menus inside of it
\n      My favorite animal breed is 
\n        \n        
Shiba Inu
\n        \n        
\n          
\n            \n            Dogs\n            
\n              
Shiba Inu
\n              
Poodle
\n              
Labrador
\n            
\n          
\n          
\n            \n            Cats\n            
\n              
Aegean
\n              
Balinese
\n              
Persian
\n            
\n          
\n        
\n      
\n    
\n\n\n    
\n      
Menu
\n      
A menu element can contain a dropdown
\n        
\n          
\n            \n               Home\n            \n            \n               Messages \n              
\n                
\n                  Categories\n                  
\n                    
Unread
\n                    
Promotions
\n                    
Updates
\n                  
\n                
\n                
Archive
\n              
\n            \n            \n               Browse\n            \n          
\n          
\n            Activity Feed\n            Profile\n            Events\n          
\n        
\n    
\n\n    
\n      
Form
\n      
A dropdown can be formatted to allow selection inside a form
\n      
\n        
Let's go ahead and get you signed up.
\n        
\n          
\n            \n            \n          
\n          
\n            \n            \n          
\n        
\n        
\n          \n          
\n            \n            
...
\n            \n            
\n              
Male
\n              
Female
\n            
\n          
\n        
\n      
\n    
\n\n    
\n      
Transitions
\n      
A dropdown can have different transitions.
\n      
\n        
Toggle
\n        
\n          \n          
\n            
Horizontal Flip
\n            
Fade Up
\n            
Scale
\n          
\n        
\n      
\n    
\n  
\n\n  
\n\n    
\n      Dropdown Settings\n      
Dropdown settings modify the dropdown's behavior
\n    
\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n      \n    
SettingDefaultDescription
onclickEvent used to trigger dropdown (Hover, Click)
delay\n          
\n      delay: {\n        show: 50,\n        hide: 300\n      }\n          
\n          		Time in milliseconds to debounce show or hide behavior when on: hover is used.
transition\n            slide down\n          Named transition to use when animating menu in and out. Fade and slide down are available without including ui transitions
duration\n            250\n          Duration of animation events
actionautoSets a default action to occur.\n          
\n            
\n              
activate
\n              
Most likely action will be determined by type of dropdown, for example a selection dropdown will automatically use updateForm
\n            
\n            
\n              
nothing
\n              
no action occurs
\n            
\n            
\n              
hide
\n              
Dropdown menu is hidden
\n            
\n            
\n              
function(){}
\n              
custom function is executed
\n            
\n          
\n        
\n\n    
\n    
\n      Callbacks\n      
Callbacks specify a function to occur after a specific behavior.
\n    
\n\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingContextDescription
onChange(value, text)DropdownIs called after a dropdown item is selected. receives the name and value of selection.
onShowDropdownIs called after a dropdown is shown.
onHideDropdownIs called after a dropdown is hidden.
\n\n    
\n      DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
namespacedropdownEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n            
\n      selector : {\n        input : '> input[type=\"hidden\"]',\n        item  : '.menu > .item',\n        menu  : '.menu',\n        text  : '> .text'\n      }\n            
\n          
metadata\n            
\n      metadata: {\n        text  : 'text',\n        value : 'value'\n      }\n            
\n          
className\n            
\n      className : {\n        active      : 'active',\n        disabled    : 'disabled',\n        placeholder : 'default',\n        visible     : 'visible'\n      }\n            
\n          
\n\n    
\n      Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
nameDropdownName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
error\n            
\n      error   : {\n        action    : 'You called a dropdown action that was not defined',\n        method    : 'The method you called is not defined.',\n        transition : 'The requested transition was not found'\n      }\n            
\n          
\n\n  
\n\n
",
      "rendered": true,
      "contentRendered": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  \n  \n  \n  \n\n  \n\n  \n  \n  Dropdown | Semantic UI\n\n  \n  \n\n  \n\n  \n  \n  \n\n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n\n  \n  \n\n\n  
\n    \n       Close Menu\n    \n    \n       Download\n    \n    
\n      \n        Introduction\n      \n      
\n        \n          Definitions\n        \n          Overview\n        \n          Types\n        \n          Variations\n        \n          What's Different\n        \n      
\n    
\n    
\n      Project\n      
\n        \n          Contributing\n        \n          Set-up\n        \n      
\n    
\n    
\n      Elements\n      
\n        \n          Button\n        \n          Divider\n        \n          Header\n        \n          Icon\n        \n          Image\n        \n          Input\n        \n          Label\n        \n          Loader\n        \n          Progress\n        \n          Reveal\n        \n          Segment\n        \n          Step\n        \n      
\n    
\n    
\n      Collections\n      
\n        \n          Breadcrumb\n        \n          Form\n        \n          Grid\n        \n          Menu\n        \n          Message\n        \n          Table\n        \n      
\n    
\n    
\n      Views\n      
\n        \n          Comment\n        \n          Feed\n        \n          Item\n        \n          List\n        \n      
\n    
\n    
\n      Modules\n      
\n        \n          Accordion\n        \n          Checkbox\n        \n          Dimmer\n        \n          Dropdown\n        \n          Modal\n        \n          Popup\n        \n          Rating\n        \n          Shape\n        \n          Sidebar\n        \n          Transition\n        \n      
\n    
\n    
\n      Behavior\n      
\n        \n          Form Validation\n        \n      
\n    
\n    
\n      Style Guide\n      
\n        \n          CSS\n        \n          Javascript\n        \n          Language\n        \n      
\n    
\n\n  
\n\n  
\n    
\n       Content\n      
\n        UI Module: Dropdown\n      
\n      \n      \n      \n      
\n        4 of 10\n        
\n          \n            
\n              1. Accordion\n            
\n          \n            
\n              2. Checkbox\n            
\n          \n            
\n              3. Dimmer\n            
\n          \n            
\n              4. Dropdown\n            
\n          \n            
\n              5. Modal\n            
\n          \n            
\n              6. Popup\n            
\n          \n            
\n              7. Rating\n            
\n          \n            
\n              8. Shape\n            
\n          \n            
\n              9. Sidebar\n            
\n          \n            
\n              10. Transition\n            
\n          \n        
\n      
\n      \n      \n      \n      
\n        \n        
\n          \n        
\n        \n        \n\n        \n          \n        \n        \n          \n        \n        \n        \n          \n        \n        \n      
\n    
\n  
\n    
\n      \n      Menu\n    
\n  \n\n\n\n
\n  
\n    
\n\n      
\n        Dropdown\n        \n      
\n\n      
A dropdown is a hidden list of selections that a user can choose to have appear
\n      \n      \n      \n        Learn about Modules\n        \n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n    \n    \n    \n    \n      \n        \n      \n        \n      \n        \n      \n        \n      \n      
\n        \n          Definition\n          \n        \n          Examples\n          \n        \n          Usage\n          \n        \n          Settings\n          \n        \n      
\n      \n      
\n        \n          Definition\n          \n        \n          Examples\n          \n        \n          Usage\n          \n        \n          Settings\n          \n        \n      
\n    \n  
\n
\n\n
\n\n  
\n\n    
\n      
\n        Types\n        Variations\n        States\n      
\n    
\n\n\n    
Types
\n\n    
\n      
Dropdown
\n      
A basic dropdown has no special formatting of its own
\n      
\n        
Select
\n        \n        
\n          
Edit
\n          
Remove
\n          
Hide
\n        
\n      
\n    
\n\n    
\n      
Inline
\n      
A dropdown can be formatted to appear inline in other content
\n      
Show me posts trending\n        
\n          
today
\n          \n          
\n            
Today
\n            
This Week
\n            
This Month
\n          
\n        
\n      
\n    
\n\n    
\n      
Selection
\n      
A dropdown can be formatted to allow selection of a menu choice.
\n      
\n        \n        
Gender
\n        \n        
\n          
Male
\n          
Female
\n        
\n      
\n    
\n\n\n    
\n      
Floating
\n      
A dropdown menu can appear to be floating below an element.
\n      
\n        
Save
\n        
\n          \n          
\n            
Edit Post
\n            
Remove Post
\n            
Hide Post
\n          
\n        
\n      
\n    
\n\n    
\n    
Pointing
\n    
A dropdown can be formatted so that its menu is pointing
\n      
\n        
\n          \n             Home\n          \n          
\n             Messages \n            
\n              Inbox\n              Archive\n            
\n          
\n          \n             Browse\n          \n          \n             Help\n          \n        
\n      
\n    
\n    
\n      
\n        \n        Settings\n        
\n          
Edit
\n          
Remove
\n          
Hide
\n        
\n      
\n      
\n        \n        Settings\n        
\n          
Edit
\n          
Remove
\n          
Hide
\n        
\n      
\n    
\n    
\n      
\n        \n        
\n          
Edit
\n          
Remove
\n          
Hide
\n        
\n      
\n      
\n        \n        
\n          
Edit
\n          
Remove
\n          
Hide
\n        
\n      
\n    
\n\n    
\n      
Simple
\n      
A simple dropdown can open without javascript
\n      
\n        
\n          Dropdown \n          
\n            
Choice 1
\n            
Choice 2
\n            
Choice 3
\n          
\n        
\n      
\n    
\n\n    
Variations
\n\n    
\n      
Fluid
\n      
A dropdown can take the full width of its parent
\n      
\n        Link 1\n        Link 2\n        
All Sections
\n        
\n          
\n            
More
\n            \n            
\n              
Choice 1
\n              
Choice 2
\n              
Choice 3
\n            
\n          
\n        
\n      
\n    
\n\n    
States
\n\n    
\n      
Active
\n      
An active dropdown menu has its menu open
\n      
\n        
\n          Dropdown \n          
\n            
Choice 1
\n            
Choice 2
\n          
\n        
\n      
\n    
\n\n    
\n      
Disabled
\n      
A disabled dropdown menu will not open or close
\n      
\n        
\n          Dropdown \n          
\n            
Choice 1
\n            
Choice 2
\n            
Choice 3
\n          
\n        
\n      
\n    
\n\n  
\n\n  
\n    
Initializing
\n\n    
Initializing a dropdown
\n    
\n      
\n        
Select
\n        \n        
\n          
Option 1
\n          
Option 2
\n        
\n      
\n    
\n    
\n      $('.ui.dropdown')\n        .dropdown()\n      ;\n    
\n\n    
Behavior
\n\n    
All the following behaviors can be called using the syntax:
\n    
\n    $('.your.element')\n      .dropdown('behavior name', argumentOne, argumentTwo)\n    ;\n    
\n\n    \n      \n        \n        \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
BehaviorDescription
toggleToggles current visibility of dropdown
showShows dropdown
hideHides dropdown
hide othersHides all other dropdowns that is not current dropdown
set selected(value)Sets selected state to a given value
set text(text)Sets dropdown text to a value
set value(value)Sets dropdown input to value
get textReturns current dropdown text
get valueReturns current dropdown input value
get item(value)Returns DOM element that matches a given input value
bind touch eventsAdds touch events to element
mouse eventsAdds mouse events to element
bind intentBinds a click to document to determine if you click away from a dropdown
unbind intentUnbinds document intent click
determine intentReturns whether event occurred inside dropdown
determine select action(text, value)Triggers preset item selection action based on settings passing text/value
set activeSets dropdown to active state\n        
set visibleSets dropdown to visible state
remove activerRemoves dropdown active state\n        
remove visibleRemoves dropdown visible state
is selectionReturns whether dropdown is a selection dropdown
is animatedReturns whether dropdown is animated
is visibleReturns whether dropdown is visible
is hiddenReturns whether dropdown is hidden
\n  
\n\n  
\n\n    
Examples
\n\n    
\n      
Re-selecting values
\n      
A dropdown will automatically select on page load any menu item that includes the currently value of text or your dropdown's hidden input value. This is used to preserve a user's selection on page navigation and will automatically remove and default text placeholder formatting.
\n\n      Current action: 
\n        
Hide
\n        \n        
\n          
Edit
\n          
Remove
\n          
Hide
\n        
\n      
\n\n    
\n\n    
\n    
Button Group
\n      
A button group can be formatted to show additional content as a dropdown
\n      
\n        
\n          \n          
\n            
Edit User
\n            
Remove User
\n            
Make Invisible
\n          
\n        
\n        
\n          \n          
\n            
Edit Group
\n            
Remove Group
\n            
Hide from Group
\n          
\n        
\n        
\n          \n          
\n            
Edit
\n            
Remove
\n            
Hide
\n          
\n        
\n      
\n    
\n\n\n    
\n      
Combo Button
\n      
A button can be formatted with a dropdown
\n      
\n        
Update Post
\n        
\n          \n          
\n            
Edit Post
\n            
Remove Post
\n            
Hide Post
\n          
\n        
\n      
\n    
\n\n    
\n      
Multiple Levels
\n      
A dropdown menu can also contain sub menus inside of it
\n      My favorite animal breed is 
\n        \n        
Shiba Inu
\n        \n        
\n          
\n            \n            Dogs\n            
\n              
Shiba Inu
\n              
Poodle
\n              
Labrador
\n            
\n          
\n          
\n            \n            Cats\n            
\n              
Aegean
\n              
Balinese
\n              
Persian
\n            
\n          
\n        
\n      
\n    
\n\n\n    
\n      
Menu
\n      
A menu element can contain a dropdown
\n        
\n          
\n            \n               Home\n            \n            \n               Messages \n              
\n                
\n                  Categories\n                  
\n                    
Unread
\n                    
Promotions
\n                    
Updates
\n                  
\n                
\n                
Archive
\n              
\n            \n            \n               Browse\n            \n          
\n          
\n            Activity Feed\n            Profile\n            Events\n          
\n        
\n    
\n\n    
\n      
Form
\n      
A dropdown can be formatted to allow selection inside a form
\n      
\n        
Let's go ahead and get you signed up.
\n        
\n          
\n            \n            \n          
\n          
\n            \n            \n          
\n        
\n        
\n          \n          
\n            \n            
...
\n            \n            
\n              
Male
\n              
Female
\n            
\n          
\n        
\n      
\n    
\n\n    
\n      
Transitions
\n      
A dropdown can have different transitions.
\n      
\n        
Toggle
\n        
\n          \n          
\n            
Horizontal Flip
\n            
Fade Up
\n            
Scale
\n          
\n        
\n      
\n    
\n  
\n\n  
\n\n    
\n      Dropdown Settings\n      
Dropdown settings modify the dropdown's behavior
\n    
\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n      \n    
SettingDefaultDescription
onclickEvent used to trigger dropdown (Hover, Click)
delay\n          
\n      delay: {\n        show: 50,\n        hide: 300\n      }\n          
\n          		Time in milliseconds to debounce show or hide behavior when on: hover is used.
transition\n            slide down\n          Named transition to use when animating menu in and out. Fade and slide down are available without including ui transitions
duration\n            250\n          Duration of animation events
actionautoSets a default action to occur.\n          
\n            
\n              
activate
\n              
Most likely action will be determined by type of dropdown, for example a selection dropdown will automatically use updateForm
\n            
\n            
\n              
nothing
\n              
no action occurs
\n            
\n            
\n              
hide
\n              
Dropdown menu is hidden
\n            
\n            
\n              
function(){}
\n              
custom function is executed
\n            
\n          
\n        
\n\n    
\n    
\n      Callbacks\n      
Callbacks specify a function to occur after a specific behavior.
\n    
\n\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingContextDescription
onChange(value, text)DropdownIs called after a dropdown item is selected. receives the name and value of selection.
onShowDropdownIs called after a dropdown is shown.
onHideDropdownIs called after a dropdown is hidden.
\n\n    
\n      DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
namespacedropdownEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n            
\n      selector : {\n        input : '> input[type=\"hidden\"]',\n        item  : '.menu > .item',\n        menu  : '.menu',\n        text  : '> .text'\n      }\n            
\n          
metadata\n            
\n      metadata: {\n        text  : 'text',\n        value : 'value'\n      }\n            
\n          
className\n            
\n      className : {\n        active      : 'active',\n        disabled    : 'disabled',\n        placeholder : 'default',\n        visible     : 'visible'\n      }\n            
\n          
\n\n    
\n      Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
nameDropdownName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
error\n            
\n      error   : {\n        action    : 'You called a dropdown action that was not defined',\n        method    : 'The method you called is not defined.',\n        transition : 'The requested transition was not found'\n      }\n            
\n          
\n\n  
\n\n
\n\n\n",
      "contentRenderedWithoutLayouts": "\n\n\n\n
\n  
\n    
\n\n      
\n        Dropdown\n        \n      
\n\n      
A dropdown is a hidden list of selections that a user can choose to have appear
\n      \n      \n      \n        Learn about Modules\n        \n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n    \n    \n    \n    \n      \n        \n      \n        \n      \n        \n      \n        \n      \n      
\n        \n          Definition\n          \n        \n          Examples\n          \n        \n          Usage\n          \n        \n          Settings\n          \n        \n      
\n      \n      
\n        \n          Definition\n          \n        \n          Examples\n          \n        \n          Usage\n          \n        \n          Settings\n          \n        \n      
\n    \n  
\n
\n\n
\n\n  
\n\n    
\n      
\n        Types\n        Variations\n        States\n      
\n    
\n\n\n    
Types
\n\n    
\n      
Dropdown
\n      
A basic dropdown has no special formatting of its own
\n      
\n        
Select
\n        \n        
\n          
Edit
\n          
Remove
\n          
Hide
\n        
\n      
\n    
\n\n    
\n      
Inline
\n      
A dropdown can be formatted to appear inline in other content
\n      
Show me posts trending\n        
\n          
today
\n          \n          
\n            
Today
\n            
This Week
\n            
This Month
\n          
\n        
\n      
\n    
\n\n    
\n      
Selection
\n      
A dropdown can be formatted to allow selection of a menu choice.
\n      
\n        \n        
Gender
\n        \n        
\n          
Male
\n          
Female
\n        
\n      
\n    
\n\n\n    
\n      
Floating
\n      
A dropdown menu can appear to be floating below an element.
\n      
\n        
Save
\n        
\n          \n          
\n            
Edit Post
\n            
Remove Post
\n            
Hide Post
\n          
\n        
\n      
\n    
\n\n    
\n    
Pointing
\n    
A dropdown can be formatted so that its menu is pointing
\n      
\n        
\n          \n             Home\n          \n          
\n             Messages \n            
\n              Inbox\n              Archive\n            
\n          
\n          \n             Browse\n          \n          \n             Help\n          \n        
\n      
\n    
\n    
\n      
\n        \n        Settings\n        
\n          
Edit
\n          
Remove
\n          
Hide
\n        
\n      
\n      
\n        \n        Settings\n        
\n          
Edit
\n          
Remove
\n          
Hide
\n        
\n      
\n    
\n    
\n      
\n        \n        
\n          
Edit
\n          
Remove
\n          
Hide
\n        
\n      
\n      
\n        \n        
\n          
Edit
\n          
Remove
\n          
Hide
\n        
\n      
\n    
\n\n    
\n      
Simple
\n      
A simple dropdown can open without javascript
\n      
\n        
\n          Dropdown \n          
\n            
Choice 1
\n            
Choice 2
\n            
Choice 3
\n          
\n        
\n      
\n    
\n\n    
Variations
\n\n    
\n      
Fluid
\n      
A dropdown can take the full width of its parent
\n      
\n        Link 1\n        Link 2\n        
All Sections
\n        
\n          
\n            
More
\n            \n            
\n              
Choice 1
\n              
Choice 2
\n              
Choice 3
\n            
\n          
\n        
\n      
\n    
\n\n    
States
\n\n    
\n      
Active
\n      
An active dropdown menu has its menu open
\n      
\n        
\n          Dropdown \n          
\n            
Choice 1
\n            
Choice 2
\n          
\n        
\n      
\n    
\n\n    
\n      
Disabled
\n      
A disabled dropdown menu will not open or close
\n      
\n        
\n          Dropdown \n          
\n            
Choice 1
\n            
Choice 2
\n            
Choice 3
\n          
\n        
\n      
\n    
\n\n  
\n\n  
\n    
Initializing
\n\n    
Initializing a dropdown
\n    
\n      
\n        
Select
\n        \n        
\n          
Option 1
\n          
Option 2
\n        
\n      
\n    
\n    
\n      $('.ui.dropdown')\n        .dropdown()\n      ;\n    
\n\n    
Behavior
\n\n    
All the following behaviors can be called using the syntax:
\n    
\n    $('.your.element')\n      .dropdown('behavior name', argumentOne, argumentTwo)\n    ;\n    
\n\n    \n      \n        \n        \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
BehaviorDescription
toggleToggles current visibility of dropdown
showShows dropdown
hideHides dropdown
hide othersHides all other dropdowns that is not current dropdown
set selected(value)Sets selected state to a given value
set text(text)Sets dropdown text to a value
set value(value)Sets dropdown input to value
get textReturns current dropdown text
get valueReturns current dropdown input value
get item(value)Returns DOM element that matches a given input value
bind touch eventsAdds touch events to element
mouse eventsAdds mouse events to element
bind intentBinds a click to document to determine if you click away from a dropdown
unbind intentUnbinds document intent click
determine intentReturns whether event occurred inside dropdown
determine select action(text, value)Triggers preset item selection action based on settings passing text/value
set activeSets dropdown to active state\n        
set visibleSets dropdown to visible state
remove activerRemoves dropdown active state\n        
remove visibleRemoves dropdown visible state
is selectionReturns whether dropdown is a selection dropdown
is animatedReturns whether dropdown is animated
is visibleReturns whether dropdown is visible
is hiddenReturns whether dropdown is hidden
\n  
\n\n  
\n\n    
Examples
\n\n    
\n      
Re-selecting values
\n      
A dropdown will automatically select on page load any menu item that includes the currently value of text or your dropdown's hidden input value. This is used to preserve a user's selection on page navigation and will automatically remove and default text placeholder formatting.
\n\n      Current action: 
\n        
Hide
\n        \n        
\n          
Edit
\n          
Remove
\n          
Hide
\n        
\n      
\n\n    
\n\n    
\n    
Button Group
\n      
A button group can be formatted to show additional content as a dropdown
\n      
\n        
\n          \n          
\n            
Edit User
\n            
Remove User
\n            
Make Invisible
\n          
\n        
\n        
\n          \n          
\n            
Edit Group
\n            
Remove Group
\n            
Hide from Group
\n          
\n        
\n        
\n          \n          
\n            
Edit
\n            
Remove
\n            
Hide
\n          
\n        
\n      
\n    
\n\n\n    
\n      
Combo Button
\n      
A button can be formatted with a dropdown
\n      
\n        
Update Post
\n        
\n          \n          
\n            
Edit Post
\n            
Remove Post
\n            
Hide Post
\n          
\n        
\n      
\n    
\n\n    
\n      
Multiple Levels
\n      
A dropdown menu can also contain sub menus inside of it
\n      My favorite animal breed is 
\n        \n        
Shiba Inu
\n        \n        
\n          
\n            \n            Dogs\n            
\n              
Shiba Inu
\n              
Poodle
\n              
Labrador
\n            
\n          
\n          
\n            \n            Cats\n            
\n              
Aegean
\n              
Balinese
\n              
Persian
\n            
\n          
\n        
\n      
\n    
\n\n\n    
\n      
Menu
\n      
A menu element can contain a dropdown
\n        
\n          
\n            \n               Home\n            \n            \n               Messages \n              
\n                
\n                  Categories\n                  
\n                    
Unread
\n                    
Promotions
\n                    
Updates
\n                  
\n                
\n                
Archive
\n              
\n            \n            \n               Browse\n            \n          
\n          
\n            Activity Feed\n            Profile\n            Events\n          
\n        
\n    
\n\n    
\n      
Form
\n      
A dropdown can be formatted to allow selection inside a form
\n      
\n        
Let's go ahead and get you signed up.
\n        
\n          
\n            \n            \n          
\n          
\n            \n            \n          
\n        
\n        
\n          \n          
\n            \n            
...
\n            \n            
\n              
Male
\n              
Female
\n            
\n          
\n        
\n      
\n    
\n\n    
\n      
Transitions
\n      
A dropdown can have different transitions.
\n      
\n        
Toggle
\n        
\n          \n          
\n            
Horizontal Flip
\n            
Fade Up
\n            
Scale
\n          
\n        
\n      
\n    
\n  
\n\n  
\n\n    
\n      Dropdown Settings\n      
Dropdown settings modify the dropdown's behavior
\n    
\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n      \n    
SettingDefaultDescription
onclickEvent used to trigger dropdown (Hover, Click)
delay\n          
\n      delay: {\n        show: 50,\n        hide: 300\n      }\n          
\n          		Time in milliseconds to debounce show or hide behavior when on: hover is used.
transition\n            slide down\n          Named transition to use when animating menu in and out. Fade and slide down are available without including ui transitions
duration\n            250\n          Duration of animation events
actionautoSets a default action to occur.\n          
\n            
\n              
activate
\n              
Most likely action will be determined by type of dropdown, for example a selection dropdown will automatically use updateForm
\n            
\n            
\n              
nothing
\n              
no action occurs
\n            
\n            
\n              
hide
\n              
Dropdown menu is hidden
\n            
\n            
\n              
function(){}
\n              
custom function is executed
\n            
\n          
\n        
\n\n    
\n    
\n      Callbacks\n      
Callbacks specify a function to occur after a specific behavior.
\n    
\n\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingContextDescription
onChange(value, text)DropdownIs called after a dropdown item is selected. receives the name and value of selection.
onShowDropdownIs called after a dropdown is shown.
onHideDropdownIs called after a dropdown is hidden.
\n\n    
\n      DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
namespacedropdownEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n            
\n      selector : {\n        input : '> input[type=\"hidden\"]',\n        item  : '.menu > .item',\n        menu  : '.menu',\n        text  : '> .text'\n      }\n            
\n          
metadata\n            
\n      metadata: {\n        text  : 'text',\n        value : 'value'\n      }\n            
\n          
className\n            
\n      className : {\n        active      : 'active',\n        disabled    : 'disabled',\n        placeholder : 'default',\n        visible     : 'visible'\n      }\n            
\n          
\n\n    
\n      Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
nameDropdownName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
error\n            
\n      error   : {\n        action    : 'You called a dropdown action that was not defined',\n        method    : 'The method you called is not defined.',\n        transition : 'The requested transition was not found'\n      }\n            
\n          
\n\n  
\n\n
",
      "renderSingleExtensions": false,
      "layout": "default",
      "css": "dropdown",
      "description": "A dropdown is a hidden list of selections that a user can choose to have appear",
      "type": "UI Module",
      "layoutRelativePath": "default.html.eco",
      "meta": {
        "layout": "default",
        "css": "dropdown",
        "title": "Dropdown",
        "description": "A dropdown is a hidden list of selections that a user can choose to have appear",
        "type": "UI Module"
      }
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/documents/modules/form.html.eco",
      "relativePath": "modules/form.html.eco",
      "basename": "form",
      "outBasename": "form",
      "extension": "eco",
      "outExtension": "html",
      "extensions": [
        "html",
        "eco"
      ],
      "filename": "form.html.eco",
      "fullDirPath": "/home/jack/projects/semantic/server/documents/modules",
      "outPath": "/home/jack/projects/semantic/docs/modules/form.html",
      "outDirPath": "/home/jack/projects/semantic/docs/modules",
      "outFilename": "form.html",
      "relativeOutPath": "modules/form.html",
      "relativeDirPath": "modules",
      "relativeOutDirPath": "modules",
      "relativeBase": "modules/form",
      "relativeOutBase": "modules/form",
      "contentType": "application/octet-stream",
      "outContentType": "text/html",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": "2013-12-04T09:15:26.394Z",
      "wtime": "2013-12-04T09:15:28.724Z",
      "exists": true,
      "encoding": "utf8",
      "source": "---\nlayout      : 'default'\ncss         : 'form'\n\ntitle       : 'Form Validation'\ndescription : 'A form validation behavior checks user input data against a set of criteria before passing along the data to the server'\ntype        : 'UI Behavior'\n---\n\n\n\n\n<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Usage\n      Behavior\n      Settings\n    
\n  
\n\n  
Usage
\n\n  
\n    
Basic Validation
\n    
Form validation requires passing in a validation object with the rules required to validate your form.
\n    
\n      A validation object includes a list of form elements, and rules to validate each against. Fields are matched by either the id tag, name tag, or data-validate metadata matching the identifier provided in the settings object. To pass parameters to a rule, use bracket notation\n    
\n    
\n    $('.ui.form')\n      .form({\n        firstName: {\n          identifier  : 'first-name',\n          rules: [\n            {\n              type   : 'empty',\n              prompt : 'Please enter your first name'\n            }\n          ]\n        },\n        lastName: {\n          identifier  : 'last-name',\n          rules: [\n            {\n              type   : 'empty',\n              prompt : 'Please enter your last name'\n            }\n          ]\n        },\n        username: {\n          identifier : 'username',\n          rules: [\n            {\n              type   : 'empty',\n              prompt : 'Please enter a username'\n            }\n          ]\n        },\n        password: {\n          identifier : 'password',\n          rules: [\n            {\n              type   : 'empty',\n              prompt : 'Please enter a password'\n            },\n            {\n              type   : 'length[6]',\n              prompt : 'Your password must be at least 6 characters'\n            }\n          ]\n        }\n        terms: {\n          identifier : 'terms',\n          rules: [\n            {\n              type   : 'checked',\n              prompt : 'You must agree to the terms and conditions'\n            }\n          ]\n        }\n      })\n    ;\n    
\n    
\n      
Let's go ahead and get you signed up.
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
\n        \n        \n      
\n      
\n        \n        \n      
\n      
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n  
\n\n  
\n    
Validation w/ Message
\n    
Forms that contain a ui message error block will automatically be filled in with form validation information.
\n    
The template for error messages can be modified by adjusting settings.template.error
\n\n    
\n      
Let's go ahead and get you signed up.
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
\n        \n        \n      
\n      
\n        \n        \n      
\n      
\n        
\n          \n          \n        
\n      
\n      
Submit
\n      
\n    
\n  
\n  
\n    
Custom Validation
\n    
Custom form validation requires passing in a validation object with the rules required to validate your form.
\n    
\n    $('.ui.form')\n      .form({\n        dog: {\n          identifier: 'dog',\n          rules: [\n            {\n              type: 'empty',\n              prompt: 'You must have a dog to add'\n            },\n            {\n              type: 'contains[fluffy]',\n              prompt: 'I only want you to add fluffy dogs!'\n            },\n            {\n              type: 'not[mean]',\n              prompt: 'Why would you add a mean dog to the list?'\n            }\n          ]\n        }\n      })\n    ;\n    
\n    
\n      
Let's go ahead and get you signed up.
\n      
\n        \n        \n      
\n      
Add Dog 
\n      
\n    
\n  
\n\n  
\n    
Inline Validation and Validation Events
\n    
Validation messages can also appear inline. UI Forms automatically format labels with the class name prompt. These validation prompts are also set to appear on input change instead of form submission.
\n    
This example also uses a different validation event. Each element will be validated on input blur instead of the default form submit.
\n    
\n      $('.ui.dropdown')\n        .form(validationRules, {\n          inline : true,\n          on     : 'blur'\n        })\n      ;\n    
\n    
\n      
Let's go ahead and get you signed up.
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
\n        \n        \n      
\n      
\n        \n        \n      
\n      
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n  
\n\n  
Behavior
\n\n  All the following behaviors can be called using the syntax $('.foo').form('behavior name', argumentOne, argumentTwo)\n\n  \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n  
submitSubmits selected form
validate formValidates form and calls onSuccess or onFailure
get change eventgets browser property change event
get field(id)Returns element with matching name, id, or data-validate metadata to ID
get validation(element)Returns validation rules for a given field
has field(identifier)Returns whether a field exists
add errors(errors)Adds errors to form, given an array errors
\n\n  
Settings
\n\n  
\n    Form Settings\n    
Form settings modify the form validation behavior
\n  
\n\n  \n    \n      \n      \n      \n    \n    \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n    \n  
SettingDefaultDescription
keyboardShortcutstrueAdds keyboard shortcuts for enter and escape keys to submit form and blur fields respectively
onsubmitEvent used to trigger validation. Can be either submit, blur or change.
inlinefalseAdds inline error on field validation error
transition\n          scale\n        Named transition to use when animating validation errors. Fade and slide down are available without including ui transitions
duration150Animation speed for inline prompt
\n\n  
\n\n  
\n    Validation Rules\n    
Validation rules are a set of conditions required to validate a field
\n  
\n  
Validation rules are found in settings.rules, to add new global validation rules, modify $.fn.form.settings.rules to include your function.
\n  \n    \n      \n      \n      \n    \n    \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n    \n  
NameArgumentsDescription
emptyvalueChecks whether a field is empty
emailvalueChecks whether a field is a valid email address
lengthvalueChecks whether a field is longer than a length
notvalue, notValueChecks whether a field is not a value
containsvalue, textChecks whether a field contains text
isvalue, textChecks whether a field matches a value
maxLengthvalueChecks whether a field is less than a max length
matchvalue, fieldIdentifierChecks whether a field matches another field
urlvalueChecks whether a field is a url
checked-Checks whether a checkbox field is checked
\n\n  
\n\n  
\n    Callbacks\n    
Callbacks specify a function to occur after a specific behavior.
\n  
\n\n  \n    \n      \n      \n      \n    \n    \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n    \n  
SettingContextDescription
onValidfieldCallback on each valid field
onInvalidfieldCallback on each invalid field
onSuccessformCallback if a form is all valid
onFailureformCallback if any form field is invalid
\n\n  
\n\n  
\n    Templates\n    
Templates are used to construct elements
\n  
\n  
Templates are found in settings.template, to modify templates across all forms, modify $.fn.form.settings.templates to include your function. They must return html.
\n  \n    \n      \n      \n      \n    \n    \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n    \n  
TemplateArgumentsDescription
errorErrors (Array)Constructs the contents of an error message
promptErrors (Array)Constructs an element to prompt the user to an invalid field
\n\n  
\n\n  
\n    DOM Settings\n    
DOM settings specify how this module should interface with the DOM
\n  
\n  \n    \n      \n      \n      \n    \n    \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n    \n  
SettingDefaultDescription
namespaceformEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n          
\n    selector : {\n      message   : '.error.message',\n      field     : 'input, textarea, select',\n      group     : '.field',\n      input     : 'input',\n      prompt    : '.prompt',\n      submit    : '.submit'\n    }\n          
\n        		Selectors used to match functionality to DOM
metadata\n          
\n\n    metadata : {\n      validate: 'validate'\n    },\n          
\n        		\n        HTML5 metadata attributes\n        
className\n          
\n    className : {\n      active      : 'active',\n      placeholder : 'default',\n      disabled    : 'disabled',\n      visible     : 'visible'\n    }\n          
\n        		Class names used to attach style to state
\n\n  
\n\n  
\n    Debug Settings\n    
Debug settings controls debug output to the console
\n  
\n\n  \n    \n      \n      \n      \n    \n    \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n      \n    \n  
SettingDefaultDescription
nameFormName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
errors\n          
\n    errors   : {\n      method   : 'The method you called is not defined.'\n    }\n          
\n        
\n\n
\n",
      "content": "\n\n\n<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Usage\n      Behavior\n      Settings\n    
\n  
\n\n  
Usage
\n\n  
\n    
Basic Validation
\n    
Form validation requires passing in a validation object with the rules required to validate your form.
\n    
\n      A validation object includes a list of form elements, and rules to validate each against. Fields are matched by either the id tag, name tag, or data-validate metadata matching the identifier provided in the settings object. To pass parameters to a rule, use bracket notation\n    
\n    
\n    $('.ui.form')\n      .form({\n        firstName: {\n          identifier  : 'first-name',\n          rules: [\n            {\n              type   : 'empty',\n              prompt : 'Please enter your first name'\n            }\n          ]\n        },\n        lastName: {\n          identifier  : 'last-name',\n          rules: [\n            {\n              type   : 'empty',\n              prompt : 'Please enter your last name'\n            }\n          ]\n        },\n        username: {\n          identifier : 'username',\n          rules: [\n            {\n              type   : 'empty',\n              prompt : 'Please enter a username'\n            }\n          ]\n        },\n        password: {\n          identifier : 'password',\n          rules: [\n            {\n              type   : 'empty',\n              prompt : 'Please enter a password'\n            },\n            {\n              type   : 'length[6]',\n              prompt : 'Your password must be at least 6 characters'\n            }\n          ]\n        }\n        terms: {\n          identifier : 'terms',\n          rules: [\n            {\n              type   : 'checked',\n              prompt : 'You must agree to the terms and conditions'\n            }\n          ]\n        }\n      })\n    ;\n    
\n    
\n      
Let's go ahead and get you signed up.
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
\n        \n        \n      
\n      
\n        \n        \n      
\n      
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n  
\n\n  
\n    
Validation w/ Message
\n    
Forms that contain a ui message error block will automatically be filled in with form validation information.
\n    
The template for error messages can be modified by adjusting settings.template.error
\n\n    
\n      
Let's go ahead and get you signed up.
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
\n        \n        \n      
\n      
\n        \n        \n      
\n      
\n        
\n          \n          \n        
\n      
\n      
Submit
\n      
\n    
\n  
\n  
\n    
Custom Validation
\n    
Custom form validation requires passing in a validation object with the rules required to validate your form.
\n    
\n    $('.ui.form')\n      .form({\n        dog: {\n          identifier: 'dog',\n          rules: [\n            {\n              type: 'empty',\n              prompt: 'You must have a dog to add'\n            },\n            {\n              type: 'contains[fluffy]',\n              prompt: 'I only want you to add fluffy dogs!'\n            },\n            {\n              type: 'not[mean]',\n              prompt: 'Why would you add a mean dog to the list?'\n            }\n          ]\n        }\n      })\n    ;\n    
\n    
\n      
Let's go ahead and get you signed up.
\n      
\n        \n        \n      
\n      
Add Dog 
\n      
\n    
\n  
\n\n  
\n    
Inline Validation and Validation Events
\n    
Validation messages can also appear inline. UI Forms automatically format labels with the class name prompt. These validation prompts are also set to appear on input change instead of form submission.
\n    
This example also uses a different validation event. Each element will be validated on input blur instead of the default form submit.
\n    
\n      $('.ui.dropdown')\n        .form(validationRules, {\n          inline : true,\n          on     : 'blur'\n        })\n      ;\n    
\n    
\n      
Let's go ahead and get you signed up.
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
\n        \n        \n      
\n      
\n        \n        \n      
\n      
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n  
\n\n  
Behavior
\n\n  All the following behaviors can be called using the syntax $('.foo').form('behavior name', argumentOne, argumentTwo)\n\n  \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n  
submitSubmits selected form
validate formValidates form and calls onSuccess or onFailure
get change eventgets browser property change event
get field(id)Returns element with matching name, id, or data-validate metadata to ID
get validation(element)Returns validation rules for a given field
has field(identifier)Returns whether a field exists
add errors(errors)Adds errors to form, given an array errors
\n\n  
Settings
\n\n  
\n    Form Settings\n    
Form settings modify the form validation behavior
\n  
\n\n  \n    \n      \n      \n      \n    \n    \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n    \n  
SettingDefaultDescription
keyboardShortcutstrueAdds keyboard shortcuts for enter and escape keys to submit form and blur fields respectively
onsubmitEvent used to trigger validation. Can be either submit, blur or change.
inlinefalseAdds inline error on field validation error
transition\n          scale\n        Named transition to use when animating validation errors. Fade and slide down are available without including ui transitions
duration150Animation speed for inline prompt
\n\n  
\n\n  
\n    Validation Rules\n    
Validation rules are a set of conditions required to validate a field
\n  
\n  
Validation rules are found in settings.rules, to add new global validation rules, modify $.fn.form.settings.rules to include your function.
\n  \n    \n      \n      \n      \n    \n    \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n    \n  
NameArgumentsDescription
emptyvalueChecks whether a field is empty
emailvalueChecks whether a field is a valid email address
lengthvalueChecks whether a field is longer than a length
notvalue, notValueChecks whether a field is not a value
containsvalue, textChecks whether a field contains text
isvalue, textChecks whether a field matches a value
maxLengthvalueChecks whether a field is less than a max length
matchvalue, fieldIdentifierChecks whether a field matches another field
urlvalueChecks whether a field is a url
checked-Checks whether a checkbox field is checked
\n\n  
\n\n  
\n    Callbacks\n    
Callbacks specify a function to occur after a specific behavior.
\n  
\n\n  \n    \n      \n      \n      \n    \n    \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n    \n  
SettingContextDescription
onValidfieldCallback on each valid field
onInvalidfieldCallback on each invalid field
onSuccessformCallback if a form is all valid
onFailureformCallback if any form field is invalid
\n\n  
\n\n  
\n    Templates\n    
Templates are used to construct elements
\n  
\n  
Templates are found in settings.template, to modify templates across all forms, modify $.fn.form.settings.templates to include your function. They must return html.
\n  \n    \n      \n      \n      \n    \n    \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n    \n  
TemplateArgumentsDescription
errorErrors (Array)Constructs the contents of an error message
promptErrors (Array)Constructs an element to prompt the user to an invalid field
\n\n  
\n\n  
\n    DOM Settings\n    
DOM settings specify how this module should interface with the DOM
\n  
\n  \n    \n      \n      \n      \n    \n    \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n    \n  
SettingDefaultDescription
namespaceformEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n          
\n    selector : {\n      message   : '.error.message',\n      field     : 'input, textarea, select',\n      group     : '.field',\n      input     : 'input',\n      prompt    : '.prompt',\n      submit    : '.submit'\n    }\n          
\n        		Selectors used to match functionality to DOM
metadata\n          
\n\n    metadata : {\n      validate: 'validate'\n    },\n          
\n        		\n        HTML5 metadata attributes\n        
className\n          
\n    className : {\n      active      : 'active',\n      placeholder : 'default',\n      disabled    : 'disabled',\n      visible     : 'visible'\n    }\n          
\n        		Class names used to attach style to state
\n\n  
\n\n  
\n    Debug Settings\n    
Debug settings controls debug output to the console
\n  
\n\n  \n    \n      \n      \n      \n    \n    \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n      \n    \n  
SettingDefaultDescription
nameFormName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
errors\n          
\n    errors   : {\n      method   : 'The method you called is not defined.'\n    }\n          
\n        
\n\n
",
      "tags": null,
      "render": true,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": "Form Validation",
      "name": "form.html",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "modules-form",
      "url": "/modules/form.html",
      "urls": [
        "/modules/form.html"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": true,
      "header": "layout      : 'default'\ncss         : 'form'\n\ntitle       : 'Form Validation'\ndescription : 'A form validation behavior checks user input data against a set of criteria before passing along the data to the server'\ntype        : 'UI Behavior'",
      "parser": "yaml",
      "body": "\n\n\n<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Usage\n      Behavior\n      Settings\n    
\n  
\n\n  
Usage
\n\n  
\n    
Basic Validation
\n    
Form validation requires passing in a validation object with the rules required to validate your form.
\n    
\n      A validation object includes a list of form elements, and rules to validate each against. Fields are matched by either the id tag, name tag, or data-validate metadata matching the identifier provided in the settings object. To pass parameters to a rule, use bracket notation\n    
\n    
\n    $('.ui.form')\n      .form({\n        firstName: {\n          identifier  : 'first-name',\n          rules: [\n            {\n              type   : 'empty',\n              prompt : 'Please enter your first name'\n            }\n          ]\n        },\n        lastName: {\n          identifier  : 'last-name',\n          rules: [\n            {\n              type   : 'empty',\n              prompt : 'Please enter your last name'\n            }\n          ]\n        },\n        username: {\n          identifier : 'username',\n          rules: [\n            {\n              type   : 'empty',\n              prompt : 'Please enter a username'\n            }\n          ]\n        },\n        password: {\n          identifier : 'password',\n          rules: [\n            {\n              type   : 'empty',\n              prompt : 'Please enter a password'\n            },\n            {\n              type   : 'length[6]',\n              prompt : 'Your password must be at least 6 characters'\n            }\n          ]\n        }\n        terms: {\n          identifier : 'terms',\n          rules: [\n            {\n              type   : 'checked',\n              prompt : 'You must agree to the terms and conditions'\n            }\n          ]\n        }\n      })\n    ;\n    
\n    
\n      
Let's go ahead and get you signed up.
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
\n        \n        \n      
\n      
\n        \n        \n      
\n      
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n  
\n\n  
\n    
Validation w/ Message
\n    
Forms that contain a ui message error block will automatically be filled in with form validation information.
\n    
The template for error messages can be modified by adjusting settings.template.error
\n\n    
\n      
Let's go ahead and get you signed up.
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
\n        \n        \n      
\n      
\n        \n        \n      
\n      
\n        
\n          \n          \n        
\n      
\n      
Submit
\n      
\n    
\n  
\n  
\n    
Custom Validation
\n    
Custom form validation requires passing in a validation object with the rules required to validate your form.
\n    
\n    $('.ui.form')\n      .form({\n        dog: {\n          identifier: 'dog',\n          rules: [\n            {\n              type: 'empty',\n              prompt: 'You must have a dog to add'\n            },\n            {\n              type: 'contains[fluffy]',\n              prompt: 'I only want you to add fluffy dogs!'\n            },\n            {\n              type: 'not[mean]',\n              prompt: 'Why would you add a mean dog to the list?'\n            }\n          ]\n        }\n      })\n    ;\n    
\n    
\n      
Let's go ahead and get you signed up.
\n      
\n        \n        \n      
\n      
Add Dog 
\n      
\n    
\n  
\n\n  
\n    
Inline Validation and Validation Events
\n    
Validation messages can also appear inline. UI Forms automatically format labels with the class name prompt. These validation prompts are also set to appear on input change instead of form submission.
\n    
This example also uses a different validation event. Each element will be validated on input blur instead of the default form submit.
\n    
\n      $('.ui.dropdown')\n        .form(validationRules, {\n          inline : true,\n          on     : 'blur'\n        })\n      ;\n    
\n    
\n      
Let's go ahead and get you signed up.
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
\n        \n        \n      
\n      
\n        \n        \n      
\n      
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n  
\n\n  
Behavior
\n\n  All the following behaviors can be called using the syntax $('.foo').form('behavior name', argumentOne, argumentTwo)\n\n  \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n  
submitSubmits selected form
validate formValidates form and calls onSuccess or onFailure
get change eventgets browser property change event
get field(id)Returns element with matching name, id, or data-validate metadata to ID
get validation(element)Returns validation rules for a given field
has field(identifier)Returns whether a field exists
add errors(errors)Adds errors to form, given an array errors
\n\n  
Settings
\n\n  
\n    Form Settings\n    
Form settings modify the form validation behavior
\n  
\n\n  \n    \n      \n      \n      \n    \n    \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n    \n  
SettingDefaultDescription
keyboardShortcutstrueAdds keyboard shortcuts for enter and escape keys to submit form and blur fields respectively
onsubmitEvent used to trigger validation. Can be either submit, blur or change.
inlinefalseAdds inline error on field validation error
transition\n          scale\n        Named transition to use when animating validation errors. Fade and slide down are available without including ui transitions
duration150Animation speed for inline prompt
\n\n  
\n\n  
\n    Validation Rules\n    
Validation rules are a set of conditions required to validate a field
\n  
\n  
Validation rules are found in settings.rules, to add new global validation rules, modify $.fn.form.settings.rules to include your function.
\n  \n    \n      \n      \n      \n    \n    \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n    \n  
NameArgumentsDescription
emptyvalueChecks whether a field is empty
emailvalueChecks whether a field is a valid email address
lengthvalueChecks whether a field is longer than a length
notvalue, notValueChecks whether a field is not a value
containsvalue, textChecks whether a field contains text
isvalue, textChecks whether a field matches a value
maxLengthvalueChecks whether a field is less than a max length
matchvalue, fieldIdentifierChecks whether a field matches another field
urlvalueChecks whether a field is a url
checked-Checks whether a checkbox field is checked
\n\n  
\n\n  
\n    Callbacks\n    
Callbacks specify a function to occur after a specific behavior.
\n  
\n\n  \n    \n      \n      \n      \n    \n    \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n    \n  
SettingContextDescription
onValidfieldCallback on each valid field
onInvalidfieldCallback on each invalid field
onSuccessformCallback if a form is all valid
onFailureformCallback if any form field is invalid
\n\n  
\n\n  
\n    Templates\n    
Templates are used to construct elements
\n  
\n  
Templates are found in settings.template, to modify templates across all forms, modify $.fn.form.settings.templates to include your function. They must return html.
\n  \n    \n      \n      \n      \n    \n    \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n    \n  
TemplateArgumentsDescription
errorErrors (Array)Constructs the contents of an error message
promptErrors (Array)Constructs an element to prompt the user to an invalid field
\n\n  
\n\n  
\n    DOM Settings\n    
DOM settings specify how this module should interface with the DOM
\n  
\n  \n    \n      \n      \n      \n    \n    \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n    \n  
SettingDefaultDescription
namespaceformEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n          
\n    selector : {\n      message   : '.error.message',\n      field     : 'input, textarea, select',\n      group     : '.field',\n      input     : 'input',\n      prompt    : '.prompt',\n      submit    : '.submit'\n    }\n          
\n        		Selectors used to match functionality to DOM
metadata\n          
\n\n    metadata : {\n      validate: 'validate'\n    },\n          
\n        		\n        HTML5 metadata attributes\n        
className\n          
\n    className : {\n      active      : 'active',\n      placeholder : 'default',\n      disabled    : 'disabled',\n      visible     : 'visible'\n    }\n          
\n        		Class names used to attach style to state
\n\n  
\n\n  
\n    Debug Settings\n    
Debug settings controls debug output to the console
\n  
\n\n  \n    \n      \n      \n      \n    \n    \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n      \n    \n  
SettingDefaultDescription
nameFormName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
errors\n          
\n    errors   : {\n      method   : 'The method you called is not defined.'\n    }\n          
\n        
\n\n
",
      "rendered": true,
      "contentRendered": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  \n  \n  \n  \n\n  \n\n  \n  \n  Form Validation | Semantic UI\n\n  \n  \n\n  \n\n  \n  \n  \n\n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n\n  \n  \n\n\n  
\n    \n       Close Menu\n    \n    \n       Download\n    \n    
\n      \n        Introduction\n      \n      
\n        \n          Definitions\n        \n          Overview\n        \n          Types\n        \n          Variations\n        \n          What's Different\n        \n      
\n    
\n    
\n      Project\n      
\n        \n          Contributing\n        \n          Set-up\n        \n      
\n    
\n    
\n      Elements\n      
\n        \n          Button\n        \n          Divider\n        \n          Header\n        \n          Icon\n        \n          Image\n        \n          Input\n        \n          Label\n        \n          Loader\n        \n          Progress\n        \n          Reveal\n        \n          Segment\n        \n          Step\n        \n      
\n    
\n    
\n      Collections\n      
\n        \n          Breadcrumb\n        \n          Form\n        \n          Grid\n        \n          Menu\n        \n          Message\n        \n          Table\n        \n      
\n    
\n    
\n      Views\n      
\n        \n          Comment\n        \n          Feed\n        \n          Item\n        \n          List\n        \n      
\n    
\n    
\n      Modules\n      
\n        \n          Accordion\n        \n          Checkbox\n        \n          Dimmer\n        \n          Dropdown\n        \n          Modal\n        \n          Popup\n        \n          Rating\n        \n          Shape\n        \n          Sidebar\n        \n          Transition\n        \n      
\n    
\n    
\n      Behavior\n      
\n        \n          Form Validation\n        \n      
\n    
\n    
\n      Style Guide\n      
\n        \n          CSS\n        \n          Javascript\n        \n          Language\n        \n      
\n    
\n\n  
\n\n  
\n    
\n       Content\n      
\n        UI Behavior: Form Validation\n      
\n      \n      
\n      \n      
\n        1 of 1\n        
\n          \n            
\n              1. Form Validation\n            
\n          \n        
\n      
\n      \n      
\n      \n      
\n        \n        
\n          \n        
\n        \n        \n        \n          \n        \n        \n      
\n    
\n  
\n    
\n      \n      Menu\n    
\n  \n\n\n\n\n
\n  
\n    
\n\n      
\n        Form Validation\n        \n      
\n\n      
A form validation behavior checks user input data against a set of criteria before passing along the data to the server
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n\n
\n\n  
\n    
\n      Usage\n      Behavior\n      Settings\n    
\n  
\n\n  
Usage
\n\n  
\n    
Basic Validation
\n    
Form validation requires passing in a validation object with the rules required to validate your form.
\n    
\n      A validation object includes a list of form elements, and rules to validate each against. Fields are matched by either the id tag, name tag, or data-validate metadata matching the identifier provided in the settings object. To pass parameters to a rule, use bracket notation\n    
\n    
\n    $('.ui.form')\n      .form({\n        firstName: {\n          identifier  : 'first-name',\n          rules: [\n            {\n              type   : 'empty',\n              prompt : 'Please enter your first name'\n            }\n          ]\n        },\n        lastName: {\n          identifier  : 'last-name',\n          rules: [\n            {\n              type   : 'empty',\n              prompt : 'Please enter your last name'\n            }\n          ]\n        },\n        username: {\n          identifier : 'username',\n          rules: [\n            {\n              type   : 'empty',\n              prompt : 'Please enter a username'\n            }\n          ]\n        },\n        password: {\n          identifier : 'password',\n          rules: [\n            {\n              type   : 'empty',\n              prompt : 'Please enter a password'\n            },\n            {\n              type   : 'length[6]',\n              prompt : 'Your password must be at least 6 characters'\n            }\n          ]\n        }\n        terms: {\n          identifier : 'terms',\n          rules: [\n            {\n              type   : 'checked',\n              prompt : 'You must agree to the terms and conditions'\n            }\n          ]\n        }\n      })\n    ;\n    
\n    
\n      
Let's go ahead and get you signed up.
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
\n        \n        \n      
\n      
\n        \n        \n      
\n      
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n  
\n\n  
\n    
Validation w/ Message
\n    
Forms that contain a ui message error block will automatically be filled in with form validation information.
\n    
The template for error messages can be modified by adjusting settings.template.error
\n\n    
\n      
Let's go ahead and get you signed up.
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
\n        \n        \n      
\n      
\n        \n        \n      
\n      
\n        
\n          \n          \n        
\n      
\n      
Submit
\n      
\n    
\n  
\n  
\n    
Custom Validation
\n    
Custom form validation requires passing in a validation object with the rules required to validate your form.
\n    
\n    $('.ui.form')\n      .form({\n        dog: {\n          identifier: 'dog',\n          rules: [\n            {\n              type: 'empty',\n              prompt: 'You must have a dog to add'\n            },\n            {\n              type: 'contains[fluffy]',\n              prompt: 'I only want you to add fluffy dogs!'\n            },\n            {\n              type: 'not[mean]',\n              prompt: 'Why would you add a mean dog to the list?'\n            }\n          ]\n        }\n      })\n    ;\n    
\n    
\n      
Let's go ahead and get you signed up.
\n      
\n        \n        \n      
\n      
Add Dog 
\n      
\n    
\n  
\n\n  
\n    
Inline Validation and Validation Events
\n    
Validation messages can also appear inline. UI Forms automatically format labels with the class name prompt. These validation prompts are also set to appear on input change instead of form submission.
\n    
This example also uses a different validation event. Each element will be validated on input blur instead of the default form submit.
\n    
\n      $('.ui.dropdown')\n        .form(validationRules, {\n          inline : true,\n          on     : 'blur'\n        })\n      ;\n    
\n    
\n      
Let's go ahead and get you signed up.
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
\n        \n        \n      
\n      
\n        \n        \n      
\n      
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n  
\n\n  
Behavior
\n\n  All the following behaviors can be called using the syntax $('.foo').form('behavior name', argumentOne, argumentTwo)\n\n  \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n  
submitSubmits selected form
validate formValidates form and calls onSuccess or onFailure
get change eventgets browser property change event
get field(id)Returns element with matching name, id, or data-validate metadata to ID
get validation(element)Returns validation rules for a given field
has field(identifier)Returns whether a field exists
add errors(errors)Adds errors to form, given an array errors
\n\n  
Settings
\n\n  
\n    Form Settings\n    
Form settings modify the form validation behavior
\n  
\n\n  \n    \n      \n      \n      \n    \n    \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n    \n  
SettingDefaultDescription
keyboardShortcutstrueAdds keyboard shortcuts for enter and escape keys to submit form and blur fields respectively
onsubmitEvent used to trigger validation. Can be either submit, blur or change.
inlinefalseAdds inline error on field validation error
transition\n          scale\n        Named transition to use when animating validation errors. Fade and slide down are available without including ui transitions
duration150Animation speed for inline prompt
\n\n  
\n\n  
\n    Validation Rules\n    
Validation rules are a set of conditions required to validate a field
\n  
\n  
Validation rules are found in settings.rules, to add new global validation rules, modify $.fn.form.settings.rules to include your function.
\n  \n    \n      \n      \n      \n    \n    \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n    \n  
NameArgumentsDescription
emptyvalueChecks whether a field is empty
emailvalueChecks whether a field is a valid email address
lengthvalueChecks whether a field is longer than a length
notvalue, notValueChecks whether a field is not a value
containsvalue, textChecks whether a field contains text
isvalue, textChecks whether a field matches a value
maxLengthvalueChecks whether a field is less than a max length
matchvalue, fieldIdentifierChecks whether a field matches another field
urlvalueChecks whether a field is a url
checked-Checks whether a checkbox field is checked
\n\n  
\n\n  
\n    Callbacks\n    
Callbacks specify a function to occur after a specific behavior.
\n  
\n\n  \n    \n      \n      \n      \n    \n    \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n    \n  
SettingContextDescription
onValidfieldCallback on each valid field
onInvalidfieldCallback on each invalid field
onSuccessformCallback if a form is all valid
onFailureformCallback if any form field is invalid
\n\n  
\n\n  
\n    Templates\n    
Templates are used to construct elements
\n  
\n  
Templates are found in settings.template, to modify templates across all forms, modify $.fn.form.settings.templates to include your function. They must return html.
\n  \n    \n      \n      \n      \n    \n    \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n    \n  
TemplateArgumentsDescription
errorErrors (Array)Constructs the contents of an error message
promptErrors (Array)Constructs an element to prompt the user to an invalid field
\n\n  
\n\n  
\n    DOM Settings\n    
DOM settings specify how this module should interface with the DOM
\n  
\n  \n    \n      \n      \n      \n    \n    \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n    \n  
SettingDefaultDescription
namespaceformEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n          
\n    selector : {\n      message   : '.error.message',\n      field     : 'input, textarea, select',\n      group     : '.field',\n      input     : 'input',\n      prompt    : '.prompt',\n      submit    : '.submit'\n    }\n          
\n        		Selectors used to match functionality to DOM
metadata\n          
\n\n    metadata : {\n      validate: 'validate'\n    },\n          
\n        		\n        HTML5 metadata attributes\n        
className\n          
\n    className : {\n      active      : 'active',\n      placeholder : 'default',\n      disabled    : 'disabled',\n      visible     : 'visible'\n    }\n          
\n        		Class names used to attach style to state
\n\n  
\n\n  
\n    Debug Settings\n    
Debug settings controls debug output to the console
\n  
\n\n  \n    \n      \n      \n      \n    \n    \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n      \n    \n  
SettingDefaultDescription
nameFormName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
errors\n          
\n    errors   : {\n      method   : 'The method you called is not defined.'\n    }\n          
\n        
\n\n
\n\n\n",
      "contentRenderedWithoutLayouts": "\n\n\n\n\n
\n  
\n    
\n\n      
\n        Form Validation\n        \n      
\n\n      
A form validation behavior checks user input data against a set of criteria before passing along the data to the server
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n\n
\n\n  
\n    
\n      Usage\n      Behavior\n      Settings\n    
\n  
\n\n  
Usage
\n\n  
\n    
Basic Validation
\n    
Form validation requires passing in a validation object with the rules required to validate your form.
\n    
\n      A validation object includes a list of form elements, and rules to validate each against. Fields are matched by either the id tag, name tag, or data-validate metadata matching the identifier provided in the settings object. To pass parameters to a rule, use bracket notation\n    
\n    
\n    $('.ui.form')\n      .form({\n        firstName: {\n          identifier  : 'first-name',\n          rules: [\n            {\n              type   : 'empty',\n              prompt : 'Please enter your first name'\n            }\n          ]\n        },\n        lastName: {\n          identifier  : 'last-name',\n          rules: [\n            {\n              type   : 'empty',\n              prompt : 'Please enter your last name'\n            }\n          ]\n        },\n        username: {\n          identifier : 'username',\n          rules: [\n            {\n              type   : 'empty',\n              prompt : 'Please enter a username'\n            }\n          ]\n        },\n        password: {\n          identifier : 'password',\n          rules: [\n            {\n              type   : 'empty',\n              prompt : 'Please enter a password'\n            },\n            {\n              type   : 'length[6]',\n              prompt : 'Your password must be at least 6 characters'\n            }\n          ]\n        }\n        terms: {\n          identifier : 'terms',\n          rules: [\n            {\n              type   : 'checked',\n              prompt : 'You must agree to the terms and conditions'\n            }\n          ]\n        }\n      })\n    ;\n    
\n    
\n      
Let's go ahead and get you signed up.
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
\n        \n        \n      
\n      
\n        \n        \n      
\n      
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n  
\n\n  
\n    
Validation w/ Message
\n    
Forms that contain a ui message error block will automatically be filled in with form validation information.
\n    
The template for error messages can be modified by adjusting settings.template.error
\n\n    
\n      
Let's go ahead and get you signed up.
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
\n        \n        \n      
\n      
\n        \n        \n      
\n      
\n        
\n          \n          \n        
\n      
\n      
Submit
\n      
\n    
\n  
\n  
\n    
Custom Validation
\n    
Custom form validation requires passing in a validation object with the rules required to validate your form.
\n    
\n    $('.ui.form')\n      .form({\n        dog: {\n          identifier: 'dog',\n          rules: [\n            {\n              type: 'empty',\n              prompt: 'You must have a dog to add'\n            },\n            {\n              type: 'contains[fluffy]',\n              prompt: 'I only want you to add fluffy dogs!'\n            },\n            {\n              type: 'not[mean]',\n              prompt: 'Why would you add a mean dog to the list?'\n            }\n          ]\n        }\n      })\n    ;\n    
\n    
\n      
Let's go ahead and get you signed up.
\n      
\n        \n        \n      
\n      
Add Dog 
\n      
\n    
\n  
\n\n  
\n    
Inline Validation and Validation Events
\n    
Validation messages can also appear inline. UI Forms automatically format labels with the class name prompt. These validation prompts are also set to appear on input change instead of form submission.
\n    
This example also uses a different validation event. Each element will be validated on input blur instead of the default form submit.
\n    
\n      $('.ui.dropdown')\n        .form(validationRules, {\n          inline : true,\n          on     : 'blur'\n        })\n      ;\n    
\n    
\n      
Let's go ahead and get you signed up.
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
\n        \n        \n      
\n      
\n        \n        \n      
\n      
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n  
\n\n  
Behavior
\n\n  All the following behaviors can be called using the syntax $('.foo').form('behavior name', argumentOne, argumentTwo)\n\n  \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n  
submitSubmits selected form
validate formValidates form and calls onSuccess or onFailure
get change eventgets browser property change event
get field(id)Returns element with matching name, id, or data-validate metadata to ID
get validation(element)Returns validation rules for a given field
has field(identifier)Returns whether a field exists
add errors(errors)Adds errors to form, given an array errors
\n\n  
Settings
\n\n  
\n    Form Settings\n    
Form settings modify the form validation behavior
\n  
\n\n  \n    \n      \n      \n      \n    \n    \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n    \n  
SettingDefaultDescription
keyboardShortcutstrueAdds keyboard shortcuts for enter and escape keys to submit form and blur fields respectively
onsubmitEvent used to trigger validation. Can be either submit, blur or change.
inlinefalseAdds inline error on field validation error
transition\n          scale\n        Named transition to use when animating validation errors. Fade and slide down are available without including ui transitions
duration150Animation speed for inline prompt
\n\n  
\n\n  
\n    Validation Rules\n    
Validation rules are a set of conditions required to validate a field
\n  
\n  
Validation rules are found in settings.rules, to add new global validation rules, modify $.fn.form.settings.rules to include your function.
\n  \n    \n      \n      \n      \n    \n    \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n    \n  
NameArgumentsDescription
emptyvalueChecks whether a field is empty
emailvalueChecks whether a field is a valid email address
lengthvalueChecks whether a field is longer than a length
notvalue, notValueChecks whether a field is not a value
containsvalue, textChecks whether a field contains text
isvalue, textChecks whether a field matches a value
maxLengthvalueChecks whether a field is less than a max length
matchvalue, fieldIdentifierChecks whether a field matches another field
urlvalueChecks whether a field is a url
checked-Checks whether a checkbox field is checked
\n\n  
\n\n  
\n    Callbacks\n    
Callbacks specify a function to occur after a specific behavior.
\n  
\n\n  \n    \n      \n      \n      \n    \n    \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n    \n  
SettingContextDescription
onValidfieldCallback on each valid field
onInvalidfieldCallback on each invalid field
onSuccessformCallback if a form is all valid
onFailureformCallback if any form field is invalid
\n\n  
\n\n  
\n    Templates\n    
Templates are used to construct elements
\n  
\n  
Templates are found in settings.template, to modify templates across all forms, modify $.fn.form.settings.templates to include your function. They must return html.
\n  \n    \n      \n      \n      \n    \n    \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n    \n  
TemplateArgumentsDescription
errorErrors (Array)Constructs the contents of an error message
promptErrors (Array)Constructs an element to prompt the user to an invalid field
\n\n  
\n\n  
\n    DOM Settings\n    
DOM settings specify how this module should interface with the DOM
\n  
\n  \n    \n      \n      \n      \n    \n    \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n    \n  
SettingDefaultDescription
namespaceformEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n          
\n    selector : {\n      message   : '.error.message',\n      field     : 'input, textarea, select',\n      group     : '.field',\n      input     : 'input',\n      prompt    : '.prompt',\n      submit    : '.submit'\n    }\n          
\n        		Selectors used to match functionality to DOM
metadata\n          
\n\n    metadata : {\n      validate: 'validate'\n    },\n          
\n        		\n        HTML5 metadata attributes\n        
className\n          
\n    className : {\n      active      : 'active',\n      placeholder : 'default',\n      disabled    : 'disabled',\n      visible     : 'visible'\n    }\n          
\n        		Class names used to attach style to state
\n\n  
\n\n  
\n    Debug Settings\n    
Debug settings controls debug output to the console
\n  
\n\n  \n    \n      \n      \n      \n    \n    \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n        \n      \n      \n        \n        \n      \n    \n  
SettingDefaultDescription
nameFormName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
errors\n          
\n    errors   : {\n      method   : 'The method you called is not defined.'\n    }\n          
\n        
\n\n
",
      "renderSingleExtensions": false,
      "layout": "default",
      "css": "form",
      "description": "A form validation behavior checks user input data against a set of criteria before passing along the data to the server",
      "type": "UI Behavior",
      "layoutRelativePath": "default.html.eco",
      "meta": {
        "layout": "default",
        "css": "form",
        "title": "Form Validation",
        "description": "A form validation behavior checks user input data against a set of criteria before passing along the data to the server",
        "type": "UI Behavior"
      }
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/documents/modules/modal.html.eco",
      "relativePath": "modules/modal.html.eco",
      "basename": "modal",
      "outBasename": "modal",
      "extension": "eco",
      "outExtension": "html",
      "extensions": [
        "html",
        "eco"
      ],
      "filename": "modal.html.eco",
      "fullDirPath": "/home/jack/projects/semantic/server/documents/modules",
      "outPath": "/home/jack/projects/semantic/docs/modules/modal.html",
      "outDirPath": "/home/jack/projects/semantic/docs/modules",
      "outFilename": "modal.html",
      "relativeOutPath": "modules/modal.html",
      "relativeDirPath": "modules",
      "relativeOutDirPath": "modules",
      "relativeBase": "modules/modal",
      "relativeOutBase": "modules/modal",
      "contentType": "application/octet-stream",
      "outContentType": "text/html",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": "2013-12-04T09:15:26.460Z",
      "wtime": "2013-12-04T09:15:28.726Z",
      "exists": true,
      "encoding": "utf8",
      "source": "---\nlayout      : 'default'\ncss         : 'modal-demo'\n\ntitle       : 'Modal'\ndescription : 'A modal displays content that temporarily blocks interactions with a web site'\ntype        : 'UI Module'\n---\n\n\n<%- @partial('header', { tabs: 'module' }) %>\n\n
\n\n  
\n    
\n      Change Your Homepage\n    
\n    
\n      
\n        \n      
\n      
\n        
Are you sure you want to change your homepage to Poodle.com?
\n      
\n    
\n    
\n      
\n        
\n          \n          No\n        
\n        
\n          Yes\n          \n        
\n      
\n    
\n  
\n\n  
\n    \n    
\n      Changing Your Thing\n    
\n    
\n      
Do you want to change that thing to something else?
\n    
\n    
\n      
\n        No\n      
\n      
\n        Yes\n        \n      
\n    
\n  
\n\n  
\n    \n    
\n      Changing Your Thing\n    
\n    
\n      
Do you want to change that thing to something else?
\n    
\n    
\n      
\n        No\n      
\n      
\n        Yes\n        \n      
\n    
\n  
\n\n  
\n    \n    
\n      Profile Picture\n    
\n    
\n      
\n        \n      
\n      
\n        
Are you sure you want to upload that?
\n        
I mean it's not really the best profile photo.
\n        
It's resampled to like two times the size it's suppose to be. Our image detection software also says it might even be inappropriate.
\n      
\n    
\n    
\n      
\n        Cancel\n      
\n      
\n        Add Photo\n        \n      
\n    
\n  
\n\n  
\n\n    
\n      
\n        Types\n        Variations\n        States\n      
\n    
\n\n    
Types
\n\n    
\n      
Standard
\n      
A standard modal
\n      
\n      $('.test.modal')\n        .modal('show')\n      ;\n      
\n    
\n\n    
\n      
Basic
\n      
A modal can reduce its complexity
\n      
\n      $('.basic.modal')\n        .modal('show')\n      ;\n      
\n    
\n\n    
Variations
\n\n    
\n      
Size
\n      
A modal can vary in size
\n      
\n      $('.small.modal')\n        .modal('show')\n      ;\n      
\n      
\n      $('.large.modal')\n        .modal('show')\n      ;\n      
\n    
\n\n    
States
\n\n    
\n      
Active
\n      
An active modal is visible on the page
\n      
\n        
...
\n      
\n    
\n  
\n\n  
\n\n    
Examples
\n\n    
\n      
Approve / Deny Callbacks
\n      
Modals will automatically tie approve deny callbacks to any positive/approve or negative/deny buttons. If a callback returns false it will prevent the modal from closing
\n      
\n      $('.basic.modal')\n        .modal('setting', {\n          closable  : false,\n          onDeny    : function(){\n            window.alert('Wait not yet!');\n            return false;\n          },\n          onApprove : function() {\n            window.alert('Approved!');\n          }\n        })\n        .modal('show')\n      ;\n      
\n    
\n\n    
\n      
Forcing a Choice
\n      
You can disable a modal's dimmer from being closed by click to force a user to make a choice
\n      
\n      $('.basic.modal')\n        .modal('setting', 'closable', false)\n        .modal('show')\n      ;\n      
\n    
\n\n    
\n      
Transitions
\n      
A modal can use any named ui transition.
\n      
\n        \n        \n        
Choose transition
\n        
\n          
Horizontal Flip
\n          
Vertical Flip
\n          
Fade Up
\n          
Fade
\n          
Scale
\n        
\n      
\n      
\n      
\n      $('.selection')\n        .dropdown({\n          onChange: function(value) {\n            $('.test.modal')\n              .modal('setting', 'transition', value)\n              .modal('show')\n            ;\n          }\n        })\n      ;\n      
\n    
\n\n    
\n      
Attach events
\n      
A modal can attach events to another element
\n      
\n      $('.test.modal')\n        .modal('attach events', '.test.button', 'show')\n      ;\n      
\n      
Launch modal
\n    
\n  
\n\n  
\n\n    
Usage
\n\n    
Initializing a modal
\n    
A modal can be included anywhere on the page. On initialization a modal's current size will be cached, and the element will be detached from the dom and moved inside a dimmer.
\n    
\n      
Why move modal content?
\n      
Having a modal inside the page dimmer allows for 3D animations without having the 3D perspective settings alter the rest of the page content. Additionally, content outside the dimmer can be blurred or altered without affecting the modal's content.
\n    
\n    
\n      $('.ui.modal')\n        .modal()\n      ;\n    
\n    
\n      
\n        \n        
\n          Modal Title\n        
\n        
\n          
\n            Content can appear on left\n          
\n          
\n            Content can appear on right\n          
\n        
\n        
\n          
Cancel
\n          
OK
\n        
\n      
\n    
\n\n    
Behavior
\n\n    
All the following behaviors can be called using the syntax:
\n    
\n    $('.ui.modal')\n      .modal('behavior name', argumentOne, argumentTwo)\n    ;\n    
\n\n    \n      \n        \n          \n          \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
BehaviorDescription
showShows the modal
hideHides the modal
toggleToggles the modal
refreshRefreshes centering of modal on page
show dimmerShows associated page dimmer
hide dimmerHides associated page dimmer
hide othersHides all modals not selected modal in a dimmer
hide allHides all visible modals in the same dimmer
cache sizesCaches current modal size
can fitReturns whether the modal can fit on the page
is activeReturns whether the modal is active
set activeSets modal to active
\n  
\n\n  
\n\n    
Settings
\n\n    
Modal Settings\n      
Modal settings modify the modal's behavior
\n    
\n\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
offset0A vertical offset to allow for content outside of modal, for example a close button, to be centered.
context\n          body\n          Selector or jquery object specifying the area to dim
closable\n          true\n          Settings to false will not allow you to close the modal by clicking on the dimmer
useCSS\n            true\n          Whether to use CSS animations instead of fallback javascript animations
transition\n            scale\n          Named transition to use when animating menu in and out. Fade is available without including ui transitions
duration\n            400\n          Duration of animation
easing\n            easeOutExpo\n          Animation easing is only used if javascript animations are used.
\n\n    
\n    
Callbacks\n      
Callbacks specify a function to occur after a specific behavior.
\n    
\n\n\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingContextDescription
onShowModalIs called after a modal is shown.
onHideModalIs called after a modal is hidden.
onApproveModalIs called after a positive or approve button is pressed
onDenyModalIs called after a negative or cancel button is pressed.
\n\n    
DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n\n    \n      \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
namespacemodalEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n            
\n      selector    : {\n        close    : '.close, .actions .button',\n        approve  : '.actions .positive, .actions .approve',\n        deny     : '.actions .negative, .actions .cancel'\n      },\n            
\n          
className\n            
\n      className : {\n        active    : 'active',\n        scrolling : 'scrolling'\n      }\n            
\n          
\n\n    
Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
nameModalName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
error\n            
\n      error   : {\n        method    : 'The method you called is not defined.''\n      }\n            
\n          
\n  
\n\n
",
      "content": "\n\n<%- @partial('header', { tabs: 'module' }) %>\n\n
\n\n  
\n    
\n      Change Your Homepage\n    
\n    
\n      
\n        \n      
\n      
\n        
Are you sure you want to change your homepage to Poodle.com?
\n      
\n    
\n    
\n      
\n        
\n          \n          No\n        
\n        
\n          Yes\n          \n        
\n      
\n    
\n  
\n\n  
\n    \n    
\n      Changing Your Thing\n    
\n    
\n      
Do you want to change that thing to something else?
\n    
\n    
\n      
\n        No\n      
\n      
\n        Yes\n        \n      
\n    
\n  
\n\n  
\n    \n    
\n      Changing Your Thing\n    
\n    
\n      
Do you want to change that thing to something else?
\n    
\n    
\n      
\n        No\n      
\n      
\n        Yes\n        \n      
\n    
\n  
\n\n  
\n    \n    
\n      Profile Picture\n    
\n    
\n      
\n        \n      
\n      
\n        
Are you sure you want to upload that?
\n        
I mean it's not really the best profile photo.
\n        
It's resampled to like two times the size it's suppose to be. Our image detection software also says it might even be inappropriate.
\n      
\n    
\n    
\n      
\n        Cancel\n      
\n      
\n        Add Photo\n        \n      
\n    
\n  
\n\n  
\n\n    
\n      
\n        Types\n        Variations\n        States\n      
\n    
\n\n    
Types
\n\n    
\n      
Standard
\n      
A standard modal
\n      
\n      $('.test.modal')\n        .modal('show')\n      ;\n      
\n    
\n\n    
\n      
Basic
\n      
A modal can reduce its complexity
\n      
\n      $('.basic.modal')\n        .modal('show')\n      ;\n      
\n    
\n\n    
Variations
\n\n    
\n      
Size
\n      
A modal can vary in size
\n      
\n      $('.small.modal')\n        .modal('show')\n      ;\n      
\n      
\n      $('.large.modal')\n        .modal('show')\n      ;\n      
\n    
\n\n    
States
\n\n    
\n      
Active
\n      
An active modal is visible on the page
\n      
\n        
...
\n      
\n    
\n  
\n\n  
\n\n    
Examples
\n\n    
\n      
Approve / Deny Callbacks
\n      
Modals will automatically tie approve deny callbacks to any positive/approve or negative/deny buttons. If a callback returns false it will prevent the modal from closing
\n      
\n      $('.basic.modal')\n        .modal('setting', {\n          closable  : false,\n          onDeny    : function(){\n            window.alert('Wait not yet!');\n            return false;\n          },\n          onApprove : function() {\n            window.alert('Approved!');\n          }\n        })\n        .modal('show')\n      ;\n      
\n    
\n\n    
\n      
Forcing a Choice
\n      
You can disable a modal's dimmer from being closed by click to force a user to make a choice
\n      
\n      $('.basic.modal')\n        .modal('setting', 'closable', false)\n        .modal('show')\n      ;\n      
\n    
\n\n    
\n      
Transitions
\n      
A modal can use any named ui transition.
\n      
\n        \n        \n        
Choose transition
\n        
\n          
Horizontal Flip
\n          
Vertical Flip
\n          
Fade Up
\n          
Fade
\n          
Scale
\n        
\n      
\n      
\n      
\n      $('.selection')\n        .dropdown({\n          onChange: function(value) {\n            $('.test.modal')\n              .modal('setting', 'transition', value)\n              .modal('show')\n            ;\n          }\n        })\n      ;\n      
\n    
\n\n    
\n      
Attach events
\n      
A modal can attach events to another element
\n      
\n      $('.test.modal')\n        .modal('attach events', '.test.button', 'show')\n      ;\n      
\n      
Launch modal
\n    
\n  
\n\n  
\n\n    
Usage
\n\n    
Initializing a modal
\n    
A modal can be included anywhere on the page. On initialization a modal's current size will be cached, and the element will be detached from the dom and moved inside a dimmer.
\n    
\n      
Why move modal content?
\n      
Having a modal inside the page dimmer allows for 3D animations without having the 3D perspective settings alter the rest of the page content. Additionally, content outside the dimmer can be blurred or altered without affecting the modal's content.
\n    
\n    
\n      $('.ui.modal')\n        .modal()\n      ;\n    
\n    
\n      
\n        \n        
\n          Modal Title\n        
\n        
\n          
\n            Content can appear on left\n          
\n          
\n            Content can appear on right\n          
\n        
\n        
\n          
Cancel
\n          
OK
\n        
\n      
\n    
\n\n    
Behavior
\n\n    
All the following behaviors can be called using the syntax:
\n    
\n    $('.ui.modal')\n      .modal('behavior name', argumentOne, argumentTwo)\n    ;\n    
\n\n    \n      \n        \n          \n          \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
BehaviorDescription
showShows the modal
hideHides the modal
toggleToggles the modal
refreshRefreshes centering of modal on page
show dimmerShows associated page dimmer
hide dimmerHides associated page dimmer
hide othersHides all modals not selected modal in a dimmer
hide allHides all visible modals in the same dimmer
cache sizesCaches current modal size
can fitReturns whether the modal can fit on the page
is activeReturns whether the modal is active
set activeSets modal to active
\n  
\n\n  
\n\n    
Settings
\n\n    
Modal Settings\n      
Modal settings modify the modal's behavior
\n    
\n\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
offset0A vertical offset to allow for content outside of modal, for example a close button, to be centered.
context\n          body\n          Selector or jquery object specifying the area to dim
closable\n          true\n          Settings to false will not allow you to close the modal by clicking on the dimmer
useCSS\n            true\n          Whether to use CSS animations instead of fallback javascript animations
transition\n            scale\n          Named transition to use when animating menu in and out. Fade is available without including ui transitions
duration\n            400\n          Duration of animation
easing\n            easeOutExpo\n          Animation easing is only used if javascript animations are used.
\n\n    
\n    
Callbacks\n      
Callbacks specify a function to occur after a specific behavior.
\n    
\n\n\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingContextDescription
onShowModalIs called after a modal is shown.
onHideModalIs called after a modal is hidden.
onApproveModalIs called after a positive or approve button is pressed
onDenyModalIs called after a negative or cancel button is pressed.
\n\n    
DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n\n    \n      \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
namespacemodalEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n            
\n      selector    : {\n        close    : '.close, .actions .button',\n        approve  : '.actions .positive, .actions .approve',\n        deny     : '.actions .negative, .actions .cancel'\n      },\n            
\n          
className\n            
\n      className : {\n        active    : 'active',\n        scrolling : 'scrolling'\n      }\n            
\n          
\n\n    
Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
nameModalName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
error\n            
\n      error   : {\n        method    : 'The method you called is not defined.''\n      }\n            
\n          
\n  
\n\n
",
      "tags": null,
      "render": true,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": "Modal",
      "name": "modal.html",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "modules-modal",
      "url": "/modules/modal.html",
      "urls": [
        "/modules/modal.html"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": true,
      "header": "layout      : 'default'\ncss         : 'modal-demo'\n\ntitle       : 'Modal'\ndescription : 'A modal displays content that temporarily blocks interactions with a web site'\ntype        : 'UI Module'",
      "parser": "yaml",
      "body": "\n\n<%- @partial('header', { tabs: 'module' }) %>\n\n
\n\n  
\n    
\n      Change Your Homepage\n    
\n    
\n      
\n        \n      
\n      
\n        
Are you sure you want to change your homepage to Poodle.com?
\n      
\n    
\n    
\n      
\n        
\n          \n          No\n        
\n        
\n          Yes\n          \n        
\n      
\n    
\n  
\n\n  
\n    \n    
\n      Changing Your Thing\n    
\n    
\n      
Do you want to change that thing to something else?
\n    
\n    
\n      
\n        No\n      
\n      
\n        Yes\n        \n      
\n    
\n  
\n\n  
\n    \n    
\n      Changing Your Thing\n    
\n    
\n      
Do you want to change that thing to something else?
\n    
\n    
\n      
\n        No\n      
\n      
\n        Yes\n        \n      
\n    
\n  
\n\n  
\n    \n    
\n      Profile Picture\n    
\n    
\n      
\n        \n      
\n      
\n        
Are you sure you want to upload that?
\n        
I mean it's not really the best profile photo.
\n        
It's resampled to like two times the size it's suppose to be. Our image detection software also says it might even be inappropriate.
\n      
\n    
\n    
\n      
\n        Cancel\n      
\n      
\n        Add Photo\n        \n      
\n    
\n  
\n\n  
\n\n    
\n      
\n        Types\n        Variations\n        States\n      
\n    
\n\n    
Types
\n\n    
\n      
Standard
\n      
A standard modal
\n      
\n      $('.test.modal')\n        .modal('show')\n      ;\n      
\n    
\n\n    
\n      
Basic
\n      
A modal can reduce its complexity
\n      
\n      $('.basic.modal')\n        .modal('show')\n      ;\n      
\n    
\n\n    
Variations
\n\n    
\n      
Size
\n      
A modal can vary in size
\n      
\n      $('.small.modal')\n        .modal('show')\n      ;\n      
\n      
\n      $('.large.modal')\n        .modal('show')\n      ;\n      
\n    
\n\n    
States
\n\n    
\n      
Active
\n      
An active modal is visible on the page
\n      
\n        
...
\n      
\n    
\n  
\n\n  
\n\n    
Examples
\n\n    
\n      
Approve / Deny Callbacks
\n      
Modals will automatically tie approve deny callbacks to any positive/approve or negative/deny buttons. If a callback returns false it will prevent the modal from closing
\n      
\n      $('.basic.modal')\n        .modal('setting', {\n          closable  : false,\n          onDeny    : function(){\n            window.alert('Wait not yet!');\n            return false;\n          },\n          onApprove : function() {\n            window.alert('Approved!');\n          }\n        })\n        .modal('show')\n      ;\n      
\n    
\n\n    
\n      
Forcing a Choice
\n      
You can disable a modal's dimmer from being closed by click to force a user to make a choice
\n      
\n      $('.basic.modal')\n        .modal('setting', 'closable', false)\n        .modal('show')\n      ;\n      
\n    
\n\n    
\n      
Transitions
\n      
A modal can use any named ui transition.
\n      
\n        \n        \n        
Choose transition
\n        
\n          
Horizontal Flip
\n          
Vertical Flip
\n          
Fade Up
\n          
Fade
\n          
Scale
\n        
\n      
\n      
\n      
\n      $('.selection')\n        .dropdown({\n          onChange: function(value) {\n            $('.test.modal')\n              .modal('setting', 'transition', value)\n              .modal('show')\n            ;\n          }\n        })\n      ;\n      
\n    
\n\n    
\n      
Attach events
\n      
A modal can attach events to another element
\n      
\n      $('.test.modal')\n        .modal('attach events', '.test.button', 'show')\n      ;\n      
\n      
Launch modal
\n    
\n  
\n\n  
\n\n    
Usage
\n\n    
Initializing a modal
\n    
A modal can be included anywhere on the page. On initialization a modal's current size will be cached, and the element will be detached from the dom and moved inside a dimmer.
\n    
\n      
Why move modal content?
\n      
Having a modal inside the page dimmer allows for 3D animations without having the 3D perspective settings alter the rest of the page content. Additionally, content outside the dimmer can be blurred or altered without affecting the modal's content.
\n    
\n    
\n      $('.ui.modal')\n        .modal()\n      ;\n    
\n    
\n      
\n        \n        
\n          Modal Title\n        
\n        
\n          
\n            Content can appear on left\n          
\n          
\n            Content can appear on right\n          
\n        
\n        
\n          
Cancel
\n          
OK
\n        
\n      
\n    
\n\n    
Behavior
\n\n    
All the following behaviors can be called using the syntax:
\n    
\n    $('.ui.modal')\n      .modal('behavior name', argumentOne, argumentTwo)\n    ;\n    
\n\n    \n      \n        \n          \n          \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
BehaviorDescription
showShows the modal
hideHides the modal
toggleToggles the modal
refreshRefreshes centering of modal on page
show dimmerShows associated page dimmer
hide dimmerHides associated page dimmer
hide othersHides all modals not selected modal in a dimmer
hide allHides all visible modals in the same dimmer
cache sizesCaches current modal size
can fitReturns whether the modal can fit on the page
is activeReturns whether the modal is active
set activeSets modal to active
\n  
\n\n  
\n\n    
Settings
\n\n    
Modal Settings\n      
Modal settings modify the modal's behavior
\n    
\n\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
offset0A vertical offset to allow for content outside of modal, for example a close button, to be centered.
context\n          body\n          Selector or jquery object specifying the area to dim
closable\n          true\n          Settings to false will not allow you to close the modal by clicking on the dimmer
useCSS\n            true\n          Whether to use CSS animations instead of fallback javascript animations
transition\n            scale\n          Named transition to use when animating menu in and out. Fade is available without including ui transitions
duration\n            400\n          Duration of animation
easing\n            easeOutExpo\n          Animation easing is only used if javascript animations are used.
\n\n    
\n    
Callbacks\n      
Callbacks specify a function to occur after a specific behavior.
\n    
\n\n\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingContextDescription
onShowModalIs called after a modal is shown.
onHideModalIs called after a modal is hidden.
onApproveModalIs called after a positive or approve button is pressed
onDenyModalIs called after a negative or cancel button is pressed.
\n\n    
DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n\n    \n      \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
namespacemodalEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n            
\n      selector    : {\n        close    : '.close, .actions .button',\n        approve  : '.actions .positive, .actions .approve',\n        deny     : '.actions .negative, .actions .cancel'\n      },\n            
\n          
className\n            
\n      className : {\n        active    : 'active',\n        scrolling : 'scrolling'\n      }\n            
\n          
\n\n    
Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
nameModalName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
error\n            
\n      error   : {\n        method    : 'The method you called is not defined.''\n      }\n            
\n          
\n  
\n\n
",
      "rendered": true,
      "contentRendered": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  \n  \n  \n  \n\n  \n\n  \n  \n  Modal | Semantic UI\n\n  \n  \n\n  \n\n  \n  \n  \n\n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n\n  \n  \n\n\n  
\n    \n       Close Menu\n    \n    \n       Download\n    \n    
\n      \n        Introduction\n      \n      
\n        \n          Definitions\n        \n          Overview\n        \n          Types\n        \n          Variations\n        \n          What's Different\n        \n      
\n    
\n    
\n      Project\n      
\n        \n          Contributing\n        \n          Set-up\n        \n      
\n    
\n    
\n      Elements\n      
\n        \n          Button\n        \n          Divider\n        \n          Header\n        \n          Icon\n        \n          Image\n        \n          Input\n        \n          Label\n        \n          Loader\n        \n          Progress\n        \n          Reveal\n        \n          Segment\n        \n          Step\n        \n      
\n    
\n    
\n      Collections\n      
\n        \n          Breadcrumb\n        \n          Form\n        \n          Grid\n        \n          Menu\n        \n          Message\n        \n          Table\n        \n      
\n    
\n    
\n      Views\n      
\n        \n          Comment\n        \n          Feed\n        \n          Item\n        \n          List\n        \n      
\n    
\n    
\n      Modules\n      
\n        \n          Accordion\n        \n          Checkbox\n        \n          Dimmer\n        \n          Dropdown\n        \n          Modal\n        \n          Popup\n        \n          Rating\n        \n          Shape\n        \n          Sidebar\n        \n          Transition\n        \n      
\n    
\n    
\n      Behavior\n      
\n        \n          Form Validation\n        \n      
\n    
\n    
\n      Style Guide\n      
\n        \n          CSS\n        \n          Javascript\n        \n          Language\n        \n      
\n    
\n\n  
\n\n  
\n    
\n       Content\n      
\n        UI Module: Modal\n      
\n      \n      \n      \n      
\n        5 of 10\n        
\n          \n            
\n              1. Accordion\n            
\n          \n            
\n              2. Checkbox\n            
\n          \n            
\n              3. Dimmer\n            
\n          \n            
\n              4. Dropdown\n            
\n          \n            
\n              5. Modal\n            
\n          \n            
\n              6. Popup\n            
\n          \n            
\n              7. Rating\n            
\n          \n            
\n              8. Shape\n            
\n          \n            
\n              9. Sidebar\n            
\n          \n            
\n              10. Transition\n            
\n          \n        
\n      
\n      \n      \n      \n      
\n        \n        
\n          \n        
\n        \n        \n\n        \n          \n        \n        \n          \n        \n        \n        \n          \n        \n        \n      
\n    
\n  
\n    
\n      \n      Menu\n    
\n  \n\n\n\n
\n  
\n    
\n\n      
\n        Modal\n        \n      
\n\n      
A modal displays content that temporarily blocks interactions with a web site
\n      \n      \n      \n        Learn about Modules\n        \n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n    \n    \n    \n    \n      \n        \n      \n        \n      \n        \n      \n        \n      \n      
\n        \n          Definition\n          \n        \n          Examples\n          \n        \n          Usage\n          \n        \n          Settings\n          \n        \n      
\n      \n      
\n        \n          Definition\n          \n        \n          Examples\n          \n        \n          Usage\n          \n        \n          Settings\n          \n        \n      
\n    \n  
\n
\n\n
\n\n  
\n    
\n      Change Your Homepage\n    
\n    
\n      
\n        \n      
\n      
\n        
Are you sure you want to change your homepage to Poodle.com?
\n      
\n    
\n    
\n      
\n        
\n          \n          No\n        
\n        
\n          Yes\n          \n        
\n      
\n    
\n  
\n\n  
\n    \n    
\n      Changing Your Thing\n    
\n    
\n      
Do you want to change that thing to something else?
\n    
\n    
\n      
\n        No\n      
\n      
\n        Yes\n        \n      
\n    
\n  
\n\n  
\n    \n    
\n      Changing Your Thing\n    
\n    
\n      
Do you want to change that thing to something else?
\n    
\n    
\n      
\n        No\n      
\n      
\n        Yes\n        \n      
\n    
\n  
\n\n  
\n    \n    
\n      Profile Picture\n    
\n    
\n      
\n        \n      
\n      
\n        
Are you sure you want to upload that?
\n        
I mean it's not really the best profile photo.
\n        
It's resampled to like two times the size it's suppose to be. Our image detection software also says it might even be inappropriate.
\n      
\n    
\n    
\n      
\n        Cancel\n      
\n      
\n        Add Photo\n        \n      
\n    
\n  
\n\n  
\n\n    
\n      
\n        Types\n        Variations\n        States\n      
\n    
\n\n    
Types
\n\n    
\n      
Standard
\n      
A standard modal
\n      
\n      $('.test.modal')\n        .modal('show')\n      ;\n      
\n    
\n\n    
\n      
Basic
\n      
A modal can reduce its complexity
\n      
\n      $('.basic.modal')\n        .modal('show')\n      ;\n      
\n    
\n\n    
Variations
\n\n    
\n      
Size
\n      
A modal can vary in size
\n      
\n      $('.small.modal')\n        .modal('show')\n      ;\n      
\n      
\n      $('.large.modal')\n        .modal('show')\n      ;\n      
\n    
\n\n    
States
\n\n    
\n      
Active
\n      
An active modal is visible on the page
\n      
\n        
...
\n      
\n    
\n  
\n\n  
\n\n    
Examples
\n\n    
\n      
Approve / Deny Callbacks
\n      
Modals will automatically tie approve deny callbacks to any positive/approve or negative/deny buttons. If a callback returns false it will prevent the modal from closing
\n      
\n      $('.basic.modal')\n        .modal('setting', {\n          closable  : false,\n          onDeny    : function(){\n            window.alert('Wait not yet!');\n            return false;\n          },\n          onApprove : function() {\n            window.alert('Approved!');\n          }\n        })\n        .modal('show')\n      ;\n      
\n    
\n\n    
\n      
Forcing a Choice
\n      
You can disable a modal's dimmer from being closed by click to force a user to make a choice
\n      
\n      $('.basic.modal')\n        .modal('setting', 'closable', false)\n        .modal('show')\n      ;\n      
\n    
\n\n    
\n      
Transitions
\n      
A modal can use any named ui transition.
\n      
\n        \n        \n        
Choose transition
\n        
\n          
Horizontal Flip
\n          
Vertical Flip
\n          
Fade Up
\n          
Fade
\n          
Scale
\n        
\n      
\n      
\n      
\n      $('.selection')\n        .dropdown({\n          onChange: function(value) {\n            $('.test.modal')\n              .modal('setting', 'transition', value)\n              .modal('show')\n            ;\n          }\n        })\n      ;\n      
\n    
\n\n    
\n      
Attach events
\n      
A modal can attach events to another element
\n      
\n      $('.test.modal')\n        .modal('attach events', '.test.button', 'show')\n      ;\n      
\n      
Launch modal
\n    
\n  
\n\n  
\n\n    
Usage
\n\n    
Initializing a modal
\n    
A modal can be included anywhere on the page. On initialization a modal's current size will be cached, and the element will be detached from the dom and moved inside a dimmer.
\n    
\n      
Why move modal content?
\n      
Having a modal inside the page dimmer allows for 3D animations without having the 3D perspective settings alter the rest of the page content. Additionally, content outside the dimmer can be blurred or altered without affecting the modal's content.
\n    
\n    
\n      $('.ui.modal')\n        .modal()\n      ;\n    
\n    
\n      
\n        \n        
\n          Modal Title\n        
\n        
\n          
\n            Content can appear on left\n          
\n          
\n            Content can appear on right\n          
\n        
\n        
\n          
Cancel
\n          
OK
\n        
\n      
\n    
\n\n    
Behavior
\n\n    
All the following behaviors can be called using the syntax:
\n    
\n    $('.ui.modal')\n      .modal('behavior name', argumentOne, argumentTwo)\n    ;\n    
\n\n    \n      \n        \n          \n          \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
BehaviorDescription
showShows the modal
hideHides the modal
toggleToggles the modal
refreshRefreshes centering of modal on page
show dimmerShows associated page dimmer
hide dimmerHides associated page dimmer
hide othersHides all modals not selected modal in a dimmer
hide allHides all visible modals in the same dimmer
cache sizesCaches current modal size
can fitReturns whether the modal can fit on the page
is activeReturns whether the modal is active
set activeSets modal to active
\n  
\n\n  
\n\n    
Settings
\n\n    
Modal Settings\n      
Modal settings modify the modal's behavior
\n    
\n\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
offset0A vertical offset to allow for content outside of modal, for example a close button, to be centered.
context\n          body\n          Selector or jquery object specifying the area to dim
closable\n          true\n          Settings to false will not allow you to close the modal by clicking on the dimmer
useCSS\n            true\n          Whether to use CSS animations instead of fallback javascript animations
transition\n            scale\n          Named transition to use when animating menu in and out. Fade is available without including ui transitions
duration\n            400\n          Duration of animation
easing\n            easeOutExpo\n          Animation easing is only used if javascript animations are used.
\n\n    
\n    
Callbacks\n      
Callbacks specify a function to occur after a specific behavior.
\n    
\n\n\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingContextDescription
onShowModalIs called after a modal is shown.
onHideModalIs called after a modal is hidden.
onApproveModalIs called after a positive or approve button is pressed
onDenyModalIs called after a negative or cancel button is pressed.
\n\n    
DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n\n    \n      \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
namespacemodalEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n            
\n      selector    : {\n        close    : '.close, .actions .button',\n        approve  : '.actions .positive, .actions .approve',\n        deny     : '.actions .negative, .actions .cancel'\n      },\n            
\n          
className\n            
\n      className : {\n        active    : 'active',\n        scrolling : 'scrolling'\n      }\n            
\n          
\n\n    
Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
nameModalName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
error\n            
\n      error   : {\n        method    : 'The method you called is not defined.''\n      }\n            
\n          
\n  
\n\n
\n\n\n",
      "contentRenderedWithoutLayouts": "\n\n\n\n
\n  
\n    
\n\n      
\n        Modal\n        \n      
\n\n      
A modal displays content that temporarily blocks interactions with a web site
\n      \n      \n      \n        Learn about Modules\n        \n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n    \n    \n    \n    \n      \n        \n      \n        \n      \n        \n      \n        \n      \n      
\n        \n          Definition\n          \n        \n          Examples\n          \n        \n          Usage\n          \n        \n          Settings\n          \n        \n      
\n      \n      
\n        \n          Definition\n          \n        \n          Examples\n          \n        \n          Usage\n          \n        \n          Settings\n          \n        \n      
\n    \n  
\n
\n\n
\n\n  
\n    
\n      Change Your Homepage\n    
\n    
\n      
\n        \n      
\n      
\n        
Are you sure you want to change your homepage to Poodle.com?
\n      
\n    
\n    
\n      
\n        
\n          \n          No\n        
\n        
\n          Yes\n          \n        
\n      
\n    
\n  
\n\n  
\n    \n    
\n      Changing Your Thing\n    
\n    
\n      
Do you want to change that thing to something else?
\n    
\n    
\n      
\n        No\n      
\n      
\n        Yes\n        \n      
\n    
\n  
\n\n  
\n    \n    
\n      Changing Your Thing\n    
\n    
\n      
Do you want to change that thing to something else?
\n    
\n    
\n      
\n        No\n      
\n      
\n        Yes\n        \n      
\n    
\n  
\n\n  
\n    \n    
\n      Profile Picture\n    
\n    
\n      
\n        \n      
\n      
\n        
Are you sure you want to upload that?
\n        
I mean it's not really the best profile photo.
\n        
It's resampled to like two times the size it's suppose to be. Our image detection software also says it might even be inappropriate.
\n      
\n    
\n    
\n      
\n        Cancel\n      
\n      
\n        Add Photo\n        \n      
\n    
\n  
\n\n  
\n\n    
\n      
\n        Types\n        Variations\n        States\n      
\n    
\n\n    
Types
\n\n    
\n      
Standard
\n      
A standard modal
\n      
\n      $('.test.modal')\n        .modal('show')\n      ;\n      
\n    
\n\n    
\n      
Basic
\n      
A modal can reduce its complexity
\n      
\n      $('.basic.modal')\n        .modal('show')\n      ;\n      
\n    
\n\n    
Variations
\n\n    
\n      
Size
\n      
A modal can vary in size
\n      
\n      $('.small.modal')\n        .modal('show')\n      ;\n      
\n      
\n      $('.large.modal')\n        .modal('show')\n      ;\n      
\n    
\n\n    
States
\n\n    
\n      
Active
\n      
An active modal is visible on the page
\n      
\n        
...
\n      
\n    
\n  
\n\n  
\n\n    
Examples
\n\n    
\n      
Approve / Deny Callbacks
\n      
Modals will automatically tie approve deny callbacks to any positive/approve or negative/deny buttons. If a callback returns false it will prevent the modal from closing
\n      
\n      $('.basic.modal')\n        .modal('setting', {\n          closable  : false,\n          onDeny    : function(){\n            window.alert('Wait not yet!');\n            return false;\n          },\n          onApprove : function() {\n            window.alert('Approved!');\n          }\n        })\n        .modal('show')\n      ;\n      
\n    
\n\n    
\n      
Forcing a Choice
\n      
You can disable a modal's dimmer from being closed by click to force a user to make a choice
\n      
\n      $('.basic.modal')\n        .modal('setting', 'closable', false)\n        .modal('show')\n      ;\n      
\n    
\n\n    
\n      
Transitions
\n      
A modal can use any named ui transition.
\n      
\n        \n        \n        
Choose transition
\n        
\n          
Horizontal Flip
\n          
Vertical Flip
\n          
Fade Up
\n          
Fade
\n          
Scale
\n        
\n      
\n      
\n      
\n      $('.selection')\n        .dropdown({\n          onChange: function(value) {\n            $('.test.modal')\n              .modal('setting', 'transition', value)\n              .modal('show')\n            ;\n          }\n        })\n      ;\n      
\n    
\n\n    
\n      
Attach events
\n      
A modal can attach events to another element
\n      
\n      $('.test.modal')\n        .modal('attach events', '.test.button', 'show')\n      ;\n      
\n      
Launch modal
\n    
\n  
\n\n  
\n\n    
Usage
\n\n    
Initializing a modal
\n    
A modal can be included anywhere on the page. On initialization a modal's current size will be cached, and the element will be detached from the dom and moved inside a dimmer.
\n    
\n      
Why move modal content?
\n      
Having a modal inside the page dimmer allows for 3D animations without having the 3D perspective settings alter the rest of the page content. Additionally, content outside the dimmer can be blurred or altered without affecting the modal's content.
\n    
\n    
\n      $('.ui.modal')\n        .modal()\n      ;\n    
\n    
\n      
\n        \n        
\n          Modal Title\n        
\n        
\n          
\n            Content can appear on left\n          
\n          
\n            Content can appear on right\n          
\n        
\n        
\n          
Cancel
\n          
OK
\n        
\n      
\n    
\n\n    
Behavior
\n\n    
All the following behaviors can be called using the syntax:
\n    
\n    $('.ui.modal')\n      .modal('behavior name', argumentOne, argumentTwo)\n    ;\n    
\n\n    \n      \n        \n          \n          \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
BehaviorDescription
showShows the modal
hideHides the modal
toggleToggles the modal
refreshRefreshes centering of modal on page
show dimmerShows associated page dimmer
hide dimmerHides associated page dimmer
hide othersHides all modals not selected modal in a dimmer
hide allHides all visible modals in the same dimmer
cache sizesCaches current modal size
can fitReturns whether the modal can fit on the page
is activeReturns whether the modal is active
set activeSets modal to active
\n  
\n\n  
\n\n    
Settings
\n\n    
Modal Settings\n      
Modal settings modify the modal's behavior
\n    
\n\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
offset0A vertical offset to allow for content outside of modal, for example a close button, to be centered.
context\n          body\n          Selector or jquery object specifying the area to dim
closable\n          true\n          Settings to false will not allow you to close the modal by clicking on the dimmer
useCSS\n            true\n          Whether to use CSS animations instead of fallback javascript animations
transition\n            scale\n          Named transition to use when animating menu in and out. Fade is available without including ui transitions
duration\n            400\n          Duration of animation
easing\n            easeOutExpo\n          Animation easing is only used if javascript animations are used.
\n\n    
\n    
Callbacks\n      
Callbacks specify a function to occur after a specific behavior.
\n    
\n\n\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingContextDescription
onShowModalIs called after a modal is shown.
onHideModalIs called after a modal is hidden.
onApproveModalIs called after a positive or approve button is pressed
onDenyModalIs called after a negative or cancel button is pressed.
\n\n    
DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n\n    \n      \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
namespacemodalEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n            
\n      selector    : {\n        close    : '.close, .actions .button',\n        approve  : '.actions .positive, .actions .approve',\n        deny     : '.actions .negative, .actions .cancel'\n      },\n            
\n          
className\n            
\n      className : {\n        active    : 'active',\n        scrolling : 'scrolling'\n      }\n            
\n          
\n\n    
Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
nameModalName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
error\n            
\n      error   : {\n        method    : 'The method you called is not defined.''\n      }\n            
\n          
\n  
\n\n
",
      "renderSingleExtensions": false,
      "layout": "default",
      "css": "modal-demo",
      "description": "A modal displays content that temporarily blocks interactions with a web site",
      "type": "UI Module",
      "layoutRelativePath": "default.html.eco",
      "meta": {
        "layout": "default",
        "css": "modal-demo",
        "title": "Modal",
        "description": "A modal displays content that temporarily blocks interactions with a web site",
        "type": "UI Module"
      }
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/documents/modules/popup.html.eco",
      "relativePath": "modules/popup.html.eco",
      "basename": "popup",
      "outBasename": "popup",
      "extension": "eco",
      "outExtension": "html",
      "extensions": [
        "html",
        "eco"
      ],
      "filename": "popup.html.eco",
      "fullDirPath": "/home/jack/projects/semantic/server/documents/modules",
      "outPath": "/home/jack/projects/semantic/docs/modules/popup.html",
      "outDirPath": "/home/jack/projects/semantic/docs/modules",
      "outFilename": "popup.html",
      "relativeOutPath": "modules/popup.html",
      "relativeDirPath": "modules",
      "relativeOutDirPath": "modules",
      "relativeBase": "modules/popup",
      "relativeOutBase": "modules/popup",
      "contentType": "application/octet-stream",
      "outContentType": "text/html",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": "2013-12-04T09:15:26.521Z",
      "wtime": "2013-12-04T09:15:28.729Z",
      "exists": true,
      "encoding": "utf8",
      "source": "---\nlayout      : 'default'\ncss         : 'popup'\n\ntitle       : 'Popup'\ndescription : 'A popup displays additional information on top of a page element'\ntype        : 'UI Module'\n---\n\n\n<%- @partial('header', { tabs: 'module' }) %>\n
\n\n  
\n\n\n    
\n      
\n        Types\n        Variations\n      
\n    
\n\n    
\n      Types\n    
\n\n    
\n      
Popup
\n      
A standard popup
\n      \n    
\n\n    
\n      
Title
\n      
A popup can be formatted with a title
\n       PonyDog22\n    
\n\n    
\n      
HTML
\n      
A popup can be formatted with html
\n      
\">\n    
\n\n    
Variations
\n\n    
\n      
Size
\n      
A popup can be large or small
\n      \n      \n    
\n\n    
\n      
Inverted
\n      
A popup can have its colors inverted
\n      \n    
\n  
\n\n  
\n\n    
Initializing
\n\n    
Initializing an popup
\n    
\n    $('.ui.popup')\n      .popup()\n    ;\n    
\n\n    
\n      
Including content with HTML Metadata
\n      
Frequently used settings like, title, content, html, or offset or variation, can be included in html metadata
\n      
\n        \n        
\n          
Specifying Content
\n          
Popups can specify content in three ways:
\n          
    \n            
  • Using html title attribute
    • \n            
  • Using data-content attribute
    • \n            
  • Using data-html for specific html
    • \n            
  • Using the content property in the initialization of the popup
    • \n          
\n          
Popups can also specify some other frequently used settings using metadata
\n          
    \n            
  • data-variation: the popup variation to use 
    • \n            
  • data-offset: a pixel offset correction for popup
    • \n            
  • data-position: the side to position popup on
    • \n            
  • data-variation: the popup variation to use 
    • \n          
\n        
\n      
\n      
Initializing with metadata
\n      
\n        \n      
\n      
Or
\n      
Initializing with javascript content
\n      
\n      $('.ui.popup')\n        .popup({\n          content: 'Hello I am a popup'\n        })\n      ;\n      
\n    
\n\n    
Behavior
\n\n    
All the following behaviors can be called using the syntax:
\n    
\n    $('.your.element')\n      .popup('behavior name', argumentOne, argumentTwo)\n    ;\n    
\n\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
BehaviorDescription
showShows popup
hideHides popup
hide allHides all visible pop ups on the page
toggleToggles visibility of popup
is visibleReturns whether popup is visible
is hiddenReturns whether popup is hidden
existsReturns whether popup is created and inserted into the page
set position(position)Repositions a popup
removeRemoves popup from the page
\n\n  
\n\n\n  
\n\n    
\n      
Specifying a trigger event
\n      
A popup trigger event can be specified
\n      
\n    $('.example .teal.button')\n      .popup({\n        on: 'click'\n      })\n    ;\n    $('.example input')\n      .popup({\n        on: 'focus'\n      })\n    ;\n      
\n      
Click Me
\n      
\n        \n        \n      
\n    
\n\n    
\n      
Target Element
\n      
A popup can specify a different target element than itself to show a popup
\n      
\n    $('.test.button')\n      .popup({\n        position : 'top right',\n        target   : '.test.image',\n        title    : 'My favorite dog',\n        content  : 'My favorite dog would like other dogs as much as themselves'\n      })\n    ;\n      
\n      
Hover Me
\n      
\n      \n\n      
Inline or relative to page
\n      
A popup can either be inserted directly after an element, or added as a child element to the page's body.
\n      
\n        Using inline will allow your popups to go places other popups can't go, like inside fixed or absolutely positioned elements\n      
\n      
\n        If you want to style each popup individually it makes sense to keep popup inline: true. If you are worried that your pop up might mistakingly inherit styles that it shouldn't, you should set inline: false.\n      
\n      
\n      /* this will only style the popup if inline is true */\n      .example .popup {\n        color: #FF0000;\n      }\n      
\n      
\n    $('.inline.icon')\n      .popup({\n        inline: true\n      })\n    ;\n      
\n      \n      \n\n    
\n    
\n      
Positioning
\n      
A popup can be positioned to any side of an element. If space is not available, it will automatically search for a similar alternative position to use.
\n      
\n        \n        \n        \n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Specifying an offset
\n      
A popup position can be adjusted manually by specifying an offset property using data-offset=\"value\"
\n\n      \n    
\n\n\n    
\n      
Transitions
\n      
A popup can use any named ui transition.
\n       Home\n\n      
\n\n      
\n        \n        
Choose a transition
\n        \n        
\n          
Horizontal Flip
\n          
Vertical Flip
\n          
Fade Up
\n          
Fade
\n          
Scale
\n        
\n      
\n      
\n      
\n    $('.selection')\n      .dropdown({\n        onChange: function(value) {\n          $('.demo.icon')\n            .popup({\n              transition: value\n            })\n            .popup('toggle')\n          ;\n        }\n      })\n    ;\n      
\n    
\n  
\n\n  
\n\n    
\n      Popup Settings\n      
Settings to configure popup behavior
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
contextbodySelector or jquery object specifying where the popup should be created
positiontop centerPosition that the popup should appear
inlinefalseIf a popup is inline it will be created next to current element, allowing for local css rules to apply. It will not be removed from the DOM after being hidden. Otherwise popups will appended to body and removed after being hidden.
preservefalseWhether popup contents should be preserved in the page after being hidden, allowing it to re-appear slightly faster on subsequent loads.
onhoverEvent used to trigger popup. Can be either focus, click or hover
delay150Delay in milliseconds before showing a popup when using hover or focus events.
transition\n            slide down\n          Named transition to use when animating menu in and out. Fade and slide down are available without including ui transitions
duration\n            250\n          Duration of animation events
closabletrueWhen using on: 'click' specifies whether clicking the page should close the popup
targetfalseIf a selector or jQuery object is specified this allows the popup to be positioned relative to that element.
distanceAway0Offset for distance of popup from element
offset0Offset in pixels from calculated position
maxSearchDepth10Number of iterations before giving up search for popup position when a popup cannot fit on screen
\n\n    
\n      Content Settings\n      
Settings to specify popup contents
\n    
\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDescription
variationPopup variation to use, can use multiple variations with a space delimiter
contentContent to display
titleTitle to display alongside content
htmlHTML content to display instead of preformatted title and content
\n\n    
\n      DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
namespacepopupEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n            
\n    selector    : {\n      popup    : '.ui.popup'\n    }\n            
\n          		DOM Selectors used internally
metadata\n            
\n    metadata: {\n      content   : 'content',\n      html      : 'html',\n      offset    : 'offset',\n      position  : 'position',\n      title     : 'title',\n      variation : 'variation'\n    }\n            
\n          		HTML Data attributes used to store data
className\n            
\n    className   : {\n      loading     : 'loading',\n      popup       : 'ui popup',\n      position    : 'top left center bottom right',\n      visible     : 'visible'\n    }\n            
\n          		Class names used to attach style to state
\n\n    
\n\n    
\n      Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
namePopupName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
errors\n            
\n    error: {\n      content   : 'Your popup has no content specified',\n      method    : 'The method you called is not defined.',\n      recursion : 'Popup attempted to reposition element to fit, but could not find an adequate position.'\n    }\n            
\n          
\n\n  
\n\n",
      "content": "\n\n<%- @partial('header', { tabs: 'module' }) %>\n
\n\n  
\n\n\n    
\n      
\n        Types\n        Variations\n      
\n    
\n\n    
\n      Types\n    
\n\n    
\n      
Popup
\n      
A standard popup
\n      \n    
\n\n    
\n      
Title
\n      
A popup can be formatted with a title
\n       PonyDog22\n    
\n\n    
\n      
HTML
\n      
A popup can be formatted with html
\n      
\">\n    
\n\n    
Variations
\n\n    
\n      
Size
\n      
A popup can be large or small
\n      \n      \n    
\n\n    
\n      
Inverted
\n      
A popup can have its colors inverted
\n      \n    
\n  
\n\n  
\n\n    
Initializing
\n\n    
Initializing an popup
\n    
\n    $('.ui.popup')\n      .popup()\n    ;\n    
\n\n    
\n      
Including content with HTML Metadata
\n      
Frequently used settings like, title, content, html, or offset or variation, can be included in html metadata
\n      
\n        \n        
\n          
Specifying Content
\n          
Popups can specify content in three ways:
\n          
    \n            
  • Using html title attribute
    • \n            
  • Using data-content attribute
    • \n            
  • Using data-html for specific html
    • \n            
  • Using the content property in the initialization of the popup
    • \n          
\n          
Popups can also specify some other frequently used settings using metadata
\n          
    \n            
  • data-variation: the popup variation to use 
    • \n            
  • data-offset: a pixel offset correction for popup
    • \n            
  • data-position: the side to position popup on
    • \n            
  • data-variation: the popup variation to use 
    • \n          
\n        
\n      
\n      
Initializing with metadata
\n      
\n        \n      
\n      
Or
\n      
Initializing with javascript content
\n      
\n      $('.ui.popup')\n        .popup({\n          content: 'Hello I am a popup'\n        })\n      ;\n      
\n    
\n\n    
Behavior
\n\n    
All the following behaviors can be called using the syntax:
\n    
\n    $('.your.element')\n      .popup('behavior name', argumentOne, argumentTwo)\n    ;\n    
\n\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
BehaviorDescription
showShows popup
hideHides popup
hide allHides all visible pop ups on the page
toggleToggles visibility of popup
is visibleReturns whether popup is visible
is hiddenReturns whether popup is hidden
existsReturns whether popup is created and inserted into the page
set position(position)Repositions a popup
removeRemoves popup from the page
\n\n  
\n\n\n  
\n\n    
\n      
Specifying a trigger event
\n      
A popup trigger event can be specified
\n      
\n    $('.example .teal.button')\n      .popup({\n        on: 'click'\n      })\n    ;\n    $('.example input')\n      .popup({\n        on: 'focus'\n      })\n    ;\n      
\n      
Click Me
\n      
\n        \n        \n      
\n    
\n\n    
\n      
Target Element
\n      
A popup can specify a different target element than itself to show a popup
\n      
\n    $('.test.button')\n      .popup({\n        position : 'top right',\n        target   : '.test.image',\n        title    : 'My favorite dog',\n        content  : 'My favorite dog would like other dogs as much as themselves'\n      })\n    ;\n      
\n      
Hover Me
\n      
\n      \n\n      
Inline or relative to page
\n      
A popup can either be inserted directly after an element, or added as a child element to the page's body.
\n      
\n        Using inline will allow your popups to go places other popups can't go, like inside fixed or absolutely positioned elements\n      
\n      
\n        If you want to style each popup individually it makes sense to keep popup inline: true. If you are worried that your pop up might mistakingly inherit styles that it shouldn't, you should set inline: false.\n      
\n      
\n      /* this will only style the popup if inline is true */\n      .example .popup {\n        color: #FF0000;\n      }\n      
\n      
\n    $('.inline.icon')\n      .popup({\n        inline: true\n      })\n    ;\n      
\n      \n      \n\n    
\n    
\n      
Positioning
\n      
A popup can be positioned to any side of an element. If space is not available, it will automatically search for a similar alternative position to use.
\n      
\n        \n        \n        \n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Specifying an offset
\n      
A popup position can be adjusted manually by specifying an offset property using data-offset=\"value\"
\n\n      \n    
\n\n\n    
\n      
Transitions
\n      
A popup can use any named ui transition.
\n       Home\n\n      
\n\n      
\n        \n        
Choose a transition
\n        \n        
\n          
Horizontal Flip
\n          
Vertical Flip
\n          
Fade Up
\n          
Fade
\n          
Scale
\n        
\n      
\n      
\n      
\n    $('.selection')\n      .dropdown({\n        onChange: function(value) {\n          $('.demo.icon')\n            .popup({\n              transition: value\n            })\n            .popup('toggle')\n          ;\n        }\n      })\n    ;\n      
\n    
\n  
\n\n  
\n\n    
\n      Popup Settings\n      
Settings to configure popup behavior
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
contextbodySelector or jquery object specifying where the popup should be created
positiontop centerPosition that the popup should appear
inlinefalseIf a popup is inline it will be created next to current element, allowing for local css rules to apply. It will not be removed from the DOM after being hidden. Otherwise popups will appended to body and removed after being hidden.
preservefalseWhether popup contents should be preserved in the page after being hidden, allowing it to re-appear slightly faster on subsequent loads.
onhoverEvent used to trigger popup. Can be either focus, click or hover
delay150Delay in milliseconds before showing a popup when using hover or focus events.
transition\n            slide down\n          Named transition to use when animating menu in and out. Fade and slide down are available without including ui transitions
duration\n            250\n          Duration of animation events
closabletrueWhen using on: 'click' specifies whether clicking the page should close the popup
targetfalseIf a selector or jQuery object is specified this allows the popup to be positioned relative to that element.
distanceAway0Offset for distance of popup from element
offset0Offset in pixels from calculated position
maxSearchDepth10Number of iterations before giving up search for popup position when a popup cannot fit on screen
\n\n    
\n      Content Settings\n      
Settings to specify popup contents
\n    
\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDescription
variationPopup variation to use, can use multiple variations with a space delimiter
contentContent to display
titleTitle to display alongside content
htmlHTML content to display instead of preformatted title and content
\n\n    
\n      DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
namespacepopupEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n            
\n    selector    : {\n      popup    : '.ui.popup'\n    }\n            
\n          		DOM Selectors used internally
metadata\n            
\n    metadata: {\n      content   : 'content',\n      html      : 'html',\n      offset    : 'offset',\n      position  : 'position',\n      title     : 'title',\n      variation : 'variation'\n    }\n            
\n          		HTML Data attributes used to store data
className\n            
\n    className   : {\n      loading     : 'loading',\n      popup       : 'ui popup',\n      position    : 'top left center bottom right',\n      visible     : 'visible'\n    }\n            
\n          		Class names used to attach style to state
\n\n    
\n\n    
\n      Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
namePopupName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
errors\n            
\n    error: {\n      content   : 'Your popup has no content specified',\n      method    : 'The method you called is not defined.',\n      recursion : 'Popup attempted to reposition element to fit, but could not find an adequate position.'\n    }\n            
\n          
\n\n  
\n\n",
      "tags": null,
      "render": true,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": "Popup",
      "name": "popup.html",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "modules-popup",
      "url": "/modules/popup.html",
      "urls": [
        "/modules/popup.html"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": true,
      "header": "layout      : 'default'\ncss         : 'popup'\n\ntitle       : 'Popup'\ndescription : 'A popup displays additional information on top of a page element'\ntype        : 'UI Module'",
      "parser": "yaml",
      "body": "\n\n<%- @partial('header', { tabs: 'module' }) %>\n
\n\n  
\n\n\n    
\n      
\n        Types\n        Variations\n      
\n    
\n\n    
\n      Types\n    
\n\n    
\n      
Popup
\n      
A standard popup
\n      \n    
\n\n    
\n      
Title
\n      
A popup can be formatted with a title
\n       PonyDog22\n    
\n\n    
\n      
HTML
\n      
A popup can be formatted with html
\n      
\">\n    
\n\n    
Variations
\n\n    
\n      
Size
\n      
A popup can be large or small
\n      \n      \n    
\n\n    
\n      
Inverted
\n      
A popup can have its colors inverted
\n      \n    
\n  
\n\n  
\n\n    
Initializing
\n\n    
Initializing an popup
\n    
\n    $('.ui.popup')\n      .popup()\n    ;\n    
\n\n    
\n      
Including content with HTML Metadata
\n      
Frequently used settings like, title, content, html, or offset or variation, can be included in html metadata
\n      
\n        \n        
\n          
Specifying Content
\n          
Popups can specify content in three ways:
\n          
    \n            
  • Using html title attribute
    • \n            
  • Using data-content attribute
    • \n            
  • Using data-html for specific html
    • \n            
  • Using the content property in the initialization of the popup
    • \n          
\n          
Popups can also specify some other frequently used settings using metadata
\n          
    \n            
  • data-variation: the popup variation to use 
    • \n            
  • data-offset: a pixel offset correction for popup
    • \n            
  • data-position: the side to position popup on
    • \n            
  • data-variation: the popup variation to use 
    • \n          
\n        
\n      
\n      
Initializing with metadata
\n      
\n        \n      
\n      
Or
\n      
Initializing with javascript content
\n      
\n      $('.ui.popup')\n        .popup({\n          content: 'Hello I am a popup'\n        })\n      ;\n      
\n    
\n\n    
Behavior
\n\n    
All the following behaviors can be called using the syntax:
\n    
\n    $('.your.element')\n      .popup('behavior name', argumentOne, argumentTwo)\n    ;\n    
\n\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
BehaviorDescription
showShows popup
hideHides popup
hide allHides all visible pop ups on the page
toggleToggles visibility of popup
is visibleReturns whether popup is visible
is hiddenReturns whether popup is hidden
existsReturns whether popup is created and inserted into the page
set position(position)Repositions a popup
removeRemoves popup from the page
\n\n  
\n\n\n  
\n\n    
\n      
Specifying a trigger event
\n      
A popup trigger event can be specified
\n      
\n    $('.example .teal.button')\n      .popup({\n        on: 'click'\n      })\n    ;\n    $('.example input')\n      .popup({\n        on: 'focus'\n      })\n    ;\n      
\n      
Click Me
\n      
\n        \n        \n      
\n    
\n\n    
\n      
Target Element
\n      
A popup can specify a different target element than itself to show a popup
\n      
\n    $('.test.button')\n      .popup({\n        position : 'top right',\n        target   : '.test.image',\n        title    : 'My favorite dog',\n        content  : 'My favorite dog would like other dogs as much as themselves'\n      })\n    ;\n      
\n      
Hover Me
\n      
\n      \n\n      
Inline or relative to page
\n      
A popup can either be inserted directly after an element, or added as a child element to the page's body.
\n      
\n        Using inline will allow your popups to go places other popups can't go, like inside fixed or absolutely positioned elements\n      
\n      
\n        If you want to style each popup individually it makes sense to keep popup inline: true. If you are worried that your pop up might mistakingly inherit styles that it shouldn't, you should set inline: false.\n      
\n      
\n      /* this will only style the popup if inline is true */\n      .example .popup {\n        color: #FF0000;\n      }\n      
\n      
\n    $('.inline.icon')\n      .popup({\n        inline: true\n      })\n    ;\n      
\n      \n      \n\n    
\n    
\n      
Positioning
\n      
A popup can be positioned to any side of an element. If space is not available, it will automatically search for a similar alternative position to use.
\n      
\n        \n        \n        \n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Specifying an offset
\n      
A popup position can be adjusted manually by specifying an offset property using data-offset=\"value\"
\n\n      \n    
\n\n\n    
\n      
Transitions
\n      
A popup can use any named ui transition.
\n       Home\n\n      
\n\n      
\n        \n        
Choose a transition
\n        \n        
\n          
Horizontal Flip
\n          
Vertical Flip
\n          
Fade Up
\n          
Fade
\n          
Scale
\n        
\n      
\n      
\n      
\n    $('.selection')\n      .dropdown({\n        onChange: function(value) {\n          $('.demo.icon')\n            .popup({\n              transition: value\n            })\n            .popup('toggle')\n          ;\n        }\n      })\n    ;\n      
\n    
\n  
\n\n  
\n\n    
\n      Popup Settings\n      
Settings to configure popup behavior
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
contextbodySelector or jquery object specifying where the popup should be created
positiontop centerPosition that the popup should appear
inlinefalseIf a popup is inline it will be created next to current element, allowing for local css rules to apply. It will not be removed from the DOM after being hidden. Otherwise popups will appended to body and removed after being hidden.
preservefalseWhether popup contents should be preserved in the page after being hidden, allowing it to re-appear slightly faster on subsequent loads.
onhoverEvent used to trigger popup. Can be either focus, click or hover
delay150Delay in milliseconds before showing a popup when using hover or focus events.
transition\n            slide down\n          Named transition to use when animating menu in and out. Fade and slide down are available without including ui transitions
duration\n            250\n          Duration of animation events
closabletrueWhen using on: 'click' specifies whether clicking the page should close the popup
targetfalseIf a selector or jQuery object is specified this allows the popup to be positioned relative to that element.
distanceAway0Offset for distance of popup from element
offset0Offset in pixels from calculated position
maxSearchDepth10Number of iterations before giving up search for popup position when a popup cannot fit on screen
\n\n    
\n      Content Settings\n      
Settings to specify popup contents
\n    
\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDescription
variationPopup variation to use, can use multiple variations with a space delimiter
contentContent to display
titleTitle to display alongside content
htmlHTML content to display instead of preformatted title and content
\n\n    
\n      DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
namespacepopupEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n            
\n    selector    : {\n      popup    : '.ui.popup'\n    }\n            
\n          		DOM Selectors used internally
metadata\n            
\n    metadata: {\n      content   : 'content',\n      html      : 'html',\n      offset    : 'offset',\n      position  : 'position',\n      title     : 'title',\n      variation : 'variation'\n    }\n            
\n          		HTML Data attributes used to store data
className\n            
\n    className   : {\n      loading     : 'loading',\n      popup       : 'ui popup',\n      position    : 'top left center bottom right',\n      visible     : 'visible'\n    }\n            
\n          		Class names used to attach style to state
\n\n    
\n\n    
\n      Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
namePopupName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
errors\n            
\n    error: {\n      content   : 'Your popup has no content specified',\n      method    : 'The method you called is not defined.',\n      recursion : 'Popup attempted to reposition element to fit, but could not find an adequate position.'\n    }\n            
\n          
\n\n  
\n\n",
      "rendered": true,
      "contentRendered": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  \n  \n  \n  \n\n  \n\n  \n  \n  Popup | Semantic UI\n\n  \n  \n\n  \n\n  \n  \n  \n\n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n\n  \n  \n\n\n  
\n    \n       Close Menu\n    \n    \n       Download\n    \n    
\n      \n        Introduction\n      \n      
\n        \n          Definitions\n        \n          Overview\n        \n          Types\n        \n          Variations\n        \n          What's Different\n        \n      
\n    
\n    
\n      Project\n      
\n        \n          Contributing\n        \n          Set-up\n        \n      
\n    
\n    
\n      Elements\n      
\n        \n          Button\n        \n          Divider\n        \n          Header\n        \n          Icon\n        \n          Image\n        \n          Input\n        \n          Label\n        \n          Loader\n        \n          Progress\n        \n          Reveal\n        \n          Segment\n        \n          Step\n        \n      
\n    
\n    
\n      Collections\n      
\n        \n          Breadcrumb\n        \n          Form\n        \n          Grid\n        \n          Menu\n        \n          Message\n        \n          Table\n        \n      
\n    
\n    
\n      Views\n      
\n        \n          Comment\n        \n          Feed\n        \n          Item\n        \n          List\n        \n      
\n    
\n    
\n      Modules\n      
\n        \n          Accordion\n        \n          Checkbox\n        \n          Dimmer\n        \n          Dropdown\n        \n          Modal\n        \n          Popup\n        \n          Rating\n        \n          Shape\n        \n          Sidebar\n        \n          Transition\n        \n      
\n    
\n    
\n      Behavior\n      
\n        \n          Form Validation\n        \n      
\n    
\n    
\n      Style Guide\n      
\n        \n          CSS\n        \n          Javascript\n        \n          Language\n        \n      
\n    
\n\n  
\n\n  
\n    
\n       Content\n      
\n        UI Module: Popup\n      
\n      \n      \n      \n      
\n        6 of 10\n        
\n          \n            
\n              1. Accordion\n            
\n          \n            
\n              2. Checkbox\n            
\n          \n            
\n              3. Dimmer\n            
\n          \n            
\n              4. Dropdown\n            
\n          \n            
\n              5. Modal\n            
\n          \n            
\n              6. Popup\n            
\n          \n            
\n              7. Rating\n            
\n          \n            
\n              8. Shape\n            
\n          \n            
\n              9. Sidebar\n            
\n          \n            
\n              10. Transition\n            
\n          \n        
\n      
\n      \n      \n      \n      
\n        \n        
\n          \n        
\n        \n        \n\n        \n          \n        \n        \n          \n        \n        \n        \n          \n        \n        \n      
\n    
\n  
\n    
\n      \n      Menu\n    
\n  \n\n\n\n
\n  
\n    
\n\n      
\n        Popup\n        \n      
\n\n      
A popup displays additional information on top of a page element
\n      \n      \n      \n        Learn about Modules\n        \n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n    \n    \n    \n    \n      \n        \n      \n        \n      \n        \n      \n        \n      \n      
\n        \n          Definition\n          \n        \n          Examples\n          \n        \n          Usage\n          \n        \n          Settings\n          \n        \n      
\n      \n      
\n        \n          Definition\n          \n        \n          Examples\n          \n        \n          Usage\n          \n        \n          Settings\n          \n        \n      
\n    \n  
\n
\n
\n\n  
\n\n\n    
\n      
\n        Types\n        Variations\n      
\n    
\n\n    
\n      Types\n    
\n\n    
\n      
Popup
\n      
A standard popup
\n      \n    
\n\n    
\n      
Title
\n      
A popup can be formatted with a title
\n       PonyDog22\n    
\n\n    
\n      
HTML
\n      
A popup can be formatted with html
\n      
\">\n    
\n\n    
Variations
\n\n    
\n      
Size
\n      
A popup can be large or small
\n      \n      \n    
\n\n    
\n      
Inverted
\n      
A popup can have its colors inverted
\n      \n    
\n  
\n\n  
\n\n    
Initializing
\n\n    
Initializing an popup
\n    
\n    $('.ui.popup')\n      .popup()\n    ;\n    
\n\n    
\n      
Including content with HTML Metadata
\n      
Frequently used settings like, title, content, html, or offset or variation, can be included in html metadata
\n      
\n        \n        
\n          
Specifying Content
\n          
Popups can specify content in three ways:
\n          
    \n            
  • Using html title attribute
    • \n            
  • Using data-content attribute
    • \n            
  • Using data-html for specific html
    • \n            
  • Using the content property in the initialization of the popup
    • \n          
\n          
Popups can also specify some other frequently used settings using metadata
\n          
    \n            
  • data-variation: the popup variation to use 
    • \n            
  • data-offset: a pixel offset correction for popup
    • \n            
  • data-position: the side to position popup on
    • \n            
  • data-variation: the popup variation to use 
    • \n          
\n        
\n      
\n      
Initializing with metadata
\n      
\n        \n      
\n      
Or
\n      
Initializing with javascript content
\n      
\n      $('.ui.popup')\n        .popup({\n          content: 'Hello I am a popup'\n        })\n      ;\n      
\n    
\n\n    
Behavior
\n\n    
All the following behaviors can be called using the syntax:
\n    
\n    $('.your.element')\n      .popup('behavior name', argumentOne, argumentTwo)\n    ;\n    
\n\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
BehaviorDescription
showShows popup
hideHides popup
hide allHides all visible pop ups on the page
toggleToggles visibility of popup
is visibleReturns whether popup is visible
is hiddenReturns whether popup is hidden
existsReturns whether popup is created and inserted into the page
set position(position)Repositions a popup
removeRemoves popup from the page
\n\n  
\n\n\n  
\n\n    
\n      
Specifying a trigger event
\n      
A popup trigger event can be specified
\n      
\n    $('.example .teal.button')\n      .popup({\n        on: 'click'\n      })\n    ;\n    $('.example input')\n      .popup({\n        on: 'focus'\n      })\n    ;\n      
\n      
Click Me
\n      
\n        \n        \n      
\n    
\n\n    
\n      
Target Element
\n      
A popup can specify a different target element than itself to show a popup
\n      
\n    $('.test.button')\n      .popup({\n        position : 'top right',\n        target   : '.test.image',\n        title    : 'My favorite dog',\n        content  : 'My favorite dog would like other dogs as much as themselves'\n      })\n    ;\n      
\n      
Hover Me
\n      
\n      \n\n      
Inline or relative to page
\n      
A popup can either be inserted directly after an element, or added as a child element to the page's body.
\n      
\n        Using inline will allow your popups to go places other popups can't go, like inside fixed or absolutely positioned elements\n      
\n      
\n        If you want to style each popup individually it makes sense to keep popup inline: true. If you are worried that your pop up might mistakingly inherit styles that it shouldn't, you should set inline: false.\n      
\n      
\n      /* this will only style the popup if inline is true */\n      .example .popup {\n        color: #FF0000;\n      }\n      
\n      
\n    $('.inline.icon')\n      .popup({\n        inline: true\n      })\n    ;\n      
\n      \n      \n\n    
\n    
\n      
Positioning
\n      
A popup can be positioned to any side of an element. If space is not available, it will automatically search for a similar alternative position to use.
\n      
\n        \n        \n        \n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Specifying an offset
\n      
A popup position can be adjusted manually by specifying an offset property using data-offset=\"value\"
\n\n      \n    
\n\n\n    
\n      
Transitions
\n      
A popup can use any named ui transition.
\n       Home\n\n      
\n\n      
\n        \n        
Choose a transition
\n        \n        
\n          
Horizontal Flip
\n          
Vertical Flip
\n          
Fade Up
\n          
Fade
\n          
Scale
\n        
\n      
\n      
\n      
\n    $('.selection')\n      .dropdown({\n        onChange: function(value) {\n          $('.demo.icon')\n            .popup({\n              transition: value\n            })\n            .popup('toggle')\n          ;\n        }\n      })\n    ;\n      
\n    
\n  
\n\n  
\n\n    
\n      Popup Settings\n      
Settings to configure popup behavior
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
contextbodySelector or jquery object specifying where the popup should be created
positiontop centerPosition that the popup should appear
inlinefalseIf a popup is inline it will be created next to current element, allowing for local css rules to apply. It will not be removed from the DOM after being hidden. Otherwise popups will appended to body and removed after being hidden.
preservefalseWhether popup contents should be preserved in the page after being hidden, allowing it to re-appear slightly faster on subsequent loads.
onhoverEvent used to trigger popup. Can be either focus, click or hover
delay150Delay in milliseconds before showing a popup when using hover or focus events.
transition\n            slide down\n          Named transition to use when animating menu in and out. Fade and slide down are available without including ui transitions
duration\n            250\n          Duration of animation events
closabletrueWhen using on: 'click' specifies whether clicking the page should close the popup
targetfalseIf a selector or jQuery object is specified this allows the popup to be positioned relative to that element.
distanceAway0Offset for distance of popup from element
offset0Offset in pixels from calculated position
maxSearchDepth10Number of iterations before giving up search for popup position when a popup cannot fit on screen
\n\n    
\n      Content Settings\n      
Settings to specify popup contents
\n    
\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDescription
variationPopup variation to use, can use multiple variations with a space delimiter
contentContent to display
titleTitle to display alongside content
htmlHTML content to display instead of preformatted title and content
\n\n    
\n      DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
namespacepopupEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n            
\n    selector    : {\n      popup    : '.ui.popup'\n    }\n            
\n          		DOM Selectors used internally
metadata\n            
\n    metadata: {\n      content   : 'content',\n      html      : 'html',\n      offset    : 'offset',\n      position  : 'position',\n      title     : 'title',\n      variation : 'variation'\n    }\n            
\n          		HTML Data attributes used to store data
className\n            
\n    className   : {\n      loading     : 'loading',\n      popup       : 'ui popup',\n      position    : 'top left center bottom right',\n      visible     : 'visible'\n    }\n            
\n          		Class names used to attach style to state
\n\n    
\n\n    
\n      Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
namePopupName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
errors\n            
\n    error: {\n      content   : 'Your popup has no content specified',\n      method    : 'The method you called is not defined.',\n      recursion : 'Popup attempted to reposition element to fit, but could not find an adequate position.'\n    }\n            
\n          
\n\n  
\n\n\n\n\n",
      "contentRenderedWithoutLayouts": "\n\n\n\n
\n  
\n    
\n\n      
\n        Popup\n        \n      
\n\n      
A popup displays additional information on top of a page element
\n      \n      \n      \n        Learn about Modules\n        \n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n    \n    \n    \n    \n      \n        \n      \n        \n      \n        \n      \n        \n      \n      
\n        \n          Definition\n          \n        \n          Examples\n          \n        \n          Usage\n          \n        \n          Settings\n          \n        \n      
\n      \n      
\n        \n          Definition\n          \n        \n          Examples\n          \n        \n          Usage\n          \n        \n          Settings\n          \n        \n      
\n    \n  
\n
\n
\n\n  
\n\n\n    
\n      
\n        Types\n        Variations\n      
\n    
\n\n    
\n      Types\n    
\n\n    
\n      
Popup
\n      
A standard popup
\n      \n    
\n\n    
\n      
Title
\n      
A popup can be formatted with a title
\n       PonyDog22\n    
\n\n    
\n      
HTML
\n      
A popup can be formatted with html
\n      
\">\n    
\n\n    
Variations
\n\n    
\n      
Size
\n      
A popup can be large or small
\n      \n      \n    
\n\n    
\n      
Inverted
\n      
A popup can have its colors inverted
\n      \n    
\n  
\n\n  
\n\n    
Initializing
\n\n    
Initializing an popup
\n    
\n    $('.ui.popup')\n      .popup()\n    ;\n    
\n\n    
\n      
Including content with HTML Metadata
\n      
Frequently used settings like, title, content, html, or offset or variation, can be included in html metadata
\n      
\n        \n        
\n          
Specifying Content
\n          
Popups can specify content in three ways:
\n          
    \n            
  • Using html title attribute
    • \n            
  • Using data-content attribute
    • \n            
  • Using data-html for specific html
    • \n            
  • Using the content property in the initialization of the popup
    • \n          
\n          
Popups can also specify some other frequently used settings using metadata
\n          
    \n            
  • data-variation: the popup variation to use 
    • \n            
  • data-offset: a pixel offset correction for popup
    • \n            
  • data-position: the side to position popup on
    • \n            
  • data-variation: the popup variation to use 
    • \n          
\n        
\n      
\n      
Initializing with metadata
\n      
\n        \n      
\n      
Or
\n      
Initializing with javascript content
\n      
\n      $('.ui.popup')\n        .popup({\n          content: 'Hello I am a popup'\n        })\n      ;\n      
\n    
\n\n    
Behavior
\n\n    
All the following behaviors can be called using the syntax:
\n    
\n    $('.your.element')\n      .popup('behavior name', argumentOne, argumentTwo)\n    ;\n    
\n\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
BehaviorDescription
showShows popup
hideHides popup
hide allHides all visible pop ups on the page
toggleToggles visibility of popup
is visibleReturns whether popup is visible
is hiddenReturns whether popup is hidden
existsReturns whether popup is created and inserted into the page
set position(position)Repositions a popup
removeRemoves popup from the page
\n\n  
\n\n\n  
\n\n    
\n      
Specifying a trigger event
\n      
A popup trigger event can be specified
\n      
\n    $('.example .teal.button')\n      .popup({\n        on: 'click'\n      })\n    ;\n    $('.example input')\n      .popup({\n        on: 'focus'\n      })\n    ;\n      
\n      
Click Me
\n      
\n        \n        \n      
\n    
\n\n    
\n      
Target Element
\n      
A popup can specify a different target element than itself to show a popup
\n      
\n    $('.test.button')\n      .popup({\n        position : 'top right',\n        target   : '.test.image',\n        title    : 'My favorite dog',\n        content  : 'My favorite dog would like other dogs as much as themselves'\n      })\n    ;\n      
\n      
Hover Me
\n      
\n      \n\n      
Inline or relative to page
\n      
A popup can either be inserted directly after an element, or added as a child element to the page's body.
\n      
\n        Using inline will allow your popups to go places other popups can't go, like inside fixed or absolutely positioned elements\n      
\n      
\n        If you want to style each popup individually it makes sense to keep popup inline: true. If you are worried that your pop up might mistakingly inherit styles that it shouldn't, you should set inline: false.\n      
\n      
\n      /* this will only style the popup if inline is true */\n      .example .popup {\n        color: #FF0000;\n      }\n      
\n      
\n    $('.inline.icon')\n      .popup({\n        inline: true\n      })\n    ;\n      
\n      \n      \n\n    
\n    
\n      
Positioning
\n      
A popup can be positioned to any side of an element. If space is not available, it will automatically search for a similar alternative position to use.
\n      
\n        \n        \n        \n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Specifying an offset
\n      
A popup position can be adjusted manually by specifying an offset property using data-offset=\"value\"
\n\n      \n    
\n\n\n    
\n      
Transitions
\n      
A popup can use any named ui transition.
\n       Home\n\n      
\n\n      
\n        \n        
Choose a transition
\n        \n        
\n          
Horizontal Flip
\n          
Vertical Flip
\n          
Fade Up
\n          
Fade
\n          
Scale
\n        
\n      
\n      
\n      
\n    $('.selection')\n      .dropdown({\n        onChange: function(value) {\n          $('.demo.icon')\n            .popup({\n              transition: value\n            })\n            .popup('toggle')\n          ;\n        }\n      })\n    ;\n      
\n    
\n  
\n\n  
\n\n    
\n      Popup Settings\n      
Settings to configure popup behavior
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
contextbodySelector or jquery object specifying where the popup should be created
positiontop centerPosition that the popup should appear
inlinefalseIf a popup is inline it will be created next to current element, allowing for local css rules to apply. It will not be removed from the DOM after being hidden. Otherwise popups will appended to body and removed after being hidden.
preservefalseWhether popup contents should be preserved in the page after being hidden, allowing it to re-appear slightly faster on subsequent loads.
onhoverEvent used to trigger popup. Can be either focus, click or hover
delay150Delay in milliseconds before showing a popup when using hover or focus events.
transition\n            slide down\n          Named transition to use when animating menu in and out. Fade and slide down are available without including ui transitions
duration\n            250\n          Duration of animation events
closabletrueWhen using on: 'click' specifies whether clicking the page should close the popup
targetfalseIf a selector or jQuery object is specified this allows the popup to be positioned relative to that element.
distanceAway0Offset for distance of popup from element
offset0Offset in pixels from calculated position
maxSearchDepth10Number of iterations before giving up search for popup position when a popup cannot fit on screen
\n\n    
\n      Content Settings\n      
Settings to specify popup contents
\n    
\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDescription
variationPopup variation to use, can use multiple variations with a space delimiter
contentContent to display
titleTitle to display alongside content
htmlHTML content to display instead of preformatted title and content
\n\n    
\n      DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
namespacepopupEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n            
\n    selector    : {\n      popup    : '.ui.popup'\n    }\n            
\n          		DOM Selectors used internally
metadata\n            
\n    metadata: {\n      content   : 'content',\n      html      : 'html',\n      offset    : 'offset',\n      position  : 'position',\n      title     : 'title',\n      variation : 'variation'\n    }\n            
\n          		HTML Data attributes used to store data
className\n            
\n    className   : {\n      loading     : 'loading',\n      popup       : 'ui popup',\n      position    : 'top left center bottom right',\n      visible     : 'visible'\n    }\n            
\n          		Class names used to attach style to state
\n\n    
\n\n    
\n      Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
namePopupName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
errors\n            
\n    error: {\n      content   : 'Your popup has no content specified',\n      method    : 'The method you called is not defined.',\n      recursion : 'Popup attempted to reposition element to fit, but could not find an adequate position.'\n    }\n            
\n          
\n\n  
\n\n",
      "renderSingleExtensions": false,
      "layout": "default",
      "css": "popup",
      "description": "A popup displays additional information on top of a page element",
      "type": "UI Module",
      "layoutRelativePath": "default.html.eco",
      "meta": {
        "layout": "default",
        "css": "popup",
        "title": "Popup",
        "description": "A popup displays additional information on top of a page element",
        "type": "UI Module"
      }
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/documents/modules/rating.html.eco",
      "relativePath": "modules/rating.html.eco",
      "basename": "rating",
      "outBasename": "rating",
      "extension": "eco",
      "outExtension": "html",
      "extensions": [
        "html",
        "eco"
      ],
      "filename": "rating.html.eco",
      "fullDirPath": "/home/jack/projects/semantic/server/documents/modules",
      "outPath": "/home/jack/projects/semantic/docs/modules/rating.html",
      "outDirPath": "/home/jack/projects/semantic/docs/modules",
      "outFilename": "rating.html",
      "relativeOutPath": "modules/rating.html",
      "relativeDirPath": "modules",
      "relativeOutDirPath": "modules",
      "relativeBase": "modules/rating",
      "relativeOutBase": "modules/rating",
      "contentType": "application/octet-stream",
      "outContentType": "text/html",
      "ctime": "2013-12-04T09:10:39.000Z",
      "mtime": "2013-12-04T09:10:39.000Z",
      "rtime": "2013-12-04T09:15:26.584Z",
      "wtime": "2013-12-04T09:15:28.733Z",
      "exists": true,
      "encoding": "utf8",
      "source": "---\nlayout      : 'default'\ncss         : 'rating'\n\ntitle       : 'Rating'\ndescription : 'A rating lets a user assess and view the desirability of content'\ntype        : 'UI Module'\n---\n\n<%- @partial('header', { tabs: 'module' }) %>\n\n\n\n
\n\n  
\n\n    
\n      
\n        Types\n        Variations\n      
\n    
\n\n    
Types
\n\n    
\n      
Rating
\n      
A basic rating
\n      
\n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Star
\n      
A rating can use a set of star icons
\n      
Star and heart rating types require the inclusion of semantic ui icons
\n      
\n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Heart
\n      
A rating can use a set of heart icons
\n      
\n        \n        \n        \n        \n        \n      
\n    
\n\n    
Variations
\n\n    
\n      
Size
\n      
A rating can vary in size
\n      
\n        
\n          \n          \n          \n          \n          \n        
\n      
\n      
\n        
\n          \n          \n          \n          \n          \n        
\n      
\n      
\n        
\n          \n          \n          \n          \n          \n        
\n      
\n      
\n        
\n          \n          \n          \n          \n          \n        
\n      
\n    
\n\n  
\n\n  
\n\n    
\n      
Setting existing values
\n      
Starting ratings can be set either using metadata values or the setting initialRating.
\n      
If a metadata rating is specified it will automatically override any initial rating. This way you can set a default value but also allow it to be overridden.
\n      
\n        
\n          \n          
\n            \n            \n            \n            \n            \n          
\n          
\n            
New York Dog Fair
\n            A fun day at the fair\n          
\n        
\n        
\n          \n          
\n            \n            \n            \n            \n            \n          
\n          
\n            
Dog Appreciation Day
\n            I night to tell your dog he's great\n          
\n        
\n      
\n    
\n\n    
\n      
Read-Only Ratings
\n      
You can disable or enable interactive rating
\n      
\n      $('.toggle.example .rating')\n        .rating('disable')\n      ;\n      
\n      
\n      $('.toggle.example .rating')\n        .rating('enable')\n      ;\n      
\n      
\n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Clearing Ratings
\n      
When clearable is set to true you can clear the rating by clicking on the current start rating.
\n      
\n      $('.clearing.example .rating')\n        .rating('setting', 'clearable', true)\n      ;\n      
\n      
\n        \n        \n        \n        \n        \n      
\n    
\n  
\n\n  
\n\n    
Initializing
\n    
To change the range of your rating, simply adjust the number of icons in the initialized html
\n    
\n      To use any variations besides the basic rating ui icons must be included to provide the additional icons required.\n    
\n    
\n      $('.ui.rating')\n        .rating()\n      ;\n    
\n    
\n      
\n        \n        \n        \n        \n        \n      
\n    
\n\n    
Behavior
\n\n    
All the following behaviors can be called using the syntax:
\n    
\n    $('.ui.rating')\n      .modal('behavior name', argumentOne, argumentTwo)\n    ;\n    
\n\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
BehaviorDescription
set rating(rating)Sets rating programmatically
get ratingGets current rating
disableDisables interactive rating mode
enableEnables interactive rating mode
clear ratingClears current rating
\n  
\n\n  
\n    
\n      Rating Settings\n      
Rating settings modify the rating's behavior
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
initialRating0A number representing the default rating to apply
clearablefalseIf enabled clicking on the current star rating will clear the rating
interactivetrueWhether to enable user's ability to rate
\n\n    
\n      Callbacks\n      
Callbacks specify a function to occur after a specific behavior.
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n      \n    
SettingContextDescription
onRate(value)RatingIs called after user selects a new rating
\n\n    
\n      DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
namespaceratingEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n            
\n      selector  : {\n        icon : '.icon'\n      }\n            
\n          
className\n            
\n      className : {\n        active     : 'active',\n        hover      : 'hover',\n        loading    : 'loading'\n      },\n            
\n          
\n\n\n    
\n      Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
nameRatingName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
error\n            
\n      error   : {\n        action    : 'You called a rating action that was not defined'\n      }\n            
\n          
\n  
\n\n
\n",
      "content": "<%- @partial('header', { tabs: 'module' }) %>\n\n\n\n
\n\n  
\n\n    
\n      
\n        Types\n        Variations\n      
\n    
\n\n    
Types
\n\n    
\n      
Rating
\n      
A basic rating
\n      
\n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Star
\n      
A rating can use a set of star icons
\n      
Star and heart rating types require the inclusion of semantic ui icons
\n      
\n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Heart
\n      
A rating can use a set of heart icons
\n      
\n        \n        \n        \n        \n        \n      
\n    
\n\n    
Variations
\n\n    
\n      
Size
\n      
A rating can vary in size
\n      
\n        
\n          \n          \n          \n          \n          \n        
\n      
\n      
\n        
\n          \n          \n          \n          \n          \n        
\n      
\n      
\n        
\n          \n          \n          \n          \n          \n        
\n      
\n      
\n        
\n          \n          \n          \n          \n          \n        
\n      
\n    
\n\n  
\n\n  
\n\n    
\n      
Setting existing values
\n      
Starting ratings can be set either using metadata values or the setting initialRating.
\n      
If a metadata rating is specified it will automatically override any initial rating. This way you can set a default value but also allow it to be overridden.
\n      
\n        
\n          \n          
\n            \n            \n            \n            \n            \n          
\n          
\n            
New York Dog Fair
\n            A fun day at the fair\n          
\n        
\n        
\n          \n          
\n            \n            \n            \n            \n            \n          
\n          
\n            
Dog Appreciation Day
\n            I night to tell your dog he's great\n          
\n        
\n      
\n    
\n\n    
\n      
Read-Only Ratings
\n      
You can disable or enable interactive rating
\n      
\n      $('.toggle.example .rating')\n        .rating('disable')\n      ;\n      
\n      
\n      $('.toggle.example .rating')\n        .rating('enable')\n      ;\n      
\n      
\n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Clearing Ratings
\n      
When clearable is set to true you can clear the rating by clicking on the current start rating.
\n      
\n      $('.clearing.example .rating')\n        .rating('setting', 'clearable', true)\n      ;\n      
\n      
\n        \n        \n        \n        \n        \n      
\n    
\n  
\n\n  
\n\n    
Initializing
\n    
To change the range of your rating, simply adjust the number of icons in the initialized html
\n    
\n      To use any variations besides the basic rating ui icons must be included to provide the additional icons required.\n    
\n    
\n      $('.ui.rating')\n        .rating()\n      ;\n    
\n    
\n      
\n        \n        \n        \n        \n        \n      
\n    
\n\n    
Behavior
\n\n    
All the following behaviors can be called using the syntax:
\n    
\n    $('.ui.rating')\n      .modal('behavior name', argumentOne, argumentTwo)\n    ;\n    
\n\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
BehaviorDescription
set rating(rating)Sets rating programmatically
get ratingGets current rating
disableDisables interactive rating mode
enableEnables interactive rating mode
clear ratingClears current rating
\n  
\n\n  
\n    
\n      Rating Settings\n      
Rating settings modify the rating's behavior
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
initialRating0A number representing the default rating to apply
clearablefalseIf enabled clicking on the current star rating will clear the rating
interactivetrueWhether to enable user's ability to rate
\n\n    
\n      Callbacks\n      
Callbacks specify a function to occur after a specific behavior.
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n      \n    
SettingContextDescription
onRate(value)RatingIs called after user selects a new rating
\n\n    
\n      DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
namespaceratingEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n            
\n      selector  : {\n        icon : '.icon'\n      }\n            
\n          
className\n            
\n      className : {\n        active     : 'active',\n        hover      : 'hover',\n        loading    : 'loading'\n      },\n            
\n          
\n\n\n    
\n      Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
nameRatingName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
error\n            
\n      error   : {\n        action    : 'You called a rating action that was not defined'\n      }\n            
\n          
\n  
\n\n
",
      "tags": null,
      "render": true,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": "Rating",
      "name": "rating.html",
      "date": "2013-12-04T09:10:39.000Z",
      "slug": "modules-rating",
      "url": "/modules/rating.html",
      "urls": [
        "/modules/rating.html"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": true,
      "header": "layout      : 'default'\ncss         : 'rating'\n\ntitle       : 'Rating'\ndescription : 'A rating lets a user assess and view the desirability of content'\ntype        : 'UI Module'",
      "parser": "yaml",
      "body": "<%- @partial('header', { tabs: 'module' }) %>\n\n\n\n
\n\n  
\n\n    
\n      
\n        Types\n        Variations\n      
\n    
\n\n    
Types
\n\n    
\n      
Rating
\n      
A basic rating
\n      
\n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Star
\n      
A rating can use a set of star icons
\n      
Star and heart rating types require the inclusion of semantic ui icons
\n      
\n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Heart
\n      
A rating can use a set of heart icons
\n      
\n        \n        \n        \n        \n        \n      
\n    
\n\n    
Variations
\n\n    
\n      
Size
\n      
A rating can vary in size
\n      
\n        
\n          \n          \n          \n          \n          \n        
\n      
\n      
\n        
\n          \n          \n          \n          \n          \n        
\n      
\n      
\n        
\n          \n          \n          \n          \n          \n        
\n      
\n      
\n        
\n          \n          \n          \n          \n          \n        
\n      
\n    
\n\n  
\n\n  
\n\n    
\n      
Setting existing values
\n      
Starting ratings can be set either using metadata values or the setting initialRating.
\n      
If a metadata rating is specified it will automatically override any initial rating. This way you can set a default value but also allow it to be overridden.
\n      
\n        
\n          \n          
\n            \n            \n            \n            \n            \n          
\n          
\n            
New York Dog Fair
\n            A fun day at the fair\n          
\n        
\n        
\n          \n          
\n            \n            \n            \n            \n            \n          
\n          
\n            
Dog Appreciation Day
\n            I night to tell your dog he's great\n          
\n        
\n      
\n    
\n\n    
\n      
Read-Only Ratings
\n      
You can disable or enable interactive rating
\n      
\n      $('.toggle.example .rating')\n        .rating('disable')\n      ;\n      
\n      
\n      $('.toggle.example .rating')\n        .rating('enable')\n      ;\n      
\n      
\n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Clearing Ratings
\n      
When clearable is set to true you can clear the rating by clicking on the current start rating.
\n      
\n      $('.clearing.example .rating')\n        .rating('setting', 'clearable', true)\n      ;\n      
\n      
\n        \n        \n        \n        \n        \n      
\n    
\n  
\n\n  
\n\n    
Initializing
\n    
To change the range of your rating, simply adjust the number of icons in the initialized html
\n    
\n      To use any variations besides the basic rating ui icons must be included to provide the additional icons required.\n    
\n    
\n      $('.ui.rating')\n        .rating()\n      ;\n    
\n    
\n      
\n        \n        \n        \n        \n        \n      
\n    
\n\n    
Behavior
\n\n    
All the following behaviors can be called using the syntax:
\n    
\n    $('.ui.rating')\n      .modal('behavior name', argumentOne, argumentTwo)\n    ;\n    
\n\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
BehaviorDescription
set rating(rating)Sets rating programmatically
get ratingGets current rating
disableDisables interactive rating mode
enableEnables interactive rating mode
clear ratingClears current rating
\n  
\n\n  
\n    
\n      Rating Settings\n      
Rating settings modify the rating's behavior
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
initialRating0A number representing the default rating to apply
clearablefalseIf enabled clicking on the current star rating will clear the rating
interactivetrueWhether to enable user's ability to rate
\n\n    
\n      Callbacks\n      
Callbacks specify a function to occur after a specific behavior.
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n      \n    
SettingContextDescription
onRate(value)RatingIs called after user selects a new rating
\n\n    
\n      DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
namespaceratingEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n            
\n      selector  : {\n        icon : '.icon'\n      }\n            
\n          
className\n            
\n      className : {\n        active     : 'active',\n        hover      : 'hover',\n        loading    : 'loading'\n      },\n            
\n          
\n\n\n    
\n      Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
nameRatingName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
error\n            
\n      error   : {\n        action    : 'You called a rating action that was not defined'\n      }\n            
\n          
\n  
\n\n
",
      "rendered": true,
      "contentRendered": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  \n  \n  \n  \n\n  \n\n  \n  \n  Rating | Semantic UI\n\n  \n  \n\n  \n\n  \n  \n  \n\n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n\n  \n  \n\n\n  
\n    \n       Close Menu\n    \n    \n       Download\n    \n    
\n      \n        Introduction\n      \n      
\n        \n          Definitions\n        \n          Overview\n        \n          Types\n        \n          Variations\n        \n          What's Different\n        \n      
\n    
\n    
\n      Project\n      
\n        \n          Contributing\n        \n          Set-up\n        \n      
\n    
\n    
\n      Elements\n      
\n        \n          Button\n        \n          Divider\n        \n          Header\n        \n          Icon\n        \n          Image\n        \n          Input\n        \n          Label\n        \n          Loader\n        \n          Progress\n        \n          Reveal\n        \n          Segment\n        \n          Step\n        \n      
\n    
\n    
\n      Collections\n      
\n        \n          Breadcrumb\n        \n          Form\n        \n          Grid\n        \n          Menu\n        \n          Message\n        \n          Table\n        \n      
\n    
\n    
\n      Views\n      
\n        \n          Comment\n        \n          Feed\n        \n          Item\n        \n          List\n        \n      
\n    
\n    
\n      Modules\n      
\n        \n          Accordion\n        \n          Checkbox\n        \n          Dimmer\n        \n          Dropdown\n        \n          Modal\n        \n          Popup\n        \n          Rating\n        \n          Shape\n        \n          Sidebar\n        \n          Transition\n        \n      
\n    
\n    
\n      Behavior\n      
\n        \n          Form Validation\n        \n      
\n    
\n    
\n      Style Guide\n      
\n        \n          CSS\n        \n          Javascript\n        \n          Language\n        \n      
\n    
\n\n  
\n\n  
\n    
\n       Content\n      
\n        UI Module: Rating\n      
\n      \n      \n      \n      
\n        7 of 10\n        
\n          \n            
\n              1. Accordion\n            
\n          \n            
\n              2. Checkbox\n            
\n          \n            
\n              3. Dimmer\n            
\n          \n            
\n              4. Dropdown\n            
\n          \n            
\n              5. Modal\n            
\n          \n            
\n              6. Popup\n            
\n          \n            
\n              7. Rating\n            
\n          \n            
\n              8. Shape\n            
\n          \n            
\n              9. Sidebar\n            
\n          \n            
\n              10. Transition\n            
\n          \n        
\n      
\n      \n      \n      \n      
\n        \n        
\n          \n        
\n        \n        \n\n        \n          \n        \n        \n          \n        \n        \n        \n          \n        \n        \n      
\n    
\n  
\n    
\n      \n      Menu\n    
\n  \n\n
\n  
\n    
\n\n      
\n        Rating\n        \n      
\n\n      
A rating lets a user assess and view the desirability of content
\n      \n      \n      \n        Learn about Modules\n        \n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n    \n    \n    \n    \n      \n        \n      \n        \n      \n        \n      \n        \n      \n      
\n        \n          Definition\n          \n        \n          Examples\n          \n        \n          Usage\n          \n        \n          Settings\n          \n        \n      
\n      \n      
\n        \n          Definition\n          \n        \n          Examples\n          \n        \n          Usage\n          \n        \n          Settings\n          \n        \n      
\n    \n  
\n
\n\n\n\n
\n\n  
\n\n    
\n      
\n        Types\n        Variations\n      
\n    
\n\n    
Types
\n\n    
\n      
Rating
\n      
A basic rating
\n      
\n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Star
\n      
A rating can use a set of star icons
\n      
Star and heart rating types require the inclusion of semantic ui icons
\n      
\n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Heart
\n      
A rating can use a set of heart icons
\n      
\n        \n        \n        \n        \n        \n      
\n    
\n\n    
Variations
\n\n    
\n      
Size
\n      
A rating can vary in size
\n      
\n        
\n          \n          \n          \n          \n          \n        
\n      
\n      
\n        
\n          \n          \n          \n          \n          \n        
\n      
\n      
\n        
\n          \n          \n          \n          \n          \n        
\n      
\n      
\n        
\n          \n          \n          \n          \n          \n        
\n      
\n    
\n\n  
\n\n  
\n\n    
\n      
Setting existing values
\n      
Starting ratings can be set either using metadata values or the setting initialRating.
\n      
If a metadata rating is specified it will automatically override any initial rating. This way you can set a default value but also allow it to be overridden.
\n      
\n        
\n          \n          
\n            \n            \n            \n            \n            \n          
\n          
\n            
New York Dog Fair
\n            A fun day at the fair\n          
\n        
\n        
\n          \n          
\n            \n            \n            \n            \n            \n          
\n          
\n            
Dog Appreciation Day
\n            I night to tell your dog he's great\n          
\n        
\n      
\n    
\n\n    
\n      
Read-Only Ratings
\n      
You can disable or enable interactive rating
\n      
\n      $('.toggle.example .rating')\n        .rating('disable')\n      ;\n      
\n      
\n      $('.toggle.example .rating')\n        .rating('enable')\n      ;\n      
\n      
\n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Clearing Ratings
\n      
When clearable is set to true you can clear the rating by clicking on the current start rating.
\n      
\n      $('.clearing.example .rating')\n        .rating('setting', 'clearable', true)\n      ;\n      
\n      
\n        \n        \n        \n        \n        \n      
\n    
\n  
\n\n  
\n\n    
Initializing
\n    
To change the range of your rating, simply adjust the number of icons in the initialized html
\n    
\n      To use any variations besides the basic rating ui icons must be included to provide the additional icons required.\n    
\n    
\n      $('.ui.rating')\n        .rating()\n      ;\n    
\n    
\n      
\n        \n        \n        \n        \n        \n      
\n    
\n\n    
Behavior
\n\n    
All the following behaviors can be called using the syntax:
\n    
\n    $('.ui.rating')\n      .modal('behavior name', argumentOne, argumentTwo)\n    ;\n    
\n\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
BehaviorDescription
set rating(rating)Sets rating programmatically
get ratingGets current rating
disableDisables interactive rating mode
enableEnables interactive rating mode
clear ratingClears current rating
\n  
\n\n  
\n    
\n      Rating Settings\n      
Rating settings modify the rating's behavior
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
initialRating0A number representing the default rating to apply
clearablefalseIf enabled clicking on the current star rating will clear the rating
interactivetrueWhether to enable user's ability to rate
\n\n    
\n      Callbacks\n      
Callbacks specify a function to occur after a specific behavior.
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n      \n    
SettingContextDescription
onRate(value)RatingIs called after user selects a new rating
\n\n    
\n      DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
namespaceratingEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n            
\n      selector  : {\n        icon : '.icon'\n      }\n            
\n          
className\n            
\n      className : {\n        active     : 'active',\n        hover      : 'hover',\n        loading    : 'loading'\n      },\n            
\n          
\n\n\n    
\n      Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
nameRatingName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
error\n            
\n      error   : {\n        action    : 'You called a rating action that was not defined'\n      }\n            
\n          
\n  
\n\n
\n\n\n",
      "contentRenderedWithoutLayouts": "\n\n
\n  
\n    
\n\n      
\n        Rating\n        \n      
\n\n      
A rating lets a user assess and view the desirability of content
\n      \n      \n      \n        Learn about Modules\n        \n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n    \n    \n    \n    \n      \n        \n      \n        \n      \n        \n      \n        \n      \n      
\n        \n          Definition\n          \n        \n          Examples\n          \n        \n          Usage\n          \n        \n          Settings\n          \n        \n      
\n      \n      
\n        \n          Definition\n          \n        \n          Examples\n          \n        \n          Usage\n          \n        \n          Settings\n          \n        \n      
\n    \n  
\n
\n\n\n\n
\n\n  
\n\n    
\n      
\n        Types\n        Variations\n      
\n    
\n\n    
Types
\n\n    
\n      
Rating
\n      
A basic rating
\n      
\n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Star
\n      
A rating can use a set of star icons
\n      
Star and heart rating types require the inclusion of semantic ui icons
\n      
\n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Heart
\n      
A rating can use a set of heart icons
\n      
\n        \n        \n        \n        \n        \n      
\n    
\n\n    
Variations
\n\n    
\n      
Size
\n      
A rating can vary in size
\n      
\n        
\n          \n          \n          \n          \n          \n        
\n      
\n      
\n        
\n          \n          \n          \n          \n          \n        
\n      
\n      
\n        
\n          \n          \n          \n          \n          \n        
\n      
\n      
\n        
\n          \n          \n          \n          \n          \n        
\n      
\n    
\n\n  
\n\n  
\n\n    
\n      
Setting existing values
\n      
Starting ratings can be set either using metadata values or the setting initialRating.
\n      
If a metadata rating is specified it will automatically override any initial rating. This way you can set a default value but also allow it to be overridden.
\n      
\n        
\n          \n          
\n            \n            \n            \n            \n            \n          
\n          
\n            
New York Dog Fair
\n            A fun day at the fair\n          
\n        
\n        
\n          \n          
\n            \n            \n            \n            \n            \n          
\n          
\n            
Dog Appreciation Day
\n            I night to tell your dog he's great\n          
\n        
\n      
\n    
\n\n    
\n      
Read-Only Ratings
\n      
You can disable or enable interactive rating
\n      
\n      $('.toggle.example .rating')\n        .rating('disable')\n      ;\n      
\n      
\n      $('.toggle.example .rating')\n        .rating('enable')\n      ;\n      
\n      
\n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Clearing Ratings
\n      
When clearable is set to true you can clear the rating by clicking on the current start rating.
\n      
\n      $('.clearing.example .rating')\n        .rating('setting', 'clearable', true)\n      ;\n      
\n      
\n        \n        \n        \n        \n        \n      
\n    
\n  
\n\n  
\n\n    
Initializing
\n    
To change the range of your rating, simply adjust the number of icons in the initialized html
\n    
\n      To use any variations besides the basic rating ui icons must be included to provide the additional icons required.\n    
\n    
\n      $('.ui.rating')\n        .rating()\n      ;\n    
\n    
\n      
\n        \n        \n        \n        \n        \n      
\n    
\n\n    
Behavior
\n\n    
All the following behaviors can be called using the syntax:
\n    
\n    $('.ui.rating')\n      .modal('behavior name', argumentOne, argumentTwo)\n    ;\n    
\n\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
BehaviorDescription
set rating(rating)Sets rating programmatically
get ratingGets current rating
disableDisables interactive rating mode
enableEnables interactive rating mode
clear ratingClears current rating
\n  
\n\n  
\n    
\n      Rating Settings\n      
Rating settings modify the rating's behavior
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
initialRating0A number representing the default rating to apply
clearablefalseIf enabled clicking on the current star rating will clear the rating
interactivetrueWhether to enable user's ability to rate
\n\n    
\n      Callbacks\n      
Callbacks specify a function to occur after a specific behavior.
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n      \n    
SettingContextDescription
onRate(value)RatingIs called after user selects a new rating
\n\n    
\n      DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
namespaceratingEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n            
\n      selector  : {\n        icon : '.icon'\n      }\n            
\n          
className\n            
\n      className : {\n        active     : 'active',\n        hover      : 'hover',\n        loading    : 'loading'\n      },\n            
\n          
\n\n\n    
\n      Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
nameRatingName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
error\n            
\n      error   : {\n        action    : 'You called a rating action that was not defined'\n      }\n            
\n          
\n  
\n\n
",
      "renderSingleExtensions": false,
      "layout": "default",
      "css": "rating",
      "description": "A rating lets a user assess and view the desirability of content",
      "type": "UI Module",
      "layoutRelativePath": "default.html.eco",
      "meta": {
        "layout": "default",
        "css": "rating",
        "title": "Rating",
        "description": "A rating lets a user assess and view the desirability of content",
        "type": "UI Module"
      }
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/documents/modules/reveal.html.eco",
      "relativePath": "modules/reveal.html.eco",
      "basename": "reveal",
      "outBasename": "reveal",
      "extension": "eco",
      "outExtension": "html",
      "extensions": [
        "html",
        "eco"
      ],
      "filename": "reveal.html.eco",
      "fullDirPath": "/home/jack/projects/semantic/server/documents/modules",
      "outPath": "/home/jack/projects/semantic/docs/modules/reveal.html",
      "outDirPath": "/home/jack/projects/semantic/docs/modules",
      "outFilename": "reveal.html",
      "relativeOutPath": "modules/reveal.html",
      "relativeDirPath": "modules",
      "relativeOutDirPath": "modules",
      "relativeBase": "modules/reveal",
      "relativeOutBase": "modules/reveal",
      "contentType": "application/octet-stream",
      "outContentType": "text/html",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": "2013-12-04T09:15:26.645Z",
      "wtime": "2013-12-04T09:15:28.736Z",
      "exists": true,
      "encoding": "utf8",
      "source": "---\nlayout      : 'default'\ncss         : 'reveal'\n\ntitle       : 'Reveal'\ndescription : 'A reveal is an element that shows different content below it when hovered'\ntype        : 'UI Element'\n---\n\n<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Types\n      Variations\n      States\n    
\n  
\n\n  
Types
\n\n  
\n    
Reveal
\n    
A standard reveal has no special formatting
\n    
\n      A reveal will take no action unless a type of reveal is specified.\n    
\n    
\n      \n      \n    
\n  
\n  
\n    
Fade
\n    
An element can disappear to reveal content below
\n    
\n      \n      \n    
\n  
\n\n  
\n    
Move
\n    
An element can move in a direction to reveal content
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n\n  
\n    
\n      \n      \n    
\n  
\n\n  
\n    
\n      \n      \n    
\n  
\n\n  
\n    
Rotate
\n    
An element can rotate to reveal content below
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n\n  
Variations
\n\n  
\n    
Masked
\n    
An element can mask its content so that an element does not escape its parent
\n    
\n      \n      \n    
\n  
\n\n  
\n    
Instant
\n    
An element can show its content without delay
\n    
\n      \n      \n    
\n  
\n\n\n  
States
\n\n  
\n    
Disabled
\n    
A disabled reveal will not animate when hovered
\n    
\n      \n      \n    
\n  
\n\n\n\n
\n",
      "content": "<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Types\n      Variations\n      States\n    
\n  
\n\n  
Types
\n\n  
\n    
Reveal
\n    
A standard reveal has no special formatting
\n    
\n      A reveal will take no action unless a type of reveal is specified.\n    
\n    
\n      \n      \n    
\n  
\n  
\n    
Fade
\n    
An element can disappear to reveal content below
\n    
\n      \n      \n    
\n  
\n\n  
\n    
Move
\n    
An element can move in a direction to reveal content
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n\n  
\n    
\n      \n      \n    
\n  
\n\n  
\n    
\n      \n      \n    
\n  
\n\n  
\n    
Rotate
\n    
An element can rotate to reveal content below
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n\n  
Variations
\n\n  
\n    
Masked
\n    
An element can mask its content so that an element does not escape its parent
\n    
\n      \n      \n    
\n  
\n\n  
\n    
Instant
\n    
An element can show its content without delay
\n    
\n      \n      \n    
\n  
\n\n\n  
States
\n\n  
\n    
Disabled
\n    
A disabled reveal will not animate when hovered
\n    
\n      \n      \n    
\n  
\n\n\n\n
",
      "tags": null,
      "render": true,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": "Reveal",
      "name": "reveal.html",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "modules-reveal",
      "url": "/modules/reveal.html",
      "urls": [
        "/modules/reveal.html"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": true,
      "header": "layout      : 'default'\ncss         : 'reveal'\n\ntitle       : 'Reveal'\ndescription : 'A reveal is an element that shows different content below it when hovered'\ntype        : 'UI Element'",
      "parser": "yaml",
      "body": "<%- @partial('header') %>\n\n
\n\n  
\n    
\n      Types\n      Variations\n      States\n    
\n  
\n\n  
Types
\n\n  
\n    
Reveal
\n    
A standard reveal has no special formatting
\n    
\n      A reveal will take no action unless a type of reveal is specified.\n    
\n    
\n      \n      \n    
\n  
\n  
\n    
Fade
\n    
An element can disappear to reveal content below
\n    
\n      \n      \n    
\n  
\n\n  
\n    
Move
\n    
An element can move in a direction to reveal content
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n\n  
\n    
\n      \n      \n    
\n  
\n\n  
\n    
\n      \n      \n    
\n  
\n\n  
\n    
Rotate
\n    
An element can rotate to reveal content below
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n\n  
Variations
\n\n  
\n    
Masked
\n    
An element can mask its content so that an element does not escape its parent
\n    
\n      \n      \n    
\n  
\n\n  
\n    
Instant
\n    
An element can show its content without delay
\n    
\n      \n      \n    
\n  
\n\n\n  
States
\n\n  
\n    
Disabled
\n    
A disabled reveal will not animate when hovered
\n    
\n      \n      \n    
\n  
\n\n\n\n
",
      "rendered": true,
      "contentRendered": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  \n  \n  \n  \n\n  \n\n  \n  \n  Reveal | Semantic UI\n\n  \n  \n\n  \n\n  \n  \n  \n\n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n\n  \n  \n\n\n  
\n    \n       Close Menu\n    \n    \n       Download\n    \n    
\n      \n        Introduction\n      \n      
\n        \n          Definitions\n        \n          Overview\n        \n          Types\n        \n          Variations\n        \n          What's Different\n        \n      
\n    
\n    
\n      Project\n      
\n        \n          Contributing\n        \n          Set-up\n        \n      
\n    
\n    
\n      Elements\n      
\n        \n          Button\n        \n          Divider\n        \n          Header\n        \n          Icon\n        \n          Image\n        \n          Input\n        \n          Label\n        \n          Loader\n        \n          Progress\n        \n          Reveal\n        \n          Segment\n        \n          Step\n        \n      
\n    
\n    
\n      Collections\n      
\n        \n          Breadcrumb\n        \n          Form\n        \n          Grid\n        \n          Menu\n        \n          Message\n        \n          Table\n        \n      
\n    
\n    
\n      Views\n      
\n        \n          Comment\n        \n          Feed\n        \n          Item\n        \n          List\n        \n      
\n    
\n    
\n      Modules\n      
\n        \n          Accordion\n        \n          Checkbox\n        \n          Dimmer\n        \n          Dropdown\n        \n          Modal\n        \n          Popup\n        \n          Rating\n        \n          Shape\n        \n          Sidebar\n        \n          Transition\n        \n      
\n    
\n    
\n      Behavior\n      
\n        \n          Form Validation\n        \n      
\n    
\n    
\n      Style Guide\n      
\n        \n          CSS\n        \n          Javascript\n        \n          Language\n        \n      
\n    
\n\n  
\n\n  
\n    
\n       Content\n      
\n        UI Element: Reveal\n      
\n      \n      \n      \n      
\n        10 of 12\n        
\n          \n            
\n              1. Button\n            
\n          \n            
\n              2. Divider\n            
\n          \n            
\n              3. Header\n            
\n          \n            
\n              4. Icon\n            
\n          \n            
\n              5. Image\n            
\n          \n            
\n              6. Input\n            
\n          \n            
\n              7. Label\n            
\n          \n            
\n              8. Loader\n            
\n          \n            
\n              9. Progress\n            
\n          \n            
\n              10. Reveal\n            
\n          \n            
\n              11. Segment\n            
\n          \n            
\n              12. Step\n            
\n          \n        
\n      
\n      \n      \n      \n      
\n        \n        
\n          \n        
\n        \n        \n\n        \n          \n        \n        \n          \n        \n        \n        \n          \n        \n        \n      
\n    
\n  
\n    
\n      \n      Menu\n    
\n  \n\n
\n  
\n    
\n\n      
\n        Reveal\n        \n      
\n\n      
A reveal is an element that shows different content below it when hovered
\n      \n      
\n        Definition Mode\n        \n      
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n\n
\n\n  
\n    
\n      Types\n      Variations\n      States\n    
\n  
\n\n  
Types
\n\n  
\n    
Reveal
\n    
A standard reveal has no special formatting
\n    
\n      A reveal will take no action unless a type of reveal is specified.\n    
\n    
\n      \n      \n    
\n  
\n  
\n    
Fade
\n    
An element can disappear to reveal content below
\n    
\n      \n      \n    
\n  
\n\n  
\n    
Move
\n    
An element can move in a direction to reveal content
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n\n  
\n    
\n      \n      \n    
\n  
\n\n  
\n    
\n      \n      \n    
\n  
\n\n  
\n    
Rotate
\n    
An element can rotate to reveal content below
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n\n  
Variations
\n\n  
\n    
Masked
\n    
An element can mask its content so that an element does not escape its parent
\n    
\n      \n      \n    
\n  
\n\n  
\n    
Instant
\n    
An element can show its content without delay
\n    
\n      \n      \n    
\n  
\n\n\n  
States
\n\n  
\n    
Disabled
\n    
A disabled reveal will not animate when hovered
\n    
\n      \n      \n    
\n  
\n\n\n\n
\n\n\n",
      "contentRenderedWithoutLayouts": "\n\n
\n  
\n    
\n\n      
\n        Reveal\n        \n      
\n\n      
A reveal is an element that shows different content below it when hovered
\n      \n      
\n        Definition Mode\n        \n      
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n\n
\n\n  
\n    
\n      Types\n      Variations\n      States\n    
\n  
\n\n  
Types
\n\n  
\n    
Reveal
\n    
A standard reveal has no special formatting
\n    
\n      A reveal will take no action unless a type of reveal is specified.\n    
\n    
\n      \n      \n    
\n  
\n  
\n    
Fade
\n    
An element can disappear to reveal content below
\n    
\n      \n      \n    
\n  
\n\n  
\n    
Move
\n    
An element can move in a direction to reveal content
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n\n  
\n    
\n      \n      \n    
\n  
\n\n  
\n    
\n      \n      \n    
\n  
\n\n  
\n    
Rotate
\n    
An element can rotate to reveal content below
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n\n  
Variations
\n\n  
\n    
Masked
\n    
An element can mask its content so that an element does not escape its parent
\n    
\n      \n      \n    
\n  
\n\n  
\n    
Instant
\n    
An element can show its content without delay
\n    
\n      \n      \n    
\n  
\n\n\n  
States
\n\n  
\n    
Disabled
\n    
A disabled reveal will not animate when hovered
\n    
\n      \n      \n    
\n  
\n\n\n\n
",
      "renderSingleExtensions": false,
      "layout": "default",
      "css": "reveal",
      "description": "A reveal is an element that shows different content below it when hovered",
      "type": "UI Element",
      "layoutRelativePath": "default.html.eco",
      "meta": {
        "layout": "default",
        "css": "reveal",
        "title": "Reveal",
        "description": "A reveal is an element that shows different content below it when hovered",
        "type": "UI Element"
      }
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/documents/modules/shape.html.eco",
      "relativePath": "modules/shape.html.eco",
      "basename": "shape",
      "outBasename": "shape",
      "extension": "eco",
      "outExtension": "html",
      "extensions": [
        "html",
        "eco"
      ],
      "filename": "shape.html.eco",
      "fullDirPath": "/home/jack/projects/semantic/server/documents/modules",
      "outPath": "/home/jack/projects/semantic/docs/modules/shape.html",
      "outDirPath": "/home/jack/projects/semantic/docs/modules",
      "outFilename": "shape.html",
      "relativeOutPath": "modules/shape.html",
      "relativeDirPath": "modules",
      "relativeOutDirPath": "modules",
      "relativeBase": "modules/shape",
      "relativeOutBase": "modules/shape",
      "contentType": "application/octet-stream",
      "outContentType": "text/html",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": "2013-12-04T09:15:26.718Z",
      "wtime": "2013-12-04T09:15:28.741Z",
      "exists": true,
      "encoding": "utf8",
      "source": "---\nlayout      : 'default'\ncss         : 'shape'\n\ntitle       : 'Shape'\ndescription : 'A shape is a three dimensional object displayed on a two dimensional plane'\ntype        : 'UI Module'\n---\n\n\n\n\n<%- @partial('header', { tabs: 'module' }) %>\n\n
\n\n  
\n\n    
\n      
\n        Types\n        States\n      
\n    
\n\n    
Types
\n\n    
\n      
Shape
\n      
A standard shape
\n\n      
\n        \n        
\n          
Using Shapes
\n          
    \n            
  • A shape must have defined width and heights for each side or else text flow may change during animation
    • \n            
  • The module uses 3D transformations which are currently only supported in modern versions of Chrome, Safari, and Firefox.
    • \n          
\n        
\n      
\n\n\n      
\n      
\n        
\n          
This side starts visible.
\n          
This is yet another side
\n          
This is the last side
\n        
\n      
\n      
\n    
\n\n    
\n      
Cube
\n      
A cube shape is formatted so that each side is the face of a cube
\n      
Content must be included inside .content .center to display centered on a cube's side
\n      
\n        
\n          
\n            
\n              
\n                1\n              
\n            
\n          
\n          
\n            
\n              
\n                2\n              
\n            
\n          
\n          
\n            
\n              
\n                3\n              
\n            
\n          
\n          
\n            
\n              
\n                4\n              
\n            
\n          
\n          
\n            
\n              
\n                5\n              
\n            
\n          
\n          
\n            
\n              
\n                6\n              
\n            
\n          
\n        
\n      
\n\n      
\n      
\n        
\n        
\n        
\n        
\n      
\n      
\n        
\n        
\n      
\n\n    
\n\n    
\n      
Text
\n      
A text shape is formatted to allow for sides of text to be displayed
\n\n      
\n        
\n          
Did you know? This side starts visible.
\n          
Help, its another side!
\n          
This is the last side
\n        
\n      
\n\n      
\n      
\n        
\n        
\n        
\n        
\n      
\n      
\n        
\n        
\n      
\n    
\n  
\n\n  
\n\n    
\n      
Shape Types
\n      
Shapes do not have to be regular or have its sides match up in length and width to animate correctly.
\n\n      
Shape
\n      
\n        
Rectangle
\n        
Square
\n        
Irregular
\n      
\n      
\n      
\n        
\n          
\n            \n          
\n          
\n            \n          
\n          
\n            \n          
\n        
\n      
\n\n      
\n      
\n        
\n        
\n        
\n        
\n      
\n      
\n        
\n        
\n      
\n    
\n\n    
\n\n    
Shape with Content
\n    
Any type of element can be used as a side of a shape.
\n    
\n      
\n        
\n          
\n            
\n              
\n                \n                  \n                \n                \n              
\n              
\n                
Cute Dog
\n                
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n              
\n            
\n          
\n        
\n        
\n          
\n            
\n              
\n                \n                  \n                \n                \n              
\n              
\n                
Silly Dog
\n                
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
\n              
\n            
\n          
\n        
\n        
\n          
\n            
\n              
\n                \n                  \n                \n                \n              
\n              
\n                
5 days ago
\n                
Faithful Dog
\n                
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n              
\n            
\n          
\n        
\n      
\n    
\n\n    
\n      
\n        
\n          
\n            
\n              
\n                \n                  \n                \n                \n              
\n              
\n                
Cute Dog
\n                
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n              
\n            
\n          
\n        
\n        
\n          
\n            
\n              
\n                \n                  \n                \n                \n              
\n              
\n                
Silly Dog
\n                
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
\n              
\n            
\n          
\n        
\n        
\n          
\n            
\n              
\n                \n                  \n                \n                \n              
\n              
\n                
5 days ago
\n                
Faithful Dog
\n                
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n              
\n            
\n          
\n        
\n      
\n    
\n    
\n    
\n    $('.dog.shape')\n      .eq(0)\n        .shape('flip over')\n        .end()\n      .eq(1)\n        .shape('flip back')\n    ;\n    
\n  
\n\n  
\n\n    
Getting Started
\n\n    
Initializing a shape
\n    
\n      $('.shape').shape();\n    
\n\n    
Transitions automatically assume next side is the next sibling (or first if last element)
\n    
\n      $('.shape').shape('flip up');\n    
\n\n    
To manually set the next side to appear use a selector or jQuery object
\n    
\n    $('.shape')\n      .shape('set next side', '.second.side')\n      .shape('flip up')\n    ;\n    
\n\n    
Any internal method can be invoked programmatically
\n    
\n      $('.shape').shape('repaint');\n    
\n\n     
Behavior
\n\n    
All the following behaviors can be called using the syntax:
\n    
\n    $('.your.element')\n      .shape('behavior name', argumentOne, argumentTwo)\n    ;\n    
\n\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
BehaviorDescription
flip upFlips the shape upward
flip downFlips the shape downward
flip rightFlips the shape right
flip leftFlips the shape left
flip overFlips the shape over clock-wise
flip backFlips the shape over counter-clockwise
set next side(selector)Set the next side to a specific selector
is animatingReturns whether shape is currently animating
resetRemoves all inline styles
queue(animation)Queues an animationtill after current animation
repaintForces a reflow on element
set default sideSet the next side to next sibling to active element
set stage sizeSets shape to the content size of the next side
refreshRefreshes the selector cache for element sides
get transform downReturns translation for next side staged below
get transform leftReturns translation for next side staged left
get transform rightReturns translation for next side staged right
get transform upReturns translation for next side staged up
get transform downReturns translation for next side staged down
\n\n  
\n\n  
\n\n    
\n      Shape Settings\n      
Shape settings modify the shape's behavior
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
duration700msDuration of side change animation
\n\n    
\n\n    
\n      Callbacks\n      
Callbacks specify a function to occur after a specific behavior.
\n    
\n\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingContextDescription
beforeChangeNext SideIs called before side change
onChangeActive SideIs called after visible side change
\n\n    
\n\n    
\n      DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
namespaceshapeEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n            
\n            selector    : {\n              sides : '.sides',\n              side  : '.side'\n            }\n            
\n          
className\n            
\n            className   : {\n              animating : 'animating',\n              hidden    : 'hidden',\n              loading   : 'loading',\n              active    : 'active'\n            }\n            
\n          
\n\n    
\n\n    
\n      Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
nameShapeName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
error\n            
\n            error: {\n              side   : 'You tried to switch to a side that does not exist.',\n              method : 'The method you called is not defined'\n            }\n            
\n          
\n\n  
\n\n
",
      "content": "\n\n\n<%- @partial('header', { tabs: 'module' }) %>\n\n
\n\n  
\n\n    
\n      
\n        Types\n        States\n      
\n    
\n\n    
Types
\n\n    
\n      
Shape
\n      
A standard shape
\n\n      
\n        \n        
\n          
Using Shapes
\n          
    \n            
  • A shape must have defined width and heights for each side or else text flow may change during animation
    • \n            
  • The module uses 3D transformations which are currently only supported in modern versions of Chrome, Safari, and Firefox.
    • \n          
\n        
\n      
\n\n\n      
\n      
\n        
\n          
This side starts visible.
\n          
This is yet another side
\n          
This is the last side
\n        
\n      
\n      
\n    
\n\n    
\n      
Cube
\n      
A cube shape is formatted so that each side is the face of a cube
\n      
Content must be included inside .content .center to display centered on a cube's side
\n      
\n        
\n          
\n            
\n              
\n                1\n              
\n            
\n          
\n          
\n            
\n              
\n                2\n              
\n            
\n          
\n          
\n            
\n              
\n                3\n              
\n            
\n          
\n          
\n            
\n              
\n                4\n              
\n            
\n          
\n          
\n            
\n              
\n                5\n              
\n            
\n          
\n          
\n            
\n              
\n                6\n              
\n            
\n          
\n        
\n      
\n\n      
\n      
\n        
\n        
\n        
\n        
\n      
\n      
\n        
\n        
\n      
\n\n    
\n\n    
\n      
Text
\n      
A text shape is formatted to allow for sides of text to be displayed
\n\n      
\n        
\n          
Did you know? This side starts visible.
\n          
Help, its another side!
\n          
This is the last side
\n        
\n      
\n\n      
\n      
\n        
\n        
\n        
\n        
\n      
\n      
\n        
\n        
\n      
\n    
\n  
\n\n  
\n\n    
\n      
Shape Types
\n      
Shapes do not have to be regular or have its sides match up in length and width to animate correctly.
\n\n      
Shape
\n      
\n        
Rectangle
\n        
Square
\n        
Irregular
\n      
\n      
\n      
\n        
\n          
\n            \n          
\n          
\n            \n          
\n          
\n            \n          
\n        
\n      
\n\n      
\n      
\n        
\n        
\n        
\n        
\n      
\n      
\n        
\n        
\n      
\n    
\n\n    
\n\n    
Shape with Content
\n    
Any type of element can be used as a side of a shape.
\n    
\n      
\n        
\n          
\n            
\n              
\n                \n                  \n                \n                \n              
\n              
\n                
Cute Dog
\n                
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n              
\n            
\n          
\n        
\n        
\n          
\n            
\n              
\n                \n                  \n                \n                \n              
\n              
\n                
Silly Dog
\n                
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
\n              
\n            
\n          
\n        
\n        
\n          
\n            
\n              
\n                \n                  \n                \n                \n              
\n              
\n                
5 days ago
\n                
Faithful Dog
\n                
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n              
\n            
\n          
\n        
\n      
\n    
\n\n    
\n      
\n        
\n          
\n            
\n              
\n                \n                  \n                \n                \n              
\n              
\n                
Cute Dog
\n                
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n              
\n            
\n          
\n        
\n        
\n          
\n            
\n              
\n                \n                  \n                \n                \n              
\n              
\n                
Silly Dog
\n                
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
\n              
\n            
\n          
\n        
\n        
\n          
\n            
\n              
\n                \n                  \n                \n                \n              
\n              
\n                
5 days ago
\n                
Faithful Dog
\n                
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n              
\n            
\n          
\n        
\n      
\n    
\n    
\n    
\n    $('.dog.shape')\n      .eq(0)\n        .shape('flip over')\n        .end()\n      .eq(1)\n        .shape('flip back')\n    ;\n    
\n  
\n\n  
\n\n    
Getting Started
\n\n    
Initializing a shape
\n    
\n      $('.shape').shape();\n    
\n\n    
Transitions automatically assume next side is the next sibling (or first if last element)
\n    
\n      $('.shape').shape('flip up');\n    
\n\n    
To manually set the next side to appear use a selector or jQuery object
\n    
\n    $('.shape')\n      .shape('set next side', '.second.side')\n      .shape('flip up')\n    ;\n    
\n\n    
Any internal method can be invoked programmatically
\n    
\n      $('.shape').shape('repaint');\n    
\n\n     
Behavior
\n\n    
All the following behaviors can be called using the syntax:
\n    
\n    $('.your.element')\n      .shape('behavior name', argumentOne, argumentTwo)\n    ;\n    
\n\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
BehaviorDescription
flip upFlips the shape upward
flip downFlips the shape downward
flip rightFlips the shape right
flip leftFlips the shape left
flip overFlips the shape over clock-wise
flip backFlips the shape over counter-clockwise
set next side(selector)Set the next side to a specific selector
is animatingReturns whether shape is currently animating
resetRemoves all inline styles
queue(animation)Queues an animationtill after current animation
repaintForces a reflow on element
set default sideSet the next side to next sibling to active element
set stage sizeSets shape to the content size of the next side
refreshRefreshes the selector cache for element sides
get transform downReturns translation for next side staged below
get transform leftReturns translation for next side staged left
get transform rightReturns translation for next side staged right
get transform upReturns translation for next side staged up
get transform downReturns translation for next side staged down
\n\n  
\n\n  
\n\n    
\n      Shape Settings\n      
Shape settings modify the shape's behavior
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
duration700msDuration of side change animation
\n\n    
\n\n    
\n      Callbacks\n      
Callbacks specify a function to occur after a specific behavior.
\n    
\n\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingContextDescription
beforeChangeNext SideIs called before side change
onChangeActive SideIs called after visible side change
\n\n    
\n\n    
\n      DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
namespaceshapeEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n            
\n            selector    : {\n              sides : '.sides',\n              side  : '.side'\n            }\n            
\n          
className\n            
\n            className   : {\n              animating : 'animating',\n              hidden    : 'hidden',\n              loading   : 'loading',\n              active    : 'active'\n            }\n            
\n          
\n\n    
\n\n    
\n      Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
nameShapeName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
error\n            
\n            error: {\n              side   : 'You tried to switch to a side that does not exist.',\n              method : 'The method you called is not defined'\n            }\n            
\n          
\n\n  
\n\n
",
      "tags": null,
      "render": true,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": "Shape",
      "name": "shape.html",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "modules-shape",
      "url": "/modules/shape.html",
      "urls": [
        "/modules/shape.html"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": true,
      "header": "layout      : 'default'\ncss         : 'shape'\n\ntitle       : 'Shape'\ndescription : 'A shape is a three dimensional object displayed on a two dimensional plane'\ntype        : 'UI Module'",
      "parser": "yaml",
      "body": "\n\n\n<%- @partial('header', { tabs: 'module' }) %>\n\n
\n\n  
\n\n    
\n      
\n        Types\n        States\n      
\n    
\n\n    
Types
\n\n    
\n      
Shape
\n      
A standard shape
\n\n      
\n        \n        
\n          
Using Shapes
\n          
    \n            
  • A shape must have defined width and heights for each side or else text flow may change during animation
    • \n            
  • The module uses 3D transformations which are currently only supported in modern versions of Chrome, Safari, and Firefox.
    • \n          
\n        
\n      
\n\n\n      
\n      
\n        
\n          
This side starts visible.
\n          
This is yet another side
\n          
This is the last side
\n        
\n      
\n      
\n    
\n\n    
\n      
Cube
\n      
A cube shape is formatted so that each side is the face of a cube
\n      
Content must be included inside .content .center to display centered on a cube's side
\n      
\n        
\n          
\n            
\n              
\n                1\n              
\n            
\n          
\n          
\n            
\n              
\n                2\n              
\n            
\n          
\n          
\n            
\n              
\n                3\n              
\n            
\n          
\n          
\n            
\n              
\n                4\n              
\n            
\n          
\n          
\n            
\n              
\n                5\n              
\n            
\n          
\n          
\n            
\n              
\n                6\n              
\n            
\n          
\n        
\n      
\n\n      
\n      
\n        
\n        
\n        
\n        
\n      
\n      
\n        
\n        
\n      
\n\n    
\n\n    
\n      
Text
\n      
A text shape is formatted to allow for sides of text to be displayed
\n\n      
\n        
\n          
Did you know? This side starts visible.
\n          
Help, its another side!
\n          
This is the last side
\n        
\n      
\n\n      
\n      
\n        
\n        
\n        
\n        
\n      
\n      
\n        
\n        
\n      
\n    
\n  
\n\n  
\n\n    
\n      
Shape Types
\n      
Shapes do not have to be regular or have its sides match up in length and width to animate correctly.
\n\n      
Shape
\n      
\n        
Rectangle
\n        
Square
\n        
Irregular
\n      
\n      
\n      
\n        
\n          
\n            \n          
\n          
\n            \n          
\n          
\n            \n          
\n        
\n      
\n\n      
\n      
\n        
\n        
\n        
\n        
\n      
\n      
\n        
\n        
\n      
\n    
\n\n    
\n\n    
Shape with Content
\n    
Any type of element can be used as a side of a shape.
\n    
\n      
\n        
\n          
\n            
\n              
\n                \n                  \n                \n                \n              
\n              
\n                
Cute Dog
\n                
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n              
\n            
\n          
\n        
\n        
\n          
\n            
\n              
\n                \n                  \n                \n                \n              
\n              
\n                
Silly Dog
\n                
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
\n              
\n            
\n          
\n        
\n        
\n          
\n            
\n              
\n                \n                  \n                \n                \n              
\n              
\n                
5 days ago
\n                
Faithful Dog
\n                
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n              
\n            
\n          
\n        
\n      
\n    
\n\n    
\n      
\n        
\n          
\n            
\n              
\n                \n                  \n                \n                \n              
\n              
\n                
Cute Dog
\n                
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n              
\n            
\n          
\n        
\n        
\n          
\n            
\n              
\n                \n                  \n                \n                \n              
\n              
\n                
Silly Dog
\n                
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
\n              
\n            
\n          
\n        
\n        
\n          
\n            
\n              
\n                \n                  \n                \n                \n              
\n              
\n                
5 days ago
\n                
Faithful Dog
\n                
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n              
\n            
\n          
\n        
\n      
\n    
\n    
\n    
\n    $('.dog.shape')\n      .eq(0)\n        .shape('flip over')\n        .end()\n      .eq(1)\n        .shape('flip back')\n    ;\n    
\n  
\n\n  
\n\n    
Getting Started
\n\n    
Initializing a shape
\n    
\n      $('.shape').shape();\n    
\n\n    
Transitions automatically assume next side is the next sibling (or first if last element)
\n    
\n      $('.shape').shape('flip up');\n    
\n\n    
To manually set the next side to appear use a selector or jQuery object
\n    
\n    $('.shape')\n      .shape('set next side', '.second.side')\n      .shape('flip up')\n    ;\n    
\n\n    
Any internal method can be invoked programmatically
\n    
\n      $('.shape').shape('repaint');\n    
\n\n     
Behavior
\n\n    
All the following behaviors can be called using the syntax:
\n    
\n    $('.your.element')\n      .shape('behavior name', argumentOne, argumentTwo)\n    ;\n    
\n\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
BehaviorDescription
flip upFlips the shape upward
flip downFlips the shape downward
flip rightFlips the shape right
flip leftFlips the shape left
flip overFlips the shape over clock-wise
flip backFlips the shape over counter-clockwise
set next side(selector)Set the next side to a specific selector
is animatingReturns whether shape is currently animating
resetRemoves all inline styles
queue(animation)Queues an animationtill after current animation
repaintForces a reflow on element
set default sideSet the next side to next sibling to active element
set stage sizeSets shape to the content size of the next side
refreshRefreshes the selector cache for element sides
get transform downReturns translation for next side staged below
get transform leftReturns translation for next side staged left
get transform rightReturns translation for next side staged right
get transform upReturns translation for next side staged up
get transform downReturns translation for next side staged down
\n\n  
\n\n  
\n\n    
\n      Shape Settings\n      
Shape settings modify the shape's behavior
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
duration700msDuration of side change animation
\n\n    
\n\n    
\n      Callbacks\n      
Callbacks specify a function to occur after a specific behavior.
\n    
\n\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingContextDescription
beforeChangeNext SideIs called before side change
onChangeActive SideIs called after visible side change
\n\n    
\n\n    
\n      DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
namespaceshapeEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n            
\n            selector    : {\n              sides : '.sides',\n              side  : '.side'\n            }\n            
\n          
className\n            
\n            className   : {\n              animating : 'animating',\n              hidden    : 'hidden',\n              loading   : 'loading',\n              active    : 'active'\n            }\n            
\n          
\n\n    
\n\n    
\n      Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
nameShapeName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
error\n            
\n            error: {\n              side   : 'You tried to switch to a side that does not exist.',\n              method : 'The method you called is not defined'\n            }\n            
\n          
\n\n  
\n\n
",
      "rendered": true,
      "contentRendered": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  \n  \n  \n  \n\n  \n\n  \n  \n  Shape | Semantic UI\n\n  \n  \n\n  \n\n  \n  \n  \n\n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n\n  \n  \n\n\n  
\n    \n       Close Menu\n    \n    \n       Download\n    \n    
\n      \n        Introduction\n      \n      
\n        \n          Definitions\n        \n          Overview\n        \n          Types\n        \n          Variations\n        \n          What's Different\n        \n      
\n    
\n    
\n      Project\n      
\n        \n          Contributing\n        \n          Set-up\n        \n      
\n    
\n    
\n      Elements\n      
\n        \n          Button\n        \n          Divider\n        \n          Header\n        \n          Icon\n        \n          Image\n        \n          Input\n        \n          Label\n        \n          Loader\n        \n          Progress\n        \n          Reveal\n        \n          Segment\n        \n          Step\n        \n      
\n    
\n    
\n      Collections\n      
\n        \n          Breadcrumb\n        \n          Form\n        \n          Grid\n        \n          Menu\n        \n          Message\n        \n          Table\n        \n      
\n    
\n    
\n      Views\n      
\n        \n          Comment\n        \n          Feed\n        \n          Item\n        \n          List\n        \n      
\n    
\n    
\n      Modules\n      
\n        \n          Accordion\n        \n          Checkbox\n        \n          Dimmer\n        \n          Dropdown\n        \n          Modal\n        \n          Popup\n        \n          Rating\n        \n          Shape\n        \n          Sidebar\n        \n          Transition\n        \n      
\n    
\n    
\n      Behavior\n      
\n        \n          Form Validation\n        \n      
\n    
\n    
\n      Style Guide\n      
\n        \n          CSS\n        \n          Javascript\n        \n          Language\n        \n      
\n    
\n\n  
\n\n  
\n    
\n       Content\n      
\n        UI Module: Shape\n      
\n      \n      \n      \n      
\n        8 of 10\n        
\n          \n            
\n              1. Accordion\n            
\n          \n            
\n              2. Checkbox\n            
\n          \n            
\n              3. Dimmer\n            
\n          \n            
\n              4. Dropdown\n            
\n          \n            
\n              5. Modal\n            
\n          \n            
\n              6. Popup\n            
\n          \n            
\n              7. Rating\n            
\n          \n            
\n              8. Shape\n            
\n          \n            
\n              9. Sidebar\n            
\n          \n            
\n              10. Transition\n            
\n          \n        
\n      
\n      \n      \n      \n      
\n        \n        
\n          \n        
\n        \n        \n\n        \n          \n        \n        \n          \n        \n        \n        \n          \n        \n        \n      
\n    
\n  
\n    
\n      \n      Menu\n    
\n  \n\n\n\n\n
\n  
\n    
\n\n      
\n        Shape\n        \n      
\n\n      
A shape is a three dimensional object displayed on a two dimensional plane
\n      \n      \n      \n        Learn about Modules\n        \n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n    \n    \n    \n    \n      \n        \n      \n        \n      \n        \n      \n        \n      \n      
\n        \n          Definition\n          \n        \n          Examples\n          \n        \n          Usage\n          \n        \n          Settings\n          \n        \n      
\n      \n      
\n        \n          Definition\n          \n        \n          Examples\n          \n        \n          Usage\n          \n        \n          Settings\n          \n        \n      
\n    \n  
\n
\n\n
\n\n  
\n\n    
\n      
\n        Types\n        States\n      
\n    
\n\n    
Types
\n\n    
\n      
Shape
\n      
A standard shape
\n\n      
\n        \n        
\n          
Using Shapes
\n          
    \n            
  • A shape must have defined width and heights for each side or else text flow may change during animation
    • \n            
  • The module uses 3D transformations which are currently only supported in modern versions of Chrome, Safari, and Firefox.
    • \n          
\n        
\n      
\n\n\n      
\n      
\n        
\n          
This side starts visible.
\n          
This is yet another side
\n          
This is the last side
\n        
\n      
\n      
\n    
\n\n    
\n      
Cube
\n      
A cube shape is formatted so that each side is the face of a cube
\n      
Content must be included inside .content .center to display centered on a cube's side
\n      
\n        
\n          
\n            
\n              
\n                1\n              
\n            
\n          
\n          
\n            
\n              
\n                2\n              
\n            
\n          
\n          
\n            
\n              
\n                3\n              
\n            
\n          
\n          
\n            
\n              
\n                4\n              
\n            
\n          
\n          
\n            
\n              
\n                5\n              
\n            
\n          
\n          
\n            
\n              
\n                6\n              
\n            
\n          
\n        
\n      
\n\n      
\n      
\n        
\n        
\n        
\n        
\n      
\n      
\n        
\n        
\n      
\n\n    
\n\n    
\n      
Text
\n      
A text shape is formatted to allow for sides of text to be displayed
\n\n      
\n        
\n          
Did you know? This side starts visible.
\n          
Help, its another side!
\n          
This is the last side
\n        
\n      
\n\n      
\n      
\n        
\n        
\n        
\n        
\n      
\n      
\n        
\n        
\n      
\n    
\n  
\n\n  
\n\n    
\n      
Shape Types
\n      
Shapes do not have to be regular or have its sides match up in length and width to animate correctly.
\n\n      
Shape
\n      
\n        
Rectangle
\n        
Square
\n        
Irregular
\n      
\n      
\n      
\n        
\n          
\n            \n          
\n          
\n            \n          
\n          
\n            \n          
\n        
\n      
\n\n      
\n      
\n        
\n        
\n        
\n        
\n      
\n      
\n        
\n        
\n      
\n    
\n\n    
\n\n    
Shape with Content
\n    
Any type of element can be used as a side of a shape.
\n    
\n      
\n        
\n          
\n            
\n              
\n                \n                  \n                \n                \n              
\n              
\n                
Cute Dog
\n                
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n              
\n            
\n          
\n        
\n        
\n          
\n            
\n              
\n                \n                  \n                \n                \n              
\n              
\n                
Silly Dog
\n                
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
\n              
\n            
\n          
\n        
\n        
\n          
\n            
\n              
\n                \n                  \n                \n                \n              
\n              
\n                
5 days ago
\n                
Faithful Dog
\n                
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n              
\n            
\n          
\n        
\n      
\n    
\n\n    
\n      
\n        
\n          
\n            
\n              
\n                \n                  \n                \n                \n              
\n              
\n                
Cute Dog
\n                
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n              
\n            
\n          
\n        
\n        
\n          
\n            
\n              
\n                \n                  \n                \n                \n              
\n              
\n                
Silly Dog
\n                
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
\n              
\n            
\n          
\n        
\n        
\n          
\n            
\n              
\n                \n                  \n                \n                \n              
\n              
\n                
5 days ago
\n                
Faithful Dog
\n                
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n              
\n            
\n          
\n        
\n      
\n    
\n    
\n    
\n    $('.dog.shape')\n      .eq(0)\n        .shape('flip over')\n        .end()\n      .eq(1)\n        .shape('flip back')\n    ;\n    
\n  
\n\n  
\n\n    
Getting Started
\n\n    
Initializing a shape
\n    
\n      $('.shape').shape();\n    
\n\n    
Transitions automatically assume next side is the next sibling (or first if last element)
\n    
\n      $('.shape').shape('flip up');\n    
\n\n    
To manually set the next side to appear use a selector or jQuery object
\n    
\n    $('.shape')\n      .shape('set next side', '.second.side')\n      .shape('flip up')\n    ;\n    
\n\n    
Any internal method can be invoked programmatically
\n    
\n      $('.shape').shape('repaint');\n    
\n\n     
Behavior
\n\n    
All the following behaviors can be called using the syntax:
\n    
\n    $('.your.element')\n      .shape('behavior name', argumentOne, argumentTwo)\n    ;\n    
\n\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
BehaviorDescription
flip upFlips the shape upward
flip downFlips the shape downward
flip rightFlips the shape right
flip leftFlips the shape left
flip overFlips the shape over clock-wise
flip backFlips the shape over counter-clockwise
set next side(selector)Set the next side to a specific selector
is animatingReturns whether shape is currently animating
resetRemoves all inline styles
queue(animation)Queues an animationtill after current animation
repaintForces a reflow on element
set default sideSet the next side to next sibling to active element
set stage sizeSets shape to the content size of the next side
refreshRefreshes the selector cache for element sides
get transform downReturns translation for next side staged below
get transform leftReturns translation for next side staged left
get transform rightReturns translation for next side staged right
get transform upReturns translation for next side staged up
get transform downReturns translation for next side staged down
\n\n  
\n\n  
\n\n    
\n      Shape Settings\n      
Shape settings modify the shape's behavior
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
duration700msDuration of side change animation
\n\n    
\n\n    
\n      Callbacks\n      
Callbacks specify a function to occur after a specific behavior.
\n    
\n\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingContextDescription
beforeChangeNext SideIs called before side change
onChangeActive SideIs called after visible side change
\n\n    
\n\n    
\n      DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
namespaceshapeEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n            
\n            selector    : {\n              sides : '.sides',\n              side  : '.side'\n            }\n            
\n          
className\n            
\n            className   : {\n              animating : 'animating',\n              hidden    : 'hidden',\n              loading   : 'loading',\n              active    : 'active'\n            }\n            
\n          
\n\n    
\n\n    
\n      Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
nameShapeName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
error\n            
\n            error: {\n              side   : 'You tried to switch to a side that does not exist.',\n              method : 'The method you called is not defined'\n            }\n            
\n          
\n\n  
\n\n
\n\n\n",
      "contentRenderedWithoutLayouts": "\n\n\n\n\n
\n  
\n    
\n\n      
\n        Shape\n        \n      
\n\n      
A shape is a three dimensional object displayed on a two dimensional plane
\n      \n      \n      \n        Learn about Modules\n        \n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n    \n    \n    \n    \n      \n        \n      \n        \n      \n        \n      \n        \n      \n      
\n        \n          Definition\n          \n        \n          Examples\n          \n        \n          Usage\n          \n        \n          Settings\n          \n        \n      
\n      \n      
\n        \n          Definition\n          \n        \n          Examples\n          \n        \n          Usage\n          \n        \n          Settings\n          \n        \n      
\n    \n  
\n
\n\n
\n\n  
\n\n    
\n      
\n        Types\n        States\n      
\n    
\n\n    
Types
\n\n    
\n      
Shape
\n      
A standard shape
\n\n      
\n        \n        
\n          
Using Shapes
\n          
    \n            
  • A shape must have defined width and heights for each side or else text flow may change during animation
    • \n            
  • The module uses 3D transformations which are currently only supported in modern versions of Chrome, Safari, and Firefox.
    • \n          
\n        
\n      
\n\n\n      
\n      
\n        
\n          
This side starts visible.
\n          
This is yet another side
\n          
This is the last side
\n        
\n      
\n      
\n    
\n\n    
\n      
Cube
\n      
A cube shape is formatted so that each side is the face of a cube
\n      
Content must be included inside .content .center to display centered on a cube's side
\n      
\n        
\n          
\n            
\n              
\n                1\n              
\n            
\n          
\n          
\n            
\n              
\n                2\n              
\n            
\n          
\n          
\n            
\n              
\n                3\n              
\n            
\n          
\n          
\n            
\n              
\n                4\n              
\n            
\n          
\n          
\n            
\n              
\n                5\n              
\n            
\n          
\n          
\n            
\n              
\n                6\n              
\n            
\n          
\n        
\n      
\n\n      
\n      
\n        
\n        
\n        
\n        
\n      
\n      
\n        
\n        
\n      
\n\n    
\n\n    
\n      
Text
\n      
A text shape is formatted to allow for sides of text to be displayed
\n\n      
\n        
\n          
Did you know? This side starts visible.
\n          
Help, its another side!
\n          
This is the last side
\n        
\n      
\n\n      
\n      
\n        
\n        
\n        
\n        
\n      
\n      
\n        
\n        
\n      
\n    
\n  
\n\n  
\n\n    
\n      
Shape Types
\n      
Shapes do not have to be regular or have its sides match up in length and width to animate correctly.
\n\n      
Shape
\n      
\n        
Rectangle
\n        
Square
\n        
Irregular
\n      
\n      
\n      
\n        
\n          
\n            \n          
\n          
\n            \n          
\n          
\n            \n          
\n        
\n      
\n\n      
\n      
\n        
\n        
\n        
\n        
\n      
\n      
\n        
\n        
\n      
\n    
\n\n    
\n\n    
Shape with Content
\n    
Any type of element can be used as a side of a shape.
\n    
\n      
\n        
\n          
\n            
\n              
\n                \n                  \n                \n                \n              
\n              
\n                
Cute Dog
\n                
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n              
\n            
\n          
\n        
\n        
\n          
\n            
\n              
\n                \n                  \n                \n                \n              
\n              
\n                
Silly Dog
\n                
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
\n              
\n            
\n          
\n        
\n        
\n          
\n            
\n              
\n                \n                  \n                \n                \n              
\n              
\n                
5 days ago
\n                
Faithful Dog
\n                
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n              
\n            
\n          
\n        
\n      
\n    
\n\n    
\n      
\n        
\n          
\n            
\n              
\n                \n                  \n                \n                \n              
\n              
\n                
Cute Dog
\n                
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n              
\n            
\n          
\n        
\n        
\n          
\n            
\n              
\n                \n                  \n                \n                \n              
\n              
\n                
Silly Dog
\n                
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
\n              
\n            
\n          
\n        
\n        
\n          
\n            
\n              
\n                \n                  \n                \n                \n              
\n              
\n                
5 days ago
\n                
Faithful Dog
\n                
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n              
\n            
\n          
\n        
\n      
\n    
\n    
\n    
\n    $('.dog.shape')\n      .eq(0)\n        .shape('flip over')\n        .end()\n      .eq(1)\n        .shape('flip back')\n    ;\n    
\n  
\n\n  
\n\n    
Getting Started
\n\n    
Initializing a shape
\n    
\n      $('.shape').shape();\n    
\n\n    
Transitions automatically assume next side is the next sibling (or first if last element)
\n    
\n      $('.shape').shape('flip up');\n    
\n\n    
To manually set the next side to appear use a selector or jQuery object
\n    
\n    $('.shape')\n      .shape('set next side', '.second.side')\n      .shape('flip up')\n    ;\n    
\n\n    
Any internal method can be invoked programmatically
\n    
\n      $('.shape').shape('repaint');\n    
\n\n     
Behavior
\n\n    
All the following behaviors can be called using the syntax:
\n    
\n    $('.your.element')\n      .shape('behavior name', argumentOne, argumentTwo)\n    ;\n    
\n\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
BehaviorDescription
flip upFlips the shape upward
flip downFlips the shape downward
flip rightFlips the shape right
flip leftFlips the shape left
flip overFlips the shape over clock-wise
flip backFlips the shape over counter-clockwise
set next side(selector)Set the next side to a specific selector
is animatingReturns whether shape is currently animating
resetRemoves all inline styles
queue(animation)Queues an animationtill after current animation
repaintForces a reflow on element
set default sideSet the next side to next sibling to active element
set stage sizeSets shape to the content size of the next side
refreshRefreshes the selector cache for element sides
get transform downReturns translation for next side staged below
get transform leftReturns translation for next side staged left
get transform rightReturns translation for next side staged right
get transform upReturns translation for next side staged up
get transform downReturns translation for next side staged down
\n\n  
\n\n  
\n\n    
\n      Shape Settings\n      
Shape settings modify the shape's behavior
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
duration700msDuration of side change animation
\n\n    
\n\n    
\n      Callbacks\n      
Callbacks specify a function to occur after a specific behavior.
\n    
\n\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingContextDescription
beforeChangeNext SideIs called before side change
onChangeActive SideIs called after visible side change
\n\n    
\n\n    
\n      DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
namespaceshapeEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n            
\n            selector    : {\n              sides : '.sides',\n              side  : '.side'\n            }\n            
\n          
className\n            
\n            className   : {\n              animating : 'animating',\n              hidden    : 'hidden',\n              loading   : 'loading',\n              active    : 'active'\n            }\n            
\n          
\n\n    
\n\n    
\n      Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
nameShapeName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
error\n            
\n            error: {\n              side   : 'You tried to switch to a side that does not exist.',\n              method : 'The method you called is not defined'\n            }\n            
\n          
\n\n  
\n\n
",
      "renderSingleExtensions": false,
      "layout": "default",
      "css": "shape",
      "description": "A shape is a three dimensional object displayed on a two dimensional plane",
      "type": "UI Module",
      "layoutRelativePath": "default.html.eco",
      "meta": {
        "layout": "default",
        "css": "shape",
        "title": "Shape",
        "description": "A shape is a three dimensional object displayed on a two dimensional plane",
        "type": "UI Module"
      }
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/documents/modules/sidebar.html.eco",
      "relativePath": "modules/sidebar.html.eco",
      "basename": "sidebar",
      "outBasename": "sidebar",
      "extension": "eco",
      "outExtension": "html",
      "extensions": [
        "html",
        "eco"
      ],
      "filename": "sidebar.html.eco",
      "fullDirPath": "/home/jack/projects/semantic/server/documents/modules",
      "outPath": "/home/jack/projects/semantic/docs/modules/sidebar.html",
      "outDirPath": "/home/jack/projects/semantic/docs/modules",
      "outFilename": "sidebar.html",
      "relativeOutPath": "modules/sidebar.html",
      "relativeDirPath": "modules",
      "relativeOutDirPath": "modules",
      "relativeBase": "modules/sidebar",
      "relativeOutBase": "modules/sidebar",
      "contentType": "application/octet-stream",
      "outContentType": "text/html",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": "2013-12-04T09:15:26.801Z",
      "wtime": "2013-12-04T09:15:28.744Z",
      "exists": true,
      "encoding": "utf8",
      "source": "---\nlayout      : 'default'\ncss         : 'side'\n\ntitle       : 'Sidebar'\ndescription : 'A sidebar is a menu hidden beside page content'\ntype        : 'UI Module'\n---\n\n\n\n<%- @partial('header', { tabs: 'module' }) %>\n\n
\n  
You Might Like
\n  
\n    \n      \n      More by this author\n    \n    \n      \n      Suggested Articles\n    \n  
\n  
Contact Us
\n  
\n    
\n      \n      
\n        \n        \n      
\n    
\n    
\n      \n      \n    
\n    
Submit
\n  
\n
\n
\n  
Share
\n  
\n    
\n      \n      Facebook\n    
\n    
\n      \n      Twitter\n    
\n    
\n      \n      Google\n    
\n  
\n
\n
\n  
\n    
\n      \n    
\n    
\n      \n    
\n    
\n      \n    
\n  
\n
\n
\n  
You Might Like
\n  
\n    \n      \n      More by this author\n    \n    \n      \n      Suggested Articles\n    \n  
\n
\n
\n  
Contact Us
\n  
\n    
\n      \n      
\n        \n        \n      
\n    
\n    
\n      \n      \n    
\n    
Submit
\n  
\n
\n\n
\n  \n    \n    Home\n  \n  \n    \n    Current Section\n  \n  \n    \n    Like us on Facebook\n  \n  
\n    More\n    
\n      About\n      Contact Us\n    
\n  
\n
\n
\n  \n    \n    Home\n  \n  \n    \n    Current Section\n  \n  \n    \n    Like us on Facebook\n  \n  
\n    More\n    
\n      About\n      Contact Us\n    
\n  
\n
\n\n
\n  \n    \n    Home\n  \n  \n    \n    Current Section\n  \n  \n    \n    Like us on Facebook\n  \n  
\n    More\n    
\n      About\n      Contact Us\n    
\n  
\n
\n
\n  
Left Sidebar menu
\n  One\n  Two\n  Three\n
\n
\n  
Right Sidebar menu
\n  One\n  Two\n  Three\n
\n
\n  
Top Sidebar menu
\n  One\n  Two\n  Three\n
\n
\n  
Bottom Sidebar menu
\n  One\n  Two\n  Three\n
\n\n
\n\n  
\n    
\n      
\n        Types\n        Variations\n      
\n    
\n    
Types
\n\n    
\n      
Direction
\n      
A sidebar can appear on any side of content
\n      
\n        
...
\n        
...
\n        
...
\n        
...
\n      
\n      
\n        
\n          Left\n        
\n        
\n          Top\n        
\n        
\n          Right\n        
\n        
\n          Bottom\n        
\n      
\n    
\n\n    
Variations
\n\n    
\n      
Styled
\n      
A sidebar can be formatted to include additional styling for display
\n      
\n        
...
\n      
\n      
\n        \n        Show\n      
\n    
\n\n    
\n      
Size
\n      
A sidebar can vary in width and height to allow more content
\n      
\n        
...
\n        
...
\n        
...
\n        
...
\n      
\n      
\n        
\n          Very Thin\n        
\n        
\n          Thin\n        
\n        
\n          Wide\n        
\n        
\n          Very Wide\n        
\n      
\n    
\n\n    
\n      
Floating
\n      
A sidebar can appear floating above content
\n      
\n        
...
\n      
\n      
\n        \n        Show\n      
\n    
\n\n  
\n\n  
\n    
Initializing
\n    
Any content can be used as a sidebar by adding the class ui sidebar and initializing the menu in javascript.
\n    
\n      \n      
\n        
Fixed Position
\n        
Fixed position content may have issues changing it's position when a sidebar appears. There are two solutions
\n        
    \n          
  • Specify your fixed content without using the css left or top properties.
    • \n          
  • Apply styles on the fixed element to adjust its position when the sidebar appears. You can do this by descending from the body tag which receives the class (direction) pushed when the view is moved.
    • \n        
\n      
\n    
\n    
\n      
\n        Any content in the world\n      
\n    
\n    
\n      $('.ui.sidebar')\n        .sidebar()\n      ;\n    
\n\n    
Usage
\n\n    
\n      
Showing a sidebar
\n      
A sidebar can be shown, hidden, or toggled. In the following examples sidebar is used in conjunction with ui menu to display a vertical menu as a sidebar.
\n      
\n      
\n        \n          \n          Home\n        \n        \n          \n          Current Section\n        \n        \n          \n          Like us on Facebook\n        \n        
\n          More\n          
\n            About\n            Contact Us\n          
\n        
\n      
\n      
\n      
\n      $('.demo.sidebar')\n        .sidebar('toggle')\n      ;\n      
\n    
\n\n\n    
Behavior
\n\n    
All the following behaviors can be called using the syntax:
\n    
\n    $('.your.element')\n      .sidebar('behavior name', argumentOne, argumentTwo)\n    ;\n    
\n\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
BehaviorDescription
attach events(selector, event)Attaches sidebar action to given selector. Default event if none specified is toggle
showShows sidebar
hideHides sidebar
toggleToggles visibility of sidebar
is openReturns whether sidebar is open
is closedReturns whether sidebar is closed
push pagePushes page content to be visible alongside sidebar
get directionReturns direction of current sidebar
pull pageReturns page content to original position
add body cssAdds stylesheet to page head to trigger sidebar animations
remove body cssRemoves any inline stylesheets for sidebar animation
get transition eventReturns vendor prefixed transition end event
\n\n\n  
\n\n  
\n\n    
\n      
Overlay
\n      
A sidebar can overlay page content instead of pushing it to the side
\n      
\n      $('.overlay.sidebar')\n        .sidebar({\n          overlay: true\n        })\n        .sidebar('toggle')\n      ;\n      
\n    
\n\n    
\n      
Triggering show/hide with other content
\n      
For convenience calling attach events will allow you to bind events. By default this will toggle the sidebar in and out of view on click
\n      
\n      $('.demo.sidebar').first()\n        .sidebar('attach events', '.toggle.button')\n      ;\n      $('.toggle.button')\n        .removeClass('disabled')\n      ;\n      
\n      
\n        \n        Trigger Sidebar\n      
\n    
\n\n    
\n      
Triggering custom action with other content
\n      
You can also however specify what action should occur when the element is clicked
\n      
\n      $('.demo.sidebar').first()\n        .sidebar('attach events', '.open.button', 'show')\n      ;\n      $('.open.button')\n        .removeClass('disabled')\n      ;\n      
\n      
\n        \n        Open Sidebar\n      
\n    
\n\n  
\n\n  
\n\n    
\n      Sidebar Settings\n      
Form settings modify the sidebar behavior
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
overlayfalseWhether sidebar should overlay page instead of pushing page to the side
exclusivetrueWhether multiple sidebars can be open at once
useCSStrueWhether to use css animations or fallback javascript animations
duration300Duration of side bar transition animation
\n\n    
\n    
Callbacks
\n    
Callbacks specify a function to occur after a specific behavior.
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingContextDescription
onShowSidebarIs called when a sidebar is shown.
onHideSidebarIs called when a sidebar is hidden.
onChangeSidebarIs called after a sidebar changes visibility
\n\n    
\n\n    
\n      DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
namespacesidebarEvent namespace. Makes sure module teardown does not effect other events attached to an element.
className\n            
\n      className: {\n        active : 'active',\n        pushed : 'pushed',\n        top    : 'top',\n        left   : 'left',\n        right  : 'right',\n        bottom : 'bottom'\n      }\n            
\n          		Class names used to attach style to state
\n\n    
\n\n    
\n      Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
nameSidebarName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
errors\n            
\n      error   : {\n        method   : 'The method you called is not defined.',\n        notFound : 'There were no elements that matched the specified selector'\n      }\n            
\n          
\n  
\n\n
\n\n\n",
      "content": "\n\n<%- @partial('header', { tabs: 'module' }) %>\n\n
\n  
You Might Like
\n  
\n    \n      \n      More by this author\n    \n    \n      \n      Suggested Articles\n    \n  
\n  
Contact Us
\n  
\n    
\n      \n      
\n        \n        \n      
\n    
\n    
\n      \n      \n    
\n    
Submit
\n  
\n
\n
\n  
Share
\n  
\n    
\n      \n      Facebook\n    
\n    
\n      \n      Twitter\n    
\n    
\n      \n      Google\n    
\n  
\n
\n
\n  
\n    
\n      \n    
\n    
\n      \n    
\n    
\n      \n    
\n  
\n
\n
\n  
You Might Like
\n  
\n    \n      \n      More by this author\n    \n    \n      \n      Suggested Articles\n    \n  
\n
\n
\n  
Contact Us
\n  
\n    
\n      \n      
\n        \n        \n      
\n    
\n    
\n      \n      \n    
\n    
Submit
\n  
\n
\n\n
\n  \n    \n    Home\n  \n  \n    \n    Current Section\n  \n  \n    \n    Like us on Facebook\n  \n  
\n    More\n    
\n      About\n      Contact Us\n    
\n  
\n
\n
\n  \n    \n    Home\n  \n  \n    \n    Current Section\n  \n  \n    \n    Like us on Facebook\n  \n  
\n    More\n    
\n      About\n      Contact Us\n    
\n  
\n
\n\n
\n  \n    \n    Home\n  \n  \n    \n    Current Section\n  \n  \n    \n    Like us on Facebook\n  \n  
\n    More\n    
\n      About\n      Contact Us\n    
\n  
\n
\n
\n  
Left Sidebar menu
\n  One\n  Two\n  Three\n
\n
\n  
Right Sidebar menu
\n  One\n  Two\n  Three\n
\n
\n  
Top Sidebar menu
\n  One\n  Two\n  Three\n
\n
\n  
Bottom Sidebar menu
\n  One\n  Two\n  Three\n
\n\n
\n\n  
\n    
\n      
\n        Types\n        Variations\n      
\n    
\n    
Types
\n\n    
\n      
Direction
\n      
A sidebar can appear on any side of content
\n      
\n        
...
\n        
...
\n        
...
\n        
...
\n      
\n      
\n        
\n          Left\n        
\n        
\n          Top\n        
\n        
\n          Right\n        
\n        
\n          Bottom\n        
\n      
\n    
\n\n    
Variations
\n\n    
\n      
Styled
\n      
A sidebar can be formatted to include additional styling for display
\n      
\n        
...
\n      
\n      
\n        \n        Show\n      
\n    
\n\n    
\n      
Size
\n      
A sidebar can vary in width and height to allow more content
\n      
\n        
...
\n        
...
\n        
...
\n        
...
\n      
\n      
\n        
\n          Very Thin\n        
\n        
\n          Thin\n        
\n        
\n          Wide\n        
\n        
\n          Very Wide\n        
\n      
\n    
\n\n    
\n      
Floating
\n      
A sidebar can appear floating above content
\n      
\n        
...
\n      
\n      
\n        \n        Show\n      
\n    
\n\n  
\n\n  
\n    
Initializing
\n    
Any content can be used as a sidebar by adding the class ui sidebar and initializing the menu in javascript.
\n    
\n      \n      
\n        
Fixed Position
\n        
Fixed position content may have issues changing it's position when a sidebar appears. There are two solutions
\n        
    \n          
  • Specify your fixed content without using the css left or top properties.
    • \n          
  • Apply styles on the fixed element to adjust its position when the sidebar appears. You can do this by descending from the body tag which receives the class (direction) pushed when the view is moved.
    • \n        
\n      
\n    
\n    
\n      
\n        Any content in the world\n      
\n    
\n    
\n      $('.ui.sidebar')\n        .sidebar()\n      ;\n    
\n\n    
Usage
\n\n    
\n      
Showing a sidebar
\n      
A sidebar can be shown, hidden, or toggled. In the following examples sidebar is used in conjunction with ui menu to display a vertical menu as a sidebar.
\n      
\n      
\n        \n          \n          Home\n        \n        \n          \n          Current Section\n        \n        \n          \n          Like us on Facebook\n        \n        
\n          More\n          
\n            About\n            Contact Us\n          
\n        
\n      
\n      
\n      
\n      $('.demo.sidebar')\n        .sidebar('toggle')\n      ;\n      
\n    
\n\n\n    
Behavior
\n\n    
All the following behaviors can be called using the syntax:
\n    
\n    $('.your.element')\n      .sidebar('behavior name', argumentOne, argumentTwo)\n    ;\n    
\n\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
BehaviorDescription
attach events(selector, event)Attaches sidebar action to given selector. Default event if none specified is toggle
showShows sidebar
hideHides sidebar
toggleToggles visibility of sidebar
is openReturns whether sidebar is open
is closedReturns whether sidebar is closed
push pagePushes page content to be visible alongside sidebar
get directionReturns direction of current sidebar
pull pageReturns page content to original position
add body cssAdds stylesheet to page head to trigger sidebar animations
remove body cssRemoves any inline stylesheets for sidebar animation
get transition eventReturns vendor prefixed transition end event
\n\n\n  
\n\n  
\n\n    
\n      
Overlay
\n      
A sidebar can overlay page content instead of pushing it to the side
\n      
\n      $('.overlay.sidebar')\n        .sidebar({\n          overlay: true\n        })\n        .sidebar('toggle')\n      ;\n      
\n    
\n\n    
\n      
Triggering show/hide with other content
\n      
For convenience calling attach events will allow you to bind events. By default this will toggle the sidebar in and out of view on click
\n      
\n      $('.demo.sidebar').first()\n        .sidebar('attach events', '.toggle.button')\n      ;\n      $('.toggle.button')\n        .removeClass('disabled')\n      ;\n      
\n      
\n        \n        Trigger Sidebar\n      
\n    
\n\n    
\n      
Triggering custom action with other content
\n      
You can also however specify what action should occur when the element is clicked
\n      
\n      $('.demo.sidebar').first()\n        .sidebar('attach events', '.open.button', 'show')\n      ;\n      $('.open.button')\n        .removeClass('disabled')\n      ;\n      
\n      
\n        \n        Open Sidebar\n      
\n    
\n\n  
\n\n  
\n\n    
\n      Sidebar Settings\n      
Form settings modify the sidebar behavior
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
overlayfalseWhether sidebar should overlay page instead of pushing page to the side
exclusivetrueWhether multiple sidebars can be open at once
useCSStrueWhether to use css animations or fallback javascript animations
duration300Duration of side bar transition animation
\n\n    
\n    
Callbacks
\n    
Callbacks specify a function to occur after a specific behavior.
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingContextDescription
onShowSidebarIs called when a sidebar is shown.
onHideSidebarIs called when a sidebar is hidden.
onChangeSidebarIs called after a sidebar changes visibility
\n\n    
\n\n    
\n      DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
namespacesidebarEvent namespace. Makes sure module teardown does not effect other events attached to an element.
className\n            
\n      className: {\n        active : 'active',\n        pushed : 'pushed',\n        top    : 'top',\n        left   : 'left',\n        right  : 'right',\n        bottom : 'bottom'\n      }\n            
\n          		Class names used to attach style to state
\n\n    
\n\n    
\n      Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
nameSidebarName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
errors\n            
\n      error   : {\n        method   : 'The method you called is not defined.',\n        notFound : 'There were no elements that matched the specified selector'\n      }\n            
\n          
\n  
\n\n
\n\n",
      "tags": null,
      "render": true,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": "Sidebar",
      "name": "sidebar.html",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "modules-sidebar",
      "url": "/modules/sidebar.html",
      "urls": [
        "/modules/sidebar.html"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": true,
      "header": "layout      : 'default'\ncss         : 'side'\n\ntitle       : 'Sidebar'\ndescription : 'A sidebar is a menu hidden beside page content'\ntype        : 'UI Module'",
      "parser": "yaml",
      "body": "\n\n<%- @partial('header', { tabs: 'module' }) %>\n\n
\n  
You Might Like
\n  
\n    \n      \n      More by this author\n    \n    \n      \n      Suggested Articles\n    \n  
\n  
Contact Us
\n  
\n    
\n      \n      
\n        \n        \n      
\n    
\n    
\n      \n      \n    
\n    
Submit
\n  
\n
\n
\n  
Share
\n  
\n    
\n      \n      Facebook\n    
\n    
\n      \n      Twitter\n    
\n    
\n      \n      Google\n    
\n  
\n
\n
\n  
\n    
\n      \n    
\n    
\n      \n    
\n    
\n      \n    
\n  
\n
\n
\n  
You Might Like
\n  
\n    \n      \n      More by this author\n    \n    \n      \n      Suggested Articles\n    \n  
\n
\n
\n  
Contact Us
\n  
\n    
\n      \n      
\n        \n        \n      
\n    
\n    
\n      \n      \n    
\n    
Submit
\n  
\n
\n\n
\n  \n    \n    Home\n  \n  \n    \n    Current Section\n  \n  \n    \n    Like us on Facebook\n  \n  
\n    More\n    
\n      About\n      Contact Us\n    
\n  
\n
\n
\n  \n    \n    Home\n  \n  \n    \n    Current Section\n  \n  \n    \n    Like us on Facebook\n  \n  
\n    More\n    
\n      About\n      Contact Us\n    
\n  
\n
\n\n
\n  \n    \n    Home\n  \n  \n    \n    Current Section\n  \n  \n    \n    Like us on Facebook\n  \n  
\n    More\n    
\n      About\n      Contact Us\n    
\n  
\n
\n
\n  
Left Sidebar menu
\n  One\n  Two\n  Three\n
\n
\n  
Right Sidebar menu
\n  One\n  Two\n  Three\n
\n
\n  
Top Sidebar menu
\n  One\n  Two\n  Three\n
\n
\n  
Bottom Sidebar menu
\n  One\n  Two\n  Three\n
\n\n
\n\n  
\n    
\n      
\n        Types\n        Variations\n      
\n    
\n    
Types
\n\n    
\n      
Direction
\n      
A sidebar can appear on any side of content
\n      
\n        
...
\n        
...
\n        
...
\n        
...
\n      
\n      
\n        
\n          Left\n        
\n        
\n          Top\n        
\n        
\n          Right\n        
\n        
\n          Bottom\n        
\n      
\n    
\n\n    
Variations
\n\n    
\n      
Styled
\n      
A sidebar can be formatted to include additional styling for display
\n      
\n        
...
\n      
\n      
\n        \n        Show\n      
\n    
\n\n    
\n      
Size
\n      
A sidebar can vary in width and height to allow more content
\n      
\n        
...
\n        
...
\n        
...
\n        
...
\n      
\n      
\n        
\n          Very Thin\n        
\n        
\n          Thin\n        
\n        
\n          Wide\n        
\n        
\n          Very Wide\n        
\n      
\n    
\n\n    
\n      
Floating
\n      
A sidebar can appear floating above content
\n      
\n        
...
\n      
\n      
\n        \n        Show\n      
\n    
\n\n  
\n\n  
\n    
Initializing
\n    
Any content can be used as a sidebar by adding the class ui sidebar and initializing the menu in javascript.
\n    
\n      \n      
\n        
Fixed Position
\n        
Fixed position content may have issues changing it's position when a sidebar appears. There are two solutions
\n        
    \n          
  • Specify your fixed content without using the css left or top properties.
    • \n          
  • Apply styles on the fixed element to adjust its position when the sidebar appears. You can do this by descending from the body tag which receives the class (direction) pushed when the view is moved.
    • \n        
\n      
\n    
\n    
\n      
\n        Any content in the world\n      
\n    
\n    
\n      $('.ui.sidebar')\n        .sidebar()\n      ;\n    
\n\n    
Usage
\n\n    
\n      
Showing a sidebar
\n      
A sidebar can be shown, hidden, or toggled. In the following examples sidebar is used in conjunction with ui menu to display a vertical menu as a sidebar.
\n      
\n      
\n        \n          \n          Home\n        \n        \n          \n          Current Section\n        \n        \n          \n          Like us on Facebook\n        \n        
\n          More\n          
\n            About\n            Contact Us\n          
\n        
\n      
\n      
\n      
\n      $('.demo.sidebar')\n        .sidebar('toggle')\n      ;\n      
\n    
\n\n\n    
Behavior
\n\n    
All the following behaviors can be called using the syntax:
\n    
\n    $('.your.element')\n      .sidebar('behavior name', argumentOne, argumentTwo)\n    ;\n    
\n\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
BehaviorDescription
attach events(selector, event)Attaches sidebar action to given selector. Default event if none specified is toggle
showShows sidebar
hideHides sidebar
toggleToggles visibility of sidebar
is openReturns whether sidebar is open
is closedReturns whether sidebar is closed
push pagePushes page content to be visible alongside sidebar
get directionReturns direction of current sidebar
pull pageReturns page content to original position
add body cssAdds stylesheet to page head to trigger sidebar animations
remove body cssRemoves any inline stylesheets for sidebar animation
get transition eventReturns vendor prefixed transition end event
\n\n\n  
\n\n  
\n\n    
\n      
Overlay
\n      
A sidebar can overlay page content instead of pushing it to the side
\n      
\n      $('.overlay.sidebar')\n        .sidebar({\n          overlay: true\n        })\n        .sidebar('toggle')\n      ;\n      
\n    
\n\n    
\n      
Triggering show/hide with other content
\n      
For convenience calling attach events will allow you to bind events. By default this will toggle the sidebar in and out of view on click
\n      
\n      $('.demo.sidebar').first()\n        .sidebar('attach events', '.toggle.button')\n      ;\n      $('.toggle.button')\n        .removeClass('disabled')\n      ;\n      
\n      
\n        \n        Trigger Sidebar\n      
\n    
\n\n    
\n      
Triggering custom action with other content
\n      
You can also however specify what action should occur when the element is clicked
\n      
\n      $('.demo.sidebar').first()\n        .sidebar('attach events', '.open.button', 'show')\n      ;\n      $('.open.button')\n        .removeClass('disabled')\n      ;\n      
\n      
\n        \n        Open Sidebar\n      
\n    
\n\n  
\n\n  
\n\n    
\n      Sidebar Settings\n      
Form settings modify the sidebar behavior
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
overlayfalseWhether sidebar should overlay page instead of pushing page to the side
exclusivetrueWhether multiple sidebars can be open at once
useCSStrueWhether to use css animations or fallback javascript animations
duration300Duration of side bar transition animation
\n\n    
\n    
Callbacks
\n    
Callbacks specify a function to occur after a specific behavior.
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingContextDescription
onShowSidebarIs called when a sidebar is shown.
onHideSidebarIs called when a sidebar is hidden.
onChangeSidebarIs called after a sidebar changes visibility
\n\n    
\n\n    
\n      DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
namespacesidebarEvent namespace. Makes sure module teardown does not effect other events attached to an element.
className\n            
\n      className: {\n        active : 'active',\n        pushed : 'pushed',\n        top    : 'top',\n        left   : 'left',\n        right  : 'right',\n        bottom : 'bottom'\n      }\n            
\n          		Class names used to attach style to state
\n\n    
\n\n    
\n      Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
nameSidebarName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
errors\n            
\n      error   : {\n        method   : 'The method you called is not defined.',\n        notFound : 'There were no elements that matched the specified selector'\n      }\n            
\n          
\n  
\n\n
\n\n",
      "rendered": true,
      "contentRendered": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  \n  \n  \n  \n\n  \n\n  \n  \n  Sidebar | Semantic UI\n\n  \n  \n\n  \n\n  \n  \n  \n\n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n\n  \n  \n\n\n  
\n    \n       Close Menu\n    \n    \n       Download\n    \n    
\n      \n        Introduction\n      \n      
\n        \n          Definitions\n        \n          Overview\n        \n          Types\n        \n          Variations\n        \n          What's Different\n        \n      
\n    
\n    
\n      Project\n      
\n        \n          Contributing\n        \n          Set-up\n        \n      
\n    
\n    
\n      Elements\n      
\n        \n          Button\n        \n          Divider\n        \n          Header\n        \n          Icon\n        \n          Image\n        \n          Input\n        \n          Label\n        \n          Loader\n        \n          Progress\n        \n          Reveal\n        \n          Segment\n        \n          Step\n        \n      
\n    
\n    
\n      Collections\n      
\n        \n          Breadcrumb\n        \n          Form\n        \n          Grid\n        \n          Menu\n        \n          Message\n        \n          Table\n        \n      
\n    
\n    
\n      Views\n      
\n        \n          Comment\n        \n          Feed\n        \n          Item\n        \n          List\n        \n      
\n    
\n    
\n      Modules\n      
\n        \n          Accordion\n        \n          Checkbox\n        \n          Dimmer\n        \n          Dropdown\n        \n          Modal\n        \n          Popup\n        \n          Rating\n        \n          Shape\n        \n          Sidebar\n        \n          Transition\n        \n      
\n    
\n    
\n      Behavior\n      
\n        \n          Form Validation\n        \n      
\n    
\n    
\n      Style Guide\n      
\n        \n          CSS\n        \n          Javascript\n        \n          Language\n        \n      
\n    
\n\n  
\n\n  
\n    
\n       Content\n      
\n        UI Module: Sidebar\n      
\n      \n      \n      \n      
\n        9 of 10\n        
\n          \n            
\n              1. Accordion\n            
\n          \n            
\n              2. Checkbox\n            
\n          \n            
\n              3. Dimmer\n            
\n          \n            
\n              4. Dropdown\n            
\n          \n            
\n              5. Modal\n            
\n          \n            
\n              6. Popup\n            
\n          \n            
\n              7. Rating\n            
\n          \n            
\n              8. Shape\n            
\n          \n            
\n              9. Sidebar\n            
\n          \n            
\n              10. Transition\n            
\n          \n        
\n      
\n      \n      \n      \n      
\n        \n        
\n          \n        
\n        \n        \n\n        \n          \n        \n        \n          \n        \n        \n        \n          \n        \n        \n      
\n    
\n  
\n    
\n      \n      Menu\n    
\n  \n\n\n\n
\n  
\n    
\n\n      
\n        Sidebar\n        \n      
\n\n      
A sidebar is a menu hidden beside page content
\n      \n      \n      \n        Learn about Modules\n        \n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n    \n    \n    \n    \n      \n        \n      \n        \n      \n        \n      \n        \n      \n      
\n        \n          Definition\n          \n        \n          Examples\n          \n        \n          Usage\n          \n        \n          Settings\n          \n        \n      
\n      \n      
\n        \n          Definition\n          \n        \n          Examples\n          \n        \n          Usage\n          \n        \n          Settings\n          \n        \n      
\n    \n  
\n
\n\n
\n  
You Might Like
\n  
\n    \n      \n      More by this author\n    \n    \n      \n      Suggested Articles\n    \n  
\n  
Contact Us
\n  
\n    
\n      \n      
\n        \n        \n      
\n    
\n    
\n      \n      \n    
\n    
Submit
\n  
\n
\n
\n  
Share
\n  
\n    
\n      \n      Facebook\n    
\n    
\n      \n      Twitter\n    
\n    
\n      \n      Google\n    
\n  
\n
\n
\n  
\n    
\n      \n    
\n    
\n      \n    
\n    
\n      \n    
\n  
\n
\n
\n  
You Might Like
\n  
\n    \n      \n      More by this author\n    \n    \n      \n      Suggested Articles\n    \n  
\n
\n
\n  
Contact Us
\n  
\n    
\n      \n      
\n        \n        \n      
\n    
\n    
\n      \n      \n    
\n    
Submit
\n  
\n
\n\n
\n  \n    \n    Home\n  \n  \n    \n    Current Section\n  \n  \n    \n    Like us on Facebook\n  \n  
\n    More\n    
\n      About\n      Contact Us\n    
\n  
\n
\n
\n  \n    \n    Home\n  \n  \n    \n    Current Section\n  \n  \n    \n    Like us on Facebook\n  \n  
\n    More\n    
\n      About\n      Contact Us\n    
\n  
\n
\n\n
\n  \n    \n    Home\n  \n  \n    \n    Current Section\n  \n  \n    \n    Like us on Facebook\n  \n  
\n    More\n    
\n      About\n      Contact Us\n    
\n  
\n
\n
\n  
Left Sidebar menu
\n  One\n  Two\n  Three\n
\n
\n  
Right Sidebar menu
\n  One\n  Two\n  Three\n
\n
\n  
Top Sidebar menu
\n  One\n  Two\n  Three\n
\n
\n  
Bottom Sidebar menu
\n  One\n  Two\n  Three\n
\n\n
\n\n  
\n    
\n      
\n        Types\n        Variations\n      
\n    
\n    
Types
\n\n    
\n      
Direction
\n      
A sidebar can appear on any side of content
\n      
\n        
...
\n        
...
\n        
...
\n        
...
\n      
\n      
\n        
\n          Left\n        
\n        
\n          Top\n        
\n        
\n          Right\n        
\n        
\n          Bottom\n        
\n      
\n    
\n\n    
Variations
\n\n    
\n      
Styled
\n      
A sidebar can be formatted to include additional styling for display
\n      
\n        
...
\n      
\n      
\n        \n        Show\n      
\n    
\n\n    
\n      
Size
\n      
A sidebar can vary in width and height to allow more content
\n      
\n        
...
\n        
...
\n        
...
\n        
...
\n      
\n      
\n        
\n          Very Thin\n        
\n        
\n          Thin\n        
\n        
\n          Wide\n        
\n        
\n          Very Wide\n        
\n      
\n    
\n\n    
\n      
Floating
\n      
A sidebar can appear floating above content
\n      
\n        
...
\n      
\n      
\n        \n        Show\n      
\n    
\n\n  
\n\n  
\n    
Initializing
\n    
Any content can be used as a sidebar by adding the class ui sidebar and initializing the menu in javascript.
\n    
\n      \n      
\n        
Fixed Position
\n        
Fixed position content may have issues changing it's position when a sidebar appears. There are two solutions
\n        
    \n          
  • Specify your fixed content without using the css left or top properties.
    • \n          
  • Apply styles on the fixed element to adjust its position when the sidebar appears. You can do this by descending from the body tag which receives the class (direction) pushed when the view is moved.
    • \n        
\n      
\n    
\n    
\n      
\n        Any content in the world\n      
\n    
\n    
\n      $('.ui.sidebar')\n        .sidebar()\n      ;\n    
\n\n    
Usage
\n\n    
\n      
Showing a sidebar
\n      
A sidebar can be shown, hidden, or toggled. In the following examples sidebar is used in conjunction with ui menu to display a vertical menu as a sidebar.
\n      
\n      
\n        \n          \n          Home\n        \n        \n          \n          Current Section\n        \n        \n          \n          Like us on Facebook\n        \n        
\n          More\n          
\n            About\n            Contact Us\n          
\n        
\n      
\n      
\n      
\n      $('.demo.sidebar')\n        .sidebar('toggle')\n      ;\n      
\n    
\n\n\n    
Behavior
\n\n    
All the following behaviors can be called using the syntax:
\n    
\n    $('.your.element')\n      .sidebar('behavior name', argumentOne, argumentTwo)\n    ;\n    
\n\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
BehaviorDescription
attach events(selector, event)Attaches sidebar action to given selector. Default event if none specified is toggle
showShows sidebar
hideHides sidebar
toggleToggles visibility of sidebar
is openReturns whether sidebar is open
is closedReturns whether sidebar is closed
push pagePushes page content to be visible alongside sidebar
get directionReturns direction of current sidebar
pull pageReturns page content to original position
add body cssAdds stylesheet to page head to trigger sidebar animations
remove body cssRemoves any inline stylesheets for sidebar animation
get transition eventReturns vendor prefixed transition end event
\n\n\n  
\n\n  
\n\n    
\n      
Overlay
\n      
A sidebar can overlay page content instead of pushing it to the side
\n      
\n      $('.overlay.sidebar')\n        .sidebar({\n          overlay: true\n        })\n        .sidebar('toggle')\n      ;\n      
\n    
\n\n    
\n      
Triggering show/hide with other content
\n      
For convenience calling attach events will allow you to bind events. By default this will toggle the sidebar in and out of view on click
\n      
\n      $('.demo.sidebar').first()\n        .sidebar('attach events', '.toggle.button')\n      ;\n      $('.toggle.button')\n        .removeClass('disabled')\n      ;\n      
\n      
\n        \n        Trigger Sidebar\n      
\n    
\n\n    
\n      
Triggering custom action with other content
\n      
You can also however specify what action should occur when the element is clicked
\n      
\n      $('.demo.sidebar').first()\n        .sidebar('attach events', '.open.button', 'show')\n      ;\n      $('.open.button')\n        .removeClass('disabled')\n      ;\n      
\n      
\n        \n        Open Sidebar\n      
\n    
\n\n  
\n\n  
\n\n    
\n      Sidebar Settings\n      
Form settings modify the sidebar behavior
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
overlayfalseWhether sidebar should overlay page instead of pushing page to the side
exclusivetrueWhether multiple sidebars can be open at once
useCSStrueWhether to use css animations or fallback javascript animations
duration300Duration of side bar transition animation
\n\n    
\n    
Callbacks
\n    
Callbacks specify a function to occur after a specific behavior.
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingContextDescription
onShowSidebarIs called when a sidebar is shown.
onHideSidebarIs called when a sidebar is hidden.
onChangeSidebarIs called after a sidebar changes visibility
\n\n    
\n\n    
\n      DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
namespacesidebarEvent namespace. Makes sure module teardown does not effect other events attached to an element.
className\n            
\n      className: {\n        active : 'active',\n        pushed : 'pushed',\n        top    : 'top',\n        left   : 'left',\n        right  : 'right',\n        bottom : 'bottom'\n      }\n            
\n          		Class names used to attach style to state
\n\n    
\n\n    
\n      Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
nameSidebarName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
errors\n            
\n      error   : {\n        method   : 'The method you called is not defined.',\n        notFound : 'There were no elements that matched the specified selector'\n      }\n            
\n          
\n  
\n\n
\n\n\n\n\n",
      "contentRenderedWithoutLayouts": "\n\n\n\n
\n  
\n    
\n\n      
\n        Sidebar\n        \n      
\n\n      
A sidebar is a menu hidden beside page content
\n      \n      \n      \n        Learn about Modules\n        \n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n    \n    \n    \n    \n      \n        \n      \n        \n      \n        \n      \n        \n      \n      
\n        \n          Definition\n          \n        \n          Examples\n          \n        \n          Usage\n          \n        \n          Settings\n          \n        \n      
\n      \n      
\n        \n          Definition\n          \n        \n          Examples\n          \n        \n          Usage\n          \n        \n          Settings\n          \n        \n      
\n    \n  
\n
\n\n
\n  
You Might Like
\n  
\n    \n      \n      More by this author\n    \n    \n      \n      Suggested Articles\n    \n  
\n  
Contact Us
\n  
\n    
\n      \n      
\n        \n        \n      
\n    
\n    
\n      \n      \n    
\n    
Submit
\n  
\n
\n
\n  
Share
\n  
\n    
\n      \n      Facebook\n    
\n    
\n      \n      Twitter\n    
\n    
\n      \n      Google\n    
\n  
\n
\n
\n  
\n    
\n      \n    
\n    
\n      \n    
\n    
\n      \n    
\n  
\n
\n
\n  
You Might Like
\n  
\n    \n      \n      More by this author\n    \n    \n      \n      Suggested Articles\n    \n  
\n
\n
\n  
Contact Us
\n  
\n    
\n      \n      
\n        \n        \n      
\n    
\n    
\n      \n      \n    
\n    
Submit
\n  
\n
\n\n
\n  \n    \n    Home\n  \n  \n    \n    Current Section\n  \n  \n    \n    Like us on Facebook\n  \n  
\n    More\n    
\n      About\n      Contact Us\n    
\n  
\n
\n
\n  \n    \n    Home\n  \n  \n    \n    Current Section\n  \n  \n    \n    Like us on Facebook\n  \n  
\n    More\n    
\n      About\n      Contact Us\n    
\n  
\n
\n\n
\n  \n    \n    Home\n  \n  \n    \n    Current Section\n  \n  \n    \n    Like us on Facebook\n  \n  
\n    More\n    
\n      About\n      Contact Us\n    
\n  
\n
\n
\n  
Left Sidebar menu
\n  One\n  Two\n  Three\n
\n
\n  
Right Sidebar menu
\n  One\n  Two\n  Three\n
\n
\n  
Top Sidebar menu
\n  One\n  Two\n  Three\n
\n
\n  
Bottom Sidebar menu
\n  One\n  Two\n  Three\n
\n\n
\n\n  
\n    
\n      
\n        Types\n        Variations\n      
\n    
\n    
Types
\n\n    
\n      
Direction
\n      
A sidebar can appear on any side of content
\n      
\n        
...
\n        
...
\n        
...
\n        
...
\n      
\n      
\n        
\n          Left\n        
\n        
\n          Top\n        
\n        
\n          Right\n        
\n        
\n          Bottom\n        
\n      
\n    
\n\n    
Variations
\n\n    
\n      
Styled
\n      
A sidebar can be formatted to include additional styling for display
\n      
\n        
...
\n      
\n      
\n        \n        Show\n      
\n    
\n\n    
\n      
Size
\n      
A sidebar can vary in width and height to allow more content
\n      
\n        
...
\n        
...
\n        
...
\n        
...
\n      
\n      
\n        
\n          Very Thin\n        
\n        
\n          Thin\n        
\n        
\n          Wide\n        
\n        
\n          Very Wide\n        
\n      
\n    
\n\n    
\n      
Floating
\n      
A sidebar can appear floating above content
\n      
\n        
...
\n      
\n      
\n        \n        Show\n      
\n    
\n\n  
\n\n  
\n    
Initializing
\n    
Any content can be used as a sidebar by adding the class ui sidebar and initializing the menu in javascript.
\n    
\n      \n      
\n        
Fixed Position
\n        
Fixed position content may have issues changing it's position when a sidebar appears. There are two solutions
\n        
    \n          
  • Specify your fixed content without using the css left or top properties.
    • \n          
  • Apply styles on the fixed element to adjust its position when the sidebar appears. You can do this by descending from the body tag which receives the class (direction) pushed when the view is moved.
    • \n        
\n      
\n    
\n    
\n      
\n        Any content in the world\n      
\n    
\n    
\n      $('.ui.sidebar')\n        .sidebar()\n      ;\n    
\n\n    
Usage
\n\n    
\n      
Showing a sidebar
\n      
A sidebar can be shown, hidden, or toggled. In the following examples sidebar is used in conjunction with ui menu to display a vertical menu as a sidebar.
\n      
\n      
\n        \n          \n          Home\n        \n        \n          \n          Current Section\n        \n        \n          \n          Like us on Facebook\n        \n        
\n          More\n          
\n            About\n            Contact Us\n          
\n        
\n      
\n      
\n      
\n      $('.demo.sidebar')\n        .sidebar('toggle')\n      ;\n      
\n    
\n\n\n    
Behavior
\n\n    
All the following behaviors can be called using the syntax:
\n    
\n    $('.your.element')\n      .sidebar('behavior name', argumentOne, argumentTwo)\n    ;\n    
\n\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
BehaviorDescription
attach events(selector, event)Attaches sidebar action to given selector. Default event if none specified is toggle
showShows sidebar
hideHides sidebar
toggleToggles visibility of sidebar
is openReturns whether sidebar is open
is closedReturns whether sidebar is closed
push pagePushes page content to be visible alongside sidebar
get directionReturns direction of current sidebar
pull pageReturns page content to original position
add body cssAdds stylesheet to page head to trigger sidebar animations
remove body cssRemoves any inline stylesheets for sidebar animation
get transition eventReturns vendor prefixed transition end event
\n\n\n  
\n\n  
\n\n    
\n      
Overlay
\n      
A sidebar can overlay page content instead of pushing it to the side
\n      
\n      $('.overlay.sidebar')\n        .sidebar({\n          overlay: true\n        })\n        .sidebar('toggle')\n      ;\n      
\n    
\n\n    
\n      
Triggering show/hide with other content
\n      
For convenience calling attach events will allow you to bind events. By default this will toggle the sidebar in and out of view on click
\n      
\n      $('.demo.sidebar').first()\n        .sidebar('attach events', '.toggle.button')\n      ;\n      $('.toggle.button')\n        .removeClass('disabled')\n      ;\n      
\n      
\n        \n        Trigger Sidebar\n      
\n    
\n\n    
\n      
Triggering custom action with other content
\n      
You can also however specify what action should occur when the element is clicked
\n      
\n      $('.demo.sidebar').first()\n        .sidebar('attach events', '.open.button', 'show')\n      ;\n      $('.open.button')\n        .removeClass('disabled')\n      ;\n      
\n      
\n        \n        Open Sidebar\n      
\n    
\n\n  
\n\n  
\n\n    
\n      Sidebar Settings\n      
Form settings modify the sidebar behavior
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
overlayfalseWhether sidebar should overlay page instead of pushing page to the side
exclusivetrueWhether multiple sidebars can be open at once
useCSStrueWhether to use css animations or fallback javascript animations
duration300Duration of side bar transition animation
\n\n    
\n    
Callbacks
\n    
Callbacks specify a function to occur after a specific behavior.
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingContextDescription
onShowSidebarIs called when a sidebar is shown.
onHideSidebarIs called when a sidebar is hidden.
onChangeSidebarIs called after a sidebar changes visibility
\n\n    
\n\n    
\n      DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
namespacesidebarEvent namespace. Makes sure module teardown does not effect other events attached to an element.
className\n            
\n      className: {\n        active : 'active',\n        pushed : 'pushed',\n        top    : 'top',\n        left   : 'left',\n        right  : 'right',\n        bottom : 'bottom'\n      }\n            
\n          		Class names used to attach style to state
\n\n    
\n\n    
\n      Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
nameSidebarName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
errors\n            
\n      error   : {\n        method   : 'The method you called is not defined.',\n        notFound : 'There were no elements that matched the specified selector'\n      }\n            
\n          
\n  
\n\n
\n\n",
      "renderSingleExtensions": false,
      "layout": "default",
      "css": "side",
      "description": "A sidebar is a menu hidden beside page content",
      "type": "UI Module",
      "layoutRelativePath": "default.html.eco",
      "meta": {
        "layout": "default",
        "css": "side",
        "title": "Sidebar",
        "description": "A sidebar is a menu hidden beside page content",
        "type": "UI Module"
      }
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/documents/modules/transition.html.eco",
      "relativePath": "modules/transition.html.eco",
      "basename": "transition",
      "outBasename": "transition",
      "extension": "eco",
      "outExtension": "html",
      "extensions": [
        "html",
        "eco"
      ],
      "filename": "transition.html.eco",
      "fullDirPath": "/home/jack/projects/semantic/server/documents/modules",
      "outPath": "/home/jack/projects/semantic/docs/modules/transition.html",
      "outDirPath": "/home/jack/projects/semantic/docs/modules",
      "outFilename": "transition.html",
      "relativeOutPath": "modules/transition.html",
      "relativeDirPath": "modules",
      "relativeOutDirPath": "modules",
      "relativeBase": "modules/transition",
      "relativeOutBase": "modules/transition",
      "contentType": "application/octet-stream",
      "outContentType": "text/html",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": "2013-12-04T09:15:26.867Z",
      "wtime": "2013-12-04T09:15:28.747Z",
      "exists": true,
      "encoding": "utf8",
      "source": "---\nlayout      : 'default'\ncss         : 'transition'\n\ntitle       : 'Transition'\ndescription : 'A transition is an animation usually used to move content in or out of view'\ntype        : 'UI Module'\n---\n\n<%- @partial('header', { tabs: 'module' }) %>\n\n
\n\n  
\n    
\n      \n    
\n    
\n\n      
Types
\n\n      
Emphasis
\n      
\n        
Flash
\n        
An element can flash to draw attention to itself
\n        
\n        $('.cat.image')\n          .transition('flash')\n        ;\n        
\n      
\n      
\n        
Shake
\n        
An element can shake to draw attention to its position
\n        
\n        $('.cat.image')\n          .transition('shake')\n        ;\n        
\n      
\n      
\n        
Pulse
\n        
An element can pulse to draw attention to its visibility
\n        
\n        $('.cat.image')\n          .transition('pulse')\n        ;\n        
\n      
\n      
\n        
Tada
\n        
An element can give user positive feedback for an action
\n        
\n        $('.cat.image')\n          .transition('tada')\n        ;\n        
\n      
\n      
\n        
Bounce
\n        
An element can bounce to politely remind you of itself
\n        
\n        $('.cat.image')\n          .transition('bounce')\n        ;\n        
\n      
\n\n      
Appearance
\n      
\n        
Flip
\n        
An element can flip into or out of view vertically or horizontally
\n        
\n        $('.cat.image')\n          .transition('horizontal flip')\n        ;\n        
\n        
\n        $('.cat.image')\n          .transition('vertical flip')\n        ;\n        
\n      
\n      
\n        
Fade
\n        
An element can fade into or out of view descending and ascending
\n        
\n        $('.cat.image')\n          .transition('fade')\n        ;\n        
\n        
\n        $('.cat.image')\n          .transition('fade up')\n        ;\n        
\n        
\n        $('.cat.image')\n          .transition('fade down')\n        ;\n        
\n      
\n      
\n        
Scale
\n        
An element can scale into or out of view
\n        
\n        $('.cat.image')\n          .transition('scale')\n        ;\n        
\n      
\n\n      
\n        
Slide
\n        
An element can appear to slide in from above or below\n        
\n        $('.cat.image')\n          .transition('slide down')\n        ;\n        
\n        
\n        $('.cat.image')\n          .transition('slide up')\n        ;\n        
\n      
\n    
\n  
\n  
\n    
\n      \n    
\n    
\n      
Introduction
\n\n      
UI Transitions provide a wrapper for using css transitions in javascript providing cross-browser callbacks, advanced queuing, and feature detection.
\n      
Transitions are loosely coupled with other ui modules like dropdowns and modals to provide element transitions
\n\n      
Types
\n      
Transitions are separated into three categories. Inward transitions, outward transitions, and static transitions. These three categories determine the visibility of the element after the animation completes.
\n\n      
Usage
\n\n      
Initializing
\n\n      
If a transition is called without any arguments all default settings will be used.
\n\n      
\n      $('.dog.image')\n        // default everything\n        .transition()\n      ;\n      
\n\n      
Passing in settings
\n      
Transitions use similar argument shorthand as animate. You can specify callback functions, animation duration, and other settings using the same arguments. Durations can be specified as strings with css shorthand, or with numbers.
\n      
\n      $('.dog.image')\n        .transition({\n          animation : 'scale',\n          duration  : '2s',\n          complete  : function() {\n            alert('done');\n          }\n        })\n      ;\n      
\n\n      
Queuing animations
\n\n      
Animations called in sequence will be queued. Any queued animation will automatically determine the transition direction if none is specified.
\n      
\n      $('.dog.image')\n        .transition('horizontal flip', '500ms')\n        .transition('horizontal flip', 500, function() {\n          alert('done!');\n        })\n      ;\n      
\n      
Behavior
\n\n      
All the following behaviors can be called using the syntax:
\n      
\n      $('.your.element')\n        .dropdown('behavior name', argumentOne, argumentTwo)\n      ;\n      
\n\n      \n        \n          \n          \n          \n          \n        \n        \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n        \n      
BehaviorDescription
repaintTriggers reflow on element
loopingEnables animation looping
remove loopingRemoves looping state from element
stopStops current transition
startRestarts a stopped transition
toggleToggles current transition on/off
duration(duration)Modifies element animation duration
save conditionsSaves all class names and styles to cache to be retrieved after animation
restore conditionsAdds back cached names and styles to element
get animation nameReturns vendor prefixed animation property for animationname
get animation eventReturns vendor prefixed animation property for animationend
is animatingReturns whether transition is currently occurring
is loopingReturns whether animation looping is set
is visibleReturns whether element is visible
\n    
\n  
\n\n  
\n    
\n      \n    
\n    
\n      
Visibility
\n      
After the animation queue finishes for an element, its final visibility state is determined. If an animation is an outward transition, the final visibility status will be hidden. If an animation is inward the element will be visible after the animation finishes.
\n      
\n      $('.kitten.image')\n        .transition('scale')\n      ;\n      
\n\n      
Transition Direction
\n\n      
If an animation direction is not specified it will automatically be determined based on the elements current visibility. For no example, if the element is visible the animation \"fade out\" will be called, if the animation is not visible \"fade in\".
\n\n      
\n      $('.kitten.image')\n        // fade up out is used if available\n        .transition('fade up')\n        // this is now fade up in\n        .transition('fade up')\n      ;\n      
\n      
\n      $('.kitten.image')\n        // if a direction if specified it will be obeyed\n        .transition('horizontal flip in')\n        .transition('vertical flip in')\n      ;\n      
\n\n      
Static Animations
\n      
Animations that do not have an in or out animation defined, will maintain their current visibility after running
\n      
\n      $('.kitten.image')\n        .transition('pulse')\n      ;\n      
\n\n      
Looping
\n      
Animation loops can be controlled by setting looping. Callbacks will occur after each loop cycle
\n      
\n      $('.kitten.image')\n        .transition('set looping')\n        .transition('bounce', '2000ms')\n      ;\n      
\n      
There is currently a bug in WebKit that makes it impossible to force css looping animations to end programatically
\n      
\n      $('.kitten.image')\n        .transition('remove looping')\n      ;\n      
\n    
\n  
\n\n  
\n\n    
\n      Transition Settings\n      
Form settings modify the transition behavior
\n    
\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
animationfadeNamed animation event to used. Must be defined in css.
duration700msDuration of the css transition animation
queuetrueWhether to automatically queue animation if another is occurring
\n\n    
\n\n    
\n      Callbacks\n      
Callbacks specify a function to occur after a specific behavior.
\n    
\n\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingContextDescription
onShowtransitioned elementCallback on each transition that changes visibility to shown
onHidetransitioned elementCallback on each transition that changes visibility to hidden
completetransitioned elementCallback on each transition complete
\n\n    
\n\n    
\n      DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
namespacetransitionEvent namespace. Makes sure module teardown does not effect other events attached to an element.
className\n            
\n  className    : {\n    animating  : 'animating',\n    disabled   : 'disabled',\n    hidden     : 'hidden',\n    inward     : 'in',\n    loading    : 'loading',\n    looping    : 'looping',\n    outward    : 'out',\n    transition : 'ui transition',\n    visible    : 'visible'\n  }\n            
\n          		Class names used to attach style to state
\n\n    
\n\n    
\n      Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
nameTransitionName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
errors\n            
\n  errors   : {\n    noAnimation : 'There is no css animation matching the one you specified.',\n    method      : 'The method you called is not defined'\n  }\n            
\n          
\n  
\n\n
",
      "content": "<%- @partial('header', { tabs: 'module' }) %>\n\n
\n\n  
\n    
\n      \n    
\n    
\n\n      
Types
\n\n      
Emphasis
\n      
\n        
Flash
\n        
An element can flash to draw attention to itself
\n        
\n        $('.cat.image')\n          .transition('flash')\n        ;\n        
\n      
\n      
\n        
Shake
\n        
An element can shake to draw attention to its position
\n        
\n        $('.cat.image')\n          .transition('shake')\n        ;\n        
\n      
\n      
\n        
Pulse
\n        
An element can pulse to draw attention to its visibility
\n        
\n        $('.cat.image')\n          .transition('pulse')\n        ;\n        
\n      
\n      
\n        
Tada
\n        
An element can give user positive feedback for an action
\n        
\n        $('.cat.image')\n          .transition('tada')\n        ;\n        
\n      
\n      
\n        
Bounce
\n        
An element can bounce to politely remind you of itself
\n        
\n        $('.cat.image')\n          .transition('bounce')\n        ;\n        
\n      
\n\n      
Appearance
\n      
\n        
Flip
\n        
An element can flip into or out of view vertically or horizontally
\n        
\n        $('.cat.image')\n          .transition('horizontal flip')\n        ;\n        
\n        
\n        $('.cat.image')\n          .transition('vertical flip')\n        ;\n        
\n      
\n      
\n        
Fade
\n        
An element can fade into or out of view descending and ascending
\n        
\n        $('.cat.image')\n          .transition('fade')\n        ;\n        
\n        
\n        $('.cat.image')\n          .transition('fade up')\n        ;\n        
\n        
\n        $('.cat.image')\n          .transition('fade down')\n        ;\n        
\n      
\n      
\n        
Scale
\n        
An element can scale into or out of view
\n        
\n        $('.cat.image')\n          .transition('scale')\n        ;\n        
\n      
\n\n      
\n        
Slide
\n        
An element can appear to slide in from above or below\n        
\n        $('.cat.image')\n          .transition('slide down')\n        ;\n        
\n        
\n        $('.cat.image')\n          .transition('slide up')\n        ;\n        
\n      
\n    
\n  
\n  
\n    
\n      \n    
\n    
\n      
Introduction
\n\n      
UI Transitions provide a wrapper for using css transitions in javascript providing cross-browser callbacks, advanced queuing, and feature detection.
\n      
Transitions are loosely coupled with other ui modules like dropdowns and modals to provide element transitions
\n\n      
Types
\n      
Transitions are separated into three categories. Inward transitions, outward transitions, and static transitions. These three categories determine the visibility of the element after the animation completes.
\n\n      
Usage
\n\n      
Initializing
\n\n      
If a transition is called without any arguments all default settings will be used.
\n\n      
\n      $('.dog.image')\n        // default everything\n        .transition()\n      ;\n      
\n\n      
Passing in settings
\n      
Transitions use similar argument shorthand as animate. You can specify callback functions, animation duration, and other settings using the same arguments. Durations can be specified as strings with css shorthand, or with numbers.
\n      
\n      $('.dog.image')\n        .transition({\n          animation : 'scale',\n          duration  : '2s',\n          complete  : function() {\n            alert('done');\n          }\n        })\n      ;\n      
\n\n      
Queuing animations
\n\n      
Animations called in sequence will be queued. Any queued animation will automatically determine the transition direction if none is specified.
\n      
\n      $('.dog.image')\n        .transition('horizontal flip', '500ms')\n        .transition('horizontal flip', 500, function() {\n          alert('done!');\n        })\n      ;\n      
\n      
Behavior
\n\n      
All the following behaviors can be called using the syntax:
\n      
\n      $('.your.element')\n        .dropdown('behavior name', argumentOne, argumentTwo)\n      ;\n      
\n\n      \n        \n          \n          \n          \n          \n        \n        \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n        \n      
BehaviorDescription
repaintTriggers reflow on element
loopingEnables animation looping
remove loopingRemoves looping state from element
stopStops current transition
startRestarts a stopped transition
toggleToggles current transition on/off
duration(duration)Modifies element animation duration
save conditionsSaves all class names and styles to cache to be retrieved after animation
restore conditionsAdds back cached names and styles to element
get animation nameReturns vendor prefixed animation property for animationname
get animation eventReturns vendor prefixed animation property for animationend
is animatingReturns whether transition is currently occurring
is loopingReturns whether animation looping is set
is visibleReturns whether element is visible
\n    
\n  
\n\n  
\n    
\n      \n    
\n    
\n      
Visibility
\n      
After the animation queue finishes for an element, its final visibility state is determined. If an animation is an outward transition, the final visibility status will be hidden. If an animation is inward the element will be visible after the animation finishes.
\n      
\n      $('.kitten.image')\n        .transition('scale')\n      ;\n      
\n\n      
Transition Direction
\n\n      
If an animation direction is not specified it will automatically be determined based on the elements current visibility. For no example, if the element is visible the animation \"fade out\" will be called, if the animation is not visible \"fade in\".
\n\n      
\n      $('.kitten.image')\n        // fade up out is used if available\n        .transition('fade up')\n        // this is now fade up in\n        .transition('fade up')\n      ;\n      
\n      
\n      $('.kitten.image')\n        // if a direction if specified it will be obeyed\n        .transition('horizontal flip in')\n        .transition('vertical flip in')\n      ;\n      
\n\n      
Static Animations
\n      
Animations that do not have an in or out animation defined, will maintain their current visibility after running
\n      
\n      $('.kitten.image')\n        .transition('pulse')\n      ;\n      
\n\n      
Looping
\n      
Animation loops can be controlled by setting looping. Callbacks will occur after each loop cycle
\n      
\n      $('.kitten.image')\n        .transition('set looping')\n        .transition('bounce', '2000ms')\n      ;\n      
\n      
There is currently a bug in WebKit that makes it impossible to force css looping animations to end programatically
\n      
\n      $('.kitten.image')\n        .transition('remove looping')\n      ;\n      
\n    
\n  
\n\n  
\n\n    
\n      Transition Settings\n      
Form settings modify the transition behavior
\n    
\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
animationfadeNamed animation event to used. Must be defined in css.
duration700msDuration of the css transition animation
queuetrueWhether to automatically queue animation if another is occurring
\n\n    
\n\n    
\n      Callbacks\n      
Callbacks specify a function to occur after a specific behavior.
\n    
\n\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingContextDescription
onShowtransitioned elementCallback on each transition that changes visibility to shown
onHidetransitioned elementCallback on each transition that changes visibility to hidden
completetransitioned elementCallback on each transition complete
\n\n    
\n\n    
\n      DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
namespacetransitionEvent namespace. Makes sure module teardown does not effect other events attached to an element.
className\n            
\n  className    : {\n    animating  : 'animating',\n    disabled   : 'disabled',\n    hidden     : 'hidden',\n    inward     : 'in',\n    loading    : 'loading',\n    looping    : 'looping',\n    outward    : 'out',\n    transition : 'ui transition',\n    visible    : 'visible'\n  }\n            
\n          		Class names used to attach style to state
\n\n    
\n\n    
\n      Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
nameTransitionName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
errors\n            
\n  errors   : {\n    noAnimation : 'There is no css animation matching the one you specified.',\n    method      : 'The method you called is not defined'\n  }\n            
\n          
\n  
\n\n
",
      "tags": null,
      "render": true,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": "Transition",
      "name": "transition.html",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "modules-transition",
      "url": "/modules/transition.html",
      "urls": [
        "/modules/transition.html"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": true,
      "header": "layout      : 'default'\ncss         : 'transition'\n\ntitle       : 'Transition'\ndescription : 'A transition is an animation usually used to move content in or out of view'\ntype        : 'UI Module'",
      "parser": "yaml",
      "body": "<%- @partial('header', { tabs: 'module' }) %>\n\n
\n\n  
\n    
\n      \n    
\n    
\n\n      
Types
\n\n      
Emphasis
\n      
\n        
Flash
\n        
An element can flash to draw attention to itself
\n        
\n        $('.cat.image')\n          .transition('flash')\n        ;\n        
\n      
\n      
\n        
Shake
\n        
An element can shake to draw attention to its position
\n        
\n        $('.cat.image')\n          .transition('shake')\n        ;\n        
\n      
\n      
\n        
Pulse
\n        
An element can pulse to draw attention to its visibility
\n        
\n        $('.cat.image')\n          .transition('pulse')\n        ;\n        
\n      
\n      
\n        
Tada
\n        
An element can give user positive feedback for an action
\n        
\n        $('.cat.image')\n          .transition('tada')\n        ;\n        
\n      
\n      
\n        
Bounce
\n        
An element can bounce to politely remind you of itself
\n        
\n        $('.cat.image')\n          .transition('bounce')\n        ;\n        
\n      
\n\n      
Appearance
\n      
\n        
Flip
\n        
An element can flip into or out of view vertically or horizontally
\n        
\n        $('.cat.image')\n          .transition('horizontal flip')\n        ;\n        
\n        
\n        $('.cat.image')\n          .transition('vertical flip')\n        ;\n        
\n      
\n      
\n        
Fade
\n        
An element can fade into or out of view descending and ascending
\n        
\n        $('.cat.image')\n          .transition('fade')\n        ;\n        
\n        
\n        $('.cat.image')\n          .transition('fade up')\n        ;\n        
\n        
\n        $('.cat.image')\n          .transition('fade down')\n        ;\n        
\n      
\n      
\n        
Scale
\n        
An element can scale into or out of view
\n        
\n        $('.cat.image')\n          .transition('scale')\n        ;\n        
\n      
\n\n      
\n        
Slide
\n        
An element can appear to slide in from above or below\n        
\n        $('.cat.image')\n          .transition('slide down')\n        ;\n        
\n        
\n        $('.cat.image')\n          .transition('slide up')\n        ;\n        
\n      
\n    
\n  
\n  
\n    
\n      \n    
\n    
\n      
Introduction
\n\n      
UI Transitions provide a wrapper for using css transitions in javascript providing cross-browser callbacks, advanced queuing, and feature detection.
\n      
Transitions are loosely coupled with other ui modules like dropdowns and modals to provide element transitions
\n\n      
Types
\n      
Transitions are separated into three categories. Inward transitions, outward transitions, and static transitions. These three categories determine the visibility of the element after the animation completes.
\n\n      
Usage
\n\n      
Initializing
\n\n      
If a transition is called without any arguments all default settings will be used.
\n\n      
\n      $('.dog.image')\n        // default everything\n        .transition()\n      ;\n      
\n\n      
Passing in settings
\n      
Transitions use similar argument shorthand as animate. You can specify callback functions, animation duration, and other settings using the same arguments. Durations can be specified as strings with css shorthand, or with numbers.
\n      
\n      $('.dog.image')\n        .transition({\n          animation : 'scale',\n          duration  : '2s',\n          complete  : function() {\n            alert('done');\n          }\n        })\n      ;\n      
\n\n      
Queuing animations
\n\n      
Animations called in sequence will be queued. Any queued animation will automatically determine the transition direction if none is specified.
\n      
\n      $('.dog.image')\n        .transition('horizontal flip', '500ms')\n        .transition('horizontal flip', 500, function() {\n          alert('done!');\n        })\n      ;\n      
\n      
Behavior
\n\n      
All the following behaviors can be called using the syntax:
\n      
\n      $('.your.element')\n        .dropdown('behavior name', argumentOne, argumentTwo)\n      ;\n      
\n\n      \n        \n          \n          \n          \n          \n        \n        \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n        \n      
BehaviorDescription
repaintTriggers reflow on element
loopingEnables animation looping
remove loopingRemoves looping state from element
stopStops current transition
startRestarts a stopped transition
toggleToggles current transition on/off
duration(duration)Modifies element animation duration
save conditionsSaves all class names and styles to cache to be retrieved after animation
restore conditionsAdds back cached names and styles to element
get animation nameReturns vendor prefixed animation property for animationname
get animation eventReturns vendor prefixed animation property for animationend
is animatingReturns whether transition is currently occurring
is loopingReturns whether animation looping is set
is visibleReturns whether element is visible
\n    
\n  
\n\n  
\n    
\n      \n    
\n    
\n      
Visibility
\n      
After the animation queue finishes for an element, its final visibility state is determined. If an animation is an outward transition, the final visibility status will be hidden. If an animation is inward the element will be visible after the animation finishes.
\n      
\n      $('.kitten.image')\n        .transition('scale')\n      ;\n      
\n\n      
Transition Direction
\n\n      
If an animation direction is not specified it will automatically be determined based on the elements current visibility. For no example, if the element is visible the animation \"fade out\" will be called, if the animation is not visible \"fade in\".
\n\n      
\n      $('.kitten.image')\n        // fade up out is used if available\n        .transition('fade up')\n        // this is now fade up in\n        .transition('fade up')\n      ;\n      
\n      
\n      $('.kitten.image')\n        // if a direction if specified it will be obeyed\n        .transition('horizontal flip in')\n        .transition('vertical flip in')\n      ;\n      
\n\n      
Static Animations
\n      
Animations that do not have an in or out animation defined, will maintain their current visibility after running
\n      
\n      $('.kitten.image')\n        .transition('pulse')\n      ;\n      
\n\n      
Looping
\n      
Animation loops can be controlled by setting looping. Callbacks will occur after each loop cycle
\n      
\n      $('.kitten.image')\n        .transition('set looping')\n        .transition('bounce', '2000ms')\n      ;\n      
\n      
There is currently a bug in WebKit that makes it impossible to force css looping animations to end programatically
\n      
\n      $('.kitten.image')\n        .transition('remove looping')\n      ;\n      
\n    
\n  
\n\n  
\n\n    
\n      Transition Settings\n      
Form settings modify the transition behavior
\n    
\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
animationfadeNamed animation event to used. Must be defined in css.
duration700msDuration of the css transition animation
queuetrueWhether to automatically queue animation if another is occurring
\n\n    
\n\n    
\n      Callbacks\n      
Callbacks specify a function to occur after a specific behavior.
\n    
\n\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingContextDescription
onShowtransitioned elementCallback on each transition that changes visibility to shown
onHidetransitioned elementCallback on each transition that changes visibility to hidden
completetransitioned elementCallback on each transition complete
\n\n    
\n\n    
\n      DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
namespacetransitionEvent namespace. Makes sure module teardown does not effect other events attached to an element.
className\n            
\n  className    : {\n    animating  : 'animating',\n    disabled   : 'disabled',\n    hidden     : 'hidden',\n    inward     : 'in',\n    loading    : 'loading',\n    looping    : 'looping',\n    outward    : 'out',\n    transition : 'ui transition',\n    visible    : 'visible'\n  }\n            
\n          		Class names used to attach style to state
\n\n    
\n\n    
\n      Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
nameTransitionName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
errors\n            
\n  errors   : {\n    noAnimation : 'There is no css animation matching the one you specified.',\n    method      : 'The method you called is not defined'\n  }\n            
\n          
\n  
\n\n
",
      "rendered": true,
      "contentRendered": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  \n  \n  \n  \n\n  \n\n  \n  \n  Transition | Semantic UI\n\n  \n  \n\n  \n\n  \n  \n  \n\n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n\n  \n  \n\n\n  
\n    \n       Close Menu\n    \n    \n       Download\n    \n    
\n      \n        Introduction\n      \n      
\n        \n          Definitions\n        \n          Overview\n        \n          Types\n        \n          Variations\n        \n          What's Different\n        \n      
\n    
\n    
\n      Project\n      
\n        \n          Contributing\n        \n          Set-up\n        \n      
\n    
\n    
\n      Elements\n      
\n        \n          Button\n        \n          Divider\n        \n          Header\n        \n          Icon\n        \n          Image\n        \n          Input\n        \n          Label\n        \n          Loader\n        \n          Progress\n        \n          Reveal\n        \n          Segment\n        \n          Step\n        \n      
\n    
\n    
\n      Collections\n      
\n        \n          Breadcrumb\n        \n          Form\n        \n          Grid\n        \n          Menu\n        \n          Message\n        \n          Table\n        \n      
\n    
\n    
\n      Views\n      
\n        \n          Comment\n        \n          Feed\n        \n          Item\n        \n          List\n        \n      
\n    
\n    
\n      Modules\n      
\n        \n          Accordion\n        \n          Checkbox\n        \n          Dimmer\n        \n          Dropdown\n        \n          Modal\n        \n          Popup\n        \n          Rating\n        \n          Shape\n        \n          Sidebar\n        \n          Transition\n        \n      
\n    
\n    
\n      Behavior\n      
\n        \n          Form Validation\n        \n      
\n    
\n    
\n      Style Guide\n      
\n        \n          CSS\n        \n          Javascript\n        \n          Language\n        \n      
\n    
\n\n  
\n\n  
\n    
\n       Content\n      
\n        UI Module: Transition\n      
\n      \n      \n      \n      
\n        10 of 10\n        
\n          \n            
\n              1. Accordion\n            
\n          \n            
\n              2. Checkbox\n            
\n          \n            
\n              3. Dimmer\n            
\n          \n            
\n              4. Dropdown\n            
\n          \n            
\n              5. Modal\n            
\n          \n            
\n              6. Popup\n            
\n          \n            
\n              7. Rating\n            
\n          \n            
\n              8. Shape\n            
\n          \n            
\n              9. Sidebar\n            
\n          \n            
\n              10. Transition\n            
\n          \n        
\n      
\n      \n      
\n      \n      
\n        \n        
\n          \n        
\n        \n        \n\n        \n          \n        \n        \n          \n        \n        \n        \n          \n        \n        \n      
\n    
\n  
\n    
\n      \n      Menu\n    
\n  \n\n
\n  
\n    
\n\n      
\n        Transition\n        \n      
\n\n      
A transition is an animation usually used to move content in or out of view
\n      \n      \n      \n        Learn about Modules\n        \n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n    \n    \n    \n    \n      \n        \n      \n        \n      \n        \n      \n        \n      \n      
\n        \n          Definition\n          \n        \n          Examples\n          \n        \n          Usage\n          \n        \n          Settings\n          \n        \n      
\n      \n      
\n        \n          Definition\n          \n        \n          Examples\n          \n        \n          Usage\n          \n        \n          Settings\n          \n        \n      
\n    \n  
\n
\n\n
\n\n  
\n    
\n      \n    
\n    
\n\n      
Types
\n\n      
Emphasis
\n      
\n        
Flash
\n        
An element can flash to draw attention to itself
\n        
\n        $('.cat.image')\n          .transition('flash')\n        ;\n        
\n      
\n      
\n        
Shake
\n        
An element can shake to draw attention to its position
\n        
\n        $('.cat.image')\n          .transition('shake')\n        ;\n        
\n      
\n      
\n        
Pulse
\n        
An element can pulse to draw attention to its visibility
\n        
\n        $('.cat.image')\n          .transition('pulse')\n        ;\n        
\n      
\n      
\n        
Tada
\n        
An element can give user positive feedback for an action
\n        
\n        $('.cat.image')\n          .transition('tada')\n        ;\n        
\n      
\n      
\n        
Bounce
\n        
An element can bounce to politely remind you of itself
\n        
\n        $('.cat.image')\n          .transition('bounce')\n        ;\n        
\n      
\n\n      
Appearance
\n      
\n        
Flip
\n        
An element can flip into or out of view vertically or horizontally
\n        
\n        $('.cat.image')\n          .transition('horizontal flip')\n        ;\n        
\n        
\n        $('.cat.image')\n          .transition('vertical flip')\n        ;\n        
\n      
\n      
\n        
Fade
\n        
An element can fade into or out of view descending and ascending
\n        
\n        $('.cat.image')\n          .transition('fade')\n        ;\n        
\n        
\n        $('.cat.image')\n          .transition('fade up')\n        ;\n        
\n        
\n        $('.cat.image')\n          .transition('fade down')\n        ;\n        
\n      
\n      
\n        
Scale
\n        
An element can scale into or out of view
\n        
\n        $('.cat.image')\n          .transition('scale')\n        ;\n        
\n      
\n\n      
\n        
Slide
\n        
An element can appear to slide in from above or below\n        
\n        $('.cat.image')\n          .transition('slide down')\n        ;\n        
\n        
\n        $('.cat.image')\n          .transition('slide up')\n        ;\n        
\n      
\n    
\n  
\n  
\n    
\n      \n    
\n    
\n      
Introduction
\n\n      
UI Transitions provide a wrapper for using css transitions in javascript providing cross-browser callbacks, advanced queuing, and feature detection.
\n      
Transitions are loosely coupled with other ui modules like dropdowns and modals to provide element transitions
\n\n      
Types
\n      
Transitions are separated into three categories. Inward transitions, outward transitions, and static transitions. These three categories determine the visibility of the element after the animation completes.
\n\n      
Usage
\n\n      
Initializing
\n\n      
If a transition is called without any arguments all default settings will be used.
\n\n      
\n      $('.dog.image')\n        // default everything\n        .transition()\n      ;\n      
\n\n      
Passing in settings
\n      
Transitions use similar argument shorthand as animate. You can specify callback functions, animation duration, and other settings using the same arguments. Durations can be specified as strings with css shorthand, or with numbers.
\n      
\n      $('.dog.image')\n        .transition({\n          animation : 'scale',\n          duration  : '2s',\n          complete  : function() {\n            alert('done');\n          }\n        })\n      ;\n      
\n\n      
Queuing animations
\n\n      
Animations called in sequence will be queued. Any queued animation will automatically determine the transition direction if none is specified.
\n      
\n      $('.dog.image')\n        .transition('horizontal flip', '500ms')\n        .transition('horizontal flip', 500, function() {\n          alert('done!');\n        })\n      ;\n      
\n      
Behavior
\n\n      
All the following behaviors can be called using the syntax:
\n      
\n      $('.your.element')\n        .dropdown('behavior name', argumentOne, argumentTwo)\n      ;\n      
\n\n      \n        \n          \n          \n          \n          \n        \n        \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n        \n      
BehaviorDescription
repaintTriggers reflow on element
loopingEnables animation looping
remove loopingRemoves looping state from element
stopStops current transition
startRestarts a stopped transition
toggleToggles current transition on/off
duration(duration)Modifies element animation duration
save conditionsSaves all class names and styles to cache to be retrieved after animation
restore conditionsAdds back cached names and styles to element
get animation nameReturns vendor prefixed animation property for animationname
get animation eventReturns vendor prefixed animation property for animationend
is animatingReturns whether transition is currently occurring
is loopingReturns whether animation looping is set
is visibleReturns whether element is visible
\n    
\n  
\n\n  
\n    
\n      \n    
\n    
\n      
Visibility
\n      
After the animation queue finishes for an element, its final visibility state is determined. If an animation is an outward transition, the final visibility status will be hidden. If an animation is inward the element will be visible after the animation finishes.
\n      
\n      $('.kitten.image')\n        .transition('scale')\n      ;\n      
\n\n      
Transition Direction
\n\n      
If an animation direction is not specified it will automatically be determined based on the elements current visibility. For no example, if the element is visible the animation \"fade out\" will be called, if the animation is not visible \"fade in\".
\n\n      
\n      $('.kitten.image')\n        // fade up out is used if available\n        .transition('fade up')\n        // this is now fade up in\n        .transition('fade up')\n      ;\n      
\n      
\n      $('.kitten.image')\n        // if a direction if specified it will be obeyed\n        .transition('horizontal flip in')\n        .transition('vertical flip in')\n      ;\n      
\n\n      
Static Animations
\n      
Animations that do not have an in or out animation defined, will maintain their current visibility after running
\n      
\n      $('.kitten.image')\n        .transition('pulse')\n      ;\n      
\n\n      
Looping
\n      
Animation loops can be controlled by setting looping. Callbacks will occur after each loop cycle
\n      
\n      $('.kitten.image')\n        .transition('set looping')\n        .transition('bounce', '2000ms')\n      ;\n      
\n      
There is currently a bug in WebKit that makes it impossible to force css looping animations to end programatically
\n      
\n      $('.kitten.image')\n        .transition('remove looping')\n      ;\n      
\n    
\n  
\n\n  
\n\n    
\n      Transition Settings\n      
Form settings modify the transition behavior
\n    
\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
animationfadeNamed animation event to used. Must be defined in css.
duration700msDuration of the css transition animation
queuetrueWhether to automatically queue animation if another is occurring
\n\n    
\n\n    
\n      Callbacks\n      
Callbacks specify a function to occur after a specific behavior.
\n    
\n\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingContextDescription
onShowtransitioned elementCallback on each transition that changes visibility to shown
onHidetransitioned elementCallback on each transition that changes visibility to hidden
completetransitioned elementCallback on each transition complete
\n\n    
\n\n    
\n      DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
namespacetransitionEvent namespace. Makes sure module teardown does not effect other events attached to an element.
className\n            
\n  className    : {\n    animating  : 'animating',\n    disabled   : 'disabled',\n    hidden     : 'hidden',\n    inward     : 'in',\n    loading    : 'loading',\n    looping    : 'looping',\n    outward    : 'out',\n    transition : 'ui transition',\n    visible    : 'visible'\n  }\n            
\n          		Class names used to attach style to state
\n\n    
\n\n    
\n      Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
nameTransitionName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
errors\n            
\n  errors   : {\n    noAnimation : 'There is no css animation matching the one you specified.',\n    method      : 'The method you called is not defined'\n  }\n            
\n          
\n  
\n\n
\n\n\n",
      "contentRenderedWithoutLayouts": "\n\n
\n  
\n    
\n\n      
\n        Transition\n        \n      
\n\n      
A transition is an animation usually used to move content in or out of view
\n      \n      \n      \n        Learn about Modules\n        \n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n    \n    \n    \n    \n      \n        \n      \n        \n      \n        \n      \n        \n      \n      
\n        \n          Definition\n          \n        \n          Examples\n          \n        \n          Usage\n          \n        \n          Settings\n          \n        \n      
\n      \n      
\n        \n          Definition\n          \n        \n          Examples\n          \n        \n          Usage\n          \n        \n          Settings\n          \n        \n      
\n    \n  
\n
\n\n
\n\n  
\n    
\n      \n    
\n    
\n\n      
Types
\n\n      
Emphasis
\n      
\n        
Flash
\n        
An element can flash to draw attention to itself
\n        
\n        $('.cat.image')\n          .transition('flash')\n        ;\n        
\n      
\n      
\n        
Shake
\n        
An element can shake to draw attention to its position
\n        
\n        $('.cat.image')\n          .transition('shake')\n        ;\n        
\n      
\n      
\n        
Pulse
\n        
An element can pulse to draw attention to its visibility
\n        
\n        $('.cat.image')\n          .transition('pulse')\n        ;\n        
\n      
\n      
\n        
Tada
\n        
An element can give user positive feedback for an action
\n        
\n        $('.cat.image')\n          .transition('tada')\n        ;\n        
\n      
\n      
\n        
Bounce
\n        
An element can bounce to politely remind you of itself
\n        
\n        $('.cat.image')\n          .transition('bounce')\n        ;\n        
\n      
\n\n      
Appearance
\n      
\n        
Flip
\n        
An element can flip into or out of view vertically or horizontally
\n        
\n        $('.cat.image')\n          .transition('horizontal flip')\n        ;\n        
\n        
\n        $('.cat.image')\n          .transition('vertical flip')\n        ;\n        
\n      
\n      
\n        
Fade
\n        
An element can fade into or out of view descending and ascending
\n        
\n        $('.cat.image')\n          .transition('fade')\n        ;\n        
\n        
\n        $('.cat.image')\n          .transition('fade up')\n        ;\n        
\n        
\n        $('.cat.image')\n          .transition('fade down')\n        ;\n        
\n      
\n      
\n        
Scale
\n        
An element can scale into or out of view
\n        
\n        $('.cat.image')\n          .transition('scale')\n        ;\n        
\n      
\n\n      
\n        
Slide
\n        
An element can appear to slide in from above or below\n        
\n        $('.cat.image')\n          .transition('slide down')\n        ;\n        
\n        
\n        $('.cat.image')\n          .transition('slide up')\n        ;\n        
\n      
\n    
\n  
\n  
\n    
\n      \n    
\n    
\n      
Introduction
\n\n      
UI Transitions provide a wrapper for using css transitions in javascript providing cross-browser callbacks, advanced queuing, and feature detection.
\n      
Transitions are loosely coupled with other ui modules like dropdowns and modals to provide element transitions
\n\n      
Types
\n      
Transitions are separated into three categories. Inward transitions, outward transitions, and static transitions. These three categories determine the visibility of the element after the animation completes.
\n\n      
Usage
\n\n      
Initializing
\n\n      
If a transition is called without any arguments all default settings will be used.
\n\n      
\n      $('.dog.image')\n        // default everything\n        .transition()\n      ;\n      
\n\n      
Passing in settings
\n      
Transitions use similar argument shorthand as animate. You can specify callback functions, animation duration, and other settings using the same arguments. Durations can be specified as strings with css shorthand, or with numbers.
\n      
\n      $('.dog.image')\n        .transition({\n          animation : 'scale',\n          duration  : '2s',\n          complete  : function() {\n            alert('done');\n          }\n        })\n      ;\n      
\n\n      
Queuing animations
\n\n      
Animations called in sequence will be queued. Any queued animation will automatically determine the transition direction if none is specified.
\n      
\n      $('.dog.image')\n        .transition('horizontal flip', '500ms')\n        .transition('horizontal flip', 500, function() {\n          alert('done!');\n        })\n      ;\n      
\n      
Behavior
\n\n      
All the following behaviors can be called using the syntax:
\n      
\n      $('.your.element')\n        .dropdown('behavior name', argumentOne, argumentTwo)\n      ;\n      
\n\n      \n        \n          \n          \n          \n          \n        \n        \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n        \n      
BehaviorDescription
repaintTriggers reflow on element
loopingEnables animation looping
remove loopingRemoves looping state from element
stopStops current transition
startRestarts a stopped transition
toggleToggles current transition on/off
duration(duration)Modifies element animation duration
save conditionsSaves all class names and styles to cache to be retrieved after animation
restore conditionsAdds back cached names and styles to element
get animation nameReturns vendor prefixed animation property for animationname
get animation eventReturns vendor prefixed animation property for animationend
is animatingReturns whether transition is currently occurring
is loopingReturns whether animation looping is set
is visibleReturns whether element is visible
\n    
\n  
\n\n  
\n    
\n      \n    
\n    
\n      
Visibility
\n      
After the animation queue finishes for an element, its final visibility state is determined. If an animation is an outward transition, the final visibility status will be hidden. If an animation is inward the element will be visible after the animation finishes.
\n      
\n      $('.kitten.image')\n        .transition('scale')\n      ;\n      
\n\n      
Transition Direction
\n\n      
If an animation direction is not specified it will automatically be determined based on the elements current visibility. For no example, if the element is visible the animation \"fade out\" will be called, if the animation is not visible \"fade in\".
\n\n      
\n      $('.kitten.image')\n        // fade up out is used if available\n        .transition('fade up')\n        // this is now fade up in\n        .transition('fade up')\n      ;\n      
\n      
\n      $('.kitten.image')\n        // if a direction if specified it will be obeyed\n        .transition('horizontal flip in')\n        .transition('vertical flip in')\n      ;\n      
\n\n      
Static Animations
\n      
Animations that do not have an in or out animation defined, will maintain their current visibility after running
\n      
\n      $('.kitten.image')\n        .transition('pulse')\n      ;\n      
\n\n      
Looping
\n      
Animation loops can be controlled by setting looping. Callbacks will occur after each loop cycle
\n      
\n      $('.kitten.image')\n        .transition('set looping')\n        .transition('bounce', '2000ms')\n      ;\n      
\n      
There is currently a bug in WebKit that makes it impossible to force css looping animations to end programatically
\n      
\n      $('.kitten.image')\n        .transition('remove looping')\n      ;\n      
\n    
\n  
\n\n  
\n\n    
\n      Transition Settings\n      
Form settings modify the transition behavior
\n    
\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
animationfadeNamed animation event to used. Must be defined in css.
duration700msDuration of the css transition animation
queuetrueWhether to automatically queue animation if another is occurring
\n\n    
\n\n    
\n      Callbacks\n      
Callbacks specify a function to occur after a specific behavior.
\n    
\n\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingContextDescription
onShowtransitioned elementCallback on each transition that changes visibility to shown
onHidetransitioned elementCallback on each transition that changes visibility to hidden
completetransitioned elementCallback on each transition complete
\n\n    
\n\n    
\n      DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
namespacetransitionEvent namespace. Makes sure module teardown does not effect other events attached to an element.
className\n            
\n  className    : {\n    animating  : 'animating',\n    disabled   : 'disabled',\n    hidden     : 'hidden',\n    inward     : 'in',\n    loading    : 'loading',\n    looping    : 'looping',\n    outward    : 'out',\n    transition : 'ui transition',\n    visible    : 'visible'\n  }\n            
\n          		Class names used to attach style to state
\n\n    
\n\n    
\n      Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
nameTransitionName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
errors\n            
\n  errors   : {\n    noAnimation : 'There is no css animation matching the one you specified.',\n    method      : 'The method you called is not defined'\n  }\n            
\n          
\n  
\n\n
",
      "renderSingleExtensions": false,
      "layout": "default",
      "css": "transition",
      "description": "A transition is an animation usually used to move content in or out of view",
      "type": "UI Module",
      "layoutRelativePath": "default.html.eco",
      "meta": {
        "layout": "default",
        "css": "transition",
        "title": "Transition",
        "description": "A transition is an animation usually used to move content in or out of view",
        "type": "UI Module"
      }
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/documents/project/contributing.html.eco",
      "relativePath": "project/contributing.html.eco",
      "basename": "contributing",
      "outBasename": "contributing",
      "extension": "eco",
      "outExtension": "html",
      "extensions": [
        "html",
        "eco"
      ],
      "filename": "contributing.html.eco",
      "fullDirPath": "/home/jack/projects/semantic/server/documents/project",
      "outPath": "/home/jack/projects/semantic/docs/project/contributing.html",
      "outDirPath": "/home/jack/projects/semantic/docs/project",
      "outFilename": "contributing.html",
      "relativeOutPath": "project/contributing.html",
      "relativeDirPath": "project",
      "relativeOutDirPath": "project",
      "relativeBase": "project/contributing",
      "relativeOutBase": "project/contributing",
      "contentType": "application/octet-stream",
      "outContentType": "text/html",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": "2013-12-04T09:15:26.927Z",
      "wtime": "2013-12-04T09:15:28.750Z",
      "exists": true,
      "encoding": "utf8",
      "source": "  ---\nlayout      : 'default'\ncss         : 'guide'\n\ntitle       : 'Contributing'\ndescription : 'It takes a village'\ntype        : 'Semantic Project'\n---\n\n\n<%- @partial('header', @tabs = {  introduction: 'Introduction', contributing: 'Contributing', learn: 'Learning More' }) %>\n\n
\n\n  
\n\n    
There are a variety of ways to contribute to the development of Semantic. We are a very new project and are looking for an enthusiastic and like-minded group of core contributors.\n\n    
Publicity
\n\n    
One of the easiest ways to support Semantic UI is to get the word out
\n\n    \n\n    \n\n    \n\n    \n\n    \n\n    \n\n    
Squashing Bugs
\n\n    
Please submit any bugs you encounter when using the library to our Github Issues Tracker.
\n\n    
Be sure to include a set of steps to reproduce the issue and any related information, browser, OS etc. If we can't see the issue then it will make solving things much more difficult.
\n\n    
When submitting a bug report, please Fork this JSFiddle to create a test-case. It will have Semantic and normalize.css included for you automatically.
\n\n     Submit a bug report\n\n    
Pull Requests
\n\n    
If you see a bug and you'd like to fix it, feel free to open a pull request.
\n    
\n      Create a Pull Request\n      View Open Issues\n    
\n\n  
\n\n  
\n\n    
Ideas
\n\n    
Semantic is looking for people to help contribute new core UI components, and suggest extensions for the library.
\n\n    
If you have suggestions for components missing from Semantic which you'd like to see in future versions please add them to our public UI Component board. The current list of upcoming components, and their current development status can be seen on the contributor UI board.
\n\n     Add an idea\n\n    
Code
\n\n    
We are looking for a few good coders to help us push out important new features for a release version of Semantic. Here's an overview of current features in development
\n\n    
CSS Variables
\n\n    
We are working on porting Semantic to using CSS variables to allow for easier theming. We are currently planning on using a CSS Pre-processor to move useful values over to variables. The current plan is to not use mix-ins or pre-processor specific code besides variables, and to add vendor prefixing using Grunt.
\n    \n      
Help code this
\n      
 Reach Out
\n    \n    Share Ideas\n\n    
\n\n    
Example Layouts
\n\n    
We are looking to create example layouts with Semantic to help people make sites quicker, and to learn the intracicies of using Semantic UI. The plan is to eventually create a sister site learnsemantic.com which will contain useful features for learning to use Semantic.
\n\n    \n      
Help code this
\n      
 Reach Out
\n    \n    Share Ideas\n\n    
\n\n    
Build Tools
\n\n    
We need to create a customizer for Semantic so user's can choose which components they would like to include and create custom zips with their minified concatenated code.
\n    
Most likely this means creating a standalone server that can take API requests for custom builds of semantic and return zip with minified and uncompressed source, or with a little ingenuity in-page javascript which uses JSZIP to do the same
\n\n    \n      
Help code this
\n      
 Reach Out
\n    \n    Share Ideas\n\n    
\n\n    
Test Coverage
\n\n    
Semantic uses Jasmine with Karma Test Runner and Travis CI to write unit tests for our UI modules.
\n\n    
We need help to increase our code coverage by writing Jasmine tests for modules and to write feature specs which can be used to write tests.
\n\n    \n      
Help code this
\n      
 Reach Out
\n    \n    Share Ideas\n\n  
\n\n  
\n\n    
Style Guide
\n    
Contributors may find it useful to read over the coding guidelines for the project. Most importantly, the guide for language, as it is one of the most important parts about Semantic UI.
\n\n    
\n      Language\n      CSS\n      Javascript\n    
\n  
\n
\n",
      "content": "\n\n<%- @partial('header', @tabs = {  introduction: 'Introduction', contributing: 'Contributing', learn: 'Learning More' }) %>\n\n
\n\n  
\n\n    
There are a variety of ways to contribute to the development of Semantic. We are a very new project and are looking for an enthusiastic and like-minded group of core contributors.\n\n    
Publicity
\n\n    
One of the easiest ways to support Semantic UI is to get the word out
\n\n    \n\n    \n\n    \n\n    \n\n    \n\n    \n\n    
Squashing Bugs
\n\n    
Please submit any bugs you encounter when using the library to our Github Issues Tracker.
\n\n    
Be sure to include a set of steps to reproduce the issue and any related information, browser, OS etc. If we can't see the issue then it will make solving things much more difficult.
\n\n    
When submitting a bug report, please Fork this JSFiddle to create a test-case. It will have Semantic and normalize.css included for you automatically.
\n\n     Submit a bug report\n\n    
Pull Requests
\n\n    
If you see a bug and you'd like to fix it, feel free to open a pull request.
\n    
\n      Create a Pull Request\n      View Open Issues\n    
\n\n  
\n\n  
\n\n    
Ideas
\n\n    
Semantic is looking for people to help contribute new core UI components, and suggest extensions for the library.
\n\n    
If you have suggestions for components missing from Semantic which you'd like to see in future versions please add them to our public UI Component board. The current list of upcoming components, and their current development status can be seen on the contributor UI board.
\n\n     Add an idea\n\n    
Code
\n\n    
We are looking for a few good coders to help us push out important new features for a release version of Semantic. Here's an overview of current features in development
\n\n    
CSS Variables
\n\n    
We are working on porting Semantic to using CSS variables to allow for easier theming. We are currently planning on using a CSS Pre-processor to move useful values over to variables. The current plan is to not use mix-ins or pre-processor specific code besides variables, and to add vendor prefixing using Grunt.
\n    \n      
Help code this
\n      
 Reach Out
\n    \n    Share Ideas\n\n    
\n\n    
Example Layouts
\n\n    
We are looking to create example layouts with Semantic to help people make sites quicker, and to learn the intracicies of using Semantic UI. The plan is to eventually create a sister site learnsemantic.com which will contain useful features for learning to use Semantic.
\n\n    \n      
Help code this
\n      
 Reach Out
\n    \n    Share Ideas\n\n    
\n\n    
Build Tools
\n\n    
We need to create a customizer for Semantic so user's can choose which components they would like to include and create custom zips with their minified concatenated code.
\n    
Most likely this means creating a standalone server that can take API requests for custom builds of semantic and return zip with minified and uncompressed source, or with a little ingenuity in-page javascript which uses JSZIP to do the same
\n\n    \n      
Help code this
\n      
 Reach Out
\n    \n    Share Ideas\n\n    
\n\n    
Test Coverage
\n\n    
Semantic uses Jasmine with Karma Test Runner and Travis CI to write unit tests for our UI modules.
\n\n    
We need help to increase our code coverage by writing Jasmine tests for modules and to write feature specs which can be used to write tests.
\n\n    \n      
Help code this
\n      
 Reach Out
\n    \n    Share Ideas\n\n  
\n\n  
\n\n    
Style Guide
\n    
Contributors may find it useful to read over the coding guidelines for the project. Most importantly, the guide for language, as it is one of the most important parts about Semantic UI.
\n\n    
\n      Language\n      CSS\n      Javascript\n    
\n  
\n
",
      "tags": null,
      "render": true,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": "Contributing",
      "name": "contributing.html",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "project-contributing",
      "url": "/project/contributing.html",
      "urls": [
        "/project/contributing.html"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": true,
      "header": "layout      : 'default'\ncss         : 'guide'\n\ntitle       : 'Contributing'\ndescription : 'It takes a village'\ntype        : 'Semantic Project'",
      "parser": "yaml",
      "body": "\n\n<%- @partial('header', @tabs = {  introduction: 'Introduction', contributing: 'Contributing', learn: 'Learning More' }) %>\n\n
\n\n  
\n\n    
There are a variety of ways to contribute to the development of Semantic. We are a very new project and are looking for an enthusiastic and like-minded group of core contributors.\n\n    
Publicity
\n\n    
One of the easiest ways to support Semantic UI is to get the word out
\n\n    \n\n    \n\n    \n\n    \n\n    \n\n    \n\n    
Squashing Bugs
\n\n    
Please submit any bugs you encounter when using the library to our Github Issues Tracker.
\n\n    
Be sure to include a set of steps to reproduce the issue and any related information, browser, OS etc. If we can't see the issue then it will make solving things much more difficult.
\n\n    
When submitting a bug report, please Fork this JSFiddle to create a test-case. It will have Semantic and normalize.css included for you automatically.
\n\n     Submit a bug report\n\n    
Pull Requests
\n\n    
If you see a bug and you'd like to fix it, feel free to open a pull request.
\n    
\n      Create a Pull Request\n      View Open Issues\n    
\n\n  
\n\n  
\n\n    
Ideas
\n\n    
Semantic is looking for people to help contribute new core UI components, and suggest extensions for the library.
\n\n    
If you have suggestions for components missing from Semantic which you'd like to see in future versions please add them to our public UI Component board. The current list of upcoming components, and their current development status can be seen on the contributor UI board.
\n\n     Add an idea\n\n    
Code
\n\n    
We are looking for a few good coders to help us push out important new features for a release version of Semantic. Here's an overview of current features in development
\n\n    
CSS Variables
\n\n    
We are working on porting Semantic to using CSS variables to allow for easier theming. We are currently planning on using a CSS Pre-processor to move useful values over to variables. The current plan is to not use mix-ins or pre-processor specific code besides variables, and to add vendor prefixing using Grunt.
\n    \n      
Help code this
\n      
 Reach Out
\n    \n    Share Ideas\n\n    
\n\n    
Example Layouts
\n\n    
We are looking to create example layouts with Semantic to help people make sites quicker, and to learn the intracicies of using Semantic UI. The plan is to eventually create a sister site learnsemantic.com which will contain useful features for learning to use Semantic.
\n\n    \n      
Help code this
\n      
 Reach Out
\n    \n    Share Ideas\n\n    
\n\n    
Build Tools
\n\n    
We need to create a customizer for Semantic so user's can choose which components they would like to include and create custom zips with their minified concatenated code.
\n    
Most likely this means creating a standalone server that can take API requests for custom builds of semantic and return zip with minified and uncompressed source, or with a little ingenuity in-page javascript which uses JSZIP to do the same
\n\n    \n      
Help code this
\n      
 Reach Out
\n    \n    Share Ideas\n\n    
\n\n    
Test Coverage
\n\n    
Semantic uses Jasmine with Karma Test Runner and Travis CI to write unit tests for our UI modules.
\n\n    
We need help to increase our code coverage by writing Jasmine tests for modules and to write feature specs which can be used to write tests.
\n\n    \n      
Help code this
\n      
 Reach Out
\n    \n    Share Ideas\n\n  
\n\n  
\n\n    
Style Guide
\n    
Contributors may find it useful to read over the coding guidelines for the project. Most importantly, the guide for language, as it is one of the most important parts about Semantic UI.
\n\n    
\n      Language\n      CSS\n      Javascript\n    
\n  
\n
",
      "rendered": true,
      "contentRendered": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  \n  \n  \n  \n\n  \n\n  \n  \n  Contributing | Semantic UI\n\n  \n  \n\n  \n\n  \n  \n  \n\n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n\n  \n  \n\n\n  
\n    \n       Close Menu\n    \n    \n       Download\n    \n    
\n      \n        Introduction\n      \n      
\n        \n          Definitions\n        \n          Overview\n        \n          Types\n        \n          Variations\n        \n          What's Different\n        \n      
\n    
\n    
\n      Project\n      
\n        \n          Contributing\n        \n          Set-up\n        \n      
\n    
\n    
\n      Elements\n      
\n        \n          Button\n        \n          Divider\n        \n          Header\n        \n          Icon\n        \n          Image\n        \n          Input\n        \n          Label\n        \n          Loader\n        \n          Progress\n        \n          Reveal\n        \n          Segment\n        \n          Step\n        \n      
\n    
\n    
\n      Collections\n      
\n        \n          Breadcrumb\n        \n          Form\n        \n          Grid\n        \n          Menu\n        \n          Message\n        \n          Table\n        \n      
\n    
\n    
\n      Views\n      
\n        \n          Comment\n        \n          Feed\n        \n          Item\n        \n          List\n        \n      
\n    
\n    
\n      Modules\n      
\n        \n          Accordion\n        \n          Checkbox\n        \n          Dimmer\n        \n          Dropdown\n        \n          Modal\n        \n          Popup\n        \n          Rating\n        \n          Shape\n        \n          Sidebar\n        \n          Transition\n        \n      
\n    
\n    
\n      Behavior\n      
\n        \n          Form Validation\n        \n      
\n    
\n    
\n      Style Guide\n      
\n        \n          CSS\n        \n          Javascript\n        \n          Language\n        \n      
\n    
\n\n  
\n\n  
\n    
\n       Content\n      
\n        Semantic Project: Contributing\n      
\n      \n      
\n      \n      
\n        1 of 2\n        
\n          \n            
\n              1. Contributing\n            
\n          \n            
\n              2. Set-up\n            
\n          \n        
\n      
\n      \n      \n      \n      
\n        \n        
\n          \n        
\n        \n        \n        \n          \n        \n        \n      
\n    
\n  
\n    
\n      \n      Menu\n    
\n  \n\n\n\n
\n  
\n    
\n\n      
\n        Contributing\n        \n      
\n\n      
It takes a village
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n    \n    \n    \n    \n      \n        \n      \n        \n      \n        \n      \n      
\n        \n          Introduction\n          \n        \n          Contributing\n          \n        \n          Learning More\n          \n        \n      
\n      \n      
\n        \n          Introduction\n          \n        \n          Contributing\n          \n        \n          Learning More\n          \n        \n      
\n    \n  
\n
\n\n
\n\n  
\n\n    
There are a variety of ways to contribute to the development of Semantic. We are a very new project and are looking for an enthusiastic and like-minded group of core contributors.\n\n    
Publicity
\n\n    
One of the easiest ways to support Semantic UI is to get the word out
\n\n    \n\n    \n\n    \n\n    \n\n    \n\n    \n\n    
Squashing Bugs
\n\n    
Please submit any bugs you encounter when using the library to our Github Issues Tracker.
\n\n    
Be sure to include a set of steps to reproduce the issue and any related information, browser, OS etc. If we can't see the issue then it will make solving things much more difficult.
\n\n    
When submitting a bug report, please Fork this JSFiddle to create a test-case. It will have Semantic and normalize.css included for you automatically.
\n\n     Submit a bug report\n\n    
Pull Requests
\n\n    
If you see a bug and you'd like to fix it, feel free to open a pull request.
\n    
\n      Create a Pull Request\n      View Open Issues\n    
\n\n  
\n\n  
\n\n    
Ideas
\n\n    
Semantic is looking for people to help contribute new core UI components, and suggest extensions for the library.
\n\n    
If you have suggestions for components missing from Semantic which you'd like to see in future versions please add them to our public UI Component board. The current list of upcoming components, and their current development status can be seen on the contributor UI board.
\n\n     Add an idea\n\n    
Code
\n\n    
We are looking for a few good coders to help us push out important new features for a release version of Semantic. Here's an overview of current features in development
\n\n    
CSS Variables
\n\n    
We are working on porting Semantic to using CSS variables to allow for easier theming. We are currently planning on using a CSS Pre-processor to move useful values over to variables. The current plan is to not use mix-ins or pre-processor specific code besides variables, and to add vendor prefixing using Grunt.
\n    \n      
Help code this
\n      
 Reach Out
\n    \n    Share Ideas\n\n    
\n\n    
Example Layouts
\n\n    
We are looking to create example layouts with Semantic to help people make sites quicker, and to learn the intracicies of using Semantic UI. The plan is to eventually create a sister site learnsemantic.com which will contain useful features for learning to use Semantic.
\n\n    \n      
Help code this
\n      
 Reach Out
\n    \n    Share Ideas\n\n    
\n\n    
Build Tools
\n\n    
We need to create a customizer for Semantic so user's can choose which components they would like to include and create custom zips with their minified concatenated code.
\n    
Most likely this means creating a standalone server that can take API requests for custom builds of semantic and return zip with minified and uncompressed source, or with a little ingenuity in-page javascript which uses JSZIP to do the same
\n\n    \n      
Help code this
\n      
 Reach Out
\n    \n    Share Ideas\n\n    
\n\n    
Test Coverage
\n\n    
Semantic uses Jasmine with Karma Test Runner and Travis CI to write unit tests for our UI modules.
\n\n    
We need help to increase our code coverage by writing Jasmine tests for modules and to write feature specs which can be used to write tests.
\n\n    \n      
Help code this
\n      
 Reach Out
\n    \n    Share Ideas\n\n  
\n\n  
\n\n    
Style Guide
\n    
Contributors may find it useful to read over the coding guidelines for the project. Most importantly, the guide for language, as it is one of the most important parts about Semantic UI.
\n\n    
\n      Language\n      CSS\n      Javascript\n    
\n  
\n
\n\n\n",
      "contentRenderedWithoutLayouts": "\n\n\n\n
\n  
\n    
\n\n      
\n        Contributing\n        \n      
\n\n      
It takes a village
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n    \n    \n    \n    \n      \n        \n      \n        \n      \n        \n      \n      
\n        \n          Introduction\n          \n        \n          Contributing\n          \n        \n          Learning More\n          \n        \n      
\n      \n      
\n        \n          Introduction\n          \n        \n          Contributing\n          \n        \n          Learning More\n          \n        \n      
\n    \n  
\n
\n\n
\n\n  
\n\n    
There are a variety of ways to contribute to the development of Semantic. We are a very new project and are looking for an enthusiastic and like-minded group of core contributors.\n\n    
Publicity
\n\n    
One of the easiest ways to support Semantic UI is to get the word out
\n\n    \n\n    \n\n    \n\n    \n\n    \n\n    \n\n    
Squashing Bugs
\n\n    
Please submit any bugs you encounter when using the library to our Github Issues Tracker.
\n\n    
Be sure to include a set of steps to reproduce the issue and any related information, browser, OS etc. If we can't see the issue then it will make solving things much more difficult.
\n\n    
When submitting a bug report, please Fork this JSFiddle to create a test-case. It will have Semantic and normalize.css included for you automatically.
\n\n     Submit a bug report\n\n    
Pull Requests
\n\n    
If you see a bug and you'd like to fix it, feel free to open a pull request.
\n    
\n      Create a Pull Request\n      View Open Issues\n    
\n\n  
\n\n  
\n\n    
Ideas
\n\n    
Semantic is looking for people to help contribute new core UI components, and suggest extensions for the library.
\n\n    
If you have suggestions for components missing from Semantic which you'd like to see in future versions please add them to our public UI Component board. The current list of upcoming components, and their current development status can be seen on the contributor UI board.
\n\n     Add an idea\n\n    
Code
\n\n    
We are looking for a few good coders to help us push out important new features for a release version of Semantic. Here's an overview of current features in development
\n\n    
CSS Variables
\n\n    
We are working on porting Semantic to using CSS variables to allow for easier theming. We are currently planning on using a CSS Pre-processor to move useful values over to variables. The current plan is to not use mix-ins or pre-processor specific code besides variables, and to add vendor prefixing using Grunt.
\n    \n      
Help code this
\n      
 Reach Out
\n    \n    Share Ideas\n\n    
\n\n    
Example Layouts
\n\n    
We are looking to create example layouts with Semantic to help people make sites quicker, and to learn the intracicies of using Semantic UI. The plan is to eventually create a sister site learnsemantic.com which will contain useful features for learning to use Semantic.
\n\n    \n      
Help code this
\n      
 Reach Out
\n    \n    Share Ideas\n\n    
\n\n    
Build Tools
\n\n    
We need to create a customizer for Semantic so user's can choose which components they would like to include and create custom zips with their minified concatenated code.
\n    
Most likely this means creating a standalone server that can take API requests for custom builds of semantic and return zip with minified and uncompressed source, or with a little ingenuity in-page javascript which uses JSZIP to do the same
\n\n    \n      
Help code this
\n      
 Reach Out
\n    \n    Share Ideas\n\n    
\n\n    
Test Coverage
\n\n    
Semantic uses Jasmine with Karma Test Runner and Travis CI to write unit tests for our UI modules.
\n\n    
We need help to increase our code coverage by writing Jasmine tests for modules and to write feature specs which can be used to write tests.
\n\n    \n      
Help code this
\n      
 Reach Out
\n    \n    Share Ideas\n\n  
\n\n  
\n\n    
Style Guide
\n    
Contributors may find it useful to read over the coding guidelines for the project. Most importantly, the guide for language, as it is one of the most important parts about Semantic UI.
\n\n    
\n      Language\n      CSS\n      Javascript\n    
\n  
\n
",
      "renderSingleExtensions": false,
      "layout": "default",
      "css": "guide",
      "description": "It takes a village",
      "type": "Semantic Project",
      "layoutRelativePath": "default.html.eco",
      "meta": {
        "layout": "default",
        "css": "guide",
        "title": "Contributing",
        "description": "It takes a village",
        "type": "Semantic Project"
      }
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/documents/project/development.html.eco",
      "relativePath": "project/development.html.eco",
      "basename": "development",
      "outBasename": "development",
      "extension": "eco",
      "outExtension": "html",
      "extensions": [
        "html",
        "eco"
      ],
      "filename": "development.html.eco",
      "fullDirPath": "/home/jack/projects/semantic/server/documents/project",
      "outPath": "/home/jack/projects/semantic/docs/project/development.html",
      "outDirPath": "/home/jack/projects/semantic/docs/project",
      "outFilename": "development.html",
      "relativeOutPath": "project/development.html",
      "relativeDirPath": "project",
      "relativeOutDirPath": "project",
      "relativeBase": "project/development",
      "relativeOutBase": "project/development",
      "contentType": "application/octet-stream",
      "outContentType": "text/html",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": "2013-12-04T09:15:26.988Z",
      "wtime": "2013-12-04T09:15:28.753Z",
      "exists": true,
      "encoding": "utf8",
      "source": "  ---\nlayout      : 'default'\ncss         : 'guide'\n\ntitle       : 'Set-up'\ndescription : 'A guide to developing locally'\ntype        : 'Semantic Project'\n---\n\n\n<%- @partial('header') %>\n
\n  
\n    
\n      Installing Dependencies\n      Fixing Bugs\n    
\n  
\n\n  
Installing Dependencies
\n\n  
It may be useful to run the development docs locally when working on a forked version of semantic, as the docs themselves help in testing out changes to ui components.
\n\n  
1. Install Node
\n  
Semantic docs are written in DocPad which requires NodeJS. 
\n\n  
Make sure npm does not require sudo to operate, this might cause permissions issues.
\n\n  \n\n  
2. Fork Semantic
\n\n  \n\n  
3. Install Dependencies
\n  
Running update inside the local directory will grab all packages in package.json in the root of the project.
\n\n  
\n    npm update\n  
\n\n\n  
4. Start Your Server
\n\n  
\n    docpad run\n  
\n\n  
Docpad should now run an instance of semantic-ui.com locally you can access at http://localhost:9778
\n\n  
Fixing Bugs
\n\n  
Watch Script
\n\n  
If you are working on fixing a UI component that is part of Semantic, your best bet is to work actively on the file in /src/{type}/{elementname}/ while running a watch script from grunt. This will rebuild the docs after you make changes, so you can see if you have corrected the issue you are fixing.
\n\n  
To see exactly what this is doing you can check out our commented gruntfile
\n\n  
\n    grunt\n  
\n\n  
The watch task is the default grunt task for Semantic, so you can start it quite simply.
\n\n  
Running Tests
\n  
Tests will automatically run with grunt watch if you have started karma
\n\n  
\n    karma start\n    grunt watch\n  
\n\n  
You can also run the test suite manually
\n  
\n    npm test\n    // or\n    grunt build\n    // or\n    karma run\n  
\n\n  
Packaging Elements
\n  
For convenience there is also a separate grunt command for building minified, packaged, and compressed versions of the library.
\n\n  
\n    grunt build\n  
\n\n\n  
\n\n  
\n  \n    Next: Library Introduction\n    \n  \n
\n",
      "content": "\n\n<%- @partial('header') %>\n
\n  
\n    
\n      Installing Dependencies\n      Fixing Bugs\n    
\n  
\n\n  
Installing Dependencies
\n\n  
It may be useful to run the development docs locally when working on a forked version of semantic, as the docs themselves help in testing out changes to ui components.
\n\n  
1. Install Node
\n  
Semantic docs are written in DocPad which requires NodeJS. 
\n\n  
Make sure npm does not require sudo to operate, this might cause permissions issues.
\n\n  \n\n  
2. Fork Semantic
\n\n  \n\n  
3. Install Dependencies
\n  
Running update inside the local directory will grab all packages in package.json in the root of the project.
\n\n  
\n    npm update\n  
\n\n\n  
4. Start Your Server
\n\n  
\n    docpad run\n  
\n\n  
Docpad should now run an instance of semantic-ui.com locally you can access at http://localhost:9778
\n\n  
Fixing Bugs
\n\n  
Watch Script
\n\n  
If you are working on fixing a UI component that is part of Semantic, your best bet is to work actively on the file in /src/{type}/{elementname}/ while running a watch script from grunt. This will rebuild the docs after you make changes, so you can see if you have corrected the issue you are fixing.
\n\n  
To see exactly what this is doing you can check out our commented gruntfile
\n\n  
\n    grunt\n  
\n\n  
The watch task is the default grunt task for Semantic, so you can start it quite simply.
\n\n  
Running Tests
\n  
Tests will automatically run with grunt watch if you have started karma
\n\n  
\n    karma start\n    grunt watch\n  
\n\n  
You can also run the test suite manually
\n  
\n    npm test\n    // or\n    grunt build\n    // or\n    karma run\n  
\n\n  
Packaging Elements
\n  
For convenience there is also a separate grunt command for building minified, packaged, and compressed versions of the library.
\n\n  
\n    grunt build\n  
\n\n\n  
\n\n  
\n  \n    Next: Library Introduction\n    \n  \n
",
      "tags": null,
      "render": true,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": "Set-up",
      "name": "development.html",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "project-development",
      "url": "/project/development.html",
      "urls": [
        "/project/development.html"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": true,
      "header": "layout      : 'default'\ncss         : 'guide'\n\ntitle       : 'Set-up'\ndescription : 'A guide to developing locally'\ntype        : 'Semantic Project'",
      "parser": "yaml",
      "body": "\n\n<%- @partial('header') %>\n
\n  
\n    
\n      Installing Dependencies\n      Fixing Bugs\n    
\n  
\n\n  
Installing Dependencies
\n\n  
It may be useful to run the development docs locally when working on a forked version of semantic, as the docs themselves help in testing out changes to ui components.
\n\n  
1. Install Node
\n  
Semantic docs are written in DocPad which requires NodeJS. 
\n\n  
Make sure npm does not require sudo to operate, this might cause permissions issues.
\n\n  \n\n  
2. Fork Semantic
\n\n  \n\n  
3. Install Dependencies
\n  
Running update inside the local directory will grab all packages in package.json in the root of the project.
\n\n  
\n    npm update\n  
\n\n\n  
4. Start Your Server
\n\n  
\n    docpad run\n  
\n\n  
Docpad should now run an instance of semantic-ui.com locally you can access at http://localhost:9778
\n\n  
Fixing Bugs
\n\n  
Watch Script
\n\n  
If you are working on fixing a UI component that is part of Semantic, your best bet is to work actively on the file in /src/{type}/{elementname}/ while running a watch script from grunt. This will rebuild the docs after you make changes, so you can see if you have corrected the issue you are fixing.
\n\n  
To see exactly what this is doing you can check out our commented gruntfile
\n\n  
\n    grunt\n  
\n\n  
The watch task is the default grunt task for Semantic, so you can start it quite simply.
\n\n  
Running Tests
\n  
Tests will automatically run with grunt watch if you have started karma
\n\n  
\n    karma start\n    grunt watch\n  
\n\n  
You can also run the test suite manually
\n  
\n    npm test\n    // or\n    grunt build\n    // or\n    karma run\n  
\n\n  
Packaging Elements
\n  
For convenience there is also a separate grunt command for building minified, packaged, and compressed versions of the library.
\n\n  
\n    grunt build\n  
\n\n\n  
\n\n  
\n  \n    Next: Library Introduction\n    \n  \n
",
      "rendered": true,
      "contentRendered": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  \n  \n  \n  \n\n  \n\n  \n  \n  Set-up | Semantic UI\n\n  \n  \n\n  \n\n  \n  \n  \n\n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n\n  \n  \n\n\n  
\n    \n       Close Menu\n    \n    \n       Download\n    \n    
\n      \n        Introduction\n      \n      
\n        \n          Definitions\n        \n          Overview\n        \n          Types\n        \n          Variations\n        \n          What's Different\n        \n      
\n    
\n    
\n      Project\n      
\n        \n          Contributing\n        \n          Set-up\n        \n      
\n    
\n    
\n      Elements\n      
\n        \n          Button\n        \n          Divider\n        \n          Header\n        \n          Icon\n        \n          Image\n        \n          Input\n        \n          Label\n        \n          Loader\n        \n          Progress\n        \n          Reveal\n        \n          Segment\n        \n          Step\n        \n      
\n    
\n    
\n      Collections\n      
\n        \n          Breadcrumb\n        \n          Form\n        \n          Grid\n        \n          Menu\n        \n          Message\n        \n          Table\n        \n      
\n    
\n    
\n      Views\n      
\n        \n          Comment\n        \n          Feed\n        \n          Item\n        \n          List\n        \n      
\n    
\n    
\n      Modules\n      
\n        \n          Accordion\n        \n          Checkbox\n        \n          Dimmer\n        \n          Dropdown\n        \n          Modal\n        \n          Popup\n        \n          Rating\n        \n          Shape\n        \n          Sidebar\n        \n          Transition\n        \n      
\n    
\n    
\n      Behavior\n      
\n        \n          Form Validation\n        \n      
\n    
\n    
\n      Style Guide\n      
\n        \n          CSS\n        \n          Javascript\n        \n          Language\n        \n      
\n    
\n\n  
\n\n  
\n    
\n       Content\n      
\n        Semantic Project: Set-up\n      
\n      \n      \n      \n      
\n        2 of 2\n        
\n          \n            
\n              1. Contributing\n            
\n          \n            
\n              2. Set-up\n            
\n          \n        
\n      
\n      \n      
\n      \n      
\n        \n        
\n          \n        
\n        \n        \n        \n          \n        \n        \n      
\n    
\n  
\n    
\n      \n      Menu\n    
\n  \n\n\n\n
\n  
\n    
\n\n      
\n        Set-up\n        \n      
\n\n      
A guide to developing locally
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n
\n  
\n    
\n      Installing Dependencies\n      Fixing Bugs\n    
\n  
\n\n  
Installing Dependencies
\n\n  
It may be useful to run the development docs locally when working on a forked version of semantic, as the docs themselves help in testing out changes to ui components.
\n\n  
1. Install Node
\n  
Semantic docs are written in DocPad which requires NodeJS. 
\n\n  
Make sure npm does not require sudo to operate, this might cause permissions issues.
\n\n  \n\n  
2. Fork Semantic
\n\n  \n\n  
3. Install Dependencies
\n  
Running update inside the local directory will grab all packages in package.json in the root of the project.
\n\n  
\n    npm update\n  
\n\n\n  
4. Start Your Server
\n\n  
\n    docpad run\n  
\n\n  
Docpad should now run an instance of semantic-ui.com locally you can access at http://localhost:9778
\n\n  
Fixing Bugs
\n\n  
Watch Script
\n\n  
If you are working on fixing a UI component that is part of Semantic, your best bet is to work actively on the file in /src/{type}/{elementname}/ while running a watch script from grunt. This will rebuild the docs after you make changes, so you can see if you have corrected the issue you are fixing.
\n\n  
To see exactly what this is doing you can check out our commented gruntfile
\n\n  
\n    grunt\n  
\n\n  
The watch task is the default grunt task for Semantic, so you can start it quite simply.
\n\n  
Running Tests
\n  
Tests will automatically run with grunt watch if you have started karma
\n\n  
\n    karma start\n    grunt watch\n  
\n\n  
You can also run the test suite manually
\n  
\n    npm test\n    // or\n    grunt build\n    // or\n    karma run\n  
\n\n  
Packaging Elements
\n  
For convenience there is also a separate grunt command for building minified, packaged, and compressed versions of the library.
\n\n  
\n    grunt build\n  
\n\n\n  
\n\n  
\n  \n    Next: Library Introduction\n    \n  \n
\n\n\n",
      "contentRenderedWithoutLayouts": "\n\n\n\n
\n  
\n    
\n\n      
\n        Set-up\n        \n      
\n\n      
A guide to developing locally
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n
\n  
\n    
\n      Installing Dependencies\n      Fixing Bugs\n    
\n  
\n\n  
Installing Dependencies
\n\n  
It may be useful to run the development docs locally when working on a forked version of semantic, as the docs themselves help in testing out changes to ui components.
\n\n  
1. Install Node
\n  
Semantic docs are written in DocPad which requires NodeJS. 
\n\n  
Make sure npm does not require sudo to operate, this might cause permissions issues.
\n\n  \n\n  
2. Fork Semantic
\n\n  \n\n  
3. Install Dependencies
\n  
Running update inside the local directory will grab all packages in package.json in the root of the project.
\n\n  
\n    npm update\n  
\n\n\n  
4. Start Your Server
\n\n  
\n    docpad run\n  
\n\n  
Docpad should now run an instance of semantic-ui.com locally you can access at http://localhost:9778
\n\n  
Fixing Bugs
\n\n  
Watch Script
\n\n  
If you are working on fixing a UI component that is part of Semantic, your best bet is to work actively on the file in /src/{type}/{elementname}/ while running a watch script from grunt. This will rebuild the docs after you make changes, so you can see if you have corrected the issue you are fixing.
\n\n  
To see exactly what this is doing you can check out our commented gruntfile
\n\n  
\n    grunt\n  
\n\n  
The watch task is the default grunt task for Semantic, so you can start it quite simply.
\n\n  
Running Tests
\n  
Tests will automatically run with grunt watch if you have started karma
\n\n  
\n    karma start\n    grunt watch\n  
\n\n  
You can also run the test suite manually
\n  
\n    npm test\n    // or\n    grunt build\n    // or\n    karma run\n  
\n\n  
Packaging Elements
\n  
For convenience there is also a separate grunt command for building minified, packaged, and compressed versions of the library.
\n\n  
\n    grunt build\n  
\n\n\n  
\n\n  
\n  \n    Next: Library Introduction\n    \n  \n
",
      "renderSingleExtensions": false,
      "layout": "default",
      "css": "guide",
      "description": "A guide to developing locally",
      "type": "Semantic Project",
      "layoutRelativePath": "default.html.eco",
      "meta": {
        "layout": "default",
        "css": "guide",
        "title": "Set-up",
        "description": "A guide to developing locally",
        "type": "Semantic Project"
      }
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/documents/views/comment.html.eco",
      "relativePath": "views/comment.html.eco",
      "basename": "comment",
      "outBasename": "comment",
      "extension": "eco",
      "outExtension": "html",
      "extensions": [
        "html",
        "eco"
      ],
      "filename": "comment.html.eco",
      "fullDirPath": "/home/jack/projects/semantic/server/documents/views",
      "outPath": "/home/jack/projects/semantic/docs/views/comment.html",
      "outDirPath": "/home/jack/projects/semantic/docs/views",
      "outFilename": "comment.html",
      "relativeOutPath": "views/comment.html",
      "relativeDirPath": "views",
      "relativeOutDirPath": "views",
      "relativeBase": "views/comment",
      "relativeOutBase": "views/comment",
      "contentType": "application/octet-stream",
      "outContentType": "text/html",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": "2013-12-04T09:15:27.054Z",
      "wtime": "2013-12-04T09:15:28.757Z",
      "exists": true,
      "encoding": "utf8",
      "source": "---\nlayout      : 'default'\ncss         : 'comment'\n\ntitle       : 'Comment'\ndescription : 'A comment view is used to display lists of user feedback to site content'\ntype        : 'UI View'\n---\n\n<%- @partial('header') %>\n
\n\n  
\n    
\n      Types\n      Content\n      Variations\n    
\n  
\n\n  
Types
\n\n  
\n    
Comments
\n    
A basic list of comments
\n\n    
\n      
\n        
\n          
\n             Comments\n          
\n          
\n            
\n              \n                \n              \n              
\n                Dog Doggington\n                
\n                  2 days ago\n                
\n                
\n                  I think this is a great idea and i am voting on it\n                
\n                
\n                  Reply\n                  Delete\n                
\n              
\n            
\n            
\n              \n                \n              \n              
\n                Pawfin Dog\n                
\n                  2 days ago\n                
\n                
\n                  I think this is a great idea and i am voting on it\n                
\n                
\n                  Reply\n                  Delete\n                
\n              
\n            
\n            
\n              \n                \n              \n              
\n                Dog Doggington\n                
\n                  2 days ago\n                
\n                
\n                  I think this is a great idea and i am voting on it\n                
\n                
\n                  Reply\n                  Delete\n                
\n              
\n            
\n            
\n              
\n                \n              
\n              
\n                 Add Reply\n              
\n            
\n          
\n        
\n      
\n    
\n  
\n  
Content
\n\n  
Comment
\n\n  
\n    
Avatar
\n    
A comment can contain an image or avatar
\n    
\n      
\n        \n          \n        \n        
\n          Dog Doggington\n          
\n            I think this is a great idea and i am voting on it\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Metadata
\n    
A comment can contain metadata about the comment, an arbitrary amount of metadata may be defined.
\n    
\n      
\n        \n          \n        \n        
\n          Dog Doggington\n          
\n            
2 days ago
\n            
\n              \n              \n              \n              \n              \n            
\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Actions
\n    
A comment can contain an list of actions a user may perform related to this comment.
\n    
\n      
\n        \n          \n        \n        
\n          Dog Doggington\n          
\n            
2 days ago
\n            
\n              \n              \n              \n              \n              \n            
\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n            Delete\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Reply Form
\n    
A comment can contain a form to reply to a comment. This may have arbitrary content.
\n    
\n      
\n        \n          \n        \n        
\n          Dog Doggington\n          
\n            
2 days ago
\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n            Delete\n          
\n          
\n            
\n              \n            
\n            
\n               Add Reply\n            
\n          
\n        
\n      
\n    
\n  
\n  
\n    
A comment reply form can also exist below a comment feed to reply specifically to the original content.\n    
\n      
\n        \n          \n        \n        
\n          Dog Doggington\n          
\n            
2 days ago
\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n            Delete\n          
\n        
\n      
\n      
\n        \n          \n        \n        
\n          Pawfin Dog\n          
\n            
1 day ago
\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n           Add Comment\n        
\n      
\n    
\n  
\n\n\n  
Variations
\n\n  
\n    
Threaded
\n    
A comment list can be threaded to showing the relationship between conversations
\n    
\n      
\n        \n          \n        \n        
\n          Dog Doggington\n          
\n            2 days ago\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n            Delete\n          
\n        
\n        
\n          
\n            \n              \n            \n            
\n              Pawfin Dog\n              
\n                1 day ago\n              
\n              
\n                I think this is a great idea and i am voting on it\n              
\n              
\n                Reply\n                Delete\n              
\n            
\n            
\n              
\n                \n                  \n                \n                
\n                  Dog Doggington\n                  
\n                    20 minutes ago\n                  
\n                  
\n                    I think this is a great idea and i am voting on it\n                  
\n                  
\n                    Reply\n                    Delete\n                  
\n                
\n              
\n              
\n                \n                  \n                \n                
\n                  Dog Doggington\n                  
\n                    20 minutes ago\n                  
\n                  
\n                    Also pizza.\n                  
\n                  
\n                    Reply\n                    Delete\n                  
\n                
\n              
\n            
\n          
\n          
\n            \n              \n            \n            
\n              Dog Doggington\n              
\n                2 days ago\n              
\n              
\n                I think this is a great idea and i am voting on it\n              
\n              
\n                Reply\n                Delete\n              
\n            
\n          
\n        
\n      
\n      
\n        \n          \n        \n        
\n          Dog Doggington\n          
\n            20 hours ago\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n          
\n        
\n      
\n      
\n        \n          \n        \n        
\n          Pawfin Dog\n          
\n            15 hours ago\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n          
\n        
\n      
\n    
\n  
\n\n\n  
\n    
Minimal
\n    
Comments can hide extra information unless a user shows intent to interact with a comment.
\n    
\n      
\n        \n          \n        \n        
\n          Dog Doggington\n          
\n            2 days ago\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n            Delete\n          
\n        
\n        
\n          
\n            \n              \n            \n            
\n              Pawfin Dog\n              
\n                1 day ago\n              
\n              
\n                I think this is a great idea and i am voting on it\n              
\n              
\n                Reply\n                Delete\n              
\n            
\n            
\n              
\n                \n                  \n                \n                
\n                  Dog Doggington\n                  
\n                    20 minutes ago\n                  
\n                  
\n                    I think this is a great idea and i am voting on it\n                  
\n                  
\n                    Reply\n                    Delete\n                  
\n                
\n              
\n              
\n                \n                  \n                \n                
\n                  Dog Doggington\n                  
\n                    20 minutes ago\n                  
\n                  
\n                    Also pizza.\n                  
\n                  
\n                    Reply\n                    Delete\n                  
\n                
\n              
\n            
\n          
\n          
\n            \n              \n            \n            
\n              Dog Doggington\n              
\n                2 days ago\n              
\n              
\n                I think this is a great idea and i am voting on it\n              
\n              
\n                Reply\n                Delete\n              
\n            
\n          
\n        
\n      
\n      
\n        \n          \n        \n        
\n          Dog Doggington\n          
\n            20 hours ago\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n          
\n        
\n      
\n      
\n        \n          \n        \n        
\n          Pawfin Dog\n          
\n            15 hours ago\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n          
\n        
\n      
\n    
\n  
\n\n\n
",
      "content": "<%- @partial('header') %>\n
\n\n  
\n    
\n      Types\n      Content\n      Variations\n    
\n  
\n\n  
Types
\n\n  
\n    
Comments
\n    
A basic list of comments
\n\n    
\n      
\n        
\n          
\n             Comments\n          
\n          
\n            
\n              \n                \n              \n              
\n                Dog Doggington\n                
\n                  2 days ago\n                
\n                
\n                  I think this is a great idea and i am voting on it\n                
\n                
\n                  Reply\n                  Delete\n                
\n              
\n            
\n            
\n              \n                \n              \n              
\n                Pawfin Dog\n                
\n                  2 days ago\n                
\n                
\n                  I think this is a great idea and i am voting on it\n                
\n                
\n                  Reply\n                  Delete\n                
\n              
\n            
\n            
\n              \n                \n              \n              
\n                Dog Doggington\n                
\n                  2 days ago\n                
\n                
\n                  I think this is a great idea and i am voting on it\n                
\n                
\n                  Reply\n                  Delete\n                
\n              
\n            
\n            
\n              
\n                \n              
\n              
\n                 Add Reply\n              
\n            
\n          
\n        
\n      
\n    
\n  
\n  
Content
\n\n  
Comment
\n\n  
\n    
Avatar
\n    
A comment can contain an image or avatar
\n    
\n      
\n        \n          \n        \n        
\n          Dog Doggington\n          
\n            I think this is a great idea and i am voting on it\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Metadata
\n    
A comment can contain metadata about the comment, an arbitrary amount of metadata may be defined.
\n    
\n      
\n        \n          \n        \n        
\n          Dog Doggington\n          
\n            
2 days ago
\n            
\n              \n              \n              \n              \n              \n            
\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Actions
\n    
A comment can contain an list of actions a user may perform related to this comment.
\n    
\n      
\n        \n          \n        \n        
\n          Dog Doggington\n          
\n            
2 days ago
\n            
\n              \n              \n              \n              \n              \n            
\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n            Delete\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Reply Form
\n    
A comment can contain a form to reply to a comment. This may have arbitrary content.
\n    
\n      
\n        \n          \n        \n        
\n          Dog Doggington\n          
\n            
2 days ago
\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n            Delete\n          
\n          
\n            
\n              \n            
\n            
\n               Add Reply\n            
\n          
\n        
\n      
\n    
\n  
\n  
\n    
A comment reply form can also exist below a comment feed to reply specifically to the original content.\n    
\n      
\n        \n          \n        \n        
\n          Dog Doggington\n          
\n            
2 days ago
\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n            Delete\n          
\n        
\n      
\n      
\n        \n          \n        \n        
\n          Pawfin Dog\n          
\n            
1 day ago
\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n           Add Comment\n        
\n      
\n    
\n  
\n\n\n  
Variations
\n\n  
\n    
Threaded
\n    
A comment list can be threaded to showing the relationship between conversations
\n    
\n      
\n        \n          \n        \n        
\n          Dog Doggington\n          
\n            2 days ago\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n            Delete\n          
\n        
\n        
\n          
\n            \n              \n            \n            
\n              Pawfin Dog\n              
\n                1 day ago\n              
\n              
\n                I think this is a great idea and i am voting on it\n              
\n              
\n                Reply\n                Delete\n              
\n            
\n            
\n              
\n                \n                  \n                \n                
\n                  Dog Doggington\n                  
\n                    20 minutes ago\n                  
\n                  
\n                    I think this is a great idea and i am voting on it\n                  
\n                  
\n                    Reply\n                    Delete\n                  
\n                
\n              
\n              
\n                \n                  \n                \n                
\n                  Dog Doggington\n                  
\n                    20 minutes ago\n                  
\n                  
\n                    Also pizza.\n                  
\n                  
\n                    Reply\n                    Delete\n                  
\n                
\n              
\n            
\n          
\n          
\n            \n              \n            \n            
\n              Dog Doggington\n              
\n                2 days ago\n              
\n              
\n                I think this is a great idea and i am voting on it\n              
\n              
\n                Reply\n                Delete\n              
\n            
\n          
\n        
\n      
\n      
\n        \n          \n        \n        
\n          Dog Doggington\n          
\n            20 hours ago\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n          
\n        
\n      
\n      
\n        \n          \n        \n        
\n          Pawfin Dog\n          
\n            15 hours ago\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n          
\n        
\n      
\n    
\n  
\n\n\n  
\n    
Minimal
\n    
Comments can hide extra information unless a user shows intent to interact with a comment.
\n    
\n      
\n        \n          \n        \n        
\n          Dog Doggington\n          
\n            2 days ago\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n            Delete\n          
\n        
\n        
\n          
\n            \n              \n            \n            
\n              Pawfin Dog\n              
\n                1 day ago\n              
\n              
\n                I think this is a great idea and i am voting on it\n              
\n              
\n                Reply\n                Delete\n              
\n            
\n            
\n              
\n                \n                  \n                \n                
\n                  Dog Doggington\n                  
\n                    20 minutes ago\n                  
\n                  
\n                    I think this is a great idea and i am voting on it\n                  
\n                  
\n                    Reply\n                    Delete\n                  
\n                
\n              
\n              
\n                \n                  \n                \n                
\n                  Dog Doggington\n                  
\n                    20 minutes ago\n                  
\n                  
\n                    Also pizza.\n                  
\n                  
\n                    Reply\n                    Delete\n                  
\n                
\n              
\n            
\n          
\n          
\n            \n              \n            \n            
\n              Dog Doggington\n              
\n                2 days ago\n              
\n              
\n                I think this is a great idea and i am voting on it\n              
\n              
\n                Reply\n                Delete\n              
\n            
\n          
\n        
\n      
\n      
\n        \n          \n        \n        
\n          Dog Doggington\n          
\n            20 hours ago\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n          
\n        
\n      
\n      
\n        \n          \n        \n        
\n          Pawfin Dog\n          
\n            15 hours ago\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n          
\n        
\n      
\n    
\n  
\n\n\n
",
      "tags": null,
      "render": true,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": "Comment",
      "name": "comment.html",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "views-comment",
      "url": "/views/comment.html",
      "urls": [
        "/views/comment.html"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": true,
      "header": "layout      : 'default'\ncss         : 'comment'\n\ntitle       : 'Comment'\ndescription : 'A comment view is used to display lists of user feedback to site content'\ntype        : 'UI View'",
      "parser": "yaml",
      "body": "<%- @partial('header') %>\n
\n\n  
\n    
\n      Types\n      Content\n      Variations\n    
\n  
\n\n  
Types
\n\n  
\n    
Comments
\n    
A basic list of comments
\n\n    
\n      
\n        
\n          
\n             Comments\n          
\n          
\n            
\n              \n                \n              \n              
\n                Dog Doggington\n                
\n                  2 days ago\n                
\n                
\n                  I think this is a great idea and i am voting on it\n                
\n                
\n                  Reply\n                  Delete\n                
\n              
\n            
\n            
\n              \n                \n              \n              
\n                Pawfin Dog\n                
\n                  2 days ago\n                
\n                
\n                  I think this is a great idea and i am voting on it\n                
\n                
\n                  Reply\n                  Delete\n                
\n              
\n            
\n            
\n              \n                \n              \n              
\n                Dog Doggington\n                
\n                  2 days ago\n                
\n                
\n                  I think this is a great idea and i am voting on it\n                
\n                
\n                  Reply\n                  Delete\n                
\n              
\n            
\n            
\n              
\n                \n              
\n              
\n                 Add Reply\n              
\n            
\n          
\n        
\n      
\n    
\n  
\n  
Content
\n\n  
Comment
\n\n  
\n    
Avatar
\n    
A comment can contain an image or avatar
\n    
\n      
\n        \n          \n        \n        
\n          Dog Doggington\n          
\n            I think this is a great idea and i am voting on it\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Metadata
\n    
A comment can contain metadata about the comment, an arbitrary amount of metadata may be defined.
\n    
\n      
\n        \n          \n        \n        
\n          Dog Doggington\n          
\n            
2 days ago
\n            
\n              \n              \n              \n              \n              \n            
\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Actions
\n    
A comment can contain an list of actions a user may perform related to this comment.
\n    
\n      
\n        \n          \n        \n        
\n          Dog Doggington\n          
\n            
2 days ago
\n            
\n              \n              \n              \n              \n              \n            
\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n            Delete\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Reply Form
\n    
A comment can contain a form to reply to a comment. This may have arbitrary content.
\n    
\n      
\n        \n          \n        \n        
\n          Dog Doggington\n          
\n            
2 days ago
\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n            Delete\n          
\n          
\n            
\n              \n            
\n            
\n               Add Reply\n            
\n          
\n        
\n      
\n    
\n  
\n  
\n    
A comment reply form can also exist below a comment feed to reply specifically to the original content.\n    
\n      
\n        \n          \n        \n        
\n          Dog Doggington\n          
\n            
2 days ago
\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n            Delete\n          
\n        
\n      
\n      
\n        \n          \n        \n        
\n          Pawfin Dog\n          
\n            
1 day ago
\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n           Add Comment\n        
\n      
\n    
\n  
\n\n\n  
Variations
\n\n  
\n    
Threaded
\n    
A comment list can be threaded to showing the relationship between conversations
\n    
\n      
\n        \n          \n        \n        
\n          Dog Doggington\n          
\n            2 days ago\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n            Delete\n          
\n        
\n        
\n          
\n            \n              \n            \n            
\n              Pawfin Dog\n              
\n                1 day ago\n              
\n              
\n                I think this is a great idea and i am voting on it\n              
\n              
\n                Reply\n                Delete\n              
\n            
\n            
\n              
\n                \n                  \n                \n                
\n                  Dog Doggington\n                  
\n                    20 minutes ago\n                  
\n                  
\n                    I think this is a great idea and i am voting on it\n                  
\n                  
\n                    Reply\n                    Delete\n                  
\n                
\n              
\n              
\n                \n                  \n                \n                
\n                  Dog Doggington\n                  
\n                    20 minutes ago\n                  
\n                  
\n                    Also pizza.\n                  
\n                  
\n                    Reply\n                    Delete\n                  
\n                
\n              
\n            
\n          
\n          
\n            \n              \n            \n            
\n              Dog Doggington\n              
\n                2 days ago\n              
\n              
\n                I think this is a great idea and i am voting on it\n              
\n              
\n                Reply\n                Delete\n              
\n            
\n          
\n        
\n      
\n      
\n        \n          \n        \n        
\n          Dog Doggington\n          
\n            20 hours ago\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n          
\n        
\n      
\n      
\n        \n          \n        \n        
\n          Pawfin Dog\n          
\n            15 hours ago\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n          
\n        
\n      
\n    
\n  
\n\n\n  
\n    
Minimal
\n    
Comments can hide extra information unless a user shows intent to interact with a comment.
\n    
\n      
\n        \n          \n        \n        
\n          Dog Doggington\n          
\n            2 days ago\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n            Delete\n          
\n        
\n        
\n          
\n            \n              \n            \n            
\n              Pawfin Dog\n              
\n                1 day ago\n              
\n              
\n                I think this is a great idea and i am voting on it\n              
\n              
\n                Reply\n                Delete\n              
\n            
\n            
\n              
\n                \n                  \n                \n                
\n                  Dog Doggington\n                  
\n                    20 minutes ago\n                  
\n                  
\n                    I think this is a great idea and i am voting on it\n                  
\n                  
\n                    Reply\n                    Delete\n                  
\n                
\n              
\n              
\n                \n                  \n                \n                
\n                  Dog Doggington\n                  
\n                    20 minutes ago\n                  
\n                  
\n                    Also pizza.\n                  
\n                  
\n                    Reply\n                    Delete\n                  
\n                
\n              
\n            
\n          
\n          
\n            \n              \n            \n            
\n              Dog Doggington\n              
\n                2 days ago\n              
\n              
\n                I think this is a great idea and i am voting on it\n              
\n              
\n                Reply\n                Delete\n              
\n            
\n          
\n        
\n      
\n      
\n        \n          \n        \n        
\n          Dog Doggington\n          
\n            20 hours ago\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n          
\n        
\n      
\n      
\n        \n          \n        \n        
\n          Pawfin Dog\n          
\n            15 hours ago\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n          
\n        
\n      
\n    
\n  
\n\n\n
",
      "rendered": true,
      "contentRendered": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  \n  \n  \n  \n\n  \n\n  \n  \n  Comment | Semantic UI\n\n  \n  \n\n  \n\n  \n  \n  \n\n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n\n  \n  \n\n\n  
\n    \n       Close Menu\n    \n    \n       Download\n    \n    
\n      \n        Introduction\n      \n      
\n        \n          Definitions\n        \n          Overview\n        \n          Types\n        \n          Variations\n        \n          What's Different\n        \n      
\n    
\n    
\n      Project\n      
\n        \n          Contributing\n        \n          Set-up\n        \n      
\n    
\n    
\n      Elements\n      
\n        \n          Button\n        \n          Divider\n        \n          Header\n        \n          Icon\n        \n          Image\n        \n          Input\n        \n          Label\n        \n          Loader\n        \n          Progress\n        \n          Reveal\n        \n          Segment\n        \n          Step\n        \n      
\n    
\n    
\n      Collections\n      
\n        \n          Breadcrumb\n        \n          Form\n        \n          Grid\n        \n          Menu\n        \n          Message\n        \n          Table\n        \n      
\n    
\n    
\n      Views\n      
\n        \n          Comment\n        \n          Feed\n        \n          Item\n        \n          List\n        \n      
\n    
\n    
\n      Modules\n      
\n        \n          Accordion\n        \n          Checkbox\n        \n          Dimmer\n        \n          Dropdown\n        \n          Modal\n        \n          Popup\n        \n          Rating\n        \n          Shape\n        \n          Sidebar\n        \n          Transition\n        \n      
\n    
\n    
\n      Behavior\n      
\n        \n          Form Validation\n        \n      
\n    
\n    
\n      Style Guide\n      
\n        \n          CSS\n        \n          Javascript\n        \n          Language\n        \n      
\n    
\n\n  
\n\n  
\n    
\n       Content\n      
\n        UI View: Comment\n      
\n      \n      
\n      \n      
\n        1 of 4\n        
\n          \n            
\n              1. Comment\n            
\n          \n            
\n              2. Feed\n            
\n          \n            
\n              3. Item\n            
\n          \n            
\n              4. List\n            
\n          \n        
\n      
\n      \n      \n      \n      
\n        \n        
\n          \n        
\n        \n        \n\n        \n          \n        \n        \n          \n        \n        \n        \n          \n        \n        \n      
\n    
\n  
\n    
\n      \n      Menu\n    
\n  \n\n
\n  
\n    
\n\n      
\n        Comment\n        \n      
\n\n      
A comment view is used to display lists of user feedback to site content
\n      \n      
\n        Definition Mode\n        \n      
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n
\n\n  
\n    
\n      Types\n      Content\n      Variations\n    
\n  
\n\n  
Types
\n\n  
\n    
Comments
\n    
A basic list of comments
\n\n    
\n      
\n        
\n          
\n             Comments\n          
\n          
\n            
\n              \n                \n              \n              
\n                Dog Doggington\n                
\n                  2 days ago\n                
\n                
\n                  I think this is a great idea and i am voting on it\n                
\n                
\n                  Reply\n                  Delete\n                
\n              
\n            
\n            
\n              \n                \n              \n              
\n                Pawfin Dog\n                
\n                  2 days ago\n                
\n                
\n                  I think this is a great idea and i am voting on it\n                
\n                
\n                  Reply\n                  Delete\n                
\n              
\n            
\n            
\n              \n                \n              \n              
\n                Dog Doggington\n                
\n                  2 days ago\n                
\n                
\n                  I think this is a great idea and i am voting on it\n                
\n                
\n                  Reply\n                  Delete\n                
\n              
\n            
\n            
\n              
\n                \n              
\n              
\n                 Add Reply\n              
\n            
\n          
\n        
\n      
\n    
\n  
\n  
Content
\n\n  
Comment
\n\n  
\n    
Avatar
\n    
A comment can contain an image or avatar
\n    
\n      
\n        \n          \n        \n        
\n          Dog Doggington\n          
\n            I think this is a great idea and i am voting on it\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Metadata
\n    
A comment can contain metadata about the comment, an arbitrary amount of metadata may be defined.
\n    
\n      
\n        \n          \n        \n        
\n          Dog Doggington\n          
\n            
2 days ago
\n            
\n              \n              \n              \n              \n              \n            
\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Actions
\n    
A comment can contain an list of actions a user may perform related to this comment.
\n    
\n      
\n        \n          \n        \n        
\n          Dog Doggington\n          
\n            
2 days ago
\n            
\n              \n              \n              \n              \n              \n            
\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n            Delete\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Reply Form
\n    
A comment can contain a form to reply to a comment. This may have arbitrary content.
\n    
\n      
\n        \n          \n        \n        
\n          Dog Doggington\n          
\n            
2 days ago
\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n            Delete\n          
\n          
\n            
\n              \n            
\n            
\n               Add Reply\n            
\n          
\n        
\n      
\n    
\n  
\n  
\n    
A comment reply form can also exist below a comment feed to reply specifically to the original content.\n    
\n      
\n        \n          \n        \n        
\n          Dog Doggington\n          
\n            
2 days ago
\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n            Delete\n          
\n        
\n      
\n      
\n        \n          \n        \n        
\n          Pawfin Dog\n          
\n            
1 day ago
\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n           Add Comment\n        
\n      
\n    
\n  
\n\n\n  
Variations
\n\n  
\n    
Threaded
\n    
A comment list can be threaded to showing the relationship between conversations
\n    
\n      
\n        \n          \n        \n        
\n          Dog Doggington\n          
\n            2 days ago\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n            Delete\n          
\n        
\n        
\n          
\n            \n              \n            \n            
\n              Pawfin Dog\n              
\n                1 day ago\n              
\n              
\n                I think this is a great idea and i am voting on it\n              
\n              
\n                Reply\n                Delete\n              
\n            
\n            
\n              
\n                \n                  \n                \n                
\n                  Dog Doggington\n                  
\n                    20 minutes ago\n                  
\n                  
\n                    I think this is a great idea and i am voting on it\n                  
\n                  
\n                    Reply\n                    Delete\n                  
\n                
\n              
\n              
\n                \n                  \n                \n                
\n                  Dog Doggington\n                  
\n                    20 minutes ago\n                  
\n                  
\n                    Also pizza.\n                  
\n                  
\n                    Reply\n                    Delete\n                  
\n                
\n              
\n            
\n          
\n          
\n            \n              \n            \n            
\n              Dog Doggington\n              
\n                2 days ago\n              
\n              
\n                I think this is a great idea and i am voting on it\n              
\n              
\n                Reply\n                Delete\n              
\n            
\n          
\n        
\n      
\n      
\n        \n          \n        \n        
\n          Dog Doggington\n          
\n            20 hours ago\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n          
\n        
\n      
\n      
\n        \n          \n        \n        
\n          Pawfin Dog\n          
\n            15 hours ago\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n          
\n        
\n      
\n    
\n  
\n\n\n  
\n    
Minimal
\n    
Comments can hide extra information unless a user shows intent to interact with a comment.
\n    
\n      
\n        \n          \n        \n        
\n          Dog Doggington\n          
\n            2 days ago\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n            Delete\n          
\n        
\n        
\n          
\n            \n              \n            \n            
\n              Pawfin Dog\n              
\n                1 day ago\n              
\n              
\n                I think this is a great idea and i am voting on it\n              
\n              
\n                Reply\n                Delete\n              
\n            
\n            
\n              
\n                \n                  \n                \n                
\n                  Dog Doggington\n                  
\n                    20 minutes ago\n                  
\n                  
\n                    I think this is a great idea and i am voting on it\n                  
\n                  
\n                    Reply\n                    Delete\n                  
\n                
\n              
\n              
\n                \n                  \n                \n                
\n                  Dog Doggington\n                  
\n                    20 minutes ago\n                  
\n                  
\n                    Also pizza.\n                  
\n                  
\n                    Reply\n                    Delete\n                  
\n                
\n              
\n            
\n          
\n          
\n            \n              \n            \n            
\n              Dog Doggington\n              
\n                2 days ago\n              
\n              
\n                I think this is a great idea and i am voting on it\n              
\n              
\n                Reply\n                Delete\n              
\n            
\n          
\n        
\n      
\n      
\n        \n          \n        \n        
\n          Dog Doggington\n          
\n            20 hours ago\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n          
\n        
\n      
\n      
\n        \n          \n        \n        
\n          Pawfin Dog\n          
\n            15 hours ago\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n          
\n        
\n      
\n    
\n  
\n\n\n
\n\n\n",
      "contentRenderedWithoutLayouts": "\n\n
\n  
\n    
\n\n      
\n        Comment\n        \n      
\n\n      
A comment view is used to display lists of user feedback to site content
\n      \n      
\n        Definition Mode\n        \n      
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n
\n\n  
\n    
\n      Types\n      Content\n      Variations\n    
\n  
\n\n  
Types
\n\n  
\n    
Comments
\n    
A basic list of comments
\n\n    
\n      
\n        
\n          
\n             Comments\n          
\n          
\n            
\n              \n                \n              \n              
\n                Dog Doggington\n                
\n                  2 days ago\n                
\n                
\n                  I think this is a great idea and i am voting on it\n                
\n                
\n                  Reply\n                  Delete\n                
\n              
\n            
\n            
\n              \n                \n              \n              
\n                Pawfin Dog\n                
\n                  2 days ago\n                
\n                
\n                  I think this is a great idea and i am voting on it\n                
\n                
\n                  Reply\n                  Delete\n                
\n              
\n            
\n            
\n              \n                \n              \n              
\n                Dog Doggington\n                
\n                  2 days ago\n                
\n                
\n                  I think this is a great idea and i am voting on it\n                
\n                
\n                  Reply\n                  Delete\n                
\n              
\n            
\n            
\n              
\n                \n              
\n              
\n                 Add Reply\n              
\n            
\n          
\n        
\n      
\n    
\n  
\n  
Content
\n\n  
Comment
\n\n  
\n    
Avatar
\n    
A comment can contain an image or avatar
\n    
\n      
\n        \n          \n        \n        
\n          Dog Doggington\n          
\n            I think this is a great idea and i am voting on it\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Metadata
\n    
A comment can contain metadata about the comment, an arbitrary amount of metadata may be defined.
\n    
\n      
\n        \n          \n        \n        
\n          Dog Doggington\n          
\n            
2 days ago
\n            
\n              \n              \n              \n              \n              \n            
\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Actions
\n    
A comment can contain an list of actions a user may perform related to this comment.
\n    
\n      
\n        \n          \n        \n        
\n          Dog Doggington\n          
\n            
2 days ago
\n            
\n              \n              \n              \n              \n              \n            
\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n            Delete\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Reply Form
\n    
A comment can contain a form to reply to a comment. This may have arbitrary content.
\n    
\n      
\n        \n          \n        \n        
\n          Dog Doggington\n          
\n            
2 days ago
\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n            Delete\n          
\n          
\n            
\n              \n            
\n            
\n               Add Reply\n            
\n          
\n        
\n      
\n    
\n  
\n  
\n    
A comment reply form can also exist below a comment feed to reply specifically to the original content.\n    
\n      
\n        \n          \n        \n        
\n          Dog Doggington\n          
\n            
2 days ago
\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n            Delete\n          
\n        
\n      
\n      
\n        \n          \n        \n        
\n          Pawfin Dog\n          
\n            
1 day ago
\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n           Add Comment\n        
\n      
\n    
\n  
\n\n\n  
Variations
\n\n  
\n    
Threaded
\n    
A comment list can be threaded to showing the relationship between conversations
\n    
\n      
\n        \n          \n        \n        
\n          Dog Doggington\n          
\n            2 days ago\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n            Delete\n          
\n        
\n        
\n          
\n            \n              \n            \n            
\n              Pawfin Dog\n              
\n                1 day ago\n              
\n              
\n                I think this is a great idea and i am voting on it\n              
\n              
\n                Reply\n                Delete\n              
\n            
\n            
\n              
\n                \n                  \n                \n                
\n                  Dog Doggington\n                  
\n                    20 minutes ago\n                  
\n                  
\n                    I think this is a great idea and i am voting on it\n                  
\n                  
\n                    Reply\n                    Delete\n                  
\n                
\n              
\n              
\n                \n                  \n                \n                
\n                  Dog Doggington\n                  
\n                    20 minutes ago\n                  
\n                  
\n                    Also pizza.\n                  
\n                  
\n                    Reply\n                    Delete\n                  
\n                
\n              
\n            
\n          
\n          
\n            \n              \n            \n            
\n              Dog Doggington\n              
\n                2 days ago\n              
\n              
\n                I think this is a great idea and i am voting on it\n              
\n              
\n                Reply\n                Delete\n              
\n            
\n          
\n        
\n      
\n      
\n        \n          \n        \n        
\n          Dog Doggington\n          
\n            20 hours ago\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n          
\n        
\n      
\n      
\n        \n          \n        \n        
\n          Pawfin Dog\n          
\n            15 hours ago\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n          
\n        
\n      
\n    
\n  
\n\n\n  
\n    
Minimal
\n    
Comments can hide extra information unless a user shows intent to interact with a comment.
\n    
\n      
\n        \n          \n        \n        
\n          Dog Doggington\n          
\n            2 days ago\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n            Delete\n          
\n        
\n        
\n          
\n            \n              \n            \n            
\n              Pawfin Dog\n              
\n                1 day ago\n              
\n              
\n                I think this is a great idea and i am voting on it\n              
\n              
\n                Reply\n                Delete\n              
\n            
\n            
\n              
\n                \n                  \n                \n                
\n                  Dog Doggington\n                  
\n                    20 minutes ago\n                  
\n                  
\n                    I think this is a great idea and i am voting on it\n                  
\n                  
\n                    Reply\n                    Delete\n                  
\n                
\n              
\n              
\n                \n                  \n                \n                
\n                  Dog Doggington\n                  
\n                    20 minutes ago\n                  
\n                  
\n                    Also pizza.\n                  
\n                  
\n                    Reply\n                    Delete\n                  
\n                
\n              
\n            
\n          
\n          
\n            \n              \n            \n            
\n              Dog Doggington\n              
\n                2 days ago\n              
\n              
\n                I think this is a great idea and i am voting on it\n              
\n              
\n                Reply\n                Delete\n              
\n            
\n          
\n        
\n      
\n      
\n        \n          \n        \n        
\n          Dog Doggington\n          
\n            20 hours ago\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n          
\n        
\n      
\n      
\n        \n          \n        \n        
\n          Pawfin Dog\n          
\n            15 hours ago\n          
\n          
\n            I think this is a great idea and i am voting on it\n          
\n          
\n            Reply\n          
\n        
\n      
\n    
\n  
\n\n\n
",
      "renderSingleExtensions": false,
      "layout": "default",
      "css": "comment",
      "description": "A comment view is used to display lists of user feedback to site content",
      "type": "UI View",
      "layoutRelativePath": "default.html.eco",
      "meta": {
        "layout": "default",
        "css": "comment",
        "title": "Comment",
        "description": "A comment view is used to display lists of user feedback to site content",
        "type": "UI View"
      }
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/documents/views/feed.html.eco",
      "relativePath": "views/feed.html.eco",
      "basename": "feed",
      "outBasename": "feed",
      "extension": "eco",
      "outExtension": "html",
      "extensions": [
        "html",
        "eco"
      ],
      "filename": "feed.html.eco",
      "fullDirPath": "/home/jack/projects/semantic/server/documents/views",
      "outPath": "/home/jack/projects/semantic/docs/views/feed.html",
      "outDirPath": "/home/jack/projects/semantic/docs/views",
      "outFilename": "feed.html",
      "relativeOutPath": "views/feed.html",
      "relativeDirPath": "views",
      "relativeOutDirPath": "views",
      "relativeBase": "views/feed",
      "relativeOutBase": "views/feed",
      "contentType": "application/octet-stream",
      "outContentType": "text/html",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": "2013-12-04T09:15:27.128Z",
      "wtime": "2013-12-04T09:15:28.760Z",
      "exists": true,
      "encoding": "utf8",
      "source": "---\nlayout      : 'default'\ncss         : 'feed'\n\ntitle       : 'Feed'\ndescription : 'A feed presents user activity chronologically'\ntype        : 'UI View'\n---\n\n<%- @partial('header') %>\n
\n\n  
\n    
\n      Types\n      Content\n      Variations\n    
\n  
\n\n  
Types
\n\n  
\n    
Feed
\n    
A standard feed with some optional elements
\n    
\n      
\n        Recent Activity\n      
\n      
\n        
\n          \n        
\n        
\n          
\n            Just moments ago\n          
\n          
\n             Sally Poodle added you as a friend\n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          
\n            3 days ago\n          
\n          
\n            You submitted a new post to the page\n          
\n          
\n            I am a dog and I do not know how to make a post\n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          
\n            3 days ago\n          
\n          
\n            Sally Poodle added 2 new photos of you\n          
\n          
\n            \n            \n          
\n        
\n      
\n    
\n  
\n\n  
Content
\n\n  
\n    
Label
\n    
An event can contain a label
\n    
In semantic's implementation a label is formatted to contain an icon or an image
\n    
\n      
\n        
\n          \n        
\n        
\n          
\n             Sally Poodle added you as a friend\n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          
\n            You submitted a new post to the page\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Date
\n    
An event can contain a date
\n    
\n      
\n        
\n          \n        
\n        
\n          
\n            3 days ago\n          
\n          
\n             Sally Poodle added you as a friend\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Additional information
\n    
An event can contain additional content explaining the event
\n    
\n      
\n        
\n          \n        
\n        
\n          
\n            3 days ago\n          
\n          
\n             Sally Poodle added 2 photos of you\n          
\n          
\n            \n            \n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          
\n            3 days ago\n          
\n          
\n             Sally Poodle created a post\n          
\n          
\n            I am a dog and I do not know how to make a post\n          
\n        
\n      
\n    
\n  
\n\n\n  
Variations
\n  
\n    
Sizes
\n    
A feed can have different sizes
\n\n    
\n      
\n        
\n          
My Activity
\n          
\n            
\n              \n            
\n            
\n              
\n                Just moments ago\n              
\n              
\n                 Sally Poodle added you as a friend\n              
\n            
\n          
\n          
\n            
\n              \n            
\n            
\n              
\n                3 days ago\n              
\n              
\n                You submitted a new post to the page\n              
\n              
\n                I am a dog and I do not know how to make a post\n              
\n            
\n          
\n          
\n            
\n              \n            
\n            
\n              
\n                3 days ago\n              
\n              
\n                Sally Poodle added 2 new photos of you\n              
\n              
\n                \n                \n              
\n            
\n          
\n        
\n      
\n      
\n        
\n          
Followers Activity
\n          
\n            
\n              
\n                 Sally Poodle added hotpup202 as a friend\n              
\n            
\n          
\n          
\n            
\n              
\n                 Dally Doodle added hotpup202 as a friend\n              
\n            
\n          
\n          
\n            
\n              
\n                 Sally Poodle added sixpack dog as a friend\n              
\n            
\n          
\n          
\n            
\n              
\n                 Dally Doodle added hotpup202 as a friend\n              
\n            
\n          
\n        
\n      
\n    
\n\n  
\n\n\n
",
      "content": "<%- @partial('header') %>\n
\n\n  
\n    
\n      Types\n      Content\n      Variations\n    
\n  
\n\n  
Types
\n\n  
\n    
Feed
\n    
A standard feed with some optional elements
\n    
\n      
\n        Recent Activity\n      
\n      
\n        
\n          \n        
\n        
\n          
\n            Just moments ago\n          
\n          
\n             Sally Poodle added you as a friend\n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          
\n            3 days ago\n          
\n          
\n            You submitted a new post to the page\n          
\n          
\n            I am a dog and I do not know how to make a post\n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          
\n            3 days ago\n          
\n          
\n            Sally Poodle added 2 new photos of you\n          
\n          
\n            \n            \n          
\n        
\n      
\n    
\n  
\n\n  
Content
\n\n  
\n    
Label
\n    
An event can contain a label
\n    
In semantic's implementation a label is formatted to contain an icon or an image
\n    
\n      
\n        
\n          \n        
\n        
\n          
\n             Sally Poodle added you as a friend\n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          
\n            You submitted a new post to the page\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Date
\n    
An event can contain a date
\n    
\n      
\n        
\n          \n        
\n        
\n          
\n            3 days ago\n          
\n          
\n             Sally Poodle added you as a friend\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Additional information
\n    
An event can contain additional content explaining the event
\n    
\n      
\n        
\n          \n        
\n        
\n          
\n            3 days ago\n          
\n          
\n             Sally Poodle added 2 photos of you\n          
\n          
\n            \n            \n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          
\n            3 days ago\n          
\n          
\n             Sally Poodle created a post\n          
\n          
\n            I am a dog and I do not know how to make a post\n          
\n        
\n      
\n    
\n  
\n\n\n  
Variations
\n  
\n    
Sizes
\n    
A feed can have different sizes
\n\n    
\n      
\n        
\n          
My Activity
\n          
\n            
\n              \n            
\n            
\n              
\n                Just moments ago\n              
\n              
\n                 Sally Poodle added you as a friend\n              
\n            
\n          
\n          
\n            
\n              \n            
\n            
\n              
\n                3 days ago\n              
\n              
\n                You submitted a new post to the page\n              
\n              
\n                I am a dog and I do not know how to make a post\n              
\n            
\n          
\n          
\n            
\n              \n            
\n            
\n              
\n                3 days ago\n              
\n              
\n                Sally Poodle added 2 new photos of you\n              
\n              
\n                \n                \n              
\n            
\n          
\n        
\n      
\n      
\n        
\n          
Followers Activity
\n          
\n            
\n              
\n                 Sally Poodle added hotpup202 as a friend\n              
\n            
\n          
\n          
\n            
\n              
\n                 Dally Doodle added hotpup202 as a friend\n              
\n            
\n          
\n          
\n            
\n              
\n                 Sally Poodle added sixpack dog as a friend\n              
\n            
\n          
\n          
\n            
\n              
\n                 Dally Doodle added hotpup202 as a friend\n              
\n            
\n          
\n        
\n      
\n    
\n\n  
\n\n\n
",
      "tags": null,
      "render": true,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": "Feed",
      "name": "feed.html",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "views-feed",
      "url": "/views/feed.html",
      "urls": [
        "/views/feed.html"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": true,
      "header": "layout      : 'default'\ncss         : 'feed'\n\ntitle       : 'Feed'\ndescription : 'A feed presents user activity chronologically'\ntype        : 'UI View'",
      "parser": "yaml",
      "body": "<%- @partial('header') %>\n
\n\n  
\n    
\n      Types\n      Content\n      Variations\n    
\n  
\n\n  
Types
\n\n  
\n    
Feed
\n    
A standard feed with some optional elements
\n    
\n      
\n        Recent Activity\n      
\n      
\n        
\n          \n        
\n        
\n          
\n            Just moments ago\n          
\n          
\n             Sally Poodle added you as a friend\n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          
\n            3 days ago\n          
\n          
\n            You submitted a new post to the page\n          
\n          
\n            I am a dog and I do not know how to make a post\n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          
\n            3 days ago\n          
\n          
\n            Sally Poodle added 2 new photos of you\n          
\n          
\n            \n            \n          
\n        
\n      
\n    
\n  
\n\n  
Content
\n\n  
\n    
Label
\n    
An event can contain a label
\n    
In semantic's implementation a label is formatted to contain an icon or an image
\n    
\n      
\n        
\n          \n        
\n        
\n          
\n             Sally Poodle added you as a friend\n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          
\n            You submitted a new post to the page\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Date
\n    
An event can contain a date
\n    
\n      
\n        
\n          \n        
\n        
\n          
\n            3 days ago\n          
\n          
\n             Sally Poodle added you as a friend\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Additional information
\n    
An event can contain additional content explaining the event
\n    
\n      
\n        
\n          \n        
\n        
\n          
\n            3 days ago\n          
\n          
\n             Sally Poodle added 2 photos of you\n          
\n          
\n            \n            \n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          
\n            3 days ago\n          
\n          
\n             Sally Poodle created a post\n          
\n          
\n            I am a dog and I do not know how to make a post\n          
\n        
\n      
\n    
\n  
\n\n\n  
Variations
\n  
\n    
Sizes
\n    
A feed can have different sizes
\n\n    
\n      
\n        
\n          
My Activity
\n          
\n            
\n              \n            
\n            
\n              
\n                Just moments ago\n              
\n              
\n                 Sally Poodle added you as a friend\n              
\n            
\n          
\n          
\n            
\n              \n            
\n            
\n              
\n                3 days ago\n              
\n              
\n                You submitted a new post to the page\n              
\n              
\n                I am a dog and I do not know how to make a post\n              
\n            
\n          
\n          
\n            
\n              \n            
\n            
\n              
\n                3 days ago\n              
\n              
\n                Sally Poodle added 2 new photos of you\n              
\n              
\n                \n                \n              
\n            
\n          
\n        
\n      
\n      
\n        
\n          
Followers Activity
\n          
\n            
\n              
\n                 Sally Poodle added hotpup202 as a friend\n              
\n            
\n          
\n          
\n            
\n              
\n                 Dally Doodle added hotpup202 as a friend\n              
\n            
\n          
\n          
\n            
\n              
\n                 Sally Poodle added sixpack dog as a friend\n              
\n            
\n          
\n          
\n            
\n              
\n                 Dally Doodle added hotpup202 as a friend\n              
\n            
\n          
\n        
\n      
\n    
\n\n  
\n\n\n
",
      "rendered": true,
      "contentRendered": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  \n  \n  \n  \n\n  \n\n  \n  \n  Feed | Semantic UI\n\n  \n  \n\n  \n\n  \n  \n  \n\n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n\n  \n  \n\n\n  
\n    \n       Close Menu\n    \n    \n       Download\n    \n    
\n      \n        Introduction\n      \n      
\n        \n          Definitions\n        \n          Overview\n        \n          Types\n        \n          Variations\n        \n          What's Different\n        \n      
\n    
\n    
\n      Project\n      
\n        \n          Contributing\n        \n          Set-up\n        \n      
\n    
\n    
\n      Elements\n      
\n        \n          Button\n        \n          Divider\n        \n          Header\n        \n          Icon\n        \n          Image\n        \n          Input\n        \n          Label\n        \n          Loader\n        \n          Progress\n        \n          Reveal\n        \n          Segment\n        \n          Step\n        \n      
\n    
\n    
\n      Collections\n      
\n        \n          Breadcrumb\n        \n          Form\n        \n          Grid\n        \n          Menu\n        \n          Message\n        \n          Table\n        \n      
\n    
\n    
\n      Views\n      
\n        \n          Comment\n        \n          Feed\n        \n          Item\n        \n          List\n        \n      
\n    
\n    
\n      Modules\n      
\n        \n          Accordion\n        \n          Checkbox\n        \n          Dimmer\n        \n          Dropdown\n        \n          Modal\n        \n          Popup\n        \n          Rating\n        \n          Shape\n        \n          Sidebar\n        \n          Transition\n        \n      
\n    
\n    
\n      Behavior\n      
\n        \n          Form Validation\n        \n      
\n    
\n    
\n      Style Guide\n      
\n        \n          CSS\n        \n          Javascript\n        \n          Language\n        \n      
\n    
\n\n  
\n\n  
\n    
\n       Content\n      
\n        UI View: Feed\n      
\n      \n      \n      \n      
\n        2 of 4\n        
\n          \n            
\n              1. Comment\n            
\n          \n            
\n              2. Feed\n            
\n          \n            
\n              3. Item\n            
\n          \n            
\n              4. List\n            
\n          \n        
\n      
\n      \n      \n      \n      
\n        \n        
\n          \n        
\n        \n        \n\n        \n          \n        \n        \n          \n        \n        \n        \n          \n        \n        \n      
\n    
\n  
\n    
\n      \n      Menu\n    
\n  \n\n
\n  
\n    
\n\n      
\n        Feed\n        \n      
\n\n      
A feed presents user activity chronologically
\n      \n      
\n        Definition Mode\n        \n      
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n
\n\n  
\n    
\n      Types\n      Content\n      Variations\n    
\n  
\n\n  
Types
\n\n  
\n    
Feed
\n    
A standard feed with some optional elements
\n    
\n      
\n        Recent Activity\n      
\n      
\n        
\n          \n        
\n        
\n          
\n            Just moments ago\n          
\n          
\n             Sally Poodle added you as a friend\n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          
\n            3 days ago\n          
\n          
\n            You submitted a new post to the page\n          
\n          
\n            I am a dog and I do not know how to make a post\n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          
\n            3 days ago\n          
\n          
\n            Sally Poodle added 2 new photos of you\n          
\n          
\n            \n            \n          
\n        
\n      
\n    
\n  
\n\n  
Content
\n\n  
\n    
Label
\n    
An event can contain a label
\n    
In semantic's implementation a label is formatted to contain an icon or an image
\n    
\n      
\n        
\n          \n        
\n        
\n          
\n             Sally Poodle added you as a friend\n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          
\n            You submitted a new post to the page\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Date
\n    
An event can contain a date
\n    
\n      
\n        
\n          \n        
\n        
\n          
\n            3 days ago\n          
\n          
\n             Sally Poodle added you as a friend\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Additional information
\n    
An event can contain additional content explaining the event
\n    
\n      
\n        
\n          \n        
\n        
\n          
\n            3 days ago\n          
\n          
\n             Sally Poodle added 2 photos of you\n          
\n          
\n            \n            \n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          
\n            3 days ago\n          
\n          
\n             Sally Poodle created a post\n          
\n          
\n            I am a dog and I do not know how to make a post\n          
\n        
\n      
\n    
\n  
\n\n\n  
Variations
\n  
\n    
Sizes
\n    
A feed can have different sizes
\n\n    
\n      
\n        
\n          
My Activity
\n          
\n            
\n              \n            
\n            
\n              
\n                Just moments ago\n              
\n              
\n                 Sally Poodle added you as a friend\n              
\n            
\n          
\n          
\n            
\n              \n            
\n            
\n              
\n                3 days ago\n              
\n              
\n                You submitted a new post to the page\n              
\n              
\n                I am a dog and I do not know how to make a post\n              
\n            
\n          
\n          
\n            
\n              \n            
\n            
\n              
\n                3 days ago\n              
\n              
\n                Sally Poodle added 2 new photos of you\n              
\n              
\n                \n                \n              
\n            
\n          
\n        
\n      
\n      
\n        
\n          
Followers Activity
\n          
\n            
\n              
\n                 Sally Poodle added hotpup202 as a friend\n              
\n            
\n          
\n          
\n            
\n              
\n                 Dally Doodle added hotpup202 as a friend\n              
\n            
\n          
\n          
\n            
\n              
\n                 Sally Poodle added sixpack dog as a friend\n              
\n            
\n          
\n          
\n            
\n              
\n                 Dally Doodle added hotpup202 as a friend\n              
\n            
\n          
\n        
\n      
\n    
\n\n  
\n\n\n
\n\n\n",
      "contentRenderedWithoutLayouts": "\n\n
\n  
\n    
\n\n      
\n        Feed\n        \n      
\n\n      
A feed presents user activity chronologically
\n      \n      
\n        Definition Mode\n        \n      
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n
\n\n  
\n    
\n      Types\n      Content\n      Variations\n    
\n  
\n\n  
Types
\n\n  
\n    
Feed
\n    
A standard feed with some optional elements
\n    
\n      
\n        Recent Activity\n      
\n      
\n        
\n          \n        
\n        
\n          
\n            Just moments ago\n          
\n          
\n             Sally Poodle added you as a friend\n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          
\n            3 days ago\n          
\n          
\n            You submitted a new post to the page\n          
\n          
\n            I am a dog and I do not know how to make a post\n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          
\n            3 days ago\n          
\n          
\n            Sally Poodle added 2 new photos of you\n          
\n          
\n            \n            \n          
\n        
\n      
\n    
\n  
\n\n  
Content
\n\n  
\n    
Label
\n    
An event can contain a label
\n    
In semantic's implementation a label is formatted to contain an icon or an image
\n    
\n      
\n        
\n          \n        
\n        
\n          
\n             Sally Poodle added you as a friend\n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          
\n            You submitted a new post to the page\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Date
\n    
An event can contain a date
\n    
\n      
\n        
\n          \n        
\n        
\n          
\n            3 days ago\n          
\n          
\n             Sally Poodle added you as a friend\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Additional information
\n    
An event can contain additional content explaining the event
\n    
\n      
\n        
\n          \n        
\n        
\n          
\n            3 days ago\n          
\n          
\n             Sally Poodle added 2 photos of you\n          
\n          
\n            \n            \n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          
\n            3 days ago\n          
\n          
\n             Sally Poodle created a post\n          
\n          
\n            I am a dog and I do not know how to make a post\n          
\n        
\n      
\n    
\n  
\n\n\n  
Variations
\n  
\n    
Sizes
\n    
A feed can have different sizes
\n\n    
\n      
\n        
\n          
My Activity
\n          
\n            
\n              \n            
\n            
\n              
\n                Just moments ago\n              
\n              
\n                 Sally Poodle added you as a friend\n              
\n            
\n          
\n          
\n            
\n              \n            
\n            
\n              
\n                3 days ago\n              
\n              
\n                You submitted a new post to the page\n              
\n              
\n                I am a dog and I do not know how to make a post\n              
\n            
\n          
\n          
\n            
\n              \n            
\n            
\n              
\n                3 days ago\n              
\n              
\n                Sally Poodle added 2 new photos of you\n              
\n              
\n                \n                \n              
\n            
\n          
\n        
\n      
\n      
\n        
\n          
Followers Activity
\n          
\n            
\n              
\n                 Sally Poodle added hotpup202 as a friend\n              
\n            
\n          
\n          
\n            
\n              
\n                 Dally Doodle added hotpup202 as a friend\n              
\n            
\n          
\n          
\n            
\n              
\n                 Sally Poodle added sixpack dog as a friend\n              
\n            
\n          
\n          
\n            
\n              
\n                 Dally Doodle added hotpup202 as a friend\n              
\n            
\n          
\n        
\n      
\n    
\n\n  
\n\n\n
",
      "renderSingleExtensions": false,
      "layout": "default",
      "css": "feed",
      "description": "A feed presents user activity chronologically",
      "type": "UI View",
      "layoutRelativePath": "default.html.eco",
      "meta": {
        "layout": "default",
        "css": "feed",
        "title": "Feed",
        "description": "A feed presents user activity chronologically",
        "type": "UI View"
      }
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/documents/views/item.html.eco",
      "relativePath": "views/item.html.eco",
      "basename": "item",
      "outBasename": "item",
      "extension": "eco",
      "outExtension": "html",
      "extensions": [
        "html",
        "eco"
      ],
      "filename": "item.html.eco",
      "fullDirPath": "/home/jack/projects/semantic/server/documents/views",
      "outPath": "/home/jack/projects/semantic/docs/views/item.html",
      "outDirPath": "/home/jack/projects/semantic/docs/views",
      "outFilename": "item.html",
      "relativeOutPath": "views/item.html",
      "relativeDirPath": "views",
      "relativeOutDirPath": "views",
      "relativeBase": "views/item",
      "relativeOutBase": "views/item",
      "contentType": "application/octet-stream",
      "outContentType": "text/html",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": "2013-12-04T09:15:27.188Z",
      "wtime": "2013-12-04T09:15:28.764Z",
      "exists": true,
      "encoding": "utf8",
      "source": "---\nlayout      : 'default'\nstandalone  : true\ncss         : 'item'\n\ntitle       : 'Item'\ndescription : 'An item view presents related site content'\ntype        : 'UI View'\n---\n\n<%- @partial('header') %>\n
\n\n  
\n    
\n      Types\n      Variations\n    
\n  
\n\n  
Types
\n\n  
\n    
Items
\n    
A basic item list. 
\n    
\n      \n      Items must manually be given a width and height that match up to the content that it displays. Content must also be truncated so that each item will not exceed the maximum height.\n    
\n    
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Cute Dog
\n          
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n          
\n              199 votes\n          
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
5 days ago
\n          
Faithful Dog
\n          
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n          
\n              311 votes\n          
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Silly Dog
\n          
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
\n          
\n              522 votes\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
\n      
\n        
\n          
2 days ago
\n          
Cute Dog
\n          
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n        
\n        
\n            199 votes\n        
\n      
\n      
\n        
\n          
5 days ago
\n          
Faithful Dog
\n          
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n        
\n        
\n            311 votes\n        
\n      
\n      
\n        
\n          
1 week ago
\n          
Silly Dog
\n          
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
\n        
\n        
\n            522 votes\n        
\n      
\n    
\n  
\n\n\n  
Variations
\n\n  
\n    
Stackable
\n    
Resize your browser to a smaller size to see the items stack after reaching mobile breakpoints
\n    
An item view can have its items take the full width when below a browser resolution threshold to allow for content to display properly at small sizes
\n    
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Cute Dog
\n          
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n          
\n              199 votes\n          
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
5 days ago
\n          
Faithful Dog
\n          
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n          
\n              311 votes\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Connected
\n    
An item list can be automatically sized to be even height.
\n    
\n      \n      Connected item lists cannot display extra information. A connected row must also assume an arbitrary column width unless specified.\n    
\n    
\n      
\n        
\n          
\n            \n          
\n          
\n            
Cute Dog
\n            
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n          
\n        
\n        
\n          
\n            \n          
\n          
\n            
Faithful Dog
\n            
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n          
\n        
\n        
\n          
\n            \n          
\n          
\n            
Silly Dog
\n            
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
\n          
\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        
\n          
\n            
Cute Dog
\n            
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n          
\n        
\n        
\n          
\n            
Faithful Dog
\n            
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n          
\n        
\n        
\n          
\n            
Silly Dog
\n            
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
\n          
\n        
\n        
\n          
\n            
Cute Dog
\n            
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n          
\n        
\n        
\n          
\n            
Faithful Dog
\n            
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n          
\n        
\n        
\n          
\n            
Silly Dog
\n            
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
\n          
\n        
\n      
\n    
\n  
\n\n\n\n  
\n    
Column count
\n    
An item list can list how many columns should exist in a row
\n    
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Cute Dog
\n          
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Faithful Dog
\n          
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Silly Dog
\n          
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Happy Dog
\n          
Happy dogs are pretty interesting if you are an unhappy person.
\n        
\n      
\n    
\n  
\n  
\n    
A connected item list with a specified column count
\n    
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Cute Dog
\n          
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Faithful Dog
\n          
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Silly Dog
\n          
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Happy Dog
\n          
Happy dogs are pretty interesting if you are an unhappy person.
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Quiet Dog
\n          
A quiet dog is nice if you dont like a lot of upkeep for your dogs.
\n        
\n      
\n    
\n  
\n\n
\n",
      "content": "<%- @partial('header') %>\n
\n\n  
\n    
\n      Types\n      Variations\n    
\n  
\n\n  
Types
\n\n  
\n    
Items
\n    
A basic item list. 
\n    
\n      \n      Items must manually be given a width and height that match up to the content that it displays. Content must also be truncated so that each item will not exceed the maximum height.\n    
\n    
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Cute Dog
\n          
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n          
\n              199 votes\n          
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
5 days ago
\n          
Faithful Dog
\n          
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n          
\n              311 votes\n          
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Silly Dog
\n          
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
\n          
\n              522 votes\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
\n      
\n        
\n          
2 days ago
\n          
Cute Dog
\n          
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n        
\n        
\n            199 votes\n        
\n      
\n      
\n        
\n          
5 days ago
\n          
Faithful Dog
\n          
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n        
\n        
\n            311 votes\n        
\n      
\n      
\n        
\n          
1 week ago
\n          
Silly Dog
\n          
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
\n        
\n        
\n            522 votes\n        
\n      
\n    
\n  
\n\n\n  
Variations
\n\n  
\n    
Stackable
\n    
Resize your browser to a smaller size to see the items stack after reaching mobile breakpoints
\n    
An item view can have its items take the full width when below a browser resolution threshold to allow for content to display properly at small sizes
\n    
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Cute Dog
\n          
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n          
\n              199 votes\n          
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
5 days ago
\n          
Faithful Dog
\n          
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n          
\n              311 votes\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Connected
\n    
An item list can be automatically sized to be even height.
\n    
\n      \n      Connected item lists cannot display extra information. A connected row must also assume an arbitrary column width unless specified.\n    
\n    
\n      
\n        
\n          
\n            \n          
\n          
\n            
Cute Dog
\n            
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n          
\n        
\n        
\n          
\n            \n          
\n          
\n            
Faithful Dog
\n            
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n          
\n        
\n        
\n          
\n            \n          
\n          
\n            
Silly Dog
\n            
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
\n          
\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        
\n          
\n            
Cute Dog
\n            
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n          
\n        
\n        
\n          
\n            
Faithful Dog
\n            
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n          
\n        
\n        
\n          
\n            
Silly Dog
\n            
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
\n          
\n        
\n        
\n          
\n            
Cute Dog
\n            
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n          
\n        
\n        
\n          
\n            
Faithful Dog
\n            
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n          
\n        
\n        
\n          
\n            
Silly Dog
\n            
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
\n          
\n        
\n      
\n    
\n  
\n\n\n\n  
\n    
Column count
\n    
An item list can list how many columns should exist in a row
\n    
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Cute Dog
\n          
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Faithful Dog
\n          
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Silly Dog
\n          
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Happy Dog
\n          
Happy dogs are pretty interesting if you are an unhappy person.
\n        
\n      
\n    
\n  
\n  
\n    
A connected item list with a specified column count
\n    
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Cute Dog
\n          
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Faithful Dog
\n          
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Silly Dog
\n          
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Happy Dog
\n          
Happy dogs are pretty interesting if you are an unhappy person.
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Quiet Dog
\n          
A quiet dog is nice if you dont like a lot of upkeep for your dogs.
\n        
\n      
\n    
\n  
\n\n
",
      "tags": null,
      "render": true,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": "Item",
      "name": "item.html",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "views-item",
      "url": "/views/item.html",
      "urls": [
        "/views/item.html"
      ],
      "ignored": false,
      "standalone": true,
      "referencesOthers": true,
      "header": "layout      : 'default'\nstandalone  : true\ncss         : 'item'\n\ntitle       : 'Item'\ndescription : 'An item view presents related site content'\ntype        : 'UI View'",
      "parser": "yaml",
      "body": "<%- @partial('header') %>\n
\n\n  
\n    
\n      Types\n      Variations\n    
\n  
\n\n  
Types
\n\n  
\n    
Items
\n    
A basic item list. 
\n    
\n      \n      Items must manually be given a width and height that match up to the content that it displays. Content must also be truncated so that each item will not exceed the maximum height.\n    
\n    
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Cute Dog
\n          
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n          
\n              199 votes\n          
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
5 days ago
\n          
Faithful Dog
\n          
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n          
\n              311 votes\n          
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Silly Dog
\n          
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
\n          
\n              522 votes\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
\n      
\n        
\n          
2 days ago
\n          
Cute Dog
\n          
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n        
\n        
\n            199 votes\n        
\n      
\n      
\n        
\n          
5 days ago
\n          
Faithful Dog
\n          
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n        
\n        
\n            311 votes\n        
\n      
\n      
\n        
\n          
1 week ago
\n          
Silly Dog
\n          
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
\n        
\n        
\n            522 votes\n        
\n      
\n    
\n  
\n\n\n  
Variations
\n\n  
\n    
Stackable
\n    
Resize your browser to a smaller size to see the items stack after reaching mobile breakpoints
\n    
An item view can have its items take the full width when below a browser resolution threshold to allow for content to display properly at small sizes
\n    
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Cute Dog
\n          
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n          
\n              199 votes\n          
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
5 days ago
\n          
Faithful Dog
\n          
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n          
\n              311 votes\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Connected
\n    
An item list can be automatically sized to be even height.
\n    
\n      \n      Connected item lists cannot display extra information. A connected row must also assume an arbitrary column width unless specified.\n    
\n    
\n      
\n        
\n          
\n            \n          
\n          
\n            
Cute Dog
\n            
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n          
\n        
\n        
\n          
\n            \n          
\n          
\n            
Faithful Dog
\n            
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n          
\n        
\n        
\n          
\n            \n          
\n          
\n            
Silly Dog
\n            
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
\n          
\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        
\n          
\n            
Cute Dog
\n            
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n          
\n        
\n        
\n          
\n            
Faithful Dog
\n            
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n          
\n        
\n        
\n          
\n            
Silly Dog
\n            
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
\n          
\n        
\n        
\n          
\n            
Cute Dog
\n            
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n          
\n        
\n        
\n          
\n            
Faithful Dog
\n            
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n          
\n        
\n        
\n          
\n            
Silly Dog
\n            
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
\n          
\n        
\n      
\n    
\n  
\n\n\n\n  
\n    
Column count
\n    
An item list can list how many columns should exist in a row
\n    
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Cute Dog
\n          
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Faithful Dog
\n          
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Silly Dog
\n          
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Happy Dog
\n          
Happy dogs are pretty interesting if you are an unhappy person.
\n        
\n      
\n    
\n  
\n  
\n    
A connected item list with a specified column count
\n    
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Cute Dog
\n          
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Faithful Dog
\n          
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Silly Dog
\n          
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Happy Dog
\n          
Happy dogs are pretty interesting if you are an unhappy person.
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Quiet Dog
\n          
A quiet dog is nice if you dont like a lot of upkeep for your dogs.
\n        
\n      
\n    
\n  
\n\n
",
      "rendered": true,
      "contentRendered": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  \n  \n  \n  \n\n  \n\n  \n  \n  Item | Semantic UI\n\n  \n  \n\n  \n\n  \n  \n  \n\n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n\n  \n  \n\n\n  
\n    \n       Close Menu\n    \n    \n       Download\n    \n    
\n      \n        Introduction\n      \n      
\n        \n          Definitions\n        \n          Overview\n        \n          Types\n        \n          Variations\n        \n          What's Different\n        \n      
\n    
\n    
\n      Project\n      
\n        \n          Contributing\n        \n          Set-up\n        \n      
\n    
\n    
\n      Elements\n      
\n        \n          Button\n        \n          Divider\n        \n          Header\n        \n          Icon\n        \n          Image\n        \n          Input\n        \n          Label\n        \n          Loader\n        \n          Progress\n        \n          Reveal\n        \n          Segment\n        \n          Step\n        \n      
\n    
\n    
\n      Collections\n      
\n        \n          Breadcrumb\n        \n          Form\n        \n          Grid\n        \n          Menu\n        \n          Message\n        \n          Table\n        \n      
\n    
\n    
\n      Views\n      
\n        \n          Comment\n        \n          Feed\n        \n          Item\n        \n          List\n        \n      
\n    
\n    
\n      Modules\n      
\n        \n          Accordion\n        \n          Checkbox\n        \n          Dimmer\n        \n          Dropdown\n        \n          Modal\n        \n          Popup\n        \n          Rating\n        \n          Shape\n        \n          Sidebar\n        \n          Transition\n        \n      
\n    
\n    
\n      Behavior\n      
\n        \n          Form Validation\n        \n      
\n    
\n    
\n      Style Guide\n      
\n        \n          CSS\n        \n          Javascript\n        \n          Language\n        \n      
\n    
\n\n  
\n\n  
\n    
\n       Content\n      
\n        UI View: Item\n      
\n      \n      \n      \n      
\n        3 of 4\n        
\n          \n            
\n              1. Comment\n            
\n          \n            
\n              2. Feed\n            
\n          \n            
\n              3. Item\n            
\n          \n            
\n              4. List\n            
\n          \n        
\n      
\n      \n      \n      \n      
\n        \n        
\n          \n        
\n        \n        \n\n        \n          \n        \n        \n          \n        \n        \n        \n          \n        \n        \n      
\n    
\n  
\n    
\n      \n      Menu\n    
\n  \n\n
\n  
\n    
\n\n      
\n        Item\n        \n      
\n\n      
An item view presents related site content
\n      \n      
\n        Definition Mode\n        \n      
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n
\n\n  
\n    
\n      Types\n      Variations\n    
\n  
\n\n  
Types
\n\n  
\n    
Items
\n    
A basic item list. 
\n    
\n      \n      Items must manually be given a width and height that match up to the content that it displays. Content must also be truncated so that each item will not exceed the maximum height.\n    
\n    
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Cute Dog
\n          
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n          
\n              199 votes\n          
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
5 days ago
\n          
Faithful Dog
\n          
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n          
\n              311 votes\n          
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Silly Dog
\n          
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
\n          
\n              522 votes\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
\n      
\n        
\n          
2 days ago
\n          
Cute Dog
\n          
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n        
\n        
\n            199 votes\n        
\n      
\n      
\n        
\n          
5 days ago
\n          
Faithful Dog
\n          
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n        
\n        
\n            311 votes\n        
\n      
\n      
\n        
\n          
1 week ago
\n          
Silly Dog
\n          
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
\n        
\n        
\n            522 votes\n        
\n      
\n    
\n  
\n\n\n  
Variations
\n\n  
\n    
Stackable
\n    
Resize your browser to a smaller size to see the items stack after reaching mobile breakpoints
\n    
An item view can have its items take the full width when below a browser resolution threshold to allow for content to display properly at small sizes
\n    
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Cute Dog
\n          
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n          
\n              199 votes\n          
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
5 days ago
\n          
Faithful Dog
\n          
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n          
\n              311 votes\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Connected
\n    
An item list can be automatically sized to be even height.
\n    
\n      \n      Connected item lists cannot display extra information. A connected row must also assume an arbitrary column width unless specified.\n    
\n    
\n      
\n        
\n          
\n            \n          
\n          
\n            
Cute Dog
\n            
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n          
\n        
\n        
\n          
\n            \n          
\n          
\n            
Faithful Dog
\n            
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n          
\n        
\n        
\n          
\n            \n          
\n          
\n            
Silly Dog
\n            
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
\n          
\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        
\n          
\n            
Cute Dog
\n            
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n          
\n        
\n        
\n          
\n            
Faithful Dog
\n            
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n          
\n        
\n        
\n          
\n            
Silly Dog
\n            
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
\n          
\n        
\n        
\n          
\n            
Cute Dog
\n            
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n          
\n        
\n        
\n          
\n            
Faithful Dog
\n            
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n          
\n        
\n        
\n          
\n            
Silly Dog
\n            
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
\n          
\n        
\n      
\n    
\n  
\n\n\n\n  
\n    
Column count
\n    
An item list can list how many columns should exist in a row
\n    
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Cute Dog
\n          
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Faithful Dog
\n          
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Silly Dog
\n          
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Happy Dog
\n          
Happy dogs are pretty interesting if you are an unhappy person.
\n        
\n      
\n    
\n  
\n  
\n    
A connected item list with a specified column count
\n    
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Cute Dog
\n          
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Faithful Dog
\n          
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Silly Dog
\n          
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Happy Dog
\n          
Happy dogs are pretty interesting if you are an unhappy person.
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Quiet Dog
\n          
A quiet dog is nice if you dont like a lot of upkeep for your dogs.
\n        
\n      
\n    
\n  
\n\n
\n\n\n",
      "contentRenderedWithoutLayouts": "\n\n
\n  
\n    
\n\n      
\n        Item\n        \n      
\n\n      
An item view presents related site content
\n      \n      
\n        Definition Mode\n        \n      
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n
\n\n  
\n    
\n      Types\n      Variations\n    
\n  
\n\n  
Types
\n\n  
\n    
Items
\n    
A basic item list. 
\n    
\n      \n      Items must manually be given a width and height that match up to the content that it displays. Content must also be truncated so that each item will not exceed the maximum height.\n    
\n    
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Cute Dog
\n          
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n          
\n              199 votes\n          
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
5 days ago
\n          
Faithful Dog
\n          
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n          
\n              311 votes\n          
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Silly Dog
\n          
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
\n          
\n              522 votes\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
\n      
\n        
\n          
2 days ago
\n          
Cute Dog
\n          
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n        
\n        
\n            199 votes\n        
\n      
\n      
\n        
\n          
5 days ago
\n          
Faithful Dog
\n          
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n        
\n        
\n            311 votes\n        
\n      
\n      
\n        
\n          
1 week ago
\n          
Silly Dog
\n          
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
\n        
\n        
\n            522 votes\n        
\n      
\n    
\n  
\n\n\n  
Variations
\n\n  
\n    
Stackable
\n    
Resize your browser to a smaller size to see the items stack after reaching mobile breakpoints
\n    
An item view can have its items take the full width when below a browser resolution threshold to allow for content to display properly at small sizes
\n    
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Cute Dog
\n          
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n          
\n              199 votes\n          
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
5 days ago
\n          
Faithful Dog
\n          
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n          
\n              311 votes\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Connected
\n    
An item list can be automatically sized to be even height.
\n    
\n      \n      Connected item lists cannot display extra information. A connected row must also assume an arbitrary column width unless specified.\n    
\n    
\n      
\n        
\n          
\n            \n          
\n          
\n            
Cute Dog
\n            
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n          
\n        
\n        
\n          
\n            \n          
\n          
\n            
Faithful Dog
\n            
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n          
\n        
\n        
\n          
\n            \n          
\n          
\n            
Silly Dog
\n            
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
\n          
\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        
\n          
\n            
Cute Dog
\n            
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n          
\n        
\n        
\n          
\n            
Faithful Dog
\n            
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n          
\n        
\n        
\n          
\n            
Silly Dog
\n            
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
\n          
\n        
\n        
\n          
\n            
Cute Dog
\n            
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n          
\n        
\n        
\n          
\n            
Faithful Dog
\n            
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n          
\n        
\n        
\n          
\n            
Silly Dog
\n            
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
\n          
\n        
\n      
\n    
\n  
\n\n\n\n  
\n    
Column count
\n    
An item list can list how many columns should exist in a row
\n    
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Cute Dog
\n          
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Faithful Dog
\n          
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Silly Dog
\n          
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Happy Dog
\n          
Happy dogs are pretty interesting if you are an unhappy person.
\n        
\n      
\n    
\n  
\n  
\n    
A connected item list with a specified column count
\n    
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Cute Dog
\n          
This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Faithful Dog
\n          
Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Silly Dog
\n          
Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Happy Dog
\n          
Happy dogs are pretty interesting if you are an unhappy person.
\n        
\n      
\n      
\n        
\n          \n          \n            \n          \n        
\n        
\n          
Quiet Dog
\n          
A quiet dog is nice if you dont like a lot of upkeep for your dogs.
\n        
\n      
\n    
\n  
\n\n
",
      "renderSingleExtensions": false,
      "layout": "default",
      "css": "item",
      "description": "An item view presents related site content",
      "type": "UI View",
      "layoutRelativePath": "default.html.eco",
      "meta": {
        "layout": "default",
        "standalone": true,
        "css": "item",
        "title": "Item",
        "description": "An item view presents related site content",
        "type": "UI View"
      }
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/documents/views/list.html.eco",
      "relativePath": "views/list.html.eco",
      "basename": "list",
      "outBasename": "list",
      "extension": "eco",
      "outExtension": "html",
      "extensions": [
        "html",
        "eco"
      ],
      "filename": "list.html.eco",
      "fullDirPath": "/home/jack/projects/semantic/server/documents/views",
      "outPath": "/home/jack/projects/semantic/docs/views/list.html",
      "outDirPath": "/home/jack/projects/semantic/docs/views",
      "outFilename": "list.html",
      "relativeOutPath": "views/list.html",
      "relativeDirPath": "views",
      "relativeOutDirPath": "views",
      "relativeBase": "views/list",
      "relativeOutBase": "views/list",
      "contentType": "application/octet-stream",
      "outContentType": "text/html",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": "2013-12-04T09:15:27.227Z",
      "wtime": "2013-12-04T09:15:28.767Z",
      "exists": true,
      "encoding": "utf8",
      "source": "---\nlayout      : 'default'\ncss         : 'list'\ntitle       : 'List'\ndescription : 'A list is a group of related content items ordered consecutively'\ntype        : 'UI View'\n---\n\n\n<%- @partial('header') %>\n
\n\n  
\n    
\n      Types\n      Content\n      Variations\n    
\n  
\n\n  
Types
\n  
\n    
List
\n    
A standard list
\n    
\n      
\n        \n        
\n          
Schnoodle
\n          Your new dog\n        
\n        
\n          
\n            \n            
\n              Thanks for being my owner\n              
Im so glad you chose to bring me home from the shelter...
\n            
\n          
\n          
\n            \n            
\n              What a walk\n              
Man i am so tired that walk today really was too far...
\n            
\n          
\n          
\n            \n            
\n              Sorry about your old dog\n              
Is this your address? I'm getting dropped off from the SPCA...
\n            
\n          
\n        
\n      
\n      
\n        \n        
\n          
Ragamuffin
\n          Your old dog.\n        
\n        
\n          
\n            \n            
\n              Was on a walk today\n              
Here's a picture of me on the farm with a cow...
\n            
\n          
\n          
\n            \n            
\n              Ruff Ruff\n              
I know i usually message you in english but i wanted to see how your dog language was progressing...
\n            
\n          
\n          
\n            \n            
\n              Reaching Out\n              
Hey its your old dog, been a while since you sent me to the farm...
\n            
\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Bulleted
\n    
A list can mark items with a bullet
\n    
\n      
Cats
\n      
Horses
\n      
Dogs\n        
\n          
Labradoodles
\n          
Shiba Inu
\n          
Mastiff
\n        
\n      
\n    
\n  
\n  
\n    
For convenience, a simple bulleted list can also use ul tag.
\n    \n  
\n\n  
\n    
Ordered
\n    
A list can be ordered numerically
\n    
\n      
Getting Started
\n      
Introduction
\n      
Languages\n        
\n          
HTML
\n          
Javascript
\n          
CSS
\n        
\n      
\n    
\n  
\n  
\n    
For convenience, a simple ordered list can also use the ol tag
\n    
    \n      
  1. Cats
    2. \n      
  2. Horses
    3. \n      
  3. Dogs
    4. \n        
      \n          
    1. Labradoodles
      2. \n          
    2. Shiba Inu
      3. \n          
    3. Mastiff
      4. \n        
    \n      \n    
\n  
\n\n  
\n    
Link
\n    
A link list is specially formatted for page links
\n    
\n      Home\n      About\n      Jobs\n      Team\n    
\n  
\n\n  
Content
\n\n  
\n    
Icon
\n    
A list item can have an icon
\n    
\n      \n        \n        How do you know your dog likes you?\n      \n      \n        \n        When is it ok to send your dog to a farm?\n      \n      \n        \n        Can you get your dog back from a farm if you really want him back?\n      \n      \n        \n        Is trespassing on a farm a misdemeanor offence?\n      \n    
\n  
\n\n  
\n    
Content
\n    
A list can have groups of content that can be floated left or right
\n    
\n      
\n        
View Listing
\n        \n        
\n          
New York Dog Fair
\n        
\n      
\n      
\n        
View Listing
\n        \n        
\n          
Dog Appreciation Day
\n        
\n      
\n    
\n  
\n\n  
\n    
Link
\n    
A list can contain items that link
\n    
\n      What is a FAQ?\n      How does one go about reading answers to questions in a FAQ\n      How do you close a web browser?\n      What is the most popular FAQ question?\n    
\n  
\n\n  
\n    
Header
\n    
A list item can contain a header
\n    
\n      
\n        
New York City
\n        A lovely city\n      
\n      
\n        
Chicago
\n        Also quite a lovely city\n      
\n      
\n        
Los Angeles
\n        Sometimes can be a lovely city\n      
\n      
\n        
San Francisco
\n        What a lovely city\n      
\n    
\n  
\n\n  
\n    
Description
\n    
A list item can contain a description
\n    
\n      
\n        \n        
\n          New York City\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Chicago\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Los Angeles\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          San Francisco\n          
A lovely city
\n        
\n      
\n    
\n  
\n\n  
Variations
\n\n\n  
\n    
Horizontal List
\n    
A list can be formatted horizontally
\n    
\n      
\n        \n        
\n          
Snickerdoodle
\n          An excellent companion\n        
\n      
\n      
\n        \n        
\n          
Poodle
\n          A poodle, its pretty basic\n        
\n      
\n      
\n        \n        
\n          
Paulo
\n          He's also a dog\n        
\n      
\n    
\n  
\n\n  
\n    
\n      
New York City
\n      
Chicago
\n      
Los Angeles
\n      
San Francisco
\n    
\n  
\n  
\n    
\n      
\n        Apples\n      
\n      
\n        Pears\n      
\n      
\n        Oranges\n      
\n      
\n        Soursop\n      
\n    
\n  
\n\n  
\n    
Inverted
\n    
A list can be inverted to appear on a dark background
\n    
\n      
\n        
\n          
\n            
Snickerdoodle
\n            An excellent companion\n          
\n        
\n        
\n          
\n            
Poodle
\n            A poodle, its pretty basic\n          
\n        
\n        
\n          
\n            
Paulo
\n            He's also a dog\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Selection
\n    
A selection list formats list items as possible choices
\n    
\n      
\n        \n        
\n          
Snickerdoodle
\n          An excellent companion\n        
\n      
\n      
\n        \n        
\n          
Poodle
\n          A poodle, its pretty basic\n        
\n      
\n      
\n        \n        
\n          
Paulo
\n          He's also a dog\n        
\n      
\n    
\n  
\n  
\n    
Animated
\n    
A list can animate to set the current item apart from the list
\n    
\n      
\n        \n        
\n          
Snickerdoodle
\n          An excellent companion\n        
\n      
\n      
\n        \n        
\n          
Poodle
\n          A poodle, its pretty basic\n        
\n      
\n      
\n        \n        
\n          
Paulo
\n          He's also a dog\n        
\n      
\n    
\n  
\n\n  
\n    
Relaxed
\n    
A list can relax its padding to provide more negative space
\n    
\n      
\n        \n        
\n          New York City\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Chicago\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Los Angeles\n          
A lovely city
\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        \n        
\n          New York City\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Chicago\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Los Angeles\n          
A lovely city
\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        \n        
\n          New York City\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Chicago\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Los Angeles\n          
A lovely city
\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        \n        
\n          New York City\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Chicago\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Los Angeles\n          
A lovely city
\n        
\n      
\n    
\n  
\n\n  
\n    
Divided
\n    
A list can show divisions between content
\n    
\n      
\n        \n        
\n          
Snickerdoodle
\n          An excellent companion\n        
\n      
\n      
\n        \n        
\n          
Poodle
\n          A poodle, its pretty basic\n        
\n      
\n      
\n        \n        
\n          
Paulo
\n          He's also a dog\n        
\n      
\n    
\n  
\n  
\n    
\n      
About Us
\n      
Contact
\n      
Support
\n    
\n  
\n\n  
\n    
Celled
\n    
A list can divide its items into cells
\n    
\n      
\n        \n        
\n          
Snickerdoodle
\n          An excellent companion\n        
\n      
\n      
\n        \n        
\n          
Poodle
\n          A poodle, its pretty basic\n        
\n      
\n      
\n        \n        
\n          
Paulo
\n          He's also a dog\n        
\n      
\n    
\n  
\n  
\n    
\n      
About Us
\n      
Contact
\n      
Support
\n    
\n  
\n\n  
\n    
Sizes
\n    
A list can vary in size
\n\n    
\n      
\n        \n        
\n          Thanks for being my owner\n          
Im so glad you chose to bring me home from the shelter...
\n        
\n      
\n      
\n        \n        
\n          What a walk\n          
Man i am so tired that walk today really was too far...
\n        
\n      
\n      
\n        \n        
\n          Sorry about your old dog\n          
Is this your address? I'm getting dropped off from the SPCA...
\n        
\n      
\n    
\n    
\n      
\n        \n        
\n          Thanks for being my owner\n          
Im so glad you chose to bring me home from the shelter...
\n        
\n      
\n      
\n        \n        
\n          What a walk\n          
Man i am so tired that walk today really was too far...
\n        
\n      
\n      
\n        \n        
\n          Sorry about your old dog\n          
Is this your address? I'm getting dropped off from the SPCA...
\n        
\n      
\n    
\n    
\n      
\n        \n        
\n          Thanks for being my owner\n          
Im so glad you chose to bring me home from the shelter...
\n        
\n      
\n      
\n        \n        
\n          What a walk\n          
Man i am so tired that walk today really was too far...
\n        
\n      
\n      
\n        \n        
\n          Sorry about your old dog\n          
Is this your address? I'm getting dropped off from the SPCA...
\n        
\n      
\n    
\n    
\n      
\n        \n        
\n          Thanks for being my owner\n          
Im so glad you chose to bring me home from the shelter...
\n        
\n      
\n      
\n        \n        
\n          What a walk\n          
Man i am so tired that walk today really was too far...
\n        
\n      
\n      
\n        \n        
\n          Sorry about your old dog\n          
Is this your address? I'm getting dropped off from the SPCA...
\n        
\n      
\n    
\n    
\n      
\n        \n        
\n          Thanks for being my owner\n          
Im so glad you chose to bring me home from the shelter...
\n        
\n      
\n      
\n        \n        
\n          What a walk\n          
Man i am so tired that walk today really was too far...
\n        
\n      
\n      
\n        \n        
\n          Sorry about your old dog\n          
Is this your address? I'm getting dropped off from the SPCA...
\n        
\n      
\n    
\n    
\n      
\n        \n        
\n          Thanks for being my owner\n          
Im so glad you chose to bring me home from the shelter...
\n        
\n      
\n      
\n        \n        
\n          What a walk\n          
Man i am so tired that walk today really was too far...
\n        
\n      
\n      
\n        \n        
\n          Sorry about your old dog\n          
Is this your address? I'm getting dropped off from the SPCA...
\n        
\n      
\n    
\n    
\n      
\n        \n        
\n          Thanks for being my owner\n          
Im so glad you chose to bring me home from the shelter...
\n        
\n      
\n      
\n        \n        
\n          What a walk\n          
Man i am so tired that walk today really was too far...
\n        
\n      
\n      
\n        \n        
\n          Sorry about your old dog\n          
Is this your address? I'm getting dropped off from the SPCA...
\n        
\n      
\n    
\n  
\n\n\n\n
",
      "content": "<%- @partial('header') %>\n
\n\n  
\n    
\n      Types\n      Content\n      Variations\n    
\n  
\n\n  
Types
\n  
\n    
List
\n    
A standard list
\n    
\n      
\n        \n        
\n          
Schnoodle
\n          Your new dog\n        
\n        
\n          
\n            \n            
\n              Thanks for being my owner\n              
Im so glad you chose to bring me home from the shelter...
\n            
\n          
\n          
\n            \n            
\n              What a walk\n              
Man i am so tired that walk today really was too far...
\n            
\n          
\n          
\n            \n            
\n              Sorry about your old dog\n              
Is this your address? I'm getting dropped off from the SPCA...
\n            
\n          
\n        
\n      
\n      
\n        \n        
\n          
Ragamuffin
\n          Your old dog.\n        
\n        
\n          
\n            \n            
\n              Was on a walk today\n              
Here's a picture of me on the farm with a cow...
\n            
\n          
\n          
\n            \n            
\n              Ruff Ruff\n              
I know i usually message you in english but i wanted to see how your dog language was progressing...
\n            
\n          
\n          
\n            \n            
\n              Reaching Out\n              
Hey its your old dog, been a while since you sent me to the farm...
\n            
\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Bulleted
\n    
A list can mark items with a bullet
\n    
\n      
Cats
\n      
Horses
\n      
Dogs\n        
\n          
Labradoodles
\n          
Shiba Inu
\n          
Mastiff
\n        
\n      
\n    
\n  
\n  
\n    
For convenience, a simple bulleted list can also use ul tag.
\n    \n  
\n\n  
\n    
Ordered
\n    
A list can be ordered numerically
\n    
\n      
Getting Started
\n      
Introduction
\n      
Languages\n        
\n          
HTML
\n          
Javascript
\n          
CSS
\n        
\n      
\n    
\n  
\n  
\n    
For convenience, a simple ordered list can also use the ol tag
\n    
    \n      
  1. Cats
    2. \n      
  2. Horses
    3. \n      
  3. Dogs
    4. \n        
      \n          
    1. Labradoodles
      2. \n          
    2. Shiba Inu
      3. \n          
    3. Mastiff
      4. \n        
    \n      \n    
\n  
\n\n  
\n    
Link
\n    
A link list is specially formatted for page links
\n    
\n      Home\n      About\n      Jobs\n      Team\n    
\n  
\n\n  
Content
\n\n  
\n    
Icon
\n    
A list item can have an icon
\n    
\n      \n        \n        How do you know your dog likes you?\n      \n      \n        \n        When is it ok to send your dog to a farm?\n      \n      \n        \n        Can you get your dog back from a farm if you really want him back?\n      \n      \n        \n        Is trespassing on a farm a misdemeanor offence?\n      \n    
\n  
\n\n  
\n    
Content
\n    
A list can have groups of content that can be floated left or right
\n    
\n      
\n        
View Listing
\n        \n        
\n          
New York Dog Fair
\n        
\n      
\n      
\n        
View Listing
\n        \n        
\n          
Dog Appreciation Day
\n        
\n      
\n    
\n  
\n\n  
\n    
Link
\n    
A list can contain items that link
\n    
\n      What is a FAQ?\n      How does one go about reading answers to questions in a FAQ\n      How do you close a web browser?\n      What is the most popular FAQ question?\n    
\n  
\n\n  
\n    
Header
\n    
A list item can contain a header
\n    
\n      
\n        
New York City
\n        A lovely city\n      
\n      
\n        
Chicago
\n        Also quite a lovely city\n      
\n      
\n        
Los Angeles
\n        Sometimes can be a lovely city\n      
\n      
\n        
San Francisco
\n        What a lovely city\n      
\n    
\n  
\n\n  
\n    
Description
\n    
A list item can contain a description
\n    
\n      
\n        \n        
\n          New York City\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Chicago\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Los Angeles\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          San Francisco\n          
A lovely city
\n        
\n      
\n    
\n  
\n\n  
Variations
\n\n\n  
\n    
Horizontal List
\n    
A list can be formatted horizontally
\n    
\n      
\n        \n        
\n          
Snickerdoodle
\n          An excellent companion\n        
\n      
\n      
\n        \n        
\n          
Poodle
\n          A poodle, its pretty basic\n        
\n      
\n      
\n        \n        
\n          
Paulo
\n          He's also a dog\n        
\n      
\n    
\n  
\n\n  
\n    
\n      
New York City
\n      
Chicago
\n      
Los Angeles
\n      
San Francisco
\n    
\n  
\n  
\n    
\n      
\n        Apples\n      
\n      
\n        Pears\n      
\n      
\n        Oranges\n      
\n      
\n        Soursop\n      
\n    
\n  
\n\n  
\n    
Inverted
\n    
A list can be inverted to appear on a dark background
\n    
\n      
\n        
\n          
\n            
Snickerdoodle
\n            An excellent companion\n          
\n        
\n        
\n          
\n            
Poodle
\n            A poodle, its pretty basic\n          
\n        
\n        
\n          
\n            
Paulo
\n            He's also a dog\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Selection
\n    
A selection list formats list items as possible choices
\n    
\n      
\n        \n        
\n          
Snickerdoodle
\n          An excellent companion\n        
\n      
\n      
\n        \n        
\n          
Poodle
\n          A poodle, its pretty basic\n        
\n      
\n      
\n        \n        
\n          
Paulo
\n          He's also a dog\n        
\n      
\n    
\n  
\n  
\n    
Animated
\n    
A list can animate to set the current item apart from the list
\n    
\n      
\n        \n        
\n          
Snickerdoodle
\n          An excellent companion\n        
\n      
\n      
\n        \n        
\n          
Poodle
\n          A poodle, its pretty basic\n        
\n      
\n      
\n        \n        
\n          
Paulo
\n          He's also a dog\n        
\n      
\n    
\n  
\n\n  
\n    
Relaxed
\n    
A list can relax its padding to provide more negative space
\n    
\n      
\n        \n        
\n          New York City\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Chicago\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Los Angeles\n          
A lovely city
\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        \n        
\n          New York City\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Chicago\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Los Angeles\n          
A lovely city
\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        \n        
\n          New York City\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Chicago\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Los Angeles\n          
A lovely city
\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        \n        
\n          New York City\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Chicago\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Los Angeles\n          
A lovely city
\n        
\n      
\n    
\n  
\n\n  
\n    
Divided
\n    
A list can show divisions between content
\n    
\n      
\n        \n        
\n          
Snickerdoodle
\n          An excellent companion\n        
\n      
\n      
\n        \n        
\n          
Poodle
\n          A poodle, its pretty basic\n        
\n      
\n      
\n        \n        
\n          
Paulo
\n          He's also a dog\n        
\n      
\n    
\n  
\n  
\n    
\n      
About Us
\n      
Contact
\n      
Support
\n    
\n  
\n\n  
\n    
Celled
\n    
A list can divide its items into cells
\n    
\n      
\n        \n        
\n          
Snickerdoodle
\n          An excellent companion\n        
\n      
\n      
\n        \n        
\n          
Poodle
\n          A poodle, its pretty basic\n        
\n      
\n      
\n        \n        
\n          
Paulo
\n          He's also a dog\n        
\n      
\n    
\n  
\n  
\n    
\n      
About Us
\n      
Contact
\n      
Support
\n    
\n  
\n\n  
\n    
Sizes
\n    
A list can vary in size
\n\n    
\n      
\n        \n        
\n          Thanks for being my owner\n          
Im so glad you chose to bring me home from the shelter...
\n        
\n      
\n      
\n        \n        
\n          What a walk\n          
Man i am so tired that walk today really was too far...
\n        
\n      
\n      
\n        \n        
\n          Sorry about your old dog\n          
Is this your address? I'm getting dropped off from the SPCA...
\n        
\n      
\n    
\n    
\n      
\n        \n        
\n          Thanks for being my owner\n          
Im so glad you chose to bring me home from the shelter...
\n        
\n      
\n      
\n        \n        
\n          What a walk\n          
Man i am so tired that walk today really was too far...
\n        
\n      
\n      
\n        \n        
\n          Sorry about your old dog\n          
Is this your address? I'm getting dropped off from the SPCA...
\n        
\n      
\n    
\n    
\n      
\n        \n        
\n          Thanks for being my owner\n          
Im so glad you chose to bring me home from the shelter...
\n        
\n      
\n      
\n        \n        
\n          What a walk\n          
Man i am so tired that walk today really was too far...
\n        
\n      
\n      
\n        \n        
\n          Sorry about your old dog\n          
Is this your address? I'm getting dropped off from the SPCA...
\n        
\n      
\n    
\n    
\n      
\n        \n        
\n          Thanks for being my owner\n          
Im so glad you chose to bring me home from the shelter...
\n        
\n      
\n      
\n        \n        
\n          What a walk\n          
Man i am so tired that walk today really was too far...
\n        
\n      
\n      
\n        \n        
\n          Sorry about your old dog\n          
Is this your address? I'm getting dropped off from the SPCA...
\n        
\n      
\n    
\n    
\n      
\n        \n        
\n          Thanks for being my owner\n          
Im so glad you chose to bring me home from the shelter...
\n        
\n      
\n      
\n        \n        
\n          What a walk\n          
Man i am so tired that walk today really was too far...
\n        
\n      
\n      
\n        \n        
\n          Sorry about your old dog\n          
Is this your address? I'm getting dropped off from the SPCA...
\n        
\n      
\n    
\n    
\n      
\n        \n        
\n          Thanks for being my owner\n          
Im so glad you chose to bring me home from the shelter...
\n        
\n      
\n      
\n        \n        
\n          What a walk\n          
Man i am so tired that walk today really was too far...
\n        
\n      
\n      
\n        \n        
\n          Sorry about your old dog\n          
Is this your address? I'm getting dropped off from the SPCA...
\n        
\n      
\n    
\n    
\n      
\n        \n        
\n          Thanks for being my owner\n          
Im so glad you chose to bring me home from the shelter...
\n        
\n      
\n      
\n        \n        
\n          What a walk\n          
Man i am so tired that walk today really was too far...
\n        
\n      
\n      
\n        \n        
\n          Sorry about your old dog\n          
Is this your address? I'm getting dropped off from the SPCA...
\n        
\n      
\n    
\n  
\n\n\n\n
",
      "tags": null,
      "render": true,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": "List",
      "name": "list.html",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "views-list",
      "url": "/views/list.html",
      "urls": [
        "/views/list.html"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": true,
      "header": "layout      : 'default'\ncss         : 'list'\ntitle       : 'List'\ndescription : 'A list is a group of related content items ordered consecutively'\ntype        : 'UI View'",
      "parser": "yaml",
      "body": "<%- @partial('header') %>\n
\n\n  
\n    
\n      Types\n      Content\n      Variations\n    
\n  
\n\n  
Types
\n  
\n    
List
\n    
A standard list
\n    
\n      
\n        \n        
\n          
Schnoodle
\n          Your new dog\n        
\n        
\n          
\n            \n            
\n              Thanks for being my owner\n              
Im so glad you chose to bring me home from the shelter...
\n            
\n          
\n          
\n            \n            
\n              What a walk\n              
Man i am so tired that walk today really was too far...
\n            
\n          
\n          
\n            \n            
\n              Sorry about your old dog\n              
Is this your address? I'm getting dropped off from the SPCA...
\n            
\n          
\n        
\n      
\n      
\n        \n        
\n          
Ragamuffin
\n          Your old dog.\n        
\n        
\n          
\n            \n            
\n              Was on a walk today\n              
Here's a picture of me on the farm with a cow...
\n            
\n          
\n          
\n            \n            
\n              Ruff Ruff\n              
I know i usually message you in english but i wanted to see how your dog language was progressing...
\n            
\n          
\n          
\n            \n            
\n              Reaching Out\n              
Hey its your old dog, been a while since you sent me to the farm...
\n            
\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Bulleted
\n    
A list can mark items with a bullet
\n    
\n      
Cats
\n      
Horses
\n      
Dogs\n        
\n          
Labradoodles
\n          
Shiba Inu
\n          
Mastiff
\n        
\n      
\n    
\n  
\n  
\n    
For convenience, a simple bulleted list can also use ul tag.
\n    \n  
\n\n  
\n    
Ordered
\n    
A list can be ordered numerically
\n    
\n      
Getting Started
\n      
Introduction
\n      
Languages\n        
\n          
HTML
\n          
Javascript
\n          
CSS
\n        
\n      
\n    
\n  
\n  
\n    
For convenience, a simple ordered list can also use the ol tag
\n    
    \n      
  1. Cats
    2. \n      
  2. Horses
    3. \n      
  3. Dogs
    4. \n        
      \n          
    1. Labradoodles
      2. \n          
    2. Shiba Inu
      3. \n          
    3. Mastiff
      4. \n        
    \n      \n    
\n  
\n\n  
\n    
Link
\n    
A link list is specially formatted for page links
\n    
\n      Home\n      About\n      Jobs\n      Team\n    
\n  
\n\n  
Content
\n\n  
\n    
Icon
\n    
A list item can have an icon
\n    
\n      \n        \n        How do you know your dog likes you?\n      \n      \n        \n        When is it ok to send your dog to a farm?\n      \n      \n        \n        Can you get your dog back from a farm if you really want him back?\n      \n      \n        \n        Is trespassing on a farm a misdemeanor offence?\n      \n    
\n  
\n\n  
\n    
Content
\n    
A list can have groups of content that can be floated left or right
\n    
\n      
\n        
View Listing
\n        \n        
\n          
New York Dog Fair
\n        
\n      
\n      
\n        
View Listing
\n        \n        
\n          
Dog Appreciation Day
\n        
\n      
\n    
\n  
\n\n  
\n    
Link
\n    
A list can contain items that link
\n    
\n      What is a FAQ?\n      How does one go about reading answers to questions in a FAQ\n      How do you close a web browser?\n      What is the most popular FAQ question?\n    
\n  
\n\n  
\n    
Header
\n    
A list item can contain a header
\n    
\n      
\n        
New York City
\n        A lovely city\n      
\n      
\n        
Chicago
\n        Also quite a lovely city\n      
\n      
\n        
Los Angeles
\n        Sometimes can be a lovely city\n      
\n      
\n        
San Francisco
\n        What a lovely city\n      
\n    
\n  
\n\n  
\n    
Description
\n    
A list item can contain a description
\n    
\n      
\n        \n        
\n          New York City\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Chicago\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Los Angeles\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          San Francisco\n          
A lovely city
\n        
\n      
\n    
\n  
\n\n  
Variations
\n\n\n  
\n    
Horizontal List
\n    
A list can be formatted horizontally
\n    
\n      
\n        \n        
\n          
Snickerdoodle
\n          An excellent companion\n        
\n      
\n      
\n        \n        
\n          
Poodle
\n          A poodle, its pretty basic\n        
\n      
\n      
\n        \n        
\n          
Paulo
\n          He's also a dog\n        
\n      
\n    
\n  
\n\n  
\n    
\n      
New York City
\n      
Chicago
\n      
Los Angeles
\n      
San Francisco
\n    
\n  
\n  
\n    
\n      
\n        Apples\n      
\n      
\n        Pears\n      
\n      
\n        Oranges\n      
\n      
\n        Soursop\n      
\n    
\n  
\n\n  
\n    
Inverted
\n    
A list can be inverted to appear on a dark background
\n    
\n      
\n        
\n          
\n            
Snickerdoodle
\n            An excellent companion\n          
\n        
\n        
\n          
\n            
Poodle
\n            A poodle, its pretty basic\n          
\n        
\n        
\n          
\n            
Paulo
\n            He's also a dog\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Selection
\n    
A selection list formats list items as possible choices
\n    
\n      
\n        \n        
\n          
Snickerdoodle
\n          An excellent companion\n        
\n      
\n      
\n        \n        
\n          
Poodle
\n          A poodle, its pretty basic\n        
\n      
\n      
\n        \n        
\n          
Paulo
\n          He's also a dog\n        
\n      
\n    
\n  
\n  
\n    
Animated
\n    
A list can animate to set the current item apart from the list
\n    
\n      
\n        \n        
\n          
Snickerdoodle
\n          An excellent companion\n        
\n      
\n      
\n        \n        
\n          
Poodle
\n          A poodle, its pretty basic\n        
\n      
\n      
\n        \n        
\n          
Paulo
\n          He's also a dog\n        
\n      
\n    
\n  
\n\n  
\n    
Relaxed
\n    
A list can relax its padding to provide more negative space
\n    
\n      
\n        \n        
\n          New York City\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Chicago\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Los Angeles\n          
A lovely city
\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        \n        
\n          New York City\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Chicago\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Los Angeles\n          
A lovely city
\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        \n        
\n          New York City\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Chicago\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Los Angeles\n          
A lovely city
\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        \n        
\n          New York City\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Chicago\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Los Angeles\n          
A lovely city
\n        
\n      
\n    
\n  
\n\n  
\n    
Divided
\n    
A list can show divisions between content
\n    
\n      
\n        \n        
\n          
Snickerdoodle
\n          An excellent companion\n        
\n      
\n      
\n        \n        
\n          
Poodle
\n          A poodle, its pretty basic\n        
\n      
\n      
\n        \n        
\n          
Paulo
\n          He's also a dog\n        
\n      
\n    
\n  
\n  
\n    
\n      
About Us
\n      
Contact
\n      
Support
\n    
\n  
\n\n  
\n    
Celled
\n    
A list can divide its items into cells
\n    
\n      
\n        \n        
\n          
Snickerdoodle
\n          An excellent companion\n        
\n      
\n      
\n        \n        
\n          
Poodle
\n          A poodle, its pretty basic\n        
\n      
\n      
\n        \n        
\n          
Paulo
\n          He's also a dog\n        
\n      
\n    
\n  
\n  
\n    
\n      
About Us
\n      
Contact
\n      
Support
\n    
\n  
\n\n  
\n    
Sizes
\n    
A list can vary in size
\n\n    
\n      
\n        \n        
\n          Thanks for being my owner\n          
Im so glad you chose to bring me home from the shelter...
\n        
\n      
\n      
\n        \n        
\n          What a walk\n          
Man i am so tired that walk today really was too far...
\n        
\n      
\n      
\n        \n        
\n          Sorry about your old dog\n          
Is this your address? I'm getting dropped off from the SPCA...
\n        
\n      
\n    
\n    
\n      
\n        \n        
\n          Thanks for being my owner\n          
Im so glad you chose to bring me home from the shelter...
\n        
\n      
\n      
\n        \n        
\n          What a walk\n          
Man i am so tired that walk today really was too far...
\n        
\n      
\n      
\n        \n        
\n          Sorry about your old dog\n          
Is this your address? I'm getting dropped off from the SPCA...
\n        
\n      
\n    
\n    
\n      
\n        \n        
\n          Thanks for being my owner\n          
Im so glad you chose to bring me home from the shelter...
\n        
\n      
\n      
\n        \n        
\n          What a walk\n          
Man i am so tired that walk today really was too far...
\n        
\n      
\n      
\n        \n        
\n          Sorry about your old dog\n          
Is this your address? I'm getting dropped off from the SPCA...
\n        
\n      
\n    
\n    
\n      
\n        \n        
\n          Thanks for being my owner\n          
Im so glad you chose to bring me home from the shelter...
\n        
\n      
\n      
\n        \n        
\n          What a walk\n          
Man i am so tired that walk today really was too far...
\n        
\n      
\n      
\n        \n        
\n          Sorry about your old dog\n          
Is this your address? I'm getting dropped off from the SPCA...
\n        
\n      
\n    
\n    
\n      
\n        \n        
\n          Thanks for being my owner\n          
Im so glad you chose to bring me home from the shelter...
\n        
\n      
\n      
\n        \n        
\n          What a walk\n          
Man i am so tired that walk today really was too far...
\n        
\n      
\n      
\n        \n        
\n          Sorry about your old dog\n          
Is this your address? I'm getting dropped off from the SPCA...
\n        
\n      
\n    
\n    
\n      
\n        \n        
\n          Thanks for being my owner\n          
Im so glad you chose to bring me home from the shelter...
\n        
\n      
\n      
\n        \n        
\n          What a walk\n          
Man i am so tired that walk today really was too far...
\n        
\n      
\n      
\n        \n        
\n          Sorry about your old dog\n          
Is this your address? I'm getting dropped off from the SPCA...
\n        
\n      
\n    
\n    
\n      
\n        \n        
\n          Thanks for being my owner\n          
Im so glad you chose to bring me home from the shelter...
\n        
\n      
\n      
\n        \n        
\n          What a walk\n          
Man i am so tired that walk today really was too far...
\n        
\n      
\n      
\n        \n        
\n          Sorry about your old dog\n          
Is this your address? I'm getting dropped off from the SPCA...
\n        
\n      
\n    
\n  
\n\n\n\n
",
      "rendered": true,
      "contentRendered": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  \n  \n  \n  \n\n  \n\n  \n  \n  List | Semantic UI\n\n  \n  \n\n  \n\n  \n  \n  \n\n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n\n  \n  \n\n\n  
\n    \n       Close Menu\n    \n    \n       Download\n    \n    
\n      \n        Introduction\n      \n      
\n        \n          Definitions\n        \n          Overview\n        \n          Types\n        \n          Variations\n        \n          What's Different\n        \n      
\n    
\n    
\n      Project\n      
\n        \n          Contributing\n        \n          Set-up\n        \n      
\n    
\n    
\n      Elements\n      
\n        \n          Button\n        \n          Divider\n        \n          Header\n        \n          Icon\n        \n          Image\n        \n          Input\n        \n          Label\n        \n          Loader\n        \n          Progress\n        \n          Reveal\n        \n          Segment\n        \n          Step\n        \n      
\n    
\n    
\n      Collections\n      
\n        \n          Breadcrumb\n        \n          Form\n        \n          Grid\n        \n          Menu\n        \n          Message\n        \n          Table\n        \n      
\n    
\n    
\n      Views\n      
\n        \n          Comment\n        \n          Feed\n        \n          Item\n        \n          List\n        \n      
\n    
\n    
\n      Modules\n      
\n        \n          Accordion\n        \n          Checkbox\n        \n          Dimmer\n        \n          Dropdown\n        \n          Modal\n        \n          Popup\n        \n          Rating\n        \n          Shape\n        \n          Sidebar\n        \n          Transition\n        \n      
\n    
\n    
\n      Behavior\n      
\n        \n          Form Validation\n        \n      
\n    
\n    
\n      Style Guide\n      
\n        \n          CSS\n        \n          Javascript\n        \n          Language\n        \n      
\n    
\n\n  
\n\n  
\n    
\n       Content\n      
\n        UI View: List\n      
\n      \n      \n      \n      
\n        4 of 4\n        
\n          \n            
\n              1. Comment\n            
\n          \n            
\n              2. Feed\n            
\n          \n            
\n              3. Item\n            
\n          \n            
\n              4. List\n            
\n          \n        
\n      
\n      \n      
\n      \n      
\n        \n        
\n          \n        
\n        \n        \n\n        \n          \n        \n        \n          \n        \n        \n        \n          \n        \n        \n      
\n    
\n  
\n    
\n      \n      Menu\n    
\n  \n\n
\n  
\n    
\n\n      
\n        List\n        \n      
\n\n      
A list is a group of related content items ordered consecutively
\n      \n      
\n        Definition Mode\n        \n      
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n
\n\n  
\n    
\n      Types\n      Content\n      Variations\n    
\n  
\n\n  
Types
\n  
\n    
List
\n    
A standard list
\n    
\n      
\n        \n        
\n          
Schnoodle
\n          Your new dog\n        
\n        
\n          
\n            \n            
\n              Thanks for being my owner\n              
Im so glad you chose to bring me home from the shelter...
\n            
\n          
\n          
\n            \n            
\n              What a walk\n              
Man i am so tired that walk today really was too far...
\n            
\n          
\n          
\n            \n            
\n              Sorry about your old dog\n              
Is this your address? I'm getting dropped off from the SPCA...
\n            
\n          
\n        
\n      
\n      
\n        \n        
\n          
Ragamuffin
\n          Your old dog.\n        
\n        
\n          
\n            \n            
\n              Was on a walk today\n              
Here's a picture of me on the farm with a cow...
\n            
\n          
\n          
\n            \n            
\n              Ruff Ruff\n              
I know i usually message you in english but i wanted to see how your dog language was progressing...
\n            
\n          
\n          
\n            \n            
\n              Reaching Out\n              
Hey its your old dog, been a while since you sent me to the farm...
\n            
\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Bulleted
\n    
A list can mark items with a bullet
\n    
\n      
Cats
\n      
Horses
\n      
Dogs\n        
\n          
Labradoodles
\n          
Shiba Inu
\n          
Mastiff
\n        
\n      
\n    
\n  
\n  
\n    
For convenience, a simple bulleted list can also use ul tag.
\n    \n  
\n\n  
\n    
Ordered
\n    
A list can be ordered numerically
\n    
\n      
Getting Started
\n      
Introduction
\n      
Languages\n        
\n          
HTML
\n          
Javascript
\n          
CSS
\n        
\n      
\n    
\n  
\n  
\n    
For convenience, a simple ordered list can also use the ol tag
\n    
    \n      
  1. Cats
    2. \n      
  2. Horses
    3. \n      
  3. Dogs
    4. \n        
      \n          
    1. Labradoodles
      2. \n          
    2. Shiba Inu
      3. \n          
    3. Mastiff
      4. \n        
    \n      \n    
\n  
\n\n  
\n    
Link
\n    
A link list is specially formatted for page links
\n    
\n      Home\n      About\n      Jobs\n      Team\n    
\n  
\n\n  
Content
\n\n  
\n    
Icon
\n    
A list item can have an icon
\n    
\n      \n        \n        How do you know your dog likes you?\n      \n      \n        \n        When is it ok to send your dog to a farm?\n      \n      \n        \n        Can you get your dog back from a farm if you really want him back?\n      \n      \n        \n        Is trespassing on a farm a misdemeanor offence?\n      \n    
\n  
\n\n  
\n    
Content
\n    
A list can have groups of content that can be floated left or right
\n    
\n      
\n        
View Listing
\n        \n        
\n          
New York Dog Fair
\n        
\n      
\n      
\n        
View Listing
\n        \n        
\n          
Dog Appreciation Day
\n        
\n      
\n    
\n  
\n\n  
\n    
Link
\n    
A list can contain items that link
\n    
\n      What is a FAQ?\n      How does one go about reading answers to questions in a FAQ\n      How do you close a web browser?\n      What is the most popular FAQ question?\n    
\n  
\n\n  
\n    
Header
\n    
A list item can contain a header
\n    
\n      
\n        
New York City
\n        A lovely city\n      
\n      
\n        
Chicago
\n        Also quite a lovely city\n      
\n      
\n        
Los Angeles
\n        Sometimes can be a lovely city\n      
\n      
\n        
San Francisco
\n        What a lovely city\n      
\n    
\n  
\n\n  
\n    
Description
\n    
A list item can contain a description
\n    
\n      
\n        \n        
\n          New York City\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Chicago\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Los Angeles\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          San Francisco\n          
A lovely city
\n        
\n      
\n    
\n  
\n\n  
Variations
\n\n\n  
\n    
Horizontal List
\n    
A list can be formatted horizontally
\n    
\n      
\n        \n        
\n          
Snickerdoodle
\n          An excellent companion\n        
\n      
\n      
\n        \n        
\n          
Poodle
\n          A poodle, its pretty basic\n        
\n      
\n      
\n        \n        
\n          
Paulo
\n          He's also a dog\n        
\n      
\n    
\n  
\n\n  
\n    
\n      
New York City
\n      
Chicago
\n      
Los Angeles
\n      
San Francisco
\n    
\n  
\n  
\n    
\n      
\n        Apples\n      
\n      
\n        Pears\n      
\n      
\n        Oranges\n      
\n      
\n        Soursop\n      
\n    
\n  
\n\n  
\n    
Inverted
\n    
A list can be inverted to appear on a dark background
\n    
\n      
\n        
\n          
\n            
Snickerdoodle
\n            An excellent companion\n          
\n        
\n        
\n          
\n            
Poodle
\n            A poodle, its pretty basic\n          
\n        
\n        
\n          
\n            
Paulo
\n            He's also a dog\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Selection
\n    
A selection list formats list items as possible choices
\n    
\n      
\n        \n        
\n          
Snickerdoodle
\n          An excellent companion\n        
\n      
\n      
\n        \n        
\n          
Poodle
\n          A poodle, its pretty basic\n        
\n      
\n      
\n        \n        
\n          
Paulo
\n          He's also a dog\n        
\n      
\n    
\n  
\n  
\n    
Animated
\n    
A list can animate to set the current item apart from the list
\n    
\n      
\n        \n        
\n          
Snickerdoodle
\n          An excellent companion\n        
\n      
\n      
\n        \n        
\n          
Poodle
\n          A poodle, its pretty basic\n        
\n      
\n      
\n        \n        
\n          
Paulo
\n          He's also a dog\n        
\n      
\n    
\n  
\n\n  
\n    
Relaxed
\n    
A list can relax its padding to provide more negative space
\n    
\n      
\n        \n        
\n          New York City\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Chicago\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Los Angeles\n          
A lovely city
\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        \n        
\n          New York City\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Chicago\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Los Angeles\n          
A lovely city
\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        \n        
\n          New York City\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Chicago\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Los Angeles\n          
A lovely city
\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        \n        
\n          New York City\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Chicago\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Los Angeles\n          
A lovely city
\n        
\n      
\n    
\n  
\n\n  
\n    
Divided
\n    
A list can show divisions between content
\n    
\n      
\n        \n        
\n          
Snickerdoodle
\n          An excellent companion\n        
\n      
\n      
\n        \n        
\n          
Poodle
\n          A poodle, its pretty basic\n        
\n      
\n      
\n        \n        
\n          
Paulo
\n          He's also a dog\n        
\n      
\n    
\n  
\n  
\n    
\n      
About Us
\n      
Contact
\n      
Support
\n    
\n  
\n\n  
\n    
Celled
\n    
A list can divide its items into cells
\n    
\n      
\n        \n        
\n          
Snickerdoodle
\n          An excellent companion\n        
\n      
\n      
\n        \n        
\n          
Poodle
\n          A poodle, its pretty basic\n        
\n      
\n      
\n        \n        
\n          
Paulo
\n          He's also a dog\n        
\n      
\n    
\n  
\n  
\n    
\n      
About Us
\n      
Contact
\n      
Support
\n    
\n  
\n\n  
\n    
Sizes
\n    
A list can vary in size
\n\n    
\n      
\n        \n        
\n          Thanks for being my owner\n          
Im so glad you chose to bring me home from the shelter...
\n        
\n      
\n      
\n        \n        
\n          What a walk\n          
Man i am so tired that walk today really was too far...
\n        
\n      
\n      
\n        \n        
\n          Sorry about your old dog\n          
Is this your address? I'm getting dropped off from the SPCA...
\n        
\n      
\n    
\n    
\n      
\n        \n        
\n          Thanks for being my owner\n          
Im so glad you chose to bring me home from the shelter...
\n        
\n      
\n      
\n        \n        
\n          What a walk\n          
Man i am so tired that walk today really was too far...
\n        
\n      
\n      
\n        \n        
\n          Sorry about your old dog\n          
Is this your address? I'm getting dropped off from the SPCA...
\n        
\n      
\n    
\n    
\n      
\n        \n        
\n          Thanks for being my owner\n          
Im so glad you chose to bring me home from the shelter...
\n        
\n      
\n      
\n        \n        
\n          What a walk\n          
Man i am so tired that walk today really was too far...
\n        
\n      
\n      
\n        \n        
\n          Sorry about your old dog\n          
Is this your address? I'm getting dropped off from the SPCA...
\n        
\n      
\n    
\n    
\n      
\n        \n        
\n          Thanks for being my owner\n          
Im so glad you chose to bring me home from the shelter...
\n        
\n      
\n      
\n        \n        
\n          What a walk\n          
Man i am so tired that walk today really was too far...
\n        
\n      
\n      
\n        \n        
\n          Sorry about your old dog\n          
Is this your address? I'm getting dropped off from the SPCA...
\n        
\n      
\n    
\n    
\n      
\n        \n        
\n          Thanks for being my owner\n          
Im so glad you chose to bring me home from the shelter...
\n        
\n      
\n      
\n        \n        
\n          What a walk\n          
Man i am so tired that walk today really was too far...
\n        
\n      
\n      
\n        \n        
\n          Sorry about your old dog\n          
Is this your address? I'm getting dropped off from the SPCA...
\n        
\n      
\n    
\n    
\n      
\n        \n        
\n          Thanks for being my owner\n          
Im so glad you chose to bring me home from the shelter...
\n        
\n      
\n      
\n        \n        
\n          What a walk\n          
Man i am so tired that walk today really was too far...
\n        
\n      
\n      
\n        \n        
\n          Sorry about your old dog\n          
Is this your address? I'm getting dropped off from the SPCA...
\n        
\n      
\n    
\n    
\n      
\n        \n        
\n          Thanks for being my owner\n          
Im so glad you chose to bring me home from the shelter...
\n        
\n      
\n      
\n        \n        
\n          What a walk\n          
Man i am so tired that walk today really was too far...
\n        
\n      
\n      
\n        \n        
\n          Sorry about your old dog\n          
Is this your address? I'm getting dropped off from the SPCA...
\n        
\n      
\n    
\n  
\n\n\n\n
\n\n\n",
      "contentRenderedWithoutLayouts": "\n\n
\n  
\n    
\n\n      
\n        List\n        \n      
\n\n      
A list is a group of related content items ordered consecutively
\n      \n      
\n        Definition Mode\n        \n      
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
\n
\n\n  
\n    
\n      Types\n      Content\n      Variations\n    
\n  
\n\n  
Types
\n  
\n    
List
\n    
A standard list
\n    
\n      
\n        \n        
\n          
Schnoodle
\n          Your new dog\n        
\n        
\n          
\n            \n            
\n              Thanks for being my owner\n              
Im so glad you chose to bring me home from the shelter...
\n            
\n          
\n          
\n            \n            
\n              What a walk\n              
Man i am so tired that walk today really was too far...
\n            
\n          
\n          
\n            \n            
\n              Sorry about your old dog\n              
Is this your address? I'm getting dropped off from the SPCA...
\n            
\n          
\n        
\n      
\n      
\n        \n        
\n          
Ragamuffin
\n          Your old dog.\n        
\n        
\n          
\n            \n            
\n              Was on a walk today\n              
Here's a picture of me on the farm with a cow...
\n            
\n          
\n          
\n            \n            
\n              Ruff Ruff\n              
I know i usually message you in english but i wanted to see how your dog language was progressing...
\n            
\n          
\n          
\n            \n            
\n              Reaching Out\n              
Hey its your old dog, been a while since you sent me to the farm...
\n            
\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Bulleted
\n    
A list can mark items with a bullet
\n    
\n      
Cats
\n      
Horses
\n      
Dogs\n        
\n          
Labradoodles
\n          
Shiba Inu
\n          
Mastiff
\n        
\n      
\n    
\n  
\n  
\n    
For convenience, a simple bulleted list can also use ul tag.
\n    \n  
\n\n  
\n    
Ordered
\n    
A list can be ordered numerically
\n    
\n      
Getting Started
\n      
Introduction
\n      
Languages\n        
\n          
HTML
\n          
Javascript
\n          
CSS
\n        
\n      
\n    
\n  
\n  
\n    
For convenience, a simple ordered list can also use the ol tag
\n    
    \n      
  1. Cats
    2. \n      
  2. Horses
    3. \n      
  3. Dogs
    4. \n        
      \n          
    1. Labradoodles
      2. \n          
    2. Shiba Inu
      3. \n          
    3. Mastiff
      4. \n        
    \n      \n    
\n  
\n\n  
\n    
Link
\n    
A link list is specially formatted for page links
\n    
\n      Home\n      About\n      Jobs\n      Team\n    
\n  
\n\n  
Content
\n\n  
\n    
Icon
\n    
A list item can have an icon
\n    
\n      \n        \n        How do you know your dog likes you?\n      \n      \n        \n        When is it ok to send your dog to a farm?\n      \n      \n        \n        Can you get your dog back from a farm if you really want him back?\n      \n      \n        \n        Is trespassing on a farm a misdemeanor offence?\n      \n    
\n  
\n\n  
\n    
Content
\n    
A list can have groups of content that can be floated left or right
\n    
\n      
\n        
View Listing
\n        \n        
\n          
New York Dog Fair
\n        
\n      
\n      
\n        
View Listing
\n        \n        
\n          
Dog Appreciation Day
\n        
\n      
\n    
\n  
\n\n  
\n    
Link
\n    
A list can contain items that link
\n    
\n      What is a FAQ?\n      How does one go about reading answers to questions in a FAQ\n      How do you close a web browser?\n      What is the most popular FAQ question?\n    
\n  
\n\n  
\n    
Header
\n    
A list item can contain a header
\n    
\n      
\n        
New York City
\n        A lovely city\n      
\n      
\n        
Chicago
\n        Also quite a lovely city\n      
\n      
\n        
Los Angeles
\n        Sometimes can be a lovely city\n      
\n      
\n        
San Francisco
\n        What a lovely city\n      
\n    
\n  
\n\n  
\n    
Description
\n    
A list item can contain a description
\n    
\n      
\n        \n        
\n          New York City\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Chicago\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Los Angeles\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          San Francisco\n          
A lovely city
\n        
\n      
\n    
\n  
\n\n  
Variations
\n\n\n  
\n    
Horizontal List
\n    
A list can be formatted horizontally
\n    
\n      
\n        \n        
\n          
Snickerdoodle
\n          An excellent companion\n        
\n      
\n      
\n        \n        
\n          
Poodle
\n          A poodle, its pretty basic\n        
\n      
\n      
\n        \n        
\n          
Paulo
\n          He's also a dog\n        
\n      
\n    
\n  
\n\n  
\n    
\n      
New York City
\n      
Chicago
\n      
Los Angeles
\n      
San Francisco
\n    
\n  
\n  
\n    
\n      
\n        Apples\n      
\n      
\n        Pears\n      
\n      
\n        Oranges\n      
\n      
\n        Soursop\n      
\n    
\n  
\n\n  
\n    
Inverted
\n    
A list can be inverted to appear on a dark background
\n    
\n      
\n        
\n          
\n            
Snickerdoodle
\n            An excellent companion\n          
\n        
\n        
\n          
\n            
Poodle
\n            A poodle, its pretty basic\n          
\n        
\n        
\n          
\n            
Paulo
\n            He's also a dog\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Selection
\n    
A selection list formats list items as possible choices
\n    
\n      
\n        \n        
\n          
Snickerdoodle
\n          An excellent companion\n        
\n      
\n      
\n        \n        
\n          
Poodle
\n          A poodle, its pretty basic\n        
\n      
\n      
\n        \n        
\n          
Paulo
\n          He's also a dog\n        
\n      
\n    
\n  
\n  
\n    
Animated
\n    
A list can animate to set the current item apart from the list
\n    
\n      
\n        \n        
\n          
Snickerdoodle
\n          An excellent companion\n        
\n      
\n      
\n        \n        
\n          
Poodle
\n          A poodle, its pretty basic\n        
\n      
\n      
\n        \n        
\n          
Paulo
\n          He's also a dog\n        
\n      
\n    
\n  
\n\n  
\n    
Relaxed
\n    
A list can relax its padding to provide more negative space
\n    
\n      
\n        \n        
\n          New York City\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Chicago\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Los Angeles\n          
A lovely city
\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        \n        
\n          New York City\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Chicago\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Los Angeles\n          
A lovely city
\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        \n        
\n          New York City\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Chicago\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Los Angeles\n          
A lovely city
\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        \n        
\n          New York City\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Chicago\n          
A lovely city
\n        
\n      
\n      
\n        \n        
\n          Los Angeles\n          
A lovely city
\n        
\n      
\n    
\n  
\n\n  
\n    
Divided
\n    
A list can show divisions between content
\n    
\n      
\n        \n        
\n          
Snickerdoodle
\n          An excellent companion\n        
\n      
\n      
\n        \n        
\n          
Poodle
\n          A poodle, its pretty basic\n        
\n      
\n      
\n        \n        
\n          
Paulo
\n          He's also a dog\n        
\n      
\n    
\n  
\n  
\n    
\n      
About Us
\n      
Contact
\n      
Support
\n    
\n  
\n\n  
\n    
Celled
\n    
A list can divide its items into cells
\n    
\n      
\n        \n        
\n          
Snickerdoodle
\n          An excellent companion\n        
\n      
\n      
\n        \n        
\n          
Poodle
\n          A poodle, its pretty basic\n        
\n      
\n      
\n        \n        
\n          
Paulo
\n          He's also a dog\n        
\n      
\n    
\n  
\n  
\n    
\n      
About Us
\n      
Contact
\n      
Support
\n    
\n  
\n\n  
\n    
Sizes
\n    
A list can vary in size
\n\n    
\n      
\n        \n        
\n          Thanks for being my owner\n          
Im so glad you chose to bring me home from the shelter...
\n        
\n      
\n      
\n        \n        
\n          What a walk\n          
Man i am so tired that walk today really was too far...
\n        
\n      
\n      
\n        \n        
\n          Sorry about your old dog\n          
Is this your address? I'm getting dropped off from the SPCA...
\n        
\n      
\n    
\n    
\n      
\n        \n        
\n          Thanks for being my owner\n          
Im so glad you chose to bring me home from the shelter...
\n        
\n      
\n      
\n        \n        
\n          What a walk\n          
Man i am so tired that walk today really was too far...
\n        
\n      
\n      
\n        \n        
\n          Sorry about your old dog\n          
Is this your address? I'm getting dropped off from the SPCA...
\n        
\n      
\n    
\n    
\n      
\n        \n        
\n          Thanks for being my owner\n          
Im so glad you chose to bring me home from the shelter...
\n        
\n      
\n      
\n        \n        
\n          What a walk\n          
Man i am so tired that walk today really was too far...
\n        
\n      
\n      
\n        \n        
\n          Sorry about your old dog\n          
Is this your address? I'm getting dropped off from the SPCA...
\n        
\n      
\n    
\n    
\n      
\n        \n        
\n          Thanks for being my owner\n          
Im so glad you chose to bring me home from the shelter...
\n        
\n      
\n      
\n        \n        
\n          What a walk\n          
Man i am so tired that walk today really was too far...
\n        
\n      
\n      
\n        \n        
\n          Sorry about your old dog\n          
Is this your address? I'm getting dropped off from the SPCA...
\n        
\n      
\n    
\n    
\n      
\n        \n        
\n          Thanks for being my owner\n          
Im so glad you chose to bring me home from the shelter...
\n        
\n      
\n      
\n        \n        
\n          What a walk\n          
Man i am so tired that walk today really was too far...
\n        
\n      
\n      
\n        \n        
\n          Sorry about your old dog\n          
Is this your address? I'm getting dropped off from the SPCA...
\n        
\n      
\n    
\n    
\n      
\n        \n        
\n          Thanks for being my owner\n          
Im so glad you chose to bring me home from the shelter...
\n        
\n      
\n      
\n        \n        
\n          What a walk\n          
Man i am so tired that walk today really was too far...
\n        
\n      
\n      
\n        \n        
\n          Sorry about your old dog\n          
Is this your address? I'm getting dropped off from the SPCA...
\n        
\n      
\n    
\n    
\n      
\n        \n        
\n          Thanks for being my owner\n          
Im so glad you chose to bring me home from the shelter...
\n        
\n      
\n      
\n        \n        
\n          What a walk\n          
Man i am so tired that walk today really was too far...
\n        
\n      
\n      
\n        \n        
\n          Sorry about your old dog\n          
Is this your address? I'm getting dropped off from the SPCA...
\n        
\n      
\n    
\n  
\n\n\n\n
",
      "renderSingleExtensions": false,
      "layout": "default",
      "css": "list",
      "description": "A list is a group of related content items ordered consecutively",
      "type": "UI View",
      "layoutRelativePath": "default.html.eco",
      "meta": {
        "layout": "default",
        "css": "list",
        "title": "List",
        "description": "A list is a group of related content items ordered consecutively",
        "type": "UI View"
      }
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/.htaccess",
      "relativePath": ".htaccess",
      "basename": ".htaccess",
      "outBasename": ".htaccess",
      "extension": "htaccess",
      "outExtension": "htaccess",
      "extensions": [
        "htaccess"
      ],
      "filename": ".htaccess",
      "fullDirPath": "/home/jack/projects/semantic/server/files",
      "outPath": "/home/jack/projects/semantic/docs/.htaccess",
      "outDirPath": "/home/jack/projects/semantic/docs",
      "outFilename": ".htaccess",
      "relativeOutPath": ".htaccess",
      "relativeDirPath": ".",
      "relativeOutDirPath": ".",
      "relativeBase": ".htaccess",
      "relativeOutBase": ".htaccess",
      "contentType": "application/octet-stream",
      "outContentType": "application/octet-stream",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:28.770Z",
      "exists": true,
      "encoding": "utf8",
      "source": "# Apache configuration file\n# httpd.apache.org/docs/2.2/mod/quickreference.html\n\n# Note .htaccess files are an overhead, this logic should be in your Apache\n# config if possible: httpd.apache.org/docs/2.2/howto/htaccess.html\n\n# Techniques in here adapted from all over, including:\n#   Kroc Camen: camendesign.com/.htaccess\n#   perishablepress.com/press/2006/01/10/stupid-htaccess-tricks/\n#   Sample .htaccess file of CMS MODx: modxcms.com\n\n\n# ----------------------------------------------------------------------\n# Better website experience for IE users\n# ----------------------------------------------------------------------\n\n# Force the latest IE version, in various cases when it may fall back to IE7 mode\n#  github.com/rails/rails/commit/123eb25#commitcomment-118920\n# Use ChromeFrame if it's installed for a better experience for the poor IE folk\n\n\n  Header set X-UA-Compatible \"IE=Edge,chrome=1\"\n  # mod_headers can't match by content-type, but we don't want to send this header on *everything*...\n  \n    Header unset X-UA-Compatible\n  \n\n\n\n# ----------------------------------------------------------------------\n# Cross-domain AJAX requests\n# ----------------------------------------------------------------------\n\n# Serve cross-domain Ajax requests, disabled by default.\n# enable-cors.org\n# code.google.com/p/html5security/wiki/CrossOriginRequestSecurity\n\n#  \n#    Header set Access-Control-Allow-Origin \"*\"\n#  \n\n\n# ----------------------------------------------------------------------\n# CORS-enabled images (@crossorigin)\n# ----------------------------------------------------------------------\n\n# Send CORS headers if browsers request them; enabled by default for images.\n# developer.mozilla.org/en/CORS_Enabled_Image\n# blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html\n# hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/\n# wiki.mozilla.org/Security/Reviews/crossoriginAttribute\n\n\n  \n    # mod_headers, y u no match by Content-Type?!\n    \n      SetEnvIf Origin \":\" IS_CORS\n      Header set Access-Control-Allow-Origin \"*\" env=IS_CORS\n    \n  \n\n\n\n# ----------------------------------------------------------------------\n# Webfont access\n# ----------------------------------------------------------------------\n\n# Allow access from all domains for webfonts.\n# Alternatively you could only whitelist your\n# subdomains like \"subdomain.example.com\".\n\n\n  \n    Header set Access-Control-Allow-Origin \"*\"\n  \n\n\n\n# ----------------------------------------------------------------------\n# Proper MIME type for all files\n# ----------------------------------------------------------------------\n\n# JavaScript\n#   Normalize to standard type (it's sniffed in IE anyways)\n#   tools.ietf.org/html/rfc4329#section-7.2\nAddType application/javascript         js jsonp\nAddType application/json               json\n\n# Audio\nAddType audio/ogg                      oga ogg\nAddType audio/mp4                      m4a f4a f4b\n\n# Video\nAddType video/ogg                      ogv\nAddType video/mp4                      mp4 m4v f4v f4p\nAddType video/webm                     webm\nAddType video/x-flv                    flv\n\n# SVG\n#   Required for svg webfonts on iPad\n#   twitter.com/FontSquirrel/status/14855840545\nAddType     image/svg+xml              svg svgz\nAddEncoding gzip                       svgz\n\n# Webfonts\nAddType application/vnd.ms-fontobject  eot\nAddType application/x-font-ttf         ttf ttc\nAddType font/opentype                  otf\nAddType application/x-font-woff        woff\n\n# Assorted types\nAddType image/x-icon                        ico\nAddType image/webp                          webp\nAddType text/cache-manifest                 appcache manifest\nAddType text/x-component                    htc\nAddType application/xml                     rss atom xml rdf\nAddType application/x-chrome-extension      crx\nAddType application/x-opera-extension       oex\nAddType application/x-xpinstall             xpi\nAddType application/octet-stream            safariextz\nAddType application/x-web-app-manifest+json webapp\nAddType text/x-vcard                        vcf\nAddType application/x-shockwave-flash       swf\nAddType text/vtt                            vtt\n\n\n# ----------------------------------------------------------------------\n# Allow concatenation from within specific js and css files\n# ----------------------------------------------------------------------\n\n# e.g. Inside of script.combined.js you could have\n#   \n#   \n# and they would be included into this single file.\n\n# This is not in use in the boilerplate as it stands. You may\n# choose to use this technique if you do not have a build process.\n\n#\n#  Options +Includes\n#  AddOutputFilterByType INCLUDES application/javascript application/json\n#  SetOutputFilter INCLUDES\n#\n\n#\n#  Options +Includes\n#  AddOutputFilterByType INCLUDES text/css\n#  SetOutputFilter INCLUDES\n#\n\n\n# ----------------------------------------------------------------------\n# Gzip compression\n# ----------------------------------------------------------------------\n\n\n\n  # Force deflate for mangled headers developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping/\n  \n    \n      SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\\s*,?\\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding\n      RequestHeader append Accept-Encoding \"gzip,deflate\" env=HAVE_Accept-Encoding\n    \n  \n\n  # Compress all output labeled with one of the following MIME-types\n  \n    AddOutputFilterByType DEFLATE application/atom+xml \\\n                                  application/javascript \\\n                                  application/json \\\n                                  application/rss+xml \\\n                                  application/vnd.ms-fontobject \\\n                                  application/x-font-ttf \\\n                                  application/xhtml+xml \\\n                                  application/xml \\\n                                  font/opentype \\\n                                  image/svg+xml \\\n                                  image/x-icon \\\n                                  text/css \\\n                                  text/html \\\n                                  text/plain \\\n                                  text/x-component \\\n                                  text/xml\n  \n\n\n\n\n# ----------------------------------------------------------------------\n# Expires headers (for better cache control)\n# ----------------------------------------------------------------------\n\n# These are pretty far-future expires headers.\n# They assume you control versioning with filename-based cache busting\n# Additionally, consider that outdated proxies may miscache\n#   www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/\n\n# If you don't use filenames to version, lower the CSS and JS to something like\n# \"access plus 1 week\".\n\n\n  ExpiresActive on\n\n# Perhaps better to whitelist expires rules? Perhaps.\n  ExpiresDefault                          \"access plus 1 month\"\n\n# cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)\n  ExpiresByType text/cache-manifest       \"access plus 0 seconds\"\n\n# Your document html\n  ExpiresByType text/html                 \"access plus 0 seconds\"\n\n# Data\n  ExpiresByType text/xml                  \"access plus 0 seconds\"\n  ExpiresByType application/xml           \"access plus 0 seconds\"\n  ExpiresByType application/json          \"access plus 0 seconds\"\n\n# Feed\n  ExpiresByType application/rss+xml       \"access plus 1 hour\"\n  ExpiresByType application/atom+xml      \"access plus 1 hour\"\n\n# Favicon (cannot be renamed)\n  ExpiresByType image/x-icon              \"access plus 1 week\"\n\n# Media: images, video, audio\n  ExpiresByType image/gif                 \"access plus 1 month\"\n  ExpiresByType image/png                 \"access plus 1 month\"\n  ExpiresByType image/jpeg                \"access plus 1 month\"\n  ExpiresByType video/ogg                 \"access plus 1 month\"\n  ExpiresByType audio/ogg                 \"access plus 1 month\"\n  ExpiresByType video/mp4                 \"access plus 1 month\"\n  ExpiresByType video/webm                \"access plus 1 month\"\n\n# HTC files  (css3pie)\n  ExpiresByType text/x-component          \"access plus 1 month\"\n\n# Webfonts\n  ExpiresByType application/x-font-ttf    \"access plus 1 month\"\n  ExpiresByType font/opentype             \"access plus 1 month\"\n  ExpiresByType application/x-font-woff   \"access plus 1 month\"\n  ExpiresByType image/svg+xml             \"access plus 1 month\"\n  ExpiresByType application/vnd.ms-fontobject \"access plus 1 month\"\n\n# CSS and JavaScript\n  ExpiresByType text/css                  \"access plus 1 year\"\n  ExpiresByType application/javascript    \"access plus 1 year\"\n\n\n\n\n# ----------------------------------------------------------------------\n# Prevent mobile network providers from modifying your site\n# ----------------------------------------------------------------------\n\n# The following header prevents modification of your code over 3G on some\n# European providers.\n# This is the official 'bypass' suggested by O2 in the UK.\n\n# \n# Header set Cache-Control \"no-transform\"\n# \n\n\n# ----------------------------------------------------------------------\n# ETag removal\n# ----------------------------------------------------------------------\n\n# FileETag None is not enough for every server.\n\n  Header unset ETag\n\n\n# Since we're sending far-future expires, we don't need ETags for\n# static content.\n#   developer.yahoo.com/performance/rules.html#etags\nFileETag None\n\n\n# ----------------------------------------------------------------------\n# Stop screen flicker in IE on CSS rollovers\n# ----------------------------------------------------------------------\n\n# The following directives stop screen flicker in IE on CSS rollovers - in\n# combination with the \"ExpiresByType\" rules for images (see above).\n\n# BrowserMatch \"MSIE\" brokenvary=1\n# BrowserMatch \"Mozilla/4.[0-9]{2}\" brokenvary=1\n# BrowserMatch \"Opera\" !brokenvary\n# SetEnvIf brokenvary 1 force-no-vary\n\n\n# ----------------------------------------------------------------------\n# Set Keep-Alive Header\n# ----------------------------------------------------------------------\n\n# Keep-Alive allows the server to send multiple requests through one\n# TCP-connection. Be aware of possible disadvantages of this setting. Turn on\n# if you serve a lot of static content.\n\n# \n#   Header set Connection Keep-Alive\n# \n\n\n# ----------------------------------------------------------------------\n# Cookie setting from iframes\n# ----------------------------------------------------------------------\n\n# Allow cookies to be set from iframes (for IE only)\n# If needed, specify a path or regex in the Location directive.\n\n# \n#   Header set P3P \"policyref=\\\"/w3c/p3p.xml\\\", CP=\\\"IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT\\\"\"\n# \n\n\n# ----------------------------------------------------------------------\n# Start rewrite engine\n# ----------------------------------------------------------------------\n\n# Turning on the rewrite engine is necessary for the following rules and\n# features. FollowSymLinks must be enabled for this to work.\n\n# Some cloud hosting services require RewriteBase to be set: goo.gl/HOcPN\n# If using the h5bp in a subdirectory, use `RewriteBase /foo` instead where\n# 'foo' is your directory.\n\n# If your web host doesn't allow the FollowSymlinks option, you may need to\n# comment it out and use `Options +SymLinksOfOwnerMatch`, but be aware of the\n# performance impact: http://goo.gl/Mluzd\n\n\n  Options +FollowSymlinks\n# Options +SymLinksIfOwnerMatch\n  RewriteEngine On\n# RewriteBase /\n\n\n\n# ----------------------------------------------------------------------\n# Suppress or force the \"www.\" at the beginning of URLs\n# ----------------------------------------------------------------------\n\n# The same content should never be available under two different URLs -\n# especially not with and without \"www.\" at the beginning, since this can cause\n# SEO problems (duplicate content). That's why you should choose one of the\n# alternatives and redirect the other one.\n\n# By default option 1 (no \"www.\") is activated.\n# no-www.org/faq.php?q=class_b\n\n# If you'd prefer to use option 2, just comment out all option 1 lines\n# and uncomment option 2.\n\n# IMPORTANT: NEVER USE BOTH RULES AT THE SAME TIME!\n\n# ----------------------------------------------------------------------\n\n# Option 1:\n# Rewrite \"www.example.com -> example.com\".\n\n\n  RewriteCond %{HTTPS} !=on\n  RewriteCond %{HTTP_HOST} ^www\\.(.+)$ [NC]\n  RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L]\n\n\n# ----------------------------------------------------------------------\n\n# Option 2:\n# Rewrite \"example.com -> www.example.com\".\n# Be aware that the following rule might not be a good idea if you use \"real\"\n# subdomains for certain parts of your website.\n\n# \n#   RewriteCond %{HTTPS} !=on\n#   RewriteCond %{HTTP_HOST} !^www\\..+$ [NC]\n#   RewriteRule ^ http://www.%{HTTP_HOST}%{REQUEST_URI} [R=301,L]\n# \n\n\n# ----------------------------------------------------------------------\n# Built-in filename-based cache busting\n# ----------------------------------------------------------------------\n\n# If you're not using the build script to manage your filename version revving,\n# you might want to consider enabling this, which will route requests for\n# /css/style.20110203.css to /css/style.css\n\n# To understand why this is important and a better idea than all.css?v1231,\n# read: github.com/h5bp/html5-boilerplate/wiki/cachebusting\n\n# \n#   RewriteCond %{REQUEST_FILENAME} !-f\n#   RewriteCond %{REQUEST_FILENAME} !-d\n#   RewriteRule ^(.+)\\.(\\d+)\\.(js|css|png|jpg|gif)$ $1.$3 [L]\n# \n\n\n# ----------------------------------------------------------------------\n# Prevent SSL cert warnings\n# ----------------------------------------------------------------------\n\n# Rewrite secure requests properly to prevent SSL cert warnings, e.g. prevent\n# https://www.example.com when your cert only allows https://secure.example.com\n\n# \n#   RewriteCond %{SERVER_PORT} !^443\n#   RewriteRule ^ https://example-domain-please-change-me.com%{REQUEST_URI} [R=301,L]\n# \n\n\n# ----------------------------------------------------------------------\n# Prevent 404 errors for non-existing redirected folders\n# ----------------------------------------------------------------------\n\n# without -MultiViews, Apache will give a 404 for a rewrite if a folder of the\n# same name does not exist.\n# webmasterworld.com/apache/3808792.htm\n\nOptions -MultiViews\n\n\n# ----------------------------------------------------------------------\n# Custom 404 page\n# ----------------------------------------------------------------------\n\n# You can add custom pages to handle 500 or 403 pretty easily, if you like.\n# If you are hosting your site in subdirectory, adjust this accordingly\n#    e.g. ErrorDocument 404 /subdir/404.html\nErrorDocument 404 /404.html\n\n\n# ----------------------------------------------------------------------\n# UTF-8 encoding\n# ----------------------------------------------------------------------\n\n# Use UTF-8 encoding for anything served text/plain or text/html\nAddDefaultCharset utf-8\n\n# Force UTF-8 for a number of file formats\nAddCharset utf-8 .atom .css .js .json .rss .vtt .xml\n\n\n# ----------------------------------------------------------------------\n# A little more security\n# ----------------------------------------------------------------------\n\n# To avoid displaying the exact version number of Apache being used, add the\n# following to httpd.conf (it will not work in .htaccess):\n# ServerTokens Prod\n\n# \"-Indexes\" will have Apache block users from browsing folders without a\n# default document Usually you should leave this activated, because you\n# shouldn't allow everybody to surf through every folder on your server (which\n# includes rather private places like CMS system folders).\n\n  Options -Indexes\n\n\n# Block access to \"hidden\" directories or files whose names begin with a\n# period. This includes directories used by version control systems such as\n# Subversion or Git.\n\n  RewriteCond %{SCRIPT_FILENAME} -d [OR]\n  RewriteCond %{SCRIPT_FILENAME} -f\n  RewriteRule \"(^|/)\\.\" - [F]\n\n\n# Block access to backup and source files. These files may be left by some\n# text/html editors and pose a great security danger, when anyone can access\n# them.\n\n  Order allow,deny\n  Deny from all\n  Satisfy All\n\n\n# If your server is not already configured as such, the following directive\n# should be uncommented in order to set PHP's register_globals option to OFF.\n# This closes a major security hole that is abused by most XSS (cross-site\n# scripting) attacks. For more information: http://php.net/register_globals\n#\n# IF REGISTER_GLOBALS DIRECTIVE CAUSES 500 INTERNAL SERVER ERRORS:\n#\n# Your server does not allow PHP directives to be set via .htaccess. In that\n# case you must make this change in your php.ini file instead. If you are\n# using a commercial web host, contact the administrators for assistance in\n# doing this. Not all servers allow local php.ini files, and they should\n# include all PHP configurations (not just this one), or you will effectively\n# reset everything to PHP defaults. Consult www.php.net for more detailed\n# information about setting PHP directives.\n\n# php_flag register_globals Off\n\n# Rename session cookie to something else, than PHPSESSID\n# php_value session.name sid\n\n# Disable magic quotes (This feature has been DEPRECATED as of PHP 5.3.0 and REMOVED as of PHP 5.4.0.)\n# php_flag magic_quotes_gpc Off\n\n# Do not show you are using PHP\n# Note: Move this line to php.ini since it won't work in .htaccess\n# php_flag expose_php Off\n\n# Level of log detail - log all errors\n# php_value error_reporting -1\n\n# Write errors to log file\n# php_flag log_errors On\n\n# Do not display errors in browser (production - Off, development - On)\n# php_flag display_errors Off\n\n# Do not display startup errors (production - Off, development - On)\n# php_flag display_startup_errors Off\n\n# Format errors in plain text\n# Note: Leave this setting 'On' for xdebug's var_dump() output\n# php_flag html_errors Off\n\n# Show multiple occurrence of error\n# php_flag ignore_repeated_errors Off\n\n# Show same errors from different sources\n# php_flag ignore_repeated_source Off\n\n# Size limit for error messages\n# php_value log_errors_max_len 1024\n\n# Don't precede error with string (doesn't accept empty string, use whitespace if you need)\n# php_value error_prepend_string \" \"\n\n# Don't prepend to error (doesn't accept empty string, use whitespace if you need)\n# php_value error_append_string \" \"\n\n# Increase cookie security\n\n  php_value session.cookie_httponly true\n\n",
      "content": "# Apache configuration file\n# httpd.apache.org/docs/2.2/mod/quickreference.html\n\n# Note .htaccess files are an overhead, this logic should be in your Apache\n# config if possible: httpd.apache.org/docs/2.2/howto/htaccess.html\n\n# Techniques in here adapted from all over, including:\n#   Kroc Camen: camendesign.com/.htaccess\n#   perishablepress.com/press/2006/01/10/stupid-htaccess-tricks/\n#   Sample .htaccess file of CMS MODx: modxcms.com\n\n\n# ----------------------------------------------------------------------\n# Better website experience for IE users\n# ----------------------------------------------------------------------\n\n# Force the latest IE version, in various cases when it may fall back to IE7 mode\n#  github.com/rails/rails/commit/123eb25#commitcomment-118920\n# Use ChromeFrame if it's installed for a better experience for the poor IE folk\n\n\n  Header set X-UA-Compatible \"IE=Edge,chrome=1\"\n  # mod_headers can't match by content-type, but we don't want to send this header on *everything*...\n  \n    Header unset X-UA-Compatible\n  \n\n\n\n# ----------------------------------------------------------------------\n# Cross-domain AJAX requests\n# ----------------------------------------------------------------------\n\n# Serve cross-domain Ajax requests, disabled by default.\n# enable-cors.org\n# code.google.com/p/html5security/wiki/CrossOriginRequestSecurity\n\n#  \n#    Header set Access-Control-Allow-Origin \"*\"\n#  \n\n\n# ----------------------------------------------------------------------\n# CORS-enabled images (@crossorigin)\n# ----------------------------------------------------------------------\n\n# Send CORS headers if browsers request them; enabled by default for images.\n# developer.mozilla.org/en/CORS_Enabled_Image\n# blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html\n# hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/\n# wiki.mozilla.org/Security/Reviews/crossoriginAttribute\n\n\n  \n    # mod_headers, y u no match by Content-Type?!\n    \n      SetEnvIf Origin \":\" IS_CORS\n      Header set Access-Control-Allow-Origin \"*\" env=IS_CORS\n    \n  \n\n\n\n# ----------------------------------------------------------------------\n# Webfont access\n# ----------------------------------------------------------------------\n\n# Allow access from all domains for webfonts.\n# Alternatively you could only whitelist your\n# subdomains like \"subdomain.example.com\".\n\n\n  \n    Header set Access-Control-Allow-Origin \"*\"\n  \n\n\n\n# ----------------------------------------------------------------------\n# Proper MIME type for all files\n# ----------------------------------------------------------------------\n\n# JavaScript\n#   Normalize to standard type (it's sniffed in IE anyways)\n#   tools.ietf.org/html/rfc4329#section-7.2\nAddType application/javascript         js jsonp\nAddType application/json               json\n\n# Audio\nAddType audio/ogg                      oga ogg\nAddType audio/mp4                      m4a f4a f4b\n\n# Video\nAddType video/ogg                      ogv\nAddType video/mp4                      mp4 m4v f4v f4p\nAddType video/webm                     webm\nAddType video/x-flv                    flv\n\n# SVG\n#   Required for svg webfonts on iPad\n#   twitter.com/FontSquirrel/status/14855840545\nAddType     image/svg+xml              svg svgz\nAddEncoding gzip                       svgz\n\n# Webfonts\nAddType application/vnd.ms-fontobject  eot\nAddType application/x-font-ttf         ttf ttc\nAddType font/opentype                  otf\nAddType application/x-font-woff        woff\n\n# Assorted types\nAddType image/x-icon                        ico\nAddType image/webp                          webp\nAddType text/cache-manifest                 appcache manifest\nAddType text/x-component                    htc\nAddType application/xml                     rss atom xml rdf\nAddType application/x-chrome-extension      crx\nAddType application/x-opera-extension       oex\nAddType application/x-xpinstall             xpi\nAddType application/octet-stream            safariextz\nAddType application/x-web-app-manifest+json webapp\nAddType text/x-vcard                        vcf\nAddType application/x-shockwave-flash       swf\nAddType text/vtt                            vtt\n\n\n# ----------------------------------------------------------------------\n# Allow concatenation from within specific js and css files\n# ----------------------------------------------------------------------\n\n# e.g. Inside of script.combined.js you could have\n#   \n#   \n# and they would be included into this single file.\n\n# This is not in use in the boilerplate as it stands. You may\n# choose to use this technique if you do not have a build process.\n\n#\n#  Options +Includes\n#  AddOutputFilterByType INCLUDES application/javascript application/json\n#  SetOutputFilter INCLUDES\n#\n\n#\n#  Options +Includes\n#  AddOutputFilterByType INCLUDES text/css\n#  SetOutputFilter INCLUDES\n#\n\n\n# ----------------------------------------------------------------------\n# Gzip compression\n# ----------------------------------------------------------------------\n\n\n\n  # Force deflate for mangled headers developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping/\n  \n    \n      SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\\s*,?\\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding\n      RequestHeader append Accept-Encoding \"gzip,deflate\" env=HAVE_Accept-Encoding\n    \n  \n\n  # Compress all output labeled with one of the following MIME-types\n  \n    AddOutputFilterByType DEFLATE application/atom+xml \\\n                                  application/javascript \\\n                                  application/json \\\n                                  application/rss+xml \\\n                                  application/vnd.ms-fontobject \\\n                                  application/x-font-ttf \\\n                                  application/xhtml+xml \\\n                                  application/xml \\\n                                  font/opentype \\\n                                  image/svg+xml \\\n                                  image/x-icon \\\n                                  text/css \\\n                                  text/html \\\n                                  text/plain \\\n                                  text/x-component \\\n                                  text/xml\n  \n\n\n\n\n# ----------------------------------------------------------------------\n# Expires headers (for better cache control)\n# ----------------------------------------------------------------------\n\n# These are pretty far-future expires headers.\n# They assume you control versioning with filename-based cache busting\n# Additionally, consider that outdated proxies may miscache\n#   www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/\n\n# If you don't use filenames to version, lower the CSS and JS to something like\n# \"access plus 1 week\".\n\n\n  ExpiresActive on\n\n# Perhaps better to whitelist expires rules? Perhaps.\n  ExpiresDefault                          \"access plus 1 month\"\n\n# cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)\n  ExpiresByType text/cache-manifest       \"access plus 0 seconds\"\n\n# Your document html\n  ExpiresByType text/html                 \"access plus 0 seconds\"\n\n# Data\n  ExpiresByType text/xml                  \"access plus 0 seconds\"\n  ExpiresByType application/xml           \"access plus 0 seconds\"\n  ExpiresByType application/json          \"access plus 0 seconds\"\n\n# Feed\n  ExpiresByType application/rss+xml       \"access plus 1 hour\"\n  ExpiresByType application/atom+xml      \"access plus 1 hour\"\n\n# Favicon (cannot be renamed)\n  ExpiresByType image/x-icon              \"access plus 1 week\"\n\n# Media: images, video, audio\n  ExpiresByType image/gif                 \"access plus 1 month\"\n  ExpiresByType image/png                 \"access plus 1 month\"\n  ExpiresByType image/jpeg                \"access plus 1 month\"\n  ExpiresByType video/ogg                 \"access plus 1 month\"\n  ExpiresByType audio/ogg                 \"access plus 1 month\"\n  ExpiresByType video/mp4                 \"access plus 1 month\"\n  ExpiresByType video/webm                \"access plus 1 month\"\n\n# HTC files  (css3pie)\n  ExpiresByType text/x-component          \"access plus 1 month\"\n\n# Webfonts\n  ExpiresByType application/x-font-ttf    \"access plus 1 month\"\n  ExpiresByType font/opentype             \"access plus 1 month\"\n  ExpiresByType application/x-font-woff   \"access plus 1 month\"\n  ExpiresByType image/svg+xml             \"access plus 1 month\"\n  ExpiresByType application/vnd.ms-fontobject \"access plus 1 month\"\n\n# CSS and JavaScript\n  ExpiresByType text/css                  \"access plus 1 year\"\n  ExpiresByType application/javascript    \"access plus 1 year\"\n\n\n\n\n# ----------------------------------------------------------------------\n# Prevent mobile network providers from modifying your site\n# ----------------------------------------------------------------------\n\n# The following header prevents modification of your code over 3G on some\n# European providers.\n# This is the official 'bypass' suggested by O2 in the UK.\n\n# \n# Header set Cache-Control \"no-transform\"\n# \n\n\n# ----------------------------------------------------------------------\n# ETag removal\n# ----------------------------------------------------------------------\n\n# FileETag None is not enough for every server.\n\n  Header unset ETag\n\n\n# Since we're sending far-future expires, we don't need ETags for\n# static content.\n#   developer.yahoo.com/performance/rules.html#etags\nFileETag None\n\n\n# ----------------------------------------------------------------------\n# Stop screen flicker in IE on CSS rollovers\n# ----------------------------------------------------------------------\n\n# The following directives stop screen flicker in IE on CSS rollovers - in\n# combination with the \"ExpiresByType\" rules for images (see above).\n\n# BrowserMatch \"MSIE\" brokenvary=1\n# BrowserMatch \"Mozilla/4.[0-9]{2}\" brokenvary=1\n# BrowserMatch \"Opera\" !brokenvary\n# SetEnvIf brokenvary 1 force-no-vary\n\n\n# ----------------------------------------------------------------------\n# Set Keep-Alive Header\n# ----------------------------------------------------------------------\n\n# Keep-Alive allows the server to send multiple requests through one\n# TCP-connection. Be aware of possible disadvantages of this setting. Turn on\n# if you serve a lot of static content.\n\n# \n#   Header set Connection Keep-Alive\n# \n\n\n# ----------------------------------------------------------------------\n# Cookie setting from iframes\n# ----------------------------------------------------------------------\n\n# Allow cookies to be set from iframes (for IE only)\n# If needed, specify a path or regex in the Location directive.\n\n# \n#   Header set P3P \"policyref=\\\"/w3c/p3p.xml\\\", CP=\\\"IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT\\\"\"\n# \n\n\n# ----------------------------------------------------------------------\n# Start rewrite engine\n# ----------------------------------------------------------------------\n\n# Turning on the rewrite engine is necessary for the following rules and\n# features. FollowSymLinks must be enabled for this to work.\n\n# Some cloud hosting services require RewriteBase to be set: goo.gl/HOcPN\n# If using the h5bp in a subdirectory, use `RewriteBase /foo` instead where\n# 'foo' is your directory.\n\n# If your web host doesn't allow the FollowSymlinks option, you may need to\n# comment it out and use `Options +SymLinksOfOwnerMatch`, but be aware of the\n# performance impact: http://goo.gl/Mluzd\n\n\n  Options +FollowSymlinks\n# Options +SymLinksIfOwnerMatch\n  RewriteEngine On\n# RewriteBase /\n\n\n\n# ----------------------------------------------------------------------\n# Suppress or force the \"www.\" at the beginning of URLs\n# ----------------------------------------------------------------------\n\n# The same content should never be available under two different URLs -\n# especially not with and without \"www.\" at the beginning, since this can cause\n# SEO problems (duplicate content). That's why you should choose one of the\n# alternatives and redirect the other one.\n\n# By default option 1 (no \"www.\") is activated.\n# no-www.org/faq.php?q=class_b\n\n# If you'd prefer to use option 2, just comment out all option 1 lines\n# and uncomment option 2.\n\n# IMPORTANT: NEVER USE BOTH RULES AT THE SAME TIME!\n\n# ----------------------------------------------------------------------\n\n# Option 1:\n# Rewrite \"www.example.com -> example.com\".\n\n\n  RewriteCond %{HTTPS} !=on\n  RewriteCond %{HTTP_HOST} ^www\\.(.+)$ [NC]\n  RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L]\n\n\n# ----------------------------------------------------------------------\n\n# Option 2:\n# Rewrite \"example.com -> www.example.com\".\n# Be aware that the following rule might not be a good idea if you use \"real\"\n# subdomains for certain parts of your website.\n\n# \n#   RewriteCond %{HTTPS} !=on\n#   RewriteCond %{HTTP_HOST} !^www\\..+$ [NC]\n#   RewriteRule ^ http://www.%{HTTP_HOST}%{REQUEST_URI} [R=301,L]\n# \n\n\n# ----------------------------------------------------------------------\n# Built-in filename-based cache busting\n# ----------------------------------------------------------------------\n\n# If you're not using the build script to manage your filename version revving,\n# you might want to consider enabling this, which will route requests for\n# /css/style.20110203.css to /css/style.css\n\n# To understand why this is important and a better idea than all.css?v1231,\n# read: github.com/h5bp/html5-boilerplate/wiki/cachebusting\n\n# \n#   RewriteCond %{REQUEST_FILENAME} !-f\n#   RewriteCond %{REQUEST_FILENAME} !-d\n#   RewriteRule ^(.+)\\.(\\d+)\\.(js|css|png|jpg|gif)$ $1.$3 [L]\n# \n\n\n# ----------------------------------------------------------------------\n# Prevent SSL cert warnings\n# ----------------------------------------------------------------------\n\n# Rewrite secure requests properly to prevent SSL cert warnings, e.g. prevent\n# https://www.example.com when your cert only allows https://secure.example.com\n\n# \n#   RewriteCond %{SERVER_PORT} !^443\n#   RewriteRule ^ https://example-domain-please-change-me.com%{REQUEST_URI} [R=301,L]\n# \n\n\n# ----------------------------------------------------------------------\n# Prevent 404 errors for non-existing redirected folders\n# ----------------------------------------------------------------------\n\n# without -MultiViews, Apache will give a 404 for a rewrite if a folder of the\n# same name does not exist.\n# webmasterworld.com/apache/3808792.htm\n\nOptions -MultiViews\n\n\n# ----------------------------------------------------------------------\n# Custom 404 page\n# ----------------------------------------------------------------------\n\n# You can add custom pages to handle 500 or 403 pretty easily, if you like.\n# If you are hosting your site in subdirectory, adjust this accordingly\n#    e.g. ErrorDocument 404 /subdir/404.html\nErrorDocument 404 /404.html\n\n\n# ----------------------------------------------------------------------\n# UTF-8 encoding\n# ----------------------------------------------------------------------\n\n# Use UTF-8 encoding for anything served text/plain or text/html\nAddDefaultCharset utf-8\n\n# Force UTF-8 for a number of file formats\nAddCharset utf-8 .atom .css .js .json .rss .vtt .xml\n\n\n# ----------------------------------------------------------------------\n# A little more security\n# ----------------------------------------------------------------------\n\n# To avoid displaying the exact version number of Apache being used, add the\n# following to httpd.conf (it will not work in .htaccess):\n# ServerTokens Prod\n\n# \"-Indexes\" will have Apache block users from browsing folders without a\n# default document Usually you should leave this activated, because you\n# shouldn't allow everybody to surf through every folder on your server (which\n# includes rather private places like CMS system folders).\n\n  Options -Indexes\n\n\n# Block access to \"hidden\" directories or files whose names begin with a\n# period. This includes directories used by version control systems such as\n# Subversion or Git.\n\n  RewriteCond %{SCRIPT_FILENAME} -d [OR]\n  RewriteCond %{SCRIPT_FILENAME} -f\n  RewriteRule \"(^|/)\\.\" - [F]\n\n\n# Block access to backup and source files. These files may be left by some\n# text/html editors and pose a great security danger, when anyone can access\n# them.\n\n  Order allow,deny\n  Deny from all\n  Satisfy All\n\n\n# If your server is not already configured as such, the following directive\n# should be uncommented in order to set PHP's register_globals option to OFF.\n# This closes a major security hole that is abused by most XSS (cross-site\n# scripting) attacks. For more information: http://php.net/register_globals\n#\n# IF REGISTER_GLOBALS DIRECTIVE CAUSES 500 INTERNAL SERVER ERRORS:\n#\n# Your server does not allow PHP directives to be set via .htaccess. In that\n# case you must make this change in your php.ini file instead. If you are\n# using a commercial web host, contact the administrators for assistance in\n# doing this. Not all servers allow local php.ini files, and they should\n# include all PHP configurations (not just this one), or you will effectively\n# reset everything to PHP defaults. Consult www.php.net for more detailed\n# information about setting PHP directives.\n\n# php_flag register_globals Off\n\n# Rename session cookie to something else, than PHPSESSID\n# php_value session.name sid\n\n# Disable magic quotes (This feature has been DEPRECATED as of PHP 5.3.0 and REMOVED as of PHP 5.4.0.)\n# php_flag magic_quotes_gpc Off\n\n# Do not show you are using PHP\n# Note: Move this line to php.ini since it won't work in .htaccess\n# php_flag expose_php Off\n\n# Level of log detail - log all errors\n# php_value error_reporting -1\n\n# Write errors to log file\n# php_flag log_errors On\n\n# Do not display errors in browser (production - Off, development - On)\n# php_flag display_errors Off\n\n# Do not display startup errors (production - Off, development - On)\n# php_flag display_startup_errors Off\n\n# Format errors in plain text\n# Note: Leave this setting 'On' for xdebug's var_dump() output\n# php_flag html_errors Off\n\n# Show multiple occurrence of error\n# php_flag ignore_repeated_errors Off\n\n# Show same errors from different sources\n# php_flag ignore_repeated_source Off\n\n# Size limit for error messages\n# php_value log_errors_max_len 1024\n\n# Don't precede error with string (doesn't accept empty string, use whitespace if you need)\n# php_value error_prepend_string \" \"\n\n# Don't prepend to error (doesn't accept empty string, use whitespace if you need)\n# php_value error_append_string \" \"\n\n# Increase cookie security\n\n  php_value session.cookie_httponly true\n\n",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": ".htaccess",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "htaccess",
      "url": "/.htaccess",
      "urls": [
        "/.htaccess"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/404.html",
      "relativePath": "404.html",
      "basename": "404",
      "outBasename": "404",
      "extension": "html",
      "outExtension": "html",
      "extensions": [
        "html"
      ],
      "filename": "404.html",
      "fullDirPath": "/home/jack/projects/semantic/server/files",
      "outPath": "/home/jack/projects/semantic/docs/404.html",
      "outDirPath": "/home/jack/projects/semantic/docs",
      "outFilename": "404.html",
      "relativeOutPath": "404.html",
      "relativeDirPath": ".",
      "relativeOutDirPath": ".",
      "relativeBase": "404",
      "relativeOutBase": "404",
      "contentType": "text/html",
      "outContentType": "text/html",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:28.772Z",
      "exists": true,
      "encoding": "utf8",
      "source": "\n\n\n  \n  404 | Semantic UI\n\n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n  \n  \n\n  \n  \n  \n\n  \n  \n  \n  \n\n  \n  \n\n  \n  \n  \n  \n  \n\n  \n  \n  \n  \n\n\n\n\n\n
\n  
\n    
\n      That happens not to be a page\n    
\n    
Rewind and try another one
\n  
\n
\n\n\n\n",
      "content": "\n\n\n  \n  404 | Semantic UI\n\n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n  \n  \n\n  \n  \n  \n\n  \n  \n  \n  \n\n  \n  \n\n  \n  \n  \n  \n  \n\n  \n  \n  \n  \n\n\n\n\n\n
\n  
\n    
\n      That happens not to be a page\n    
\n    
Rewind and try another one
\n  
\n
\n\n\n\n",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "404.html",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "404",
      "url": "/404.html",
      "urls": [
        "/404.html"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/CNAME",
      "relativePath": "CNAME",
      "basename": "CNAME",
      "outBasename": "CNAME",
      "extension": null,
      "outExtension": null,
      "extensions": [],
      "filename": "CNAME",
      "fullDirPath": "/home/jack/projects/semantic/server/files",
      "outPath": "/home/jack/projects/semantic/docs/CNAME",
      "outDirPath": "/home/jack/projects/semantic/docs",
      "outFilename": "CNAME",
      "relativeOutPath": "CNAME",
      "relativeDirPath": ".",
      "relativeOutDirPath": ".",
      "relativeBase": "CNAME",
      "relativeOutBase": "CNAME",
      "contentType": "application/octet-stream",
      "outContentType": "application/octet-stream",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:28.775Z",
      "exists": true,
      "encoding": "utf8",
      "source": "semantic-ui.com",
      "content": "semantic-ui.com",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "CNAME",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "CNAME",
      "url": "/CNAME",
      "urls": [
        "/CNAME"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/api.json",
      "relativePath": "api.json",
      "basename": "api",
      "outBasename": "api",
      "extension": "json",
      "outExtension": "json",
      "extensions": [
        "json"
      ],
      "filename": "api.json",
      "fullDirPath": "/home/jack/projects/semantic/server/files",
      "outPath": "/home/jack/projects/semantic/docs/api.json",
      "outDirPath": "/home/jack/projects/semantic/docs",
      "outFilename": "api.json",
      "relativeOutPath": "api.json",
      "relativeDirPath": ".",
      "relativeOutDirPath": ".",
      "relativeBase": "api",
      "relativeOutBase": "api",
      "contentType": "application/json",
      "outContentType": "application/json",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:28.778Z",
      "exists": true,
      "encoding": "utf8",
      "source": "{\n  \"success\": true\n}",
      "content": "{\n  \"success\": true\n}",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "api.json",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "api",
      "url": "/api.json",
      "urls": [
        "/api.json"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/crossdomain.xml",
      "relativePath": "crossdomain.xml",
      "basename": "crossdomain",
      "outBasename": "crossdomain",
      "extension": "xml",
      "outExtension": "xml",
      "extensions": [
        "xml"
      ],
      "filename": "crossdomain.xml",
      "fullDirPath": "/home/jack/projects/semantic/server/files",
      "outPath": "/home/jack/projects/semantic/docs/crossdomain.xml",
      "outDirPath": "/home/jack/projects/semantic/docs",
      "outFilename": "crossdomain.xml",
      "relativeOutPath": "crossdomain.xml",
      "relativeDirPath": ".",
      "relativeOutDirPath": ".",
      "relativeBase": "crossdomain",
      "relativeOutBase": "crossdomain",
      "contentType": "application/xml",
      "outContentType": "application/xml",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:28.780Z",
      "exists": true,
      "encoding": "utf8",
      "source": "\n\n\n    \n\n    \n    \n\n    \n    \n\n",
      "content": "\n\n\n    \n\n    \n    \n\n    \n    \n\n",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "crossdomain.xml",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "crossdomain",
      "url": "/crossdomain.xml",
      "urls": [
        "/crossdomain.xml"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/favicon.ico",
      "relativePath": "favicon.ico",
      "basename": "favicon",
      "outBasename": "favicon",
      "extension": "ico",
      "outExtension": "ico",
      "extensions": [
        "ico"
      ],
      "filename": "favicon.ico",
      "fullDirPath": "/home/jack/projects/semantic/server/files",
      "outPath": "/home/jack/projects/semantic/docs/favicon.ico",
      "outDirPath": "/home/jack/projects/semantic/docs",
      "outFilename": "favicon.ico",
      "relativeOutPath": "favicon.ico",
      "relativeDirPath": ".",
      "relativeOutDirPath": ".",
      "relativeBase": "favicon",
      "relativeOutBase": "favicon",
      "contentType": "image/x-icon",
      "outContentType": "image/x-icon",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:28.783Z",
      "exists": true,
      "encoding": "binary",
      "source": "",
      "content": "",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "favicon.ico",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "favicon",
      "url": "/favicon.ico",
      "urls": [
        "/favicon.ico"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/humans.txt",
      "relativePath": "humans.txt",
      "basename": "humans",
      "outBasename": "humans",
      "extension": "txt",
      "outExtension": "txt",
      "extensions": [
        "txt"
      ],
      "filename": "humans.txt",
      "fullDirPath": "/home/jack/projects/semantic/server/files",
      "outPath": "/home/jack/projects/semantic/docs/humans.txt",
      "outDirPath": "/home/jack/projects/semantic/docs",
      "outFilename": "humans.txt",
      "relativeOutPath": "humans.txt",
      "relativeDirPath": ".",
      "relativeOutDirPath": ".",
      "relativeBase": "humans",
      "relativeOutBase": "humans",
      "contentType": "text/plain",
      "outContentType": "text/plain",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:28.786Z",
      "exists": true,
      "encoding": "utf8",
      "source": "# humanstxt.org/\n# The humans responsible & technology colophon\n\n# TEAM\n\n    jack Lukic - Developer\n\n# THANKS\n\n   Quirky Inc\n\n# TECHNOLOGY COLOPHON\n\n    HTML5, CSS3\n    jQuery\n",
      "content": "# humanstxt.org/\n# The humans responsible & technology colophon\n\n# TEAM\n\n    jack Lukic - Developer\n\n# THANKS\n\n   Quirky Inc\n\n# TECHNOLOGY COLOPHON\n\n    HTML5, CSS3\n    jQuery\n",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "humans.txt",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "humans",
      "url": "/humans.txt",
      "urls": [
        "/humans.txt"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/robots.txt",
      "relativePath": "robots.txt",
      "basename": "robots",
      "outBasename": "robots",
      "extension": "txt",
      "outExtension": "txt",
      "extensions": [
        "txt"
      ],
      "filename": "robots.txt",
      "fullDirPath": "/home/jack/projects/semantic/server/files",
      "outPath": "/home/jack/projects/semantic/docs/robots.txt",
      "outDirPath": "/home/jack/projects/semantic/docs",
      "outFilename": "robots.txt",
      "relativeOutPath": "robots.txt",
      "relativeDirPath": ".",
      "relativeOutDirPath": ".",
      "relativeBase": "robots",
      "relativeOutBase": "robots",
      "contentType": "text/plain",
      "outContentType": "text/plain",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:04.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:28.788Z",
      "exists": true,
      "encoding": "utf8",
      "source": "# robotstxt.org/\n\nUser-agent: *\n",
      "content": "# robotstxt.org/\n\nUser-agent: *\n",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "robots.txt",
      "date": "2013-12-02T15:39:04.000Z",
      "slug": "robots",
      "url": "/robots.txt",
      "urls": [
        "/robots.txt"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/draft/carousel.js",
      "relativePath": "draft/carousel.js",
      "basename": "carousel",
      "outBasename": "carousel",
      "extension": "js",
      "outExtension": "js",
      "extensions": [
        "js"
      ],
      "filename": "carousel.js",
      "fullDirPath": "/home/jack/projects/semantic/server/files/draft",
      "outPath": "/home/jack/projects/semantic/docs/draft/carousel.js",
      "outDirPath": "/home/jack/projects/semantic/docs/draft",
      "outFilename": "carousel.js",
      "relativeOutPath": "draft/carousel.js",
      "relativeDirPath": "draft",
      "relativeOutDirPath": "draft",
      "relativeBase": "draft/carousel",
      "relativeOutBase": "draft/carousel",
      "contentType": "application/javascript",
      "outContentType": "application/javascript",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:28.790Z",
      "exists": true,
      "encoding": "utf8",
      "source": "/*  ******************************\n  Semantic Module: Carousel\n  Author: Jack Lukic\n  Notes: First Commit May 28, 2013\n\n  A carousel alternates between\n  several pieces of content in sequence.\n\n******************************  */\n\n;(function ( $, window, document, undefined ) {\n\n$.fn.carousel = function(parameters) {\n  var\n    $allModules     = $(this),\n\n    settings        = $.extend(true, {}, $.fn.carousel.settings, parameters),\n\n    eventNamespace  = '.' + settings.namespace,\n    moduleNamespace = 'module-' + settings.namespace,\n    moduleSelector  = $allModules.selector || '',\n\n    time            = new Date().getTime(),\n    performance     = [],\n\n    query           = arguments[0],\n    methodInvoked   = (typeof query == 'string'),\n    queryArguments  = [].slice.call(arguments, 1),\n    returnedValue\n  ;\n\n  $allModules\n    .each(function() {\n      var\n        $module     = $(this),\n        $arrows     = $(settings.selector.arrows),\n        $leftArrow  = $(settings.selector.leftArrow),\n        $rightArrow = $(settings.selector.rightArrow),\n        $content    = $(settings.selector.content),\n        $navigation = $(settings.selector.navigation),\n        $navItem    = $(settings.selector.navItem),\n\n        selector    = $module.selector || '',\n        element     = this,\n        instance    = $module.data('module-' + settings.namespace),\n\n        className   = settings.className,\n        namespace   = settings.namespace,\n        errors      = settings.errors,\n        module\n      ;\n\n      module      = {\n\n        initialize: function() {\n          module.openingAnimation();\n          module.marquee.autoAdvance();\n          $leftArrow\n            .on('click', module.marquee.left)\n          ;\n          $rightArrow\n            .on('click', module.marquee.right)\n          ;\n          $navItem\n            .on('click', module.marquee.change)\n          ;\n        },\n\n        destroy: function() {\n          module.verbose('Destroying previous module for', $module);\n          $module\n            .off(eventNamespace)\n          ;\n        },\n\n        left: function() {\n          var\n            $activeContent = $content.filter('.' + className.active),\n            currentIndex   = $content.index($activeContent),\n            imageCount     = $content.size(),\n            newIndex       = (currentIndex - 1 != -1)\n              ? (currentIndex - 1)\n              : (imageCount - 1)\n          ;\n          $navItem\n            .eq(newIndex)\n              .trigger('click')\n          ;\n        },\n\n        right: function() {\n          var\n            $activeContent = $content.filter('.' + className.active),\n            currentIndex   = $content.index($activeContent),\n            imageCount     = $content.size(),\n            newIndex       = (currentIndex + 1 != imageCount)\n              ? (currentIndex + 1)\n              : 0\n          ;\n          $navItem\n            .eq(newIndex)\n              .trigger('click')\n          ;\n        },\n\n        change: function() {\n          var\n            $selected      = $(this),\n            selectedIndex  = $navItem.index($selected),\n            $selectedImage = $content.eq(selectedIndex)\n          ;\n          module.marquee.autoAdvance();\n          $selected\n            .addClass('active')\n            .siblings()\n              .removeClass('active')\n          ;\n          $selectedImage\n            .addClass('active animated fadeIn')\n            .siblings('.' + className.active)\n              .removeClass('animated fadeIn scaleIn')\n              .animate({\n                opacity: 0\n              }, 500, function(){\n                $(this)\n                  .removeClass('active')\n                  .removeAttr('style')\n                ;\n              })\n          ;\n        },\n\n        autoAdvance: function() {\n          clearInterval(module.timer);\n          module.timer = setInterval(module.marquee.right, settings.duration);\n        },\n\n        setting: function(name, value) {\n          if(value !== undefined) {\n            if( $.isPlainObject(name) ) {\n              module.verbose('Modifying settings object', name, value);\n              $.extend(true, settings, name);\n            }\n            else {\n              module.verbose('Modifying setting', name, value);\n              settings[name] = value;\n            }\n          }\n          else {\n            return settings[name];\n          }\n        },\n        internal: function(name, value) {\n          if(value !== undefined) {\n            if( $.isPlainObject(name) ) {\n              module.verbose('Modifying internal property', name, value);\n              $.extend(true, module, name);\n            }\n            else {\n              module.verbose('Changing internal method to', value);\n              module[name] = value;\n            }\n          }\n          else {\n            return module[name];\n          }\n        },\n        debug: function() {\n          if(settings.debug) {\n            if(settings.performance) {\n              module.performance.log(arguments);\n            }\n            else {\n              module.debug = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');\n              module.debug.apply(console, arguments);\n            }\n          }\n        },\n        verbose: function() {\n          if(settings.verbose && settings.debug) {\n            if(settings.performance) {\n              module.performance.log(arguments);\n            }\n            else {\n              module.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');\n              module.verbose.apply(console, arguments);\n            }\n          }\n        },\n        error: function() {\n          module.error = Function.prototype.bind.call(console.error, console, settings.moduleName + ':');\n          module.error.apply(console, arguments);\n        },\n        performance: {\n          log: function(message) {\n            var\n              currentTime,\n              executionTime,\n              previousTime\n            ;\n            if(settings.performance) {\n              currentTime   = new Date().getTime();\n              previousTime  = time || currentTime;\n              executionTime = currentTime - previousTime;\n              time          = currentTime;\n              performance.push({\n                'Element'        : element,\n                'Name'           : message[0],\n                'Arguments'      : message[1] || 'None',\n                'Execution Time' : executionTime\n              });\n              clearTimeout(module.performance.timer);\n              module.performance.timer = setTimeout(module.performance.display, 100);\n            }\n          },\n          display: function() {\n            var\n              title              = settings.moduleName,\n              caption            = settings.moduleName + ': ' + moduleSelector + '(' + $allModules.size() + ' elements)',\n              totalExecutionTime = 0\n            ;\n            if(moduleSelector) {\n              title += ' Performance (' + moduleSelector + ')';\n            }\n            if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {\n              console.groupCollapsed(title);\n              if(console.table) {\n                $.each(performance, function(index, data) {\n                  totalExecutionTime += data['Execution Time'];\n                });\n                console.table(performance);\n              }\n              else {\n                $.each(performance, function(index, data) {\n                  totalExecutionTime += data['Execution Time'];\n                  console.log(data['Name'] + ': ' + data['Execution Time']+'ms');\n                });\n              }\n              console.log('Total Execution Time:', totalExecutionTime +'ms');\n              console.groupEnd();\n              performance = [];\n              time        = false;\n            }\n          }\n        },\n        invoke: function(query, passedArguments, context) {\n          var\n            maxDepth,\n            found\n          ;\n          passedArguments = passedArguments || queryArguments;\n          context         = element         || context;\n          if(typeof query == 'string' && instance !== undefined) {\n            query    = query.split(/[\\. ]/);\n            maxDepth = query.length - 1;\n            $.each(query, function(depth, value) {\n              if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) {\n                instance = instance[value];\n                return true;\n              }\n              else if( instance[value] !== undefined ) {\n                found = instance[value];\n                return true;\n              }\n              module.error(errors.method);\n              return false;\n            });\n          }\n          if ( $.isFunction( found ) ) {\n            return found.apply(context, passedArguments);\n          }\n          return found || false;\n        }\n      };\n\n      if(methodInvoked) {\n        if(instance === undefined) {\n          module.initialize();\n        }\n        module.invoke(query);\n      }\n      else {\n        if(instance !== undefined) {\n          module.destroy();\n        }\n        module.initialize();\n      }\n    })\n  ;\n  return (returnedValue !== undefined)\n    ? returnedValue\n    : this\n  ;\n};\n\n$.fn.carousel.settings = {\n\n  name  : 'Carousel',\n  namespace   : 'carousel',\n\n  verbose     : true,\n  debug       : true,\n  performance : true,\n\n  // delegated event context\n  duration: 5000,\n\n  errors     : {\n    method   : 'The method you called is not defined.'\n  },\n\n  selector : {\n    arrows     : '.arrow',\n    leftArrow  : '.left.arrow',\n    rightArrow : '.right.arrow',\n    content    : '.content',\n    navigation : '.navigation',\n    navItem    : '.navigation .icon'\n  },\n\n  className : {\n    active : 'active'\n  }\n\n};\n\n})( jQuery, window , document );",
      "content": "/*  ******************************\n  Semantic Module: Carousel\n  Author: Jack Lukic\n  Notes: First Commit May 28, 2013\n\n  A carousel alternates between\n  several pieces of content in sequence.\n\n******************************  */\n\n;(function ( $, window, document, undefined ) {\n\n$.fn.carousel = function(parameters) {\n  var\n    $allModules     = $(this),\n\n    settings        = $.extend(true, {}, $.fn.carousel.settings, parameters),\n\n    eventNamespace  = '.' + settings.namespace,\n    moduleNamespace = 'module-' + settings.namespace,\n    moduleSelector  = $allModules.selector || '',\n\n    time            = new Date().getTime(),\n    performance     = [],\n\n    query           = arguments[0],\n    methodInvoked   = (typeof query == 'string'),\n    queryArguments  = [].slice.call(arguments, 1),\n    returnedValue\n  ;\n\n  $allModules\n    .each(function() {\n      var\n        $module     = $(this),\n        $arrows     = $(settings.selector.arrows),\n        $leftArrow  = $(settings.selector.leftArrow),\n        $rightArrow = $(settings.selector.rightArrow),\n        $content    = $(settings.selector.content),\n        $navigation = $(settings.selector.navigation),\n        $navItem    = $(settings.selector.navItem),\n\n        selector    = $module.selector || '',\n        element     = this,\n        instance    = $module.data('module-' + settings.namespace),\n\n        className   = settings.className,\n        namespace   = settings.namespace,\n        errors      = settings.errors,\n        module\n      ;\n\n      module      = {\n\n        initialize: function() {\n          module.openingAnimation();\n          module.marquee.autoAdvance();\n          $leftArrow\n            .on('click', module.marquee.left)\n          ;\n          $rightArrow\n            .on('click', module.marquee.right)\n          ;\n          $navItem\n            .on('click', module.marquee.change)\n          ;\n        },\n\n        destroy: function() {\n          module.verbose('Destroying previous module for', $module);\n          $module\n            .off(eventNamespace)\n          ;\n        },\n\n        left: function() {\n          var\n            $activeContent = $content.filter('.' + className.active),\n            currentIndex   = $content.index($activeContent),\n            imageCount     = $content.size(),\n            newIndex       = (currentIndex - 1 != -1)\n              ? (currentIndex - 1)\n              : (imageCount - 1)\n          ;\n          $navItem\n            .eq(newIndex)\n              .trigger('click')\n          ;\n        },\n\n        right: function() {\n          var\n            $activeContent = $content.filter('.' + className.active),\n            currentIndex   = $content.index($activeContent),\n            imageCount     = $content.size(),\n            newIndex       = (currentIndex + 1 != imageCount)\n              ? (currentIndex + 1)\n              : 0\n          ;\n          $navItem\n            .eq(newIndex)\n              .trigger('click')\n          ;\n        },\n\n        change: function() {\n          var\n            $selected      = $(this),\n            selectedIndex  = $navItem.index($selected),\n            $selectedImage = $content.eq(selectedIndex)\n          ;\n          module.marquee.autoAdvance();\n          $selected\n            .addClass('active')\n            .siblings()\n              .removeClass('active')\n          ;\n          $selectedImage\n            .addClass('active animated fadeIn')\n            .siblings('.' + className.active)\n              .removeClass('animated fadeIn scaleIn')\n              .animate({\n                opacity: 0\n              }, 500, function(){\n                $(this)\n                  .removeClass('active')\n                  .removeAttr('style')\n                ;\n              })\n          ;\n        },\n\n        autoAdvance: function() {\n          clearInterval(module.timer);\n          module.timer = setInterval(module.marquee.right, settings.duration);\n        },\n\n        setting: function(name, value) {\n          if(value !== undefined) {\n            if( $.isPlainObject(name) ) {\n              module.verbose('Modifying settings object', name, value);\n              $.extend(true, settings, name);\n            }\n            else {\n              module.verbose('Modifying setting', name, value);\n              settings[name] = value;\n            }\n          }\n          else {\n            return settings[name];\n          }\n        },\n        internal: function(name, value) {\n          if(value !== undefined) {\n            if( $.isPlainObject(name) ) {\n              module.verbose('Modifying internal property', name, value);\n              $.extend(true, module, name);\n            }\n            else {\n              module.verbose('Changing internal method to', value);\n              module[name] = value;\n            }\n          }\n          else {\n            return module[name];\n          }\n        },\n        debug: function() {\n          if(settings.debug) {\n            if(settings.performance) {\n              module.performance.log(arguments);\n            }\n            else {\n              module.debug = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');\n              module.debug.apply(console, arguments);\n            }\n          }\n        },\n        verbose: function() {\n          if(settings.verbose && settings.debug) {\n            if(settings.performance) {\n              module.performance.log(arguments);\n            }\n            else {\n              module.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');\n              module.verbose.apply(console, arguments);\n            }\n          }\n        },\n        error: function() {\n          module.error = Function.prototype.bind.call(console.error, console, settings.moduleName + ':');\n          module.error.apply(console, arguments);\n        },\n        performance: {\n          log: function(message) {\n            var\n              currentTime,\n              executionTime,\n              previousTime\n            ;\n            if(settings.performance) {\n              currentTime   = new Date().getTime();\n              previousTime  = time || currentTime;\n              executionTime = currentTime - previousTime;\n              time          = currentTime;\n              performance.push({\n                'Element'        : element,\n                'Name'           : message[0],\n                'Arguments'      : message[1] || 'None',\n                'Execution Time' : executionTime\n              });\n              clearTimeout(module.performance.timer);\n              module.performance.timer = setTimeout(module.performance.display, 100);\n            }\n          },\n          display: function() {\n            var\n              title              = settings.moduleName,\n              caption            = settings.moduleName + ': ' + moduleSelector + '(' + $allModules.size() + ' elements)',\n              totalExecutionTime = 0\n            ;\n            if(moduleSelector) {\n              title += ' Performance (' + moduleSelector + ')';\n            }\n            if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {\n              console.groupCollapsed(title);\n              if(console.table) {\n                $.each(performance, function(index, data) {\n                  totalExecutionTime += data['Execution Time'];\n                });\n                console.table(performance);\n              }\n              else {\n                $.each(performance, function(index, data) {\n                  totalExecutionTime += data['Execution Time'];\n                  console.log(data['Name'] + ': ' + data['Execution Time']+'ms');\n                });\n              }\n              console.log('Total Execution Time:', totalExecutionTime +'ms');\n              console.groupEnd();\n              performance = [];\n              time        = false;\n            }\n          }\n        },\n        invoke: function(query, passedArguments, context) {\n          var\n            maxDepth,\n            found\n          ;\n          passedArguments = passedArguments || queryArguments;\n          context         = element         || context;\n          if(typeof query == 'string' && instance !== undefined) {\n            query    = query.split(/[\\. ]/);\n            maxDepth = query.length - 1;\n            $.each(query, function(depth, value) {\n              if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) {\n                instance = instance[value];\n                return true;\n              }\n              else if( instance[value] !== undefined ) {\n                found = instance[value];\n                return true;\n              }\n              module.error(errors.method);\n              return false;\n            });\n          }\n          if ( $.isFunction( found ) ) {\n            return found.apply(context, passedArguments);\n          }\n          return found || false;\n        }\n      };\n\n      if(methodInvoked) {\n        if(instance === undefined) {\n          module.initialize();\n        }\n        module.invoke(query);\n      }\n      else {\n        if(instance !== undefined) {\n          module.destroy();\n        }\n        module.initialize();\n      }\n    })\n  ;\n  return (returnedValue !== undefined)\n    ? returnedValue\n    : this\n  ;\n};\n\n$.fn.carousel.settings = {\n\n  name  : 'Carousel',\n  namespace   : 'carousel',\n\n  verbose     : true,\n  debug       : true,\n  performance : true,\n\n  // delegated event context\n  duration: 5000,\n\n  errors     : {\n    method   : 'The method you called is not defined.'\n  },\n\n  selector : {\n    arrows     : '.arrow',\n    leftArrow  : '.left.arrow',\n    rightArrow : '.right.arrow',\n    content    : '.content',\n    navigation : '.navigation',\n    navItem    : '.navigation .icon'\n  },\n\n  className : {\n    active : 'active'\n  }\n\n};\n\n})( jQuery, window , document );",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "carousel.js",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "draft-carousel",
      "url": "/draft/carousel.js",
      "urls": [
        "/draft/carousel.js"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/draft/carousel.less",
      "relativePath": "draft/carousel.less",
      "basename": "carousel",
      "outBasename": "carousel",
      "extension": "less",
      "outExtension": "less",
      "extensions": [
        "less"
      ],
      "filename": "carousel.less",
      "fullDirPath": "/home/jack/projects/semantic/server/files/draft",
      "outPath": "/home/jack/projects/semantic/docs/draft/carousel.less",
      "outDirPath": "/home/jack/projects/semantic/docs/draft",
      "outFilename": "carousel.less",
      "relativeOutPath": "draft/carousel.less",
      "relativeDirPath": "draft",
      "relativeOutDirPath": "draft",
      "relativeBase": "draft/carousel",
      "relativeOutBase": "draft/carousel",
      "contentType": "application/octet-stream",
      "outContentType": "application/octet-stream",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": "2013-12-04T09:15:23.206Z",
      "wtime": "2013-12-04T09:15:28.793Z",
      "exists": true,
      "encoding": "utf8",
      "source": "/*\n * # Semantic Carousel\n * http://github.com/quirkyinc/semantic\n *\n *\n * Copyright 2013 Contributors\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n * Released: June 03, 2013\n */\n\n\n/*******************************\n            Carousel\n*******************************/\n\n.ui.carousel {\n  position: relative;\n  overflow: hidden;\n}\n.ui.carousel .arrow {\n  position: absolute;\n  font-size: 1.5em;\n  top: 50%;\n  left: 0%;\n  margin-top: -0.5em;\n  z-index: 10;\n}\n.ui.carousel .right.arrow {\n  left: auto;\n  right: 0%;\n}\n\n.ui.carousel .slides {\n  position: relative;\n  width: 200%;\n  width: 9999px;\n  overflow: hidden;\n  font-size: 0em;\n}\n.ui.carousel .slides .slide {\n  display: inline-block;\n  height: 100%;\n  font-size: 1rem;\n}\n.ui.carousel .slides .slide > img {\n  display: block;\n  width: 100%;\n}\n\n\n/*--------------------\n     Loading State\n---------------------*/\n\n/* On Form */\n.ui.carousel.loading {\n  position: relative;\n}\n.ui.carousel.loading:after {\n  position: absolute;\n  top: 0%;\n  left: 0%;\n  content: '';\n\n  width: 100%;\n  height: 100%;\n  background: rgba(255, 255, 255, 0.8) url(../images/loader-large.gif) no-repeat 50% 50%;\n  visibility: visible;\n}",
      "content": "/*\n * # Semantic Carousel\n * http://github.com/quirkyinc/semantic\n *\n *\n * Copyright 2013 Contributors\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n * Released: June 03, 2013\n */\n\n\n/*******************************\n            Carousel\n*******************************/\n\n.ui.carousel {\n  position: relative;\n  overflow: hidden;\n}\n.ui.carousel .arrow {\n  position: absolute;\n  font-size: 1.5em;\n  top: 50%;\n  left: 0%;\n  margin-top: -0.5em;\n  z-index: 10;\n}\n.ui.carousel .right.arrow {\n  left: auto;\n  right: 0%;\n}\n\n.ui.carousel .slides {\n  position: relative;\n  width: 200%;\n  width: 9999px;\n  overflow: hidden;\n  font-size: 0em;\n}\n.ui.carousel .slides .slide {\n  display: inline-block;\n  height: 100%;\n  font-size: 1rem;\n}\n.ui.carousel .slides .slide > img {\n  display: block;\n  width: 100%;\n}\n\n\n/*--------------------\n     Loading State\n---------------------*/\n\n/* On Form */\n.ui.carousel.loading {\n  position: relative;\n}\n.ui.carousel.loading:after {\n  position: absolute;\n  top: 0%;\n  left: 0%;\n  content: '';\n\n  width: 100%;\n  height: 100%;\n  background: rgba(255, 255, 255, 0.8) url(../images/loader-large.gif) no-repeat 50% 50%;\n  visibility: visible;\n}",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "carousel.less",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "draft-carousel",
      "url": "/draft/carousel.less",
      "urls": [
        "/draft/carousel.less"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": true,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/draft/extra.transitions.less",
      "relativePath": "draft/extra.transitions.less",
      "basename": "extra",
      "outBasename": "extra",
      "extension": "less",
      "outExtension": "less",
      "extensions": [
        "transitions",
        "less"
      ],
      "filename": "extra.transitions.less",
      "fullDirPath": "/home/jack/projects/semantic/server/files/draft",
      "outPath": "/home/jack/projects/semantic/docs/draft/extra.transitions.less",
      "outDirPath": "/home/jack/projects/semantic/docs/draft",
      "outFilename": "extra.transitions.less",
      "relativeOutPath": "draft/extra.transitions.less",
      "relativeDirPath": "draft",
      "relativeOutDirPath": "draft",
      "relativeBase": "draft/extra",
      "relativeOutBase": "draft/extra",
      "contentType": "application/octet-stream",
      "outContentType": "application/octet-stream",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": "2013-12-04T09:15:23.206Z",
      "wtime": "2013-12-04T09:15:28.795Z",
      "exists": true,
      "encoding": "utf8",
      "source": "/*******************************\n  Semantic Module: Transition\n  Author: Jack Lukic\n  Notes: First Commit March 25, 2013\n\n  CSS animation definitions for\n  transition module\n\n*******************************/\n\n/*\n  Some transitions adapted from Animate CSS\n  https://github.com/daneden/animate.css\n*/\n\n\n.ui.transition {\n  -webkit-backface-visibility: hidden;\n  -moz-backface-visibility: hidden;\n  -ms-backface-visibility: hidden;\n  -o-backface-visibility: hidden;\n  backface-visibility: hidden;\n\n  -webkit-animation-iteration-count: 1;\n  -moz-animation-iteration-count: 1;\n  -ms-animation-iteration-count: 1;\n  -o-animation-iteration-count: 1;\n  animation-iteration-count: 1;\n\n  -webkit-animation-duration: 1s;\n  -moz-animation-duration: 1s;\n  -ms-animation-duration: 1s;\n  -o-animation-duration: 1s;\n  animation-duration: 1s;\n\n  animation-timing-function: ease;\n  -webkit-animation-timing-function: ease;\n\n  -webkit-animation-fill-mode: both;\n  -moz-animation-fill-mode: both;\n  -ms-animation-fill-mode: both;\n  -o-animation-fill-mode: both;\n  animation-fill-mode: both;\n\n  -webkit-transform: translateZ(0);\n  -moz-transform: translateZ(0);\n  -ms-transform: translateZ(0);\n  -o-transform: translateZ(0);\n  transform: translateZ(0);\n}\n\n/*******************************\n       States\n*******************************/\n\n/* Loading */\n.ui.loading.transition {\n  position: absolute;\n  top: -999999px;\n  left: -99999px;\n}\n\n/* Hidden */\n.ui.hidden.transition {\n  display: none;\n}\n\n/* Visible */\n.ui.visible.transition {\n  display: block;\n  visibility: visible;\n}\n\n\n/* Direction */\n.ui.out.transition {\n  -webkit-animation-direction: reverse;\n  -moz-animation-direction: reverse;\n  -o-animation-direction: reverse;\n  animation-direction: reverse;\n}\n\n/* Disabled */\n.ui.disabled.transition {\n  -webkit-animation-play-state: paused;\n  -moz-animation-play-state: paused;\n  -ms-animation-play-state: paused;\n  -o-animation-play-state: paused;\n  animation-play-state: paused;\n}\n\n/*******************************\n          Variations\n*******************************/\n\n.ui.looping.transition {\n  -webkit-animation-iteration-count: infinite;\n  -moz-animation-iteration-count: infinite;\n  -ms-animation-iteration-count: infinite;\n  -o-animation-iteration-count: infinite;\n  animation-iteration-count: infinite;\n}\n\n/*******************************\n             Types\n*******************************/\n\n/*--------------\n     Moving\n---------------*/\n\n.ui.move.down.transition.in,\n.ui.move.down.transition.out {\n  animation-name: moveDown;\n  -webkit-animation-name: moveDown;\n\n  animation-duration: 1s;\n  -webkit-animation-duration: 1s;\n\n  animation-timing-function: ease;\n  -webkit-animation-timing-function: ease;\n}\n\n@keyframes moveDown {\n  0% {\n    transform: translateY(-100%);\n  }\n  50%{\n    transform: translateY(8%);\n  }\n  65%{\n    transform: translateY(-4%);\n  }\n  80%{\n    transform: translateY(4%);\n  }\n  95%{\n    transform: translateY(-2%);\n  }\n  100% {\n    transform: translateY(0%);\n  }\n}\n\n@-webkit-keyframes moveDown {\n  0% {\n    -webkit-transform: translateY(-100%);\n  }\n  50%{\n    -webkit-transform: translateY(8%);\n  }\n  65%{\n    -webkit-transform: translateY(-4%);\n  }\n  80%{\n    -webkit-transform: translateY(4%);\n  }\n  95%{\n    -webkit-transform: translateY(-2%);\n  }\n  100% {\n    -webkit-transform: translateY(0%);\n  }\n}\n\n.ui.move.up.transition.in,\n.ui.move.up.transition.out {\n  animation-name: moveUp;\n  -webkit-animation-name: moveUp;\n\n  animation-duration: 1s;\n  -webkit-animation-duration: 1s;\n\n  animation-timing-function: ease;\n  -webkit-animation-timing-function: ease;\n}\n\n@keyframes moveUp {\n  0% {\n    transform: translateY(100%);\n  }\n  50%{\n    transform: translateY(-8%);\n  }\n  65%{\n    transform: translateY(4%);\n  }\n  80%{\n    transform: translateY(-4%);\n  }\n  95%{\n    transform: translateY(2%);\n  }\n  100% {\n    transform: translateY(0%);\n  }\n}\n\n@-webkit-keyframes moveUp {\n  0% {\n    -webkit-transform: translateY(100%);\n  }\n  50%{\n    -webkit-transform: translateY(-8%);\n  }\n  65%{\n    -webkit-transform: translateY(4%);\n  }\n  80%{\n    -webkit-transform: translateY(-4%);\n  }\n  95%{\n    -webkit-transform: translateY(2%);\n  }\n  100% {\n    -webkit-transform: translateY(0%);\n  }\n}\n\n\n.ui.move.left.transition.in,\n.ui.move.left.transition.out {\n  animation-name: moveLeft;\n  -webkit-animation-name: moveLeft;\n\n  animation-duration: 1s;\n  -webkit-animation-duration: 1s;\n\n  animation-timing-function: ease-in-out;\n  -webkit-animation-timing-function: ease-in-out;\n\n  visibility: visible !important;\n}\n\n@keyframes moveLeft {\n  0% {\n    transform: translateX(150%);\n  }\n  50%{\n    ransform: translateX(-8%);\n  }\n  65%{\n    transform: translateX(4%);\n  }\n  80%{\n    transform: translateX(-4%);\n  }\n  95%{\n    transform: translateX(2%);\n  }\n  100% {\n    transform: translateX(0%);\n  }\n}\n\n@-webkit-keyframes moveLeft {\n  0% {\n    -webkit-transform: translateX(150%);\n  }\n  50%{\n    -webkit-transform: translateX(-8%);\n  }\n  65%{\n    -webkit-transform: translateX(4%);\n  }\n  80%{\n    -webkit-transform: translateX(-4%);\n  }\n  95%{\n    -webkit-transform: translateX(2%);\n  }\n  100% {\n    -webkit-transform: translateX(0%);\n  }\n}\n\n\n.ui.move.right.transition.in,\n.ui.move.right.transition.out {\n  animation-name: moveRight;\n  -webkit-animation-name: moveRight;\n\n  animation-duration: 1s;\n  -webkit-animation-duration: 1s;\n\n  animation-timing-function: ease-in-out;\n  -webkit-animation-timing-function: ease-in-out;\n\n  visibility: visible !important;\n}\n\n@keyframes moveRight {\n  0% {\n    transform: translateX(-150%);\n  }\n  50%{\n    transform: translateX(8%);\n  }\n  65%{\n    transform: translateX(-4%);\n  }\n  80%{\n    transform: translateX(4%);\n  }\n  95%{\n    transform: translateX(-2%);\n  }\n  100% {\n    transform: translateX(0%);\n  }\n}\n\n@-webkit-keyframes moveRight {\n  0% {\n    -webkit-transform: translateX(-150%);\n  }\n  50%{\n    -webkit-transform: translateX(8%);\n  }\n  65%{\n    -webkit-transform: translateX(-4%);\n  }\n  80%{\n    -webkit-transform: translateX(4%);\n  }\n  95%{\n    -webkit-transform: translateX(-2%);\n  }\n  100% {\n    -webkit-transform: translateX(0%);\n  }\n}\n\n/*\n==============================================\nslideExpandUp\n==============================================\n*/\n\n\n.slideExpandUp{\n  animation-name: slideExpandUp;\n  -webkit-animation-name: slideExpandUp;\n\n  animation-duration: 1.6s;\n  -webkit-animation-duration: 1.6s;\n\n  animation-timing-function: ease-out;\n  -webkit-animation-timing-function: ease -out;\n\n  visibility: visible !important;\n}\n\n@keyframes slideExpandUp {\n  0% {\n    transform: translateY(100%) scaleX(0.5);\n  }\n  30%{\n    transform: translateY(-8%) scaleX(0.5);\n  }\n  40%{\n    transform: translateY(2%) scaleX(0.5);\n  }\n  50%{\n    transform: translateY(0%) scaleX(1.1);\n  }\n  60%{\n    transform: translateY(0%) scaleX(0.9);\n  }\n  70% {\n    transform: translateY(0%) scaleX(1.05);\n  }\n  80%{\n    transform: translateY(0%) scaleX(0.95);\n  }\n  90% {\n    transform: translateY(0%) scaleX(1.02);\n  }\n  100%{\n    transform: translateY(0%) scaleX(1);\n  }\n}\n\n@-webkit-keyframes slideExpandUp {\n  0% {\n    -webkit-transform: translateY(100%) scaleX(0.5);\n  }\n  30%{\n    -webkit-transform: translateY(-8%) scaleX(0.5);\n  }\n  40%{\n    -webkit-transform: translateY(2%) scaleX(0.5);\n  }\n  50%{\n    -webkit-transform: translateY(0%) scaleX(1.1);\n  }\n  60%{\n    -webkit-transform: translateY(0%) scaleX(0.9);\n  }\n  70% {\n    -webkit-transform: translateY(0%) scaleX(1.05);\n  }\n  80%{\n    -webkit-transform: translateY(0%) scaleX(0.95);\n  }\n  90% {\n    -webkit-transform: translateY(0%) scaleX(1.02);\n  }\n  100%{\n    -webkit-transform: translateY(0%) scaleX(1);\n  }\n}\n\n/*\n==============================================\nexpandUp\n==============================================\n*/\n\n\n.expandUp{\n  animation-name: expandUp;\n  -webkit-animation-name: expandUp;\n\n  animation-duration: 0.7s;\n  -webkit-animation-duration: 0.7s;\n\n  animation-timing-function: ease;\n  -webkit-animation-timing-function: ease;\n\n  visibility: visible !important;\n}\n\n@keyframes expandUp {\n  0% {\n    transform: translateY(100%) scale(0.6) scaleY(0.5);\n  }\n  60%{\n    transform: translateY(-7%) scaleY(1.12);\n  }\n  75%{\n    transform: translateY(3%);\n  }\n  100% {\n    transform: translateY(0%) scale(1) scaleY(1);\n  }\n}\n\n@-webkit-keyframes expandUp {\n  0% {\n    -webkit-transform: translateY(100%) scale(0.6) scaleY(0.5);\n  }\n  60%{\n    -webkit-transform: translateY(-7%) scaleY(1.12);\n  }\n  75%{\n    -webkit-transform: translateY(3%);\n  }\n  100% {\n    -webkit-transform: translateY(0%) scale(1) scaleY(1);\n  }\n}\n\n/*\n==============================================\nfadeIn\n==============================================\n*/\n\n.fadeIn{\n  animation-name: fadeIn;\n  -webkit-animation-name: fadeIn;\n\n  animation-duration: 1.5s;\n  -webkit-animation-duration: 1.5s;\n\n  animation-timing-function: ease-in-out;\n  -webkit-animation-timing-function: ease-in-out;\n\n  visibility: visible !important;\n}\n\n@keyframes fadeIn {\n  0% {\n    transform: scale(0);\n    opacity: 0.0;\n  }\n  60% {\n    transform: scale(1.1);\n  }\n  80% {\n    transform: scale(0.9);\n    opacity: 1;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n@-webkit-keyframes fadeIn {\n  0% {\n    -webkit-transform: scale(0);\n    opacity: 0.0;\n  }\n  60% {\n    -webkit-transform: scale(1.1);\n  }\n  80% {\n    -webkit-transform: scale(0.9);\n    opacity: 1;\n  }\n  100% {\n    -webkit-transform: scale(1);\n    opacity: 1;\n  }\n}\n\n/*\n==============================================\nexpandOpen\n==============================================\n*/\n\n\n.expandOpen{\n  animation-name: expandOpen;\n  -webkit-animation-name: expandOpen;\n\n  animation-duration: 1.2s;\n  -webkit-animation-duration: 1.2s;\n\n  animation-timing-function: ease-out;\n  -webkit-animation-timing-function: ease-out;\n\n  visibility: visible !important;\n}\n\n@keyframes expandOpen {\n  0% {\n    transform: scale(1.8);\n  }\n  50% {\n    transform: scale(0.95);\n  }\n  80% {\n    transform: scale(1.05);\n  }\n  90% {\n    transform: scale(0.98);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n\n@-webkit-keyframes expandOpen {\n  0% {\n    -webkit-transform: scale(1.8);\n  }\n  50% {\n    -webkit-transform: scale(0.95);\n  }\n  80% {\n    -webkit-transform: scale(1.05);\n  }\n  90% {\n    -webkit-transform: scale(0.98);\n  }\n  100% {\n    -webkit-transform: scale(1);\n  }\n}\n\n/*\n==============================================\nbigEntrance\n==============================================\n*/\n\n\n.bigEntrance{\n  animation-name: bigEntrance;\n  -webkit-animation-name: bigEntrance;\n\n  animation-duration: 1.6s;\n  -webkit-animation-duration: 1.6s;\n\n  animation-timing-function: ease-out;\n  -webkit-animation-timing-function: ease-out;\n\n  visibility: visible !important;\n}\n\n@keyframes bigEntrance {\n  0% {\n    transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);\n    opacity: 0.2;\n  }\n  30% {\n    transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);\n    opacity: 1;\n  }\n  45% {\n    transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);\n    opacity: 1;\n  }\n  60% {\n    transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);\n    opacity: 1;\n  }\n  75% {\n    transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);\n    opacity: 1;\n  }\n  90% {\n    transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);\n    opacity: 1;\n  }\n  100% {\n    transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);\n    opacity: 1;\n  }\n}\n\n@-webkit-keyframes bigEntrance {\n  0% {\n    -webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);\n    opacity: 0.2;\n  }\n  30% {\n    -webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);\n    opacity: 1;\n  }\n  45% {\n    -webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);\n    opacity: 1;\n  }\n  60% {\n    -webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);\n    opacity: 1;\n  }\n  75% {\n    -webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);\n    opacity: 1;\n  }\n  90% {\n    -webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);\n    opacity: 1;\n  }\n  100% {\n    -webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);\n    opacity: 1;\n  }\n}\n\n/*\n==============================================\nhatch\n==============================================\n*/\n\n.hatch{\n  animation-name: hatch;\n  -webkit-animation-name: hatch;\n\n  animation-duration: 2s;\n  -webkit-animation-duration: 2s;\n\n  animation-timing-function: ease-in-out;\n  -webkit-animation-timing-function: ease-in-out;\n\n  transform-origin: 50% 100%;\n  -ms-transform-origin: 50% 100%;\n  -webkit-transform-origin: 50% 100%;\n\n  visibility: visible !important;\n}\n\n@keyframes hatch {\n  0% {\n    transform: rotate(0deg) scaleY(0.6);\n  }\n  20% {\n    transform: rotate(-2deg) scaleY(1.05);\n  }\n  35% {\n    transform: rotate(2deg) scaleY(1);\n  }\n  50% {\n    transform: rotate(-2deg);\n  }\n  65% {\n    transform: rotate(1deg);\n  }\n  80% {\n    transform: rotate(-1deg);\n  }\n  100% {\n    transform: rotate(0deg);\n  }\n}\n\n@-webkit-keyframes hatch {\n  0% {\n    -webkit-transform: rotate(0deg) scaleY(0.6);\n  }\n  20% {\n    -webkit-transform: rotate(-2deg) scaleY(1.05);\n  }\n  35% {\n    -webkit-transform: rotate(2deg) scaleY(1);\n  }\n  50% {\n    -webkit-transform: rotate(-2deg);\n  }\n  65% {\n    -webkit-transform: rotate(1deg);\n  }\n  80% {\n    -webkit-transform: rotate(-1deg);\n  }\n  100% {\n    -webkit-transform: rotate(0deg);\n  }\n}\n\n\n/*\n==============================================\nbounce\n==============================================\n*/\n\n\n.bounce{\n  animation-name: bounce;\n  -webkit-animation-name: bounce;\n\n  animation-duration: 1.6s;\n  -webkit-animation-duration: 1.6s;\n\n  animation-timing-function: ease;\n  -webkit-animation-timing-function: ease;\n\n  transform-origin: 50% 100%;\n  -ms-transform-origin: 50% 100%;\n  -webkit-transform-origin: 50% 100%;\n}\n\n@keyframes bounce {\n  0% {\n    transform: translateY(0%) scaleY(0.6);\n  }\n  60%{\n    transform: translateY(-100%) scaleY(1.1);\n  }\n  70%{\n    transform: translateY(0%) scaleY(0.95) scaleX(1.05);\n  }\n  80%{\n    transform: translateY(0%) scaleY(1.05) scaleX(1);\n  }\n  90%{\n    transform: translateY(0%) scaleY(0.95) scaleX(1);\n  }\n  100%{\n    transform: translateY(0%) scaleY(1) scaleX(1);\n  }\n}\n\n@-webkit-keyframes bounce {\n  0% {\n    -webkit-transform: translateY(0%) scaleY(0.6);\n  }\n  60%{\n    -webkit-transform: translateY(-100%) scaleY(1.1);\n  }\n  70%{\n    -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05);\n  }\n  80%{\n    -webkit-transform: translateY(0%) scaleY(1.05) scaleX(1);\n  }\n  90%{\n    -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1);\n  }\n  100%{\n    -webkit-transform: translateY(0%) scaleY(1) scaleX(1);\n  }\n}\n\n\n/*\n==============================================\npulse\n==============================================\n*/\n\n.pulse{\n  animation-name: pulse;\n  -webkit-animation-name: pulse;\n\n  animation-duration: 1.5s;\n  -webkit-animation-duration: 1.5s;\n\n  animation-iteration-count: infinite;\n  -webkit-animation-iteration-count: infinite;\n}\n\n@keyframes pulse {\n  0% {\n    transform: scale(0.9);\n    opacity: 0.7;\n  }\n  50% {\n    ransform: scale(1);\n    opacity: 1;\n  }\n  100% {\n    transform: scale(0.9);\n    opacity: 0.7;\n  }\n}\n\n@-webkit-keyframes pulse {\n  0% {\n    -webkit-transform: scale(0.95);\n    opacity: 0.7;\n  }\n  50% {\n    -webkit-transform: scale(1);\n    opacity: 1;\n  }\n  100% {\n    -webkit-transform: scale(0.95);\n    opacity: 0.7;\n  }\n}\n\n/*\n==============================================\nfloating\n==============================================\n*/\n\n.floating{\n  animation-name: floating;\n  -webkit-animation-name: floating;\n\n  animation-duration: 1.5s;\n  -webkit-animation-duration: 1.5s;\n\n  animation-iteration-count: infinite;\n  -webkit-animation-iteration-count: infinite;\n}\n\n@keyframes floating {\n  0% {\n    transform: translateY(0%);\n  }\n  50% {\n    transform: translateY(8%);\n  }\n  100% {\n    transform: translateY(0%);\n  }\n}\n\n@-webkit-keyframes floating {\n  0% {\n    -webkit-transform: translateY(0%);\n  }\n  50% {\n    -webkit-transform: translateY(8%);\n  }\n  100% {\n    -webkit-transform: translateY(0%);\n  }\n}\n\n/*\n==============================================\ntossing\n==============================================\n*/\n\n.tossing{\n  animation-name: tossing;\n  -webkit-animation-name: tossing;\n\n  animation-duration: 2.5s;\n  -webkit-animation-duration: 2.5s;\n\n  animation-iteration-count: infinite;\n  -webkit-animation-iteration-count: infinite;\n}\n\n@keyframes tossing {\n  0% {\n    transform: rotate(-4deg);\n  }\n  50% {\n    transform: rotate(4deg);\n  }\n  100% {\n    transform: rotate(-4deg);\n  }\n}\n\n@-webkit-keyframes tossing {\n  0% {\n    -webkit-transform: rotate(-4deg);\n  }\n  50% {\n    -webkit-transform: rotate(4deg);\n  }\n  100% {\n    -webkit-transform: rotate(-4deg);\n  }\n}\n\n/*\n==============================================\npullUp\n==============================================\n*/\n\n.pullUp{\n  animation-name: pullUp;\n  -webkit-animation-name: pullUp;\n\n  animation-duration: 1.1s;\n  -webkit-animation-duration: 1.1s;\n\n  animation-timing-function: ease-out;\n  -webkit-animation-timing-function: ease-out;\n\n  transform-origin: 50% 100%;\n  -ms-transform-origin: 50% 100%;\n  -webkit-transform-origin: 50% 100%;\n}\n\n@keyframes pullUp {\n  0% {\n    transform: scaleY(0.1);\n  }\n  40% {\n    transform: scaleY(1.02);\n  }\n  60% {\n    transform: scaleY(0.98);\n  }\n  80% {\n    transform: scaleY(1.01);\n  }\n  100% {\n    transform: scaleY(0.98);\n  }\n  80% {\n    transform: scaleY(1.01);\n  }\n  100% {\n    transform: scaleY(1);\n  }\n}\n\n@-webkit-keyframes pullUp {\n  0% {\n    -webkit-transform: scaleY(0.1);\n  }\n  40% {\n    -webkit-transform: scaleY(1.02);\n  }\n  60% {\n    -webkit-transform: scaleY(0.98);\n  }\n  80% {\n    -webkit-transform: scaleY(1.01);\n  }\n  100% {\n    -webkit-transform: scaleY(0.98);\n  }\n  80% {\n    -webkit-transform: scaleY(1.01);\n  }\n  100% {\n    -webkit-transform: scaleY(1);\n  }\n}\n\n/*\n==============================================\npullDown\n==============================================\n*/\n\n.pullDown{\n  animation-name: pullDown;\n  -webkit-animation-name: pullDown;\n\n  animation-duration: 1.1s;\n  -webkit-animation-duration: 1.1s;\n\n  animation-timing-function: ease-out;\n  -webkit-animation-timing-function: ease-out;\n\n  transform-origin: 50% 0%;\n  -ms-transform-origin: 50% 0%;\n  -webkit-transform-origin: 50% 0%;\n}\n\n@keyframes pullDown {\n  0% {\n    transform: scaleY(0.1);\n  }\n  40% {\n    transform: scaleY(1.02);\n  }\n  60% {\n    transform: scaleY(0.98);\n  }\n  80% {\n    transform: scaleY(1.01);\n  }\n  100% {\n    transform: scaleY(0.98);\n  }\n  80% {\n    transform: scaleY(1.01);\n  }\n  100% {\n    transform: scaleY(1);\n  }\n}\n\n@-webkit-keyframes pullDown {\n  0% {\n    -webkit-transform: scaleY(0.1);\n  }\n  40% {\n    -webkit-transform: scaleY(1.02);\n  }\n  60% {\n    -webkit-transform: scaleY(0.98);\n  }\n  80% {\n    -webkit-transform: scaleY(1.01);\n  }\n  100% {\n    -webkit-transform: scaleY(0.98);\n  }\n  80% {\n    -webkit-transform: scaleY(1.01);\n  }\n  100% {\n    -webkit-transform: scaleY(1);\n  }\n}\n\n/*\n==============================================\nstretchLeft\n==============================================\n*/\n\n.stretchLeft{\n  animation-name: stretchLeft;\n  -webkit-animation-name: stretchLeft;\n\n  animation-duration: 1.5s;\n  -webkit-animation-duration: 1.5s;\n\n  animation-timing-function: ease-out;\n  -webkit-animation-timing-function: ease-out;\n\n  transform-origin: 100% 0%;\n  -ms-transform-origin: 100% 0%;\n  -webkit-transform-origin: 100% 0%;\n}\n\n@keyframes stretchLeft {\n  0% {\n    transform: scaleX(0.3);\n  }\n  40% {\n    transform: scaleX(1.02);\n  }\n  60% {\n    transform: scaleX(0.98);\n  }\n  80% {\n    transform: scaleX(1.01);\n  }\n  100% {\n    transform: scaleX(0.98);\n  }\n  80% {\n    transform: scaleX(1.01);\n  }\n  100% {\n    transform: scaleX(1);\n  }\n}\n\n@-webkit-keyframes stretchLeft {\n  0% {\n    -webkit-transform: scaleX(0.3);\n  }\n  40% {\n    -webkit-transform: scaleX(1.02);\n  }\n  60% {\n    -webkit-transform: scaleX(0.98);\n  }\n  80% {\n    -webkit-transform: scaleX(1.01);\n  }\n  100% {\n    -webkit-transform: scaleX(0.98);\n  }\n  80% {\n    -webkit-transform: scaleX(1.01);\n  }\n  100% {\n    -webkit-transform: scaleX(1);\n  }\n}\n\n/*\n==============================================\nstretchRight\n==============================================\n*/\n\n.stretchRight{\n  animation-name: stretchRight;\n  -webkit-animation-name: stretchRight;\n\n  animation-duration: 1.5s;\n  -webkit-animation-duration: 1.5s;\n\n  animation-timing-function: ease-out;\n  -webkit-animation-timing-function: ease-out;\n\n  transform-origin: 0% 0%;\n  -ms-transform-origin: 0% 0%;\n  -webkit-transform-origin: 0% 0%;\n}\n\n@keyframes stretchRight {\n  0% {\n    transform: scaleX(0.3);\n  }\n  40% {\n    transform: scaleX(1.02);\n  }\n  60% {\n    transform: scaleX(0.98);\n  }\n  80% {\n    transform: scaleX(1.01);\n  }\n  100% {\n    transform: scaleX(0.98);\n  }\n  80% {\n    transform: scaleX(1.01);\n  }\n  100% {\n    transform: scaleX(1);\n  }\n}\n\n@-webkit-keyframes stretchRight {\n  0% {\n    -webkit-transform: scaleX(0.3);\n  }\n  40% {\n    -webkit-transform: scaleX(1.02);\n  }\n  60% {\n    -webkit-transform: scaleX(0.98);\n  }\n  80% {\n    -webkit-transform: scaleX(1.01);\n  }\n  100% {\n    -webkit-transform: scaleX(0.98);\n  }\n  80% {\n    -webkit-transform: scaleX(1.01);\n  }\n  100% {\n    -webkit-transform: scaleX(1);\n  }\n}",
      "content": "/*******************************\n  Semantic Module: Transition\n  Author: Jack Lukic\n  Notes: First Commit March 25, 2013\n\n  CSS animation definitions for\n  transition module\n\n*******************************/\n\n/*\n  Some transitions adapted from Animate CSS\n  https://github.com/daneden/animate.css\n*/\n\n\n.ui.transition {\n  -webkit-backface-visibility: hidden;\n  -moz-backface-visibility: hidden;\n  -ms-backface-visibility: hidden;\n  -o-backface-visibility: hidden;\n  backface-visibility: hidden;\n\n  -webkit-animation-iteration-count: 1;\n  -moz-animation-iteration-count: 1;\n  -ms-animation-iteration-count: 1;\n  -o-animation-iteration-count: 1;\n  animation-iteration-count: 1;\n\n  -webkit-animation-duration: 1s;\n  -moz-animation-duration: 1s;\n  -ms-animation-duration: 1s;\n  -o-animation-duration: 1s;\n  animation-duration: 1s;\n\n  animation-timing-function: ease;\n  -webkit-animation-timing-function: ease;\n\n  -webkit-animation-fill-mode: both;\n  -moz-animation-fill-mode: both;\n  -ms-animation-fill-mode: both;\n  -o-animation-fill-mode: both;\n  animation-fill-mode: both;\n\n  -webkit-transform: translateZ(0);\n  -moz-transform: translateZ(0);\n  -ms-transform: translateZ(0);\n  -o-transform: translateZ(0);\n  transform: translateZ(0);\n}\n\n/*******************************\n       States\n*******************************/\n\n/* Loading */\n.ui.loading.transition {\n  position: absolute;\n  top: -999999px;\n  left: -99999px;\n}\n\n/* Hidden */\n.ui.hidden.transition {\n  display: none;\n}\n\n/* Visible */\n.ui.visible.transition {\n  display: block;\n  visibility: visible;\n}\n\n\n/* Direction */\n.ui.out.transition {\n  -webkit-animation-direction: reverse;\n  -moz-animation-direction: reverse;\n  -o-animation-direction: reverse;\n  animation-direction: reverse;\n}\n\n/* Disabled */\n.ui.disabled.transition {\n  -webkit-animation-play-state: paused;\n  -moz-animation-play-state: paused;\n  -ms-animation-play-state: paused;\n  -o-animation-play-state: paused;\n  animation-play-state: paused;\n}\n\n/*******************************\n          Variations\n*******************************/\n\n.ui.looping.transition {\n  -webkit-animation-iteration-count: infinite;\n  -moz-animation-iteration-count: infinite;\n  -ms-animation-iteration-count: infinite;\n  -o-animation-iteration-count: infinite;\n  animation-iteration-count: infinite;\n}\n\n/*******************************\n             Types\n*******************************/\n\n/*--------------\n     Moving\n---------------*/\n\n.ui.move.down.transition.in,\n.ui.move.down.transition.out {\n  animation-name: moveDown;\n  -webkit-animation-name: moveDown;\n\n  animation-duration: 1s;\n  -webkit-animation-duration: 1s;\n\n  animation-timing-function: ease;\n  -webkit-animation-timing-function: ease;\n}\n\n@keyframes moveDown {\n  0% {\n    transform: translateY(-100%);\n  }\n  50%{\n    transform: translateY(8%);\n  }\n  65%{\n    transform: translateY(-4%);\n  }\n  80%{\n    transform: translateY(4%);\n  }\n  95%{\n    transform: translateY(-2%);\n  }\n  100% {\n    transform: translateY(0%);\n  }\n}\n\n@-webkit-keyframes moveDown {\n  0% {\n    -webkit-transform: translateY(-100%);\n  }\n  50%{\n    -webkit-transform: translateY(8%);\n  }\n  65%{\n    -webkit-transform: translateY(-4%);\n  }\n  80%{\n    -webkit-transform: translateY(4%);\n  }\n  95%{\n    -webkit-transform: translateY(-2%);\n  }\n  100% {\n    -webkit-transform: translateY(0%);\n  }\n}\n\n.ui.move.up.transition.in,\n.ui.move.up.transition.out {\n  animation-name: moveUp;\n  -webkit-animation-name: moveUp;\n\n  animation-duration: 1s;\n  -webkit-animation-duration: 1s;\n\n  animation-timing-function: ease;\n  -webkit-animation-timing-function: ease;\n}\n\n@keyframes moveUp {\n  0% {\n    transform: translateY(100%);\n  }\n  50%{\n    transform: translateY(-8%);\n  }\n  65%{\n    transform: translateY(4%);\n  }\n  80%{\n    transform: translateY(-4%);\n  }\n  95%{\n    transform: translateY(2%);\n  }\n  100% {\n    transform: translateY(0%);\n  }\n}\n\n@-webkit-keyframes moveUp {\n  0% {\n    -webkit-transform: translateY(100%);\n  }\n  50%{\n    -webkit-transform: translateY(-8%);\n  }\n  65%{\n    -webkit-transform: translateY(4%);\n  }\n  80%{\n    -webkit-transform: translateY(-4%);\n  }\n  95%{\n    -webkit-transform: translateY(2%);\n  }\n  100% {\n    -webkit-transform: translateY(0%);\n  }\n}\n\n\n.ui.move.left.transition.in,\n.ui.move.left.transition.out {\n  animation-name: moveLeft;\n  -webkit-animation-name: moveLeft;\n\n  animation-duration: 1s;\n  -webkit-animation-duration: 1s;\n\n  animation-timing-function: ease-in-out;\n  -webkit-animation-timing-function: ease-in-out;\n\n  visibility: visible !important;\n}\n\n@keyframes moveLeft {\n  0% {\n    transform: translateX(150%);\n  }\n  50%{\n    ransform: translateX(-8%);\n  }\n  65%{\n    transform: translateX(4%);\n  }\n  80%{\n    transform: translateX(-4%);\n  }\n  95%{\n    transform: translateX(2%);\n  }\n  100% {\n    transform: translateX(0%);\n  }\n}\n\n@-webkit-keyframes moveLeft {\n  0% {\n    -webkit-transform: translateX(150%);\n  }\n  50%{\n    -webkit-transform: translateX(-8%);\n  }\n  65%{\n    -webkit-transform: translateX(4%);\n  }\n  80%{\n    -webkit-transform: translateX(-4%);\n  }\n  95%{\n    -webkit-transform: translateX(2%);\n  }\n  100% {\n    -webkit-transform: translateX(0%);\n  }\n}\n\n\n.ui.move.right.transition.in,\n.ui.move.right.transition.out {\n  animation-name: moveRight;\n  -webkit-animation-name: moveRight;\n\n  animation-duration: 1s;\n  -webkit-animation-duration: 1s;\n\n  animation-timing-function: ease-in-out;\n  -webkit-animation-timing-function: ease-in-out;\n\n  visibility: visible !important;\n}\n\n@keyframes moveRight {\n  0% {\n    transform: translateX(-150%);\n  }\n  50%{\n    transform: translateX(8%);\n  }\n  65%{\n    transform: translateX(-4%);\n  }\n  80%{\n    transform: translateX(4%);\n  }\n  95%{\n    transform: translateX(-2%);\n  }\n  100% {\n    transform: translateX(0%);\n  }\n}\n\n@-webkit-keyframes moveRight {\n  0% {\n    -webkit-transform: translateX(-150%);\n  }\n  50%{\n    -webkit-transform: translateX(8%);\n  }\n  65%{\n    -webkit-transform: translateX(-4%);\n  }\n  80%{\n    -webkit-transform: translateX(4%);\n  }\n  95%{\n    -webkit-transform: translateX(-2%);\n  }\n  100% {\n    -webkit-transform: translateX(0%);\n  }\n}\n\n/*\n==============================================\nslideExpandUp\n==============================================\n*/\n\n\n.slideExpandUp{\n  animation-name: slideExpandUp;\n  -webkit-animation-name: slideExpandUp;\n\n  animation-duration: 1.6s;\n  -webkit-animation-duration: 1.6s;\n\n  animation-timing-function: ease-out;\n  -webkit-animation-timing-function: ease -out;\n\n  visibility: visible !important;\n}\n\n@keyframes slideExpandUp {\n  0% {\n    transform: translateY(100%) scaleX(0.5);\n  }\n  30%{\n    transform: translateY(-8%) scaleX(0.5);\n  }\n  40%{\n    transform: translateY(2%) scaleX(0.5);\n  }\n  50%{\n    transform: translateY(0%) scaleX(1.1);\n  }\n  60%{\n    transform: translateY(0%) scaleX(0.9);\n  }\n  70% {\n    transform: translateY(0%) scaleX(1.05);\n  }\n  80%{\n    transform: translateY(0%) scaleX(0.95);\n  }\n  90% {\n    transform: translateY(0%) scaleX(1.02);\n  }\n  100%{\n    transform: translateY(0%) scaleX(1);\n  }\n}\n\n@-webkit-keyframes slideExpandUp {\n  0% {\n    -webkit-transform: translateY(100%) scaleX(0.5);\n  }\n  30%{\n    -webkit-transform: translateY(-8%) scaleX(0.5);\n  }\n  40%{\n    -webkit-transform: translateY(2%) scaleX(0.5);\n  }\n  50%{\n    -webkit-transform: translateY(0%) scaleX(1.1);\n  }\n  60%{\n    -webkit-transform: translateY(0%) scaleX(0.9);\n  }\n  70% {\n    -webkit-transform: translateY(0%) scaleX(1.05);\n  }\n  80%{\n    -webkit-transform: translateY(0%) scaleX(0.95);\n  }\n  90% {\n    -webkit-transform: translateY(0%) scaleX(1.02);\n  }\n  100%{\n    -webkit-transform: translateY(0%) scaleX(1);\n  }\n}\n\n/*\n==============================================\nexpandUp\n==============================================\n*/\n\n\n.expandUp{\n  animation-name: expandUp;\n  -webkit-animation-name: expandUp;\n\n  animation-duration: 0.7s;\n  -webkit-animation-duration: 0.7s;\n\n  animation-timing-function: ease;\n  -webkit-animation-timing-function: ease;\n\n  visibility: visible !important;\n}\n\n@keyframes expandUp {\n  0% {\n    transform: translateY(100%) scale(0.6) scaleY(0.5);\n  }\n  60%{\n    transform: translateY(-7%) scaleY(1.12);\n  }\n  75%{\n    transform: translateY(3%);\n  }\n  100% {\n    transform: translateY(0%) scale(1) scaleY(1);\n  }\n}\n\n@-webkit-keyframes expandUp {\n  0% {\n    -webkit-transform: translateY(100%) scale(0.6) scaleY(0.5);\n  }\n  60%{\n    -webkit-transform: translateY(-7%) scaleY(1.12);\n  }\n  75%{\n    -webkit-transform: translateY(3%);\n  }\n  100% {\n    -webkit-transform: translateY(0%) scale(1) scaleY(1);\n  }\n}\n\n/*\n==============================================\nfadeIn\n==============================================\n*/\n\n.fadeIn{\n  animation-name: fadeIn;\n  -webkit-animation-name: fadeIn;\n\n  animation-duration: 1.5s;\n  -webkit-animation-duration: 1.5s;\n\n  animation-timing-function: ease-in-out;\n  -webkit-animation-timing-function: ease-in-out;\n\n  visibility: visible !important;\n}\n\n@keyframes fadeIn {\n  0% {\n    transform: scale(0);\n    opacity: 0.0;\n  }\n  60% {\n    transform: scale(1.1);\n  }\n  80% {\n    transform: scale(0.9);\n    opacity: 1;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n@-webkit-keyframes fadeIn {\n  0% {\n    -webkit-transform: scale(0);\n    opacity: 0.0;\n  }\n  60% {\n    -webkit-transform: scale(1.1);\n  }\n  80% {\n    -webkit-transform: scale(0.9);\n    opacity: 1;\n  }\n  100% {\n    -webkit-transform: scale(1);\n    opacity: 1;\n  }\n}\n\n/*\n==============================================\nexpandOpen\n==============================================\n*/\n\n\n.expandOpen{\n  animation-name: expandOpen;\n  -webkit-animation-name: expandOpen;\n\n  animation-duration: 1.2s;\n  -webkit-animation-duration: 1.2s;\n\n  animation-timing-function: ease-out;\n  -webkit-animation-timing-function: ease-out;\n\n  visibility: visible !important;\n}\n\n@keyframes expandOpen {\n  0% {\n    transform: scale(1.8);\n  }\n  50% {\n    transform: scale(0.95);\n  }\n  80% {\n    transform: scale(1.05);\n  }\n  90% {\n    transform: scale(0.98);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n\n@-webkit-keyframes expandOpen {\n  0% {\n    -webkit-transform: scale(1.8);\n  }\n  50% {\n    -webkit-transform: scale(0.95);\n  }\n  80% {\n    -webkit-transform: scale(1.05);\n  }\n  90% {\n    -webkit-transform: scale(0.98);\n  }\n  100% {\n    -webkit-transform: scale(1);\n  }\n}\n\n/*\n==============================================\nbigEntrance\n==============================================\n*/\n\n\n.bigEntrance{\n  animation-name: bigEntrance;\n  -webkit-animation-name: bigEntrance;\n\n  animation-duration: 1.6s;\n  -webkit-animation-duration: 1.6s;\n\n  animation-timing-function: ease-out;\n  -webkit-animation-timing-function: ease-out;\n\n  visibility: visible !important;\n}\n\n@keyframes bigEntrance {\n  0% {\n    transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);\n    opacity: 0.2;\n  }\n  30% {\n    transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);\n    opacity: 1;\n  }\n  45% {\n    transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);\n    opacity: 1;\n  }\n  60% {\n    transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);\n    opacity: 1;\n  }\n  75% {\n    transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);\n    opacity: 1;\n  }\n  90% {\n    transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);\n    opacity: 1;\n  }\n  100% {\n    transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);\n    opacity: 1;\n  }\n}\n\n@-webkit-keyframes bigEntrance {\n  0% {\n    -webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);\n    opacity: 0.2;\n  }\n  30% {\n    -webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);\n    opacity: 1;\n  }\n  45% {\n    -webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);\n    opacity: 1;\n  }\n  60% {\n    -webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);\n    opacity: 1;\n  }\n  75% {\n    -webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);\n    opacity: 1;\n  }\n  90% {\n    -webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);\n    opacity: 1;\n  }\n  100% {\n    -webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);\n    opacity: 1;\n  }\n}\n\n/*\n==============================================\nhatch\n==============================================\n*/\n\n.hatch{\n  animation-name: hatch;\n  -webkit-animation-name: hatch;\n\n  animation-duration: 2s;\n  -webkit-animation-duration: 2s;\n\n  animation-timing-function: ease-in-out;\n  -webkit-animation-timing-function: ease-in-out;\n\n  transform-origin: 50% 100%;\n  -ms-transform-origin: 50% 100%;\n  -webkit-transform-origin: 50% 100%;\n\n  visibility: visible !important;\n}\n\n@keyframes hatch {\n  0% {\n    transform: rotate(0deg) scaleY(0.6);\n  }\n  20% {\n    transform: rotate(-2deg) scaleY(1.05);\n  }\n  35% {\n    transform: rotate(2deg) scaleY(1);\n  }\n  50% {\n    transform: rotate(-2deg);\n  }\n  65% {\n    transform: rotate(1deg);\n  }\n  80% {\n    transform: rotate(-1deg);\n  }\n  100% {\n    transform: rotate(0deg);\n  }\n}\n\n@-webkit-keyframes hatch {\n  0% {\n    -webkit-transform: rotate(0deg) scaleY(0.6);\n  }\n  20% {\n    -webkit-transform: rotate(-2deg) scaleY(1.05);\n  }\n  35% {\n    -webkit-transform: rotate(2deg) scaleY(1);\n  }\n  50% {\n    -webkit-transform: rotate(-2deg);\n  }\n  65% {\n    -webkit-transform: rotate(1deg);\n  }\n  80% {\n    -webkit-transform: rotate(-1deg);\n  }\n  100% {\n    -webkit-transform: rotate(0deg);\n  }\n}\n\n\n/*\n==============================================\nbounce\n==============================================\n*/\n\n\n.bounce{\n  animation-name: bounce;\n  -webkit-animation-name: bounce;\n\n  animation-duration: 1.6s;\n  -webkit-animation-duration: 1.6s;\n\n  animation-timing-function: ease;\n  -webkit-animation-timing-function: ease;\n\n  transform-origin: 50% 100%;\n  -ms-transform-origin: 50% 100%;\n  -webkit-transform-origin: 50% 100%;\n}\n\n@keyframes bounce {\n  0% {\n    transform: translateY(0%) scaleY(0.6);\n  }\n  60%{\n    transform: translateY(-100%) scaleY(1.1);\n  }\n  70%{\n    transform: translateY(0%) scaleY(0.95) scaleX(1.05);\n  }\n  80%{\n    transform: translateY(0%) scaleY(1.05) scaleX(1);\n  }\n  90%{\n    transform: translateY(0%) scaleY(0.95) scaleX(1);\n  }\n  100%{\n    transform: translateY(0%) scaleY(1) scaleX(1);\n  }\n}\n\n@-webkit-keyframes bounce {\n  0% {\n    -webkit-transform: translateY(0%) scaleY(0.6);\n  }\n  60%{\n    -webkit-transform: translateY(-100%) scaleY(1.1);\n  }\n  70%{\n    -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05);\n  }\n  80%{\n    -webkit-transform: translateY(0%) scaleY(1.05) scaleX(1);\n  }\n  90%{\n    -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1);\n  }\n  100%{\n    -webkit-transform: translateY(0%) scaleY(1) scaleX(1);\n  }\n}\n\n\n/*\n==============================================\npulse\n==============================================\n*/\n\n.pulse{\n  animation-name: pulse;\n  -webkit-animation-name: pulse;\n\n  animation-duration: 1.5s;\n  -webkit-animation-duration: 1.5s;\n\n  animation-iteration-count: infinite;\n  -webkit-animation-iteration-count: infinite;\n}\n\n@keyframes pulse {\n  0% {\n    transform: scale(0.9);\n    opacity: 0.7;\n  }\n  50% {\n    ransform: scale(1);\n    opacity: 1;\n  }\n  100% {\n    transform: scale(0.9);\n    opacity: 0.7;\n  }\n}\n\n@-webkit-keyframes pulse {\n  0% {\n    -webkit-transform: scale(0.95);\n    opacity: 0.7;\n  }\n  50% {\n    -webkit-transform: scale(1);\n    opacity: 1;\n  }\n  100% {\n    -webkit-transform: scale(0.95);\n    opacity: 0.7;\n  }\n}\n\n/*\n==============================================\nfloating\n==============================================\n*/\n\n.floating{\n  animation-name: floating;\n  -webkit-animation-name: floating;\n\n  animation-duration: 1.5s;\n  -webkit-animation-duration: 1.5s;\n\n  animation-iteration-count: infinite;\n  -webkit-animation-iteration-count: infinite;\n}\n\n@keyframes floating {\n  0% {\n    transform: translateY(0%);\n  }\n  50% {\n    transform: translateY(8%);\n  }\n  100% {\n    transform: translateY(0%);\n  }\n}\n\n@-webkit-keyframes floating {\n  0% {\n    -webkit-transform: translateY(0%);\n  }\n  50% {\n    -webkit-transform: translateY(8%);\n  }\n  100% {\n    -webkit-transform: translateY(0%);\n  }\n}\n\n/*\n==============================================\ntossing\n==============================================\n*/\n\n.tossing{\n  animation-name: tossing;\n  -webkit-animation-name: tossing;\n\n  animation-duration: 2.5s;\n  -webkit-animation-duration: 2.5s;\n\n  animation-iteration-count: infinite;\n  -webkit-animation-iteration-count: infinite;\n}\n\n@keyframes tossing {\n  0% {\n    transform: rotate(-4deg);\n  }\n  50% {\n    transform: rotate(4deg);\n  }\n  100% {\n    transform: rotate(-4deg);\n  }\n}\n\n@-webkit-keyframes tossing {\n  0% {\n    -webkit-transform: rotate(-4deg);\n  }\n  50% {\n    -webkit-transform: rotate(4deg);\n  }\n  100% {\n    -webkit-transform: rotate(-4deg);\n  }\n}\n\n/*\n==============================================\npullUp\n==============================================\n*/\n\n.pullUp{\n  animation-name: pullUp;\n  -webkit-animation-name: pullUp;\n\n  animation-duration: 1.1s;\n  -webkit-animation-duration: 1.1s;\n\n  animation-timing-function: ease-out;\n  -webkit-animation-timing-function: ease-out;\n\n  transform-origin: 50% 100%;\n  -ms-transform-origin: 50% 100%;\n  -webkit-transform-origin: 50% 100%;\n}\n\n@keyframes pullUp {\n  0% {\n    transform: scaleY(0.1);\n  }\n  40% {\n    transform: scaleY(1.02);\n  }\n  60% {\n    transform: scaleY(0.98);\n  }\n  80% {\n    transform: scaleY(1.01);\n  }\n  100% {\n    transform: scaleY(0.98);\n  }\n  80% {\n    transform: scaleY(1.01);\n  }\n  100% {\n    transform: scaleY(1);\n  }\n}\n\n@-webkit-keyframes pullUp {\n  0% {\n    -webkit-transform: scaleY(0.1);\n  }\n  40% {\n    -webkit-transform: scaleY(1.02);\n  }\n  60% {\n    -webkit-transform: scaleY(0.98);\n  }\n  80% {\n    -webkit-transform: scaleY(1.01);\n  }\n  100% {\n    -webkit-transform: scaleY(0.98);\n  }\n  80% {\n    -webkit-transform: scaleY(1.01);\n  }\n  100% {\n    -webkit-transform: scaleY(1);\n  }\n}\n\n/*\n==============================================\npullDown\n==============================================\n*/\n\n.pullDown{\n  animation-name: pullDown;\n  -webkit-animation-name: pullDown;\n\n  animation-duration: 1.1s;\n  -webkit-animation-duration: 1.1s;\n\n  animation-timing-function: ease-out;\n  -webkit-animation-timing-function: ease-out;\n\n  transform-origin: 50% 0%;\n  -ms-transform-origin: 50% 0%;\n  -webkit-transform-origin: 50% 0%;\n}\n\n@keyframes pullDown {\n  0% {\n    transform: scaleY(0.1);\n  }\n  40% {\n    transform: scaleY(1.02);\n  }\n  60% {\n    transform: scaleY(0.98);\n  }\n  80% {\n    transform: scaleY(1.01);\n  }\n  100% {\n    transform: scaleY(0.98);\n  }\n  80% {\n    transform: scaleY(1.01);\n  }\n  100% {\n    transform: scaleY(1);\n  }\n}\n\n@-webkit-keyframes pullDown {\n  0% {\n    -webkit-transform: scaleY(0.1);\n  }\n  40% {\n    -webkit-transform: scaleY(1.02);\n  }\n  60% {\n    -webkit-transform: scaleY(0.98);\n  }\n  80% {\n    -webkit-transform: scaleY(1.01);\n  }\n  100% {\n    -webkit-transform: scaleY(0.98);\n  }\n  80% {\n    -webkit-transform: scaleY(1.01);\n  }\n  100% {\n    -webkit-transform: scaleY(1);\n  }\n}\n\n/*\n==============================================\nstretchLeft\n==============================================\n*/\n\n.stretchLeft{\n  animation-name: stretchLeft;\n  -webkit-animation-name: stretchLeft;\n\n  animation-duration: 1.5s;\n  -webkit-animation-duration: 1.5s;\n\n  animation-timing-function: ease-out;\n  -webkit-animation-timing-function: ease-out;\n\n  transform-origin: 100% 0%;\n  -ms-transform-origin: 100% 0%;\n  -webkit-transform-origin: 100% 0%;\n}\n\n@keyframes stretchLeft {\n  0% {\n    transform: scaleX(0.3);\n  }\n  40% {\n    transform: scaleX(1.02);\n  }\n  60% {\n    transform: scaleX(0.98);\n  }\n  80% {\n    transform: scaleX(1.01);\n  }\n  100% {\n    transform: scaleX(0.98);\n  }\n  80% {\n    transform: scaleX(1.01);\n  }\n  100% {\n    transform: scaleX(1);\n  }\n}\n\n@-webkit-keyframes stretchLeft {\n  0% {\n    -webkit-transform: scaleX(0.3);\n  }\n  40% {\n    -webkit-transform: scaleX(1.02);\n  }\n  60% {\n    -webkit-transform: scaleX(0.98);\n  }\n  80% {\n    -webkit-transform: scaleX(1.01);\n  }\n  100% {\n    -webkit-transform: scaleX(0.98);\n  }\n  80% {\n    -webkit-transform: scaleX(1.01);\n  }\n  100% {\n    -webkit-transform: scaleX(1);\n  }\n}\n\n/*\n==============================================\nstretchRight\n==============================================\n*/\n\n.stretchRight{\n  animation-name: stretchRight;\n  -webkit-animation-name: stretchRight;\n\n  animation-duration: 1.5s;\n  -webkit-animation-duration: 1.5s;\n\n  animation-timing-function: ease-out;\n  -webkit-animation-timing-function: ease-out;\n\n  transform-origin: 0% 0%;\n  -ms-transform-origin: 0% 0%;\n  -webkit-transform-origin: 0% 0%;\n}\n\n@keyframes stretchRight {\n  0% {\n    transform: scaleX(0.3);\n  }\n  40% {\n    transform: scaleX(1.02);\n  }\n  60% {\n    transform: scaleX(0.98);\n  }\n  80% {\n    transform: scaleX(1.01);\n  }\n  100% {\n    transform: scaleX(0.98);\n  }\n  80% {\n    transform: scaleX(1.01);\n  }\n  100% {\n    transform: scaleX(1);\n  }\n}\n\n@-webkit-keyframes stretchRight {\n  0% {\n    -webkit-transform: scaleX(0.3);\n  }\n  40% {\n    -webkit-transform: scaleX(1.02);\n  }\n  60% {\n    -webkit-transform: scaleX(0.98);\n  }\n  80% {\n    -webkit-transform: scaleX(1.01);\n  }\n  100% {\n    -webkit-transform: scaleX(0.98);\n  }\n  80% {\n    -webkit-transform: scaleX(1.01);\n  }\n  100% {\n    -webkit-transform: scaleX(1);\n  }\n}",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "extra.transitions.less",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "draft-extra",
      "url": "/draft/extra.transitions.less",
      "urls": [
        "/draft/extra.transitions.less"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": true,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/draft/sitemap.less",
      "relativePath": "draft/sitemap.less",
      "basename": "sitemap",
      "outBasename": "sitemap",
      "extension": "less",
      "outExtension": "less",
      "extensions": [
        "less"
      ],
      "filename": "sitemap.less",
      "fullDirPath": "/home/jack/projects/semantic/server/files/draft",
      "outPath": "/home/jack/projects/semantic/docs/draft/sitemap.less",
      "outDirPath": "/home/jack/projects/semantic/docs/draft",
      "outFilename": "sitemap.less",
      "relativeOutPath": "draft/sitemap.less",
      "relativeDirPath": "draft",
      "relativeOutDirPath": "draft",
      "relativeBase": "draft/sitemap",
      "relativeOutBase": "draft/sitemap",
      "contentType": "application/octet-stream",
      "outContentType": "application/octet-stream",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": "2013-12-04T09:15:23.206Z",
      "wtime": "2013-12-04T09:15:28.799Z",
      "exists": true,
      "encoding": "utf8",
      "source": "/*\n * # Sitemap\n *\n *\n * Copyright 2013 Contributors\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n * Released: April 17 2013\n */\n\n/*******************************\n           Sitemap\n*******************************/\n\n.ui.sitemap {\n  margin: 0 -3rem;\n  font-size: 0rem;\n  text-align: left;\n}\n\n\n/*--------------\n     Elements\n---------------*/\n\n.ui.sitemap > .section {\n  display: inline-block;\n  vertical-align: top;\n\n  margin: 0em 3rem;\n\n  font-size: 1rem;\n}\n\n.ui.sitemap > .section > .header {\n  font-size: 1.125em;\n  color: rgba(0, 0, 0, 0.8);\n  padding-bottom: 0.5em;\n}\n\n.ui.sitemap > .section > a {\n  display: block;\n  padding: 0.25em 0em;\n}\n\n",
      "content": "/*\n * # Sitemap\n *\n *\n * Copyright 2013 Contributors\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n * Released: April 17 2013\n */\n\n/*******************************\n           Sitemap\n*******************************/\n\n.ui.sitemap {\n  margin: 0 -3rem;\n  font-size: 0rem;\n  text-align: left;\n}\n\n\n/*--------------\n     Elements\n---------------*/\n\n.ui.sitemap > .section {\n  display: inline-block;\n  vertical-align: top;\n\n  margin: 0em 3rem;\n\n  font-size: 1rem;\n}\n\n.ui.sitemap > .section > .header {\n  font-size: 1.125em;\n  color: rgba(0, 0, 0, 0.8);\n  padding-bottom: 0.5em;\n}\n\n.ui.sitemap > .section > a {\n  display: block;\n  padding: 0.25em 0em;\n}\n\n",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "sitemap.less",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "draft-sitemap",
      "url": "/draft/sitemap.less",
      "urls": [
        "/draft/sitemap.less"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": true,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/images/bg.jpg",
      "relativePath": "images/bg.jpg",
      "basename": "bg",
      "outBasename": "bg",
      "extension": "jpg",
      "outExtension": "jpg",
      "extensions": [
        "jpg"
      ],
      "filename": "bg.jpg",
      "fullDirPath": "/home/jack/projects/semantic/server/files/images",
      "outPath": "/home/jack/projects/semantic/docs/images/bg.jpg",
      "outDirPath": "/home/jack/projects/semantic/docs/images",
      "outFilename": "bg.jpg",
      "relativeOutPath": "images/bg.jpg",
      "relativeDirPath": "images",
      "relativeOutDirPath": "images",
      "relativeBase": "images/bg",
      "relativeOutBase": "images/bg",
      "contentType": "image/jpeg",
      "outContentType": "image/jpeg",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.020Z",
      "exists": true,
      "encoding": "binary",
      "source": "",
      "content": "",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "bg.jpg",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "images-bg",
      "url": "/images/bg.jpg",
      "urls": [
        "/images/bg.jpg"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/images/bg2.jpg",
      "relativePath": "images/bg2.jpg",
      "basename": "bg2",
      "outBasename": "bg2",
      "extension": "jpg",
      "outExtension": "jpg",
      "extensions": [
        "jpg"
      ],
      "filename": "bg2.jpg",
      "fullDirPath": "/home/jack/projects/semantic/server/files/images",
      "outPath": "/home/jack/projects/semantic/docs/images/bg2.jpg",
      "outDirPath": "/home/jack/projects/semantic/docs/images",
      "outFilename": "bg2.jpg",
      "relativeOutPath": "images/bg2.jpg",
      "relativeDirPath": "images",
      "relativeOutDirPath": "images",
      "relativeBase": "images/bg2",
      "relativeOutBase": "images/bg2",
      "contentType": "image/jpeg",
      "outContentType": "image/jpeg",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.023Z",
      "exists": true,
      "encoding": "binary",
      "source": "",
      "content": "",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "bg2.jpg",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "images-bg2",
      "url": "/images/bg2.jpg",
      "urls": [
        "/images/bg2.jpg"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/images/bg3.jpg",
      "relativePath": "images/bg3.jpg",
      "basename": "bg3",
      "outBasename": "bg3",
      "extension": "jpg",
      "outExtension": "jpg",
      "extensions": [
        "jpg"
      ],
      "filename": "bg3.jpg",
      "fullDirPath": "/home/jack/projects/semantic/server/files/images",
      "outPath": "/home/jack/projects/semantic/docs/images/bg3.jpg",
      "outDirPath": "/home/jack/projects/semantic/docs/images",
      "outFilename": "bg3.jpg",
      "relativeOutPath": "images/bg3.jpg",
      "relativeDirPath": "images",
      "relativeOutDirPath": "images",
      "relativeBase": "images/bg3",
      "relativeOutBase": "images/bg3",
      "contentType": "image/jpeg",
      "outContentType": "image/jpeg",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.026Z",
      "exists": true,
      "encoding": "binary",
      "source": "",
      "content": "",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "bg3.jpg",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "images-bg3",
      "url": "/images/bg3.jpg",
      "urls": [
        "/images/bg3.jpg"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/images/blue-bg.png",
      "relativePath": "images/blue-bg.png",
      "basename": "blue-bg",
      "outBasename": "blue-bg",
      "extension": "png",
      "outExtension": "png",
      "extensions": [
        "png"
      ],
      "filename": "blue-bg.png",
      "fullDirPath": "/home/jack/projects/semantic/server/files/images",
      "outPath": "/home/jack/projects/semantic/docs/images/blue-bg.png",
      "outDirPath": "/home/jack/projects/semantic/docs/images",
      "outFilename": "blue-bg.png",
      "relativeOutPath": "images/blue-bg.png",
      "relativeDirPath": "images",
      "relativeOutDirPath": "images",
      "relativeBase": "images/blue-bg",
      "relativeOutBase": "images/blue-bg",
      "contentType": "image/png",
      "outContentType": "image/png",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.029Z",
      "exists": true,
      "encoding": "binary",
      "source": "",
      "content": "",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "blue-bg.png",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "images-blue-bg",
      "url": "/images/blue-bg.png",
      "urls": [
        "/images/blue-bg.png"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/images/cat.png",
      "relativePath": "images/cat.png",
      "basename": "cat",
      "outBasename": "cat",
      "extension": "png",
      "outExtension": "png",
      "extensions": [
        "png"
      ],
      "filename": "cat.png",
      "fullDirPath": "/home/jack/projects/semantic/server/files/images",
      "outPath": "/home/jack/projects/semantic/docs/images/cat.png",
      "outDirPath": "/home/jack/projects/semantic/docs/images",
      "outFilename": "cat.png",
      "relativeOutPath": "images/cat.png",
      "relativeDirPath": "images",
      "relativeOutDirPath": "images",
      "relativeBase": "images/cat",
      "relativeOutBase": "images/cat",
      "contentType": "image/png",
      "outContentType": "image/png",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.031Z",
      "exists": true,
      "encoding": "binary",
      "source": "",
      "content": "",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "cat.png",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "images-cat",
      "url": "/images/cat.png",
      "urls": [
        "/images/cat.png"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/images/cat2.png",
      "relativePath": "images/cat2.png",
      "basename": "cat2",
      "outBasename": "cat2",
      "extension": "png",
      "outExtension": "png",
      "extensions": [
        "png"
      ],
      "filename": "cat2.png",
      "fullDirPath": "/home/jack/projects/semantic/server/files/images",
      "outPath": "/home/jack/projects/semantic/docs/images/cat2.png",
      "outDirPath": "/home/jack/projects/semantic/docs/images",
      "outFilename": "cat2.png",
      "relativeOutPath": "images/cat2.png",
      "relativeDirPath": "images",
      "relativeOutDirPath": "images",
      "relativeBase": "images/cat2",
      "relativeOutBase": "images/cat2",
      "contentType": "image/png",
      "outContentType": "image/png",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.034Z",
      "exists": true,
      "encoding": "binary",
      "source": "",
      "content": "",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "cat2.png",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "images-cat2",
      "url": "/images/cat2.png",
      "urls": [
        "/images/cat2.png"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/images/dark-bg.png",
      "relativePath": "images/dark-bg.png",
      "basename": "dark-bg",
      "outBasename": "dark-bg",
      "extension": "png",
      "outExtension": "png",
      "extensions": [
        "png"
      ],
      "filename": "dark-bg.png",
      "fullDirPath": "/home/jack/projects/semantic/server/files/images",
      "outPath": "/home/jack/projects/semantic/docs/images/dark-bg.png",
      "outDirPath": "/home/jack/projects/semantic/docs/images",
      "outFilename": "dark-bg.png",
      "relativeOutPath": "images/dark-bg.png",
      "relativeDirPath": "images",
      "relativeOutDirPath": "images",
      "relativeBase": "images/dark-bg",
      "relativeOutBase": "images/dark-bg",
      "contentType": "image/png",
      "outContentType": "image/png",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.036Z",
      "exists": true,
      "encoding": "binary",
      "source": "",
      "content": "",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "dark-bg.png",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "images-dark-bg",
      "url": "/images/dark-bg.png",
      "urls": [
        "/images/dark-bg.png"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/images/dog.png",
      "relativePath": "images/dog.png",
      "basename": "dog",
      "outBasename": "dog",
      "extension": "png",
      "outExtension": "png",
      "extensions": [
        "png"
      ],
      "filename": "dog.png",
      "fullDirPath": "/home/jack/projects/semantic/server/files/images",
      "outPath": "/home/jack/projects/semantic/docs/images/dog.png",
      "outDirPath": "/home/jack/projects/semantic/docs/images",
      "outFilename": "dog.png",
      "relativeOutPath": "images/dog.png",
      "relativeDirPath": "images",
      "relativeOutDirPath": "images",
      "relativeBase": "images/dog",
      "relativeOutBase": "images/dog",
      "contentType": "image/png",
      "outContentType": "image/png",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.039Z",
      "exists": true,
      "encoding": "binary",
      "source": "",
      "content": "",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "dog.png",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "images-dog",
      "url": "/images/dog.png",
      "urls": [
        "/images/dog.png"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/images/quirky.png",
      "relativePath": "images/quirky.png",
      "basename": "quirky",
      "outBasename": "quirky",
      "extension": "png",
      "outExtension": "png",
      "extensions": [
        "png"
      ],
      "filename": "quirky.png",
      "fullDirPath": "/home/jack/projects/semantic/server/files/images",
      "outPath": "/home/jack/projects/semantic/docs/images/quirky.png",
      "outDirPath": "/home/jack/projects/semantic/docs/images",
      "outFilename": "quirky.png",
      "relativeOutPath": "images/quirky.png",
      "relativeDirPath": "images",
      "relativeOutDirPath": "images",
      "relativeBase": "images/quirky",
      "relativeOutBase": "images/quirky",
      "contentType": "image/png",
      "outContentType": "image/png",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.041Z",
      "exists": true,
      "encoding": "binary",
      "source": "",
      "content": "",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "quirky.png",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "images-quirky",
      "url": "/images/quirky.png",
      "urls": [
        "/images/quirky.png"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/images/share.png",
      "relativePath": "images/share.png",
      "basename": "share",
      "outBasename": "share",
      "extension": "png",
      "outExtension": "png",
      "extensions": [
        "png"
      ],
      "filename": "share.png",
      "fullDirPath": "/home/jack/projects/semantic/server/files/images",
      "outPath": "/home/jack/projects/semantic/docs/images/share.png",
      "outDirPath": "/home/jack/projects/semantic/docs/images",
      "outFilename": "share.png",
      "relativeOutPath": "images/share.png",
      "relativeDirPath": "images",
      "relativeOutDirPath": "images",
      "relativeBase": "images/share",
      "relativeOutBase": "images/share",
      "contentType": "image/png",
      "outContentType": "image/png",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.044Z",
      "exists": true,
      "encoding": "binary",
      "source": "",
      "content": "",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "share.png",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "images-share",
      "url": "/images/share.png",
      "urls": [
        "/images/share.png"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/images/teal-bg.png",
      "relativePath": "images/teal-bg.png",
      "basename": "teal-bg",
      "outBasename": "teal-bg",
      "extension": "png",
      "outExtension": "png",
      "extensions": [
        "png"
      ],
      "filename": "teal-bg.png",
      "fullDirPath": "/home/jack/projects/semantic/server/files/images",
      "outPath": "/home/jack/projects/semantic/docs/images/teal-bg.png",
      "outDirPath": "/home/jack/projects/semantic/docs/images",
      "outFilename": "teal-bg.png",
      "relativeOutPath": "images/teal-bg.png",
      "relativeDirPath": "images",
      "relativeOutDirPath": "images",
      "relativeBase": "images/teal-bg",
      "relativeOutBase": "images/teal-bg",
      "contentType": "image/png",
      "outContentType": "image/png",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.047Z",
      "exists": true,
      "encoding": "binary",
      "source": "",
      "content": "",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "teal-bg.png",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "images-teal-bg",
      "url": "/images/teal-bg.png",
      "urls": [
        "/images/teal-bg.png"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/images/tile-bg.png",
      "relativePath": "images/tile-bg.png",
      "basename": "tile-bg",
      "outBasename": "tile-bg",
      "extension": "png",
      "outExtension": "png",
      "extensions": [
        "png"
      ],
      "filename": "tile-bg.png",
      "fullDirPath": "/home/jack/projects/semantic/server/files/images",
      "outPath": "/home/jack/projects/semantic/docs/images/tile-bg.png",
      "outDirPath": "/home/jack/projects/semantic/docs/images",
      "outFilename": "tile-bg.png",
      "relativeOutPath": "images/tile-bg.png",
      "relativeDirPath": "images",
      "relativeOutDirPath": "images",
      "relativeBase": "images/tile-bg",
      "relativeOutBase": "images/tile-bg",
      "contentType": "image/png",
      "outContentType": "image/png",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.051Z",
      "exists": true,
      "encoding": "binary",
      "source": "",
      "content": "",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "tile-bg.png",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "images-tile-bg",
      "url": "/images/tile-bg.png",
      "urls": [
        "/images/tile-bg.png"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/images/watercolor.jpg",
      "relativePath": "images/watercolor.jpg",
      "basename": "watercolor",
      "outBasename": "watercolor",
      "extension": "jpg",
      "outExtension": "jpg",
      "extensions": [
        "jpg"
      ],
      "filename": "watercolor.jpg",
      "fullDirPath": "/home/jack/projects/semantic/server/files/images",
      "outPath": "/home/jack/projects/semantic/docs/images/watercolor.jpg",
      "outDirPath": "/home/jack/projects/semantic/docs/images",
      "outFilename": "watercolor.jpg",
      "relativeOutPath": "images/watercolor.jpg",
      "relativeDirPath": "images",
      "relativeOutDirPath": "images",
      "relativeBase": "images/watercolor",
      "relativeOutBase": "images/watercolor",
      "contentType": "image/jpeg",
      "outContentType": "image/jpeg",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.055Z",
      "exists": true,
      "encoding": "binary",
      "source": "",
      "content": "",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "watercolor.jpg",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "images-watercolor",
      "url": "/images/watercolor.jpg",
      "urls": [
        "/images/watercolor.jpg"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/javascript/accordion.js",
      "relativePath": "javascript/accordion.js",
      "basename": "accordion",
      "outBasename": "accordion",
      "extension": "js",
      "outExtension": "js",
      "extensions": [
        "js"
      ],
      "filename": "accordion.js",
      "fullDirPath": "/home/jack/projects/semantic/server/files/javascript",
      "outPath": "/home/jack/projects/semantic/docs/javascript/accordion.js",
      "outDirPath": "/home/jack/projects/semantic/docs/javascript",
      "outFilename": "accordion.js",
      "relativeOutPath": "javascript/accordion.js",
      "relativeDirPath": "javascript",
      "relativeOutDirPath": "javascript",
      "relativeBase": "javascript/accordion",
      "relativeOutBase": "javascript/accordion",
      "contentType": "application/javascript",
      "outContentType": "application/javascript",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.058Z",
      "exists": true,
      "encoding": "utf8",
      "source": "semantic.accordion = {};\n\n// ready event\nsemantic.accordion.ready = function() {\n\n  // selector cache\n  var\n    $accordion     = $('.ui.accordion'),\n    $menuAccordion = $('.ui.menu.accordion'),\n    $checkbox      = $('.ui.checkbox'),\n    // alias\n    handler\n  ;\n  $accordion\n    .accordion()\n  ;\n  $menuAccordion\n    .accordion({\n     exclusive: false\n    })\n  ;\n  $checkbox\n    .checkbox()\n  ;\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.accordion.ready)\n;",
      "content": "semantic.accordion = {};\n\n// ready event\nsemantic.accordion.ready = function() {\n\n  // selector cache\n  var\n    $accordion     = $('.ui.accordion'),\n    $menuAccordion = $('.ui.menu.accordion'),\n    $checkbox      = $('.ui.checkbox'),\n    // alias\n    handler\n  ;\n  $accordion\n    .accordion()\n  ;\n  $menuAccordion\n    .accordion({\n     exclusive: false\n    })\n  ;\n  $checkbox\n    .checkbox()\n  ;\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.accordion.ready)\n;",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "accordion.js",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "javascript-accordion",
      "url": "/javascript/accordion.js",
      "urls": [
        "/javascript/accordion.js"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/javascript/button.js",
      "relativePath": "javascript/button.js",
      "basename": "button",
      "outBasename": "button",
      "extension": "js",
      "outExtension": "js",
      "extensions": [
        "js"
      ],
      "filename": "button.js",
      "fullDirPath": "/home/jack/projects/semantic/server/files/javascript",
      "outPath": "/home/jack/projects/semantic/docs/javascript/button.js",
      "outDirPath": "/home/jack/projects/semantic/docs/javascript",
      "outFilename": "button.js",
      "relativeOutPath": "javascript/button.js",
      "relativeDirPath": "javascript",
      "relativeOutDirPath": "javascript",
      "relativeBase": "javascript/button",
      "relativeOutBase": "javascript/button",
      "contentType": "application/javascript",
      "outContentType": "application/javascript",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.061Z",
      "exists": true,
      "encoding": "utf8",
      "source": "semantic.button = {};\n\n// ready event\nsemantic.button.ready = function() {\n\n  // selector cache\n  var\n    $buttons = $('.ui.buttons .button'),\n    $toggle  = $('.main .ui.toggle.button'),\n    $follow  = $('.follow.example .button'),\n    $button  = $('.ui.button').not($buttons).not($toggle),\n    // alias\n    handler = {\n\n      activate: function() {\n        $(this)\n          .addClass('active')\n          .siblings()\n          .removeClass('active')\n        ;\n      }\n\n    }\n  ;\n\n  $buttons\n    .on('click', handler.activate)\n  ;\n\n  $follow\n    .state({\n      text: {\n        inactive : 'Follow',\n        active   : 'Following'\n      }\n    })\n  ;\n\n  $toggle\n    .state({\n      text: {\n        inactive : 'Vote',\n        active   : 'Voted'\n      }\n    })\n  ;\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.button.ready)\n;",
      "content": "semantic.button = {};\n\n// ready event\nsemantic.button.ready = function() {\n\n  // selector cache\n  var\n    $buttons = $('.ui.buttons .button'),\n    $toggle  = $('.main .ui.toggle.button'),\n    $follow  = $('.follow.example .button'),\n    $button  = $('.ui.button').not($buttons).not($toggle),\n    // alias\n    handler = {\n\n      activate: function() {\n        $(this)\n          .addClass('active')\n          .siblings()\n          .removeClass('active')\n        ;\n      }\n\n    }\n  ;\n\n  $buttons\n    .on('click', handler.activate)\n  ;\n\n  $follow\n    .state({\n      text: {\n        inactive : 'Follow',\n        active   : 'Following'\n      }\n    })\n  ;\n\n  $toggle\n    .state({\n      text: {\n        inactive : 'Vote',\n        active   : 'Voted'\n      }\n    })\n  ;\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.button.ready)\n;",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "button.js",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "javascript-button",
      "url": "/javascript/button.js",
      "urls": [
        "/javascript/button.js"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/javascript/card.js",
      "relativePath": "javascript/card.js",
      "basename": "card",
      "outBasename": "card",
      "extension": "js",
      "outExtension": "js",
      "extensions": [
        "js"
      ],
      "filename": "card.js",
      "fullDirPath": "/home/jack/projects/semantic/server/files/javascript",
      "outPath": "/home/jack/projects/semantic/docs/javascript/card.js",
      "outDirPath": "/home/jack/projects/semantic/docs/javascript",
      "outFilename": "card.js",
      "relativeOutPath": "javascript/card.js",
      "relativeDirPath": "javascript",
      "relativeOutDirPath": "javascript",
      "relativeBase": "javascript/card",
      "relativeOutBase": "javascript/card",
      "contentType": "application/javascript",
      "outContentType": "application/javascript",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.062Z",
      "exists": true,
      "encoding": "utf8",
      "source": "semantic.card = {};\n\n// ready event\nsemantic.card.ready = function() {\n\n  // selector cache\n  var \n    $card = $('.ui.product.cards .card, .ui.product.card, .ui.idea.cards .card, .ui.idea.card'),\n    handler\n  ;\n\n  handler = {\n\n    randomProgress: function(index) {\n      var $this = $(this);\n      setTimeout(function() {\n        $this\n          .find('.bar')\n            .css('width', Math.floor(Math.random() * 100) + '%')\n        ;\n      }, index * 200);\n    }\n\n  };\n\n  $.api.settings.api = {\n    vote   : '/api.json',\n    follow : '/api.json'\n  };\n\n  $card\n    .card()\n  ;\n  \n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.card.ready)\n;",
      "content": "semantic.card = {};\n\n// ready event\nsemantic.card.ready = function() {\n\n  // selector cache\n  var \n    $card = $('.ui.product.cards .card, .ui.product.card, .ui.idea.cards .card, .ui.idea.card'),\n    handler\n  ;\n\n  handler = {\n\n    randomProgress: function(index) {\n      var $this = $(this);\n      setTimeout(function() {\n        $this\n          .find('.bar')\n            .css('width', Math.floor(Math.random() * 100) + '%')\n        ;\n      }, index * 200);\n    }\n\n  };\n\n  $.api.settings.api = {\n    vote   : '/api.json',\n    follow : '/api.json'\n  };\n\n  $card\n    .card()\n  ;\n  \n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.card.ready)\n;",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "card.js",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "javascript-card",
      "url": "/javascript/card.js",
      "urls": [
        "/javascript/card.js"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/javascript/checkbox.js",
      "relativePath": "javascript/checkbox.js",
      "basename": "checkbox",
      "outBasename": "checkbox",
      "extension": "js",
      "outExtension": "js",
      "extensions": [
        "js"
      ],
      "filename": "checkbox.js",
      "fullDirPath": "/home/jack/projects/semantic/server/files/javascript",
      "outPath": "/home/jack/projects/semantic/docs/javascript/checkbox.js",
      "outDirPath": "/home/jack/projects/semantic/docs/javascript",
      "outFilename": "checkbox.js",
      "relativeOutPath": "javascript/checkbox.js",
      "relativeDirPath": "javascript",
      "relativeOutDirPath": "javascript",
      "relativeBase": "javascript/checkbox",
      "relativeOutBase": "javascript/checkbox",
      "contentType": "application/javascript",
      "outContentType": "application/javascript",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.077Z",
      "exists": true,
      "encoding": "utf8",
      "source": "semantic.dropdown = {};\n\n// ready event\nsemantic.dropdown.ready = function() {\n\n  // selector cache\n  var \n    $checkbox = $('.example').not('.static').find('.ui.checkbox'),\n    // alias\n    handler\n  ;\n\n  // event handlers\n  handler = {\n    \n  };\n\n  $checkbox\n    .checkbox()\n  ;\n  \n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.dropdown.ready)\n;",
      "content": "semantic.dropdown = {};\n\n// ready event\nsemantic.dropdown.ready = function() {\n\n  // selector cache\n  var \n    $checkbox = $('.example').not('.static').find('.ui.checkbox'),\n    // alias\n    handler\n  ;\n\n  // event handlers\n  handler = {\n    \n  };\n\n  $checkbox\n    .checkbox()\n  ;\n  \n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.dropdown.ready)\n;",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "checkbox.js",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "javascript-checkbox",
      "url": "/javascript/checkbox.js",
      "urls": [
        "/javascript/checkbox.js"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/javascript/dimmer.js",
      "relativePath": "javascript/dimmer.js",
      "basename": "dimmer",
      "outBasename": "dimmer",
      "extension": "js",
      "outExtension": "js",
      "extensions": [
        "js"
      ],
      "filename": "dimmer.js",
      "fullDirPath": "/home/jack/projects/semantic/server/files/javascript",
      "outPath": "/home/jack/projects/semantic/docs/javascript/dimmer.js",
      "outDirPath": "/home/jack/projects/semantic/docs/javascript",
      "outFilename": "dimmer.js",
      "relativeOutPath": "javascript/dimmer.js",
      "relativeDirPath": "javascript",
      "relativeOutDirPath": "javascript",
      "relativeBase": "javascript/dimmer",
      "relativeOutBase": "javascript/dimmer",
      "contentType": "application/javascript",
      "outContentType": "application/javascript",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.080Z",
      "exists": true,
      "encoding": "utf8",
      "source": "semantic.dimmer = {};\n\n// ready event\nsemantic.dimmer.ready = function() {\n\n  // selector cache\n  var\n    $examples   = $('.example'),\n    $showButton = $examples.find('.show.button'),\n    $pageButton = $examples.find('.page.button'),\n    $hideButton = $examples.find('.hide.button'),\n    // alias\n    handler\n  ;\n\n  // event handlers\n  handler = {\n    show: function() {\n      $(this)\n        .closest('.example')\n        .find('.segment')\n          .dimmer('show')\n      ;\n    },\n    hide: function() {\n      $(this)\n        .closest('.example')\n        .find('.segment')\n          .dimmer('hide')\n      ;\n    },\n    page: function() {\n      $('body > .page')\n        .dimmer('show')\n      ;\n    }\n  };\n  \n  $pageButton\n    .on('click', handler.page)\n  ;\n  $showButton\n    .on('click', handler.show)\n  ;\n  $hideButton\n    .on('click', handler.hide)\n  ;\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.dimmer.ready)\n;",
      "content": "semantic.dimmer = {};\n\n// ready event\nsemantic.dimmer.ready = function() {\n\n  // selector cache\n  var\n    $examples   = $('.example'),\n    $showButton = $examples.find('.show.button'),\n    $pageButton = $examples.find('.page.button'),\n    $hideButton = $examples.find('.hide.button'),\n    // alias\n    handler\n  ;\n\n  // event handlers\n  handler = {\n    show: function() {\n      $(this)\n        .closest('.example')\n        .find('.segment')\n          .dimmer('show')\n      ;\n    },\n    hide: function() {\n      $(this)\n        .closest('.example')\n        .find('.segment')\n          .dimmer('hide')\n      ;\n    },\n    page: function() {\n      $('body > .page')\n        .dimmer('show')\n      ;\n    }\n  };\n  \n  $pageButton\n    .on('click', handler.page)\n  ;\n  $showButton\n    .on('click', handler.show)\n  ;\n  $hideButton\n    .on('click', handler.hide)\n  ;\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.dimmer.ready)\n;",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "dimmer.js",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "javascript-dimmer",
      "url": "/javascript/dimmer.js",
      "urls": [
        "/javascript/dimmer.js"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/javascript/dropdown.js",
      "relativePath": "javascript/dropdown.js",
      "basename": "dropdown",
      "outBasename": "dropdown",
      "extension": "js",
      "outExtension": "js",
      "extensions": [
        "js"
      ],
      "filename": "dropdown.js",
      "fullDirPath": "/home/jack/projects/semantic/server/files/javascript",
      "outPath": "/home/jack/projects/semantic/docs/javascript/dropdown.js",
      "outDirPath": "/home/jack/projects/semantic/docs/javascript",
      "outFilename": "dropdown.js",
      "relativeOutPath": "javascript/dropdown.js",
      "relativeDirPath": "javascript",
      "relativeOutDirPath": "javascript",
      "relativeBase": "javascript/dropdown",
      "relativeOutBase": "javascript/dropdown",
      "contentType": "application/javascript",
      "outContentType": "application/javascript",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.084Z",
      "exists": true,
      "encoding": "utf8",
      "source": "semantic.dropdown = {};\n\n// ready event\nsemantic.dropdown.ready = function() {\n\n  // selector cache\n  var\n    $examples         = $('.example'),\n    $hoverDropdown    = $examples.filter('.hover').find('.ui.dropdown'),\n    $buttonDropdown   = $examples.filter('.button.example').find('.ui.dropdown'),\n    $dropdown         = $examples.filter('.dropdown').find('.ui.dropdown:not(.simple)'),\n    $transition       = $examples.filter('.transition').find('.ui.dropdown'),\n    $transitionButton = $examples.filter('.transition').find('.ui.button').first(),\n    // alias\n    handler\n  ;\n\n  // event handlers\n  handler = {\n\n  };\n\n  $transitionButton\n    .on('click', function(event) {\n      $transition.dropdown('toggle');\n      event.stopImmediatePropagation();\n    })\n  ;\n\n  $transition\n    .dropdown({\n      onChange: function(value) {\n        $transition.dropdown('setting', 'transition', value);\n      }\n    })\n  ;\n\n\n  $dropdown\n    .dropdown()\n  ;\n  $hoverDropdown\n    .dropdown({\n      on: 'hover',\n      action: 'hide'\n    })\n  ;\n  $buttonDropdown\n    .dropdown({\n      action: 'hide'\n    })\n  ;\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.dropdown.ready)\n;",
      "content": "semantic.dropdown = {};\n\n// ready event\nsemantic.dropdown.ready = function() {\n\n  // selector cache\n  var\n    $examples         = $('.example'),\n    $hoverDropdown    = $examples.filter('.hover').find('.ui.dropdown'),\n    $buttonDropdown   = $examples.filter('.button.example').find('.ui.dropdown'),\n    $dropdown         = $examples.filter('.dropdown').find('.ui.dropdown:not(.simple)'),\n    $transition       = $examples.filter('.transition').find('.ui.dropdown'),\n    $transitionButton = $examples.filter('.transition').find('.ui.button').first(),\n    // alias\n    handler\n  ;\n\n  // event handlers\n  handler = {\n\n  };\n\n  $transitionButton\n    .on('click', function(event) {\n      $transition.dropdown('toggle');\n      event.stopImmediatePropagation();\n    })\n  ;\n\n  $transition\n    .dropdown({\n      onChange: function(value) {\n        $transition.dropdown('setting', 'transition', value);\n      }\n    })\n  ;\n\n\n  $dropdown\n    .dropdown()\n  ;\n  $hoverDropdown\n    .dropdown({\n      on: 'hover',\n      action: 'hide'\n    })\n  ;\n  $buttonDropdown\n    .dropdown({\n      action: 'hide'\n    })\n  ;\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.dropdown.ready)\n;",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "dropdown.js",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "javascript-dropdown",
      "url": "/javascript/dropdown.js",
      "urls": [
        "/javascript/dropdown.js"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/javascript/form.js",
      "relativePath": "javascript/form.js",
      "basename": "form",
      "outBasename": "form",
      "extension": "js",
      "outExtension": "js",
      "extensions": [
        "js"
      ],
      "filename": "form.js",
      "fullDirPath": "/home/jack/projects/semantic/server/files/javascript",
      "outPath": "/home/jack/projects/semantic/docs/javascript/form.js",
      "outDirPath": "/home/jack/projects/semantic/docs/javascript",
      "outFilename": "form.js",
      "relativeOutPath": "javascript/form.js",
      "relativeDirPath": "javascript",
      "relativeOutDirPath": "javascript",
      "relativeBase": "javascript/form",
      "relativeOutBase": "javascript/form",
      "contentType": "application/javascript",
      "outContentType": "application/javascript",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.087Z",
      "exists": true,
      "encoding": "utf8",
      "source": "semantic.validateForm = {};\n\n// ready event\nsemantic.validateForm.ready = function() {\n\n  // selector cache\n  var\n    $checkbox = $('.ui.checkbox'),\n    // alias\n    handler\n  ;\n\n  // event handlers\n  handler = {\n\n  };\n\n  $checkbox\n    .checkbox()\n  ;\n\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.validateForm.ready)\n;",
      "content": "semantic.validateForm = {};\n\n// ready event\nsemantic.validateForm.ready = function() {\n\n  // selector cache\n  var\n    $checkbox = $('.ui.checkbox'),\n    // alias\n    handler\n  ;\n\n  // event handlers\n  handler = {\n\n  };\n\n  $checkbox\n    .checkbox()\n  ;\n\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.validateForm.ready)\n;",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "form.js",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "javascript-form",
      "url": "/javascript/form.js",
      "urls": [
        "/javascript/form.js"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/javascript/home.js",
      "relativePath": "javascript/home.js",
      "basename": "home",
      "outBasename": "home",
      "extension": "js",
      "outExtension": "js",
      "extensions": [
        "js"
      ],
      "filename": "home.js",
      "fullDirPath": "/home/jack/projects/semantic/server/files/javascript",
      "outPath": "/home/jack/projects/semantic/docs/javascript/home.js",
      "outDirPath": "/home/jack/projects/semantic/docs/javascript",
      "outFilename": "home.js",
      "relativeOutPath": "javascript/home.js",
      "relativeDirPath": "javascript",
      "relativeOutDirPath": "javascript",
      "relativeBase": "javascript/home",
      "relativeOutBase": "javascript/home",
      "contentType": "application/javascript",
      "outContentType": "application/javascript",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.091Z",
      "exists": true,
      "encoding": "utf8",
      "source": "semantic.home = {};\n\n// ready event\nsemantic.home.ready = function() {\n\n  // selector cache\n  var\n    $navigationItem = $('.demo .menu .item'),\n    $oddballItem    = $navigationItem.filter('.oddball')\n  ;\n  $.fn.transition.settings.debug = true;\n  $('.kitten.image')\n    .transition('internal', 'debug', function() {\n      $('.console')\n        .append(arguments[0] + \"\\n\")\n        // scroll to bottom\n        .prop('scrollTop', $('.console').prop('scrollHeight') )\n      ;\n    })\n  ;\n\n  $navigationItem\n    .tab()\n  ;\n  $oddballItem\n    .on('click', function() {\n      $(this)\n        .tab('deactivate all')\n        .tab('activate tab', 'third')\n        .tab('activate navigation', 'third')\n      ;\n    })\n  ;\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.home.ready)\n;",
      "content": "semantic.home = {};\n\n// ready event\nsemantic.home.ready = function() {\n\n  // selector cache\n  var\n    $navigationItem = $('.demo .menu .item'),\n    $oddballItem    = $navigationItem.filter('.oddball')\n  ;\n  $.fn.transition.settings.debug = true;\n  $('.kitten.image')\n    .transition('internal', 'debug', function() {\n      $('.console')\n        .append(arguments[0] + \"\\n\")\n        // scroll to bottom\n        .prop('scrollTop', $('.console').prop('scrollHeight') )\n      ;\n    })\n  ;\n\n  $navigationItem\n    .tab()\n  ;\n  $oddballItem\n    .on('click', function() {\n      $(this)\n        .tab('deactivate all')\n        .tab('activate tab', 'third')\n        .tab('activate navigation', 'third')\n      ;\n    })\n  ;\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.home.ready)\n;",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "home.js",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "javascript-home",
      "url": "/javascript/home.js",
      "urls": [
        "/javascript/home.js"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/javascript/icon.js",
      "relativePath": "javascript/icon.js",
      "basename": "icon",
      "outBasename": "icon",
      "extension": "js",
      "outExtension": "js",
      "extensions": [
        "js"
      ],
      "filename": "icon.js",
      "fullDirPath": "/home/jack/projects/semantic/server/files/javascript",
      "outPath": "/home/jack/projects/semantic/docs/javascript/icon.js",
      "outDirPath": "/home/jack/projects/semantic/docs/javascript",
      "outFilename": "icon.js",
      "relativeOutPath": "javascript/icon.js",
      "relativeDirPath": "javascript",
      "relativeOutDirPath": "javascript",
      "relativeBase": "javascript/icon",
      "relativeOutBase": "javascript/icon",
      "contentType": "application/javascript",
      "outContentType": "application/javascript",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.094Z",
      "exists": true,
      "encoding": "utf8",
      "source": "semantic.shape = {};\n\n// ready event\nsemantic.shape.ready = function() {\n\n  // selector cache\n  var\n    $tab = $('.tabular.menu .item'),\n    handler\n  ;\n\n  // event handlers\n  handler = {\n\n  };\n\n\n  $tab\n    .tab()\n  ;\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.shape.ready)\n;",
      "content": "semantic.shape = {};\n\n// ready event\nsemantic.shape.ready = function() {\n\n  // selector cache\n  var\n    $tab = $('.tabular.menu .item'),\n    handler\n  ;\n\n  // event handlers\n  handler = {\n\n  };\n\n\n  $tab\n    .tab()\n  ;\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.shape.ready)\n;",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "icon.js",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "javascript-icon",
      "url": "/javascript/icon.js",
      "urls": [
        "/javascript/icon.js"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/javascript/menu.js",
      "relativePath": "javascript/menu.js",
      "basename": "menu",
      "outBasename": "menu",
      "extension": "js",
      "outExtension": "js",
      "extensions": [
        "js"
      ],
      "filename": "menu.js",
      "fullDirPath": "/home/jack/projects/semantic/server/files/javascript",
      "outPath": "/home/jack/projects/semantic/docs/javascript/menu.js",
      "outDirPath": "/home/jack/projects/semantic/docs/javascript",
      "outFilename": "menu.js",
      "relativeOutPath": "javascript/menu.js",
      "relativeDirPath": "javascript",
      "relativeOutDirPath": "javascript",
      "relativeBase": "javascript/menu",
      "relativeOutBase": "javascript/menu",
      "contentType": "application/javascript",
      "outContentType": "application/javascript",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:04.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.098Z",
      "exists": true,
      "encoding": "utf8",
      "source": "semantic.menu = {};\n\n// ready event\nsemantic.menu.ready = function() {\n\n  // selector cache\n  var\n    $menuItem = $('.menu a.item, .menu .link.item'),\n    $dropdown = $('.main.container .menu .dropdown'),\n    // alias\n    handler = {\n\n      activate: function() {\n        if(!$(this).hasClass('dropdown')) {\n          $(this)\n            .addClass('active')\n            .closest('.ui.menu')\n            .find('.item')\n              .not($(this))\n              .removeClass('active')\n          ;\n        }\n      }\n\n    }\n  ;\n\n  $dropdown\n    .dropdown({\n      on: 'hover'\n    })\n  ;\n\n  $menuItem\n    .on('click', handler.activate)\n  ;\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.menu.ready)\n;",
      "content": "semantic.menu = {};\n\n// ready event\nsemantic.menu.ready = function() {\n\n  // selector cache\n  var\n    $menuItem = $('.menu a.item, .menu .link.item'),\n    $dropdown = $('.main.container .menu .dropdown'),\n    // alias\n    handler = {\n\n      activate: function() {\n        if(!$(this).hasClass('dropdown')) {\n          $(this)\n            .addClass('active')\n            .closest('.ui.menu')\n            .find('.item')\n              .not($(this))\n              .removeClass('active')\n          ;\n        }\n      }\n\n    }\n  ;\n\n  $dropdown\n    .dropdown({\n      on: 'hover'\n    })\n  ;\n\n  $menuItem\n    .on('click', handler.activate)\n  ;\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.menu.ready)\n;",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "menu.js",
      "date": "2013-12-02T15:39:04.000Z",
      "slug": "javascript-menu",
      "url": "/javascript/menu.js",
      "urls": [
        "/javascript/menu.js"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/javascript/modal.js",
      "relativePath": "javascript/modal.js",
      "basename": "modal",
      "outBasename": "modal",
      "extension": "js",
      "outExtension": "js",
      "extensions": [
        "js"
      ],
      "filename": "modal.js",
      "fullDirPath": "/home/jack/projects/semantic/server/files/javascript",
      "outPath": "/home/jack/projects/semantic/docs/javascript/modal.js",
      "outDirPath": "/home/jack/projects/semantic/docs/javascript",
      "outFilename": "modal.js",
      "relativeOutPath": "javascript/modal.js",
      "relativeDirPath": "javascript",
      "relativeOutDirPath": "javascript",
      "relativeBase": "javascript/modal",
      "relativeOutBase": "javascript/modal",
      "contentType": "application/javascript",
      "outContentType": "application/javascript",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:04.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.102Z",
      "exists": true,
      "encoding": "utf8",
      "source": "semantic.modal = {};\n\n// ready event\nsemantic.modal.ready = function() {\n\n  // selector cache\n  var\n    // alias\n    handler\n  ;\n\n  // event handlers\n  handler = {\n\n  };\n\n    $('.selection')\n      .dropdown({\n        onChange: function(value) {\n          $('.test.modal')\n            .modal('setting', 'transition', value)\n            .modal('show')\n          ;\n        }\n      })\n    ;\n\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.modal.ready)\n;",
      "content": "semantic.modal = {};\n\n// ready event\nsemantic.modal.ready = function() {\n\n  // selector cache\n  var\n    // alias\n    handler\n  ;\n\n  // event handlers\n  handler = {\n\n  };\n\n    $('.selection')\n      .dropdown({\n        onChange: function(value) {\n          $('.test.modal')\n            .modal('setting', 'transition', value)\n            .modal('show')\n          ;\n        }\n      })\n    ;\n\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.modal.ready)\n;",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "modal.js",
      "date": "2013-12-02T15:39:04.000Z",
      "slug": "javascript-modal",
      "url": "/javascript/modal.js",
      "urls": [
        "/javascript/modal.js"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/javascript/playground.js",
      "relativePath": "javascript/playground.js",
      "basename": "playground",
      "outBasename": "playground",
      "extension": "js",
      "outExtension": "js",
      "extensions": [
        "js"
      ],
      "filename": "playground.js",
      "fullDirPath": "/home/jack/projects/semantic/server/files/javascript",
      "outPath": "/home/jack/projects/semantic/docs/javascript/playground.js",
      "outDirPath": "/home/jack/projects/semantic/docs/javascript",
      "outFilename": "playground.js",
      "relativeOutPath": "javascript/playground.js",
      "relativeDirPath": "javascript",
      "relativeOutDirPath": "javascript",
      "relativeBase": "javascript/playground",
      "relativeOutBase": "javascript/playground",
      "contentType": "application/javascript",
      "outContentType": "application/javascript",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:04.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.104Z",
      "exists": true,
      "encoding": "utf8",
      "source": "semantic.playground = {};\n\nwindow.ui = {};\n\n$.api.settings.api = {\n  'getSpecification': 'spec/{$type}.json'\n};\n\n$.fn.dropdown.settings.animation.hide = 'none';\n\n$.fn.dropdown.debug = false;\n$.fn.checkbox.debug = false;\n$.fn.api.debug = false;\n$.fn.popup.debug = false;\n\n// ready event\nsemantic.playground.ready = function() {\n\n  // selector cache\n  var\n    $uiMenu          = $('.ui.menu'),\n    $elements        = $('.element.menu'),\n    $elementChoice   = $elements.find('.selection.dropdown'),\n\n    $variations      = $('.variation.menu'),\n    $variationForm   = $variations.find('.form'),\n    $variationChoice = $variations.find('.selection'),\n\n    $types           = $('.type.menu'),\n    $typeForm        = $types.find('.form'),\n    $typeChoice      = $types.find('.selection'),\n\n    $preview         = $('.preview.segment'),\n    $text            = $('.text'),\n\n    $page            = $('.page.column'),\n\n    $view            = $('.view.buttons .button'),\n    $previewView     = $view.filter('.preview'),\n    $htmlView        = $view.filter('.html'),\n\n    $download        = $('.download.button'),\n\n    $addElement      = $('.add.button'),\n\n    template = {},\n\n\n    // alias\n    handler = {\n\n      initialize: function() {\n\n        template.select   = handler.template.compile('select'),\n        template.checkbox = handler.template.compile('checkbox'),\n\n        handler.interface.get('button');\n        handler.attachEvents();\n      },\n\n      attachEvents: function() {\n        $elementChoice\n          .dropdown({\n            action   : 'form',\n            onChange : function(type) {\n              $.proxy(handler.interface.setExclusive, this)();\n              handler.interface.get(type);\n            }\n          })\n        ;\n        $addElement\n          .on('click', handler.preview.add)\n        ;\n        $previewView\n          .on('click', handler.view.preview)\n        ;\n        $htmlView\n          .on('click', handler.view.html)\n        ;\n      },\n\n      preview: {\n\n        add: function() {\n          handler.item.insert( $preview.html() );\n        },\n\n        get: function() {\n          console.log('Making preview');\n          var\n            koan =$typeForm.find('.dropdown:not(.default) input').val() || false,\n            classNames,\n            $element,\n            dummyText = ['Submit', 'Add', 'Create']\n          ;\n          classNames = handler.interface.getValues($variationForm);\n          if(koan) {\n            $element = $\n              .zc(koan)\n              .addClass(classNames.join(' '))\n            ;\n            handler.preview.addText($element);\n            $preview\n              .empty()\n              .append($element)\n            ;\n          }\n\n          // add class names\n        },\n\n        addText: function($element) {\n          var\n            $parts = $element.children()\n          ;\n          if($parts.size() === 0) {\n            $element.text('Example');\n          }\n          else {\n            $parts\n              .each(function() {\n                handler.preview.preview.addText($(this));\n              })\n            ;\n          }\n        },\n\n        update: function() {\n          $preview.html( handler.preview.get() );\n        }\n\n      },\n\n      types: {\n        create: function(type) {\n          var\n            html = '',\n            ui = window.ui[type] || false,\n            format = (ui)\n              ? ui['Types']\n              : {}\n          ;\n          handler.interface.addForm($typeForm, format);\n          $typeForm\n            .find('.dropdown')\n              .dropdown('setting', 'onChange', handler.interface.setExclusive)\n          ;\n        },\n        toggle: function() {\n\n        }\n      },\n\n      variations: {\n\n        create: function(type) {\n          var\n            html = '',\n            ui = window.ui[type] || false,\n            format = (ui)\n              ? ui['Variations']\n              : {}\n          ;\n          handler.interface.addForm($variationForm, format);\n        },\n\n        toggle: function() {\n\n        }\n\n      },\n\n      interface: {\n        addForm: function($element, list) {\n          var\n            html = ''\n          ;\n          $.each(list, function(name, variation) {\n            // complex variation\n            if( $.isPlainObject(variation) && variation.selector !== undefined) {\n\n            }\n            // select box\n            else if( $.isArray(variation) || $.isPlainObject(variation) ) {\n              html += template.select({\n                name   : name,\n                values : variation\n              });\n            }\n            // checkbox\n            else if( typeof variation == 'string') {\n              html += template.checkbox({\n                value: variation\n              });\n            }\n          });\n          $(html)\n            .appendTo($element)\n          ;\n          $element\n            .find('.dropdown')\n              .dropdown({\n                action   : 'form',\n                onChange : handler.preview.update\n              })\n              .end()\n            .find('.checkbox')\n              .checkbox({\n                onChange: handler.preview.update\n              })\n          ;\n          return $element;\n        },\n        getValues: function($form) {\n          var\n            $inputs    = $form.find('input'),\n            classNames = []\n          ;\n          $inputs\n            .each(function() {\n              var \n                type  = $(this).attr('type'),\n                value = $(this).val()\n              ;\n              if( type == 'hidden' && value != 'none') {\n                classNames.push(value);\n              }\n              else if( type == 'checkbox' && $(this).is(':checked') ) {\n                classNames.push(value);\n              }\n            })\n          ;\n          console.log(classNames);\n          return classNames;\n        },\n        setExclusive: function() {\n          $(this)\n            .removeClass('default')\n            .closest('.item').find('.dropdown')\n              .not( $(this) )\n              .addClass('default')\n              .find('.text')\n                .html('---')\n                .end()\n              .find('input')\n                .val('')\n          ;\n        },\n        clear: function() {\n          $typeForm.empty();\n          $variationForm.empty();\n        },\n        update: function(type) {\n          handler.types.create(type);\n          handler.variations.create(type);\n        },\n        get: function(type) {\n          if(type !== undefined) {\n            if(window.ui[type] === undefined) {\n              $.api({\n                action: 'getSpecification',\n                urlData: {\n                  type: type\n                },\n                success: function(json) {\n                  window.ui[type] = json;\n                  handler.interface.update(type);\n                },\n                failure: function() {\n                  window.ui[type] = {};\n                  handler.interface.clear();\n                }\n              });\n            }\n            else {\n              handler.interface.update(type);\n            }\n          }\n        }\n      },\n\n      item: {\n        update: function(type) {\n        },\n        change: function(type) {\n        },\n        highlight: function() {\n\n        },\n        insert: function(html) {\n          if( $page.hasClass('default') ) {\n            $page\n              .removeClass('default')\n              .empty()\n            ;\n          }\n          $(html)\n            .appendTo($page)\n          ;\n        },\n        remove: function() {\n\n        }\n\n      },\n\n      template: {\n        compile: function(name) {\n          var template = Handlebars.compile($('script.'+name).html());\n          return ($.isFunction(template))\n            ? template\n            : false\n          ;\n        }\n      },\n\n      view: {\n        preview: function() {\n          $(this)\n            .addClass('active')\n            .siblings()\n              .removeClass('active')\n          ;\n        },\n        html: function() {\n          $(this)\n            .addClass('active')\n            .siblings()\n              .removeClass('active')\n          ;\n        }\n      },\n\n      components: {\n\n        add: function() {\n\n        },\n        remove: function() {\n\n        }\n      },\n\n      activate: function(value) {\n        if(!$(this).hasClass('dropdown')) {\n          $(this)\n            .addClass('active')\n            .closest('.ui.playground')\n            .find('.item')\n              .not($(this))\n              .removeClass('active')\n          ;\n        }\n      }\n\n    }\n  ;\n\n  handler.initialize();\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.playground.ready)\n;",
      "content": "semantic.playground = {};\n\nwindow.ui = {};\n\n$.api.settings.api = {\n  'getSpecification': 'spec/{$type}.json'\n};\n\n$.fn.dropdown.settings.animation.hide = 'none';\n\n$.fn.dropdown.debug = false;\n$.fn.checkbox.debug = false;\n$.fn.api.debug = false;\n$.fn.popup.debug = false;\n\n// ready event\nsemantic.playground.ready = function() {\n\n  // selector cache\n  var\n    $uiMenu          = $('.ui.menu'),\n    $elements        = $('.element.menu'),\n    $elementChoice   = $elements.find('.selection.dropdown'),\n\n    $variations      = $('.variation.menu'),\n    $variationForm   = $variations.find('.form'),\n    $variationChoice = $variations.find('.selection'),\n\n    $types           = $('.type.menu'),\n    $typeForm        = $types.find('.form'),\n    $typeChoice      = $types.find('.selection'),\n\n    $preview         = $('.preview.segment'),\n    $text            = $('.text'),\n\n    $page            = $('.page.column'),\n\n    $view            = $('.view.buttons .button'),\n    $previewView     = $view.filter('.preview'),\n    $htmlView        = $view.filter('.html'),\n\n    $download        = $('.download.button'),\n\n    $addElement      = $('.add.button'),\n\n    template = {},\n\n\n    // alias\n    handler = {\n\n      initialize: function() {\n\n        template.select   = handler.template.compile('select'),\n        template.checkbox = handler.template.compile('checkbox'),\n\n        handler.interface.get('button');\n        handler.attachEvents();\n      },\n\n      attachEvents: function() {\n        $elementChoice\n          .dropdown({\n            action   : 'form',\n            onChange : function(type) {\n              $.proxy(handler.interface.setExclusive, this)();\n              handler.interface.get(type);\n            }\n          })\n        ;\n        $addElement\n          .on('click', handler.preview.add)\n        ;\n        $previewView\n          .on('click', handler.view.preview)\n        ;\n        $htmlView\n          .on('click', handler.view.html)\n        ;\n      },\n\n      preview: {\n\n        add: function() {\n          handler.item.insert( $preview.html() );\n        },\n\n        get: function() {\n          console.log('Making preview');\n          var\n            koan =$typeForm.find('.dropdown:not(.default) input').val() || false,\n            classNames,\n            $element,\n            dummyText = ['Submit', 'Add', 'Create']\n          ;\n          classNames = handler.interface.getValues($variationForm);\n          if(koan) {\n            $element = $\n              .zc(koan)\n              .addClass(classNames.join(' '))\n            ;\n            handler.preview.addText($element);\n            $preview\n              .empty()\n              .append($element)\n            ;\n          }\n\n          // add class names\n        },\n\n        addText: function($element) {\n          var\n            $parts = $element.children()\n          ;\n          if($parts.size() === 0) {\n            $element.text('Example');\n          }\n          else {\n            $parts\n              .each(function() {\n                handler.preview.preview.addText($(this));\n              })\n            ;\n          }\n        },\n\n        update: function() {\n          $preview.html( handler.preview.get() );\n        }\n\n      },\n\n      types: {\n        create: function(type) {\n          var\n            html = '',\n            ui = window.ui[type] || false,\n            format = (ui)\n              ? ui['Types']\n              : {}\n          ;\n          handler.interface.addForm($typeForm, format);\n          $typeForm\n            .find('.dropdown')\n              .dropdown('setting', 'onChange', handler.interface.setExclusive)\n          ;\n        },\n        toggle: function() {\n\n        }\n      },\n\n      variations: {\n\n        create: function(type) {\n          var\n            html = '',\n            ui = window.ui[type] || false,\n            format = (ui)\n              ? ui['Variations']\n              : {}\n          ;\n          handler.interface.addForm($variationForm, format);\n        },\n\n        toggle: function() {\n\n        }\n\n      },\n\n      interface: {\n        addForm: function($element, list) {\n          var\n            html = ''\n          ;\n          $.each(list, function(name, variation) {\n            // complex variation\n            if( $.isPlainObject(variation) && variation.selector !== undefined) {\n\n            }\n            // select box\n            else if( $.isArray(variation) || $.isPlainObject(variation) ) {\n              html += template.select({\n                name   : name,\n                values : variation\n              });\n            }\n            // checkbox\n            else if( typeof variation == 'string') {\n              html += template.checkbox({\n                value: variation\n              });\n            }\n          });\n          $(html)\n            .appendTo($element)\n          ;\n          $element\n            .find('.dropdown')\n              .dropdown({\n                action   : 'form',\n                onChange : handler.preview.update\n              })\n              .end()\n            .find('.checkbox')\n              .checkbox({\n                onChange: handler.preview.update\n              })\n          ;\n          return $element;\n        },\n        getValues: function($form) {\n          var\n            $inputs    = $form.find('input'),\n            classNames = []\n          ;\n          $inputs\n            .each(function() {\n              var \n                type  = $(this).attr('type'),\n                value = $(this).val()\n              ;\n              if( type == 'hidden' && value != 'none') {\n                classNames.push(value);\n              }\n              else if( type == 'checkbox' && $(this).is(':checked') ) {\n                classNames.push(value);\n              }\n            })\n          ;\n          console.log(classNames);\n          return classNames;\n        },\n        setExclusive: function() {\n          $(this)\n            .removeClass('default')\n            .closest('.item').find('.dropdown')\n              .not( $(this) )\n              .addClass('default')\n              .find('.text')\n                .html('---')\n                .end()\n              .find('input')\n                .val('')\n          ;\n        },\n        clear: function() {\n          $typeForm.empty();\n          $variationForm.empty();\n        },\n        update: function(type) {\n          handler.types.create(type);\n          handler.variations.create(type);\n        },\n        get: function(type) {\n          if(type !== undefined) {\n            if(window.ui[type] === undefined) {\n              $.api({\n                action: 'getSpecification',\n                urlData: {\n                  type: type\n                },\n                success: function(json) {\n                  window.ui[type] = json;\n                  handler.interface.update(type);\n                },\n                failure: function() {\n                  window.ui[type] = {};\n                  handler.interface.clear();\n                }\n              });\n            }\n            else {\n              handler.interface.update(type);\n            }\n          }\n        }\n      },\n\n      item: {\n        update: function(type) {\n        },\n        change: function(type) {\n        },\n        highlight: function() {\n\n        },\n        insert: function(html) {\n          if( $page.hasClass('default') ) {\n            $page\n              .removeClass('default')\n              .empty()\n            ;\n          }\n          $(html)\n            .appendTo($page)\n          ;\n        },\n        remove: function() {\n\n        }\n\n      },\n\n      template: {\n        compile: function(name) {\n          var template = Handlebars.compile($('script.'+name).html());\n          return ($.isFunction(template))\n            ? template\n            : false\n          ;\n        }\n      },\n\n      view: {\n        preview: function() {\n          $(this)\n            .addClass('active')\n            .siblings()\n              .removeClass('active')\n          ;\n        },\n        html: function() {\n          $(this)\n            .addClass('active')\n            .siblings()\n              .removeClass('active')\n          ;\n        }\n      },\n\n      components: {\n\n        add: function() {\n\n        },\n        remove: function() {\n\n        }\n      },\n\n      activate: function(value) {\n        if(!$(this).hasClass('dropdown')) {\n          $(this)\n            .addClass('active')\n            .closest('.ui.playground')\n            .find('.item')\n              .not($(this))\n              .removeClass('active')\n          ;\n        }\n      }\n\n    }\n  ;\n\n  handler.initialize();\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.playground.ready)\n;",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "playground.js",
      "date": "2013-12-02T15:39:04.000Z",
      "slug": "javascript-playground",
      "url": "/javascript/playground.js",
      "urls": [
        "/javascript/playground.js"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/javascript/popup.js",
      "relativePath": "javascript/popup.js",
      "basename": "popup",
      "outBasename": "popup",
      "extension": "js",
      "outExtension": "js",
      "extensions": [
        "js"
      ],
      "filename": "popup.js",
      "fullDirPath": "/home/jack/projects/semantic/server/files/javascript",
      "outPath": "/home/jack/projects/semantic/docs/javascript/popup.js",
      "outDirPath": "/home/jack/projects/semantic/docs/javascript",
      "outFilename": "popup.js",
      "relativeOutPath": "javascript/popup.js",
      "relativeDirPath": "javascript",
      "relativeOutDirPath": "javascript",
      "relativeBase": "javascript/popup",
      "relativeOutBase": "javascript/popup",
      "contentType": "application/javascript",
      "outContentType": "application/javascript",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:04.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.106Z",
      "exists": true,
      "encoding": "utf8",
      "source": "semantic.accordion = {};\n\n// ready event\nsemantic.accordion.ready = function() {\n\n  // selector cache\n  var\n    $popup = $('.main .ui[data-content], .main .ui[data-html], .main i[data-content], .main i[data-html]'),\n    // alias\n    handler\n  ;\n  $popup\n    .popup({\n      className: {\n        popup: 'ignored ui popup'\n      }\n    })\n  ;\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.accordion.ready)\n;",
      "content": "semantic.accordion = {};\n\n// ready event\nsemantic.accordion.ready = function() {\n\n  // selector cache\n  var\n    $popup = $('.main .ui[data-content], .main .ui[data-html], .main i[data-content], .main i[data-html]'),\n    // alias\n    handler\n  ;\n  $popup\n    .popup({\n      className: {\n        popup: 'ignored ui popup'\n      }\n    })\n  ;\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.accordion.ready)\n;",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "popup.js",
      "date": "2013-12-02T15:39:04.000Z",
      "slug": "javascript-popup",
      "url": "/javascript/popup.js",
      "urls": [
        "/javascript/popup.js"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/javascript/rating.js",
      "relativePath": "javascript/rating.js",
      "basename": "rating",
      "outBasename": "rating",
      "extension": "js",
      "outExtension": "js",
      "extensions": [
        "js"
      ],
      "filename": "rating.js",
      "fullDirPath": "/home/jack/projects/semantic/server/files/javascript",
      "outPath": "/home/jack/projects/semantic/docs/javascript/rating.js",
      "outDirPath": "/home/jack/projects/semantic/docs/javascript",
      "outFilename": "rating.js",
      "relativeOutPath": "javascript/rating.js",
      "relativeDirPath": "javascript",
      "relativeOutDirPath": "javascript",
      "relativeBase": "javascript/rating",
      "relativeOutBase": "javascript/rating",
      "contentType": "application/javascript",
      "outContentType": "application/javascript",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:04.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.110Z",
      "exists": true,
      "encoding": "utf8",
      "source": "semantic.dropdown = {};\n\n// ready event\nsemantic.dropdown.ready = function() {\n\n  $('.ui.rating')\n    .rating()\n  ;\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.dropdown.ready)\n;",
      "content": "semantic.dropdown = {};\n\n// ready event\nsemantic.dropdown.ready = function() {\n\n  $('.ui.rating')\n    .rating()\n  ;\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.dropdown.ready)\n;",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "rating.js",
      "date": "2013-12-02T15:39:04.000Z",
      "slug": "javascript-rating",
      "url": "/javascript/rating.js",
      "urls": [
        "/javascript/rating.js"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/javascript/semantic.js",
      "relativePath": "javascript/semantic.js",
      "basename": "semantic",
      "outBasename": "semantic",
      "extension": "js",
      "outExtension": "js",
      "extensions": [
        "js"
      ],
      "filename": "semantic.js",
      "fullDirPath": "/home/jack/projects/semantic/server/files/javascript",
      "outPath": "/home/jack/projects/semantic/docs/javascript/semantic.js",
      "outDirPath": "/home/jack/projects/semantic/docs/javascript",
      "outFilename": "semantic.js",
      "relativeOutPath": "javascript/semantic.js",
      "relativeDirPath": "javascript",
      "relativeOutDirPath": "javascript",
      "relativeBase": "javascript/semantic",
      "relativeOutBase": "javascript/semantic",
      "contentType": "application/javascript",
      "outContentType": "application/javascript",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-03T17:44:32.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.111Z",
      "exists": true,
      "encoding": "utf8",
      "source": "// namespace\nwindow.semantic = {\n  handler: {}\n};\n\n// Allow for console.log to not break IE\nif (typeof window.console == \"undefined\" || typeof window.console.log == \"undefined\") {\n  window.console = {\n    log  : function() {},\n    info : function(){},\n    warn : function(){}\n  };\n}\nif(typeof window.console.group == 'undefined' || typeof window.console.groupEnd == 'undefined' || typeof window.console.groupCollapsed == 'undefined') {\n  window.console.group = function(){};\n  window.console.groupEnd = function(){};\n  window.console.groupCollapsed = function(){};\n}\nif(typeof window.console.markTimeline == 'undefined') {\n  window.console.markTimeline = function(){};\n}\nwindow.console.clear = function(){};\n\n// ready event\nsemantic.ready = function() {\n\n  // selector cache\n  var\n\n    $peek             = $('.peek'),\n    $peekItem         = $peek.children('.menu').children('a.item'),\n    $peekSubItem      = $peek.find('.item .menu .item'),\n    $sortableTables   = $('.sortable.table'),\n\n    $ui               = $('.ui').not('.hover, .down'),\n    $swap             = $('.theme.menu .item'),\n    $menu             = $('#menu'),\n    $hideMenu         = $('#menu .hide.item'),\n    $sortTable        = $('.sortable.table'),\n    $demo             = $('.demo'),\n    $waypoints        = $peek.closest('.tab, .container').find('h2').first().siblings('h2').addBack(),\n\n    $menuPopup        = $('.ui.main.menu .popup.item'),\n    $menuDropdown     = $('.ui.main.menu .dropdown'),\n    $pageTabMenu      = $('body > .tab.segment .tabular.menu'),\n    $pageTabs         = $('body > .tab.segment .menu .item'),\n\n    $downloadDropdown = $('.download.buttons .dropdown'),\n\n    $helpPopup        = $('.header .help.icon'),\n\n    $example          = $('.example'),\n    $shownExample     = $example.filter('.shown'),\n\n    $developer        = $('.developer.item'),\n    $overview         = $('.overview.item, .overview.button'),\n    $designer         = $('.designer.item'),\n\n    $sidebarButton    = $('.attached.launch.button'),\n\n    $increaseFont     = $('.font .increase'),\n    $decreaseFont     = $('.font .decrease'),\n\n    $code             = $('div.code').not('.existing'),\n    $existingCode     = $('.existing.code'),\n\n    // alias\n    handler\n  ;\n\n\n  // event handlers\n  handler = {\n\n    createIcon: function() {\n      $example\n        .each(function(){\n          $('')\n            .addClass('icon code')\n            .prependTo( $(this) )\n          ;\n        })\n      ;\n    },\n\n    getSpecification: function(callback) {\n      var\n        url = $(this).data('url') || false\n      ;\n      callback = callback || function(){};\n      if(url) {\n        $.ajax({\n          method: 'get',\n          url: url,\n          type: 'json',\n          complete: callback\n        });\n      }\n    },\n\n    create: {\n      tick: function() {\n\n      },\n      examples: function(json) {\n        var\n          types      = json['Types'],\n          text       = json['Text'],\n          states     = json['States'],\n          variations = json['Variations'],\n\n          $element,\n          html\n        ;\n        $.each(types, function(name, type){\n          html += '
' + name + '')\n          .addClass('annotation')\n          .appendTo($example)\n        ;\n      }\n\n      if( $example.find('.ace_editor').size() === 0) {\n        $code = $('
')\n          .data('type', 'html')\n          .addClass('code')\n          .html(code)\n          .hide()\n            .appendTo($annotation)\n        ;\n        $.proxy(handler.initializeCode, $code)();\n      }\n\n      if( ($demo.first().is(':visible') || type == 'developer') && type != 'designer' ) {\n        $demo.hide();\n        $header.show();\n        $annotation.fadeIn(500);\n      }\n      else {\n        $annotation.hide();\n        if($demo.size() > 1) {\n          $demo.show();\n        }\n        else {\n          $demo.fadeIn(500);\n        }\n      }\n    },\n\n    createAnnotation: function() {\n      if(!$(this).data('type')) {\n        $(this).data('type', 'html');\n      }\n      $(this)\n        .wrap('
')\n        .parent()\n        .hide()\n      ;\n    },\n\n    resizeCode: function() {\n      $('.ace_editor')\n        .each(function() {\n          var\n            $code = $(this),\n            padding     = 20,\n            editor,\n            editorSession,\n            codeHeight\n          ;\n          $code.css('height', 'auto');\n          editor        = ace.edit($code[0]);\n          editorSession = editor.getSession();\n          codeHeight = editorSession.getScreenLength() * editor.renderer.lineHeight + padding;\n          $code.css('height', codeHeight);\n          editor.resize();\n        })\n      ;\n    },\n\n    makeCode: function() {\n      if(window.ace !== undefined) {\n        $code\n          .filter(':visible')\n          .each(handler.initializeCode)\n        ;\n        $existingCode\n          .each(handler.createAnnotation)\n        ;\n      }\n    },\n\n    makeStickyColumns: function() {\n      var\n        $visibleStuck = $(this).find('.fixed.column .image, .fixed.column .content'),\n        isInitialized = ($visibleStuck.parent('.sticky-wrapper').size() !== 0)\n      ;\n      if(!isInitialized) {\n        $visibleStuck\n          .waypoint('sticky', {\n            offset     : 65,\n            stuckClass : 'fixed'\n          })\n        ;\n      }\n      // apparently this doesnt refresh on first hit\n      $.waypoints('refresh');\n      $.waypoints('refresh');\n    },\n\n    initializeCode: function() {\n      var\n        $code        = $(this).show(),\n        code         = $code.html(),\n        existingCode = $code.hasClass('existing'),\n        contentType  = $code.data('type')    || 'javascript',\n        title        = $code.data('title')   || false,\n        demo         = $code.data('demo')    || false,\n        preview      = $code.data('preview') || false,\n        label        = $code.data('label')   || false,\n        displayType  = {\n          html       : 'HTML',\n          javascript : 'Javascript',\n          css        : 'CSS',\n          text       : 'Command Line',\n          sh         : 'Command Line'\n        },\n        indent     = handler.getIndent(code) || 4,\n        padding    = 20,\n        whiteSpace,\n        $label,\n        editor,\n        editorSession,\n        codeHeight\n      ;\n\n      // trim whitespace\n      whiteSpace = new RegExp('\\\\n\\\\s{' + indent + '}', 'g');\n      code = $.trim(code).replace(whiteSpace, '\\n');\n\n      if(contentType == 'html') {\n        $code.text(code);\n      }\n      else {\n        $code.html(code);\n      }\n\n      // evaluate if specified\n      if($code.hasClass('evaluated')) {\n        eval(code);\n      }\n\n      // initialize\n      editor        = ace.edit($code[0]);\n      editorSession = editor.getSession();\n\n      editor.setTheme('ace/theme/github');\n      editor.setShowPrintMargin(false);\n      editor.setReadOnly(true);\n      editor.renderer.setShowGutter(false);\n      editor.setHighlightActiveLine(false);\n      editorSession.setMode('ace/mode/'+ contentType);\n      editorSession.setUseWrapMode(true);\n      editorSession.setTabSize(2);\n      editorSession.setUseSoftTabs(true);\n\n      codeHeight = editorSession.getScreenLength() * editor.renderer.lineHeight + padding;\n      $(this)\n        .height(codeHeight + 'px')\n        .wrap('
')\n      ;\n      // add label\n      if(title) {\n        $('
')\n          .addClass('ui attached top label')\n          .html('' + title + '' + '' + (displayType[contentType] || contentType) + '')\n          .prependTo( $(this).parent() )\n        ;\n      }\n      if(label) {\n        $('
')\n          .addClass('ui pointing below label')\n          .html(displayType[contentType] || contentType)\n          .insertBefore ( $(this).parent() )\n        ;\n      }\n      // add run code button\n      if(demo) {\n        $('')\n          .addClass('ui pointing below black label')\n          .html('Run Code')\n          .on('click', function() {\n            eval(code);\n          })\n          .insertBefore ( $(this).parent() )\n        ;\n      }\n      // add preview if specified\n      if(preview) {\n        $(code)\n          .insertAfter( $(this).parent() )\n        ;\n      }\n      editor.resize();\n    },\n\n    movePeek: function() {\n      if( $('.stuck .peek').size() > 0 ) {\n        $('.peek')\n          .toggleClass('pushed')\n        ;\n      }\n      else {\n        $('.peek')\n          .removeClass('pushed')\n        ;\n      }\n    },\n\n    menu: {\n      mouseenter: function() {\n        $(this)\n          .stop()\n          .animate({\n            width: '155px'\n          }, 300, function() {\n            $(this).find('.text').show();\n          })\n        ;\n      },\n      mouseleave: function(event) {\n        $(this).find('.text').hide();\n        $(this)\n          .stop()\n          .animate({\n            width: '70px'\n          }, 300)\n        ;\n    }\n\n    },\n\n    peek: function() {\n      var\n        $body     = $('html, body'),\n        $header   = $(this),\n        $menu     = $header.parent(),\n        $group    = $menu.children(),\n        $headers  = $group.add( $group.find('.menu .item') ),\n        $waypoint = $waypoints.eq( $group.index( $header ) ),\n        offset\n      ;\n      offset    = $waypoint.offset().top - 70;\n      if(!$header.hasClass('active') ) {\n        $menu\n          .addClass('animating')\n        ;\n        $headers\n          .removeClass('active')\n        ;\n        $body\n          .stop()\n          .one('scroll', function() {\n            $body.stop();\n          })\n          .animate({\n            scrollTop: offset\n          }, 500)\n          .promise()\n            .done(function() {\n              $menu\n                .removeClass('animating')\n              ;\n              $headers\n                .removeClass('active')\n              ;\n              $header\n                .addClass('active')\n              ;\n              $waypoint\n                .css('color', $header.css('border-right-color'))\n              ;\n              $waypoints\n                .removeAttr('style')\n              ;\n            })\n        ;\n      }\n    },\n\n    peekSub: function() {\n      var\n        $body           = $('html, body'),\n        $subHeader      = $(this),\n        $header         = $subHeader.parents('.item'),\n        $menu           = $header.parent(),\n        $subHeaderGroup = $header.find('.item'),\n        $headerGroup    = $menu.children(),\n        $waypoint       = $('h2').eq( $headerGroup.index( $header ) ),\n        $subWaypoint    = $waypoint.nextAll('h3').eq( $subHeaderGroup.index($subHeader) ),\n        offset          = $subWaypoint.offset().top - 80\n      ;\n      $menu\n        .addClass('animating')\n      ;\n      $headerGroup\n        .removeClass('active')\n      ;\n      $subHeaderGroup\n        .removeClass('active')\n      ;\n      $body\n        .stop()\n        .animate({\n          scrollTop: offset\n        }, 500, function() {\n          $menu\n            .removeClass('animating')\n          ;\n          $subHeader\n            .addClass('active')\n          ;\n        })\n        .one('scroll', function() {\n          $body.stop();\n        })\n      ;\n    },\n\n    swapStyle: function() {\n      var\n        theme = $(this).data('theme')\n      ;\n      $(this)\n        .addClass('active')\n        .siblings()\n          .removeClass('active')\n      ;\n      $('head link.ui')\n        .each(function() {\n          var\n            href         = $(this).attr('href'),\n            subDirectory = href.split('/')[3],\n            newLink      = href.replace(subDirectory, theme)\n          ;\n          $(this)\n            .attr('href', newLink)\n          ;\n        })\n      ;\n    }\n  };\n\n  $(window)\n    .on('resize', function() {\n      clearTimeout(handler.timer);\n      handler.timer = setTimeout(handler.resizeCode, 100);\n    })\n  ;\n\n  $downloadDropdown\n    .dropdown({\n      on         : 'click',\n      transition : 'scale'\n    })\n  ;\n\n  // attach events\n  if($.fn.tablesort !== undefined) {\n    $sortTable\n      .tablesort()\n    ;\n  }\n\n  if( $pageTabs.size() > 0 ) {\n    $pageTabs\n      .tab({\n        onTabInit : handler.makeCode,\n        onTabLoad : function() {\n          $.proxy(handler.makeStickyColumns, this)();\n          $peekItem.removeClass('active').first().addClass('active');\n        }\n      })\n    ;\n  }\n  else {\n    handler.makeCode();\n  }\n\n\n  handler.createIcon();\n\n  $example\n    .one('mousemove', handler.generateCode)\n    .find('i.code')\n      .on('click', handler.createCode)\n  ;\n\n  $shownExample\n    .each(handler.createCode)\n  ;\n\n  $helpPopup\n    .popup()\n  ;\n\n  $swap\n    .on('click', handler.swapStyle)\n  ;\n\n  $increaseFont\n    .on('click', handler.font.increase)\n  ;\n  $decreaseFont\n    .on('click', handler.font.decrease)\n  ;\n\n  $developer\n    .on('click', handler.developerMode)\n  ;\n  $designer\n    .on('click', handler.designerMode)\n  ;\n  $overview\n    .on('click', handler.overviewMode)\n  ;\n\n  $menuPopup\n    .popup({\n      position   : 'bottom center',\n      className: {\n        popup: 'ui popup'\n      }\n    })\n  ;\n  $sortableTables\n    .tablesort()\n  ;\n\n  $menuDropdown\n    .dropdown({\n      on         : 'hover',\n      action     : 'nothing'\n    })\n  ;\n\n  $sidebarButton\n    .on('mouseenter', handler.menu.mouseenter)\n    .on('mouseleave', handler.menu.mouseleave)\n  ;\n  $menu\n    .sidebar('attach events', '.launch.button, .launch.item')\n    .sidebar('attach events', $hideMenu, 'hide')\n  ;\n  $waypoints\n    .waypoint({\n      continuous : false,\n      offset     : 100,\n      handler    : function(direction) {\n        var\n          index = (direction == 'down')\n            ? $waypoints.index(this)\n            : ($waypoints.index(this) - 1 >= 0)\n              ? ($waypoints.index(this) - 1)\n              : 0\n        ;\n        $peekItem\n          .removeClass('active')\n          .eq( index )\n            .addClass('active')\n        ;\n      }\n    })\n  ;\n  $('body')\n    .waypoint({\n      handler: function(direction) {\n        if(direction == 'down') {\n          if( !$('body').is(':animated') ) {\n            $peekItem\n              .removeClass('active')\n              .eq( $peekItem.size() - 1 )\n                .addClass('active')\n            ;\n          }\n        }\n      },\n      offset: 'bottom-in-view'\n     })\n  ;\n  $peek\n    .waypoint('sticky', {\n      offset     : 85,\n      stuckClass : 'stuck'\n    })\n  ;\n\n  $peekItem\n    .on('click', handler.peek)\n  ;\n  $peekSubItem\n    .on('click', handler.peekSub)\n  ;\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.ready)\n;\n",
      "content": "// namespace\nwindow.semantic = {\n  handler: {}\n};\n\n// Allow for console.log to not break IE\nif (typeof window.console == \"undefined\" || typeof window.console.log == \"undefined\") {\n  window.console = {\n    log  : function() {},\n    info : function(){},\n    warn : function(){}\n  };\n}\nif(typeof window.console.group == 'undefined' || typeof window.console.groupEnd == 'undefined' || typeof window.console.groupCollapsed == 'undefined') {\n  window.console.group = function(){};\n  window.console.groupEnd = function(){};\n  window.console.groupCollapsed = function(){};\n}\nif(typeof window.console.markTimeline == 'undefined') {\n  window.console.markTimeline = function(){};\n}\nwindow.console.clear = function(){};\n\n// ready event\nsemantic.ready = function() {\n\n  // selector cache\n  var\n\n    $peek             = $('.peek'),\n    $peekItem         = $peek.children('.menu').children('a.item'),\n    $peekSubItem      = $peek.find('.item .menu .item'),\n    $sortableTables   = $('.sortable.table'),\n\n    $ui               = $('.ui').not('.hover, .down'),\n    $swap             = $('.theme.menu .item'),\n    $menu             = $('#menu'),\n    $hideMenu         = $('#menu .hide.item'),\n    $sortTable        = $('.sortable.table'),\n    $demo             = $('.demo'),\n    $waypoints        = $peek.closest('.tab, .container').find('h2').first().siblings('h2').addBack(),\n\n    $menuPopup        = $('.ui.main.menu .popup.item'),\n    $menuDropdown     = $('.ui.main.menu .dropdown'),\n    $pageTabMenu      = $('body > .tab.segment .tabular.menu'),\n    $pageTabs         = $('body > .tab.segment .menu .item'),\n\n    $downloadDropdown = $('.download.buttons .dropdown'),\n\n    $helpPopup        = $('.header .help.icon'),\n\n    $example          = $('.example'),\n    $shownExample     = $example.filter('.shown'),\n\n    $developer        = $('.developer.item'),\n    $overview         = $('.overview.item, .overview.button'),\n    $designer         = $('.designer.item'),\n\n    $sidebarButton    = $('.attached.launch.button'),\n\n    $increaseFont     = $('.font .increase'),\n    $decreaseFont     = $('.font .decrease'),\n\n    $code             = $('div.code').not('.existing'),\n    $existingCode     = $('.existing.code'),\n\n    // alias\n    handler\n  ;\n\n\n  // event handlers\n  handler = {\n\n    createIcon: function() {\n      $example\n        .each(function(){\n          $('')\n            .addClass('icon code')\n            .prependTo( $(this) )\n          ;\n        })\n      ;\n    },\n\n    getSpecification: function(callback) {\n      var\n        url = $(this).data('url') || false\n      ;\n      callback = callback || function(){};\n      if(url) {\n        $.ajax({\n          method: 'get',\n          url: url,\n          type: 'json',\n          complete: callback\n        });\n      }\n    },\n\n    create: {\n      tick: function() {\n\n      },\n      examples: function(json) {\n        var\n          types      = json['Types'],\n          text       = json['Text'],\n          states     = json['States'],\n          variations = json['Variations'],\n\n          $element,\n          html\n        ;\n        $.each(types, function(name, type){\n          html += '
' + name + '')\n          .addClass('annotation')\n          .appendTo($example)\n        ;\n      }\n\n      if( $example.find('.ace_editor').size() === 0) {\n        $code = $('
')\n          .data('type', 'html')\n          .addClass('code')\n          .html(code)\n          .hide()\n            .appendTo($annotation)\n        ;\n        $.proxy(handler.initializeCode, $code)();\n      }\n\n      if( ($demo.first().is(':visible') || type == 'developer') && type != 'designer' ) {\n        $demo.hide();\n        $header.show();\n        $annotation.fadeIn(500);\n      }\n      else {\n        $annotation.hide();\n        if($demo.size() > 1) {\n          $demo.show();\n        }\n        else {\n          $demo.fadeIn(500);\n        }\n      }\n    },\n\n    createAnnotation: function() {\n      if(!$(this).data('type')) {\n        $(this).data('type', 'html');\n      }\n      $(this)\n        .wrap('
')\n        .parent()\n        .hide()\n      ;\n    },\n\n    resizeCode: function() {\n      $('.ace_editor')\n        .each(function() {\n          var\n            $code = $(this),\n            padding     = 20,\n            editor,\n            editorSession,\n            codeHeight\n          ;\n          $code.css('height', 'auto');\n          editor        = ace.edit($code[0]);\n          editorSession = editor.getSession();\n          codeHeight = editorSession.getScreenLength() * editor.renderer.lineHeight + padding;\n          $code.css('height', codeHeight);\n          editor.resize();\n        })\n      ;\n    },\n\n    makeCode: function() {\n      if(window.ace !== undefined) {\n        $code\n          .filter(':visible')\n          .each(handler.initializeCode)\n        ;\n        $existingCode\n          .each(handler.createAnnotation)\n        ;\n      }\n    },\n\n    makeStickyColumns: function() {\n      var\n        $visibleStuck = $(this).find('.fixed.column .image, .fixed.column .content'),\n        isInitialized = ($visibleStuck.parent('.sticky-wrapper').size() !== 0)\n      ;\n      if(!isInitialized) {\n        $visibleStuck\n          .waypoint('sticky', {\n            offset     : 65,\n            stuckClass : 'fixed'\n          })\n        ;\n      }\n      // apparently this doesnt refresh on first hit\n      $.waypoints('refresh');\n      $.waypoints('refresh');\n    },\n\n    initializeCode: function() {\n      var\n        $code        = $(this).show(),\n        code         = $code.html(),\n        existingCode = $code.hasClass('existing'),\n        contentType  = $code.data('type')    || 'javascript',\n        title        = $code.data('title')   || false,\n        demo         = $code.data('demo')    || false,\n        preview      = $code.data('preview') || false,\n        label        = $code.data('label')   || false,\n        displayType  = {\n          html       : 'HTML',\n          javascript : 'Javascript',\n          css        : 'CSS',\n          text       : 'Command Line',\n          sh         : 'Command Line'\n        },\n        indent     = handler.getIndent(code) || 4,\n        padding    = 20,\n        whiteSpace,\n        $label,\n        editor,\n        editorSession,\n        codeHeight\n      ;\n\n      // trim whitespace\n      whiteSpace = new RegExp('\\\\n\\\\s{' + indent + '}', 'g');\n      code = $.trim(code).replace(whiteSpace, '\\n');\n\n      if(contentType == 'html') {\n        $code.text(code);\n      }\n      else {\n        $code.html(code);\n      }\n\n      // evaluate if specified\n      if($code.hasClass('evaluated')) {\n        eval(code);\n      }\n\n      // initialize\n      editor        = ace.edit($code[0]);\n      editorSession = editor.getSession();\n\n      editor.setTheme('ace/theme/github');\n      editor.setShowPrintMargin(false);\n      editor.setReadOnly(true);\n      editor.renderer.setShowGutter(false);\n      editor.setHighlightActiveLine(false);\n      editorSession.setMode('ace/mode/'+ contentType);\n      editorSession.setUseWrapMode(true);\n      editorSession.setTabSize(2);\n      editorSession.setUseSoftTabs(true);\n\n      codeHeight = editorSession.getScreenLength() * editor.renderer.lineHeight + padding;\n      $(this)\n        .height(codeHeight + 'px')\n        .wrap('
')\n      ;\n      // add label\n      if(title) {\n        $('
')\n          .addClass('ui attached top label')\n          .html('' + title + '' + '' + (displayType[contentType] || contentType) + '')\n          .prependTo( $(this).parent() )\n        ;\n      }\n      if(label) {\n        $('
')\n          .addClass('ui pointing below label')\n          .html(displayType[contentType] || contentType)\n          .insertBefore ( $(this).parent() )\n        ;\n      }\n      // add run code button\n      if(demo) {\n        $('')\n          .addClass('ui pointing below black label')\n          .html('Run Code')\n          .on('click', function() {\n            eval(code);\n          })\n          .insertBefore ( $(this).parent() )\n        ;\n      }\n      // add preview if specified\n      if(preview) {\n        $(code)\n          .insertAfter( $(this).parent() )\n        ;\n      }\n      editor.resize();\n    },\n\n    movePeek: function() {\n      if( $('.stuck .peek').size() > 0 ) {\n        $('.peek')\n          .toggleClass('pushed')\n        ;\n      }\n      else {\n        $('.peek')\n          .removeClass('pushed')\n        ;\n      }\n    },\n\n    menu: {\n      mouseenter: function() {\n        $(this)\n          .stop()\n          .animate({\n            width: '155px'\n          }, 300, function() {\n            $(this).find('.text').show();\n          })\n        ;\n      },\n      mouseleave: function(event) {\n        $(this).find('.text').hide();\n        $(this)\n          .stop()\n          .animate({\n            width: '70px'\n          }, 300)\n        ;\n    }\n\n    },\n\n    peek: function() {\n      var\n        $body     = $('html, body'),\n        $header   = $(this),\n        $menu     = $header.parent(),\n        $group    = $menu.children(),\n        $headers  = $group.add( $group.find('.menu .item') ),\n        $waypoint = $waypoints.eq( $group.index( $header ) ),\n        offset\n      ;\n      offset    = $waypoint.offset().top - 70;\n      if(!$header.hasClass('active') ) {\n        $menu\n          .addClass('animating')\n        ;\n        $headers\n          .removeClass('active')\n        ;\n        $body\n          .stop()\n          .one('scroll', function() {\n            $body.stop();\n          })\n          .animate({\n            scrollTop: offset\n          }, 500)\n          .promise()\n            .done(function() {\n              $menu\n                .removeClass('animating')\n              ;\n              $headers\n                .removeClass('active')\n              ;\n              $header\n                .addClass('active')\n              ;\n              $waypoint\n                .css('color', $header.css('border-right-color'))\n              ;\n              $waypoints\n                .removeAttr('style')\n              ;\n            })\n        ;\n      }\n    },\n\n    peekSub: function() {\n      var\n        $body           = $('html, body'),\n        $subHeader      = $(this),\n        $header         = $subHeader.parents('.item'),\n        $menu           = $header.parent(),\n        $subHeaderGroup = $header.find('.item'),\n        $headerGroup    = $menu.children(),\n        $waypoint       = $('h2').eq( $headerGroup.index( $header ) ),\n        $subWaypoint    = $waypoint.nextAll('h3').eq( $subHeaderGroup.index($subHeader) ),\n        offset          = $subWaypoint.offset().top - 80\n      ;\n      $menu\n        .addClass('animating')\n      ;\n      $headerGroup\n        .removeClass('active')\n      ;\n      $subHeaderGroup\n        .removeClass('active')\n      ;\n      $body\n        .stop()\n        .animate({\n          scrollTop: offset\n        }, 500, function() {\n          $menu\n            .removeClass('animating')\n          ;\n          $subHeader\n            .addClass('active')\n          ;\n        })\n        .one('scroll', function() {\n          $body.stop();\n        })\n      ;\n    },\n\n    swapStyle: function() {\n      var\n        theme = $(this).data('theme')\n      ;\n      $(this)\n        .addClass('active')\n        .siblings()\n          .removeClass('active')\n      ;\n      $('head link.ui')\n        .each(function() {\n          var\n            href         = $(this).attr('href'),\n            subDirectory = href.split('/')[3],\n            newLink      = href.replace(subDirectory, theme)\n          ;\n          $(this)\n            .attr('href', newLink)\n          ;\n        })\n      ;\n    }\n  };\n\n  $(window)\n    .on('resize', function() {\n      clearTimeout(handler.timer);\n      handler.timer = setTimeout(handler.resizeCode, 100);\n    })\n  ;\n\n  $downloadDropdown\n    .dropdown({\n      on         : 'click',\n      transition : 'scale'\n    })\n  ;\n\n  // attach events\n  if($.fn.tablesort !== undefined) {\n    $sortTable\n      .tablesort()\n    ;\n  }\n\n  if( $pageTabs.size() > 0 ) {\n    $pageTabs\n      .tab({\n        onTabInit : handler.makeCode,\n        onTabLoad : function() {\n          $.proxy(handler.makeStickyColumns, this)();\n          $peekItem.removeClass('active').first().addClass('active');\n        }\n      })\n    ;\n  }\n  else {\n    handler.makeCode();\n  }\n\n\n  handler.createIcon();\n\n  $example\n    .one('mousemove', handler.generateCode)\n    .find('i.code')\n      .on('click', handler.createCode)\n  ;\n\n  $shownExample\n    .each(handler.createCode)\n  ;\n\n  $helpPopup\n    .popup()\n  ;\n\n  $swap\n    .on('click', handler.swapStyle)\n  ;\n\n  $increaseFont\n    .on('click', handler.font.increase)\n  ;\n  $decreaseFont\n    .on('click', handler.font.decrease)\n  ;\n\n  $developer\n    .on('click', handler.developerMode)\n  ;\n  $designer\n    .on('click', handler.designerMode)\n  ;\n  $overview\n    .on('click', handler.overviewMode)\n  ;\n\n  $menuPopup\n    .popup({\n      position   : 'bottom center',\n      className: {\n        popup: 'ui popup'\n      }\n    })\n  ;\n  $sortableTables\n    .tablesort()\n  ;\n\n  $menuDropdown\n    .dropdown({\n      on         : 'hover',\n      action     : 'nothing'\n    })\n  ;\n\n  $sidebarButton\n    .on('mouseenter', handler.menu.mouseenter)\n    .on('mouseleave', handler.menu.mouseleave)\n  ;\n  $menu\n    .sidebar('attach events', '.launch.button, .launch.item')\n    .sidebar('attach events', $hideMenu, 'hide')\n  ;\n  $waypoints\n    .waypoint({\n      continuous : false,\n      offset     : 100,\n      handler    : function(direction) {\n        var\n          index = (direction == 'down')\n            ? $waypoints.index(this)\n            : ($waypoints.index(this) - 1 >= 0)\n              ? ($waypoints.index(this) - 1)\n              : 0\n        ;\n        $peekItem\n          .removeClass('active')\n          .eq( index )\n            .addClass('active')\n        ;\n      }\n    })\n  ;\n  $('body')\n    .waypoint({\n      handler: function(direction) {\n        if(direction == 'down') {\n          if( !$('body').is(':animated') ) {\n            $peekItem\n              .removeClass('active')\n              .eq( $peekItem.size() - 1 )\n                .addClass('active')\n            ;\n          }\n        }\n      },\n      offset: 'bottom-in-view'\n     })\n  ;\n  $peek\n    .waypoint('sticky', {\n      offset     : 85,\n      stuckClass : 'stuck'\n    })\n  ;\n\n  $peekItem\n    .on('click', handler.peek)\n  ;\n  $peekSubItem\n    .on('click', handler.peekSub)\n  ;\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.ready)\n;\n",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "semantic.js",
      "date": "2013-12-03T17:44:32.000Z",
      "slug": "javascript-semantic",
      "url": "/javascript/semantic.js",
      "urls": [
        "/javascript/semantic.js"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/javascript/shape.js",
      "relativePath": "javascript/shape.js",
      "basename": "shape",
      "outBasename": "shape",
      "extension": "js",
      "outExtension": "js",
      "extensions": [
        "js"
      ],
      "filename": "shape.js",
      "fullDirPath": "/home/jack/projects/semantic/server/files/javascript",
      "outPath": "/home/jack/projects/semantic/docs/javascript/shape.js",
      "outDirPath": "/home/jack/projects/semantic/docs/javascript",
      "outFilename": "shape.js",
      "relativeOutPath": "javascript/shape.js",
      "relativeDirPath": "javascript",
      "relativeOutDirPath": "javascript",
      "relativeBase": "javascript/shape",
      "relativeOutBase": "javascript/shape",
      "contentType": "application/javascript",
      "outContentType": "application/javascript",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:04.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.115Z",
      "exists": true,
      "encoding": "utf8",
      "source": "semantic.shape = {};\n\n// ready event\nsemantic.shape.ready = function() {\n\n  // selector cache\n  var\n    $demo            = $('.demo'),\n    $dogDemo         = $('.dog.shape'),\n    $directionButton = $('.direction .button'),\n    $shapeButton     = $('.type.buttons .button'),\n    // alias\n    handler\n  ;\n\n  // event handlers\n  handler = {\n    rotate: function() {\n      var\n        $shape    = $(this).closest('.example').find('.ui.shape'),\n        direction = $(this).data('direction') || false,\n        animation = $(this).data('animation') || false\n      ;\n      if(direction && animation) {\n        $shape\n          .shape(animation + '.' + direction)\n        ;\n      }\n    },\n\n    removeShape: function(){\n      var\n        shape = $(this).data('shape') || false\n      ;\n      if(shape) {\n        $demo\n          .removeClass(shape)\n        ;\n      }\n    },\n\n    changeShape: function() {\n      var\n        $shape       = $(this),\n        $otherShapes = $shape.siblings(),\n        shape        = $shape.data('shape')\n      ;\n      $shape\n        .addClass('active')\n      ;\n      $otherShapes\n        .removeClass('active')\n        .each(handler.removeShape)\n      ;\n      $demo\n        .addClass(shape)\n      ;\n    }\n  };\n\n  // attach events\n  $demo\n    .shape({\n      debug: true,\n      verbose: true\n    })\n  ;\n  $directionButton\n    .on('click', handler.rotate)\n    .popup({\n      position  : 'bottom center'\n    })\n  ;\n  $shapeButton\n    .on('click', handler.changeShape)\n  ;\n\n  $dogDemo\n    .shape()\n  ;\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.shape.ready)\n;",
      "content": "semantic.shape = {};\n\n// ready event\nsemantic.shape.ready = function() {\n\n  // selector cache\n  var\n    $demo            = $('.demo'),\n    $dogDemo         = $('.dog.shape'),\n    $directionButton = $('.direction .button'),\n    $shapeButton     = $('.type.buttons .button'),\n    // alias\n    handler\n  ;\n\n  // event handlers\n  handler = {\n    rotate: function() {\n      var\n        $shape    = $(this).closest('.example').find('.ui.shape'),\n        direction = $(this).data('direction') || false,\n        animation = $(this).data('animation') || false\n      ;\n      if(direction && animation) {\n        $shape\n          .shape(animation + '.' + direction)\n        ;\n      }\n    },\n\n    removeShape: function(){\n      var\n        shape = $(this).data('shape') || false\n      ;\n      if(shape) {\n        $demo\n          .removeClass(shape)\n        ;\n      }\n    },\n\n    changeShape: function() {\n      var\n        $shape       = $(this),\n        $otherShapes = $shape.siblings(),\n        shape        = $shape.data('shape')\n      ;\n      $shape\n        .addClass('active')\n      ;\n      $otherShapes\n        .removeClass('active')\n        .each(handler.removeShape)\n      ;\n      $demo\n        .addClass(shape)\n      ;\n    }\n  };\n\n  // attach events\n  $demo\n    .shape({\n      debug: true,\n      verbose: true\n    })\n  ;\n  $directionButton\n    .on('click', handler.rotate)\n    .popup({\n      position  : 'bottom center'\n    })\n  ;\n  $shapeButton\n    .on('click', handler.changeShape)\n  ;\n\n  $dogDemo\n    .shape()\n  ;\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.shape.ready)\n;",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "shape.js",
      "date": "2013-12-02T15:39:04.000Z",
      "slug": "javascript-shape",
      "url": "/javascript/shape.js",
      "urls": [
        "/javascript/shape.js"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/javascript/sidebar.js",
      "relativePath": "javascript/sidebar.js",
      "basename": "sidebar",
      "outBasename": "sidebar",
      "extension": "js",
      "outExtension": "js",
      "extensions": [
        "js"
      ],
      "filename": "sidebar.js",
      "fullDirPath": "/home/jack/projects/semantic/server/files/javascript",
      "outPath": "/home/jack/projects/semantic/docs/javascript/sidebar.js",
      "outDirPath": "/home/jack/projects/semantic/docs/javascript",
      "outFilename": "sidebar.js",
      "relativeOutPath": "javascript/sidebar.js",
      "relativeDirPath": "javascript",
      "relativeOutDirPath": "javascript",
      "relativeBase": "javascript/sidebar",
      "relativeOutBase": "javascript/sidebar",
      "contentType": "application/javascript",
      "outContentType": "application/javascript",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:04.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.120Z",
      "exists": true,
      "encoding": "utf8",
      "source": "semantic.sidebar = {};\n\n// ready event\nsemantic.sidebar.ready = function() {\n\n  // selector cache\n  var\n    // alias\n    handler\n  ;\n\n  $('.variation .button')\n    .on('click', function() {\n      $(this)\n        .toggleClass('active')\n        .siblings()\n        .removeClass('active')\n      ;\n      $('.sidebar')\n        .filter($(this).data('variation') ).first()\n        .sidebar('toggle')\n      ;\n    })\n  ;\n  $('.styled.sidebar').first()\n    .sidebar('attach events', '.styled.example .button')\n  ;\n\n  $('.floating.sidebar').first()\n    .sidebar('attach events', '.floating.example .button')\n  ;\n\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.sidebar.ready)\n;",
      "content": "semantic.sidebar = {};\n\n// ready event\nsemantic.sidebar.ready = function() {\n\n  // selector cache\n  var\n    // alias\n    handler\n  ;\n\n  $('.variation .button')\n    .on('click', function() {\n      $(this)\n        .toggleClass('active')\n        .siblings()\n        .removeClass('active')\n      ;\n      $('.sidebar')\n        .filter($(this).data('variation') ).first()\n        .sidebar('toggle')\n      ;\n    })\n  ;\n  $('.styled.sidebar').first()\n    .sidebar('attach events', '.styled.example .button')\n  ;\n\n  $('.floating.sidebar').first()\n    .sidebar('attach events', '.floating.example .button')\n  ;\n\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.sidebar.ready)\n;",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "sidebar.js",
      "date": "2013-12-02T15:39:04.000Z",
      "slug": "javascript-sidebar",
      "url": "/javascript/sidebar.js",
      "urls": [
        "/javascript/sidebar.js"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/javascript/tab.js",
      "relativePath": "javascript/tab.js",
      "basename": "tab",
      "outBasename": "tab",
      "extension": "js",
      "outExtension": "js",
      "extensions": [
        "js"
      ],
      "filename": "tab.js",
      "fullDirPath": "/home/jack/projects/semantic/server/files/javascript",
      "outPath": "/home/jack/projects/semantic/docs/javascript/tab.js",
      "outDirPath": "/home/jack/projects/semantic/docs/javascript",
      "outFilename": "tab.js",
      "relativeOutPath": "javascript/tab.js",
      "relativeDirPath": "javascript",
      "relativeOutDirPath": "javascript",
      "relativeBase": "javascript/tab",
      "relativeOutBase": "javascript/tab",
      "contentType": "application/javascript",
      "outContentType": "application/javascript",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:04.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.125Z",
      "exists": true,
      "encoding": "utf8",
      "source": "semantic.dropdown = {};\n\n// ready event\nsemantic.dropdown.ready = function() {\n\n  // selector cache\n  var\n    // alias\n    handler\n  ;\n\n  // event handlers\n  handler = {\n\n  };\n\n  $('.first.example .menu .item')\n    .tab({\n      context: '.first.example'\n    })\n  ;\n\n  $('.history.example .menu .item')\n    .tab({\n      context : '.history.example',\n      history : true,\n      path    : '/modules/tab.html'\n    })\n  ;\n\n  $('.dynamic.example .menu .item')\n    .tab({\n      context : '.dynamic.example',\n      auto    : true,\n      path    : '/modules/tab.html'\n    })\n  ;\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.dropdown.ready)\n;",
      "content": "semantic.dropdown = {};\n\n// ready event\nsemantic.dropdown.ready = function() {\n\n  // selector cache\n  var\n    // alias\n    handler\n  ;\n\n  // event handlers\n  handler = {\n\n  };\n\n  $('.first.example .menu .item')\n    .tab({\n      context: '.first.example'\n    })\n  ;\n\n  $('.history.example .menu .item')\n    .tab({\n      context : '.history.example',\n      history : true,\n      path    : '/modules/tab.html'\n    })\n  ;\n\n  $('.dynamic.example .menu .item')\n    .tab({\n      context : '.dynamic.example',\n      auto    : true,\n      path    : '/modules/tab.html'\n    })\n  ;\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.dropdown.ready)\n;",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "tab.js",
      "date": "2013-12-02T15:39:04.000Z",
      "slug": "javascript-tab",
      "url": "/javascript/tab.js",
      "urls": [
        "/javascript/tab.js"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/javascript/table.js",
      "relativePath": "javascript/table.js",
      "basename": "table",
      "outBasename": "table",
      "extension": "js",
      "outExtension": "js",
      "extensions": [
        "js"
      ],
      "filename": "table.js",
      "fullDirPath": "/home/jack/projects/semantic/server/files/javascript",
      "outPath": "/home/jack/projects/semantic/docs/javascript/table.js",
      "outDirPath": "/home/jack/projects/semantic/docs/javascript",
      "outFilename": "table.js",
      "relativeOutPath": "javascript/table.js",
      "relativeDirPath": "javascript",
      "relativeOutDirPath": "javascript",
      "relativeBase": "javascript/table",
      "relativeOutBase": "javascript/table",
      "contentType": "application/javascript",
      "outContentType": "application/javascript",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:04.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.130Z",
      "exists": true,
      "encoding": "utf8",
      "source": "semantic.table = {};\n\n// ready event\nsemantic.table.ready = function() {\n\n  // selector cache\n  var\n    // alias\n    handler\n  ;\n\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.table.ready)\n;",
      "content": "semantic.table = {};\n\n// ready event\nsemantic.table.ready = function() {\n\n  // selector cache\n  var\n    // alias\n    handler\n  ;\n\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.table.ready)\n;",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "table.js",
      "date": "2013-12-02T15:39:04.000Z",
      "slug": "javascript-table",
      "url": "/javascript/table.js",
      "urls": [
        "/javascript/table.js"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/javascript/transition.js",
      "relativePath": "javascript/transition.js",
      "basename": "transition",
      "outBasename": "transition",
      "extension": "js",
      "outExtension": "js",
      "extensions": [
        "js"
      ],
      "filename": "transition.js",
      "fullDirPath": "/home/jack/projects/semantic/server/files/javascript",
      "outPath": "/home/jack/projects/semantic/docs/javascript/transition.js",
      "outDirPath": "/home/jack/projects/semantic/docs/javascript",
      "outFilename": "transition.js",
      "relativeOutPath": "javascript/transition.js",
      "relativeDirPath": "javascript",
      "relativeOutDirPath": "javascript",
      "relativeBase": "javascript/transition",
      "relativeOutBase": "javascript/transition",
      "contentType": "application/javascript",
      "outContentType": "application/javascript",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:04.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.134Z",
      "exists": true,
      "encoding": "utf8",
      "source": "semantic.transition = {};\n\n// ready event\nsemantic.transition.ready = function() {\n\n  // selector cache\n  var \n    handler\n  ;\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.transition.ready)\n;",
      "content": "semantic.transition = {};\n\n// ready event\nsemantic.transition.ready = function() {\n\n  // selector cache\n  var \n    handler\n  ;\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.transition.ready)\n;",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "transition.js",
      "date": "2013-12-02T15:39:04.000Z",
      "slug": "javascript-transition",
      "url": "/javascript/transition.js",
      "urls": [
        "/javascript/transition.js"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/javascript/validate-form.js",
      "relativePath": "javascript/validate-form.js",
      "basename": "validate-form",
      "outBasename": "validate-form",
      "extension": "js",
      "outExtension": "js",
      "extensions": [
        "js"
      ],
      "filename": "validate-form.js",
      "fullDirPath": "/home/jack/projects/semantic/server/files/javascript",
      "outPath": "/home/jack/projects/semantic/docs/javascript/validate-form.js",
      "outDirPath": "/home/jack/projects/semantic/docs/javascript",
      "outFilename": "validate-form.js",
      "relativeOutPath": "javascript/validate-form.js",
      "relativeDirPath": "javascript",
      "relativeOutDirPath": "javascript",
      "relativeBase": "javascript/validate-form",
      "relativeOutBase": "javascript/validate-form",
      "contentType": "application/javascript",
      "outContentType": "application/javascript",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:04.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.136Z",
      "exists": true,
      "encoding": "utf8",
      "source": "semantic.validateForm = {};\n\n// ready event\nsemantic.validateForm.ready = function() {\n\n  // selector cache\n  var\n    $dogForm    = $('.dog.example .ui.form'),\n    $inlineForm = $('.inline.example .ui.form'),\n    $form       = $('.ui.form').not($dogForm).not($inlineForm),\n    $checkbox   = $('.ui.checkbox'),\n    // alias\n    handler\n  ;\n\n  // event handlers\n  handler = {\n\n  };\n  $checkbox\n    .checkbox()\n  ;\n\n  $.fn.form.settings.defaults = {\n    firstName: {\n      identifier  : 'first-name',\n      rules: [\n        {\n          type   : 'empty',\n          prompt : 'Please enter your first name'\n        }\n      ]\n    },\n    lastName: {\n      identifier  : 'last-name',\n      rules: [\n        {\n          type   : 'empty',\n          prompt : 'Please enter your last name'\n        }\n      ]\n    },\n    username: {\n      identifier : 'username',\n      rules: [\n        {\n          type   : 'empty',\n          prompt : 'Please enter a username'\n        }\n      ]\n    },\n    email: {\n      identifier : 'email',\n      rules: [\n        {\n          type   : 'empty',\n          prompt : 'Please enter your email'\n        },\n        {\n          type   : 'email',\n          prompt : 'Please enter a valid email'\n        }\n      ]\n    },\n    password: {\n      identifier : 'password',\n      rules: [\n        {\n          type   : 'empty',\n          prompt : 'Please enter a password'\n        },\n        {\n          type   : 'length[6]',\n          prompt : 'Your password must be at least 6 characters'\n        }\n      ]\n    },\n    passwordConfirm: {\n      identifier : 'password-confirm',\n      rules: [\n        {\n          type   : 'empty',\n          prompt : 'Please confirm your password'\n        },\n        {\n          identifier : 'password-confirm',\n          type       : 'match[password]',\n          prompt     : 'Please verify password matches'\n        }\n      ]\n    },\n    terms: {\n      identifier : 'terms',\n      rules: [\n        {\n          type   : 'checked',\n          prompt : 'You must agree to the terms and conditions'\n        }\n      ]\n    }\n  };\n\n\n  $inlineForm\n    .form({}, {\n      inline : true,\n      on: 'blur'\n    })\n  ;\n\n\n  $dogForm\n    .form({\n      dog: {\n        identifier: 'dog',\n        rules: [\n          {\n            type: 'empty',\n            prompt: 'You must have a dog to add'\n          },\n          {\n            type: 'contains[fluffy]',\n            prompt: 'I only want you to add fluffy dogs!'\n          },\n          {\n            type: 'not[mean]',\n            prompt: 'Why would you add a mean dog to the list?'\n          }\n        ]\n      }\n    })\n  ;\n\n  $form\n    .form()\n  ;\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.validateForm.ready)\n;",
      "content": "semantic.validateForm = {};\n\n// ready event\nsemantic.validateForm.ready = function() {\n\n  // selector cache\n  var\n    $dogForm    = $('.dog.example .ui.form'),\n    $inlineForm = $('.inline.example .ui.form'),\n    $form       = $('.ui.form').not($dogForm).not($inlineForm),\n    $checkbox   = $('.ui.checkbox'),\n    // alias\n    handler\n  ;\n\n  // event handlers\n  handler = {\n\n  };\n  $checkbox\n    .checkbox()\n  ;\n\n  $.fn.form.settings.defaults = {\n    firstName: {\n      identifier  : 'first-name',\n      rules: [\n        {\n          type   : 'empty',\n          prompt : 'Please enter your first name'\n        }\n      ]\n    },\n    lastName: {\n      identifier  : 'last-name',\n      rules: [\n        {\n          type   : 'empty',\n          prompt : 'Please enter your last name'\n        }\n      ]\n    },\n    username: {\n      identifier : 'username',\n      rules: [\n        {\n          type   : 'empty',\n          prompt : 'Please enter a username'\n        }\n      ]\n    },\n    email: {\n      identifier : 'email',\n      rules: [\n        {\n          type   : 'empty',\n          prompt : 'Please enter your email'\n        },\n        {\n          type   : 'email',\n          prompt : 'Please enter a valid email'\n        }\n      ]\n    },\n    password: {\n      identifier : 'password',\n      rules: [\n        {\n          type   : 'empty',\n          prompt : 'Please enter a password'\n        },\n        {\n          type   : 'length[6]',\n          prompt : 'Your password must be at least 6 characters'\n        }\n      ]\n    },\n    passwordConfirm: {\n      identifier : 'password-confirm',\n      rules: [\n        {\n          type   : 'empty',\n          prompt : 'Please confirm your password'\n        },\n        {\n          identifier : 'password-confirm',\n          type       : 'match[password]',\n          prompt     : 'Please verify password matches'\n        }\n      ]\n    },\n    terms: {\n      identifier : 'terms',\n      rules: [\n        {\n          type   : 'checked',\n          prompt : 'You must agree to the terms and conditions'\n        }\n      ]\n    }\n  };\n\n\n  $inlineForm\n    .form({}, {\n      inline : true,\n      on: 'blur'\n    })\n  ;\n\n\n  $dogForm\n    .form({\n      dog: {\n        identifier: 'dog',\n        rules: [\n          {\n            type: 'empty',\n            prompt: 'You must have a dog to add'\n          },\n          {\n            type: 'contains[fluffy]',\n            prompt: 'I only want you to add fluffy dogs!'\n          },\n          {\n            type: 'not[mean]',\n            prompt: 'Why would you add a mean dog to the list?'\n          }\n        ]\n      }\n    })\n  ;\n\n  $form\n    .form()\n  ;\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.validateForm.ready)\n;",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "validate-form.js",
      "date": "2013-12-02T15:39:04.000Z",
      "slug": "javascript-validate-form",
      "url": "/javascript/validate-form.js",
      "urls": [
        "/javascript/validate-form.js"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/stylesheets/reset.css",
      "relativePath": "stylesheets/reset.css",
      "basename": "reset",
      "outBasename": "reset",
      "extension": "css",
      "outExtension": "css",
      "extensions": [
        "css"
      ],
      "filename": "reset.css",
      "fullDirPath": "/home/jack/projects/semantic/server/files/stylesheets",
      "outPath": "/home/jack/projects/semantic/docs/stylesheets/reset.css",
      "outDirPath": "/home/jack/projects/semantic/docs/stylesheets",
      "outFilename": "reset.css",
      "relativeOutPath": "stylesheets/reset.css",
      "relativeDirPath": "stylesheets",
      "relativeOutDirPath": "stylesheets",
      "relativeBase": "stylesheets/reset",
      "relativeOutBase": "stylesheets/reset",
      "contentType": "text/css",
      "outContentType": "text/css",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-03T17:44:32.000Z",
      "rtime": "2013-12-04T09:15:23.206Z",
      "wtime": "2013-12-04T09:15:28.811Z",
      "exists": true,
      "encoding": "utf8",
      "source": "/*******************************\n          CSS Reset\n*******************************/\n\nhtml, body, div, form, fieldset, legend, label, ul, li, menu, button {\n  margin: 0px;\n  padding: 0px;\n  background: none;\n}\n\narticle,\naside,\ndetails,\nfigcaption,\nfigure,\nfooter,\nheader,\nhgroup,\nnav,\nsection {\n  display: block\n}\n\ntable {\n  border-collapse: collapse;\n  border-spacing: 0px;\n}\nth, td {\n  text-align: left;\n  vertical-align: top;\n}\nth, td, caption { \n  font-weight:normal; \n  margin: 0px;\n  padding: 0px;\n}\nimg,\niframe { \n  border: 0px; \n}\n:focus, input:focus, button:focus, button:active, button:hover {\n  outline: 0px;\n}\nbutton {\n  display: block;\n  outline: 0px;\n  border: 0px;  \n}\nul, li {\n  list-style-type: none;  \n}\np {\n  margin: 0px;\n}\nhtml {\n  font-size: 100%;\n  -webkit-text-size-adjust: 100%;\n  -ms-text-size-adjust: 100%;\n}",
      "content": "/*******************************\n          CSS Reset\n*******************************/\n\nhtml, body, div, form, fieldset, legend, label, ul, li, menu, button {\n  margin: 0px;\n  padding: 0px;\n  background: none;\n}\n\narticle,\naside,\ndetails,\nfigcaption,\nfigure,\nfooter,\nheader,\nhgroup,\nnav,\nsection {\n  display: block\n}\n\ntable {\n  border-collapse: collapse;\n  border-spacing: 0px;\n}\nth, td {\n  text-align: left;\n  vertical-align: top;\n}\nth, td, caption { \n  font-weight:normal; \n  margin: 0px;\n  padding: 0px;\n}\nimg,\niframe { \n  border: 0px; \n}\n:focus, input:focus, button:focus, button:active, button:hover {\n  outline: 0px;\n}\nbutton {\n  display: block;\n  outline: 0px;\n  border: 0px;  \n}\nul, li {\n  list-style-type: none;  \n}\np {\n  margin: 0px;\n}\nhtml {\n  font-size: 100%;\n  -webkit-text-size-adjust: 100%;\n  -ms-text-size-adjust: 100%;\n}",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "reset.css",
      "date": "2013-12-03T17:44:32.000Z",
      "slug": "stylesheets-reset",
      "url": "/stylesheets/reset.css",
      "urls": [
        "/stylesheets/reset.css"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": true,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/stylesheets/semantic.css",
      "relativePath": "stylesheets/semantic.css",
      "basename": "semantic",
      "outBasename": "semantic",
      "extension": "css",
      "outExtension": "css",
      "extensions": [
        "css"
      ],
      "filename": "semantic.css",
      "fullDirPath": "/home/jack/projects/semantic/server/files/stylesheets",
      "outPath": "/home/jack/projects/semantic/docs/stylesheets/semantic.css",
      "outDirPath": "/home/jack/projects/semantic/docs/stylesheets",
      "outFilename": "semantic.css",
      "relativeOutPath": "stylesheets/semantic.css",
      "relativeDirPath": "stylesheets",
      "relativeOutDirPath": "stylesheets",
      "relativeBase": "stylesheets/semantic",
      "relativeOutBase": "stylesheets/semantic",
      "contentType": "text/css",
      "outContentType": "text/css",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-03T17:44:32.000Z",
      "rtime": "2013-12-04T09:15:23.206Z",
      "wtime": "2013-12-04T09:15:28.814Z",
      "exists": true,
      "encoding": "utf8",
      "source": "/*******************************\n        Highlighted Colors\n*******************************/\n\n::-webkit-selection {\n  background-color: #FFFFCC;\n  color: #555555;\n}\n::-moz-selection {\n  background-color: #FFFFCC;\n  color: #555555;\n}\n::selection {\n  background-color: #FFFFCC;\n  color: #555555;\n}\n\nh1::-moz-selection,\nh2::-moz-selection,\nh3::-moz-selection {\n  background-color: #F1C1C2;\n  color: #222222;\n}\nh1::selection,\nh2::selection,\nh3::selection {\n  background-color: #F1C1C2;\n  color: #222222;\n}\n.ui *::-moz-selection {\n  background-color: #CCE2FF;\n}\n.ui *::selection {\n  background-color: #CCE2FF;\n}\n\n/*******************************\n             Global\n*******************************/\n\nhtml,\nbody {\n  font-size: 15px;\n}\n\nbody#example {\n  font-family: \"Open Sans\", \"Helvetica Neue\", \"Helvetica\", \"Arial\", sans-serif;\n  background: #FCFCFC url(../images/bg.jpg) repeat;\n  margin: 0px;\n  padding: 0px;\n  color: #555555;\n  min-width: 320px;\n}\nbody > .content  {\n  background: #FCFCFC url(../images/bg.jpg) repeat;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5 {\n  font-family: \"Source Sans Pro\", \"Helvetica Neue\", \"Helvetica\", \"Arial\", sans-serif;\n}\n\n/*\np,\nul,\n.ui.grid,\nli {\n  font-family: \"Helvetica Neue\", \"Helvetica\", \"Arial\", sans-serif;\n  font-size-adjust: none;\n}*/\n\n\nul.list {\n  list-style-type: disc;\n}\nul.list li {\n  list-style-position: outside;\n}\n\n\n/* text and headers */\nh1 {\n  margin: 0px 0px 20px;\n  padding: 50px 0px 5px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n}\nh4 + p {\n  margin: 0px 0px 20px;\n}\npre {\n  background-color: #F0F0F0;\n}\npre.console {\n  background-color: transparent;\n  line-height: 1.6;\n  font-family:  'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;\n  height: 300px;\n  overflow: auto;\n}\ncode {\n  background-color: rgba(0, 0, 0, 0.02);\n  border: 1px solid rgba(0, 0, 0, 0.1);\n  display: inline-block;\n  font-family: Courier New;\n  font-size: 14px;\n  margin: 0.25em;\n  padding: 0.125em 0.5em;\n  vertical-align: middle;\n}\npre code {\n  border: none;\n  padding: 0px;\n}\ntable pre,\ntable code {\n  margin: 0px !important;\n  padding: 0px;\n  background-color: transparent;\n}\np {\n  margin: 1em 0em;\n}\np:first-child {\n  margin-top: 0em;\n}\np:last-child {\n  margin-bottom: 0em;\n}\n/* links */\na {\n  color: #009FDA;\n  text-decoration: none;\n}\na:hover {\n  color: #00BAFF;\n}\n\n#example #menu .item {\n  -webkit-border-radius: 0px;\n  -moz-border-radius: 0px;\n  border-radius: 0px;\n}\n#example #menu .hide.item {\n  display: none;\n}\n\n#example #menu .item .item {\n  font-size: 0.875rem;\n}\n#example .segment > .dimmer {\n  z-index: 800;\n}\n\n/* segment headers */\n#example > .content > .page > .segment,\n#example > .segment {\n  margin: 0px 0px 3em;\n  padding-top: 70px;\n  padding-bottom: 30px;\n  background-color: #FFFFFF;\n  border-bottom: 1px solid #DDDDDD;\n}\n\n#example > .tab.segment {\n  padding-bottom: 0em;\n  margin-bottom: 2em;\n}\n\n#example > .tab.segment .fixed .tabular.menu {\n  position: fixed;\n  top: 50px;\n}\n#example > .tab.segment .vertical.menu {\n  display: none;\n  margin: 2rem 0em 1rem;\n}\n#example > .tab.segment .tabular.menu {\n  margin: 2rem 0em 0em;\n  border-bottom: none;\n}\n#example > .tab.segment .tabular.menu .active.item {\n  background-color: #FAFAFA;\n  border-bottom-color: #FAFAFA;\n}\n\n\n#example .download.menu {\n  margin-top: 0em;\n  margin-bottom: 3rem;\n}\n\n#example .main.menu {\n  min-width: 320px;\n  z-index: 900;\n\n  -webkit-box-sizing: border-box;\n  -moz-box-sizing: border-box;\n  -ms-box-sizing: border-box;\n  box-sizing: border-box;\n\n  -webkit-transition: margin 0.3s ease;\n  -moz-transition: margin 0.3s ease;\n  -o-transition: margin 0.3s ease;\n  -ms-transition: margin 0.3s ease;\n  transition: margin 0.3s ease;\n}\n#example .main.menu iframe {\n  margin: 0px 0px 0px 0px;\n}\n/* lists */\n#example .features {\n  list-style-position: inside;\n  margin: 10px 0px 0px;\n  padding: 0px;\n}\n#example .features li {\n  list-style-type: disc;\n  margin: 0px 0px 10px;\n  font-weight: bold;\n}\n\n#example .advertisement {\n  float: right;\n  margin-left: 2em;\n}\n\n/*--------------\n    Intro\n---------------*/\n\nbody.guide .main h3 {\n  margin: 2rem 0em 0.5rem;\n}\nbody.guide .main.container > * {\n  max-width: 800px;\n}\n\n\n/*--------------\n    Playground\n---------------*/\n\n#example.playground {\n  min-width: 1000px;\n}\n#example.playground > .title.grid {\n  padding-top: 60px;\n\n}\n#example .ui.items .menu .item {\n  -webkit-box-shadow: none;\n  -moz-box-shadow: none;\n  box-shadow: none;\n}\n\n/*--------------\n    Items\n---------------*/\n\n#example.item .text.example .item {\n  min-height: 150px;\n}\n\n\n/*--------------\n    Masthead\n---------------*/\n#example .error.masthead {\n  position: absolute;\n  margin-top: -290px;\n  top: 50%;\n  width: 100%;\n}\n#example .error.masthead .container {\n  position: relative;\n  z-index: 100;\n}\n#example .masthead {\n  position: relative;\n  overflow: hidden;\n  background-color: #00B5AD;\n  text-align: center;\n  margin-top: 38px;\n  padding: 50px 0px;\n  color: rgba(255, 255, 255, 0.9);\n  margin-bottom: 0px;\n  border-bottom: none;\n}\n#example .masthead:before {\n  background: #00B5AD url(/images/tile-bg.png) repeat fixed 0% 0%;\n  position: absolute;\n  z-index: 1;\n  width: 500%;\n  height: 500%;\n  top: 0px;\n  left: 0px;\n  content: '';\n\n  -moz-transform-origin: 50% 50%;\n  -o-transform-origin: 50% 50%;\n  -ms-transform-origin: 50% 50%;\n  transform-origin: 50% 50%;\n\n  -webkit-animation-name: masthead;\n  -moz-animation-name: masthead;\n  -o-animation-name: masthead;\n  animation-name: masthead;\n\n  -webkit-animation-duration: 80s;\n  -moz-animation-duration: 80s;\n  -ms-animation-duration: 80s;\n  -o-animation-duration: 80s;\n  animation-duration: 80s;\n\n  -webkit-animation-fill-mode: both;\n  -moz-animation-fill-mode: both;\n  -ms-animation-fill-mode: both;\n  -o-animation-fill-mode: both;\n  animation-fill-mode: both;\n\n  animation-timing-function: linear;\n  -webkit-animation-timing-function: linear;\n\n  -webkit-animation-iteration-count: infinite;\n  -moz-animation-iteration-count: infinite;\n  -ms-animation-iteration-count: infinite;\n  -o-animation-iteration-count: infinite;\n  animation-iteration-count: infinite;\n}\n@keyframes masthead {\n 0% {\n    background-position: 0% 0%;\n }\n 50% {\n    background-position: -50% -100%;\n }\n 100% {\n    background-position: -100% -200%;\n }\n\n}\n\n@-moz-keyframes masthead {\n 0% {\n   background-position: 0% 0%;\n }\n 50% {\n   background-position: -50% -100%;\n }\n 100% {\n   background-position: -100% -200%;\n }\n\n}\n\n@-webkit-keyframes masthead {\n 0% {\n   background-position: 0% 0%;\n }\n 50% {\n   background-position: -50% -100%;\n }\n 100% {\n   background-position: -100% -200%;\n }\n\n}\n\n@-ms-keyframes masthead {\n 0% {\n   background-position: 0% 0%;\n }\n 50% {\n   background-position: -50% -100%;\n }\n 100% {\n   background-position: -100% -200%;\n }\n\n}\n\n@-o-keyframes masthead {\n 0% {\n   background-position: 0% 0%;\n }\n 50% {\n   background-position: -50% -100%;\n }\n 100% {\n   background-position: -100% -200%;\n }\n\n}\n#example .masthead .grid {\n  position: relative;\n  z-index: 2;\n}\n#example .masthead .column {\n  display: table;\n}\n#example .introduction {\n  display: table-cell;\n  vertical-align: top;\n  width: 100%;\n}\n#example .advertisement {\n  float: none;\n  display: table-cell;\n  vertical-align: top;\n  padding-left: 2em;\n}\n#example #carbonads-container {\n  float: right;\n}\n#example .advertisement .carbonad {\n  -moz-border-radius: 5px;\n  -webkit-border-radius: 5px;\n  border-radius: 5px;\n  border: 1px solid rgba(0, 0, 0, 0.1);\n}\n#example .advertisement .carbonad-text {\n  height: auto;\n  font-size: 12px;\n  line-height: 1.3;\n}\n#example .carbonad-tag {\n  text-align: left;\n}\n#example .inverted.advertisement .carbonad {\n  background-color: rgba(0, 31, 30, 0.5);\n  border: none;\n  overflow: hidden;\n  height: auto;\n  padding: 6px 8px 15px;\n}\n#example .inverted.advertisement .carbonad-text {\n  color: rgba(255, 255, 255, 0.6);\n}\n#example .inverted.advertisement .carbonad-tag {\n  margin-top: 10px;\n  color: rgba(255, 255, 255, 0.4);\n}\n#example .inverted.advertisement .carbonad-tag a {\n  color: rgba(255, 255, 255, 0.8);\n}\n#example .inverted.advertisement .carbonad-tag a:hover {\n  color: #FFFFFF;\n}\n\n\n#example .masthead .labeled.button {\n  position: relative;\n  left: 0px;\n  top: 0px;\n  width: auto !important;\n  margin-right: 1em;\n}\n#example .masthead.segment h1 {\n  font-size: 5em;\n  color: #FFFFFF;\n  line-height: 1.2;\n  margin: -20px 0px 0px;\n  padding-bottom: 0px;\n}\n#example .masthead strike {\n  color: rgba(0, 0, 0, 0.2);\n}\n#example .masthead h2 {\n  font-weight: normal;\n  margin: -10px 0 16px 0px;\n  font-size: 1.75em;\n  border-bottom: none;\n  line-height: 1;\n}\n#example .masthead .menu {\n  width: 375px;\n}\n#example .masthead p {\n  font-size: 1.5em;\n  margin: 1em 0em 1.5em;\n  padding: 0px;\n}\n#example .footer.link.list {\n  display: block;\n  text-align: center;\n  margin-bottom: 1.5rem;\n}\n\n\n/*--------------\n  Transparent\n---------------*/\n\n.ui.transparent.menu {\n  opacity: 0.95;\n}\n\n\n/* content */\n#example .container {\n  width: 915px;\n  margin: 0px auto;\n}\n\n#example .solid,\n#example .stripe {\n  padding: 50px 0px;\n}\n\n#example .dark.stripe {\n  background-color: #333333;\n  background: url(/images/dark-bg.png) repeat;\n  color: #FFFFFF;\n}\n#example .stripe .column .label {\n  margin-bottom: 1em;\n}\n\n#example .solid {\n  background-color: #FFFFFF;\n  -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.1);\n  -moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.1);\n  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.1);\n}\n#example .solid .column {\n  color: #555555;\n}\n#example .solid .column p b {\n  color: rgba(0, 0, 0, 0.9);\n}\n#example .solid .column p {\n  color: rgba(0, 0, 0, 0.5);\n}\n#example .stripe .message {\n  margin: 2em 0em;\n}\n\n\n#example .shortcuts {\n  float: right;\n  clear: both;\n}\n#example .launch.button {\n  position: fixed;\n  top: 63px;\n  z-index: 500;\n  width: 70px;\n}\n#example.index .main.menu {\n  top: 0px;\n}\n#example.index pre.console {\n  height: 120px;\n}\n#example.index .attached.launch.button {\n  top: 96px;\n}\n#example .launch.button .text {\n  display: inline-block;\n  display: none;\n}\n\n#example .main.container {\n  position: relative;\n  padding-bottom: 100px;\n}\n#example .main.container > h2 {\n  -webkit-transition: 0.5s color ease;\n  -moz-transition: 0.5s color ease;\n  -o-transition: 0.5s color ease;\n  -ms-transition: 0.5s color ease;\n  transition: 0.5s color ease;\n}\n#example .swap {\n  background: url(http://beta.myfav.es/images/themes/bg/subtle/subtle-handmade-paper.png) repeat;\n}\n#example .peek {\n  position: absolute;\n  top: 0px;\n  left: -230px;\n  width: 180px;\n/*\n  -webkit-transition: padding 0.3s ease;\n  -moz-transition: padding 0.3s ease;\n  -o-transition: padding 0.3s ease;\n  -ms-transition: padding 0.3s ease;\n  transition: padding 0.3s ease;*/\n}\n\n#example .ui.tab.segment {\n  padding: 1.5em 2em;\n}\n#example .example .circular.segment {\n  width: 175px;\n  height: 175px;\n}\n\n#example.popup .example .popup {\n  color: #FF0000;\n}\n#example .position.example .icon {\n  position: absolute;\n  margin: 0em;\n}\n#example .position.example .segment {\n  width: 250px;\n  height: 250px;\n}\n#example .position.example .segment .icon:nth-of-type(1) {\n  top: 3em;\n  left: 3em;\n}\n#example .position.example .segment .icon:nth-of-type(2) {\n  top: 3em;\n  left: 50%;\n  margin-left: -1em;\n}\n#example .position.example .segment .icon:nth-of-type(3) {\n  top: 3em;\n  right: 3em;\n}\n#example .position.example .segment .icon:nth-of-type(4) {\n  top: 50%;\n  margin-top: -1em;\n  right: 3em;\n}\n#example .position.example .segment .icon:nth-of-type(5) {\n  bottom: 3em;\n  right: 3em;\n}\n#example .position.example .segment .icon:nth-of-type(6) {\n  bottom: 3em;\n  left: 50%;\n  margin-left: -1em;\n}\n#example .position.example .segment .icon:nth-of-type(7) {\n  bottom: 3em;\n  left: 3em;\n}\n#example .position.example .segment .icon:nth-of-type(8) {\n  top: 50%;\n  margin-top: -1em;\n  left: 3em;\n}\n\n#example .main.ui.grid {\n  position: relative;\n}\n#example .example .toggle.button {\n  min-width: 200px;\n}\n#example .example .language.label {\n  margin: 1em 0em 0.75em;\n}\n#example .icon.example .grid {\n  margin-top: 1.5rem;\n  text-align: left;\n}\n#example .icon.example .grid .code {\n  position: static;\n}\n#example .icon.example .grid .column {\n  opacity: 0.8;\n  margin-bottom: 2em;\n  text-align: center;\n  color: #888888;\n\n  -webkit-transition:\n    margin-left 0.3s ease-out,\n    opacity 0.3s ease-out\n  ;\n  -moz-transition:\n    margin-left 0.3s ease-out,\n    opacity 0.3s ease-out\n  ;\n  -o-transition:\n    margin-left 0.3s ease-out,\n    opacity 0.3s ease-out\n  ;\n  -ms-transition:\n    margin-left 0.3s ease-out,\n    opacity 0.3s ease-out\n  ;\n  transition:\n    margin-left 0.3s ease-out,\n    opacity 0.3s ease-out\n  ;\n}\n#example .icon.example .column .icon {\n  opacity: 1;\n  color: #333333;\n  display: block;\n  margin: 0em auto 0.25em;\n  font-size: 2em;\n\n  -webkit-transition:\n    all 0.2s ease-out\n  ;\n  -moz-transition:\n    all 0.2s ease-out\n  ;\n  -o-transition:\n    all 0.2s ease-out\n  ;\n  -ms-transition:\n    all 0.2s ease-out\n  ;\n  transition:\n    all 0.2s ease-out\n  ;\n}\n#example .icon.example .grid .column:hover .icon {\n  color: #009FDA;\n  -webkit-transform: scale(1.5);\n  -moz-transform: scale(1.5);\n  -o-transform: scale(1.5);\n  -ms-transform: scale(1.5);\n  transform: scale(1.5);\n}\n#example .another.icon.example {\n  border-top: 1px solid rgba(0, 0, 0, 0.1);\n}\n\n#example .another.example {\n  margin-top: 0em;\n  padding-top: 2em;\n  border-top: none;\n}\n#example .another.example i.code {\n  top: 0px;\n}\n#example .example > p {\n  color: #888888;\n}\n\n#example .peek .menu .active:nth-child(1) {\n  border-right-color: #00B9F0;\n  color: #00B9F0;\n}\n#example .peek .menu .active:nth-child(2) {\n  border-right-color: #56BB73;\n  color: #56BB73;\n}\n#example .peek .menu .active:nth-child(3) {\n  border-right-color: #EF3F49;\n  color: #EF3F49;\n}\n#example .peek .menu .active:nth-child(4) {\n  border-right-color: #A24096;\n  color: #A24096;\n}\n#example .main h2.group {\n  color: #A24096;\n}\n\n#example .peek > .menu {\n  margin-left: 0px;\n  width: 180px;\n}\n/* #example .peek > .menu.animating > .active {\n  background-color: transparent;\n  border: none;\n  padding-left: 0.95em;\n}\n#example .peek > .menu.animating > .active:after {\n  background-color: #FFFFFF;\n} */\n\n/* overview mode */\n\n#example.overview h2.ui.header {\n  margin-bottom: 0em;\n}\n/*\n#example .ui.header ~ .ui.message a,\n#example .ui.header ~ p a {\n  font-weight: bold;\n}\n*/\n#example.overview .example {\n  margin: 0em;\n  min-height: 0px !important;\n  overflow: hidden;\n  padding: 0.5em 0em;\n}\n#example.overview .example .ui.header,\n#example.overview .example p {\n  float: right;\n  font-size: 1em;\n  font-weight: normal;\n  margin: 0;\n  padding: 0;\n}\n#example.overview .example p {\n  float: left;\n  font-size: 1rem;\n  padding: 0em 0em 0em 0.3em;\n  width: auto;\n}\n\n\n#example .sticky-wrapper.stuck {\n  height: 0px !important;\n  -webkit-transition:\n    margin-left 0.3s ease-out,\n    opacity 0.3s ease-out\n  ;\n  -moz-transition:\n    margin-left 0.3s ease-out,\n    opacity 0.3s ease-out\n  ;\n  -o-transition:\n    margin-left 0.3s ease-out,\n    opacity 0.3s ease-out\n  ;\n  -ms-transition:\n    margin-left 0.3s ease-out,\n    opacity 0.3s ease-out\n  ;\n  transition:\n    margin-left 0.3s ease-out,\n    opacity 0.3s ease-out\n  ;\n}\n#example .sticky-wrapper.stuck .peek {\n  position: fixed;\n  top: 75px;\n  left: 50%;\n  margin-left: -685px;\n}\n#example.left.pushed .sticky-wrapper .peek {\n  margin-left: -132.5px;\n  padding-left: 132.5px;\n}\n\n#example.left.pushed .sticky-wrapper.stuck .peek {\n  margin-left: -817.5px;\n  padding-left: 132.5px;\n}\n\n#example .settings.table {\n  margin-bottom: 20px;\n}\n#example .settings.table td:first-child {\n  font-weight: bold;\n}\n#example .settings.table td:nth-child(2n) {\n  width: 100px;\n}\n\n#example .existing.annotation {\n  /*display: none;*/\n}\n/*#example .segment p:first-of-type {\n  margin-top: 0em;\n}*/\n\n/* example code reskin */\n#example div.code.hide {\n  display: none;\n}\n#example div.code {\n  position: relative;\n  width: 100%;\n  height: 200px;\n  text-align: left;\n}\n#example div.code {\n  margin: -1em;\n  font-size: 14px;\n  padding: 5px 0px;\n  background-color: transparent;\n}\n#example .label + div.code {\n  margin-top: 1.5em;\n}\n#example div.code .ace_gutter {\n  background-color: #FAFAFA;\n  border-right: 1px solid rgba(0, 0, 0, 0.1);\n  color: #999999;\n}\n#example div.code .ace_gutter-cell {\n  padding-right: 20px;\n  padding-left: 10px;\n}\n#example div.code .ace_bracket {\n  background-color: rgba(0, 0, 0, 0.05);\n  border: 1px solid rgba(0, 0, 0, 0.1);\n}\n#example div.code .ace_indent-guide {\n  position: relative;\n  background: none;\n}\n/* #example div.code .ace_indent-guide:after {\n  content: '';\n  position: absolute;\n  top: 0px;\n  right: 0px;\n  height: 100%;\n  border-left: 1px solid #ECF5F3;\n} */\n\n#example table .instructive.segment {\n  background-color: transparent;\n  border: 0px;\n  box-shadow: none;\n  padding: 0em;\n  margin: -0.4em -0.7em;\n}\n#example table .instructive.segment .code {\n  margin: 0em;\n}\n#example table .instructive.segment div.code .ace_identifier,\n#example table .instructive.segment div.code .ace_line {\n  color: #555555;\n}\n\n#example .ui.label + .instructive.segment {\n  margin-top: 0em;\n}\n#example .instructive.segment em {\n  font-style: normal;\n  color: rgba(0, 0, 0, 0.4);\n}\n#example .instructive.segment .title + em {\n  float: right;\n}\n\n\n#example div.code .ace_gutter,\n#example div.code .ace_scroller {\n  background-color: transparent;\n  overflow: visible;\n  margin: 14px 10px;\n}\n#example div.code .ace_scrollbar {\n  overflow: hidden;\n  background-color: transparent;\n}\n\n#example div.code .ace_line,\n#example div.code .ace_line span {\n  -webkit-transition:\n    color 1s ease-out\n  ;\n  -moz-transition:\n    color 1s ease-out\n  ;\n  -o-transition:\n    color 1s ease-out\n  ;\n  -ms-transition:\n    color 1s ease-out\n  ;\n  transition:\n    color 1s ease-out\n  ;\n}\n#example div.code .ace_line {\n  color: #555555;\n}\n#example div.code .ace_tag {\n  color: #DCBCD3;\n}\n#example div.code .ace_attribute-name {\n  color: #F4C5C5;\n}\n#example div.code .ace_content {\n}\n#example div.code .ace_string {\n  color: #00A59D;\n}\n#example div.code .ace_cursor {\n  border-left: none;\n}\n#example div.code .ace_paren {\n  color: #CCCCCC;\n}\n#example div.code .ace_keyword {\n  color: #CCCCCC;\n}\n#example div.code .ace_identifier {\n  color: #CCCCCC;\n}\n#example div.code .ace_punctuation {\n  color: #CCCCCC;\n}\n#example div.code .ace_active_line {\n  background-color: #FBFBE5;\n}\n\n/* Hovered Style */\n\n#example div.code:hover .ace_line {\n  color: #555555;\n}\n#example div.code:hover .ace_tag {\n  color: #892A6F;\n}\n#example div.code:hover .ace_attribute-name {\n  color: #934E4E;\n}\n#example div.code:hover .ace_content {\n}\n#example div.code:hover .ace_string {\n  color: #00A59D;\n}\n#example div.code:hover .ace_cursor {/*\n  border-left: 1px solid #AAAAAA;*/\n}\n#example div.code:hover .ace_paren {\n  color: #555555;\n}\n#example div.code:hover .ace_keyword {\n  color: #555555;\n}\n#example div.code:hover .ace_identifier {\n  color: #555555;\n}\n#example div.code:hover .ace_scrollbar {\n  overflow: hidden !important;\n}\n#example div.code:hover .ace_punctuation {\n  color: #555555;\n}\n#example div.code:hover .ace_active_line {\n  background-color: #FBFBE5;\n}\n\n\n\n/* examples */\n#example .no.example i.code {\n  display: none;\n}\n\n#example .example:first-child,\n#example h2 + .example,\n#example h3 + .example,\n#example h4 + .example {\n  margin-top: 0px;\n  padding-top: 0px;\n  border-top: none;\n}\n#example h2 + .example i.code,\n#example h3 + .example i.code,\n#example h4 + .example i.code {\n  top: 0px;\n}\n#example .example > h4 {\n  margin-bottom: 0em;\n}\n\n#example .clearing.example {\n  clear: both;\n}\n#example .example {\n  margin: 1em 0em;\n  padding: 1em 0em;\n  border-top: 1px solid rgba(0, 0, 0, 0.05);\n/*  clear: both;*/\n  position: relative;\n}\n#example .example .grid i.code {\n  right: 25%;\n}\n#example .example i.code {\n  cursor: pointer;\n  position: absolute;\n  top: 2em;\n  right: 0px;\n  opacity: 0.2;\n\n  font-size: 18px;\n  color: #555555;\n\n  -webkit-transition: opacity 0.3s ease-out;\n  -moz-transition: opacity 0.3s ease-out;\n  -o-transition: opacity 0.3s ease-out;\n  -ms-transition: opacity 0.3s ease-out;\n  transition: opacity 0.3s ease-out;\n}\n\n#example .example > i.code:before {\n  font-family: 'Basic Icons';\n  content: '\\e714';\n}\n#example .example:hover i.code {\n  opacity: 0.7;\n}\n#example .example:hover i.code:hover {\n  opacity: 1;\n}\n\n#example .highlighted.example {\n  min-height: 390px;\n}\n#example .highlighted.example .grid,\n#example .ui.type.items .image .grid {\n  -webkit-animation: grid 15s ease infinite;\n  -moz-animation: grid 15s ease infinite;\n  background-color: #F6F6F6;\n  margin: 0em auto;\n}\n#example .highlighted.example .grid .row,\n#example .ui.type.items .image .grid .row {\n  border-top: 1px solid #DDDDDD;\n}\n#example .highlighted.example .grid .column,\n#example .ui.type.items .image .grid .column {\n  background-color: #F4F4F4;\n  min-height: 50px;\n  -webkit-box-shadow: 0px 0px 0px 1px #E2E2E2;\n  -moz-box-shadow: 0px 0px 0px 1px #E2E2E2;\n  box-shadow: 0px 0px 0px 1px #E2E2E2;\n}\n#example .highlighted.example .grid .segment,\n#example .ui.type.items .image .grid .segment {\n  min-height: 50px;\n  text-align: center;\n  padding-left: 0em;\n  padding-right: 0em;\n  -webkit-box-shadow: 0px 0px 0px 1px #DDDDDD;\n  -moz-box-shadow: 0px 0px 0px 1px #DDDDDD;\n  box-shadow: 0px 0px 0px 1px #DDDDDD;\n  -webkit-border-radius: 0px;\n  -moz-border-radius: 0px;\n  border-radius: 0px;\n}\n\n@-webkit-keyframes grid {\n  0% {\n    width: 100%;\n  }\n  40% {\n    width: 70%;\n  }\n  60% {\n    width: 70%;\n  }\n  100% {\n    width: 100%;\n  }\n}\n@-moz-keyframes grid {\n  0% {\n    width: 100%;\n  }\n  40% {\n    width: 70%;\n  }\n  60% {\n    width: 70%;\n  }\n  100% {\n    width: 100%;\n  }\n}\n@keyframes grid {\n  0% {\n    width: 100%;\n  }\n  40% {\n    width: 70%;\n  }\n  60% {\n    width: 70%;\n  }\n  100% {\n    width: 100%;\n  }\n}\n\n\n#example .ui.type.items > .item {\n  min-height: 255px;\n}\n\n#example .ui.type.items > .item > .image {\n  padding: 1em;\n  height: 165px;\n  vertical-align: middle;\n}\n\n/* some demo formatting */\n.ui.menu p:only-child {\n  margin: 0px;\n}\n.ui.menu a {\n  cursor: pointer;\n}\n\n\nbody.progress .ui.progress .bar {\n  -webkit-animation: finish 10s ease-in-out infinite;\n  -moz-animation: finish 10s ease-in-out infinite;\n}\n\n@-webkit-keyframes finish {\n  0% {\n    width: 0%;\n  }\n  40% {\n    width: 100%;\n  }\n  100% {\n    width: 100%;\n  }\n}\n@-moz-keyframes finish {\n  0% {\n    width: 0%;\n  }\n  40% {\n    width: 100%;\n  }\n  100% {\n    width: 100%;\n  }\n}\n@keyframes finish {\n  0% {\n    width: 0%;\n  }\n  40% {\n    width: 100%;\n  }\n  100% {\n    width: 100%;\n  }\n}\n\n\n#example.feed .example .segment {\n  max-width: 800px;\n}\n\n#example .fixed .launch {\n  display: none;\n}\n#example .designer .icon {\n  font-family: 'Basic Icons';\n}\n\n#example .fixed.column .sticky-wrapper {\n  height: 0px !important;\n}\n\n#example .fixed.column .fixed,\n#example .fixed.segment .fixed {\n  position: fixed;\n  top: 65px;\n  -webkit-perspective: 2000px;\n  -moz-perspective: 2000px;\n  -ms-perspective: 2000px;\n  perspective: 2000px;\n\n  -webkit-transform-style: preserve-3d;\n  -moz-transform-style: preserve-3d;\n  -ms-transform-style: preserve-3d;\n  transform-style: preserve-3d;\n}\n\n\n\n@media only screen and (max-width : 1725px) {\n  #example .container {\n    width: auto;\n    margin-right: 100px;\n    margin-left: 325px;\n  }\n  #example.index .container {\n    margin-left: 8em;\n    margin-right: 8em;\n  }\n  #example .sticky-wrapper.stuck .peek {\n    margin-left: 0px;\n    left: 95px;\n  }\n  #example.left.pushed .sticky-wrapper .peek {\n    padding-left: 275px;\n    margin-left: -275px;\n  }\n  #example.left.pushed .sticky-wrapper.stuck .peek {\n    margin-left: 0px;\n    padding-left: 275px;\n  }\n}\n@media only screen and (max-width : 1500px) {\n  #example.index .icon.header .icon {\n    font-size: 3em;\n  }\n}\n\n@media only screen and (max-width : 1050px) {\n  #example .fixed .section,\n  #example .fixed .title b {\n    display: none;\n  }\n  #example .stripe .header .code.icon {\n    display: none;\n  }\n  #example .fixed .container {\n    width: auto;\n    margin: 0px auto;\n  }\n  #example .attached.launch.button {\n    display: none;\n  }\n  #example .fixed .launch {\n    display: inline-block;\n  }\n  #example .sticky-wrapper {\n    display: none;\n  }\n  #example .container {\n    width: auto;\n    margin: 0% 30px 0px;\n  }\n  #example\n  #example .right.attached.launch {\n    display: none;\n  }\n}\n@media only screen and (max-width : 780px) {\n  pre.console {\n    height: 150px;\n  }\n  #example.index .masthead {\n    text-align: center;\n    padding: 50px 0px 15px;\n  }\n  #example.index .masthead h1 {\n    font-size: 3em;\n  }\n  #example.index .masthead h1 .icon {\n    display: none;\n  }\n  #example.index .masthead .button {\n    font-size: 1.1em;\n    margin-bottom: 0.5em;\n  }\n  #example.index .masthead h2 {\n    font-size: 1.25em;\n    margin: 0em 0em 1em;\n  }\n  #example.index .masthead p {\n    font-size: 1.35em;\n  }\n  #example.index .container {\n    margin-left: 2em;\n    margin-right: 2em;\n  }\n  #example.index .icon.header .icon {\n    font-size: 3em;\n  }\n  #example .introduction {\n    display: block;\n  }\n  #example .advertisement {\n    display: block;\n    margin: 1em 0em;\n    padding: 0em;\n  }\n  #example #menu .hide.item {\n    display: block;\n  }\n  #example #menu .item > .icon {\n    font-size: 1em !important;\n  }\n  #example .inverted.advertisement .carbonad {\n    height: 109px;\n  }\n  #example .inverted.advertisement .carbonad-img {\n    margin-top: 0px;\n  }\n  #example #carbonads-container {\n    float: none;\n  }\n  #example .carbonad {\n    width: auto;\n  }\n  #example .carbonad-text,\n  #example .carbonad-tag {\n    float: none;\n    display: block;\n    text-align: left;\n    margin-left: 160px;\n    width: 170px;\n  }\n}\n\n\n@media only screen and (max-width : 600px) {\n  #example .icon.example .grid .column {\n    width: 33.33%;\n  }\n}\n\n\n@media only screen and (max-width : 600px) {\n  #example .main.menu .borderless.item {\n    display: none;\n  }\n  #example .fixed .developer,\n  #example .fixed .designer,\n  #example .fixed .previous,\n  #example .fixed .next {\n    display: none;\n  }\n  #example > .tab.segment .tabular.menu {\n    display: none;\n  }\n\n  #example > .tab.segment .vertical.menu {\n    display: block;\n  }\n}\n@media only screen and (max-width : 450px) {\n  #example .main.menu .icon.item {\n    display: none;\n  }\n  #example .main.menu .github.item {\n    display: block;\n  }\n  #example .main.menu .github.item:before {\n    display: none;\n  }\n  #example .carbonad {\n    height: 135px;\n  }\n  #example .carbonad .carbonad-text {\n    width: 90px;\n  }\n}\n\n\n\n@media only screen and (min-width : 1725px) {\n  #example .container {\n    width: 1100px;\n  }\n  #example .sticky-wrapper.stuck .peek {\n    margin-left: -780px;\n  }\n  #example.left.pushed .main.menu {\n    margin-left: -132px;\n  }\n}\n\n@media only screen and (min-width : 2300px) {\n  #example .container {\n    width: 1320px;\n  }\n  #example .sticky-wrapper.stuck .peek {\n    margin-left: -890px;\n  }\n}\n\n\n\n@media only screen and (max-width : 998px) {\n  #example.index .main.menu .container {\n    width: auto;\n    padding: 0% 4%;\n  }\n  #example.transition .examples {\n    width: 100%;\n  }\n  #example.transition .examples .pointing.below.label {\n    display: none;\n  }\n}\n@media only screen and (min-width : 998px) {\n  #example.index .main.menu .container {\n    width: auto;\n    padding: 0% 8%;\n  }\n  #example .examples {\n    margin-right: 400px;\n  }\n  #example .fixed.column,\n  #example .fixed.column .fixed {\n    float: right;\n    width: 300px;\n  }\n}\n@media only screen and (min-width : 1500px) {\n  #example.index .main.menu .container {\n    width: auto;\n    padding: 0% 13%;\n  }\n  #example .examples {\n    margin-right: 500px;\n  }\n  #example .fixed.column,\n  #example .fixed.column .fixed  {\n    float: right;\n    width: 400px;\n  }\n}\n@media only screen and (min-width : 1750px) {\n  #example.index .main.menu .container {\n    width: auto;\n    padding: 0% 18%;\n  }\n}\n@media only screen and (min-width : 2000px) {\n  #example.index .main.menu .container {\n    width: auto;\n    padding: 0% 23%;\n  }\n}",
      "content": "/*******************************\n        Highlighted Colors\n*******************************/\n\n::-webkit-selection {\n  background-color: #FFFFCC;\n  color: #555555;\n}\n::-moz-selection {\n  background-color: #FFFFCC;\n  color: #555555;\n}\n::selection {\n  background-color: #FFFFCC;\n  color: #555555;\n}\n\nh1::-moz-selection,\nh2::-moz-selection,\nh3::-moz-selection {\n  background-color: #F1C1C2;\n  color: #222222;\n}\nh1::selection,\nh2::selection,\nh3::selection {\n  background-color: #F1C1C2;\n  color: #222222;\n}\n.ui *::-moz-selection {\n  background-color: #CCE2FF;\n}\n.ui *::selection {\n  background-color: #CCE2FF;\n}\n\n/*******************************\n             Global\n*******************************/\n\nhtml,\nbody {\n  font-size: 15px;\n}\n\nbody#example {\n  font-family: \"Open Sans\", \"Helvetica Neue\", \"Helvetica\", \"Arial\", sans-serif;\n  background: #FCFCFC url(../images/bg.jpg) repeat;\n  margin: 0px;\n  padding: 0px;\n  color: #555555;\n  min-width: 320px;\n}\nbody > .content  {\n  background: #FCFCFC url(../images/bg.jpg) repeat;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5 {\n  font-family: \"Source Sans Pro\", \"Helvetica Neue\", \"Helvetica\", \"Arial\", sans-serif;\n}\n\n/*\np,\nul,\n.ui.grid,\nli {\n  font-family: \"Helvetica Neue\", \"Helvetica\", \"Arial\", sans-serif;\n  font-size-adjust: none;\n}*/\n\n\nul.list {\n  list-style-type: disc;\n}\nul.list li {\n  list-style-position: outside;\n}\n\n\n/* text and headers */\nh1 {\n  margin: 0px 0px 20px;\n  padding: 50px 0px 5px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n}\nh4 + p {\n  margin: 0px 0px 20px;\n}\npre {\n  background-color: #F0F0F0;\n}\npre.console {\n  background-color: transparent;\n  line-height: 1.6;\n  font-family:  'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;\n  height: 300px;\n  overflow: auto;\n}\ncode {\n  background-color: rgba(0, 0, 0, 0.02);\n  border: 1px solid rgba(0, 0, 0, 0.1);\n  display: inline-block;\n  font-family: Courier New;\n  font-size: 14px;\n  margin: 0.25em;\n  padding: 0.125em 0.5em;\n  vertical-align: middle;\n}\npre code {\n  border: none;\n  padding: 0px;\n}\ntable pre,\ntable code {\n  margin: 0px !important;\n  padding: 0px;\n  background-color: transparent;\n}\np {\n  margin: 1em 0em;\n}\np:first-child {\n  margin-top: 0em;\n}\np:last-child {\n  margin-bottom: 0em;\n}\n/* links */\na {\n  color: #009FDA;\n  text-decoration: none;\n}\na:hover {\n  color: #00BAFF;\n}\n\n#example #menu .item {\n  -webkit-border-radius: 0px;\n  -moz-border-radius: 0px;\n  border-radius: 0px;\n}\n#example #menu .hide.item {\n  display: none;\n}\n\n#example #menu .item .item {\n  font-size: 0.875rem;\n}\n#example .segment > .dimmer {\n  z-index: 800;\n}\n\n/* segment headers */\n#example > .content > .page > .segment,\n#example > .segment {\n  margin: 0px 0px 3em;\n  padding-top: 70px;\n  padding-bottom: 30px;\n  background-color: #FFFFFF;\n  border-bottom: 1px solid #DDDDDD;\n}\n\n#example > .tab.segment {\n  padding-bottom: 0em;\n  margin-bottom: 2em;\n}\n\n#example > .tab.segment .fixed .tabular.menu {\n  position: fixed;\n  top: 50px;\n}\n#example > .tab.segment .vertical.menu {\n  display: none;\n  margin: 2rem 0em 1rem;\n}\n#example > .tab.segment .tabular.menu {\n  margin: 2rem 0em 0em;\n  border-bottom: none;\n}\n#example > .tab.segment .tabular.menu .active.item {\n  background-color: #FAFAFA;\n  border-bottom-color: #FAFAFA;\n}\n\n\n#example .download.menu {\n  margin-top: 0em;\n  margin-bottom: 3rem;\n}\n\n#example .main.menu {\n  min-width: 320px;\n  z-index: 900;\n\n  -webkit-box-sizing: border-box;\n  -moz-box-sizing: border-box;\n  -ms-box-sizing: border-box;\n  box-sizing: border-box;\n\n  -webkit-transition: margin 0.3s ease;\n  -moz-transition: margin 0.3s ease;\n  -o-transition: margin 0.3s ease;\n  -ms-transition: margin 0.3s ease;\n  transition: margin 0.3s ease;\n}\n#example .main.menu iframe {\n  margin: 0px 0px 0px 0px;\n}\n/* lists */\n#example .features {\n  list-style-position: inside;\n  margin: 10px 0px 0px;\n  padding: 0px;\n}\n#example .features li {\n  list-style-type: disc;\n  margin: 0px 0px 10px;\n  font-weight: bold;\n}\n\n#example .advertisement {\n  float: right;\n  margin-left: 2em;\n}\n\n/*--------------\n    Intro\n---------------*/\n\nbody.guide .main h3 {\n  margin: 2rem 0em 0.5rem;\n}\nbody.guide .main.container > * {\n  max-width: 800px;\n}\n\n\n/*--------------\n    Playground\n---------------*/\n\n#example.playground {\n  min-width: 1000px;\n}\n#example.playground > .title.grid {\n  padding-top: 60px;\n\n}\n#example .ui.items .menu .item {\n  -webkit-box-shadow: none;\n  -moz-box-shadow: none;\n  box-shadow: none;\n}\n\n/*--------------\n    Items\n---------------*/\n\n#example.item .text.example .item {\n  min-height: 150px;\n}\n\n\n/*--------------\n    Masthead\n---------------*/\n#example .error.masthead {\n  position: absolute;\n  margin-top: -290px;\n  top: 50%;\n  width: 100%;\n}\n#example .error.masthead .container {\n  position: relative;\n  z-index: 100;\n}\n#example .masthead {\n  position: relative;\n  overflow: hidden;\n  background-color: #00B5AD;\n  text-align: center;\n  margin-top: 38px;\n  padding: 50px 0px;\n  color: rgba(255, 255, 255, 0.9);\n  margin-bottom: 0px;\n  border-bottom: none;\n}\n#example .masthead:before {\n  background: #00B5AD url(/images/tile-bg.png) repeat fixed 0% 0%;\n  position: absolute;\n  z-index: 1;\n  width: 500%;\n  height: 500%;\n  top: 0px;\n  left: 0px;\n  content: '';\n\n  -moz-transform-origin: 50% 50%;\n  -o-transform-origin: 50% 50%;\n  -ms-transform-origin: 50% 50%;\n  transform-origin: 50% 50%;\n\n  -webkit-animation-name: masthead;\n  -moz-animation-name: masthead;\n  -o-animation-name: masthead;\n  animation-name: masthead;\n\n  -webkit-animation-duration: 80s;\n  -moz-animation-duration: 80s;\n  -ms-animation-duration: 80s;\n  -o-animation-duration: 80s;\n  animation-duration: 80s;\n\n  -webkit-animation-fill-mode: both;\n  -moz-animation-fill-mode: both;\n  -ms-animation-fill-mode: both;\n  -o-animation-fill-mode: both;\n  animation-fill-mode: both;\n\n  animation-timing-function: linear;\n  -webkit-animation-timing-function: linear;\n\n  -webkit-animation-iteration-count: infinite;\n  -moz-animation-iteration-count: infinite;\n  -ms-animation-iteration-count: infinite;\n  -o-animation-iteration-count: infinite;\n  animation-iteration-count: infinite;\n}\n@keyframes masthead {\n 0% {\n    background-position: 0% 0%;\n }\n 50% {\n    background-position: -50% -100%;\n }\n 100% {\n    background-position: -100% -200%;\n }\n\n}\n\n@-moz-keyframes masthead {\n 0% {\n   background-position: 0% 0%;\n }\n 50% {\n   background-position: -50% -100%;\n }\n 100% {\n   background-position: -100% -200%;\n }\n\n}\n\n@-webkit-keyframes masthead {\n 0% {\n   background-position: 0% 0%;\n }\n 50% {\n   background-position: -50% -100%;\n }\n 100% {\n   background-position: -100% -200%;\n }\n\n}\n\n@-ms-keyframes masthead {\n 0% {\n   background-position: 0% 0%;\n }\n 50% {\n   background-position: -50% -100%;\n }\n 100% {\n   background-position: -100% -200%;\n }\n\n}\n\n@-o-keyframes masthead {\n 0% {\n   background-position: 0% 0%;\n }\n 50% {\n   background-position: -50% -100%;\n }\n 100% {\n   background-position: -100% -200%;\n }\n\n}\n#example .masthead .grid {\n  position: relative;\n  z-index: 2;\n}\n#example .masthead .column {\n  display: table;\n}\n#example .introduction {\n  display: table-cell;\n  vertical-align: top;\n  width: 100%;\n}\n#example .advertisement {\n  float: none;\n  display: table-cell;\n  vertical-align: top;\n  padding-left: 2em;\n}\n#example #carbonads-container {\n  float: right;\n}\n#example .advertisement .carbonad {\n  -moz-border-radius: 5px;\n  -webkit-border-radius: 5px;\n  border-radius: 5px;\n  border: 1px solid rgba(0, 0, 0, 0.1);\n}\n#example .advertisement .carbonad-text {\n  height: auto;\n  font-size: 12px;\n  line-height: 1.3;\n}\n#example .carbonad-tag {\n  text-align: left;\n}\n#example .inverted.advertisement .carbonad {\n  background-color: rgba(0, 31, 30, 0.5);\n  border: none;\n  overflow: hidden;\n  height: auto;\n  padding: 6px 8px 15px;\n}\n#example .inverted.advertisement .carbonad-text {\n  color: rgba(255, 255, 255, 0.6);\n}\n#example .inverted.advertisement .carbonad-tag {\n  margin-top: 10px;\n  color: rgba(255, 255, 255, 0.4);\n}\n#example .inverted.advertisement .carbonad-tag a {\n  color: rgba(255, 255, 255, 0.8);\n}\n#example .inverted.advertisement .carbonad-tag a:hover {\n  color: #FFFFFF;\n}\n\n\n#example .masthead .labeled.button {\n  position: relative;\n  left: 0px;\n  top: 0px;\n  width: auto !important;\n  margin-right: 1em;\n}\n#example .masthead.segment h1 {\n  font-size: 5em;\n  color: #FFFFFF;\n  line-height: 1.2;\n  margin: -20px 0px 0px;\n  padding-bottom: 0px;\n}\n#example .masthead strike {\n  color: rgba(0, 0, 0, 0.2);\n}\n#example .masthead h2 {\n  font-weight: normal;\n  margin: -10px 0 16px 0px;\n  font-size: 1.75em;\n  border-bottom: none;\n  line-height: 1;\n}\n#example .masthead .menu {\n  width: 375px;\n}\n#example .masthead p {\n  font-size: 1.5em;\n  margin: 1em 0em 1.5em;\n  padding: 0px;\n}\n#example .footer.link.list {\n  display: block;\n  text-align: center;\n  margin-bottom: 1.5rem;\n}\n\n\n/*--------------\n  Transparent\n---------------*/\n\n.ui.transparent.menu {\n  opacity: 0.95;\n}\n\n\n/* content */\n#example .container {\n  width: 915px;\n  margin: 0px auto;\n}\n\n#example .solid,\n#example .stripe {\n  padding: 50px 0px;\n}\n\n#example .dark.stripe {\n  background-color: #333333;\n  background: url(/images/dark-bg.png) repeat;\n  color: #FFFFFF;\n}\n#example .stripe .column .label {\n  margin-bottom: 1em;\n}\n\n#example .solid {\n  background-color: #FFFFFF;\n  -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.1);\n  -moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.1);\n  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.1);\n}\n#example .solid .column {\n  color: #555555;\n}\n#example .solid .column p b {\n  color: rgba(0, 0, 0, 0.9);\n}\n#example .solid .column p {\n  color: rgba(0, 0, 0, 0.5);\n}\n#example .stripe .message {\n  margin: 2em 0em;\n}\n\n\n#example .shortcuts {\n  float: right;\n  clear: both;\n}\n#example .launch.button {\n  position: fixed;\n  top: 63px;\n  z-index: 500;\n  width: 70px;\n}\n#example.index .main.menu {\n  top: 0px;\n}\n#example.index pre.console {\n  height: 120px;\n}\n#example.index .attached.launch.button {\n  top: 96px;\n}\n#example .launch.button .text {\n  display: inline-block;\n  display: none;\n}\n\n#example .main.container {\n  position: relative;\n  padding-bottom: 100px;\n}\n#example .main.container > h2 {\n  -webkit-transition: 0.5s color ease;\n  -moz-transition: 0.5s color ease;\n  -o-transition: 0.5s color ease;\n  -ms-transition: 0.5s color ease;\n  transition: 0.5s color ease;\n}\n#example .swap {\n  background: url(http://beta.myfav.es/images/themes/bg/subtle/subtle-handmade-paper.png) repeat;\n}\n#example .peek {\n  position: absolute;\n  top: 0px;\n  left: -230px;\n  width: 180px;\n/*\n  -webkit-transition: padding 0.3s ease;\n  -moz-transition: padding 0.3s ease;\n  -o-transition: padding 0.3s ease;\n  -ms-transition: padding 0.3s ease;\n  transition: padding 0.3s ease;*/\n}\n\n#example .ui.tab.segment {\n  padding: 1.5em 2em;\n}\n#example .example .circular.segment {\n  width: 175px;\n  height: 175px;\n}\n\n#example.popup .example .popup {\n  color: #FF0000;\n}\n#example .position.example .icon {\n  position: absolute;\n  margin: 0em;\n}\n#example .position.example .segment {\n  width: 250px;\n  height: 250px;\n}\n#example .position.example .segment .icon:nth-of-type(1) {\n  top: 3em;\n  left: 3em;\n}\n#example .position.example .segment .icon:nth-of-type(2) {\n  top: 3em;\n  left: 50%;\n  margin-left: -1em;\n}\n#example .position.example .segment .icon:nth-of-type(3) {\n  top: 3em;\n  right: 3em;\n}\n#example .position.example .segment .icon:nth-of-type(4) {\n  top: 50%;\n  margin-top: -1em;\n  right: 3em;\n}\n#example .position.example .segment .icon:nth-of-type(5) {\n  bottom: 3em;\n  right: 3em;\n}\n#example .position.example .segment .icon:nth-of-type(6) {\n  bottom: 3em;\n  left: 50%;\n  margin-left: -1em;\n}\n#example .position.example .segment .icon:nth-of-type(7) {\n  bottom: 3em;\n  left: 3em;\n}\n#example .position.example .segment .icon:nth-of-type(8) {\n  top: 50%;\n  margin-top: -1em;\n  left: 3em;\n}\n\n#example .main.ui.grid {\n  position: relative;\n}\n#example .example .toggle.button {\n  min-width: 200px;\n}\n#example .example .language.label {\n  margin: 1em 0em 0.75em;\n}\n#example .icon.example .grid {\n  margin-top: 1.5rem;\n  text-align: left;\n}\n#example .icon.example .grid .code {\n  position: static;\n}\n#example .icon.example .grid .column {\n  opacity: 0.8;\n  margin-bottom: 2em;\n  text-align: center;\n  color: #888888;\n\n  -webkit-transition:\n    margin-left 0.3s ease-out,\n    opacity 0.3s ease-out\n  ;\n  -moz-transition:\n    margin-left 0.3s ease-out,\n    opacity 0.3s ease-out\n  ;\n  -o-transition:\n    margin-left 0.3s ease-out,\n    opacity 0.3s ease-out\n  ;\n  -ms-transition:\n    margin-left 0.3s ease-out,\n    opacity 0.3s ease-out\n  ;\n  transition:\n    margin-left 0.3s ease-out,\n    opacity 0.3s ease-out\n  ;\n}\n#example .icon.example .column .icon {\n  opacity: 1;\n  color: #333333;\n  display: block;\n  margin: 0em auto 0.25em;\n  font-size: 2em;\n\n  -webkit-transition:\n    all 0.2s ease-out\n  ;\n  -moz-transition:\n    all 0.2s ease-out\n  ;\n  -o-transition:\n    all 0.2s ease-out\n  ;\n  -ms-transition:\n    all 0.2s ease-out\n  ;\n  transition:\n    all 0.2s ease-out\n  ;\n}\n#example .icon.example .grid .column:hover .icon {\n  color: #009FDA;\n  -webkit-transform: scale(1.5);\n  -moz-transform: scale(1.5);\n  -o-transform: scale(1.5);\n  -ms-transform: scale(1.5);\n  transform: scale(1.5);\n}\n#example .another.icon.example {\n  border-top: 1px solid rgba(0, 0, 0, 0.1);\n}\n\n#example .another.example {\n  margin-top: 0em;\n  padding-top: 2em;\n  border-top: none;\n}\n#example .another.example i.code {\n  top: 0px;\n}\n#example .example > p {\n  color: #888888;\n}\n\n#example .peek .menu .active:nth-child(1) {\n  border-right-color: #00B9F0;\n  color: #00B9F0;\n}\n#example .peek .menu .active:nth-child(2) {\n  border-right-color: #56BB73;\n  color: #56BB73;\n}\n#example .peek .menu .active:nth-child(3) {\n  border-right-color: #EF3F49;\n  color: #EF3F49;\n}\n#example .peek .menu .active:nth-child(4) {\n  border-right-color: #A24096;\n  color: #A24096;\n}\n#example .main h2.group {\n  color: #A24096;\n}\n\n#example .peek > .menu {\n  margin-left: 0px;\n  width: 180px;\n}\n/* #example .peek > .menu.animating > .active {\n  background-color: transparent;\n  border: none;\n  padding-left: 0.95em;\n}\n#example .peek > .menu.animating > .active:after {\n  background-color: #FFFFFF;\n} */\n\n/* overview mode */\n\n#example.overview h2.ui.header {\n  margin-bottom: 0em;\n}\n/*\n#example .ui.header ~ .ui.message a,\n#example .ui.header ~ p a {\n  font-weight: bold;\n}\n*/\n#example.overview .example {\n  margin: 0em;\n  min-height: 0px !important;\n  overflow: hidden;\n  padding: 0.5em 0em;\n}\n#example.overview .example .ui.header,\n#example.overview .example p {\n  float: right;\n  font-size: 1em;\n  font-weight: normal;\n  margin: 0;\n  padding: 0;\n}\n#example.overview .example p {\n  float: left;\n  font-size: 1rem;\n  padding: 0em 0em 0em 0.3em;\n  width: auto;\n}\n\n\n#example .sticky-wrapper.stuck {\n  height: 0px !important;\n  -webkit-transition:\n    margin-left 0.3s ease-out,\n    opacity 0.3s ease-out\n  ;\n  -moz-transition:\n    margin-left 0.3s ease-out,\n    opacity 0.3s ease-out\n  ;\n  -o-transition:\n    margin-left 0.3s ease-out,\n    opacity 0.3s ease-out\n  ;\n  -ms-transition:\n    margin-left 0.3s ease-out,\n    opacity 0.3s ease-out\n  ;\n  transition:\n    margin-left 0.3s ease-out,\n    opacity 0.3s ease-out\n  ;\n}\n#example .sticky-wrapper.stuck .peek {\n  position: fixed;\n  top: 75px;\n  left: 50%;\n  margin-left: -685px;\n}\n#example.left.pushed .sticky-wrapper .peek {\n  margin-left: -132.5px;\n  padding-left: 132.5px;\n}\n\n#example.left.pushed .sticky-wrapper.stuck .peek {\n  margin-left: -817.5px;\n  padding-left: 132.5px;\n}\n\n#example .settings.table {\n  margin-bottom: 20px;\n}\n#example .settings.table td:first-child {\n  font-weight: bold;\n}\n#example .settings.table td:nth-child(2n) {\n  width: 100px;\n}\n\n#example .existing.annotation {\n  /*display: none;*/\n}\n/*#example .segment p:first-of-type {\n  margin-top: 0em;\n}*/\n\n/* example code reskin */\n#example div.code.hide {\n  display: none;\n}\n#example div.code {\n  position: relative;\n  width: 100%;\n  height: 200px;\n  text-align: left;\n}\n#example div.code {\n  margin: -1em;\n  font-size: 14px;\n  padding: 5px 0px;\n  background-color: transparent;\n}\n#example .label + div.code {\n  margin-top: 1.5em;\n}\n#example div.code .ace_gutter {\n  background-color: #FAFAFA;\n  border-right: 1px solid rgba(0, 0, 0, 0.1);\n  color: #999999;\n}\n#example div.code .ace_gutter-cell {\n  padding-right: 20px;\n  padding-left: 10px;\n}\n#example div.code .ace_bracket {\n  background-color: rgba(0, 0, 0, 0.05);\n  border: 1px solid rgba(0, 0, 0, 0.1);\n}\n#example div.code .ace_indent-guide {\n  position: relative;\n  background: none;\n}\n/* #example div.code .ace_indent-guide:after {\n  content: '';\n  position: absolute;\n  top: 0px;\n  right: 0px;\n  height: 100%;\n  border-left: 1px solid #ECF5F3;\n} */\n\n#example table .instructive.segment {\n  background-color: transparent;\n  border: 0px;\n  box-shadow: none;\n  padding: 0em;\n  margin: -0.4em -0.7em;\n}\n#example table .instructive.segment .code {\n  margin: 0em;\n}\n#example table .instructive.segment div.code .ace_identifier,\n#example table .instructive.segment div.code .ace_line {\n  color: #555555;\n}\n\n#example .ui.label + .instructive.segment {\n  margin-top: 0em;\n}\n#example .instructive.segment em {\n  font-style: normal;\n  color: rgba(0, 0, 0, 0.4);\n}\n#example .instructive.segment .title + em {\n  float: right;\n}\n\n\n#example div.code .ace_gutter,\n#example div.code .ace_scroller {\n  background-color: transparent;\n  overflow: visible;\n  margin: 14px 10px;\n}\n#example div.code .ace_scrollbar {\n  overflow: hidden;\n  background-color: transparent;\n}\n\n#example div.code .ace_line,\n#example div.code .ace_line span {\n  -webkit-transition:\n    color 1s ease-out\n  ;\n  -moz-transition:\n    color 1s ease-out\n  ;\n  -o-transition:\n    color 1s ease-out\n  ;\n  -ms-transition:\n    color 1s ease-out\n  ;\n  transition:\n    color 1s ease-out\n  ;\n}\n#example div.code .ace_line {\n  color: #555555;\n}\n#example div.code .ace_tag {\n  color: #DCBCD3;\n}\n#example div.code .ace_attribute-name {\n  color: #F4C5C5;\n}\n#example div.code .ace_content {\n}\n#example div.code .ace_string {\n  color: #00A59D;\n}\n#example div.code .ace_cursor {\n  border-left: none;\n}\n#example div.code .ace_paren {\n  color: #CCCCCC;\n}\n#example div.code .ace_keyword {\n  color: #CCCCCC;\n}\n#example div.code .ace_identifier {\n  color: #CCCCCC;\n}\n#example div.code .ace_punctuation {\n  color: #CCCCCC;\n}\n#example div.code .ace_active_line {\n  background-color: #FBFBE5;\n}\n\n/* Hovered Style */\n\n#example div.code:hover .ace_line {\n  color: #555555;\n}\n#example div.code:hover .ace_tag {\n  color: #892A6F;\n}\n#example div.code:hover .ace_attribute-name {\n  color: #934E4E;\n}\n#example div.code:hover .ace_content {\n}\n#example div.code:hover .ace_string {\n  color: #00A59D;\n}\n#example div.code:hover .ace_cursor {/*\n  border-left: 1px solid #AAAAAA;*/\n}\n#example div.code:hover .ace_paren {\n  color: #555555;\n}\n#example div.code:hover .ace_keyword {\n  color: #555555;\n}\n#example div.code:hover .ace_identifier {\n  color: #555555;\n}\n#example div.code:hover .ace_scrollbar {\n  overflow: hidden !important;\n}\n#example div.code:hover .ace_punctuation {\n  color: #555555;\n}\n#example div.code:hover .ace_active_line {\n  background-color: #FBFBE5;\n}\n\n\n\n/* examples */\n#example .no.example i.code {\n  display: none;\n}\n\n#example .example:first-child,\n#example h2 + .example,\n#example h3 + .example,\n#example h4 + .example {\n  margin-top: 0px;\n  padding-top: 0px;\n  border-top: none;\n}\n#example h2 + .example i.code,\n#example h3 + .example i.code,\n#example h4 + .example i.code {\n  top: 0px;\n}\n#example .example > h4 {\n  margin-bottom: 0em;\n}\n\n#example .clearing.example {\n  clear: both;\n}\n#example .example {\n  margin: 1em 0em;\n  padding: 1em 0em;\n  border-top: 1px solid rgba(0, 0, 0, 0.05);\n/*  clear: both;*/\n  position: relative;\n}\n#example .example .grid i.code {\n  right: 25%;\n}\n#example .example i.code {\n  cursor: pointer;\n  position: absolute;\n  top: 2em;\n  right: 0px;\n  opacity: 0.2;\n\n  font-size: 18px;\n  color: #555555;\n\n  -webkit-transition: opacity 0.3s ease-out;\n  -moz-transition: opacity 0.3s ease-out;\n  -o-transition: opacity 0.3s ease-out;\n  -ms-transition: opacity 0.3s ease-out;\n  transition: opacity 0.3s ease-out;\n}\n\n#example .example > i.code:before {\n  font-family: 'Basic Icons';\n  content: '\\e714';\n}\n#example .example:hover i.code {\n  opacity: 0.7;\n}\n#example .example:hover i.code:hover {\n  opacity: 1;\n}\n\n#example .highlighted.example {\n  min-height: 390px;\n}\n#example .highlighted.example .grid,\n#example .ui.type.items .image .grid {\n  -webkit-animation: grid 15s ease infinite;\n  -moz-animation: grid 15s ease infinite;\n  background-color: #F6F6F6;\n  margin: 0em auto;\n}\n#example .highlighted.example .grid .row,\n#example .ui.type.items .image .grid .row {\n  border-top: 1px solid #DDDDDD;\n}\n#example .highlighted.example .grid .column,\n#example .ui.type.items .image .grid .column {\n  background-color: #F4F4F4;\n  min-height: 50px;\n  -webkit-box-shadow: 0px 0px 0px 1px #E2E2E2;\n  -moz-box-shadow: 0px 0px 0px 1px #E2E2E2;\n  box-shadow: 0px 0px 0px 1px #E2E2E2;\n}\n#example .highlighted.example .grid .segment,\n#example .ui.type.items .image .grid .segment {\n  min-height: 50px;\n  text-align: center;\n  padding-left: 0em;\n  padding-right: 0em;\n  -webkit-box-shadow: 0px 0px 0px 1px #DDDDDD;\n  -moz-box-shadow: 0px 0px 0px 1px #DDDDDD;\n  box-shadow: 0px 0px 0px 1px #DDDDDD;\n  -webkit-border-radius: 0px;\n  -moz-border-radius: 0px;\n  border-radius: 0px;\n}\n\n@-webkit-keyframes grid {\n  0% {\n    width: 100%;\n  }\n  40% {\n    width: 70%;\n  }\n  60% {\n    width: 70%;\n  }\n  100% {\n    width: 100%;\n  }\n}\n@-moz-keyframes grid {\n  0% {\n    width: 100%;\n  }\n  40% {\n    width: 70%;\n  }\n  60% {\n    width: 70%;\n  }\n  100% {\n    width: 100%;\n  }\n}\n@keyframes grid {\n  0% {\n    width: 100%;\n  }\n  40% {\n    width: 70%;\n  }\n  60% {\n    width: 70%;\n  }\n  100% {\n    width: 100%;\n  }\n}\n\n\n#example .ui.type.items > .item {\n  min-height: 255px;\n}\n\n#example .ui.type.items > .item > .image {\n  padding: 1em;\n  height: 165px;\n  vertical-align: middle;\n}\n\n/* some demo formatting */\n.ui.menu p:only-child {\n  margin: 0px;\n}\n.ui.menu a {\n  cursor: pointer;\n}\n\n\nbody.progress .ui.progress .bar {\n  -webkit-animation: finish 10s ease-in-out infinite;\n  -moz-animation: finish 10s ease-in-out infinite;\n}\n\n@-webkit-keyframes finish {\n  0% {\n    width: 0%;\n  }\n  40% {\n    width: 100%;\n  }\n  100% {\n    width: 100%;\n  }\n}\n@-moz-keyframes finish {\n  0% {\n    width: 0%;\n  }\n  40% {\n    width: 100%;\n  }\n  100% {\n    width: 100%;\n  }\n}\n@keyframes finish {\n  0% {\n    width: 0%;\n  }\n  40% {\n    width: 100%;\n  }\n  100% {\n    width: 100%;\n  }\n}\n\n\n#example.feed .example .segment {\n  max-width: 800px;\n}\n\n#example .fixed .launch {\n  display: none;\n}\n#example .designer .icon {\n  font-family: 'Basic Icons';\n}\n\n#example .fixed.column .sticky-wrapper {\n  height: 0px !important;\n}\n\n#example .fixed.column .fixed,\n#example .fixed.segment .fixed {\n  position: fixed;\n  top: 65px;\n  -webkit-perspective: 2000px;\n  -moz-perspective: 2000px;\n  -ms-perspective: 2000px;\n  perspective: 2000px;\n\n  -webkit-transform-style: preserve-3d;\n  -moz-transform-style: preserve-3d;\n  -ms-transform-style: preserve-3d;\n  transform-style: preserve-3d;\n}\n\n\n\n@media only screen and (max-width : 1725px) {\n  #example .container {\n    width: auto;\n    margin-right: 100px;\n    margin-left: 325px;\n  }\n  #example.index .container {\n    margin-left: 8em;\n    margin-right: 8em;\n  }\n  #example .sticky-wrapper.stuck .peek {\n    margin-left: 0px;\n    left: 95px;\n  }\n  #example.left.pushed .sticky-wrapper .peek {\n    padding-left: 275px;\n    margin-left: -275px;\n  }\n  #example.left.pushed .sticky-wrapper.stuck .peek {\n    margin-left: 0px;\n    padding-left: 275px;\n  }\n}\n@media only screen and (max-width : 1500px) {\n  #example.index .icon.header .icon {\n    font-size: 3em;\n  }\n}\n\n@media only screen and (max-width : 1050px) {\n  #example .fixed .section,\n  #example .fixed .title b {\n    display: none;\n  }\n  #example .stripe .header .code.icon {\n    display: none;\n  }\n  #example .fixed .container {\n    width: auto;\n    margin: 0px auto;\n  }\n  #example .attached.launch.button {\n    display: none;\n  }\n  #example .fixed .launch {\n    display: inline-block;\n  }\n  #example .sticky-wrapper {\n    display: none;\n  }\n  #example .container {\n    width: auto;\n    margin: 0% 30px 0px;\n  }\n  #example\n  #example .right.attached.launch {\n    display: none;\n  }\n}\n@media only screen and (max-width : 780px) {\n  pre.console {\n    height: 150px;\n  }\n  #example.index .masthead {\n    text-align: center;\n    padding: 50px 0px 15px;\n  }\n  #example.index .masthead h1 {\n    font-size: 3em;\n  }\n  #example.index .masthead h1 .icon {\n    display: none;\n  }\n  #example.index .masthead .button {\n    font-size: 1.1em;\n    margin-bottom: 0.5em;\n  }\n  #example.index .masthead h2 {\n    font-size: 1.25em;\n    margin: 0em 0em 1em;\n  }\n  #example.index .masthead p {\n    font-size: 1.35em;\n  }\n  #example.index .container {\n    margin-left: 2em;\n    margin-right: 2em;\n  }\n  #example.index .icon.header .icon {\n    font-size: 3em;\n  }\n  #example .introduction {\n    display: block;\n  }\n  #example .advertisement {\n    display: block;\n    margin: 1em 0em;\n    padding: 0em;\n  }\n  #example #menu .hide.item {\n    display: block;\n  }\n  #example #menu .item > .icon {\n    font-size: 1em !important;\n  }\n  #example .inverted.advertisement .carbonad {\n    height: 109px;\n  }\n  #example .inverted.advertisement .carbonad-img {\n    margin-top: 0px;\n  }\n  #example #carbonads-container {\n    float: none;\n  }\n  #example .carbonad {\n    width: auto;\n  }\n  #example .carbonad-text,\n  #example .carbonad-tag {\n    float: none;\n    display: block;\n    text-align: left;\n    margin-left: 160px;\n    width: 170px;\n  }\n}\n\n\n@media only screen and (max-width : 600px) {\n  #example .icon.example .grid .column {\n    width: 33.33%;\n  }\n}\n\n\n@media only screen and (max-width : 600px) {\n  #example .main.menu .borderless.item {\n    display: none;\n  }\n  #example .fixed .developer,\n  #example .fixed .designer,\n  #example .fixed .previous,\n  #example .fixed .next {\n    display: none;\n  }\n  #example > .tab.segment .tabular.menu {\n    display: none;\n  }\n\n  #example > .tab.segment .vertical.menu {\n    display: block;\n  }\n}\n@media only screen and (max-width : 450px) {\n  #example .main.menu .icon.item {\n    display: none;\n  }\n  #example .main.menu .github.item {\n    display: block;\n  }\n  #example .main.menu .github.item:before {\n    display: none;\n  }\n  #example .carbonad {\n    height: 135px;\n  }\n  #example .carbonad .carbonad-text {\n    width: 90px;\n  }\n}\n\n\n\n@media only screen and (min-width : 1725px) {\n  #example .container {\n    width: 1100px;\n  }\n  #example .sticky-wrapper.stuck .peek {\n    margin-left: -780px;\n  }\n  #example.left.pushed .main.menu {\n    margin-left: -132px;\n  }\n}\n\n@media only screen and (min-width : 2300px) {\n  #example .container {\n    width: 1320px;\n  }\n  #example .sticky-wrapper.stuck .peek {\n    margin-left: -890px;\n  }\n}\n\n\n\n@media only screen and (max-width : 998px) {\n  #example.index .main.menu .container {\n    width: auto;\n    padding: 0% 4%;\n  }\n  #example.transition .examples {\n    width: 100%;\n  }\n  #example.transition .examples .pointing.below.label {\n    display: none;\n  }\n}\n@media only screen and (min-width : 998px) {\n  #example.index .main.menu .container {\n    width: auto;\n    padding: 0% 8%;\n  }\n  #example .examples {\n    margin-right: 400px;\n  }\n  #example .fixed.column,\n  #example .fixed.column .fixed {\n    float: right;\n    width: 300px;\n  }\n}\n@media only screen and (min-width : 1500px) {\n  #example.index .main.menu .container {\n    width: auto;\n    padding: 0% 13%;\n  }\n  #example .examples {\n    margin-right: 500px;\n  }\n  #example .fixed.column,\n  #example .fixed.column .fixed  {\n    float: right;\n    width: 400px;\n  }\n}\n@media only screen and (min-width : 1750px) {\n  #example.index .main.menu .container {\n    width: auto;\n    padding: 0% 18%;\n  }\n}\n@media only screen and (min-width : 2000px) {\n  #example.index .main.menu .container {\n    width: auto;\n    padding: 0% 23%;\n  }\n}",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "semantic.css",
      "date": "2013-12-03T17:44:32.000Z",
      "slug": "stylesheets-semantic",
      "url": "/stylesheets/semantic.css",
      "urls": [
        "/stylesheets/semantic.css"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": true,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/stylesheets/shape.css",
      "relativePath": "stylesheets/shape.css",
      "basename": "shape",
      "outBasename": "shape",
      "extension": "css",
      "outExtension": "css",
      "extensions": [
        "css"
      ],
      "filename": "shape.css",
      "fullDirPath": "/home/jack/projects/semantic/server/files/stylesheets",
      "outPath": "/home/jack/projects/semantic/docs/stylesheets/shape.css",
      "outDirPath": "/home/jack/projects/semantic/docs/stylesheets",
      "outFilename": "shape.css",
      "relativeOutPath": "stylesheets/shape.css",
      "relativeDirPath": "stylesheets",
      "relativeOutDirPath": "stylesheets",
      "relativeBase": "stylesheets/shape",
      "relativeOutBase": "stylesheets/shape",
      "contentType": "text/css",
      "outContentType": "text/css",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:04.000Z",
      "rtime": "2013-12-04T09:15:23.206Z",
      "wtime": "2013-12-04T09:15:28.816Z",
      "exists": true,
      "encoding": "utf8",
      "source": "\n/*******************************\n        Shapes Example\n*******************************/\n\n\n#example.shape .ui.header {\n  clear: both;\n  margin-top: 1rem;\n}\n\n#example .dog.shape {\n  float: left;\n  margin: 0 1em 3em 0;\n}\n\n#example .dog.shape .side .item {\n  margin: 0em;\n  min-height: 400px;\n}\n#example .dog.two.shape .side {\n  width: 315px;\n}\n#example .dog.two.shape .side:nth-child(n+1),\n#example .dog.two.shape .side:nth-child(n+1) .item {\n  width: 315px;\n}\n#example .dog.two.shape .side:nth-child(n+2),\n#example .dog.two.shape .side:nth-child(n+2) .item {\n  width: 150px;\n}\n#example .dog.two.shape .side:nth-child(n+3),\n#example .dog.two.shape .side:nth-child(n+3) .item {\n  width: 200px;\n}\n\n#example .dog.three.shape .side:nth-child(n+1),\n#example .dog.three.shape .side:nth-child(n+1) .item {\n  width: 215px;\n}\n#example .dog.three.shape .side:nth-child(n+2),\n#example .dog.three.shape .side:nth-child(n+2) .item {\n  width: 350px;\n}\n#example .dog.three.shape .side:nth-child(n+3),\n#example .dog.three.shape .side:nth-child(n+3) .item {\n  width: 140px;\n}\n\n\n#example .demo.shape {\n\n}\n\n#example .demo.shape .side {\n  \n  width: 250px;\n  height: 250px;\n\n  -webkit-box-sizing: border-box;\n  -moz-box-sizing: border-box;\n  -ms-box-sizing: border-box;\n  box-sizing: border-box;\n\n  background-color: #E6E6E6;\n\n  color: #FFFFFF;\n\n  -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);\n  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);\n  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);\n}\n\n#example .demo.shape .side img {\n  display: block;\n  margin: 0px auto;\n  max-width: 100%;\n  max-height: 100%;\n}\n\n#example .demo.shape .heroku.side {\n  background-color: #695EE7;\n}\n#example .demo.shape .jira.side {\n  background-color: #98B5E9;\n}\n#example .demo.shape .quirky.side {\n  background-color: #67336F;\n}\n\n#example .demo.shape .side b {\n  display: block;\n  position: absolute;\n  top: 50%;\n  width: 100%;\n  font-size: 80px;\n  margin-top: -48px;\n  text-align: center;\n}\n\n#example .demo.rectangle.shape .side {\n  width: 450px;\n  height: 150px;\n}\n#example .irregular.shape .heroku.side {\n  background-color: #695EE7;\n  width: 100px;\n  height: 300px;\n}\n#example .irregular.shape .jira.side {\n  background-color: #98B5E9;\n  width: 100px;\n  height: 100px;\n}\n#example .irregular.shape .quirky.side {\n  background-color: #67336F;\n  width: 500px;\n  height: 100px;\n}",
      "content": "\n/*******************************\n        Shapes Example\n*******************************/\n\n\n#example.shape .ui.header {\n  clear: both;\n  margin-top: 1rem;\n}\n\n#example .dog.shape {\n  float: left;\n  margin: 0 1em 3em 0;\n}\n\n#example .dog.shape .side .item {\n  margin: 0em;\n  min-height: 400px;\n}\n#example .dog.two.shape .side {\n  width: 315px;\n}\n#example .dog.two.shape .side:nth-child(n+1),\n#example .dog.two.shape .side:nth-child(n+1) .item {\n  width: 315px;\n}\n#example .dog.two.shape .side:nth-child(n+2),\n#example .dog.two.shape .side:nth-child(n+2) .item {\n  width: 150px;\n}\n#example .dog.two.shape .side:nth-child(n+3),\n#example .dog.two.shape .side:nth-child(n+3) .item {\n  width: 200px;\n}\n\n#example .dog.three.shape .side:nth-child(n+1),\n#example .dog.three.shape .side:nth-child(n+1) .item {\n  width: 215px;\n}\n#example .dog.three.shape .side:nth-child(n+2),\n#example .dog.three.shape .side:nth-child(n+2) .item {\n  width: 350px;\n}\n#example .dog.three.shape .side:nth-child(n+3),\n#example .dog.three.shape .side:nth-child(n+3) .item {\n  width: 140px;\n}\n\n\n#example .demo.shape {\n\n}\n\n#example .demo.shape .side {\n  \n  width: 250px;\n  height: 250px;\n\n  -webkit-box-sizing: border-box;\n  -moz-box-sizing: border-box;\n  -ms-box-sizing: border-box;\n  box-sizing: border-box;\n\n  background-color: #E6E6E6;\n\n  color: #FFFFFF;\n\n  -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);\n  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);\n  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);\n}\n\n#example .demo.shape .side img {\n  display: block;\n  margin: 0px auto;\n  max-width: 100%;\n  max-height: 100%;\n}\n\n#example .demo.shape .heroku.side {\n  background-color: #695EE7;\n}\n#example .demo.shape .jira.side {\n  background-color: #98B5E9;\n}\n#example .demo.shape .quirky.side {\n  background-color: #67336F;\n}\n\n#example .demo.shape .side b {\n  display: block;\n  position: absolute;\n  top: 50%;\n  width: 100%;\n  font-size: 80px;\n  margin-top: -48px;\n  text-align: center;\n}\n\n#example .demo.rectangle.shape .side {\n  width: 450px;\n  height: 150px;\n}\n#example .irregular.shape .heroku.side {\n  background-color: #695EE7;\n  width: 100px;\n  height: 300px;\n}\n#example .irregular.shape .jira.side {\n  background-color: #98B5E9;\n  width: 100px;\n  height: 100px;\n}\n#example .irregular.shape .quirky.side {\n  background-color: #67336F;\n  width: 500px;\n  height: 100px;\n}",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "shape.css",
      "date": "2013-12-02T15:39:04.000Z",
      "slug": "stylesheets-shape",
      "url": "/stylesheets/shape.css",
      "urls": [
        "/stylesheets/shape.css"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": true,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/images/demo/avatar.jpg",
      "relativePath": "images/demo/avatar.jpg",
      "basename": "avatar",
      "outBasename": "avatar",
      "extension": "jpg",
      "outExtension": "jpg",
      "extensions": [
        "jpg"
      ],
      "filename": "avatar.jpg",
      "fullDirPath": "/home/jack/projects/semantic/server/files/images/demo",
      "outPath": "/home/jack/projects/semantic/docs/images/demo/avatar.jpg",
      "outDirPath": "/home/jack/projects/semantic/docs/images/demo",
      "outFilename": "avatar.jpg",
      "relativeOutPath": "images/demo/avatar.jpg",
      "relativeDirPath": "images/demo",
      "relativeOutDirPath": "images/demo",
      "relativeBase": "images/demo/avatar",
      "relativeOutBase": "images/demo/avatar",
      "contentType": "image/jpeg",
      "outContentType": "image/jpeg",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.289Z",
      "exists": true,
      "encoding": "binary",
      "source": "",
      "content": "",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "avatar.jpg",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "images-demo-avatar",
      "url": "/images/demo/avatar.jpg",
      "urls": [
        "/images/demo/avatar.jpg"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/images/demo/avatar2.jpg",
      "relativePath": "images/demo/avatar2.jpg",
      "basename": "avatar2",
      "outBasename": "avatar2",
      "extension": "jpg",
      "outExtension": "jpg",
      "extensions": [
        "jpg"
      ],
      "filename": "avatar2.jpg",
      "fullDirPath": "/home/jack/projects/semantic/server/files/images/demo",
      "outPath": "/home/jack/projects/semantic/docs/images/demo/avatar2.jpg",
      "outDirPath": "/home/jack/projects/semantic/docs/images/demo",
      "outFilename": "avatar2.jpg",
      "relativeOutPath": "images/demo/avatar2.jpg",
      "relativeDirPath": "images/demo",
      "relativeOutDirPath": "images/demo",
      "relativeBase": "images/demo/avatar2",
      "relativeOutBase": "images/demo/avatar2",
      "contentType": "image/jpeg",
      "outContentType": "image/jpeg",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.293Z",
      "exists": true,
      "encoding": "binary",
      "source": "",
      "content": "",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "avatar2.jpg",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "images-demo-avatar2",
      "url": "/images/demo/avatar2.jpg",
      "urls": [
        "/images/demo/avatar2.jpg"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/images/demo/avatar3.jpg",
      "relativePath": "images/demo/avatar3.jpg",
      "basename": "avatar3",
      "outBasename": "avatar3",
      "extension": "jpg",
      "outExtension": "jpg",
      "extensions": [
        "jpg"
      ],
      "filename": "avatar3.jpg",
      "fullDirPath": "/home/jack/projects/semantic/server/files/images/demo",
      "outPath": "/home/jack/projects/semantic/docs/images/demo/avatar3.jpg",
      "outDirPath": "/home/jack/projects/semantic/docs/images/demo",
      "outFilename": "avatar3.jpg",
      "relativeOutPath": "images/demo/avatar3.jpg",
      "relativeDirPath": "images/demo",
      "relativeOutDirPath": "images/demo",
      "relativeBase": "images/demo/avatar3",
      "relativeOutBase": "images/demo/avatar3",
      "contentType": "image/jpeg",
      "outContentType": "image/jpeg",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.296Z",
      "exists": true,
      "encoding": "binary",
      "source": "",
      "content": "",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "avatar3.jpg",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "images-demo-avatar3",
      "url": "/images/demo/avatar3.jpg",
      "urls": [
        "/images/demo/avatar3.jpg"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/images/demo/avatar4.jpg",
      "relativePath": "images/demo/avatar4.jpg",
      "basename": "avatar4",
      "outBasename": "avatar4",
      "extension": "jpg",
      "outExtension": "jpg",
      "extensions": [
        "jpg"
      ],
      "filename": "avatar4.jpg",
      "fullDirPath": "/home/jack/projects/semantic/server/files/images/demo",
      "outPath": "/home/jack/projects/semantic/docs/images/demo/avatar4.jpg",
      "outDirPath": "/home/jack/projects/semantic/docs/images/demo",
      "outFilename": "avatar4.jpg",
      "relativeOutPath": "images/demo/avatar4.jpg",
      "relativeDirPath": "images/demo",
      "relativeOutDirPath": "images/demo",
      "relativeBase": "images/demo/avatar4",
      "relativeOutBase": "images/demo/avatar4",
      "contentType": "image/jpeg",
      "outContentType": "image/jpeg",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.298Z",
      "exists": true,
      "encoding": "binary",
      "source": "",
      "content": "",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "avatar4.jpg",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "images-demo-avatar4",
      "url": "/images/demo/avatar4.jpg",
      "urls": [
        "/images/demo/avatar4.jpg"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/images/demo/dog.jpg",
      "relativePath": "images/demo/dog.jpg",
      "basename": "dog",
      "outBasename": "dog",
      "extension": "jpg",
      "outExtension": "jpg",
      "extensions": [
        "jpg"
      ],
      "filename": "dog.jpg",
      "fullDirPath": "/home/jack/projects/semantic/server/files/images/demo",
      "outPath": "/home/jack/projects/semantic/docs/images/demo/dog.jpg",
      "outDirPath": "/home/jack/projects/semantic/docs/images/demo",
      "outFilename": "dog.jpg",
      "relativeOutPath": "images/demo/dog.jpg",
      "relativeDirPath": "images/demo",
      "relativeOutDirPath": "images/demo",
      "relativeBase": "images/demo/dog",
      "relativeOutBase": "images/demo/dog",
      "contentType": "image/jpeg",
      "outContentType": "image/jpeg",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.304Z",
      "exists": true,
      "encoding": "binary",
      "source": "",
      "content": "",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "dog.jpg",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "images-demo-dog",
      "url": "/images/demo/dog.jpg",
      "urls": [
        "/images/demo/dog.jpg"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/images/demo/highres.jpg",
      "relativePath": "images/demo/highres.jpg",
      "basename": "highres",
      "outBasename": "highres",
      "extension": "jpg",
      "outExtension": "jpg",
      "extensions": [
        "jpg"
      ],
      "filename": "highres.jpg",
      "fullDirPath": "/home/jack/projects/semantic/server/files/images/demo",
      "outPath": "/home/jack/projects/semantic/docs/images/demo/highres.jpg",
      "outDirPath": "/home/jack/projects/semantic/docs/images/demo",
      "outFilename": "highres.jpg",
      "relativeOutPath": "images/demo/highres.jpg",
      "relativeDirPath": "images/demo",
      "relativeOutDirPath": "images/demo",
      "relativeBase": "images/demo/highres",
      "relativeOutBase": "images/demo/highres",
      "contentType": "image/jpeg",
      "outContentType": "image/jpeg",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.310Z",
      "exists": true,
      "encoding": "binary",
      "source": "",
      "content": "",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "highres.jpg",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "images-demo-highres",
      "url": "/images/demo/highres.jpg",
      "urls": [
        "/images/demo/highres.jpg"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/images/demo/highres2.jpg",
      "relativePath": "images/demo/highres2.jpg",
      "basename": "highres2",
      "outBasename": "highres2",
      "extension": "jpg",
      "outExtension": "jpg",
      "extensions": [
        "jpg"
      ],
      "filename": "highres2.jpg",
      "fullDirPath": "/home/jack/projects/semantic/server/files/images/demo",
      "outPath": "/home/jack/projects/semantic/docs/images/demo/highres2.jpg",
      "outDirPath": "/home/jack/projects/semantic/docs/images/demo",
      "outFilename": "highres2.jpg",
      "relativeOutPath": "images/demo/highres2.jpg",
      "relativeDirPath": "images/demo",
      "relativeOutDirPath": "images/demo",
      "relativeBase": "images/demo/highres2",
      "relativeOutBase": "images/demo/highres2",
      "contentType": "image/jpeg",
      "outContentType": "image/jpeg",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.313Z",
      "exists": true,
      "encoding": "binary",
      "source": "",
      "content": "",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "highres2.jpg",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "images-demo-highres2",
      "url": "/images/demo/highres2.jpg",
      "urls": [
        "/images/demo/highres2.jpg"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/images/demo/highres3.jpg",
      "relativePath": "images/demo/highres3.jpg",
      "basename": "highres3",
      "outBasename": "highres3",
      "extension": "jpg",
      "outExtension": "jpg",
      "extensions": [
        "jpg"
      ],
      "filename": "highres3.jpg",
      "fullDirPath": "/home/jack/projects/semantic/server/files/images/demo",
      "outPath": "/home/jack/projects/semantic/docs/images/demo/highres3.jpg",
      "outDirPath": "/home/jack/projects/semantic/docs/images/demo",
      "outFilename": "highres3.jpg",
      "relativeOutPath": "images/demo/highres3.jpg",
      "relativeDirPath": "images/demo",
      "relativeOutDirPath": "images/demo",
      "relativeBase": "images/demo/highres3",
      "relativeOutBase": "images/demo/highres3",
      "contentType": "image/jpeg",
      "outContentType": "image/jpeg",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.317Z",
      "exists": true,
      "encoding": "binary",
      "source": "",
      "content": "",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "highres3.jpg",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "images-demo-highres3",
      "url": "/images/demo/highres3.jpg",
      "urls": [
        "/images/demo/highres3.jpg"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/images/demo/highres4.jpg",
      "relativePath": "images/demo/highres4.jpg",
      "basename": "highres4",
      "outBasename": "highres4",
      "extension": "jpg",
      "outExtension": "jpg",
      "extensions": [
        "jpg"
      ],
      "filename": "highres4.jpg",
      "fullDirPath": "/home/jack/projects/semantic/server/files/images/demo",
      "outPath": "/home/jack/projects/semantic/docs/images/demo/highres4.jpg",
      "outDirPath": "/home/jack/projects/semantic/docs/images/demo",
      "outFilename": "highres4.jpg",
      "relativeOutPath": "images/demo/highres4.jpg",
      "relativeDirPath": "images/demo",
      "relativeOutDirPath": "images/demo",
      "relativeBase": "images/demo/highres4",
      "relativeOutBase": "images/demo/highres4",
      "contentType": "image/jpeg",
      "outContentType": "image/jpeg",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.320Z",
      "exists": true,
      "encoding": "binary",
      "source": "",
      "content": "",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "highres4.jpg",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "images-demo-highres4",
      "url": "/images/demo/highres4.jpg",
      "urls": [
        "/images/demo/highres4.jpg"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/images/demo/highres5.jpg",
      "relativePath": "images/demo/highres5.jpg",
      "basename": "highres5",
      "outBasename": "highres5",
      "extension": "jpg",
      "outExtension": "jpg",
      "extensions": [
        "jpg"
      ],
      "filename": "highres5.jpg",
      "fullDirPath": "/home/jack/projects/semantic/server/files/images/demo",
      "outPath": "/home/jack/projects/semantic/docs/images/demo/highres5.jpg",
      "outDirPath": "/home/jack/projects/semantic/docs/images/demo",
      "outFilename": "highres5.jpg",
      "relativeOutPath": "images/demo/highres5.jpg",
      "relativeDirPath": "images/demo",
      "relativeOutDirPath": "images/demo",
      "relativeBase": "images/demo/highres5",
      "relativeOutBase": "images/demo/highres5",
      "contentType": "image/jpeg",
      "outContentType": "image/jpeg",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.324Z",
      "exists": true,
      "encoding": "binary",
      "source": "",
      "content": "",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "highres5.jpg",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "images-demo-highres5",
      "url": "/images/demo/highres5.jpg",
      "urls": [
        "/images/demo/highres5.jpg"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/images/demo/highres6.jpg",
      "relativePath": "images/demo/highres6.jpg",
      "basename": "highres6",
      "outBasename": "highres6",
      "extension": "jpg",
      "outExtension": "jpg",
      "extensions": [
        "jpg"
      ],
      "filename": "highres6.jpg",
      "fullDirPath": "/home/jack/projects/semantic/server/files/images/demo",
      "outPath": "/home/jack/projects/semantic/docs/images/demo/highres6.jpg",
      "outDirPath": "/home/jack/projects/semantic/docs/images/demo",
      "outFilename": "highres6.jpg",
      "relativeOutPath": "images/demo/highres6.jpg",
      "relativeDirPath": "images/demo",
      "relativeOutDirPath": "images/demo",
      "relativeBase": "images/demo/highres6",
      "relativeOutBase": "images/demo/highres6",
      "contentType": "image/jpeg",
      "outContentType": "image/jpeg",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.329Z",
      "exists": true,
      "encoding": "binary",
      "source": "",
      "content": "",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "highres6.jpg",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "images-demo-highres6",
      "url": "/images/demo/highres6.jpg",
      "urls": [
        "/images/demo/highres6.jpg"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/images/demo/invention.jpg",
      "relativePath": "images/demo/invention.jpg",
      "basename": "invention",
      "outBasename": "invention",
      "extension": "jpg",
      "outExtension": "jpg",
      "extensions": [
        "jpg"
      ],
      "filename": "invention.jpg",
      "fullDirPath": "/home/jack/projects/semantic/server/files/images/demo",
      "outPath": "/home/jack/projects/semantic/docs/images/demo/invention.jpg",
      "outDirPath": "/home/jack/projects/semantic/docs/images/demo",
      "outFilename": "invention.jpg",
      "relativeOutPath": "images/demo/invention.jpg",
      "relativeDirPath": "images/demo",
      "relativeOutDirPath": "images/demo",
      "relativeBase": "images/demo/invention",
      "relativeOutBase": "images/demo/invention",
      "contentType": "image/jpeg",
      "outContentType": "image/jpeg",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.333Z",
      "exists": true,
      "encoding": "binary",
      "source": "",
      "content": "",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "invention.jpg",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "images-demo-invention",
      "url": "/images/demo/invention.jpg",
      "urls": [
        "/images/demo/invention.jpg"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/images/demo/invention2.jpg",
      "relativePath": "images/demo/invention2.jpg",
      "basename": "invention2",
      "outBasename": "invention2",
      "extension": "jpg",
      "outExtension": "jpg",
      "extensions": [
        "jpg"
      ],
      "filename": "invention2.jpg",
      "fullDirPath": "/home/jack/projects/semantic/server/files/images/demo",
      "outPath": "/home/jack/projects/semantic/docs/images/demo/invention2.jpg",
      "outDirPath": "/home/jack/projects/semantic/docs/images/demo",
      "outFilename": "invention2.jpg",
      "relativeOutPath": "images/demo/invention2.jpg",
      "relativeDirPath": "images/demo",
      "relativeOutDirPath": "images/demo",
      "relativeBase": "images/demo/invention2",
      "relativeOutBase": "images/demo/invention2",
      "contentType": "image/jpeg",
      "outContentType": "image/jpeg",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.335Z",
      "exists": true,
      "encoding": "binary",
      "source": "",
      "content": "",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "invention2.jpg",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "images-demo-invention2",
      "url": "/images/demo/invention2.jpg",
      "urls": [
        "/images/demo/invention2.jpg"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/images/demo/invention3.jpg",
      "relativePath": "images/demo/invention3.jpg",
      "basename": "invention3",
      "outBasename": "invention3",
      "extension": "jpg",
      "outExtension": "jpg",
      "extensions": [
        "jpg"
      ],
      "filename": "invention3.jpg",
      "fullDirPath": "/home/jack/projects/semantic/server/files/images/demo",
      "outPath": "/home/jack/projects/semantic/docs/images/demo/invention3.jpg",
      "outDirPath": "/home/jack/projects/semantic/docs/images/demo",
      "outFilename": "invention3.jpg",
      "relativeOutPath": "images/demo/invention3.jpg",
      "relativeDirPath": "images/demo",
      "relativeOutDirPath": "images/demo",
      "relativeBase": "images/demo/invention3",
      "relativeOutBase": "images/demo/invention3",
      "contentType": "image/jpeg",
      "outContentType": "image/jpeg",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.338Z",
      "exists": true,
      "encoding": "binary",
      "source": "",
      "content": "",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "invention3.jpg",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "images-demo-invention3",
      "url": "/images/demo/invention3.jpg",
      "urls": [
        "/images/demo/invention3.jpg"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/images/demo/item1.jpg",
      "relativePath": "images/demo/item1.jpg",
      "basename": "item1",
      "outBasename": "item1",
      "extension": "jpg",
      "outExtension": "jpg",
      "extensions": [
        "jpg"
      ],
      "filename": "item1.jpg",
      "fullDirPath": "/home/jack/projects/semantic/server/files/images/demo",
      "outPath": "/home/jack/projects/semantic/docs/images/demo/item1.jpg",
      "outDirPath": "/home/jack/projects/semantic/docs/images/demo",
      "outFilename": "item1.jpg",
      "relativeOutPath": "images/demo/item1.jpg",
      "relativeDirPath": "images/demo",
      "relativeOutDirPath": "images/demo",
      "relativeBase": "images/demo/item1",
      "relativeOutBase": "images/demo/item1",
      "contentType": "image/jpeg",
      "outContentType": "image/jpeg",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.341Z",
      "exists": true,
      "encoding": "binary",
      "source": "",
      "content": "",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "item1.jpg",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "images-demo-item1",
      "url": "/images/demo/item1.jpg",
      "urls": [
        "/images/demo/item1.jpg"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/images/demo/item2.jpg",
      "relativePath": "images/demo/item2.jpg",
      "basename": "item2",
      "outBasename": "item2",
      "extension": "jpg",
      "outExtension": "jpg",
      "extensions": [
        "jpg"
      ],
      "filename": "item2.jpg",
      "fullDirPath": "/home/jack/projects/semantic/server/files/images/demo",
      "outPath": "/home/jack/projects/semantic/docs/images/demo/item2.jpg",
      "outDirPath": "/home/jack/projects/semantic/docs/images/demo",
      "outFilename": "item2.jpg",
      "relativeOutPath": "images/demo/item2.jpg",
      "relativeDirPath": "images/demo",
      "relativeOutDirPath": "images/demo",
      "relativeBase": "images/demo/item2",
      "relativeOutBase": "images/demo/item2",
      "contentType": "image/jpeg",
      "outContentType": "image/jpeg",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.343Z",
      "exists": true,
      "encoding": "binary",
      "source": "",
      "content": "",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "item2.jpg",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "images-demo-item2",
      "url": "/images/demo/item2.jpg",
      "urls": [
        "/images/demo/item2.jpg"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/images/demo/item3.jpg",
      "relativePath": "images/demo/item3.jpg",
      "basename": "item3",
      "outBasename": "item3",
      "extension": "jpg",
      "outExtension": "jpg",
      "extensions": [
        "jpg"
      ],
      "filename": "item3.jpg",
      "fullDirPath": "/home/jack/projects/semantic/server/files/images/demo",
      "outPath": "/home/jack/projects/semantic/docs/images/demo/item3.jpg",
      "outDirPath": "/home/jack/projects/semantic/docs/images/demo",
      "outFilename": "item3.jpg",
      "relativeOutPath": "images/demo/item3.jpg",
      "relativeDirPath": "images/demo",
      "relativeOutDirPath": "images/demo",
      "relativeBase": "images/demo/item3",
      "relativeOutBase": "images/demo/item3",
      "contentType": "image/jpeg",
      "outContentType": "image/jpeg",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.346Z",
      "exists": true,
      "encoding": "binary",
      "source": "",
      "content": "",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "item3.jpg",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "images-demo-item3",
      "url": "/images/demo/item3.jpg",
      "urls": [
        "/images/demo/item3.jpg"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/images/demo/item4.jpg",
      "relativePath": "images/demo/item4.jpg",
      "basename": "item4",
      "outBasename": "item4",
      "extension": "jpg",
      "outExtension": "jpg",
      "extensions": [
        "jpg"
      ],
      "filename": "item4.jpg",
      "fullDirPath": "/home/jack/projects/semantic/server/files/images/demo",
      "outPath": "/home/jack/projects/semantic/docs/images/demo/item4.jpg",
      "outDirPath": "/home/jack/projects/semantic/docs/images/demo",
      "outFilename": "item4.jpg",
      "relativeOutPath": "images/demo/item4.jpg",
      "relativeDirPath": "images/demo",
      "relativeOutDirPath": "images/demo",
      "relativeBase": "images/demo/item4",
      "relativeOutBase": "images/demo/item4",
      "contentType": "image/jpeg",
      "outContentType": "image/jpeg",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.349Z",
      "exists": true,
      "encoding": "binary",
      "source": "",
      "content": "",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "item4.jpg",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "images-demo-item4",
      "url": "/images/demo/item4.jpg",
      "urls": [
        "/images/demo/item4.jpg"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/images/demo/item5.jpg",
      "relativePath": "images/demo/item5.jpg",
      "basename": "item5",
      "outBasename": "item5",
      "extension": "jpg",
      "outExtension": "jpg",
      "extensions": [
        "jpg"
      ],
      "filename": "item5.jpg",
      "fullDirPath": "/home/jack/projects/semantic/server/files/images/demo",
      "outPath": "/home/jack/projects/semantic/docs/images/demo/item5.jpg",
      "outDirPath": "/home/jack/projects/semantic/docs/images/demo",
      "outFilename": "item5.jpg",
      "relativeOutPath": "images/demo/item5.jpg",
      "relativeDirPath": "images/demo",
      "relativeOutDirPath": "images/demo",
      "relativeBase": "images/demo/item5",
      "relativeOutBase": "images/demo/item5",
      "contentType": "image/jpeg",
      "outContentType": "image/jpeg",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.352Z",
      "exists": true,
      "encoding": "binary",
      "source": "",
      "content": "",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "item5.jpg",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "images-demo-item5",
      "url": "/images/demo/item5.jpg",
      "urls": [
        "/images/demo/item5.jpg"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/images/demo/photo.jpg",
      "relativePath": "images/demo/photo.jpg",
      "basename": "photo",
      "outBasename": "photo",
      "extension": "jpg",
      "outExtension": "jpg",
      "extensions": [
        "jpg"
      ],
      "filename": "photo.jpg",
      "fullDirPath": "/home/jack/projects/semantic/server/files/images/demo",
      "outPath": "/home/jack/projects/semantic/docs/images/demo/photo.jpg",
      "outDirPath": "/home/jack/projects/semantic/docs/images/demo",
      "outFilename": "photo.jpg",
      "relativeOutPath": "images/demo/photo.jpg",
      "relativeDirPath": "images/demo",
      "relativeOutDirPath": "images/demo",
      "relativeBase": "images/demo/photo",
      "relativeOutBase": "images/demo/photo",
      "contentType": "image/jpeg",
      "outContentType": "image/jpeg",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.354Z",
      "exists": true,
      "encoding": "binary",
      "source": "",
      "content": "",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "photo.jpg",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "images-demo-photo",
      "url": "/images/demo/photo.jpg",
      "urls": [
        "/images/demo/photo.jpg"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/images/demo/photo2.jpg",
      "relativePath": "images/demo/photo2.jpg",
      "basename": "photo2",
      "outBasename": "photo2",
      "extension": "jpg",
      "outExtension": "jpg",
      "extensions": [
        "jpg"
      ],
      "filename": "photo2.jpg",
      "fullDirPath": "/home/jack/projects/semantic/server/files/images/demo",
      "outPath": "/home/jack/projects/semantic/docs/images/demo/photo2.jpg",
      "outDirPath": "/home/jack/projects/semantic/docs/images/demo",
      "outFilename": "photo2.jpg",
      "relativeOutPath": "images/demo/photo2.jpg",
      "relativeDirPath": "images/demo",
      "relativeOutDirPath": "images/demo",
      "relativeBase": "images/demo/photo2",
      "relativeOutBase": "images/demo/photo2",
      "contentType": "image/jpeg",
      "outContentType": "image/jpeg",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.356Z",
      "exists": true,
      "encoding": "binary",
      "source": "",
      "content": "",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "photo2.jpg",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "images-demo-photo2",
      "url": "/images/demo/photo2.jpg",
      "urls": [
        "/images/demo/photo2.jpg"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/images/demo/product.jpg",
      "relativePath": "images/demo/product.jpg",
      "basename": "product",
      "outBasename": "product",
      "extension": "jpg",
      "outExtension": "jpg",
      "extensions": [
        "jpg"
      ],
      "filename": "product.jpg",
      "fullDirPath": "/home/jack/projects/semantic/server/files/images/demo",
      "outPath": "/home/jack/projects/semantic/docs/images/demo/product.jpg",
      "outDirPath": "/home/jack/projects/semantic/docs/images/demo",
      "outFilename": "product.jpg",
      "relativeOutPath": "images/demo/product.jpg",
      "relativeDirPath": "images/demo",
      "relativeOutDirPath": "images/demo",
      "relativeBase": "images/demo/product",
      "relativeOutBase": "images/demo/product",
      "contentType": "image/jpeg",
      "outContentType": "image/jpeg",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.359Z",
      "exists": true,
      "encoding": "binary",
      "source": "",
      "content": "",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "product.jpg",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "images-demo-product",
      "url": "/images/demo/product.jpg",
      "urls": [
        "/images/demo/product.jpg"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/images/demo/product2.jpg",
      "relativePath": "images/demo/product2.jpg",
      "basename": "product2",
      "outBasename": "product2",
      "extension": "jpg",
      "outExtension": "jpg",
      "extensions": [
        "jpg"
      ],
      "filename": "product2.jpg",
      "fullDirPath": "/home/jack/projects/semantic/server/files/images/demo",
      "outPath": "/home/jack/projects/semantic/docs/images/demo/product2.jpg",
      "outDirPath": "/home/jack/projects/semantic/docs/images/demo",
      "outFilename": "product2.jpg",
      "relativeOutPath": "images/demo/product2.jpg",
      "relativeDirPath": "images/demo",
      "relativeOutDirPath": "images/demo",
      "relativeBase": "images/demo/product2",
      "relativeOutBase": "images/demo/product2",
      "contentType": "image/jpeg",
      "outContentType": "image/jpeg",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.362Z",
      "exists": true,
      "encoding": "binary",
      "source": "",
      "content": "",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "product2.jpg",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "images-demo-product2",
      "url": "/images/demo/product2.jpg",
      "urls": [
        "/images/demo/product2.jpg"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/images/demo/product3.jpg",
      "relativePath": "images/demo/product3.jpg",
      "basename": "product3",
      "outBasename": "product3",
      "extension": "jpg",
      "outExtension": "jpg",
      "extensions": [
        "jpg"
      ],
      "filename": "product3.jpg",
      "fullDirPath": "/home/jack/projects/semantic/server/files/images/demo",
      "outPath": "/home/jack/projects/semantic/docs/images/demo/product3.jpg",
      "outDirPath": "/home/jack/projects/semantic/docs/images/demo",
      "outFilename": "product3.jpg",
      "relativeOutPath": "images/demo/product3.jpg",
      "relativeDirPath": "images/demo",
      "relativeOutDirPath": "images/demo",
      "relativeBase": "images/demo/product3",
      "relativeOutBase": "images/demo/product3",
      "contentType": "image/jpeg",
      "outContentType": "image/jpeg",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.364Z",
      "exists": true,
      "encoding": "binary",
      "source": "",
      "content": "",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "product3.jpg",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "images-demo-product3",
      "url": "/images/demo/product3.jpg",
      "urls": [
        "/images/demo/product3.jpg"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/images/demo/stickfigure.jpg",
      "relativePath": "images/demo/stickfigure.jpg",
      "basename": "stickfigure",
      "outBasename": "stickfigure",
      "extension": "jpg",
      "outExtension": "jpg",
      "extensions": [
        "jpg"
      ],
      "filename": "stickfigure.jpg",
      "fullDirPath": "/home/jack/projects/semantic/server/files/images/demo",
      "outPath": "/home/jack/projects/semantic/docs/images/demo/stickfigure.jpg",
      "outDirPath": "/home/jack/projects/semantic/docs/images/demo",
      "outFilename": "stickfigure.jpg",
      "relativeOutPath": "images/demo/stickfigure.jpg",
      "relativeDirPath": "images/demo",
      "relativeOutDirPath": "images/demo",
      "relativeBase": "images/demo/stickfigure",
      "relativeOutBase": "images/demo/stickfigure",
      "contentType": "image/jpeg",
      "outContentType": "image/jpeg",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.367Z",
      "exists": true,
      "encoding": "binary",
      "source": "",
      "content": "",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "stickfigure.jpg",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "images-demo-stickfigure",
      "url": "/images/demo/stickfigure.jpg",
      "urls": [
        "/images/demo/stickfigure.jpg"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/images/demo/title.png",
      "relativePath": "images/demo/title.png",
      "basename": "title",
      "outBasename": "title",
      "extension": "png",
      "outExtension": "png",
      "extensions": [
        "png"
      ],
      "filename": "title.png",
      "fullDirPath": "/home/jack/projects/semantic/server/files/images/demo",
      "outPath": "/home/jack/projects/semantic/docs/images/demo/title.png",
      "outDirPath": "/home/jack/projects/semantic/docs/images/demo",
      "outFilename": "title.png",
      "relativeOutPath": "images/demo/title.png",
      "relativeDirPath": "images/demo",
      "relativeOutDirPath": "images/demo",
      "relativeBase": "images/demo/title",
      "relativeOutBase": "images/demo/title",
      "contentType": "image/png",
      "outContentType": "image/png",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.369Z",
      "exists": true,
      "encoding": "binary",
      "source": "",
      "content": "",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "title.png",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "images-demo-title",
      "url": "/images/demo/title.png",
      "urls": [
        "/images/demo/title.png"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/images/demo/vector.png",
      "relativePath": "images/demo/vector.png",
      "basename": "vector",
      "outBasename": "vector",
      "extension": "png",
      "outExtension": "png",
      "extensions": [
        "png"
      ],
      "filename": "vector.png",
      "fullDirPath": "/home/jack/projects/semantic/server/files/images/demo",
      "outPath": "/home/jack/projects/semantic/docs/images/demo/vector.png",
      "outDirPath": "/home/jack/projects/semantic/docs/images/demo",
      "outFilename": "vector.png",
      "relativeOutPath": "images/demo/vector.png",
      "relativeDirPath": "images/demo",
      "relativeOutDirPath": "images/demo",
      "relativeBase": "images/demo/vector",
      "relativeOutBase": "images/demo/vector",
      "contentType": "image/png",
      "outContentType": "image/png",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.372Z",
      "exists": true,
      "encoding": "binary",
      "source": "",
      "content": "",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "vector.png",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "images-demo-vector",
      "url": "/images/demo/vector.png",
      "urls": [
        "/images/demo/vector.png"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/images/shape/heroku.png",
      "relativePath": "images/shape/heroku.png",
      "basename": "heroku",
      "outBasename": "heroku",
      "extension": "png",
      "outExtension": "png",
      "extensions": [
        "png"
      ],
      "filename": "heroku.png",
      "fullDirPath": "/home/jack/projects/semantic/server/files/images/shape",
      "outPath": "/home/jack/projects/semantic/docs/images/shape/heroku.png",
      "outDirPath": "/home/jack/projects/semantic/docs/images/shape",
      "outFilename": "heroku.png",
      "relativeOutPath": "images/shape/heroku.png",
      "relativeDirPath": "images/shape",
      "relativeOutDirPath": "images/shape",
      "relativeBase": "images/shape/heroku",
      "relativeOutBase": "images/shape/heroku",
      "contentType": "image/png",
      "outContentType": "image/png",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.374Z",
      "exists": true,
      "encoding": "binary",
      "source": "",
      "content": "",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "heroku.png",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "images-shape-heroku",
      "url": "/images/shape/heroku.png",
      "urls": [
        "/images/shape/heroku.png"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/images/shape/jira.png",
      "relativePath": "images/shape/jira.png",
      "basename": "jira",
      "outBasename": "jira",
      "extension": "png",
      "outExtension": "png",
      "extensions": [
        "png"
      ],
      "filename": "jira.png",
      "fullDirPath": "/home/jack/projects/semantic/server/files/images/shape",
      "outPath": "/home/jack/projects/semantic/docs/images/shape/jira.png",
      "outDirPath": "/home/jack/projects/semantic/docs/images/shape",
      "outFilename": "jira.png",
      "relativeOutPath": "images/shape/jira.png",
      "relativeDirPath": "images/shape",
      "relativeOutDirPath": "images/shape",
      "relativeBase": "images/shape/jira",
      "relativeOutBase": "images/shape/jira",
      "contentType": "image/png",
      "outContentType": "image/png",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.377Z",
      "exists": true,
      "encoding": "binary",
      "source": "",
      "content": "",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "jira.png",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "images-shape-jira",
      "url": "/images/shape/jira.png",
      "urls": [
        "/images/shape/jira.png"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/images/shape/quirky.png",
      "relativePath": "images/shape/quirky.png",
      "basename": "quirky",
      "outBasename": "quirky",
      "extension": "png",
      "outExtension": "png",
      "extensions": [
        "png"
      ],
      "filename": "quirky.png",
      "fullDirPath": "/home/jack/projects/semantic/server/files/images/shape",
      "outPath": "/home/jack/projects/semantic/docs/images/shape/quirky.png",
      "outDirPath": "/home/jack/projects/semantic/docs/images/shape",
      "outFilename": "quirky.png",
      "relativeOutPath": "images/shape/quirky.png",
      "relativeDirPath": "images/shape",
      "relativeOutDirPath": "images/shape",
      "relativeBase": "images/shape/quirky",
      "relativeOutBase": "images/shape/quirky",
      "contentType": "image/png",
      "outContentType": "image/png",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:03.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.380Z",
      "exists": true,
      "encoding": "binary",
      "source": "",
      "content": "",
      "tags": null,
      "render": false,
      "write": true,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "quirky.png",
      "date": "2013-12-02T15:39:03.000Z",
      "slug": "images-shape-quirky",
      "url": "/images/shape/quirky.png",
      "urls": [
        "/images/shape/quirky.png"
      ],
      "ignored": false,
      "standalone": false,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/files/javascript/library/easing.js",
      "relativePath": "javascript/library/easing.js",
      "basename": "easing",
      "outBasename": "easing",
      "extension": "js",
      "outExtension": "js",
      "extensions": [
        "js"
      ],
      "filename": "easing.js",
      "fullDirPath": "/home/jack/projects/semantic/server/files/javascript/library",
      "outPath": "/home/jack/projects/semantic/docs/javascript/library/easing.js",
      "outDirPath": "/home/jack/projects/semantic/docs/javascript/library",
      "outFilename": "easing.js",
      "relativeOutPath": "javascript/library/easing.js",
      "relativeDirPath": "javascript/library",
      "relativeOutDirPath": "javascript/library",
      "relativeBase": "javascript/library/easing",
      "relativeOutBase": "javascript/library/easing",
      "contentType": "application/javascript",
      "outContentType": "application/javascript",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:04.000Z",
      "rtime": null,
      "wtime": "2013-12-04T09:15:29.382Z",
      "exists": true,
      "encoding": "utf8",
      "source": "/*\n * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/\n *\n * Uses the built in easing capabilities added In jQuery 1.1\n * to offer multiple easing options\n *\n * TERMS OF USE - EASING EQUATIONS\n * \n * Open source under the BSD License. \n * \n * Copyright © 2001 Robert Penner\n * All rights reserved.\n *\n * TERMS OF USE - jQuery Easing\n * \n * Open source under the BSD License. \n * \n * Copyright © 2008 George McGinley Smith\n * All rights reserved.\n *\n * Redistribution and use in source and binary forms, with or without modification, \n * are permitted provided that the following conditions are met:\n * \n * Redistributions of source code must retain the above copyright notice, this list of \n * conditions and the following disclaimer.\n * Redistributions in binary form must reproduce the above copyright notice, this list \n * of conditions and the following disclaimer in the documentation and/or other materials \n * provided with the distribution.\n * \n * Neither the name of the author nor the names of contributors may be used to endorse \n * or promote products derived from this software without specific prior written permission.\n * \n * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS \"AS IS\" AND ANY \n * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF\n * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE\n *  COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,\n *  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE\n *  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED \n * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING\n *  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED \n * OF THE POSSIBILITY OF SUCH DAMAGE. \n *\n*/\njQuery.easing.jswing=jQuery.easing.swing;jQuery.extend(jQuery.easing,{def:\"easeOutQuad\",swing:function(e,f,a,h,g){return jQuery.easing[jQuery.easing.def](e,f,a,h,g)},easeInQuad:function(e,f,a,h,g){return h*(f/=g)*f+a},easeOutQuad:function(e,f,a,h,g){return -h*(f/=g)*(f-2)+a},easeInOutQuad:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f+a}return -h/2*((--f)*(f-2)-1)+a},easeInCubic:function(e,f,a,h,g){return h*(f/=g)*f*f+a},easeOutCubic:function(e,f,a,h,g){return h*((f=f/g-1)*f*f+1)+a},easeInOutCubic:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f+a}return h/2*((f-=2)*f*f+2)+a},easeInQuart:function(e,f,a,h,g){return h*(f/=g)*f*f*f+a},easeOutQuart:function(e,f,a,h,g){return -h*((f=f/g-1)*f*f*f-1)+a},easeInOutQuart:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f*f+a}return -h/2*((f-=2)*f*f*f-2)+a},easeInQuint:function(e,f,a,h,g){return h*(f/=g)*f*f*f*f+a},easeOutQuint:function(e,f,a,h,g){return h*((f=f/g-1)*f*f*f*f+1)+a},easeInOutQuint:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f*f*f+a}return h/2*((f-=2)*f*f*f*f+2)+a},easeInSine:function(e,f,a,h,g){return -h*Math.cos(f/g*(Math.PI/2))+h+a},easeOutSine:function(e,f,a,h,g){return h*Math.sin(f/g*(Math.PI/2))+a},easeInOutSine:function(e,f,a,h,g){return -h/2*(Math.cos(Math.PI*f/g)-1)+a},easeInExpo:function(e,f,a,h,g){return(f==0)?a:h*Math.pow(2,10*(f/g-1))+a},easeOutExpo:function(e,f,a,h,g){return(f==g)?a+h:h*(-Math.pow(2,-10*f/g)+1)+a},easeInOutExpo:function(e,f,a,h,g){if(f==0){return a}if(f==g){return a+h}if((f/=g/2)<1){return h/2*Math.pow(2,10*(f-1))+a}return h/2*(-Math.pow(2,-10*--f)+2)+a},easeInCirc:function(e,f,a,h,g){return -h*(Math.sqrt(1-(f/=g)*f)-1)+a},easeOutCirc:function(e,f,a,h,g){return h*Math.sqrt(1-(f=f/g-1)*f)+a},easeInOutCirc:function(e,f,a,h,g){if((f/=g/2)<1){return -h/2*(Math.sqrt(1-f*f)-1)+a}return h/2*(Math.sqrt(1-(f-=2)*f)+1)+a},easeInElastic:function(f,h,e,l,k){var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k)==1){return e+l}if(!j){j=k*0.3}if(g= 1.0.0'\n};\n\nHandlebars.helpers  = {};\nHandlebars.partials = {};\n\nvar toString = Object.prototype.toString,\n    functionType = '[object Function]',\n    objectType = '[object Object]';\n\nHandlebars.registerHelper = function(name, fn, inverse) {\n  if (toString.call(name) === objectType) {\n    if (inverse || fn) { throw new Handlebars.Exception('Arg not supported with multiple helpers'); }\n    Handlebars.Utils.extend(this.helpers, name);\n  } else {\n    if (inverse) { fn.not = inverse; }\n    this.helpers[name] = fn;\n  }\n};\n\nHandlebars.registerPartial = function(name, str) {\n  if (toString.call(name) === objectType) {\n    Handlebars.Utils.extend(this.partials,  name);\n  } else {\n    this.partials[name] = str;\n  }\n};\n\nHandlebars.registerHelper('helperMissing', function(arg) {\n  if(arguments.length === 2) {\n    return undefined;\n  } else {\n    throw new Error(\"Missing helper: '\" + arg + \"'\");\n  }\n});\n\nHandlebars.registerHelper('blockHelperMissing', function(context, options) {\n  var inverse = options.inverse || function() {}, fn = options.fn;\n\n  var type = toString.call(context);\n\n  if(type === functionType) { context = context.call(this); }\n\n  if(context === true) {\n    return fn(this);\n  } else if(context === false || context == null) {\n    return inverse(this);\n  } else if(type === \"[object Array]\") {\n    if(context.length > 0) {\n      return Handlebars.helpers.each(context, options);\n    } else {\n      return inverse(this);\n    }\n  } else {\n    return fn(context);\n  }\n});\n\nHandlebars.K = function() {};\n\nHandlebars.createFrame = Object.create || function(object) {\n  Handlebars.K.prototype = object;\n  var obj = new Handlebars.K();\n  Handlebars.K.prototype = null;\n  return obj;\n};\n\nHandlebars.logger = {\n  DEBUG: 0, INFO: 1, WARN: 2, ERROR: 3, level: 3,\n\n  methodMap: {0: 'debug', 1: 'info', 2: 'warn', 3: 'error'},\n\n  // can be overridden in the host environment\n  log: function(level, obj) {\n    if (Handlebars.logger.level <= level) {\n      var method = Handlebars.logger.methodMap[level];\n      if (typeof console !== 'undefined' && console[method]) {\n        console[method].call(console, obj);\n      }\n    }\n  }\n};\n\nHandlebars.log = function(level, obj) { Handlebars.logger.log(level, obj); };\n\nHandlebars.registerHelper('each', function(context, options) {\n  var fn = options.fn, inverse = options.inverse;\n  var i = 0, ret = \"\", data;\n\n  var type = toString.call(context);\n  if(type === functionType) { context = context.call(this); }\n\n  if (options.data) {\n    data = Handlebars.createFrame(options.data);\n  }\n\n  if(context && typeof context === 'object') {\n    if(context instanceof Array){\n      for(var j = context.length; i 2) {\n                        expected.push(\"'\" + this.terminals_[p] + \"'\");\n                    }\n                if (this.lexer.showPosition) {\n                    errStr = \"Parse error on line \" + (yylineno + 1) + \":\\n\" + this.lexer.showPosition() + \"\\nExpecting \" + expected.join(\", \") + \", got '\" + (this.terminals_[symbol] || symbol) + \"'\";\n                } else {\n                    errStr = \"Parse error on line \" + (yylineno + 1) + \": Unexpected \" + (symbol == 1?\"end of input\":\"'\" + (this.terminals_[symbol] || symbol) + \"'\");\n                }\n                this.parseError(errStr, {text: this.lexer.match, token: this.terminals_[symbol] || symbol, line: this.lexer.yylineno, loc: yyloc, expected: expected});\n            }\n        }\n        if (action[0] instanceof Array && action.length > 1) {\n            throw new Error(\"Parse Error: multiple actions possible at state: \" + state + \", token: \" + symbol);\n        }\n        switch (action[0]) {\n        case 1:\n            stack.push(symbol);\n            vstack.push(this.lexer.yytext);\n            lstack.push(this.lexer.yylloc);\n            stack.push(action[1]);\n            symbol = null;\n            if (!preErrorSymbol) {\n                yyleng = this.lexer.yyleng;\n                yytext = this.lexer.yytext;\n                yylineno = this.lexer.yylineno;\n                yyloc = this.lexer.yylloc;\n                if (recovering > 0)\n                    recovering--;\n            } else {\n                symbol = preErrorSymbol;\n                preErrorSymbol = null;\n            }\n            break;\n        case 2:\n            len = this.productions_[action[1]][1];\n            yyval.$ = vstack[vstack.length - len];\n            yyval._$ = {first_line: lstack[lstack.length - (len || 1)].first_line, last_line: lstack[lstack.length - 1].last_line, first_column: lstack[lstack.length - (len || 1)].first_column, last_column: lstack[lstack.length - 1].last_column};\n            if (ranges) {\n                yyval._$.range = [lstack[lstack.length - (len || 1)].range[0], lstack[lstack.length - 1].range[1]];\n            }\n            r = this.performAction.call(yyval, yytext, yyleng, yylineno, this.yy, action[1], vstack, lstack);\n            if (typeof r !== \"undefined\") {\n                return r;\n            }\n            if (len) {\n                stack = stack.slice(0, -1 * len * 2);\n                vstack = vstack.slice(0, -1 * len);\n                lstack = lstack.slice(0, -1 * len);\n            }\n            stack.push(this.productions_[action[1]][0]);\n            vstack.push(yyval.$);\n            lstack.push(yyval._$);\n            newState = table[stack[stack.length - 2]][stack[stack.length - 1]];\n            stack.push(newState);\n            break;\n        case 3:\n            return true;\n        }\n    }\n    return true;\n}\n};\n/* Jison generated lexer */\nvar lexer = (function(){\nvar lexer = ({EOF:1,\nparseError:function parseError(str, hash) {\n        if (this.yy.parser) {\n            this.yy.parser.parseError(str, hash);\n        } else {\n            throw new Error(str);\n        }\n    },\nsetInput:function (input) {\n        this._input = input;\n        this._more = this._less = this.done = false;\n        this.yylineno = this.yyleng = 0;\n        this.yytext = this.matched = this.match = '';\n        this.conditionStack = ['INITIAL'];\n        this.yylloc = {first_line:1,first_column:0,last_line:1,last_column:0};\n        if (this.options.ranges) this.yylloc.range = [0,0];\n        this.offset = 0;\n        return this;\n    },\ninput:function () {\n        var ch = this._input[0];\n        this.yytext += ch;\n        this.yyleng++;\n        this.offset++;\n        this.match += ch;\n        this.matched += ch;\n        var lines = ch.match(/(?:\\r\\n?|\\n).*/g);\n        if (lines) {\n            this.yylineno++;\n            this.yylloc.last_line++;\n        } else {\n            this.yylloc.last_column++;\n        }\n        if (this.options.ranges) this.yylloc.range[1]++;\n\n        this._input = this._input.slice(1);\n        return ch;\n    },\nunput:function (ch) {\n        var len = ch.length;\n        var lines = ch.split(/(?:\\r\\n?|\\n)/g);\n\n        this._input = ch + this._input;\n        this.yytext = this.yytext.substr(0, this.yytext.length-len-1);\n        //this.yyleng -= len;\n        this.offset -= len;\n        var oldLines = this.match.split(/(?:\\r\\n?|\\n)/g);\n        this.match = this.match.substr(0, this.match.length-1);\n        this.matched = this.matched.substr(0, this.matched.length-1);\n\n        if (lines.length-1) this.yylineno -= lines.length-1;\n        var r = this.yylloc.range;\n\n        this.yylloc = {first_line: this.yylloc.first_line,\n          last_line: this.yylineno+1,\n          first_column: this.yylloc.first_column,\n          last_column: lines ?\n              (lines.length === oldLines.length ? this.yylloc.first_column : 0) + oldLines[oldLines.length - lines.length].length - lines[0].length:\n              this.yylloc.first_column - len\n          };\n\n        if (this.options.ranges) {\n            this.yylloc.range = [r[0], r[0] + this.yyleng - len];\n        }\n        return this;\n    },\nmore:function () {\n        this._more = true;\n        return this;\n    },\nless:function (n) {\n        this.unput(this.match.slice(n));\n    },\npastInput:function () {\n        var past = this.matched.substr(0, this.matched.length - this.match.length);\n        return (past.length > 20 ? '...':'') + past.substr(-20).replace(/\\n/g, \"\");\n    },\nupcomingInput:function () {\n        var next = this.match;\n        if (next.length < 20) {\n            next += this._input.substr(0, 20-next.length);\n        }\n        return (next.substr(0,20)+(next.length > 20 ? '...':'')).replace(/\\n/g, \"\");\n    },\nshowPosition:function () {\n        var pre = this.pastInput();\n        var c = new Array(pre.length + 1).join(\"-\");\n        return pre + this.upcomingInput() + \"\\n\" + c+\"^\";\n    },\nnext:function () {\n        if (this.done) {\n            return this.EOF;\n        }\n        if (!this._input) this.done = true;\n\n        var token,\n            match,\n            tempMatch,\n            index,\n            col,\n            lines;\n        if (!this._more) {\n            this.yytext = '';\n            this.match = '';\n        }\n        var rules = this._currentRules();\n        for (var i=0;i < rules.length; i++) {\n            tempMatch = this._input.match(this.rules[rules[i]]);\n            if (tempMatch && (!match || tempMatch[0].length > match[0].length)) {\n                match = tempMatch;\n                index = i;\n                if (!this.options.flex) break;\n            }\n        }\n        if (match) {\n            lines = match[0].match(/(?:\\r\\n?|\\n).*/g);\n            if (lines) this.yylineno += lines.length;\n            this.yylloc = {first_line: this.yylloc.last_line,\n                           last_line: this.yylineno+1,\n                           first_column: this.yylloc.last_column,\n                           last_column: lines ? lines[lines.length-1].length-lines[lines.length-1].match(/\\r?\\n?/)[0].length : this.yylloc.last_column + match[0].length};\n            this.yytext += match[0];\n            this.match += match[0];\n            this.matches = match;\n            this.yyleng = this.yytext.length;\n            if (this.options.ranges) {\n                this.yylloc.range = [this.offset, this.offset += this.yyleng];\n            }\n            this._more = false;\n            this._input = this._input.slice(match[0].length);\n            this.matched += match[0];\n            token = this.performAction.call(this, this.yy, this, rules[index],this.conditionStack[this.conditionStack.length-1]);\n            if (this.done && this._input) this.done = false;\n            if (token) return token;\n            else return;\n        }\n        if (this._input === \"\") {\n            return this.EOF;\n        } else {\n            return this.parseError('Lexical error on line '+(this.yylineno+1)+'. Unrecognized text.\\n'+this.showPosition(),\n                    {text: \"\", token: null, line: this.yylineno});\n        }\n    },\nlex:function lex() {\n        var r = this.next();\n        if (typeof r !== 'undefined') {\n            return r;\n        } else {\n            return this.lex();\n        }\n    },\nbegin:function begin(condition) {\n        this.conditionStack.push(condition);\n    },\npopState:function popState() {\n        return this.conditionStack.pop();\n    },\n_currentRules:function _currentRules() {\n        return this.conditions[this.conditionStack[this.conditionStack.length-1]].rules;\n    },\ntopState:function () {\n        return this.conditionStack[this.conditionStack.length-2];\n    },\npushState:function begin(condition) {\n        this.begin(condition);\n    }});\nlexer.options = {};\nlexer.performAction = function anonymous(yy,yy_,$avoiding_name_collisions,YY_START) {\n\nvar YYSTATE=YY_START\nswitch($avoiding_name_collisions) {\ncase 0: yy_.yytext = \"\\\\\"; return 14; \nbreak;\ncase 1:\n                                   if(yy_.yytext.slice(-1) !== \"\\\\\") this.begin(\"mu\");\n                                   if(yy_.yytext.slice(-1) === \"\\\\\") yy_.yytext = yy_.yytext.substr(0,yy_.yyleng-1), this.begin(\"emu\");\n                                   if(yy_.yytext) return 14;\n                                 \nbreak;\ncase 2: return 14; \nbreak;\ncase 3:\n                                   if(yy_.yytext.slice(-1) !== \"\\\\\") this.popState();\n                                   if(yy_.yytext.slice(-1) === \"\\\\\") yy_.yytext = yy_.yytext.substr(0,yy_.yyleng-1);\n                                   return 14;\n                                 \nbreak;\ncase 4: yy_.yytext = yy_.yytext.substr(0, yy_.yyleng-4); this.popState(); return 15; \nbreak;\ncase 5: return 25; \nbreak;\ncase 6: return 16; \nbreak;\ncase 7: return 20; \nbreak;\ncase 8: return 19; \nbreak;\ncase 9: return 19; \nbreak;\ncase 10: return 23; \nbreak;\ncase 11: return 22; \nbreak;\ncase 12: this.popState(); this.begin('com'); \nbreak;\ncase 13: yy_.yytext = yy_.yytext.substr(3,yy_.yyleng-5); this.popState(); return 15; \nbreak;\ncase 14: return 22; \nbreak;\ncase 15: return 37; \nbreak;\ncase 16: return 36; \nbreak;\ncase 17: return 36; \nbreak;\ncase 18: return 40; \nbreak;\ncase 19: /*ignore whitespace*/ \nbreak;\ncase 20: this.popState(); return 24; \nbreak;\ncase 21: this.popState(); return 18; \nbreak;\ncase 22: yy_.yytext = yy_.yytext.substr(1,yy_.yyleng-2).replace(/\\\\\"/g,'\"'); return 31; \nbreak;\ncase 23: yy_.yytext = yy_.yytext.substr(1,yy_.yyleng-2).replace(/\\\\'/g,\"'\"); return 31; \nbreak;\ncase 24: return 38; \nbreak;\ncase 25: return 33; \nbreak;\ncase 26: return 33; \nbreak;\ncase 27: return 32; \nbreak;\ncase 28: return 36; \nbreak;\ncase 29: yy_.yytext = yy_.yytext.substr(1, yy_.yyleng-2); return 36; \nbreak;\ncase 30: return 'INVALID'; \nbreak;\ncase 31: return 5; \nbreak;\n}\n};\nlexer.rules = [/^(?:\\\\\\\\(?=(\\{\\{)))/,/^(?:[^\\x00]*?(?=(\\{\\{)))/,/^(?:[^\\x00]+)/,/^(?:[^\\x00]{2,}?(?=(\\{\\{|$)))/,/^(?:[\\s\\S]*?--\\}\\})/,/^(?:\\{\\{>)/,/^(?:\\{\\{#)/,/^(?:\\{\\{\\/)/,/^(?:\\{\\{\\^)/,/^(?:\\{\\{\\s*else\\b)/,/^(?:\\{\\{\\{)/,/^(?:\\{\\{&)/,/^(?:\\{\\{!--)/,/^(?:\\{\\{![\\s\\S]*?\\}\\})/,/^(?:\\{\\{)/,/^(?:=)/,/^(?:\\.(?=[}\\/ ]))/,/^(?:\\.\\.)/,/^(?:[\\/.])/,/^(?:\\s+)/,/^(?:\\}\\}\\})/,/^(?:\\}\\})/,/^(?:\"(\\\\[\"]|[^\"])*\")/,/^(?:'(\\\\[']|[^'])*')/,/^(?:@)/,/^(?:true(?=[}\\s]))/,/^(?:false(?=[}\\s]))/,/^(?:-?[0-9]+(?=[}\\s]))/,/^(?:[^\\s!\"#%-,\\.\\/;->@\\[-\\^`\\{-~]+(?=[=}\\s\\/.]))/,/^(?:\\[[^\\]]*\\])/,/^(?:.)/,/^(?:$)/];\nlexer.conditions = {\"mu\":{\"rules\":[5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31],\"inclusive\":false},\"emu\":{\"rules\":[3],\"inclusive\":false},\"com\":{\"rules\":[4],\"inclusive\":false},\"INITIAL\":{\"rules\":[0,1,2,31],\"inclusive\":true}};\nreturn lexer;})()\nparser.lexer = lexer;\nfunction Parser () { this.yy = {}; }Parser.prototype = parser;parser.Parser = Parser;\nreturn new Parser;\n})();;\n// lib/handlebars/compiler/base.js\n\nHandlebars.Parser = handlebars;\n\nHandlebars.parse = function(input) {\n\n  // Just return if an already-compile AST was passed in.\n  if(input.constructor === Handlebars.AST.ProgramNode) { return input; }\n\n  Handlebars.Parser.yy = Handlebars.AST;\n  return Handlebars.Parser.parse(input);\n};\n;\n// lib/handlebars/compiler/ast.js\nHandlebars.AST = {};\n\nHandlebars.AST.ProgramNode = function(statements, inverse) {\n  this.type = \"program\";\n  this.statements = statements;\n  if(inverse) { this.inverse = new Handlebars.AST.ProgramNode(inverse); }\n};\n\nHandlebars.AST.MustacheNode = function(rawParams, hash, unescaped) {\n  this.type = \"mustache\";\n  this.escaped = !unescaped;\n  this.hash = hash;\n\n  var id = this.id = rawParams[0];\n  var params = this.params = rawParams.slice(1);\n\n  // a mustache is an eligible helper if:\n  // * its id is simple (a single part, not `this` or `..`)\n  var eligibleHelper = this.eligibleHelper = id.isSimple;\n\n  // a mustache is definitely a helper if:\n  // * it is an eligible helper, and\n  // * it has at least one parameter or hash segment\n  this.isHelper = eligibleHelper && (params.length || hash);\n\n  // if a mustache is an eligible helper but not a definite\n  // helper, it is ambiguous, and will be resolved in a later\n  // pass or at runtime.\n};\n\nHandlebars.AST.PartialNode = function(partialName, context) {\n  this.type         = \"partial\";\n  this.partialName  = partialName;\n  this.context      = context;\n};\n\nHandlebars.AST.BlockNode = function(mustache, program, inverse, close) {\n  var verifyMatch = function(open, close) {\n    if(open.original !== close.original) {\n      throw new Handlebars.Exception(open.original + \" doesn't match \" + close.original);\n    }\n  };\n\n  verifyMatch(mustache.id, close);\n  this.type = \"block\";\n  this.mustache = mustache;\n  this.program  = program;\n  this.inverse  = inverse;\n\n  if (this.inverse && !this.program) {\n    this.isInverse = true;\n  }\n};\n\nHandlebars.AST.ContentNode = function(string) {\n  this.type = \"content\";\n  this.string = string;\n};\n\nHandlebars.AST.HashNode = function(pairs) {\n  this.type = \"hash\";\n  this.pairs = pairs;\n};\n\nHandlebars.AST.IdNode = function(parts) {\n  this.type = \"ID\";\n\n  var original = \"\",\n      dig = [],\n      depth = 0;\n\n  for(var i=0,l=parts.length; i 0) { throw new Handlebars.Exception(\"Invalid path: \" + original); }\n      else if (part === \"..\") { depth++; }\n      else { this.isScoped = true; }\n    }\n    else { dig.push(part); }\n  }\n\n  this.original = original;\n  this.parts    = dig;\n  this.string   = dig.join('.');\n  this.depth    = depth;\n\n  // an ID is simple if it only has one part, and that part is not\n  // `..` or `this`.\n  this.isSimple = parts.length === 1 && !this.isScoped && depth === 0;\n\n  this.stringModeValue = this.string;\n};\n\nHandlebars.AST.PartialNameNode = function(name) {\n  this.type = \"PARTIAL_NAME\";\n  this.name = name.original;\n};\n\nHandlebars.AST.DataNode = function(id) {\n  this.type = \"DATA\";\n  this.id = id;\n};\n\nHandlebars.AST.StringNode = function(string) {\n  this.type = \"STRING\";\n  this.original =\n    this.string =\n    this.stringModeValue = string;\n};\n\nHandlebars.AST.IntegerNode = function(integer) {\n  this.type = \"INTEGER\";\n  this.original =\n    this.integer = integer;\n  this.stringModeValue = Number(integer);\n};\n\nHandlebars.AST.BooleanNode = function(bool) {\n  this.type = \"BOOLEAN\";\n  this.bool = bool;\n  this.stringModeValue = bool === \"true\";\n};\n\nHandlebars.AST.CommentNode = function(comment) {\n  this.type = \"comment\";\n  this.comment = comment;\n};\n;\n// lib/handlebars/utils.js\n\nvar errorProps = ['description', 'fileName', 'lineNumber', 'message', 'name', 'number', 'stack'];\n\nHandlebars.Exception = function(message) {\n  var tmp = Error.prototype.constructor.apply(this, arguments);\n\n  // Unfortunately errors are not enumerable in Chrome (at least), so `for prop in tmp` doesn't work.\n  for (var idx = 0; idx < errorProps.length; idx++) {\n    this[errorProps[idx]] = tmp[errorProps[idx]];\n  }\n};\nHandlebars.Exception.prototype = new Error();\n\n// Build out our basic SafeString type\nHandlebars.SafeString = function(string) {\n  this.string = string;\n};\nHandlebars.SafeString.prototype.toString = function() {\n  return this.string.toString();\n};\n\nvar escape = {\n  \"&\": \"&\",\n  \"<\": \"<\",\n  \">\": \">\",\n  '\"': \""\",\n  \"'\": \"'\",\n  \"`\": \"`\"\n};\n\nvar badChars = /[&<>\"'`]/g;\nvar possible = /[&<>\"'`]/;\n\nvar escapeChar = function(chr) {\n  return escape[chr] || \"&\";\n};\n\nHandlebars.Utils = {\n  extend: function(obj, value) {\n    for(var key in value) {\n      if(value.hasOwnProperty(key)) {\n        obj[key] = value[key];\n      }\n    }\n  },\n\n  escapeExpression: function(string) {\n    // don't escape SafeStrings, since they're already safe\n    if (string instanceof Handlebars.SafeString) {\n      return string.toString();\n    } else if (string == null || string === false) {\n      return \"\";\n    }\n\n    // Force a string conversion as this will be done by the append regardless and\n    // the regex test will do this transparently behind the scenes, causing issues if\n    // an object's to string has escaped characters in it.\n    string = string.toString();\n\n    if(!possible.test(string)) { return string; }\n    return string.replace(badChars, escapeChar);\n  },\n\n  isEmpty: function(value) {\n    if (!value && value !== 0) {\n      return true;\n    } else if(toString.call(value) === \"[object Array]\" && value.length === 0) {\n      return true;\n    } else {\n      return false;\n    }\n  }\n};\n;\n// lib/handlebars/compiler/compiler.js\n\n/*jshint eqnull:true*/\nvar Compiler = Handlebars.Compiler = function() {};\nvar JavaScriptCompiler = Handlebars.JavaScriptCompiler = function() {};\n\n// the foundHelper register will disambiguate helper lookup from finding a\n// function in a context. This is necessary for mustache compatibility, which\n// requires that context functions in blocks are evaluated by blockHelperMissing,\n// and then proceed as if the resulting value was provided to blockHelperMissing.\n\nCompiler.prototype = {\n  compiler: Compiler,\n\n  disassemble: function() {\n    var opcodes = this.opcodes, opcode, out = [], params, param;\n\n    for (var i=0, l=opcodes.length; i 0) {\n      this.source[1] = this.source[1] + \", \" + locals.join(\", \");\n    }\n\n    // Generate minimizer alias mappings\n    if (!this.isChild) {\n      for (var alias in this.context.aliases) {\n        if (this.context.aliases.hasOwnProperty(alias)) {\n          this.source[1] = this.source[1] + ', ' + alias + '=' + this.context.aliases[alias];\n        }\n      }\n    }\n\n    if (this.source[1]) {\n      this.source[1] = \"var \" + this.source[1].substring(2) + \";\";\n    }\n\n    // Merge children\n    if (!this.isChild) {\n      this.source[1] += '\\n' + this.context.programs.join('\\n') + '\\n';\n    }\n\n    if (!this.environment.isSimple) {\n      this.source.push(\"return buffer;\");\n    }\n\n    var params = this.isChild ? [\"depth0\", \"data\"] : [\"Handlebars\", \"depth0\", \"helpers\", \"partials\", \"data\"];\n\n    for(var i=0, l=this.environment.depths.list.length; i this.stackVars.length) { this.stackVars.push(\"stack\" + this.stackSlot); }\n    return this.topStackName();\n  },\n  topStackName: function() {\n    return \"stack\" + this.stackSlot;\n  },\n  flushInline: function() {\n    var inlineStack = this.inlineStack;\n    if (inlineStack.length) {\n      this.inlineStack = [];\n      for (var i = 0, len = inlineStack.length; i < len; i++) {\n        var entry = inlineStack[i];\n        if (entry instanceof Literal) {\n          this.compileStack.push(entry);\n        } else {\n          this.pushStack(entry);\n        }\n      }\n    }\n  },\n  isInline: function() {\n    return this.inlineStack.length;\n  },\n\n  popStack: function(wrapped) {\n    var inline = this.isInline(),\n        item = (inline ? this.inlineStack : this.compileStack).pop();\n\n    if (!wrapped && (item instanceof Literal)) {\n      return item.value;\n    } else {\n      if (!inline) {\n        this.stackSlot--;\n      }\n      return item;\n    }\n  },\n\n  topStack: function(wrapped) {\n    var stack = (this.isInline() ? this.inlineStack : this.compileStack),\n        item = stack[stack.length - 1];\n\n    if (!wrapped && (item instanceof Literal)) {\n      return item.value;\n    } else {\n      return item;\n    }\n  },\n\n  quotedString: function(str) {\n    return '\"' + str\n      .replace(/\\\\/g, '\\\\\\\\')\n      .replace(/\"/g, '\\\\\"')\n      .replace(/\\n/g, '\\\\n')\n      .replace(/\\r/g, '\\\\r')\n      .replace(/\\u2028/g, '\\\\u2028')   // Per Ecma-262 7.3 + 7.8.4\n      .replace(/\\u2029/g, '\\\\u2029') + '\"';\n  },\n\n  setupHelper: function(paramSize, name, missingParams) {\n    var params = [];\n    this.setupParams(paramSize, params, missingParams);\n    var foundHelper = this.nameLookup('helpers', name, 'helper');\n\n    return {\n      params: params,\n      name: foundHelper,\n      callParams: [\"depth0\"].concat(params).join(\", \"),\n      helperMissingParams: missingParams && [\"depth0\", this.quotedString(name)].concat(params).join(\", \")\n    };\n  },\n\n  // the params and contexts arguments are passed in arrays\n  // to fill in\n  setupParams: function(paramSize, params, useRegister) {\n    var options = [], contexts = [], types = [], param, inverse, program;\n\n    options.push(\"hash:\" + this.popStack());\n\n    inverse = this.popStack();\n    program = this.popStack();\n\n    // Avoid setting fn and inverse if neither are set. This allows\n    // helpers to do a check for `if (options.fn)`\n    if (program || inverse) {\n      if (!program) {\n        this.context.aliases.self = \"this\";\n        program = \"self.noop\";\n      }\n\n      if (!inverse) {\n       this.context.aliases.self = \"this\";\n        inverse = \"self.noop\";\n      }\n\n      options.push(\"inverse:\" + inverse);\n      options.push(\"fn:\" + program);\n    }\n\n    for(var i=0; i= 1.0.0'\n};\n\nHandlebars.helpers  = {};\nHandlebars.partials = {};\n\nvar toString = Object.prototype.toString,\n    functionType = '[object Function]',\n    objectType = '[object Object]';\n\nHandlebars.registerHelper = function(name, fn, inverse) {\n  if (toString.call(name) === objectType) {\n    if (inverse || fn) { throw new Handlebars.Exception('Arg not supported with multiple helpers'); }\n    Handlebars.Utils.extend(this.helpers, name);\n  } else {\n    if (inverse) { fn.not = inverse; }\n    this.helpers[name] = fn;\n  }\n};\n\nHandlebars.registerPartial = function(name, str) {\n  if (toString.call(name) === objectType) {\n    Handlebars.Utils.extend(this.partials,  name);\n  } else {\n    this.partials[name] = str;\n  }\n};\n\nHandlebars.registerHelper('helperMissing', function(arg) {\n  if(arguments.length === 2) {\n    return undefined;\n  } else {\n    throw new Error(\"Missing helper: '\" + arg + \"'\");\n  }\n});\n\nHandlebars.registerHelper('blockHelperMissing', function(context, options) {\n  var inverse = options.inverse || function() {}, fn = options.fn;\n\n  var type = toString.call(context);\n\n  if(type === functionType) { context = context.call(this); }\n\n  if(context === true) {\n    return fn(this);\n  } else if(context === false || context == null) {\n    return inverse(this);\n  } else if(type === \"[object Array]\") {\n    if(context.length > 0) {\n      return Handlebars.helpers.each(context, options);\n    } else {\n      return inverse(this);\n    }\n  } else {\n    return fn(context);\n  }\n});\n\nHandlebars.K = function() {};\n\nHandlebars.createFrame = Object.create || function(object) {\n  Handlebars.K.prototype = object;\n  var obj = new Handlebars.K();\n  Handlebars.K.prototype = null;\n  return obj;\n};\n\nHandlebars.logger = {\n  DEBUG: 0, INFO: 1, WARN: 2, ERROR: 3, level: 3,\n\n  methodMap: {0: 'debug', 1: 'info', 2: 'warn', 3: 'error'},\n\n  // can be overridden in the host environment\n  log: function(level, obj) {\n    if (Handlebars.logger.level <= level) {\n      var method = Handlebars.logger.methodMap[level];\n      if (typeof console !== 'undefined' && console[method]) {\n        console[method].call(console, obj);\n      }\n    }\n  }\n};\n\nHandlebars.log = function(level, obj) { Handlebars.logger.log(level, obj); };\n\nHandlebars.registerHelper('each', function(context, options) {\n  var fn = options.fn, inverse = options.inverse;\n  var i = 0, ret = \"\", data;\n\n  var type = toString.call(context);\n  if(type === functionType) { context = context.call(this); }\n\n  if (options.data) {\n    data = Handlebars.createFrame(options.data);\n  }\n\n  if(context && typeof context === 'object') {\n    if(context instanceof Array){\n      for(var j = context.length; i 2) {\n                        expected.push(\"'\" + this.terminals_[p] + \"'\");\n                    }\n                if (this.lexer.showPosition) {\n                    errStr = \"Parse error on line \" + (yylineno + 1) + \":\\n\" + this.lexer.showPosition() + \"\\nExpecting \" + expected.join(\", \") + \", got '\" + (this.terminals_[symbol] || symbol) + \"'\";\n                } else {\n                    errStr = \"Parse error on line \" + (yylineno + 1) + \": Unexpected \" + (symbol == 1?\"end of input\":\"'\" + (this.terminals_[symbol] || symbol) + \"'\");\n                }\n                this.parseError(errStr, {text: this.lexer.match, token: this.terminals_[symbol] || symbol, line: this.lexer.yylineno, loc: yyloc, expected: expected});\n            }\n        }\n        if (action[0] instanceof Array && action.length > 1) {\n            throw new Error(\"Parse Error: multiple actions possible at state: \" + state + \", token: \" + symbol);\n        }\n        switch (action[0]) {\n        case 1:\n            stack.push(symbol);\n            vstack.push(this.lexer.yytext);\n            lstack.push(this.lexer.yylloc);\n            stack.push(action[1]);\n            symbol = null;\n            if (!preErrorSymbol) {\n                yyleng = this.lexer.yyleng;\n                yytext = this.lexer.yytext;\n                yylineno = this.lexer.yylineno;\n                yyloc = this.lexer.yylloc;\n                if (recovering > 0)\n                    recovering--;\n            } else {\n                symbol = preErrorSymbol;\n                preErrorSymbol = null;\n            }\n            break;\n        case 2:\n            len = this.productions_[action[1]][1];\n            yyval.$ = vstack[vstack.length - len];\n            yyval._$ = {first_line: lstack[lstack.length - (len || 1)].first_line, last_line: lstack[lstack.length - 1].last_line, first_column: lstack[lstack.length - (len || 1)].first_column, last_column: lstack[lstack.length - 1].last_column};\n            if (ranges) {\n                yyval._$.range = [lstack[lstack.length - (len || 1)].range[0], lstack[lstack.length - 1].range[1]];\n            }\n            r = this.performAction.call(yyval, yytext, yyleng, yylineno, this.yy, action[1], vstack, lstack);\n            if (typeof r !== \"undefined\") {\n                return r;\n            }\n            if (len) {\n                stack = stack.slice(0, -1 * len * 2);\n                vstack = vstack.slice(0, -1 * len);\n                lstack = lstack.slice(0, -1 * len);\n            }\n            stack.push(this.productions_[action[1]][0]);\n            vstack.push(yyval.$);\n            lstack.push(yyval._$);\n            newState = table[stack[stack.length - 2]][stack[stack.length - 1]];\n            stack.push(newState);\n            break;\n        case 3:\n            return true;\n        }\n    }\n    return true;\n}\n};\n/* Jison generated lexer */\nvar lexer = (function(){\nvar lexer = ({EOF:1,\nparseError:function parseError(str, hash) {\n        if (this.yy.parser) {\n            this.yy.parser.parseError(str, hash);\n        } else {\n            throw new Error(str);\n        }\n    },\nsetInput:function (input) {\n        this._input = input;\n        this._more = this._less = this.done = false;\n        this.yylineno = this.yyleng = 0;\n        this.yytext = this.matched = this.match = '';\n        this.conditionStack = ['INITIAL'];\n        this.yylloc = {first_line:1,first_column:0,last_line:1,last_column:0};\n        if (this.options.ranges) this.yylloc.range = [0,0];\n        this.offset = 0;\n        return this;\n    },\ninput:function () {\n        var ch = this._input[0];\n        this.yytext += ch;\n        this.yyleng++;\n        this.offset++;\n        this.match += ch;\n        this.matched += ch;\n        var lines = ch.match(/(?:\\r\\n?|\\n).*/g);\n        if (lines) {\n            this.yylineno++;\n            this.yylloc.last_line++;\n        } else {\n            this.yylloc.last_column++;\n        }\n        if (this.options.ranges) this.yylloc.range[1]++;\n\n        this._input = this._input.slice(1);\n        return ch;\n    },\nunput:function (ch) {\n        var len = ch.length;\n        var lines = ch.split(/(?:\\r\\n?|\\n)/g);\n\n        this._input = ch + this._input;\n        this.yytext = this.yytext.substr(0, this.yytext.length-len-1);\n        //this.yyleng -= len;\n        this.offset -= len;\n        var oldLines = this.match.split(/(?:\\r\\n?|\\n)/g);\n        this.match = this.match.substr(0, this.match.length-1);\n        this.matched = this.matched.substr(0, this.matched.length-1);\n\n        if (lines.length-1) this.yylineno -= lines.length-1;\n        var r = this.yylloc.range;\n\n        this.yylloc = {first_line: this.yylloc.first_line,\n          last_line: this.yylineno+1,\n          first_column: this.yylloc.first_column,\n          last_column: lines ?\n              (lines.length === oldLines.length ? this.yylloc.first_column : 0) + oldLines[oldLines.length - lines.length].length - lines[0].length:\n              this.yylloc.first_column - len\n          };\n\n        if (this.options.ranges) {\n            this.yylloc.range = [r[0], r[0] + this.yyleng - len];\n        }\n        return this;\n    },\nmore:function () {\n        this._more = true;\n        return this;\n    },\nless:function (n) {\n        this.unput(this.match.slice(n));\n    },\npastInput:function () {\n        var past = this.matched.substr(0, this.matched.length - this.match.length);\n        return (past.length > 20 ? '...':'') + past.substr(-20).replace(/\\n/g, \"\");\n    },\nupcomingInput:function () {\n        var next = this.match;\n        if (next.length < 20) {\n            next += this._input.substr(0, 20-next.length);\n        }\n        return (next.substr(0,20)+(next.length > 20 ? '...':'')).replace(/\\n/g, \"\");\n    },\nshowPosition:function () {\n        var pre = this.pastInput();\n        var c = new Array(pre.length + 1).join(\"-\");\n        return pre + this.upcomingInput() + \"\\n\" + c+\"^\";\n    },\nnext:function () {\n        if (this.done) {\n            return this.EOF;\n        }\n        if (!this._input) this.done = true;\n\n        var token,\n            match,\n            tempMatch,\n            index,\n            col,\n            lines;\n        if (!this._more) {\n            this.yytext = '';\n            this.match = '';\n        }\n        var rules = this._currentRules();\n        for (var i=0;i < rules.length; i++) {\n            tempMatch = this._input.match(this.rules[rules[i]]);\n            if (tempMatch && (!match || tempMatch[0].length > match[0].length)) {\n                match = tempMatch;\n                index = i;\n                if (!this.options.flex) break;\n            }\n        }\n        if (match) {\n            lines = match[0].match(/(?:\\r\\n?|\\n).*/g);\n            if (lines) this.yylineno += lines.length;\n            this.yylloc = {first_line: this.yylloc.last_line,\n                           last_line: this.yylineno+1,\n                           first_column: this.yylloc.last_column,\n                           last_column: lines ? lines[lines.length-1].length-lines[lines.length-1].match(/\\r?\\n?/)[0].length : this.yylloc.last_column + match[0].length};\n            this.yytext += match[0];\n            this.match += match[0];\n            this.matches = match;\n            this.yyleng = this.yytext.length;\n            if (this.options.ranges) {\n                this.yylloc.range = [this.offset, this.offset += this.yyleng];\n            }\n            this._more = false;\n            this._input = this._input.slice(match[0].length);\n            this.matched += match[0];\n            token = this.performAction.call(this, this.yy, this, rules[index],this.conditionStack[this.conditionStack.length-1]);\n            if (this.done && this._input) this.done = false;\n            if (token) return token;\n            else return;\n        }\n        if (this._input === \"\") {\n            return this.EOF;\n        } else {\n            return this.parseError('Lexical error on line '+(this.yylineno+1)+'. Unrecognized text.\\n'+this.showPosition(),\n                    {text: \"\", token: null, line: this.yylineno});\n        }\n    },\nlex:function lex() {\n        var r = this.next();\n        if (typeof r !== 'undefined') {\n            return r;\n        } else {\n            return this.lex();\n        }\n    },\nbegin:function begin(condition) {\n        this.conditionStack.push(condition);\n    },\npopState:function popState() {\n        return this.conditionStack.pop();\n    },\n_currentRules:function _currentRules() {\n        return this.conditions[this.conditionStack[this.conditionStack.length-1]].rules;\n    },\ntopState:function () {\n        return this.conditionStack[this.conditionStack.length-2];\n    },\npushState:function begin(condition) {\n        this.begin(condition);\n    }});\nlexer.options = {};\nlexer.performAction = function anonymous(yy,yy_,$avoiding_name_collisions,YY_START) {\n\nvar YYSTATE=YY_START\nswitch($avoiding_name_collisions) {\ncase 0: yy_.yytext = \"\\\\\"; return 14; \nbreak;\ncase 1:\n                                   if(yy_.yytext.slice(-1) !== \"\\\\\") this.begin(\"mu\");\n                                   if(yy_.yytext.slice(-1) === \"\\\\\") yy_.yytext = yy_.yytext.substr(0,yy_.yyleng-1), this.begin(\"emu\");\n                                   if(yy_.yytext) return 14;\n                                 \nbreak;\ncase 2: return 14; \nbreak;\ncase 3:\n                                   if(yy_.yytext.slice(-1) !== \"\\\\\") this.popState();\n                                   if(yy_.yytext.slice(-1) === \"\\\\\") yy_.yytext = yy_.yytext.substr(0,yy_.yyleng-1);\n                                   return 14;\n                                 \nbreak;\ncase 4: yy_.yytext = yy_.yytext.substr(0, yy_.yyleng-4); this.popState(); return 15; \nbreak;\ncase 5: return 25; \nbreak;\ncase 6: return 16; \nbreak;\ncase 7: return 20; \nbreak;\ncase 8: return 19; \nbreak;\ncase 9: return 19; \nbreak;\ncase 10: return 23; \nbreak;\ncase 11: return 22; \nbreak;\ncase 12: this.popState(); this.begin('com'); \nbreak;\ncase 13: yy_.yytext = yy_.yytext.substr(3,yy_.yyleng-5); this.popState(); return 15; \nbreak;\ncase 14: return 22; \nbreak;\ncase 15: return 37; \nbreak;\ncase 16: return 36; \nbreak;\ncase 17: return 36; \nbreak;\ncase 18: return 40; \nbreak;\ncase 19: /*ignore whitespace*/ \nbreak;\ncase 20: this.popState(); return 24; \nbreak;\ncase 21: this.popState(); return 18; \nbreak;\ncase 22: yy_.yytext = yy_.yytext.substr(1,yy_.yyleng-2).replace(/\\\\\"/g,'\"'); return 31; \nbreak;\ncase 23: yy_.yytext = yy_.yytext.substr(1,yy_.yyleng-2).replace(/\\\\'/g,\"'\"); return 31; \nbreak;\ncase 24: return 38; \nbreak;\ncase 25: return 33; \nbreak;\ncase 26: return 33; \nbreak;\ncase 27: return 32; \nbreak;\ncase 28: return 36; \nbreak;\ncase 29: yy_.yytext = yy_.yytext.substr(1, yy_.yyleng-2); return 36; \nbreak;\ncase 30: return 'INVALID'; \nbreak;\ncase 31: return 5; \nbreak;\n}\n};\nlexer.rules = [/^(?:\\\\\\\\(?=(\\{\\{)))/,/^(?:[^\\x00]*?(?=(\\{\\{)))/,/^(?:[^\\x00]+)/,/^(?:[^\\x00]{2,}?(?=(\\{\\{|$)))/,/^(?:[\\s\\S]*?--\\}\\})/,/^(?:\\{\\{>)/,/^(?:\\{\\{#)/,/^(?:\\{\\{\\/)/,/^(?:\\{\\{\\^)/,/^(?:\\{\\{\\s*else\\b)/,/^(?:\\{\\{\\{)/,/^(?:\\{\\{&)/,/^(?:\\{\\{!--)/,/^(?:\\{\\{![\\s\\S]*?\\}\\})/,/^(?:\\{\\{)/,/^(?:=)/,/^(?:\\.(?=[}\\/ ]))/,/^(?:\\.\\.)/,/^(?:[\\/.])/,/^(?:\\s+)/,/^(?:\\}\\}\\})/,/^(?:\\}\\})/,/^(?:\"(\\\\[\"]|[^\"])*\")/,/^(?:'(\\\\[']|[^'])*')/,/^(?:@)/,/^(?:true(?=[}\\s]))/,/^(?:false(?=[}\\s]))/,/^(?:-?[0-9]+(?=[}\\s]))/,/^(?:[^\\s!\"#%-,\\.\\/;->@\\[-\\^`\\{-~]+(?=[=}\\s\\/.]))/,/^(?:\\[[^\\]]*\\])/,/^(?:.)/,/^(?:$)/];\nlexer.conditions = {\"mu\":{\"rules\":[5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31],\"inclusive\":false},\"emu\":{\"rules\":[3],\"inclusive\":false},\"com\":{\"rules\":[4],\"inclusive\":false},\"INITIAL\":{\"rules\":[0,1,2,31],\"inclusive\":true}};\nreturn lexer;})()\nparser.lexer = lexer;\nfunction Parser () { this.yy = {}; }Parser.prototype = parser;parser.Parser = Parser;\nreturn new Parser;\n})();;\n// lib/handlebars/compiler/base.js\n\nHandlebars.Parser = handlebars;\n\nHandlebars.parse = function(input) {\n\n  // Just return if an already-compile AST was passed in.\n  if(input.constructor === Handlebars.AST.ProgramNode) { return input; }\n\n  Handlebars.Parser.yy = Handlebars.AST;\n  return Handlebars.Parser.parse(input);\n};\n;\n// lib/handlebars/compiler/ast.js\nHandlebars.AST = {};\n\nHandlebars.AST.ProgramNode = function(statements, inverse) {\n  this.type = \"program\";\n  this.statements = statements;\n  if(inverse) { this.inverse = new Handlebars.AST.ProgramNode(inverse); }\n};\n\nHandlebars.AST.MustacheNode = function(rawParams, hash, unescaped) {\n  this.type = \"mustache\";\n  this.escaped = !unescaped;\n  this.hash = hash;\n\n  var id = this.id = rawParams[0];\n  var params = this.params = rawParams.slice(1);\n\n  // a mustache is an eligible helper if:\n  // * its id is simple (a single part, not `this` or `..`)\n  var eligibleHelper = this.eligibleHelper = id.isSimple;\n\n  // a mustache is definitely a helper if:\n  // * it is an eligible helper, and\n  // * it has at least one parameter or hash segment\n  this.isHelper = eligibleHelper && (params.length || hash);\n\n  // if a mustache is an eligible helper but not a definite\n  // helper, it is ambiguous, and will be resolved in a later\n  // pass or at runtime.\n};\n\nHandlebars.AST.PartialNode = function(partialName, context) {\n  this.type         = \"partial\";\n  this.partialName  = partialName;\n  this.context      = context;\n};\n\nHandlebars.AST.BlockNode = function(mustache, program, inverse, close) {\n  var verifyMatch = function(open, close) {\n    if(open.original !== close.original) {\n      throw new Handlebars.Exception(open.original + \" doesn't match \" + close.original);\n    }\n  };\n\n  verifyMatch(mustache.id, close);\n  this.type = \"block\";\n  this.mustache = mustache;\n  this.program  = program;\n  this.inverse  = inverse;\n\n  if (this.inverse && !this.program) {\n    this.isInverse = true;\n  }\n};\n\nHandlebars.AST.ContentNode = function(string) {\n  this.type = \"content\";\n  this.string = string;\n};\n\nHandlebars.AST.HashNode = function(pairs) {\n  this.type = \"hash\";\n  this.pairs = pairs;\n};\n\nHandlebars.AST.IdNode = function(parts) {\n  this.type = \"ID\";\n\n  var original = \"\",\n      dig = [],\n      depth = 0;\n\n  for(var i=0,l=parts.length; i 0) { throw new Handlebars.Exception(\"Invalid path: \" + original); }\n      else if (part === \"..\") { depth++; }\n      else { this.isScoped = true; }\n    }\n    else { dig.push(part); }\n  }\n\n  this.original = original;\n  this.parts    = dig;\n  this.string   = dig.join('.');\n  this.depth    = depth;\n\n  // an ID is simple if it only has one part, and that part is not\n  // `..` or `this`.\n  this.isSimple = parts.length === 1 && !this.isScoped && depth === 0;\n\n  this.stringModeValue = this.string;\n};\n\nHandlebars.AST.PartialNameNode = function(name) {\n  this.type = \"PARTIAL_NAME\";\n  this.name = name.original;\n};\n\nHandlebars.AST.DataNode = function(id) {\n  this.type = \"DATA\";\n  this.id = id;\n};\n\nHandlebars.AST.StringNode = function(string) {\n  this.type = \"STRING\";\n  this.original =\n    this.string =\n    this.stringModeValue = string;\n};\n\nHandlebars.AST.IntegerNode = function(integer) {\n  this.type = \"INTEGER\";\n  this.original =\n    this.integer = integer;\n  this.stringModeValue = Number(integer);\n};\n\nHandlebars.AST.BooleanNode = function(bool) {\n  this.type = \"BOOLEAN\";\n  this.bool = bool;\n  this.stringModeValue = bool === \"true\";\n};\n\nHandlebars.AST.CommentNode = function(comment) {\n  this.type = \"comment\";\n  this.comment = comment;\n};\n;\n// lib/handlebars/utils.js\n\nvar errorProps = ['description', 'fileName', 'lineNumber', 'message', 'name', 'number', 'stack'];\n\nHandlebars.Exception = function(message) {\n  var tmp = Error.prototype.constructor.apply(this, arguments);\n\n  // Unfortunately errors are not enumerable in Chrome (at least), so `for prop in tmp` doesn't work.\n  for (var idx = 0; idx < errorProps.length; idx++) {\n    this[errorProps[idx]] = tmp[errorProps[idx]];\n  }\n};\nHandlebars.Exception.prototype = new Error();\n\n// Build out our basic SafeString type\nHandlebars.SafeString = function(string) {\n  this.string = string;\n};\nHandlebars.SafeString.prototype.toString = function() {\n  return this.string.toString();\n};\n\nvar escape = {\n  \"&\": \"&\",\n  \"<\": \"<\",\n  \">\": \">\",\n  '\"': \""\",\n  \"'\": \"'\",\n  \"`\": \"`\"\n};\n\nvar badChars = /[&<>\"'`]/g;\nvar possible = /[&<>\"'`]/;\n\nvar escapeChar = function(chr) {\n  return escape[chr] || \"&\";\n};\n\nHandlebars.Utils = {\n  extend: function(obj, value) {\n    for(var key in value) {\n      if(value.hasOwnProperty(key)) {\n        obj[key] = value[key];\n      }\n    }\n  },\n\n  escapeExpression: function(string) {\n    // don't escape SafeStrings, since they're already safe\n    if (string instanceof Handlebars.SafeString) {\n      return string.toString();\n    } else if (string == null || string === false) {\n      return \"\";\n    }\n\n    // Force a string conversion as this will be done by the append regardless and\n    // the regex test will do this transparently behind the scenes, causing issues if\n    // an object's to string has escaped characters in it.\n    string = string.toString();\n\n    if(!possible.test(string)) { return string; }\n    return string.replace(badChars, escapeChar);\n  },\n\n  isEmpty: function(value) {\n    if (!value && value !== 0) {\n      return true;\n    } else if(toString.call(value) === \"[object Array]\" && value.length === 0) {\n      return true;\n    } else {\n      return false;\n    }\n  }\n};\n;\n// lib/handlebars/compiler/compiler.js\n\n/*jshint eqnull:true*/\nvar Compiler = Handlebars.Compiler = function() {};\nvar JavaScriptCompiler = Handlebars.JavaScriptCompiler = function() {};\n\n// the foundHelper register will disambiguate helper lookup from finding a\n// function in a context. This is necessary for mustache compatibility, which\n// requires that context functions in blocks are evaluated by blockHelperMissing,\n// and then proceed as if the resulting value was provided to blockHelperMissing.\n\nCompiler.prototype = {\n  compiler: Compiler,\n\n  disassemble: function() {\n    var opcodes = this.opcodes, opcode, out = [], params, param;\n\n    for (var i=0, l=opcodes.length; i 0) {\n      this.source[1] = this.source[1] + \", \" + locals.join(\", \");\n    }\n\n    // Generate minimizer alias mappings\n    if (!this.isChild) {\n      for (var alias in this.context.aliases) {\n        if (this.context.aliases.hasOwnProperty(alias)) {\n          this.source[1] = this.source[1] + ', ' + alias + '=' + this.context.aliases[alias];\n        }\n      }\n    }\n\n    if (this.source[1]) {\n      this.source[1] = \"var \" + this.source[1].substring(2) + \";\";\n    }\n\n    // Merge children\n    if (!this.isChild) {\n      this.source[1] += '\\n' + this.context.programs.join('\\n') + '\\n';\n    }\n\n    if (!this.environment.isSimple) {\n      this.source.push(\"return buffer;\");\n    }\n\n    var params = this.isChild ? [\"depth0\", \"data\"] : [\"Handlebars\", \"depth0\", \"helpers\", \"partials\", \"data\"];\n\n    for(var i=0, l=this.environment.depths.list.length; i this.stackVars.length) { this.stackVars.push(\"stack\" + this.stackSlot); }\n    return this.topStackName();\n  },\n  topStackName: function() {\n    return \"stack\" + this.stackSlot;\n  },\n  flushInline: function() {\n    var inlineStack = this.inlineStack;\n    if (inlineStack.length) {\n      this.inlineStack = [];\n      for (var i = 0, len = inlineStack.length; i < len; i++) {\n        var entry = inlineStack[i];\n        if (entry instanceof Literal) {\n          this.compileStack.push(entry);\n        } else {\n          this.pushStack(entry);\n        }\n      }\n    }\n  },\n  isInline: function() {\n    return this.inlineStack.length;\n  },\n\n  popStack: function(wrapped) {\n    var inline = this.isInline(),\n        item = (inline ? this.inlineStack : this.compileStack).pop();\n\n    if (!wrapped && (item instanceof Literal)) {\n      return item.value;\n    } else {\n      if (!inline) {\n        this.stackSlot--;\n      }\n      return item;\n    }\n  },\n\n  topStack: function(wrapped) {\n    var stack = (this.isInline() ? this.inlineStack : this.compileStack),\n        item = stack[stack.length - 1];\n\n    if (!wrapped && (item instanceof Literal)) {\n      return item.value;\n    } else {\n      return item;\n    }\n  },\n\n  quotedString: function(str) {\n    return '\"' + str\n      .replace(/\\\\/g, '\\\\\\\\')\n      .replace(/\"/g, '\\\\\"')\n      .replace(/\\n/g, '\\\\n')\n      .replace(/\\r/g, '\\\\r')\n      .replace(/\\u2028/g, '\\\\u2028')   // Per Ecma-262 7.3 + 7.8.4\n      .replace(/\\u2029/g, '\\\\u2029') + '\"';\n  },\n\n  setupHelper: function(paramSize, name, missingParams) {\n    var params = [];\n    this.setupParams(paramSize, params, missingParams);\n    var foundHelper = this.nameLookup('helpers', name, 'helper');\n\n    return {\n      params: params,\n      name: foundHelper,\n      callParams: [\"depth0\"].concat(params).join(\", \"),\n      helperMissingParams: missingParams && [\"depth0\", this.quotedString(name)].concat(params).join(\", \")\n    };\n  },\n\n  // the params and contexts arguments are passed in arrays\n  // to fill in\n  setupParams: function(paramSize, params, useRegister) {\n    var options = [], contexts = [], types = [], param, inverse, program;\n\n    options.push(\"hash:\" + this.popStack());\n\n    inverse = this.popStack();\n    program = this.popStack();\n\n    // Avoid setting fn and inverse if neither are set. This allows\n    // helpers to do a check for `if (options.fn)`\n    if (program || inverse) {\n      if (!program) {\n        this.context.aliases.self = \"this\";\n        program = \"self.noop\";\n      }\n\n      if (!inverse) {\n       this.context.aliases.self = \"this\";\n        inverse = \"self.noop\";\n      }\n\n      options.push(\"inverse:\" + inverse);\n      options.push(\"fn:\" + program);\n    }\n\n    for(var i=0; i' + \n                    _d.title.replace(/\\'/g, '\\\\\\'') + '\n  <% else: %>\n  \n  <% end %>\n  \n  \n  \n  \n  \n\n  <% if 'development' in @getEnvironments(): %>\n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  <% else: %>\n  \n  <% end %>\n\n  \n  \n\n\">\n  
\n    \n       Close Menu\n    \n    \n       Download\n    \n    
\n      \n        Introduction\n      \n      
\n        <% for element in uiIntroduction: %>\n          item\" href=\"<%= element.url %>\"><%= element.title %>\n        <% end %>\n      
\n    
\n    
\n      Project\n      
\n        <% for element in uiProject: %>\n          item\" href=\"<%= element.url %>\"><%= element.title %>\n        <% end %>\n      
\n    
\n    
\n      Elements\n      
\n        <% for element in uiElements: %>\n          item\" href=\"<%= element.url %>\"><%= element.title %>\n        <% end %>\n      
\n    
\n    
\n      Collections\n      
\n        <% for element in uiCollections: %>\n          item\" href=\"<%= element.url %>\"><%= element.title %>\n        <% end %>\n      
\n    
\n    
\n      Views\n      
\n        <% for element in uiViews: %>\n          item\" href=\"<%= element.url %>\"><%= element.title %>\n        <% end %>\n      
\n    
\n    
\n      Modules\n      
\n        <% for element in uiModules: %>\n          item\" href=\"<%= element.url %>\"><%= element.title %>\n        <% end %>\n      
\n    
\n    
\n      Behavior\n      
\n        <% for element in uiBehavior: %>\n          item\" href=\"<%= element.url %>\"><%= element.title %>\n        <% end %>\n      
\n    
\n    
\n      Style Guide\n      
\n        <% for element in uiGuide: %>\n          item\" href=\"<%= element.url %>\"><%= element.title %>\n        <% end %>\n      
\n    
\n\n  
\n\n  
\n    
\n       Content\n      
\n        <%= @document.type %>: <%= @document.title %>\n      
\n      <% if pageNumber > 1 and currentCollection[pageNumber - 2]?: %>\n      \">\n      <% else: %>\n      
\n      <% end %>\n      
\n        <%= \"#{pageNumber} of #{pageCount}\" %>\n        
\n          <% for element, index in currentCollection: %>\n            
item\">\n              \"><%= (index+1) %>. <%= element.title %>\n            
\n          <% end %>\n        
\n      
\n      <% if pageNumber isnt pageCount and currentCollection[pageNumber]?: %>\n      \">\n      <% else: %>\n      
\n      <% end %>\n      
\n        <% unless 'development' in @getEnvironments(): %>\n        
\n          \n        
\n        <% end %>\n        <% if @document.type is 'UI Element' or @document.type is 'UI View' or @document.type is 'UI Collection' or @document.type is 'UI Module': %>\n\n        \n          \n        \n        \n          \n        \n        <% end %>\n        \n          \n        \n        \n      
\n    
\n  
\n    
\n      \n      Menu\n    
\n  <%- @content %>\n\n\n",
      "content": "\n\n<% uiIntroduction    = @getCollection(\"documents\").findAll({type: $in: ['UI Introduction']},[{title: 1}]).toJSON() %>\n<% uiProject         = @getCollection(\"documents\").findAll({type: $in: ['Semantic Project']},[{title: 1}]).toJSON() %>\n<% uiGuide           = @getCollection(\"documents\").findAll({type: $in: ['UI Guide']},[{title: 1}]).toJSON() %>\n<% uiElements        = @getCollection(\"documents\").findAll({type: $in: ['UI Element']},[{title: 1}]).toJSON() %>\n<% uiCollections     = @getCollection(\"documents\").findAll({type: $in: ['UI Collection']},[{title: 1}]).toJSON() %>\n<% uiViews           = @getCollection(\"documents\").findAll({type: $in: ['UI View']},[{title: 1}]).toJSON() %>\n<% uiModules         = @getCollection(\"documents\").findAll({type: $in: ['UI Module']},[{title: 1}]).toJSON() %>\n<% uiBehavior        = @getCollection(\"documents\").findAll({type: $in: ['UI Behavior']},[{title: 1}]).toJSON() %>\n<% uiSpecification   = @getCollection(\"documents\").findAll({type: $in: ['UI Specification']},[{title: 1}]).toJSON() %>\n<% currentCollection = @getCollection(\"documents\").findAll({type: $in: [@document.type]},[{title: 1}]).toJSON() %>\n<% pageCount         = @pageCount(currentCollection) %>\n<% pageNumber        = @getPage(currentCollection, @document.id) %>\n<% pageCollection    = @getPageCollection(currentCollection, @document.id) %>\n  \n  \n  \n  \n\n  \n\n  \n  <%- @getBlock('meta').toHTML() %>\n  <%= @getPreparedTitle() %>\n\n  \" />\n  \" />\n\n  \n\n  <% if 'development' in @getEnvironments(): %>\n  \n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n  \n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  <% else: %>\n  \n  <% end %>\n\n  \n\n  <% if 'development' in @getEnvironments(): %>\n  \n  <% else: %>\n  \n  <% end %>\n  \n  \n  \n  \n  \n\n  <% if 'development' in @getEnvironments(): %>\n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  <% else: %>\n  \n  <% end %>\n\n  \n  \n\n\">\n  
\n    \n       Close Menu\n    \n    \n       Download\n    \n    
\n      \n        Introduction\n      \n      
\n        <% for element in uiIntroduction: %>\n          item\" href=\"<%= element.url %>\"><%= element.title %>\n        <% end %>\n      
\n    
\n    
\n      Project\n      
\n        <% for element in uiProject: %>\n          item\" href=\"<%= element.url %>\"><%= element.title %>\n        <% end %>\n      
\n    
\n    
\n      Elements\n      
\n        <% for element in uiElements: %>\n          item\" href=\"<%= element.url %>\"><%= element.title %>\n        <% end %>\n      
\n    
\n    
\n      Collections\n      
\n        <% for element in uiCollections: %>\n          item\" href=\"<%= element.url %>\"><%= element.title %>\n        <% end %>\n      
\n    
\n    
\n      Views\n      
\n        <% for element in uiViews: %>\n          item\" href=\"<%= element.url %>\"><%= element.title %>\n        <% end %>\n      
\n    
\n    
\n      Modules\n      
\n        <% for element in uiModules: %>\n          item\" href=\"<%= element.url %>\"><%= element.title %>\n        <% end %>\n      
\n    
\n    
\n      Behavior\n      
\n        <% for element in uiBehavior: %>\n          item\" href=\"<%= element.url %>\"><%= element.title %>\n        <% end %>\n      
\n    
\n    
\n      Style Guide\n      
\n        <% for element in uiGuide: %>\n          item\" href=\"<%= element.url %>\"><%= element.title %>\n        <% end %>\n      
\n    
\n\n  
\n\n  
\n    
\n       Content\n      
\n        <%= @document.type %>: <%= @document.title %>\n      
\n      <% if pageNumber > 1 and currentCollection[pageNumber - 2]?: %>\n      \">\n      <% else: %>\n      
\n      <% end %>\n      
\n        <%= \"#{pageNumber} of #{pageCount}\" %>\n        
\n          <% for element, index in currentCollection: %>\n            
item\">\n              \"><%= (index+1) %>. <%= element.title %>\n            
\n          <% end %>\n        
\n      
\n      <% if pageNumber isnt pageCount and currentCollection[pageNumber]?: %>\n      \">\n      <% else: %>\n      
\n      <% end %>\n      
\n        <% unless 'development' in @getEnvironments(): %>\n        
\n          \n        
\n        <% end %>\n        <% if @document.type is 'UI Element' or @document.type is 'UI View' or @document.type is 'UI Collection' or @document.type is 'UI Module': %>\n\n        \n          \n        \n        \n          \n        \n        <% end %>\n        \n          \n        \n        \n      
\n    
\n  
\n    
\n      \n      Menu\n    
\n  <%- @content %>\n\n\n",
      "tags": null,
      "render": false,
      "write": false,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "default.html",
      "date": "2013-12-03T17:44:32.000Z",
      "slug": "default",
      "url": "/default.html",
      "urls": [
        "/default.html"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": false,
      "header": null,
      "parser": null,
      "body": "\n\n<% uiIntroduction    = @getCollection(\"documents\").findAll({type: $in: ['UI Introduction']},[{title: 1}]).toJSON() %>\n<% uiProject         = @getCollection(\"documents\").findAll({type: $in: ['Semantic Project']},[{title: 1}]).toJSON() %>\n<% uiGuide           = @getCollection(\"documents\").findAll({type: $in: ['UI Guide']},[{title: 1}]).toJSON() %>\n<% uiElements        = @getCollection(\"documents\").findAll({type: $in: ['UI Element']},[{title: 1}]).toJSON() %>\n<% uiCollections     = @getCollection(\"documents\").findAll({type: $in: ['UI Collection']},[{title: 1}]).toJSON() %>\n<% uiViews           = @getCollection(\"documents\").findAll({type: $in: ['UI View']},[{title: 1}]).toJSON() %>\n<% uiModules         = @getCollection(\"documents\").findAll({type: $in: ['UI Module']},[{title: 1}]).toJSON() %>\n<% uiBehavior        = @getCollection(\"documents\").findAll({type: $in: ['UI Behavior']},[{title: 1}]).toJSON() %>\n<% uiSpecification   = @getCollection(\"documents\").findAll({type: $in: ['UI Specification']},[{title: 1}]).toJSON() %>\n<% currentCollection = @getCollection(\"documents\").findAll({type: $in: [@document.type]},[{title: 1}]).toJSON() %>\n<% pageCount         = @pageCount(currentCollection) %>\n<% pageNumber        = @getPage(currentCollection, @document.id) %>\n<% pageCollection    = @getPageCollection(currentCollection, @document.id) %>\n  \n  \n  \n  \n\n  \n\n  \n  <%- @getBlock('meta').toHTML() %>\n  <%= @getPreparedTitle() %>\n\n  \" />\n  \" />\n\n  \n\n  <% if 'development' in @getEnvironments(): %>\n  \n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n  \n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  <% else: %>\n  \n  <% end %>\n\n  \n\n  <% if 'development' in @getEnvironments(): %>\n  \n  <% else: %>\n  \n  <% end %>\n  \n  \n  \n  \n  \n\n  <% if 'development' in @getEnvironments(): %>\n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  <% else: %>\n  \n  <% end %>\n\n  \n  \n\n\">\n  
\n    \n       Close Menu\n    \n    \n       Download\n    \n    
\n      \n        Introduction\n      \n      
\n        <% for element in uiIntroduction: %>\n          item\" href=\"<%= element.url %>\"><%= element.title %>\n        <% end %>\n      
\n    
\n    
\n      Project\n      
\n        <% for element in uiProject: %>\n          item\" href=\"<%= element.url %>\"><%= element.title %>\n        <% end %>\n      
\n    
\n    
\n      Elements\n      
\n        <% for element in uiElements: %>\n          item\" href=\"<%= element.url %>\"><%= element.title %>\n        <% end %>\n      
\n    
\n    
\n      Collections\n      
\n        <% for element in uiCollections: %>\n          item\" href=\"<%= element.url %>\"><%= element.title %>\n        <% end %>\n      
\n    
\n    
\n      Views\n      
\n        <% for element in uiViews: %>\n          item\" href=\"<%= element.url %>\"><%= element.title %>\n        <% end %>\n      
\n    
\n    
\n      Modules\n      
\n        <% for element in uiModules: %>\n          item\" href=\"<%= element.url %>\"><%= element.title %>\n        <% end %>\n      
\n    
\n    
\n      Behavior\n      
\n        <% for element in uiBehavior: %>\n          item\" href=\"<%= element.url %>\"><%= element.title %>\n        <% end %>\n      
\n    
\n    
\n      Style Guide\n      
\n        <% for element in uiGuide: %>\n          item\" href=\"<%= element.url %>\"><%= element.title %>\n        <% end %>\n      
\n    
\n\n  
\n\n  
\n    
\n       Content\n      
\n        <%= @document.type %>: <%= @document.title %>\n      
\n      <% if pageNumber > 1 and currentCollection[pageNumber - 2]?: %>\n      \">\n      <% else: %>\n      
\n      <% end %>\n      
\n        <%= \"#{pageNumber} of #{pageCount}\" %>\n        
\n          <% for element, index in currentCollection: %>\n            
item\">\n              \"><%= (index+1) %>. <%= element.title %>\n            
\n          <% end %>\n        
\n      
\n      <% if pageNumber isnt pageCount and currentCollection[pageNumber]?: %>\n      \">\n      <% else: %>\n      
\n      <% end %>\n      
\n        <% unless 'development' in @getEnvironments(): %>\n        
\n          \n        
\n        <% end %>\n        <% if @document.type is 'UI Element' or @document.type is 'UI View' or @document.type is 'UI Collection' or @document.type is 'UI Module': %>\n\n        \n          \n        \n        \n          \n        \n        <% end %>\n        \n          \n        \n        \n      
\n    
\n  
\n    
\n      \n      Menu\n    
\n  <%- @content %>\n\n\n",
      "rendered": false,
      "contentRendered": null,
      "contentRenderedWithoutLayouts": null,
      "renderSingleExtensions": false,
      "isLayout": true,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/layouts/none.html.eco",
      "relativePath": "none.html.eco",
      "basename": "none",
      "outBasename": "none",
      "extension": "eco",
      "outExtension": "html",
      "extensions": [
        "html",
        "eco"
      ],
      "filename": "none.html.eco",
      "fullDirPath": "/home/jack/projects/semantic/server/layouts",
      "outPath": "/home/jack/projects/semantic/docs/none.html",
      "outDirPath": "/home/jack/projects/semantic/docs",
      "outFilename": "none.html",
      "relativeOutPath": "none.html",
      "relativeDirPath": ".",
      "relativeOutDirPath": ".",
      "relativeBase": "none",
      "relativeOutBase": "none",
      "contentType": "application/octet-stream",
      "outContentType": "text/html",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:04.000Z",
      "rtime": null,
      "wtime": null,
      "exists": true,
      "encoding": "utf8",
      "source": "\n  <%- @content %>",
      "content": "  <%- @content %>",
      "tags": null,
      "render": false,
      "write": false,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "none.html",
      "date": "2013-12-02T15:39:04.000Z",
      "slug": "none",
      "url": "/none.html",
      "urls": [
        "/none.html"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": false,
      "header": null,
      "parser": null,
      "body": "  <%- @content %>",
      "rendered": false,
      "contentRendered": null,
      "contentRenderedWithoutLayouts": null,
      "renderSingleExtensions": false,
      "isLayout": true,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/partials/download.html.eco",
      "relativePath": "download.html.eco",
      "basename": "download",
      "outBasename": "download",
      "extension": "eco",
      "outExtension": "html",
      "extensions": [
        "html",
        "eco"
      ],
      "filename": "download.html.eco",
      "fullDirPath": "/home/jack/projects/semantic/server/partials",
      "outPath": "/home/jack/projects/semantic/docs/download.html",
      "outDirPath": "/home/jack/projects/semantic/docs",
      "outFilename": "download.html",
      "relativeOutPath": "download.html",
      "relativeDirPath": ".",
      "relativeOutDirPath": ".",
      "relativeBase": "download",
      "relativeOutBase": "download",
      "contentType": "application/octet-stream",
      "outContentType": "text/html",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:04.000Z",
      "rtime": null,
      "wtime": null,
      "exists": true,
      "encoding": "utf8",
      "source": "
\n\n  
Variables
\n  
\n    
\n      \n      \n    
\n  
\n\n  
\n\n  
\n    Download\n    \n      
\n      Compressed \n      Uncompressed\n    
\n  
\n
",
      "content": "
\n\n  
Variables
\n  
\n    
\n      \n      \n    
\n  
\n\n  
\n\n  
\n    Download\n    \n      
\n      Compressed \n      Uncompressed\n    
\n  
\n
",
      "tags": null,
      "render": false,
      "write": false,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "download.html",
      "date": "2013-12-02T15:39:04.000Z",
      "slug": "download",
      "url": "/download.html",
      "urls": [
        "/download.html"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": false,
      "header": null,
      "parser": null,
      "body": "
\n\n  
Variables
\n  
\n    
\n      \n      \n    
\n  
\n\n  
\n\n  
\n    Download\n    \n      
\n      Compressed \n      Uncompressed\n    
\n  
\n
",
      "rendered": false,
      "contentRendered": null,
      "contentRenderedWithoutLayouts": null,
      "renderSingleExtensions": false,
      "isPartial": true,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/partials/header.html.eco",
      "relativePath": "header.html.eco",
      "basename": "header",
      "outBasename": "header",
      "extension": "eco",
      "outExtension": "html",
      "extensions": [
        "html",
        "eco"
      ],
      "filename": "header.html.eco",
      "fullDirPath": "/home/jack/projects/semantic/server/partials",
      "outPath": "/home/jack/projects/semantic/docs/header.html",
      "outDirPath": "/home/jack/projects/semantic/docs",
      "outFilename": "header.html",
      "relativeOutPath": "header.html",
      "relativeDirPath": ".",
      "relativeOutDirPath": ".",
      "relativeBase": "header",
      "relativeOutBase": "header",
      "contentType": "application/octet-stream",
      "outContentType": "text/html",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:04.000Z",
      "rtime": "2013-12-04T09:15:27.176Z",
      "wtime": null,
      "exists": true,
      "encoding": "utf8",
      "source": "<% @tabs = {  definition: 'Definition', examples: 'Examples', usage: 'Usage', settings: 'Settings' } if @tabs == 'module' %>\n\n
tab <% end %>segment\">\n  
\n    
\n\n      
\n        <%=@document.title %>\n        <% if @document.status?: %><%= @document.status %><% end %>\n      
\n\n      
<%=@document.description %>
\n      <% if @document.type is 'UI Element' or @document.type is 'UI View' or @document.type is 'UI Collection': %>\n      
\n        Definition Mode\n        \n      
\n      <% end %>\n      <% if @document.type is 'UI Module': %>\n      \n        Learn about Modules\n        \n      \n      <% end %>\n    
\n    
\n      <% unless 'development' in @getEnvironments(): %>\n      
\n      <% end %>\n    
\n    <% if @tabs?: %>\n    <% index = 0 %>\n    <% tabCount = 0 %>\n    <% numbers = ['zero', 'one', 'two', 'three', 'four', 'five', 'six'] %>\n    <% colors = ['red', 'teal', 'blue', 'purple', 'black', 'orange'] %>\n      <% for id, name of @tabs: %>\n        <% tabCount++ %>\n      <% end %>\n      
 item tabular ui menu\">\n        <% for id, name of @tabs: %>\n          item\" data-tab=\"<%= id %>\"><%= name %>\n          <% index++ %>\n        <% end %>\n      
\n      <% index = 0 %>\n      
\n        <% for id, name of @tabs: %>\n          item\" data-tab=\"<%= id %>\"><%= name %>\n          <% index++ %>\n        <% end %>\n      
\n    <% end %>\n  
\n
",
      "content": "<% @tabs = {  definition: 'Definition', examples: 'Examples', usage: 'Usage', settings: 'Settings' } if @tabs == 'module' %>\n\n
tab <% end %>segment\">\n  
\n    
\n\n      
\n        <%=@document.title %>\n        <% if @document.status?: %><%= @document.status %><% end %>\n      
\n\n      
<%=@document.description %>
\n      <% if @document.type is 'UI Element' or @document.type is 'UI View' or @document.type is 'UI Collection': %>\n      
\n        Definition Mode\n        \n      
\n      <% end %>\n      <% if @document.type is 'UI Module': %>\n      \n        Learn about Modules\n        \n      \n      <% end %>\n    
\n    
\n      <% unless 'development' in @getEnvironments(): %>\n      
\n      <% end %>\n    
\n    <% if @tabs?: %>\n    <% index = 0 %>\n    <% tabCount = 0 %>\n    <% numbers = ['zero', 'one', 'two', 'three', 'four', 'five', 'six'] %>\n    <% colors = ['red', 'teal', 'blue', 'purple', 'black', 'orange'] %>\n      <% for id, name of @tabs: %>\n        <% tabCount++ %>\n      <% end %>\n      
 item tabular ui menu\">\n        <% for id, name of @tabs: %>\n          item\" data-tab=\"<%= id %>\"><%= name %>\n          <% index++ %>\n        <% end %>\n      
\n      <% index = 0 %>\n      
\n        <% for id, name of @tabs: %>\n          item\" data-tab=\"<%= id %>\"><%= name %>\n          <% index++ %>\n        <% end %>\n      
\n    <% end %>\n  
\n
",
      "tags": null,
      "render": false,
      "write": false,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "header.html",
      "date": "2013-12-02T15:39:04.000Z",
      "slug": "header",
      "url": "/header.html",
      "urls": [
        "/header.html"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": false,
      "header": null,
      "parser": null,
      "body": "<% @tabs = {  definition: 'Definition', examples: 'Examples', usage: 'Usage', settings: 'Settings' } if @tabs == 'module' %>\n\n
tab <% end %>segment\">\n  
\n    
\n\n      
\n        <%=@document.title %>\n        <% if @document.status?: %><%= @document.status %><% end %>\n      
\n\n      
<%=@document.description %>
\n      <% if @document.type is 'UI Element' or @document.type is 'UI View' or @document.type is 'UI Collection': %>\n      
\n        Definition Mode\n        \n      
\n      <% end %>\n      <% if @document.type is 'UI Module': %>\n      \n        Learn about Modules\n        \n      \n      <% end %>\n    
\n    
\n      <% unless 'development' in @getEnvironments(): %>\n      
\n      <% end %>\n    
\n    <% if @tabs?: %>\n    <% index = 0 %>\n    <% tabCount = 0 %>\n    <% numbers = ['zero', 'one', 'two', 'three', 'four', 'five', 'six'] %>\n    <% colors = ['red', 'teal', 'blue', 'purple', 'black', 'orange'] %>\n      <% for id, name of @tabs: %>\n        <% tabCount++ %>\n      <% end %>\n      
 item tabular ui menu\">\n        <% for id, name of @tabs: %>\n          item\" data-tab=\"<%= id %>\"><%= name %>\n          <% index++ %>\n        <% end %>\n      
\n      <% index = 0 %>\n      
\n        <% for id, name of @tabs: %>\n          item\" data-tab=\"<%= id %>\"><%= name %>\n          <% index++ %>\n        <% end %>\n      
\n    <% end %>\n  
\n
",
      "rendered": true,
      "contentRendered": "\n\n
\n  
\n    
\n\n      
\n        List\n        \n      
\n\n      
A list is a group of related content items ordered consecutively
\n      \n      
\n        Definition Mode\n        \n      
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
",
      "contentRenderedWithoutLayouts": "\n\n
\n  
\n    
\n\n      
\n        List\n        \n      
\n\n      
A list is a group of related content items ordered consecutively
\n      \n      
\n        Definition Mode\n        \n      
\n      \n      \n    
\n    
\n      \n      
\n      \n    
\n    \n  
\n
",
      "renderSingleExtensions": false,
      "isPartial": true,
      "meta": {}
    },
    {
      "fullPath": "/home/jack/projects/semantic/server/partials/tab-header.html.eco",
      "relativePath": "tab-header.html.eco",
      "basename": "tab-header",
      "outBasename": "tab-header",
      "extension": "eco",
      "outExtension": "html",
      "extensions": [
        "html",
        "eco"
      ],
      "filename": "tab-header.html.eco",
      "fullDirPath": "/home/jack/projects/semantic/server/partials",
      "outPath": "/home/jack/projects/semantic/docs/tab-header.html",
      "outDirPath": "/home/jack/projects/semantic/docs",
      "outFilename": "tab-header.html",
      "relativeOutPath": "tab-header.html",
      "relativeDirPath": ".",
      "relativeOutDirPath": ".",
      "relativeBase": "tab-header",
      "relativeOutBase": "tab-header",
      "contentType": "application/octet-stream",
      "outContentType": "text/html",
      "ctime": "2013-12-04T07:12:08.000Z",
      "mtime": "2013-12-02T15:39:04.000Z",
      "rtime": null,
      "wtime": null,
      "exists": true,
      "encoding": "utf8",
      "source": "
\n  
\n    
\n      
\n        <%=@document.title %>\n        <% if @document.status?: %><%= @document.status %><% end %>\n      
\n      
<%=@document.description %>
\n      <% if @document.type is 'UI Element' or @document.type is 'UI View' or @document.type is 'UI Collection' or @document.type is 'UI Module': %>\n      
\n        Definition\n        \n      
\n      <% end %>\n    
\n    
\n      
\n    
\n  
\n
",
      "content": "
\n  
\n    
\n      
\n        <%=@document.title %>\n        <% if @document.status?: %><%= @document.status %><% end %>\n      
\n      
<%=@document.description %>
\n      <% if @document.type is 'UI Element' or @document.type is 'UI View' or @document.type is 'UI Collection' or @document.type is 'UI Module': %>\n      
\n        Definition\n        \n      
\n      <% end %>\n    
\n    
\n      
\n    
\n  
\n
",
      "tags": null,
      "render": false,
      "write": false,
      "writeSource": false,
      "dynamic": false,
      "title": null,
      "name": "tab-header.html",
      "date": "2013-12-02T15:39:04.000Z",
      "slug": "tab-header",
      "url": "/tab-header.html",
      "urls": [
        "/tab-header.html"
      ],
      "ignored": false,
      "standalone": false,
      "referencesOthers": false,
      "header": null,
      "parser": null,
      "body": "
\n  
\n    
\n      
\n        <%=@document.title %>\n        <% if @document.status?: %><%= @document.status %><% end %>\n      
\n      
<%=@document.description %>
\n      <% if @document.type is 'UI Element' or @document.type is 'UI View' or @document.type is 'UI Collection' or @document.type is 'UI Module': %>\n      
\n        Definition\n        \n      
\n      <% end %>\n    
\n    
\n      
\n    
\n  
\n
",
      "rendered": false,
      "contentRendered": null,
      "contentRenderedWithoutLayouts": null,
      "renderSingleExtensions": false,
      "isPartial": true,
      "meta": {}
    }
  ]
}