Repository: Semantic-Org/Semantic-UI-Docs Branch: master Commit: b11907194e22 Files: 213 Total size: 3.3 MB Directory structure: gitextract_fdrfmkx0/ ├── .gitignore ├── .jshintrc ├── README.md ├── docpad.coffee ├── package.json └── server/ ├── documents/ │ ├── 404.html.eco │ ├── behaviors/ │ │ ├── api.html.eco │ │ ├── form.html.eco │ │ ├── state.html.eco │ │ └── visibility.html.eco │ ├── cla.html.eco │ ├── collections/ │ │ ├── breadcrumb.html.eco │ │ ├── form.html.eco │ │ ├── grid.html.eco │ │ ├── menu.html.eco │ │ ├── message.html.eco │ │ └── table.html.eco │ ├── elements/ │ │ ├── button.html.eco │ │ ├── container.html.eco │ │ ├── divider.html.eco │ │ ├── flag.html.eco │ │ ├── header.html.eco │ │ ├── icon.html.eco │ │ ├── image.html.eco │ │ ├── input.html.eco │ │ ├── label.html.eco │ │ ├── list.html.eco │ │ ├── loader.html.eco │ │ ├── placeholder.html.eco │ │ ├── rail.html.eco │ │ ├── reveal.html.eco │ │ ├── segment.html.eco │ │ └── step.html.eco │ ├── globals/ │ │ ├── reset.html.eco │ │ └── site.html.eco │ ├── hotfix.html │ ├── iframe/ │ │ ├── fixed-menu.html │ │ └── fixed-vertical-menu.html │ ├── index.html.eco │ ├── introduction/ │ │ ├── advanced-usage.html.eco │ │ ├── build-tools.html.eco │ │ ├── getting-started.html.eco │ │ ├── glossary.html.eco │ │ ├── integrations.html.eco │ │ └── new.html.eco │ ├── kitchen-sink.html.eco │ ├── modules/ │ │ ├── accordion.html.eco │ │ ├── checkbox.html.eco │ │ ├── dimmer.html.eco │ │ ├── dropdown.html.eco │ │ ├── embed.html.eco │ │ ├── modal.html.eco │ │ ├── nag.html.eco │ │ ├── popup.html.eco │ │ ├── progress.html.eco │ │ ├── rating.html.eco │ │ ├── search.html.eco │ │ ├── shape.html.eco │ │ ├── sidebar.html.eco │ │ ├── sticky.html.eco │ │ ├── tab.html.eco │ │ └── transition.html.eco │ ├── test.html.eco │ ├── usage/ │ │ ├── layout.html.eco │ │ └── theming.html.eco │ └── views/ │ ├── advertisement.html.eco │ ├── card.html.eco │ ├── comment.html.eco │ ├── feed.html.eco │ ├── item.html.eco │ └── statistic.html.eco ├── files/ │ ├── javascript/ │ │ ├── accordion.js │ │ ├── api.js │ │ ├── button.js │ │ ├── card.js │ │ ├── checkbox.js │ │ ├── container.js │ │ ├── customize.js │ │ ├── dimmer.js │ │ ├── docs.js │ │ ├── dropdown.js │ │ ├── embed.js │ │ ├── form.js │ │ ├── grid.js │ │ ├── header.js │ │ ├── home.js │ │ ├── icon.js │ │ ├── input.js │ │ ├── item.js │ │ ├── library/ │ │ │ ├── clipboard.js │ │ │ ├── cookie.js │ │ │ ├── detect.js │ │ │ ├── easing.js │ │ │ ├── history.js │ │ │ ├── jquery.hotkeys.js │ │ │ ├── jquery.js │ │ │ ├── jquery.legacy.js │ │ │ ├── less.js │ │ │ ├── serialize-object.js │ │ │ ├── sinon.js │ │ │ ├── state.js │ │ │ ├── tablesort.js │ │ │ ├── typing.js │ │ │ └── underscore.js │ │ ├── loader.js │ │ ├── menu.js │ │ ├── message.js │ │ ├── modal.js │ │ ├── new.js │ │ ├── playground.js │ │ ├── popup.js │ │ ├── progress.js │ │ ├── rating.js │ │ ├── search.js │ │ ├── shape.js │ │ ├── sidebar.js │ │ ├── slider.js │ │ ├── started.js │ │ ├── sticky.js │ │ ├── tab.js │ │ ├── table.js │ │ ├── theming.js │ │ ├── transition.js │ │ ├── validate-form.js │ │ └── visibility.js │ └── stylesheets/ │ ├── customize.css │ ├── docs.css │ ├── home.css │ ├── library/ │ │ ├── basic.icon.css │ │ ├── docco.css │ │ ├── sidr.css │ │ └── snap.css │ ├── reset.css │ ├── rtl.css │ └── shape.css ├── layouts/ │ ├── basic.html.eco │ ├── blank.html.eco │ ├── default.html.eco │ ├── homepage.html.eco │ └── none.html.eco ├── partials/ │ ├── css.html.eco │ ├── demo-sidebar.html │ ├── dimmer-demo.html │ ├── docs-css.html.eco │ ├── examples/ │ │ ├── accordion.html │ │ ├── breadcrumb.html │ │ ├── button.html │ │ ├── card.html │ │ ├── checkbox.html │ │ ├── content-loader.html │ │ ├── dimmer.html │ │ ├── divider.html │ │ ├── dropdown.html │ │ ├── feed.html │ │ ├── flag.html │ │ ├── form.html │ │ ├── grid.html │ │ ├── header.html │ │ ├── icon.html │ │ ├── image.html │ │ ├── input.html │ │ ├── item.html │ │ ├── label.html │ │ ├── list.html │ │ ├── loader.html │ │ ├── menu.html │ │ ├── message.html │ │ ├── modal.html │ │ ├── popup.html │ │ ├── progress.html │ │ ├── rating.html │ │ ├── reveal.html │ │ ├── search.html │ │ ├── segment.html │ │ ├── shape.html │ │ ├── sidebar.html │ │ ├── single/ │ │ │ ├── flag-menu.html │ │ │ ├── preset-menu.html │ │ │ ├── skill-menu.html │ │ │ └── state-options.html │ │ ├── statistic.html │ │ ├── step.html │ │ ├── tab.html │ │ ├── table.html │ │ └── transition.html │ ├── fixed-menu.html.eco │ ├── footer.html │ ├── header.html.eco │ ├── javascript.html.eco │ ├── language-modal.html │ ├── languages.html │ ├── less.html.eco │ ├── library-javascript.html.eco │ ├── meta.html.eco │ ├── sidebar.html.eco │ ├── site-ads.html.eco │ ├── site-menu.html.eco │ ├── tab-header.html.eco │ ├── tracking.html.eco │ ├── transifex.html.eco │ ├── ui-css.html.eco │ └── ui-javascript.html.eco └── raw/ ├── .htaccess ├── CNAME ├── api.json ├── crossdomain.xml ├── draft/ │ ├── carousel.js │ ├── carousel.less │ ├── extra.transitions.less │ └── sitemap.less ├── humans.txt ├── robots.txt └── swf/ └── clipboard.swf ================================================ FILE CONTENTS ================================================ ================================================ FILE: .gitignore ================================================ node_modules out/ package-lock.json # Numerous always-ignore extensions *.diff *.err *.orig *.log *.rej *.swo *.swp *.zip *.vi *~ *.sass-cache *.ruby-version # OS or Editor folders .DS_Store ._* Thumbs.db .cache .project .settings .tmproj .docpad.db *.esproj nbproject *.sublime-project *.sublime-workspace .brofile ================================================ FILE: .jshintrc ================================================ { "globals": { "$" : true, "afterEach" : true, "beforeEach" : true, "console" : true, "describe" : true, "expect" : true, "it" : true, "jQuery" : true, "loadFixtures" : true, "module" : true, "requestAnimationFrame" : true, "require" : true, "semantic" : true }, "debug" : false, "devel" : true, "browser" : true, "curly" : true, "immed" : true, "latedef" : true, "loopfunc" : true, "noarg" : true, "undef" : true, "sub" : true, "loopfunc" : true, "laxbreak" : true, "evil" : true, "indent" : false, "trailing" : false } ================================================ FILE: README.md ================================================ # Semantic Docs This folder contains the templates used to generate the static website for [semantic-ui.com](http://www.semantic-ui.com). This repo can be used to create a fork of the UI documents to serve as styleguide for your project. ### Installing Dependencies You must install [DocPad](http://github.com/docpad/docpad), the static site generator used to create the HTML for the site, to render the contents of this repository. SUI docs use a version of **DocPad compatible with Node 10**. It is recommended you install [NVM](https://github.com/nvm-sh/nvm) and a compatible node version in order to create the documentation. ``` nvm install 8 nvm use 8 ``` To run docpad after cloning this repo ``` npm install -g docpad@6.79.4 docpad install; ``` Then finally to start the server ``` docpad run ``` ### Generating Semantic UI for Docs Assuming two sibling folders: 1. UI folder ./ui 2. Docs folder ./docs * Clone both repos to respective folders * npm install in both directories * Go through Semantic UI installer steps (auto) * In `./ui` folder `gulp build-docs` (builds files to ./docs) * In `./docs` folder `docpad install` then `docpad run` * Go to http://localhost:9778/ docs should be there * Optionally run `gulp serve-docs` in ./ui to serve any changes from ./ui/src to ./docs ### Running the Server Start the docs server (and generate docs): ``` # run from inside docs folder that will now contain the compiled docs # windows users can then navigate to http://localhost:9778 docpad run ``` Watch for changes from your UI folder, and serve to the docs instance: ``` gulp serve-docs ``` ### Publishing to GitHub Pages You can publish your docs to GitHub Pages from the command line automatically ``` docpad deploy-ghpages --env static ``` ## Help Fix Typos and Errors If you find any typos or mistakes, submitting a fix is easy! - [Open the `documents/` folder](https://github.com/Semantic-Org/Semantic-UI-Docs/tree/master/server/documents) on GitHub - Click the “Edit” button on the appropriate page - Click to submit a pull request ================================================ FILE: docpad.coffee ================================================ # The DocPad Configuration File # It is simply a CoffeeScript Object which is parsed by CSON docpadConfig = { srcPath : './server' outPath: './out' # test production env # env: 'production' plugins: ghpages: deployRemote: 'origin' deployBranch: 'gh-pages' # ================================= # Template Data # These are variables that will be accessible via our templates # To access one of these within our templates, refer to the FAQ: https://github.com/bevry/docpad/wiki/FAQ templateData: # Specify some site properties site: # The production url of our website url: "http://www.semantic-ui.com" # Here are some old site urls that you would like to redirect from oldUrls: [], version: "2.5.0", branch: "master", # The default title of our website title: "Semantic UI" # The website description (for SEO) description: """ Semantic empowers designers and developers by creating a shared vocabulary for UI. """ # The website keywords (for SEO) separated by commas keywords: """ html5, ui, library, framework, javascript """ # ----------------------------- # Helper Functions # Get the prepared site/document title # Often we would like to specify particular formatting to our page's title # we can apply that formatting here getDirPath: -> @document.dirPath getVersion: -> @site.version getBranch: -> @site.branch getZip: -> if @site.version "https://github.com/Semantic-Org/Semantic-UI/archive/" + @site.version + ".zip" else "https://github.com/Semantic-Org/Semantic-UI/archive/master.zip" getPreparedTitle: -> # if we have a document title, then we should use that and suffix the site's title onto it if @document.title "#{@document.title} | #{@site.title}" # if our document does not have it's own title, then we should just use the site's title else @site.title getPage: (collection, id) -> for item, index in collection selectedIndex = (index + 1) if item.id is id selectedIndex pageCount: (collection) -> for item, index in collection itemCount = index + 1 itemCount getPageCollection: (collection, id, delta = 2) -> for item, index in collection selectedIndex = index if item.id is id lastIndex = index # determine page count before and after bottomCount = if (selectedIndex - delta >= 0) then delta else (selectedIndex) topCount = if (selectedIndex + delta <= lastIndex) then delta else (lastIndex - selectedIndex) bottomDelta = (delta * 2 - topCount) topDelta = (delta * 2 - bottomCount) bottomIndex = if (selectedIndex - bottomDelta >= 0) then (selectedIndex - bottomDelta) else 0 topIndex = if (selectedIndex + topDelta <= lastIndex) then (selectedIndex + topDelta) else lastIndex result = collection[bottomIndex..topIndex] result # Get the prepared site/document description getPreparedDescription: -> # if we have a document description, then we should use that, otherwise use the site's description @document.description or @site.description # Get the prepared site/document keywords getPreparedKeywords: -> # Merge the document keywords with the site keywords @site.keywords.concat(@document.keywords or []).join(', ') # ================================= # Custom Collections collections: uiElements: -> @getCollection("documents").findAllLive({type: $in: ['UI Element']}, [{title: 1}]) uiCollections: -> @getCollection("documents").findAllLive({type: $in: ['UI Collection']}, [{title: 1}]) uiViews: -> @getCollection("documents").findAllLive({type: $in: ['UI View']}, [{title: 1}]) uiModules: -> @getCollection("documents").findAllLive({type: $in: ['UI Module', 'UI Behavior']}, [{title: 1}]) # ================================= # DocPad Events # Here we can define handlers for events that DocPad fires # You can find a full listing of events on the DocPad Wiki # events: events: extendCollections: (opts) -> @docpad.getCollection('files').on('add', (document) -> document.setMetaDefaults(standalone:true)) } # Export our DocPad Configuration module.exports = docpadConfig ================================================ FILE: package.json ================================================ { "name": "semantic-ui-docs", "title": "Semantic UI Docs", "description": "Semantic empowers designers and developers by creating a shared vocabulary for UI.", "homepage": "http://www.semantic-ui.com", "author": "Jack Lukic ", "license": "MIT", "repository": { "type": "git", "url": "git://github.com/Semantic-Org/Semantic-UI-Docs.git" }, "dependencies": { "docpad": "~6.79.4", "docpad-plugin-babel": "~2.2.1", "docpad-plugin-copy": "~2.1.3", "docpad-plugin-eco": "~2.2.1", "docpad-plugin-partials": "~2.12.0" }, "devDependencies": { "docpad-plugin-ghpages": "~2.6.1" } } ================================================ FILE: server/documents/404.html.eco ================================================ --- layout : 'default' title : 'Page Not Found' type : '404' --- <%- @partial('header') %>
================================================ FILE: server/documents/behaviors/api.html.eco ================================================ --- layout : 'default' css : 'api' standalone : true element : 'API' elementType : 'behavior' title : 'API' description : 'API allows elements to trigger actions on a server' type : 'UI Behavior' --- <%- @partial('header', { tabs: { overview: 'Overview', usage: 'Usage', behaviors: 'Behaviors', settings: 'Settings' } }) %>

Integrates Seamlessly with UI

API is designed to make the process of integrating data sources to UI components seamless, tying API request state to UI states automatically.

For example adding an API behavior to an input will occur oninput, while a button, will query the server onclick.

Click Me
Disabled

Preserve Templated URLs

API helps you decouple URLs from your code. Use named API actions like get followers instead of URLs like http://foo.com/get/1.0/followers.json in your code.

$('.button') .api({ action: 'get followers' }) ;

Centrally manage your entire API making sure you aren't caught modifying urls across your codebase. Define your endpoints using an intuitive templating system that automatically passes data found in your UI.

$.fn.api.settings.api = { 'get followers' : '/followers/{id}?results={count}', 'create user' : '/create', 'add user' : '/add/{id}', 'search' : '/query/{query}/{/sort}' };

HTTP 200 is Not Success

Parse your JSON for success conditions before callbacks fire, making sure server errors caught correctly, still trigger error conditions in your front end code.

// Responses without this status will trigger error conditions $.fn.api.settings.successTest = function(response) { return response.status == 'OK'; }

Translate APIs on the Fly

Using a third party API that uses some unruly code? Not a problem! API lets you modify an APIs raw JSON response before it is consumed by your code.

Tools for Third-Party Integrations & Mocking

New powerful callbacks like response and responseAsync let you asynchronously mock responses and trigger the same callbacks as your API.

API Example

Patrick Russel
Patrick lives in San Francisco, and studies french literature.

Creating an API

API Actions

API works by defining a set of server actions which interface elements can query. Actions are usually represented by short phrases, things like save profile, or get followers which correspond to a templated URL resource on the server.

URL variables specified in actions are substituted at run-time allowing individual components to query different URLs.

URLs listed in your API can include required parameters and optional parameters which may be adjusted for each call.

Required Parameters

Uses format {variable}
Will abort the request if they cannot be found.
/* Two required variables */ $.fn.api.settings.api = { 'get followers' : '/followers/{id}?results={count}' };

Optional Parameters

Uses format {/variable}
Will not abort the request if they cannot be found.
Will be removed from the URL automatically if not available.
Any preceding slash before an optional parameter will be removed from the URL, allowing you to include them in resource paths.
/* One required, one optional variable */ $.fn.api.settings.api = { 'get followers' : '/followers/{id}/{/sort}' };

Creating your API

You should define your endpoints once in your application. Usually this is done in a central configuration file included on each page.

These named API endpoints are stored globally in $.fn.api.settings.api.

Keeping your endpoints defined in one place makes sure when you update your application you will only need to update a single location with new URLs.

/* Define API endpoints once globally */ $.fn.api.settings.api = { 'get followers' : '/followers/{id}?results={count}', 'create user' : '/create', 'add user' : '/add/{id}', 'follow user' : '/follow/{id}', 'search' : '/search/?query={value}' };

Using URLs

Named API actions are not required to use API, you can also manually specify the URL for a request and use the same templating:

$('.search.button') .api({ url: 'http://www.google.com?q={value}' }) ;

Querying API Actions

The following examples work best while viewing console logs in your web console.

Attaching API Events

API events are triggered by attaching named actions to elements on your page. These actions look up named endpoints in your API translating templated values from your element for each call.

Any element can have an API action attached directly to it. By default the action will occur on the most appropriate event for the type of element. For example a button will call your server onclick, an input oninput, or a form onsubmit.

API actions and data can be specified in Javascript on initialization:

// translates '/follow/{id}' to 'follow/22' $('.follow.button') .api({ action: 'follow user', urlData: { id: 22 } }) ;
Or

API actions and data can also be specified in metadata:

// also calls '/follow/22' $('.follow.button') .api() ;

Specifying DOM Events

If you need to override what action an API event occurs on you can use the on parameter.

API requests for the following demos have been faked using API's response setting to avoid rate throttling from public APIs. No actual data is returned.
$('.follow.button') .api({ action: 'follow user', on: 'mouseenter' }) ;

Calling Immediately

If you require API action to occur immediately use on: 'now'. This will still trigger the same state updates to the invoked element, but will occur immediately.

$('.follow.button') .api({ action: 'follow user', on: 'now' }) ;

Keep in mind passing a new settings object will destroy the previous instance, and all its settings and events. If you want to preserve the previous instance, you can trigger a new request with the query behavior.

// set-up API button with events $('.follow.button') .api({ action: 'follow user' }) ; // do an immediate query $('.follow.button') .api('query') ;

Setting-up Requests

Routing Data to URLs

If your API URLs include templated variables they will be replaced during your request by one of four possible ways, listed in of inheritance.

All parameters used in a URL are encoded using encodeURIComponent by default, to prevent from malicious strings from affecting your query. To disable this feature you can set encodeParameters: false.

1. Automatically Routed URL Variables

Some special values will be automatically replaced if specified in URL actions.

Variable Description Available for
text current text value of element All elements
value current input value of element Input elements
$.fn.api.settings.api.search = '/search/?query={value}'; $('.routed.example .search input') .api({ action : 'search', stateContext : '.ui.input' }) ;

2. URL Variables Specified in Data Attributes

You can include URL values as HTML5 metadata attributes.

This is often the easiest way to include unique URL data for each triggering element. For example, many follow buttons will trigger the same endpoint, but each will have its own user id.

Only variables specified in your API's URL will be searched for in metadata.
Follow Sally
Follow Jenny
// requests different URLs for each button $('.follow.button') .api({ action: 'follow user' }) ;

3. Settings Specified in Javascript

URL variables and GET/POST data can be specified at run-time in the Javascript object.

$('.follow.button') .api({ action : 'follow user', method : 'POST', // Substituted into URL urlData: { id: 22 }, // passed via POST data: { name: 'Joe Henderson' } }) ;

4. Settings Returned from beforeSend

All run settings, not just URL data, can be adjusted in a special callback beforeSend which occurs before the API request is sent.

An additional callback beforeXHR lets you modify the XHR object before sending. This is different than beforeSend which is used to modify settings before send.
$('.follow.button') .api({ action: 'follow user', beforeSend: function(settings) { settings.urlData = { id: 22 }; return settings; } beforeXHR: function(xhr) { // adjust XHR with additional headers xhr.setRequestHeader ('Authorization', 'Basic XXXXXX'); return xhr; } }) ;

Adjusting Requests

Modifying XHR

An additional callback beforeXHR lets you modify the XHR object before sending. This is useful for adjusting properties of the XHR request like modifying headers, before sending a request.

$('.follow.button') .api({ action: 'follow user', beforeXHR: function(xhr) { // adjust XHR with additional headers xhr.setRequestHeader ('Authorization', 'Basic XXXXXX'); return xhr; } }) ;

Disabling Requests

As a convenience, API will automatically prevent requests from occurring on elements that are currently disabled.

Disabled
// this will never occur $('.disabled.button') .api({ action: 'follow user' }) ;

Cancelling Requests

BeforeSend can also be used to check for special conditions for a request to be made. If the beforeSend callback returns false, the request will be cancelled.

// set somewhere in your code window.isLoggedIn = false; $('.follow.button') .api({ action: 'follow user', beforeSend: function(settings) { // cancel request if(!isLoggedIn) { $(this).state('flash text', 'Requires Login!'); return false; } } }) ;

Passing Data

1. Routed Form Data

When you use the serializeForm setting or attach API events on a form, API will automatically include the closest form in data sent to the server.

Structured form data is beneficial over jQuery's serialize for several reasons:

  • Serialize Object correctly converts structured form names like name="name[first]" into nested object literals.
  • Structured form data can be modified in Javascript in beforeSend.
  • Form data will automatically be converted to their Javascript equivalents, for instance, checkboxes will be converted to boolean values.
Structured form data requires including macek's serialize object.

Structured Data Example

The following form shows some of the advantages of structured form data mentioned above.

Gender
Male
Female
Submit
$('form .submit.button') .api({ action: 'create user', serializeForm: true, data: { foo: 'baz' }, beforeSend: function(settings) { // form data is editable in before send if(settings.data.username == '') { settings.data.username = 'New User'; } // open console to inspect object console.log(settings.data); return settings; } }) ;

2. Data Routed in Javascript

Server data can be specified directly when initializing an API requests.

$('.form .submit') .api({ data: { session: 22, name: 'Baz' } }) ;

3. Data Added in beforeSend

POST or GET data can be specified using a special callback beforeSend, which can be used to retrieve data before sending a request.

$('.form .submit') .api({ action: 'create user', serializeForm: true, // arbitrary POST/GET same across all requests data: { session: 22 }, // modify data PER element in callback beforeSend: function(settings) { // cancel request if no id if(!$(this).data('id')) { return false; } settings.data.userID = $(this).data('id'); return settings; } }) ;

Server Responses

Response Callbacks

Successful responses from the server will trigger onSuccess, invalid results onFailure.

onError will only trigger on XHR errors, but not on invalid JSON responses.

You can use the onResponse callback to adjust the JSON response before being parsed against a success test.

$('.follow.button') .api({ onResponse: function(response) { // make some adjustments to response return response; }, successTest: function(response) { // test whether a JSON response is valid return response.success || false; }, onComplete: function(response) { // always called after XHR complete }, onSuccess: function(response) { // valid response and response.success = true }, onFailure: function(response) { // request failed, or valid response but response.success = false }, onError: function(errorMessage) { // invalid response }, onAbort: function(errorMessage) { // navigated to a new page, CORS issue, or user canceled request } }) ;

Determining JSON Success

API has special success conditions for JSON responses. Instead of providing success and failure callbacks based on the HTTP response of the request, a request is considered successful only if the server's response tells you the action was successful. The response is passed to a validation test successTest which can be used to check the JSON for a valid response.

For example, you might expect all successful JSON responses to return a top level property signifying the success of the response:

You can use the onResponse callback to modify a server's response by returning a new translated response value before it is parsed by a success test.
{ "success": true, "message": "We've retrieved your data from the server" "data": { // payload here } }

You can specify a success test to check for this success value. This most likely will be set globally for all API requests.

$.fn.api.settings.successTest = function(response) { if(response && response.success) { return response.success; } return false; };

Modifying Response JSON

Since version 2.0, API includes an onResponse callback which lets you adjust a server's response before a response is validated, allowing you to transform your response before other callbacks fire. This is useful for situations where an API response cannot be modified, but you need the response to conform with a required JSON structure.

$('.ui.search') .search({ type : 'category', minCharacters : 3, apiSettings : { url : '//api.github.com/search/repositories?q={query}', onResponse : function(githubResponse) { var response = { results : {} } ; if(!githubResponse || !githubResponse.items) { return; } // translate GitHub API response to work with search $.each(githubResponse.items, function(index, item) { var language = item.language || 'Unknown', maxResults = 8 ; if(index >= maxResults) { return false; } // create new language category if(response.results[language] === undefined) { response.results[language] = { name : language, results : [] }; } // add result to category response.results[language].results.push({ title : item.name, description : item.description, url : item.html_url }); }); return response; } } }) ;

Controlling State

UI State

API will automatically add class names for loading and error. This will let you trigger different UI states automatically as an API call progresses.

If you need a different element than the triggering API element to receive state class names, you can specify a different selector using settings.stateContext.

Using stateContext allows you to easily do things like trigger a loading state on a form when a submit button is pressed.

States Included in API Module
State Description API event
loading Indicates a user needs to wait XHR has initialized
error Indicates an error has occurred XHR Request returns error (does not trigger onAbort caused by page change, or if successTest fails). Stays visible for settings.errorDuration
disabled prevents API action none

Text State

Initializing an API action with the state module gives you more granular control over UI states, like setting an activated or de-activated state and the ability to adjust text values for each state:

$('.follow.button') .api({ action: 'follow user' }) .state({ onActivate: function() { $(this).state('flash text'); }, text: { inactive : 'Follow', active : 'Followed', deactivate : 'Unfollow', flash : 'Added follower!' } }) ;
States Included in State Module
State Description Occurs on
inactive Default state
active Selected state Toggled on succesful API request
activate Explains activating action On hover if inactive
deactivate Explains deactivating action On hover if active
hover Explains interaction On hover in all states, overrides activate/deactivate
disabled Indicates element cannot be interacted Triggered programatically. Blocks API requests.
flash Text-only state used to display a temporary message Triggered programatically
success Indicates user action was a success Triggered programatically
warning Indicates there was an issue with a user action Triggered programatically

Advanced Use

Fulfilling Responses

Since version 2.0, API includes two new parameter response and responseAsync which allows you to specify a Javascript object or a function for returning an API response. (These were previously mockResponse and mockResponseAsync.)

$('.sync.mocked .button') .api({ response: { success: true } }) .state({ text: { inactive : 'Off', active : 'On' } }) ;
Off

Using Custom Backends

Using responseAsync you can specify a function which can execute your API request. This allows for you to use custom backends or wrappers outside of $.ajax for integrating API requests.

$('.async.mocked .button') .api({ responseAsync: function(settings, callback) { var response = { success: true }; // do any asynchronous task here setTimeout(function() { callback(response); }, 500); } }) .state({ text: { inactive : 'Off', active : 'On' } }) ;
Off

Behavior

All the following behaviors can be called using the syntax:

$('.your.element') .api('behavior name', argumentOne, argumentTwo) ;
Behavior Description
query Execute query using existing API settings
add url data(url, data) Adds data to existing templated url and returns full url string
get request Gets promise for current API request
abort Aborts current API request
reset Removes loading and error state from element
was cancelled Returns whether last request was cancelled
was failure Returns whether last request was failure
was successful Returns whether last request was successful
was complete Returns whether last request was completed
is disabled Returns whether element is disabled
is mocked Returns whether element response is mocked
is loading Returns whether element is loading
set loading Sets loading state to element
set error Sets error state to element
remove loading Removes loading state to element
remove error Removes error state to element
get event Gets event that API request will occur on
get url encoded value(value) Returns encodeURIComponent value only if value passsed is not already encoded
read cached response(url) Reads a locally cached response for a URL
write cached response(url, response) Writes a cached response for a URL
create cache Creates new cache, removing all locally cached URLs
destroy Removes API settings from the page and all events

API

AJAX

You can pass in any standard jQuery AJAX setting like timeout or contentType to API's settings and it will be automatically passed to the request's AJAX call.

API

Default Description
on auto When API event should occur
cache true Can be set to 'local' to cache successful returned AJAX responses when using a JSON API. This helps avoid server roundtrips when API endpoints will return the same results when accessed repeatedly. Setting to false, will add cache busting parameters to the URL.
stateContext this UI state will be applied to this element, defaults to triggering element.
encodeParameters true Whether to encode parameters with encodeURIComponent before adding into url string
defaultData true Whether to automatically include default data like {value} and {text}
serializeForm false Whether to serialize closest form and include in request
throttle 0 How long to wait when a request is made before triggering request, useful for rate limiting oninput
throttleFirstRequest true When set to false will not delay the first request made, when no others are queued
interruptRequests false Whether an API request can occur while another request is still pending
loadingDuration 0 Minimum duration to show loading indication
hideError auto The default auto will automatically remove error state after error duration, unless the element is a form
errorDuration 2000 Setting to true, will not remove error. Setting to a duration in milliseconds to show error state after request error.

Request Settings

Default Description Possible Values
action false Named API action for query, originally specified in $.fn.settings.api String or false
url false Templated URL for query, will override specified action String or false
urlData false Variables to use for replacement
response false Can be set to a Javascript object which will be returned automatically instead of requesting JSON from server {} or false
responseAsync(settings, callback) false When specified, this function can be used to retrieve content from a server and return it asynchronously instead of a standard AJAX call. The callback function should return the server response. function or false
mockResponse false Alias of response
mockResponseAsync false Alias of responseAsync
method get Method for transmitting request to server Any valid http method
dataType JSON Expected data type of response xml, json, jsonp, script, html, text
data {} POST/GET Data to Send with Request

Callbacks

Context Description
beforeSend(settings) initialized element Allows modifying settings before request, or cancelling request
beforeXHR(xhrObject) Allows modifying XHR object for request
onRequest(promise, xhr) state context Callback that occurs when request is made. Receives both the API success promise and the XHR request promise.
onResponse(response) state context Allows modifying the server's response before parsed by other callbacks to determine API event success
successTest(response) Determines whether completed JSON response should be treated as successful
onSuccess(response, element, xhr) state context Callback after successful response, JSON response must pass successTest
onComplete(response, element, xhr) state context Callback on request complete regardless of conditions
onFailure(response, element) state context Callback on failed response, or JSON response that fails successTest
onError(errorMessage, element, xhr) state context Callback on server error from returned status code, or XHR failure.
onAbort(errorMessage, element, xhr) state context Callback on abort caused by user clicking a link or manually cancelling request.

Module

These settings are native to all modules, and define how the component ties content to DOM attributes, and debugging settings for the module.

Default Description
name API Name used in log statements
namespace api Event namespace. Makes sure module teardown does not effect other events attached to an element.
regExp
regExp : { required: /\{\$*[A-z0-9]+\}/g, optional: /\{\/\$*[A-z0-9]+\}/g, }
Regular expressions used for template matching
selector
selector: { disabled : '.disabled', form : 'form' }
Selectors used to find parts of a module
className
className: { loading : 'loading', error : 'error' }
Class names used to determine element state
metadata
metadata: { action : 'action', url : 'url' }
Metadata used to store XHR and response promise
silent False Silences all console output including error messages, regardless of other debug settings.
debug false Debug output to console
performance true Show console.table output with performance metrics
verbose false Debug output includes all internal behaviors
errors
// errors error : { beforeSend : 'The before send function has aborted the request', error : 'There was an error with your request', exitConditions : 'API Request Aborted. Exit conditions met', JSONParse : 'JSON could not be parsed during error handling', legacyParameters : 'You are using legacy API success callback names', missingAction : 'API action used but no url was defined', missingSerialize : 'Required dependency jquery-serialize-object missing, using basic serialize', missingURL : 'No URL specified for API event', noReturnedValue : 'The beforeSend callback must return a settings object, beforeSend ignored.', parseError : 'There was an error parsing your request', requiredParameter : 'Missing a required URL parameter: ', statusMessage : 'Server gave an error: ', timeout : 'Your request timed out' }
================================================ FILE: server/documents/behaviors/form.html.eco ================================================ --- layout : 'default' css : 'form' standalone : true element : 'validation' elementType : 'behavior' title : 'Form Validation' description : 'A form validation behavior checks data against a set of criteria before passing it along to the server' type : 'UI Behavior' --- <%- @partial('header', { tabs: { usage: 'Usage', examples: 'Examples', settings: 'Settings'} }) %>

Usage

Specifying Validation Rules

Form validation requires passing in a validation object with the rules required to validate your form.

A validation object includes a list of form elements, and rules to validate each field against. Fields are matched by either the id, name, or data-validate property (in that order) matching the identifier specified in the settings object. Validation objects must use either shorthand or longhand exclusively.
$('.ui.form') .form({ fields: { name : 'empty', gender : 'empty', username : 'empty', password : ['minLength[6]', 'empty'], skills : ['minCount[2]', 'empty'], terms : 'checked' } }) ;
or
$('.ui.form') .form({ fields: { name: { identifier: 'name', rules: [ { type : 'empty', prompt : 'Please enter your name' } ] }, skills: { identifier: 'skills', rules: [ { type : 'minCount[2]', prompt : 'Please select at least two skills' } ] }, gender: { identifier: 'gender', rules: [ { type : 'empty', prompt : 'Please select a gender' } ] }, username: { identifier: 'username', rules: [ { type : 'empty', prompt : 'Please enter a username' } ] }, password: { identifier: 'password', rules: [ { type : 'empty', prompt : 'Please enter a password' }, { type : 'minLength[6]', prompt : 'Your password must be at least {ruleValue} characters' } ] }, terms: { identifier: 'terms', rules: [ { type : 'checked', prompt : 'You must agree to the terms and conditions' } ] } } }) ;

Tell Us About Yourself

Submit

Passing Parameters to Rules
New in 2.2.3

Typically rules that include a parameter are written minLength[2] with the value being passed in as brackets.

If passing in properties as a string is not ideal, or if you are pulling values from another javascript variable, it might make sense to consider using value to pass in the rule value.

$('.ui.form').form({ fields: { color: { identifier: 'color', rules: [{ type: 'regExp', value: /rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/i, }] } } });
Submit

Customizing Prompts

Form validation includes default error prompts for most cases, however these can be quite generic. To specify custom personalized values for a validation prompt use the prompt property with a rule.

Starting in
2.3.1
you can specify prompts as a function. This may be useful when returning validation for fields that require dynamic validation messages.
You can set default messages for each validation rule type by modifying $fn.form.settings.prompt

Prompt also supports custom templating with the following values replaced

{name} The current text of a field's label, or if no label available its placeholder text
{identifier} The identifier used to match the field
{value} The current field value
{ruleValue} The value passed to a rule, for example minLength[100] would set this value to 100
$('.ui.form') .form({ fields: { field1: { rules: [ { type : 'empty' } ] }, field2: { rules: [ { type : 'exactly[dog]', prompt : '{name} is set to "{value}" that is totally wrong. It should be {ruleValue}' } ] }, field3: { rules: [ { type : 'exactly[cat]', prompt : function(value) { if(value == 'dog') { return 'I told you to put cat, not dog!'; } return 'That is not cat'; } } ] }, } }) ;
Submit

Matching Fields

By default the property name used in the validation object will match against the id, name, or data-validate property of each input to find the corresponding field to match validation rules against.

If you need to specify a different identifier you can use the identifier property on each validation rule

$('.ui.form') .form({ fields: { name: { identifier : 'special-name', rules: [ { type : 'empty' } ] } } }) ;
Submit

Validating Programmatically
Updated in 2.2.8

Form validation provides additional behaviors to programmatically trigger validation for either the form or an individual field, and check validation on the form or individual fields.

Please see the behaviors section for an explanation on syntax.

validate form Validates entire form and displays errors if necessary
is valid Returns whether a form is valid
is valid(fieldName) Returns whether a field in a form is valid (does not update UI)
validate field(fieldName) Validates a particular field and displays errors if necessary
$('.ui.form') .form({ fields: { email: 'empty', name: 'empty' } }) ; if( $('.ui.form').form('is valid', 'email')) { // email is valid } if( $('.ui.form').form('is valid')) { // form is valid (both email and name) }

Rules

Validation Rules

Validation rules are a set of conditions required to validate a field

Validation rules are found in $.fn.form.settings.rules, to add new global validation rules, modify $.fn.form.settings.rules to include your function.
To pass parameters to a rule, use bracket notation in your settings object. For example type: 'not[dog]'

Empty

empty A field is empty
checked A checkbox field is checked

Content Type

email A field is a valid email address
url A field is a url
integer A field is an integer value, or matches an integer range integer or integer[1..10]
decimal A field must be a decimal number
number A field is any number decimal or non-decimal
regExp[expression] Matches against a regular expression, when using bracketed notation RegExp values must be escaped. regExp[/^[a-z0-9_-]{3,16}$/gi]]
Or
regExp[/^[a-z0-9_-]{3,16}$/]]

Payment

creditCard A field is a valid credit card creditCard
creditCard[types] A field matches a specified array of card types creditCard[visa,mastercard,unionpay]

Specified Content

contains A field contains text (case insensitive) contains[foo]
containsExactly A field contains text (case sensitive) containsExactly[foo]
doesntContain A field doesn't contain text (case insensitive) doesntContain[foo]
doesntContainExactly A field doesn't contain text (case sensitive) doesntContainExactly[foo]
is A field is a value (case insensitive) is[foo]
isExactly A field is a value (case-sensitive) isExactly[foo]
not A field is not a value (case insensitive) not[foo]
notExactly A field is not a value (case sensitive) notExactly[foo]

Length

minLength A field is less than a min length minLength[5]
exactLength A field is exactly length exactLength[16]
maxLength A field is less than a max length maxLength[50]

Matching Fields

match A field should match the value of another validation field, for example to confirm passwords match[password]
different A field should be different than another specified field different[choice]

Selection Count

minCount A multiple select field contains at minimum (count) selections minCount[count]
exactCount A multiple select field contains exactly (count) selections exactCount[count]
maxCount A multiple select field contains at maximum (count) selections maxCount[count]

Adding Custom Rules

You can extend form validation to include your own rules. Keep in mind these will need to be executed synchronously.

// some arbitrary business-logic window.user = { name : 'Simon', adminLevel : 1 }; // custom form validation rule $.fn.form.settings.rules.adminLevel = function(value, adminLevel) { return (window.user.adminLevel >= adminLevel) }; $('.ui.form') .form({ fields: { dog: { identifier: 'dog', rules: [ { type: 'adminLevel[2]', prompt: 'You must be at least a level-2 admin to add a dog' } ] } } }) ;

Let's go ahead and get you signed up.

Add Dog

Built-in Events

Form will automatically attach events to specially labeled form fields

  • Fields will blur on escape key press
  • Fields will submit form on enter
  • Submit events will be attached to click on any element inside the form with class submit
  • Reset events will be attached to click on any element inside the form with class reset
  • Clear events will be attached to click on any element inside the form with class clear
Submit
Reset
Clear

Manipulating Forms

Reset / Clear Fields

Calling $('form').form('reset'), or clicking any reset element will return all form values to their default value. This is the value the form fields were set to when the page loaded.

Calling $('form').form('clear') will remove all values from form fields and reset dropdowns to placeholder text

Form reset works by caching default values on page load. For this to work correctly any form that uses reset will need to initialize on page load.
Reset and clear will modify all form fields, not just those which have validation rules
Gender
Male
Female
Submit
Reset
Clear

Writing Values

Form includes behaviors for reading from and writing to form fields.

$('.writing.example form') // set one value .form('set value', 'name', 'Jack') // set several values .form('set values', { name : 'Jack', gender : 'male', colors : ['red', 'grey'], username : 'jlukic', password : 'youdliketoknow', terms : true }) ;
Gender
Male
Female
Submit
Clear

Getting Values

You can also read values from form fields using get value and get values

Although get values allows you to use any matching identifier, returned values will always use the corresponding name attribute of the element.
var $form = $('.get.example form'), // get one value colors = $form.form('get value', 'colors'), // get list of values fields = $form.form('get values', ['name', 'colors']), // get all values allFields = $form.form('get values') ; console.log(colors); console.log(fields); console.log(allFields);
Gender
Male
Female
Submit

Rule Examples

Empty

The following shows examples of validating different types of empty or unchecked content.

Submit
$('.field.example form') .form({ on: 'blur', fields: { empty: { identifier : 'empty', rules: [ { type : 'empty', prompt : 'Please enter a value' } ] }, dropdown: { identifier : 'dropdown', rules: [ { type : 'empty', prompt : 'Please select a dropdown value' } ] }, checkbox: { identifier : 'checkbox', rules: [ { type : 'checked', prompt : 'Please check the checkbox' } ] } } }) ;

Content Type

Inputs can match against common content types, or your own custom regular expressions.

Submit
$('.type.example form') .form({ on: 'blur', fields: { integer: { identifier : 'integer', rules: [ { type : 'integer[1..100]', prompt : 'Please enter an integer value' } ] }, decimal: { identifier : 'decimal', rules: [ { type : 'decimal', prompt : 'Please enter a valid decimal' } ] }, number: { identifier : 'number', rules: [ { type : 'number', prompt : 'Please enter a valid number' } ] }, email: { identifier : 'email', rules: [ { type : 'email', prompt : 'Please enter a valid e-mail' } ] }, url: { identifier : 'url', rules: [ { type : 'url', prompt : 'Please enter a url' } ] }, regex: { identifier : 'regex', rules: [ { type : 'regExp[/^[a-z0-9_-]{4,16}$/]', prompt : 'Please enter a 4-16 letter username' } ] } } }) ;

Payment

Inputs can validate credit cards and other payment types.

Card Name Validation Name Test Card Number
Visa visa 4565340519181845
American Express amex 378282246310005
Mastercard mastercard 5200828282828210
Discover discover 6011111111111117
Unionpay unionpay 6240008631401148
JCB jcb 3530111333300000
Diner's Club dinersClub 38520000023237
Maestro maestro 6799990100000000019
Laser laser 630490017740292441
Visa Electron visaElectron 4917300800000000
Submit
$('.payment.example form') .form({ on: 'blur', fields: { card: { identifier : 'card', rules: [ { type : 'creditCard', prompt : 'Please enter a valid credit card' } ] }, exactCard: { identifier : 'exact-card', rules: [ { type : 'creditCard[visa,amex]', prompt : 'Please enter a visa or amex card' } ] } } }) ;

Matching Fields

Fields can be required to match, or not match other fields. You may consider using this with optional fields.

Submit
$('.match.example form') .form({ on: 'blur', fields: { match: { identifier : 'match2', rules: [ { type : 'match[match1]', prompt : 'Please put the same value in both fields' } ] }, different: { identifier : 'different2', rules: [ { type : 'different[different1]', prompt : 'Please put different values for each field' } ] } } }) ;

Length

Inputs can match against length of content

Submit
$('.length.example form') .form({ on: 'blur', fields: { minLength: { identifier : 'minLength', rules: [ { type : 'minLength[100]', prompt : 'Please enter at least 100 characters' } ] }, exactLength: { identifier : 'exactLength', rules: [ { type : 'exactLength[6]', prompt : 'Please enter exactly 6 characters' } ] }, maxLength: { identifier : 'maxLength', rules: [ { type : 'maxLength[100]', prompt : 'Please enter at most 100 characters' } ] }, } }) ;

Specified Content

Validation rules can specify content that should or should not appear inside an input

Submit
$('.content.example form') .form({ on: 'blur', fields: { is: { identifier : 'is', rules: [ { type : 'is[dog]', prompt : 'Please enter exactly "dog"' } ] }, isExactly: { identifier : 'isExactly', rules: [ { type : 'isExactly[dog]', prompt : 'Please enter exactly "dog"' } ] }, not: { identifier : 'not', rules: [ { type : 'not[dog]', prompt : 'Please enter a value, but not "dog"' } ] }, notExactly: { identifier : 'notExactly', rules: [ { type : 'notExactly[dog]', prompt : 'Please enter a value, but not exactly "dog"' } ] }, contains: { identifier : 'contains', rules: [ { type : 'contains[dog]', prompt : 'Please enter a value containing "dog"' } ] }, containsExactly: { identifier : 'containsExactly', rules: [ { type : 'containsExactly[dog]', prompt : 'Please enter a value containing exactly "dog"' } ] }, doesntContain: { identifier : 'doesntContain', rules: [ { type : 'doesntContain[dog]', prompt : 'Please enter a value not containing "dog"' } ] }, doesntContainExactly: { identifier : 'doesntContainExactly', rules: [ { type : 'doesntContainExactly[dog]', prompt : 'Please enter a value not containing exactly "dog"' } ] } } }) ;

Selection Count

Multiple selects can specify how many options should be allowed.

Submit
$('.multi.example form') .form({ on: 'blur', fields: { minCount: { identifier : 'minCount', rules: [ { type : 'minCount[2]', prompt : 'Please select at least 2 values' } ] }, maxCount: { identifier : 'maxCount', rules: [ { type : 'maxCount[2]', prompt : 'Please select a max of 2 values' } ] }, exactCount: { identifier : 'exactCount', rules: [ { type : 'exactCount[2]', prompt : 'Please select 2 values' } ] } } })

Form Examples

Adding Rules Programmatically
New in 2.2.11

You can use the special behaviors add field/rule, remove rule and remove field to dynamically add or remove fields or rules.

Adding Multiple Rules and Complex Rules
You can specify shorthand or full rule objects when adding rules. You can also specifiy fields as an array to modify multiple fields..
// lets only validate username to start $('.add.example .ui.form') .form({ username: ['empty', 'minLength[5]'] }) ;
// lets toggle some validation based on button $('.add.example .ui.positive.button') .on('click', function() { $('.add.example .ui.form') // adding longform .form('add rule', 'gender', { rules: [ { type : 'empty', prompt : 'Entering your gender is necessary' } ] }) // adding shorthand .form('add rule', 'password', ['empty', 'minLength[5]']) ; }) ;
$('.add.example .ui.negative.button') .on('click', function() { $('.add.example .ui.form') // removing multiple at once .form('remove fields', ['gender', 'password']) ; }) ;
Add Additional Validation
Remove Additional Validation
Gender
Male
Female
Submit
Clear

Validating Dropdowns

Dropdowns can also be validated like other form fields. Simply match the validation rule to the input or select associated with the dropdown

$('.ui.dropdown') .dropdown() ; $('.ui.form') .form({ fields: { gender: 'empty', name: 'empty' } }) ;
Gender
Male
Female
Submit

Using Server Name Attributes

Sometimes an integration requires you to use a specific value for name, or id. In these cases, you can match a form field using the data-validate property.

$('.ui.form') .form( fields: { name: 'empty' } }) ;
Submit

Dependent Fields
New in 2.2

You can specify validation fields to only be used when other fields are present. Simply add depends: 'id' with the ID of the field that must be non-blank for this rule to evaluate.

$('.ui.form') .form({ fields: { yearsPracticed: { identifier : 'yearsPracticed', depends : 'isDoctor', rules : [ { type : 'empty', prompt : 'Please enter the number of years you have been a doctor' } ] } } }) ;
Submit

Optional Fields

Adding the parameter optional: true will only add your validation rules when the field is not empty.

$('.ui.form') .form({ fields: { email: { identifier : 'email', rules: [ { type : 'email', prompt : 'Please enter a valid e-mail' } ] }, ccEmail: { identifier : 'cc-email', optional : true, rules: [ { type : 'email', prompt : 'Please enter a valid second e-mail' } ] } } }) ;

Your tickets are all ready to print. Where would you like to send a receipt?

Submit

Setting Site Defaults

You can specify site wide validation settings by modifying $.fn.form.settings.defaults that will apply on any form validation if the field appears in the form.

$.fn.form.settings.defaults = { email: { identifier : 'email', rules: [ { type : 'email', prompt : 'Please enter a valid e-mail' } ] }, // this form doesn't have a cc email but it will not produce an error ccEmail: { identifier : 'cc-email', optional : true, rules: [ { type : 'email', prompt : 'Please enter a valid second e-mail' } ] }, };

Your tickets are all ready to print. Where would you like to send a receipt?

Submit

Displaying Error Messages

Forms that contain a ui message error block will automatically be filled in with form validation information.

The template for error messages can be modified by adjusting settings.template.error

Let's go ahead and get you signed up.

Submit

Validating on Blur and other Events

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.

This example also uses a different validation event. Each element will be validated on input blur instead of the default form submit.
$('.ui.form') .form({ fields : validationRules, inline : true, on : 'blur' }) ;

Let's go ahead and get you signed up.

Submit

Creating Custom Validation

You can use multiple arbitrary rules to validate a form

$('.ui.form') .form({ fields: { dog: { identifier: 'dog', rules: [ { type: 'empty', prompt: 'You must have a dog to add' }, { type: 'contains[fluffy]', prompt: 'I only want you to add fluffy dogs!' }, { type: 'not[mean]', prompt: 'Why would you add a mean dog to the list?' } ] } } }) ;

Let's go ahead and get you signed up.

Add Dog

Behaviors

All the following behaviors can be called using the syntax
$('.foo').form('behavior name', argumentOne, argumentTwo)
submit Submits selected form
is valid Returns true/false whether a form passes its validation rules
add rule(field, rules)
New in 2.2.11
 Adds rule to existing rules for field, also aliased as add field
add fields(fields)
New in 2.2.11
 Adds fields object to existing fields
remove rule(field, rules)
New in 2.2.11
 Removes specific rule from field leaving other rules
remove field(field)
New in 2.2.11
 Remove all validation for a field
add prompt(identifier, errors) Adds error prompt to the field with the given identifier
is valid(fieldName) Returns true/false whether a field passes its validation rules
validate form Validates form, updates UI, and calls onSuccess or onFailure
validate field(fieldName) Validates field, updates UI, and calls onSuccess or onFailure
get field(id) Returns element with matching name, id, or data-validate metadata to ID
get value(id) Returns value of element with id
get values(ids) Returns object of element values that match array of ids. If no IDS are passed will return all fields
set value(id) Sets value of element with id
set values(values) Sets key/value pairs from passed values object to matching ids
get validation(element) Returns validation rules for a given jQuery-referenced input field
has field(identifier) Returns whether a field exists
add errors(errors) Adds errors to form, given an array errors
add prompt(id, prompt) Adds a custom user prompt for a given element with id

Settings

Form Settings

Form settings modify the form validation behavior

Setting Default Description
keyboardShortcuts true Adds keyboard shortcuts for enter and escape keys to submit form and blur fields respectively
on submit Event used to trigger validation. Can be either submit, blur or change.
revalidate true If set to true will revalidate fields with errors on input change
delay true Delay from last typed letter to validate a field when using on: change or when revalidating a field.
inline false Adds inline error on field validation error
transition scale Named transition to use when animating validation errors. Fade and slide down are available without including ui transitions
duration 150 Animation speed for inline prompt

Form Prompts

Settings to modify default form prompts

Setting Default
text
text: { unspecifiedRule : 'Please enter a valid value', unspecifiedField : 'This field' }
prompt
prompt: { empty : '{name} must have a value', checked : '{name} must be checked', email : '{name} must be a valid e-mail', url : '{name} must be a valid url', regExp : '{name} is not formatted correctly', integer : '{name} must be an integer', decimal : '{name} must be a decimal number', number : '{name} must be set to a number', is : '{name} must be \'{ruleValue}\'', isExactly : '{name} must be exactly \'{ruleValue}\'', not : '{name} cannot be set to \'{ruleValue}\'', notExactly : '{name} cannot be set to exactly \'{ruleValue}\'', contain : '{name} cannot contain \'{ruleValue}\'', containExactly : '{name} cannot contain exactly \'{ruleValue}\'', doesntContain : '{name} must contain \'{ruleValue}\'', doesntContainExactly : '{name} must contain exactly \'{ruleValue}\'', minLength : '{name} must be at least {ruleValue} characters', length : '{name} must be at least {ruleValue} characters', exactLength : '{name} must be exactly {ruleValue} characters', maxLength : '{name} cannot be longer than {ruleValue} characters', match : '{name} must match {ruleValue} field', different : '{name} must have a different value than {ruleValue} field', creditCard : '{name} must be a valid credit card number', minCount : '{name} must have at least {ruleValue} choices', exactCount : '{name} must have exactly {ruleValue} choices', maxCount : '{name} must have {ruleValue} or less choices' }

Callbacks

Callbacks specify a function to occur after a specific behavior.

Setting Context Description
onValid field Callback on each valid field
onInvalid field Callback on each invalid field
onSuccess(event, fields) form Callback if a form is all valid
onFailure(formErrors, fields) form Callback if any form field is invalid

Templates

Templates are used to construct elements

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.
Template Arguments Description
error Errors (Array) Constructs the contents of an error message
prompt Errors (Array) Constructs an element to prompt the user to an invalid field

DOM Settings

DOM settings specify how this module should interface with the DOM

Setting Default Description
namespace form Event namespace. Makes sure module teardown does not effect other events attached to an element.
selector
selector : { message : '.error.message', field : 'input, textarea, select', group : '.field', input : 'input', prompt : '.prompt', submit : '.submit' }
Selectors used to match functionality to DOM
metadata
metadata : { validate: 'validate' },
HTML5 metadata attributes
className
className : { active : 'active', placeholder : 'default', disabled : 'disabled', visible : 'visible' }
Class names used to attach style to state

Debug Settings

Debug settings controls debug output to the console

Setting Default Description
name Form Name used in debug logs
debug False Provides standard debug output to console
performance True Provides standard debug output to console
verbose False Provides ancillary debug output to console
errors
errors : { method : 'The method you called is not defined.' }
================================================ FILE: server/documents/behaviors/state.html.eco ================================================ --- layout : 'default' css : 'state' standalone : true element : 'State' elementType : 'draft' title : 'State' description : 'State allows elements to trigger actions on a server' type : 'Draft' --- <%- @partial('header', { tabs: { overview: 'Overview', usage: 'Usage', behaviors: 'Behaviors', settings: 'Settings' } }) %>

Activate Elements Programmatically

State is designed to make the process of integrating data sources to UI components seamless, tying State request state to UI states automatically.

For example adding an State behavior to an input will occur oninput, while a button, will query the server onclick.

Click Me
Disabled

Behavior

All the following behaviors can be called using the syntax:

$('.your.element') .state('behavior name', argumentOne, argumentTwo) ;
Behavior Description
query Execute query using existing State settings
add url data(url, data) Adds data to existing templated url and returns full url string
get request Gets promise for current State request
abort Aborts current State request
reset Removes loading and error state from element
was cancelled Returns whether last request was cancelled
was failure Returns whether last request was failure
was successful Returns whether last request was successful
was complete Returns whether last request was completed
is disabled Returns whether element is disabled
is mocked Returns whether element response is mocked
is loading Returns whether element is loading
set loading Sets loading state to element
set error Sets error state to element
remove loading Removes loading state to element
remove error Removes error state to element
get event Gets event that State request will occur on
get url encoded value(value) Returns encodeURIComponent value only if value passsed is not already encoded
read cached response(url) Reads a locally cached response for a URL
write cached response(url, response) Writes a cached response for a URL
create cache Creates new cache, removing all locally cached URLs
destroy Removes State settings from the page and all events

State

Behavior

Default Description
automatic true Whether possible states should be determined automatically based on type of UI
sync false When set to true and state is used on multiple elements, state will be synced across all bound elements.
flashDuration 1000 Default duration to show text when using flash text.
context false When set to a selector, will use a delegated pattern to bind events from this element.

Request Settings

Default Description Possible Values
action false Named State action for query, originally specified in $.fn.settings.state String or false
url false Templated URL for query, will override specified action String or false
urlData false Variables to use for replacement
mockResponse false Can be set to a javascript object which will be returned automatically instead of requesting JSON from server {} or false
mockResponseAsync(settings, callback) false When specified, this function can be used to retrieve content from a server and return it asynchronously instead of a standard AJAX call. The callback function should return the server response. function or false
method get Method for transmitting request to server post, get
dataType JSON Expected data type of response xml, json, jsonp, script, html, text
data {} POST/GET Data to Send with Request

Callbacks

Context Description
beforeSend(settings) initialized element Allows modifying settings before request, or cancelling request
beforeXHR(xhrObject) Allows modifying XHR object for request
onRequest(promise, xhr) state context Callback that occurs when request is made. Receives both the state success promise and the xhr request promise.
onResponse(response) state context Allows modifying the server's response before parsed by other callbacks to determine State event success
successTest(response) Determines whether completed JSON response should be treated as successful
onSuccess(response, element, xhr) state context Callback after successful response, JSON response must pass successTest
onComplete(response, element, xhr) state context Callback on request complete regardless of conditions
onFailure(response, element) state context Callback on failed response, or JSON response that fails successTest
onError(errorMessage, element, xhr) state context Callback on server error from returned status code, or XHR failure.
onAbort(errorMessage, element, xhr) state context Callback on abort caused by user clicking a link or manually cancelling request.

Module

These settings are native to all modules, and define how the component ties content to DOM attributes, and debugging settings for the module.

Default Description
name State Name used in log statements
namespace state Event namespace. Makes sure module teardown does not effect other events attached to an element.
regExp
regExp : { required: /\{\$*[A-z0-9]+\}/g, optional: /\{\/\$*[A-z0-9]+\}/g, }
Regular expressions used for template matching
selector
selector: { disabled : '.disabled', form : 'form' }
Selectors used to find parts of a module
className
className: { loading : 'loading', error : 'error' }
Class names used to determine element state
metadata
metadata: { action : 'action', url : 'url' }
Metadata used to store xhr and response promise
silent False Silences all console output including error messages, regardless of other debug settings.
debug false Debug output to console
performance true Show console.table output with performance metrics
verbose false Debug output includes all internal behaviors
errors
// errors error : { beforeSend : 'The before send function has aborted the request', error : 'There was an error with your request', exitConditions : 'State Request Aborted. Exit conditions met', JSONParse : 'JSON could not be parsed during error handling', legacyParameters : 'You are using legacy State success callback names', missingAction : 'State action used but no url was defined', missingSerialize : 'Required dependency jquery-serialize-object missing, using basic serialize', missingURL : 'No URL specified for state event', noReturnedValue : 'The beforeSend callback must return a settings object, beforeSend ignored.', parseError : 'There was an error parsing your request', requiredParameter : 'Missing a required URL parameter: ', statusMessage : 'Server gave an error: ', timeout : 'Your request timed out' }
================================================ FILE: server/documents/behaviors/visibility.html.eco ================================================ --- layout : 'default' css : 'visibility minimal' element : 'visibility' elementType : 'behavior' standalone : true title : 'Visibility' description : 'Visibility provides a set of callbacks for when a content appears in the viewport' type : 'UI Behavior' --- <%- @partial('header', { tabs: { introduction: 'Introduction', usage: 'Usage', examples: 'Examples', settings: 'Settings' } }) %>

Introduction

Visibility provides a set of callbacks that can be attached to any element and trigger when a specific visibility event occurs.

There are a variety of uses for attaching events to visibility. Here are some of the more common ones.

Infinite Scroll
You want to start loading more content into a container when a user is partially finished scrolling through the content
Lazy Loading Images
You want to start loading an image just before it is visible to a user
Reactive Content
You want an element to change based on how far a user has scrolled
Sticky Headers
You want an element to fix itself to the viewport when it is passed, and return to its original static position afterwards
Event Tracking
You want to attach analytics events that match a users engagement with content, for example, to log to Google Analytics when a blog post is 30% read.

Usage

How To Use

Visibility provides a set of callbacks which can be used to attach events to an element's position on screen.

Each scroll change will trigger an animation frame request that will fire callbacks for an element.

The following examples use sticky columns to help display data alongside each example. Please consult the sticky documentation for usage examples.
// some example callbacks $('.demo.segment') .visibility({ onTopVisible: function(calculations) { // top is on screen }, onTopPassed: function(calculations) { // top of element passed }, onUpdate: function(calculations) { // do something whenever calculations adjust updateTable(calculations); } }) ;
Calculation Value
pixelsPassed
percentagePassed
fits
width
height
onScreen
offScreen
passing
topVisible
bottomVisible
topPassed
bottomPassed

Changing Callback Frequency

Visibility's default settings will only have each callback occur the first time which the conditions are met. On subsequent occurences the event will not fire.

Setting continuous: true will make the callback fire anytime the callback conditions are met. So for example if you set a "top visible" callback, this callback will fire with each change in scroll when the top is visible on the page.

Setting once: false will make the callback fire each time a callback becomes true. So, using the same "top visible" example, the callback will fire each time the top of an element is passed. Even if you scroll back up and pass the element again

Clear
Event Log 

              

            

          

        

      

    


    
Callbacks


    
Callbacks are separated into two categories. Standard events will occur the first animation frame where the conditions evaluated to true.


    

      
Standard Events

      

        
          

            Event
            Occurs
            Pseudocode
          

        
        
          

            
              onOnScreen
            
            
              Any part of element is in current scroll viewport
            
            
              
screen.bottom >= element.top && screen.bottom <= element.bottom

            		
          

          

            
              onOffScreen
            
            
              No part of element is in current scroll viewport
            
            
              
screen.bottom <= element.top || screen.top >= element.bottom

            		
          

          

            
              onTopVisible
            
            
              Element's top edge has passed bottom of screen
            
            
              
screen.bottom >= element.top

            		
          

          

            
              onTopPassed
            
            
              Element's top edge has passed top of the screen
            
            
              
screen.top >= element.top

            		
          

          

            
              onBottomVisible
            
            
              Element's bottom edge has passed bottom of screen
            
            
              
screen.bottom >= element.top

            		
          

          

            
              onPassing
            
            
              Any part of an element is visible on screen
            
            
              
screen.bottom >= element.top && screen.top < element.bottom

            		
          

          

            
              onBottomPassed
            
            
              Element's bottom edge has passed top of screen
            
            
              
screen.top >= element.bottom

            		
          

        
      

    

    

      
Grouped Events

      
onPassed allows you to specify a collection of callbacks that occur after different percentages or pixels of an element are passed

      

        
          

            Event
            Occurs
            Example
          

        
        
          

            
              onPassed {}
            
            
              A distance from the top of an element's content has been passed, either as a percentage or in pixels
            
            
              

              onPassed: {
                40: function() {
                  // do something when having passed 40 pixels.
                },
                '80%': function() {
                  // do something at 80%
                }
              }
              

            		
          

        
      

    


    


      
Reverse Events

      
Reverse events will occur under the same conditions but as a user scrolls back up the page.

      

        
          

            Event
            Occurs
            Pseudocode
          

        
        
          

            
              onTopVisibleReverse
            
            
              Element's top edge has not passed bottom of screen
            
            
              
screen.bottom >= element.top

            		
          

          

            
              onTopPassedReverse
            
            
              Element's top edge has not passed top of the screen
            
            
              
screen.top >= element.top

            		
          

          

            
              onBottomVisibleReverse
            
            
              Element's bottom edge has not passed bottom of screen
            
            
              
screen.bottom >= element.top

            		
          

          

            
              onPassingReverse
            
            
              Element's top has not passed top of screen but bottom has
            
            
              
screen.bottom >= element.top && screen.top < element.bottom

            		
          

          

            
              onBottomPassedReverse
            
            
              Element's bottom edge has not passed top of screen
            
            
              
screen.top >= element.bottom

            		
          

        
      

    


    
Behaviors


    


      
Visibility includes several useful behaviors for interacting with the component

      

        
          

            Behavior
            Usage
          

        
        
          

            
              disable callbacks
            
            
              Disable callbacks temporarily. This is useful if you need to adjust scroll position and do not want to trigger callbacks during the position change.
            
          

          

            
              enable callbacks
            
            
              Re-enable callbacks
            
          

          

            
              is on screen
            
            
              Returns whether element is on screen
            
          

          

            
              is off screen
            
            
              Returns whether element is off screen
            
          

          

            
              get pixels passed
            
            
              Returns number of pixels passed in current element from top of element
            
          

          

            
              get element calculations
            
            
              Returns element calculations as object
            
          

          

            
              get screen calculations
            
            
              Returns screen calculations as object
            
          

          

            
              get screen size
            
            
              Returns screen size as object
            
          

        
      

    



  


  


    
Examples


    

      
Infinite Scroll

      
As an alternative to pagination you can use onBottomVisible to load content automatically when the bottom of a container is reached.


      

        $('.infinite.example .demo.segment')
          .visibility({
            once: false,
            // update size when new content loads
            observeChanges: true,
            // load content on bottom edge visible
            onBottomVisible: function() {
              // loads a max of 5 times
              window.loadFakeContent();
            }
          })
        ;
      


      

        
Infinite Scroll Example

        
        

        
        

        
        

        
        

        

          Adding more content...
        

      

    


    

      
Lazy Loading Images

      
Visibility includes several shortcuts for setting up common visibility events. Using the setting type: 'image' will automatically attach events to an images topVisible to load the contents of data-src as src.


      
You can specify a placeholder image as the current src to make sure content doesn't jump when an image loads, or you can specify no placeholder and have the image appear.


      
By default images will appear without animation, however you can also specify a named transition, and a duration that should be used for animating the image into view


      

        $('.demo.items .image img')
          .visibility({
            type       : 'image',
            transition : 'fade in',
            duration   : 1000
          })
        ;
      

      

        

          

            
          

          

            
Elliot Fu

            
            
Add Friend

            
View 

          

        

        

          

            
          

          

            
Helen Troy

            
            
Add Friend

            
View 

          

        

        

          

            
          

          

            
Jenny Hess

            
            
Add Friend

            
View 

          

        

        

          

            
          

          

            
Veronika Ossi

            
            
Add Friend

            
View 

          

        

        

          

            
          

          

            
Stevie

            
            
Add Friend

            
View 

          

        

        

          

            
          

          

            
Steve Jobes

            
            
Add Friend

            
View 

          

        

        

          

            
          

          

            
Ade

            
            
Add Friend

            
View 

          

        

        

          

            
          

          

            
Chris

            
            
Add Friend

            
View 

          

        

        

          

            
          

          

            
Joe Henderson

            
            
Add Friend

            
View 

          

        

        

          

            
          

          

            
Laura

            
            
Add Friend

            
View 

          

        

      

    

    

      
Gradual Changes

      
Each callback receives all calculated values as its first parameter, allowing you to adjust an element using 


      

        $('.changing.example .demo.segment')
          .visibility({
            once       : false,
            continuous : true,
            onPassing  : function(calculations) {
              var newColor = 'rgba(0, 0, 0, ' + calculations.percentagePassed +')';
              $(this)
                .css('background-color', newColor)
              ;
            }
          })
        ;
      

      

    



    

      
Fixing Content To Viewport

      
Visibility provides a lightweight method for sticking content to a page's viewport. Using type: fixed will add the class fixed after an element is passed in the viewport. Using this class name you can assign special layout conditions to an item once it is passed.

      
Using the special visibility type fixed will automatically create a placeholder element, which will be shown or hidden after an element is passed, to ensure that the page's position does not change when the element is "fixed" and removed from normal layout flow.

      
In this example, when an element is passed we fix it to the viewport, add a background color and box shadow so that it can float above other content. We also show an adjacent placeholder element which makes sure that content stays offset the same as if the menu was still in content flow

      

        You may need to adjust your fixed content's z-index to ensure it appears above other page content.
      

      

        $('.overlay.example .overlay')
          .visibility({
            type   : 'fixed',
            offset : 15 // give some space from top of screen
          })
        ;
      

      

      .visibility.example .overlay {
        background-color: #FFFFFF;
        padding: 0em;
        box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
        transition: all 0.5s ease;
        background: transparent;
      }
      /* change style */
      .visibility.example .fixed.overlay {
        position: fixed;
        padding: 1em;
        box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
      }
      

      

        

          
             Menu
          
          Option 1
          Option 2
          Option 3
        

      

      

      
      

      
      

      
      

      
      

      
      

      
      

      
      

      
      

      
    

  



  


    
Settings


    


      

        Functionality
        
Settings to configure visibility behavior

      

      

        
          
Setting
          Default
          Description
        

        
          

            once
            true
            When set to false a callback will occur each time an element passes the threshold for a condition.
          

          

            continuous
            false
            When set to true a callback will occur anytime an element passes a condition  not just immediately after the threshold is met.
          

          

            type
            false
            Set to image to load images when on screen. Set to fixed to add class name fixed when passed.
          

          

            initialCheck
            true
            Whether visibility conditions should be checked immediately on init
          

          

            context
            window
            The scroll context visibility should use.
          

          

            refreshOnLoad
            true
            Whether visibility conditions should be checked on window load. This ensures that after images load content positions will be updated correctly.
          

          

            refreshOnResize
            true
            Whether visibility conditions should be checked on window resize. Useful when content resizes causes continuous changes in position
          

          

            checkOnRefresh
            true
            Whether visibility conditions should be checked on calls to refresh. These calls can be triggered from either resize, load or manually calling $('.foo').visibility('refresh')
          

          

            zIndex
            1
            Specify a z-index when using type: 'fixed'. 
New in 2.2

          

          

            offset
            0
            Value that context scrollTop should be adjusted in pixels. Useful for making content appear below content fixed to the page.
          

          

            includeMargin
            false
            Whether element calculations should include its margin
          

          

            throttle
            false
            When set to an integer, scroll position will be debounced using this ms value. false will debounce with requestAnimationFrame.
          

          

            observeChanges
            true
            Whether to automatically refresh content when changes are made to the element's DOM subtree 
          

          

            transition
            false
            When using type: image allows you to specify transition when showing a loaded image
          

          

            duration
            1000
            When using type: image allows you to specify transition duration
          

        
      

    



    


      
Visibility Callbacks

      
Callbacks that occur on named visibility events


      

        
          

            
            Context
            Description
          

        
        
          

            onTopVisible
            $element
            Element's top edge has passed bottom of screen
          

          

            onTopPassed
            $element
            Element's top edge has passed top of the screen
          

          

            onBottomVisible
            $element
            Element's bottom edge has passed bottom of screen
          

          

            onPassing
            $element
            Any part of an element is visible on screen
            
          

          

            onBottomPassed
            $element
            Element's bottom edge has passed top of screen
          

          

            onTopVisibleReverse
            $element
            Element's top edge has not passed bottom of screen
          

          

            onTopPassedReverse
            $element
            Element's top edge has not passed top of the screen
          

          

            onBottomVisibleReverse
            $element
            Element's bottom edge has not passed bottom of screen
          

          

            onPassingReverse
            $element
            Element's top has not passed top of screen but bottom has
            
          

          

            onBottomPassedReverse
            $element
            Element's bottom edge has not passed top of screen
          

        
      

    


    

      

        Image Callbacks
        
New in 2.2

      

      
Callbacks that occur only when using type: 'fixed'


      

        
          

            
            Context
            Description
          

        
        
          

            onLoad
            img
            Occurs after an image has completed loading
          

          

            onAllLoaded
            last loaded img
            Occurs after all img initialized at the same time have loaded.
          

        
      

    

    


      

        Fixed Callbacks
        
New in 2.2

      

      
Callbacks that occur only when using type: 'fixed'


      

        
          

            
            Context
            Description
          

        
        
          

            onFixed
            $element
            Occurs after element has been assigned position fixed
          

          

            onUnfixed
            $element
            Occurs after element has been removed from fixed position
          

        
      

    


    


      
Utility Callbacks

      
Callbacks that occur on named visibility events


      

        
          

            
            Context
            Description
          

        
        
          

            onUpdate(calculations)
            $element
            Occurs each time an elements calculations are updated
          

          

            onRefresh
            $element
            Occurs whenever element's visibility is refreshed
          

        
      

    


    

      

        DOM Settings
        
DOM settings specify how this module should interface with the DOM

      

      

        
          
Setting
          Default
          Description
        

        
          

            namespace
            visibility
            Event namespace. Makes sure module teardown does not effect other events attached to an element.
          

          

            className
            
              

              className : {
                fixed     : 'fixed',
              }
              

            		
            Class names used to attach style to state
          

        
      

    


    


      

        Debug Settings
        
Debug settings controls debug output to the console

      


      

        
          
Setting
          Default
          Description
        

        
          

            name
            Visibility
            Name used in debug logs
          

          

            silent
            False
            Silences all console output including error messages, regardless of other debug settings.
          

          

            debug
            False
            Provides standard debug output to console
          

          

            performance
            True
            Provides standard debug output to console
          

          

            verbose
            True
            Provides ancillary debug output to console
          

          

            errors
            
              

              error : {
                method : 'The method you called is not defined.',
              }
              

            		
          

        
      

    


  







================================================
FILE: server/documents/cla.html.eco
================================================
---
layout      : 'default'
css         : 'cla'
title       : "Contributor License Agreement"
description : 'Contribute to Semantic UI responsibly'
type        : 'Legal'
---

<%- @partial('header', { tabs: {  individual: 'Individual', entity: 'Entity' } }) %>



  

    
    

      
What's in a Contributor License Agreement (CLA)?

      This CLA makes sure that you are entitled to contribute to Semantic UI (you are not bound by a policy that prohibits you) and that you understand parts of your code may be used in derivative works. Additionally this agreement helps to legally protect Semantic UI should you later decide that you no longer want to contribute your code.
    

  

  

    
Semantic UI Individual Contributor License Agreement


    
Thank you for your interest in contributing to Semantic UI ("We" or "Us").


    
This contributor agreement ("Agreement") documents the rights granted by contributors to Us. To make this document effective, please sign it and send it to Us by email or electronic submission, following the instructions at [URL]. This is a legally binding document, so please read it carefully before agreeing to it. The Agreement may cover more than one software project managed by Us.


    
1. Definitions


    
"You" means the individual who Submits a Contribution to Us.


    
"Contribution" means any work of authorship that is Submitted by You to Us in which You own or assert ownership of the Copyright. If You do not own the Copyright in the entire work of authorship, please follow the instructions in .


    
"Copyright" means all rights protecting works of authorship owned or controlled by You, including copyright, moral and neighboring rights, as appropriate, for the full term of their existence including any extensions by You.


    
"Material" means the work of authorship which is made available by Us to third parties. When this Agreement covers more than one software project, the Material means the work of authorship to which the Contribution was Submitted. After You Submit the Contribution, it may be included in the Material.


    
"Submit" means any form of electronic, verbal, or written communication sent to Us or our representatives, including but not limited to electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, Us for the purpose of discussing and improving the Material, but excluding communication that is conspicuously marked or otherwise designated in writing by You as "Not a Contribution."


    
"Submission Date" means the date on which You Submit a Contribution to Us.


    
"Effective Date" means the date You execute this Agreement or the date You first Submit a Contribution to Us, whichever is earlier.


    
"Media" means any portion of a Contribution which is not software.


    
2. Grant of Rights


    
2.1 Copyright License


    
(a) You retain ownership of the Copyright in Your Contribution and have the same rights to use or license the Contribution which You would have had without entering into the Agreement.


    
(b) To the maximum extent permitted by the relevant law, You grant to Us a perpetual, worldwide, non-exclusive, transferable, royalty-free, irrevocable license under the Copyright covering the Contribution, with the right to sublicense such rights through multiple tiers of sublicensees, to reproduce, modify, display, perform and distribute the Contribution as part of the Material; provided that this license is conditioned upon compliance with Section 2.3.



    
2.2 Patent License


    
For patent claims including, without limitation, method, process, and apparatus claims which You  own, control or have the right to grant, now or in the future, You grant to Us a perpetual, worldwide, non-exclusive, transferable, royalty-free, irrevocable patent license, with the right to sublicense these rights to multiple tiers of sublicensees, to make, have made, use, sell, offer for sale, import and otherwise transfer the Contribution and the Contribution in combination with the Material (and portions of such combination). This license is granted only to the extent that the exercise of the licensed rights infringes such patent claims; and provided that this license is conditioned upon compliance with Section 2.3.


    
2.3 Outbound License


    
As a condition on the grant of rights in Sections 2.1 and 2.2, We agree to license the Contribution only under the terms of the license or licenses which We are using on the Submission Date for the Material (including any rights to adopt any future version of a license if permitted).



    
In addition, We may use the following licenses for Media in the Contribution: Creative Commons Attribution 3.0 (including any right to adopt any future version of a license if permitted).


    
2.4 Moral Rights. If moral rights apply to the Contribution, to the maximum extent permitted by law, You waive and agree not to assert such moral rights against Us or our successors in interest, or any of our licensees, either direct or indirect.


    
2.5 Our Rights. You acknowledge that We are not obligated to use Your Contribution as part of the Material and may decide to include any Contribution We consider appropriate.


    
2.6 Reservation of Rights. Any rights not expressly  licensed under this section are expressly reserved by You.


    
3. Agreement


    
You confirm that:


    
(a) You have the legal authority to enter into this Agreement.


    
(b) You  own the Copyright and patent claims covering the Contribution which are required to grant the rights under Section 2.


    
(c) The grant of rights under Section 2 does not violate any grant of rights which You have made to third parties, including Your employer.  If You are an employee, You have had Your employer approve this Agreement or sign the Entity version of this document.  If You are less than eighteen years old, please have Your parents or guardian sign the Agreement.


    
(d) You have followed the instructions in , if You do not own the Copyright in the entire work of authorship Submitted.


    
4. Disclaimer


    
EXCEPT FOR THE EXPRESS WARRANTIES IN SECTION 3, THE CONTRIBUTION IS PROVIDED "AS IS". MORE PARTICULARLY, ALL EXPRESS OR IMPLIED WARRANTIES INCLUDING, WITHOUT LIMITATION, ANY IMPLIED WARRANTY OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT ARE EXPRESSLY DISCLAIMED BY YOU TO US. TO THE EXTENT THAT ANY SUCH WARRANTIES CANNOT BE DISCLAIMED, SUCH WARRANTY IS LIMITED IN DURATION TO THE MINIMUM PERIOD PERMITTED BY LAW.


    
5. Consequential Damage Waiver


    
TO THE MAXIMUM EXTENT PERMITTED BY APPLICABLE LAW, IN NO EVENT WILL YOU  BE LIABLE FOR ANY LOSS OF PROFITS, LOSS OF ANTICIPATED SAVINGS, LOSS OF DATA, INDIRECT, SPECIAL, INCIDENTAL, CONSEQUENTIAL AND EXEMPLARY DAMAGES ARISING OUT OF THIS AGREEMENT REGARDLESS OF THE LEGAL OR EQUITABLE THEORY (CONTRACT, TORT OR OTHERWISE) UPON WHICH THE CLAIM IS BASED.


    
6. Miscellaneous


    
6.1 This Agreement will be governed by and construed in accordance with the laws of United States of America excluding its conflicts of law provisions. Under certain circumstances, the governing law in this section might be superseded by the United Nations Convention on Contracts for the International Sale of Goods ("UN Convention") and the parties intend to avoid the application of the UN Convention to this Agreement and, thus, exclude the application of the UN Convention in its entirety to this Agreement.


    
6.2 This Agreement sets out the entire agreement between You and Us for Your Contributions to Us and overrides all other agreements or understandings.


    
6.3  If You or We assign the rights or obligations received through this Agreement to a third party, as a condition of the assignment, that third party must agree in writing to abide by all the rights and obligations in the Agreement.


    
6.4 The failure of either party to require performance by the other party of any provision of this Agreement in one situation shall not affect the right of a party to require such performance at any time in the future. A waiver of performance under a provision in one situation shall not be considered a waiver of the performance of the provision in the future or a waiver of the provision in its entirety.


    
6.5 If any provision of this Agreement is found void and unenforceable, such provision will be replaced to the extent possible with a provision that comes closest to the meaning of the original provision and which is enforceable.  The terms and conditions set forth in this Agreement shall apply notwithstanding any failure of essential purpose of this Agreement or any limited remedy to the maximum extent possible under law.

  

  

    
Semantic UI Entity Contributor License Agreement

    
Thank you for your interest in contributing to Semantic UI ("We" or "Us").


    
This contributor agreement ("Agreement") documents the rights granted by contributors to Us. To make this document effective, please sign it and send it to Us by email or electronic submission, following the instructions at . This is a legally binding document, so please read it carefully before agreeing to it. The Agreement may cover more than one software project managed by Us.


    
1. Definitions


    
"You" means any Legal Entity on behalf of whom a Contribution has been received by Us. "Legal Entity" means an entity which is not a natural person. "Affiliates" means other Legal Entities that control, are controlled by, or under common control with that Legal Entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such Legal Entity, whether by contract or otherwise, (ii) ownership of fifty percent (50%) or more of the outstanding shares or securities which vote to elect the management or other persons who direct such Legal Entity or (iii) beneficial ownership of such entity.


    
"Contribution" means any work of authorship that is Submitted by You to Us in which You own or assert ownership of the Copyright. If You do not own the Copyright in the entire work of authorship, please follow the instructions in .


    
"Copyright" means all rights protecting works of authorship owned or controlled by You or Your Affiliates, including copyright, moral and neighboring rights, as appropriate, for the full term of their existence including any extensions by You.


    
"Material" means the work of authorship which is made available by Us to third parties. When this Agreement covers more than one software project, the Material means the work of authorship to which the Contribution was Submitted. After You Submit the Contribution, it may be included in the Material.


    
"Submit" means any form of electronic, verbal, or written communication sent to Us or our representatives, including but not limited to electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, Us for the purpose of discussing and improving the Material, but excluding communication that is conspicuously marked or otherwise designated in writing by You as "Not a Contribution."


    
"Submission Date" means the date on which You Submit a Contribution to Us.


    
"Effective Date" means the date You execute this Agreement or the date You first Submit a Contribution to Us, whichever is earlier.


    
"Media" means any portion of a Contribution which is not software.


    
2. Grant of Rights


    
2.1 Copyright License


    
(a) You retain ownership of the Copyright in Your Contribution and have the same rights to use or license the Contribution which You would have had without entering into the Agreement.


    
(b) To the maximum extent permitted by the relevant law, You grant to Us a perpetual, worldwide, non-exclusive, transferable, royalty-free, irrevocable license under the Copyright covering the Contribution, with the right to sublicense such rights through multiple tiers of sublicensees, to reproduce, modify, display, perform and distribute the Contribution as part of the Material; provided that this license is conditioned upon compliance with Section 2.3.



    
2.2 Patent License


    
For patent claims including, without limitation, method, process, and apparatus claims which You or Your Affiliates own, control or have the right to grant, now or in the future, You grant to Us a perpetual, worldwide, non-exclusive, transferable, royalty-free, irrevocable patent license, with the right to sublicense these rights to multiple tiers of sublicensees, to make, have made, use, sell, offer for sale, import and otherwise transfer the Contribution and the Contribution in combination with the Material (and portions of such combination). This license is granted only to the extent that the exercise of the licensed rights infringes such patent claims; and provided that this license is conditioned upon compliance with Section 2.3.


    
2.3 Outbound License


    
As a condition on the grant of rights in Sections 2.1 and 2.2, We agree to license the Contribution only under the terms of the license or licenses which We are using on the Submission Date for the Material (including any rights to adopt any future version of a license if permitted).



    
In addition, We may use the following licenses for Media in the Contribution: Creative Commons Attribution 3.0 (including any right to adopt any future version of a license if permitted).


    
2.4 Moral Rights. If moral rights apply to the Contribution, to the maximum extent permitted by law, You waive and agree not to assert such moral rights against Us or our successors in interest, or any of our licensees, either direct or indirect.


    
2.5 Our Rights. You acknowledge that We are not obligated to use Your Contribution as part of the Material and may decide to include any Contribution We consider appropriate.


    
2.6 Reservation of Rights. Any rights not expressly  licensed under this section are expressly reserved by You.


    
3. Agreement


    
You confirm that:


    
(a) You have the legal authority to enter into this Agreement.


    
(b) You or Your Affiliates own the Copyright and patent claims covering the Contribution which are required to grant the rights under Section 2.


    
(c) The grant of rights under Section 2 does not violate any grant of rights which You or Your Affiliates have made to third parties.



    
(d) You have followed the instructions in , if You do not own the Copyright in the entire work of authorship Submitted.


    
4. Disclaimer


    
EXCEPT FOR THE EXPRESS WARRANTIES IN SECTION 3, THE CONTRIBUTION IS PROVIDED "AS IS". MORE PARTICULARLY, ALL EXPRESS OR IMPLIED WARRANTIES INCLUDING, WITHOUT LIMITATION, ANY IMPLIED WARRANTY OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT ARE EXPRESSLY DISCLAIMED BY YOU TO US. TO THE EXTENT THAT ANY SUCH WARRANTIES CANNOT BE DISCLAIMED, SUCH WARRANTY IS LIMITED IN DURATION TO THE MINIMUM PERIOD PERMITTED BY LAW.


    
5. Consequential Damage Waiver


    
TO THE MAXIMUM EXTENT PERMITTED BY APPLICABLE LAW, IN NO EVENT WILL YOU  BE LIABLE FOR ANY LOSS OF PROFITS, LOSS OF ANTICIPATED SAVINGS, LOSS OF DATA, INDIRECT, SPECIAL, INCIDENTAL, CONSEQUENTIAL AND EXEMPLARY DAMAGES ARISING OUT OF THIS AGREEMENT REGARDLESS OF THE LEGAL OR EQUITABLE THEORY (CONTRACT, TORT OR OTHERWISE) UPON WHICH THE CLAIM IS BASED.


    
6. Miscellaneous


    
6.1 This Agreement will be governed by and construed in accordance with the laws of United States of America excluding its conflicts of law provisions. Under certain circumstances, the governing law in this section might be superseded by the United Nations Convention on Contracts for the International Sale of Goods ("UN Convention") and the parties intend to avoid the application of the UN Convention to this Agreement and, thus, exclude the application of the UN Convention in its entirety to this Agreement.


    
6.2 This Agreement sets out the entire agreement between You and Us for Your Contributions to Us and overrides all other agreements or understandings.


    
6.3  If You or We assign the rights or obligations received through this Agreement to a third party, as a condition of the assignment, that third party must agree in writing to abide by all the rights and obligations in the Agreement.


    
6.4 The failure of either party to require performance by the other party of any provision of this Agreement in one situation shall not affect the right of a party to require such performance at any time in the future. A waiver of performance under a provision in one situation shall not be considered a waiver of the performance of the provision in the future or a waiver of the provision in its entirety.


    
6.5 If any provision of this Agreement is found void and unenforceable, such provision will be replaced to the extent possible with a provision that comes closest to the meaning of the original provision and which is enforceable.  The terms and conditions set forth in this Agreement shall apply notwithstanding any failure of essential purpose of this Agreement or any limited remedy to the maximum extent possible under law.

  


  





================================================
FILE: server/documents/collections/breadcrumb.html.eco
================================================
---
layout      : 'default'
css         : 'breadcrumb'
standalone  : true

element     : 'breadcrumb'
elementType : 'collection'

title       : 'Breadcrumb'
description : 'A breadcrumb is used to show hierarchy between content'
type        : 'UI Collection'

themes      : ['Default']
---

<%- @partial('header') %>








  
Types


  

    
Breadcrumb

    
A standard breadcrumb

    

      Home
      
 / 

      Store
      
 / 

      
T-Shirt

    

  


  

    

      Home
      
      Store
      
      
T-Shirt

    

  



  
Content


  

    
Divider

    
A breadcrumb can contain a divider to show the relationship between sections, this can be formatted as an icon or text.

    

      Home
      /
      Registration
      /
      
Personal Information

    

  


  

    

      Home
      
      Registration
      
      
Personal Information

    

  



  

    
Section

    
A breadcrumb can contain sections that can either be formatted as a link or text

    

      
Home

      
 / 

      
Search

    

  


  

    
Link

    
A section may be linkable or contain a link

    

      Home
      
 / 

      
Search for: paper towels

    

  


  
States


  

    
Active

    
A section can be active

    

      Products
      
 / 

      
Paper Towels

    

  



  
Variations


  

    
Size

    
A breadcrumb can vary in size

    

      Home
      
      Registration
      
      
Personal Information

    

  

  

    

      Home
      
      Registration
      
      
Personal Information

    

  

  

    

      Home
      
      Registration
      
      
Personal Information

    

  

  

    

      Home
      
      Registration
      
      
Personal Information

    

  

  

    

      Home
      
      Registration
      
      
Personal Information

    

  

  

    

      Home
      
      Registration
      
      
Personal Information

    

  

  

    

      Home
      
      Registration
      
      
Personal Information

    

  






================================================
FILE: server/documents/collections/form.html.eco
================================================
---
layout      : 'default'
css         : 'form'
standalone  : true

element     : 'form'
elementType : 'collection'

title       : 'Form'
description : 'A form displays a set of related user input fields in a structured way'
type        : 'UI Collection'

themes      : ['Default', 'Flat', 'Chubby', 'GitHub']
---



<%- @partial('header') %>




  
Types


  

    
Form

    
A form

    

      
If you are looking for validation you should check out form behaviors.

    

    

      

        
        
      

      

        
        
      

      

        

          
          
        

      

      
    

  

  

    
    

      
Shipping Information

      

        
        

          

            
          

          

            
          

        

      

      

        
        

          

            
          

          

            
          

        

      

      

        

          
          
        

        

          
          

            
            
            
Select Country

            <%- @partial('examples/single/flag-menu') %>
          

        

      

      
Billing Information

      

        
        

          
          
Type

          
          

            

              
              Visa
            

            

              
              American Express
            

            

              
              Discover
            

          

        

      

      

        

          
          
        

        

          
          
        

        

          
          

            

              
            

            

              
            

          

        

      


      
Receipt


      

        
        

          
          
          
Saved Contacts

          

            

              
              Jenny Hess
            

            

              
              Elliot Fu
            

            

              
              Stevie Feliciano
            

            

              
              Christian
            

            

              
              Matt
            

            

              
              Justen Kitsune
            

          

        

      


      

        

          

            
            
          

        

      

      
Submit Order

    

  

  
Content


  

    
Field

    
A field is a form element containing a label and an input

    

      

        
        
      

    

  


  

    
Fields

    
A set of fields can appear grouped together

    

      Field groups automatically receive responsive styling, swapping to one field per row on mobile devices.
    

    

      

        

          
          
        

        

          
          
        

        

          
          
        

      

    

  

  

    

      

        

          
          
        

        

          
          
        

        

          
          
        

      

    

  

  

    

      

        

          
          
        

        

          
        

        

          
        

      

    

  


  

    
Text Area

    
A textarea can be used to allow for extended user input.

    

      To specify an approximate text area size use the rows attribute.
    

    

      

        
        
      

      

        
        
      

    

  


  

    
Checkbox

    
A form can contain a checkbox

    

      UI checkbox are special, styled versions of standard HTML checkboxes.
    

    

    $('.ui.checkbox')
      .checkbox()
    ;
    

    

      

        

          
          
        

      

      

        

          
          
        

        
      

      

        

          
          
        

      

    

  


  

    
Radio Checkbox

    
A form can include a radio checkbox

    

    $('.ui.radio.checkbox')
      .checkbox()
    ;
    

    

      

        
        

          

            
            
          

        

        

          

            
            
          

        

        

          

            
            
          

        

        

          

            
            
          

        

      

      

        
        

          

            
            
          

        

        

          

            
            
          

        

        

          

            
            
          

        

        

          

            
            
          

        

      

    

  


  

    
Dropdown

    
A form can contain a dropdown

    

      Dropdown will automatically convert select elements initialized as dropdowns. For more details check out the dropdown docs
    

    

    $('select.dropdown')
      .dropdown()
    ;
    

    

      

          
          

              
              
              
Gender

              

                  
Male

                  
Female

              

          

      

    

  

  

    

      

        
        
      

    

  


  

    
Multiple Select

    
A multiple select is used to include several choices with one form field

    

      

        
        
      

    

  


  

    
HTML Select

    
If Javascript or ui dropdown are not a viable option, forms also can provide basic styling for select elements

    

      

        
      

    

  


  

    
Message

    
A form can contain a message

    

      Any info, error, success, or warning message blocks found inside a form are hidden by default.
    

    

      

        
We had some issues

        
    
          
  • Please enter your first name
    • 
          
  • Please enter your last name
    • 
        

      

    

  


  
States


  

    
Loading

    
If a form is in loading state, it will automatically show a loading indicator.


    

      

        
        
      

      
Submit

    

  


  

    
Success

    
If a form is in an success state, it will automatically show any success message blocks.

    

      

        
        
      

      

        
Form Completed

        
You're all signed up for the newsletter.

      

      
Submit

    

  


  

    
Error

    
If a form is in an error state, it will automatically show any error message blocks.

    

      

        
        
      

      

        
Action Forbidden

        
You can only sign up for an account once with a given e-mail address.

      

      
Submit

    

  


  

    
Warning

    
If a form is in warning state, it will automatically show any warning message block.


    

      

        
        
      

      

        
Could you check something!

        
    
          
  • That e-mail has been subscribed, but you have not yet clicked the verification link in your e-mail.
    • 
        

      

      
Submit

    

  



  

    
Field Error

    
Individual fields may display an error state


    

      

        

          
          
        

        

          
          
        

      

      

        
        

          
Select

          
          
          

            
Male

            
Female

          

        

      

      

        

          
          
        

      

    

  


  

    
Disabled Field

    
Individual fields may be disabled


    

      

        

          
          
        

        

          
          
        

      

    

  

  

    
Read-Only Field

    
Individual fields may be read only


    

      

        

          
          
        

        

          
          
        

      

    

  


  
Form Variations


  

    
Size

    
A form can vary in size

    

      

        

          
          
        

        

          
          
        

      

      
Submit

    

  

  

    

      

        

          
          
        

        

          
          
        

      

      
Submit

    

  

  

    

      

        

          
          
        

        

          
          
        

      

      
Submit

    

  

  

    

      

        

          
          
        

        

          
          
        

      

      
Submit

    

  

  

    

      

        

          
          
        

        

          
          
        

      

      
Submit

    

  

  

    

      

        

          
          
        

        

          
          
        

      

      
Submit

    

  

  

    

      

        

          
          
        

        

          
          
        

      

      
Submit

    

  


  

    
Equal Width Form

    
Forms can automatically divide fields to be equal width

    

      

        

          
          
        

        

          
          
        

      

      

        

          
          
        

        

          
          
        

        

          
          
        

      

    

  


  

    
Inverted

    
A form on a dark background may have to invert its color scheme


    

      

        

          

            
            
          

          

            
            
          

        

        

          

            
            
          

        

        
Submit

      

    

  



  
Field Variations


  

    
Inline Field

    
A field can have its label next to instead of above it.

    

      

        
        
      

    

  


  

    
Width

    
A field can specify its width in grid columns

    

      

        

          
          
        

        

          
          
        

        

          
          
        

      

      

        

          
        

        

          
        

        

          
        

      

      

        

          
        

        

          
        

        

          
        

      

    

  


  

    
Required

    
A field can show that input is mandatory

    

        

          
          
        

        

          

            
            
          

        

    

  


  
Group Variations


  

    
Evenly Divided

    
Fields can have their widths divided evenly

    

      

        

          
          
        

        

          
          
        

        

          
          
        

      

    

  


  

    
Grouped Fields

    
Fields can show related choices

    

      

        

          

            
            
          

        

        

          

            
            
          

        

        

          

            
            
          

        

        

          

            
            
          

        

      

    

  


  

    
Equal Width Fields

    
Fields can automatically divide fields to be equal width

    

      

        

          
          
        

        

          
          
        

      

      

        

          
          
        

        

          
          
        

        

          
          
        

      

    

  



  

    
Inline Fields

    
Multiple fields may be inline in a row

    

      

        
        

          
        

        

          
        

        

          
        

      

    

  


  

    

      

        
        

          

            
            
          

        

        

          

            
            
          

        

        

          

            
            
          

        

        

          

            
            
          

        

      

    

  







================================================
FILE: server/documents/collections/grid.html.eco
================================================
---
layout      : 'default'
css         : 'Grid'
standalone  : true

element     : 'grid'
elementType : 'collection'

title       : 'Grid'
description : 'A grid is used to harmonize negative space in a layout'
type        : 'UI Collection'

themes      : ['Default']
---



<%- @partial('header', { tabs: { overview: 'Overview', definition: 'Definition' } }) %>




  


    
Introduction


    

      
Grids

      
A grid is a structure with a long history used to align negative space in designs.

      
Using a grid makes content appear to flow more naturally on your page.

      

        
        
      

      
      

        

        

        

        

      

    


    

      
Columns

      
Grids divide horizontal space into indivisible units called "columns". All columns in a grid must specify their width as proportion of the total available row width.

      
All grid systems choose an arbitrary column count to allow per row. Semantic's default theme uses 16 columns.


      
The example below shows four four wide columns will fit in the first row, 16 / 4 = 4, and three various sized columns in the second row. 2 + 8 + 6 = 16


      
The default column count, and other arbitrary features of grids can be changed by adjusting Semantic UI's underlying theming variables.


      

        

        

        

        

        

        

        

      

    

    

      
Rows

      
Rows are groups of columns which are aligned horizontally.

      
Rows can either be explicit, marked with an additional row element, or implicit, automatically occurring when no more space is left in a previous row.
      

      
After each group of columns vertical spacing is added to separate each group of columns, creating vertical rhythm.
      

        

          

          

          

        

        

        

        

        

      

    


    

      
Gutters

      
Grid columns are separated by areas of white space referred to as "gutters". Gutters improve legibility by providing, negative space between page elements.

      
Gutters remain a constant size regardless of the width of the grid, or how many columns are in a row. To increase the size of gutters in a particular grid, you can use a relaxed grid variation.

      

        

          

          

          

        

        

          

          

          

          

          

          

          

          

        

      

      

        

          

          

          

        

        

          

          

          

          

          

          

          

          

        

      

    


    

      
Negative Margins

      
Since all grid columns include gutters, grids use negative margins to make sure that the first and last columns sit flush with content outside the grid.

      
In the following example, you can see even though the top row has padding, the attached button still sits flush with the edge of the grid.

      
In some cases, like when a column or row is colored, you may want to avoid using negative margins. You can do this by using a padded grid variation.

       
Button before grid

       

        

        

        

      

      

        

      

      
Button after grid

    



    

      
Page Grids

      
Grids are fluid and will automatically flow in size to take the maximum available width.

      
Containers are elements designed to limit page content to a reasonable maximum width for display based on the size of the user's screen.

      
Using a ui grid container is the best way to include top-level page content inside a grid.

      

        
In version 1.x of Semantic UI page grid were used to contain the maximum width of grids holding page content. Page grid have been deprecated in favor for the simpler container element.

      

    



    
Columns


    

      
Automatic Flow

      
Most grids do not need to specify rows. Content will automatically flow to the next row when all the grid columns are taken in the current row.


      

        

        

        

        

        

        

        

        

      

    

    

      
Column Content

      
Since columns use padding to create gutters, content stylings should not be applied directly to columns, but to elements inside of columns.

      

        

          

            
          

        

        

          

            
          

        

        

          

            
          

        

      

    


    

      
Column Widths

      
Column widths can be specified using (x) wide class names. If a column cannot fit in a row it will automatically flow to the next row

      

        

        

        

        

        

        

        

        

        

      

    


    
Rows


    

      
Grouping

      
Row wrappers allow you to apply variations to a group of columns.

      

        

          

        

        

        

        

        

      

    

    

      
Clearing Content

      
Row wrappers will automatically clear previous columns, making them useful when using floated variations.

      

        

          

          

        

        

          

          

          

        

      

    


    

      
Special Grids

      
Additionally, some types of grids, like divided or celled require row wrappers to apply formatting correctly.


      

        

          

            
          

          

            
          

          

            
          

        

        

          

            
          

          

            
          

          

            
          

        

      

    


    
Varying Grids



    

      
Nesting Grids

      
Grids can be placed inside of other grids, letting you sub-divide columns.


      

        

          

            

            

            

          

        

        

        

        

          

            

            

          

        

      

    


    

      
Colored

      
Grids can use named colors variations to add background colors, but only with padded grid that do not include negative margins.

      
To include a color that is not available in the default palette its perfectly fine to use CSS

      

        

          

            Olive
          

          

            Black
          

        

        

          
Custom Row

        

        

          

            Black
          

          

            Olive
          

        

      

    



    

      
Automatic Column Count

      
The equal width variation will automatically divide column width evenly. This is useful with dynamic content where you do not know the column count in advance.

      

        

        

        

        

          

          

        

      

    

    

      
Centering Content

      
If a row does not take up all sixteen grid columns, you can use a centered variation to center the column contents inside the grid.
      

      

        

        

          

          

        

      

    


    

      
Significant Word Order

      
Grids include many variations for adjusting things like vertical or horizontal alignment, text alignment, or default gutter sizes.

      
Some multi-word variations, like left floated or right aligned are word-order dependent and require you to use adjacent class names.


      

        

          

            Left floated right aligned column
          

        

        

          

            Right floated left aligned column
          

        

        

          

            

            Center aligned row
            

          

          

            

            Center aligned row
            

          

        

        

          

            Right Aligned Grid
          

        

      

    


    
Responsive Grids


    

      
Containers

      
A container can be used alongside a grid to provide a responsive, fixed width container for wrapping the contents of a page.

      

        

        

        

        

        

        

        

        

      

    


    

      
Stackable

      
A stackable grid will automatically stack rows to a single columns on mobile devices

      

        

        

        

        

      

    

    

      
Reverse Order

      
Semantic includes special reversed variations that allow you to reverse the order of columns or rows by device

      

        

          First
        

        

          Second
        

        

          Third
        

      

    


    

      
Doubling

      
A doubling grid will double column widths for each device jump.

      

        

          

          

          

          

          

          

          

          

        

        

          

          

          

          

          

          

        

        

          

          

          

          

        

      

    

    

      
Manual Tweaks

      
Although design patterns like doubling or stackable are useful at simplifying responsive styling, you can also manually tweak device presentation by specifying (x) wide device or device only columns or rows.
      

        

          

        

        

        

        

        

        

      

    


  


  


    
Types


    

      

        Grid
        Flexbox
      

      
A basic grid

      

        

        

        

        

        

        

        

        

        

        

        

        

        

        

        

        

      

    


    

      

        Divided
        Requires Rows
      

      
A grid can have dividers between its columns

      

        

          

            
          

          

            
          

          

            
          

        

        

          

            
          

          

            
          

          

            
          

        

      

    


    

      

        Vertically Divided
        Requires Rows
      

      
A grid can have dividers between rows

      

        

          

            
          

          

            
          

        

        

          

            
          

          

            
          

          

            
          

        

      

    



    

      

        Celled
        Requires Rows
      

      
A grid can have rows divided into cells

      

        

          

            
          

          

            
          

        

        

          

            
          

          

            
          

          

            
          

        

      

    

    

      

        Internally Celled
        Requires Rows
      

      
A grid can have rows divisions only between internal rows

      

        

          

            
          

          

            
          

          

            
          

        

        

          

            
          

          

            
          

          

            
          

        

      

    


    
Content


    

      
Rows

      
A row is a horizontal grouping of columns

      

        

          

            
          

          

            
          

        

        

          

            
          

          

            
          

          

            
          

        

      

    

    

      
Columns

      
Columns each contain gutters giving them equal spacing from other columns.

      

        

          
        

        

          
        

        

          
        

        

          
        

      

    


    
Variations



    

      
Floated

      
A column can sit flush against the left or right edge of a row

      

        

          
        

        

          
        

      

    


    

      
Column Width

      
A column can vary in width taking up more than a single grid column.

      

        

          
        

        

          
        

        

          
        

      

    


    

      
Column Count

      
A grid can have a different number of columns per row

      

        

          

            
          

          

            
          

          

            
          

        

        

          

            
          

          

            
          

          

            
          

          

            
          

        

        

          

            
          

          

            
          

          

            
          

          

            
          

          

            
          

        

      

    


    

      

        Equal Width
      

      
A grid can automatically resize all elements to split the available width evenly

      

        

          

            1
          

        

        

          

            2
          

        

        

          

            3
          

        

      

    

    

      

        

          

            
1

          

          

            
2

          

          

            
3

          

          

            
4

          

        

        

          

            
1

          

          

            
2

          

          

            
3

          

        

        

          

            
1

          

          

            
2

          

        

      

    


    

      

        Stretched
      

      
A row can stretch its contents to take up the entire column height

      

        

          

            

              1
            

          

          

            

              1
            

            

              2
            

          

          

            

              1
            

            

              2
            

            

              3
            

          

        

      

    

    

      

        

          

            

              1
            

            

              2
            

          

          

            

              
            

          

          

            

              1
            

            

              2
            

          

        

        

          

            

              1
            

            

              2
            

          

          

            

              
            

          

          

            

              1
            

            

              2
            

          

        

      

    



    

      
Padded

      
A grid can preserve its vertical and horizontal gutters on first and last columns


      
The following grid has vertical and horizontal gutters

      

      

        

          
        

        

          
        

      

    

    

      
The following grid has vertical gutters.

      

      

        

          
        

        

          
        

      

    

    

      
The following grid has horizontal gutters

      

      

        

          
        

        

          
        

      

    


    

      
Relaxed

      
A grid can increase its gutters to allow for more negative space

      

        

          
        

        

          
        

        

          
        

        

          
        

      

    

    

      

        

          
        

        

          
        

        

          
        

        

          
        

      

    


    

      
Colored

      
A row or column can be colored

      

        
Red

        
Orange

        
Yellow

        
Olive

        
Green

        
Teal

        
Blue

        
Violet

        
Purple

        
Pink

        
Brown

        
Grey

        
Black

      

    

    

      

        

          
Red

        

        

          
Orange

        

        

          
Yellow

        

        

          
Olive

        

        

          
Green

        

        

          
Teal

        

        

          
Blue

        

        

          
Violet

        

        

          
Purple

        

        

          
Pink

        

        

          
Brown

        

        

          
Grey

        

        

          
Black

        

      

    



    

      
Centered

      
A grid can have its columns centered

      

        

          
        

        

          

            
          

          

            
          

          

            
          

        

        

          

            
          

          

            
          

          

            
          

          

            
          

        

      

    


    

      
Text Alignment

      
A grid, row, or column can specify its text alignment

      

        

          

            

              

                Cats
              

            

          

          

            

              

                Dogs
              

              

                Poodle
              

              

                Cockerspaniel
              

            

          

          

            

              

                Monkeys
              

            

          

        

      

    

    

      

        

          

            

              

                Cats
              

            

          

          

            

              

                Dogs
              

              

                Poodle
              

              

                Cockerspaniel
              

            

          

          

            

              

                Monkeys
              

            

          

        

        

          

            
Justified content fits exactly inside the grid column, taking up the entire width from one side to the other. Justified content fits exactly inside the grid column, taking up the entire width from one side to the other. Justified content fits exactly inside the grid column, taking up the entire width from one side to the other. Justified content fits exactly inside the grid column, taking up the entire width from one side to the other. Justified content fits exactly inside the grid column, taking up the entire width from one side to the other.

          

        

      

    

    

      

        

          

            

              

                Cats
              

            

          

          

            

              

                Dogs
              

              

                Poodle
              

              

                Cockerspaniel
              

            

          

          

            

              

                Monkeys
              

            

          

        

      

    



    

      
Vertical Alignment

      
A grid, row, or column can specify its vertical alignment to have all its columns vertically centered.

      

        

          

            
          

          

            
            
          

          

            
          

        

      

    

    

      

        

          

            
          

          

            
            
          

          

            
          

        

        

          

            
          

          

            
            
          

          

            
          

        

        

          

            
          

          

            
            
          

          

            
          

        

      

    


    
Responsive Variations



    

      
Doubling

      
A grid can double its column width on tablet and mobile sizes

      

        A grid will round its columns to the closest reasonable value when doubling, for example a five column grid will use 2 mobile, 3 tablet, 5 desktop. To force 1 column on mobile you can add stackable
      

      

        

          
        

        

          
        

        

          
        

        

          
        

        

          
        

      

    


    

      
Stackable

      
A grid can have its columns stack on-top of each other after reaching mobile breakpoints

      

        To see a grid stack, try resizing your browser to a small width
      

      

        

          

            
            
          

        

        

          

            
            
          

        

      

    

    

      
Reversed

      
A grid or row can specify that its columns should reverse order at different device sizes

      
Reversed grids are compatible with divided grids and other complex grid types.

      

        

          

            Computer A Fourth
          

          

            Computer A Third
          

          

            Computer A Second
          

          

            Computer A First
          

        

        

          

            Computer B Fourth
          

          

            Computer B Third
          

          

            Computer B Second
          

          

            Computer B First
          

        

      

      

        

          Tablet Fourth
        

        

          Tablet Third
        

        

          Tablet Second
        

        

          Tablet First
        

      

      

        

          Mobile Fourth
        

        

          Mobile Third
        

        

          Mobile Second
        

        

          Mobile First
        

      

    

    

      

        

          
Computer Row 4

        

        

          
Computer Row 3

        

        

          
Computer Row 2

        

        

          
Computer Row 1

        

      

    

    

      

        

          
Tablet Row 4

        

        

          
Tablet Row 3

        

        

          
Tablet Row 2

        

        

          
Tablet Row 1

        

      

    

    

      

        

          
Mobile Row 4

        

        

          
Mobile Row 3

        

        

          
Mobile Row 2

        

        

          
Mobile Row 1

        

      

    


    

      
Device Visibility

      
A columns or row can appear only for a specific device, or screen sizes

      

        See container documentation for information on breakpoint calculations
      

      

        

          

            

              Large Screen
            

          

          

            

              Large Screen
            

          

        

        

          

            

              Widescreen
            

          

          

            

              Widescreen
            

          

        

        

          

            

              Mobile
            

          

          

            

              Mobile
            

          

        

        

          

            

              Computer
            

          

          

            

              Tablet and Mobile
            

          

          

            

              All Sizes
            

          

          

            

              All Sizes
            

          

        

        

          

            

              Computer
            

          

          

            

              Computer
            

          

          

            

              Computer
            

          

          

            

              Computer
            

          

        

        

          

            

              Tablet
            

          

          

            

              Tablet
            

          

          

            

              Tablet
            

          

        

      

    


    

      
Responsive Width

      
A column can specify a width for a specific device

      

        
It's recommended to use a responsive pattern like doubling or stackable to reduce complexity when designing responsively, however in some circumstances specifying exact widths for screen sizes may be necessary.

      

      

        

          
        

        

          
        

        

          
        

        

          
        

        

          
        

      

    

    

      

        

          
        

        

          
        

        

          
        

        

          
        

      

    

  






================================================
FILE: server/documents/collections/menu.html.eco
================================================
---
layout      : 'default'
css         : 'menu'
standalone  : true

element     : 'menu'
elementType : 'collection'

title       : 'Menu'
description : 'A menu displays grouped navigation actions'
type        : 'UI Collection'

themes      : ['Default', 'Chubby', 'GitHub', 'Material']
---




<%- @partial('header') %>




  
Types

  

    

      Menu
    

    
A menu

    

      
Starting in 2.0 menus now use flexbox. This allows each menu item to automatically stretch to the size of the largest item.
    

    

      Editorials
      Reviews
      Upcoming Events
    

  

  

    

      Many of the following examples use a coupling with dropdowns to display dropdown menus inside of ui menu. Please consult the dropdown documentation for the correct javascript initialization for this component.
    

    

      

        
      

      
        Browse Courses
        
      
      

        More
        
        

          
Applications

          
International Students

          
Scholarships

        

      

    

    

      

        

          
Business

          

            Design & Urban Ecologies
            Fashion Design
            Fine Art
            Strategic Design
          

        

        

          
Liberal Arts

          

            Anthropology
            Economics
            Media Studies
            Philosophy
          

        

        

          
Social Sciences

          

            Food Studies
            Journalism
            Non Profit Management
          

        

      

    

  

  

    

      

        
        

          

            
            New
            

              
Document

              
Image

            

          

          

            Open...
          

          

            Save...
          

          
Edit Permissions

          

          

            Export
          

          

            Share...
          

        

      

      

        

          

            
            
          

          

        

      

    

    

      
    

  


  

    
Secondary Menu

    
A menu can adjust its appearance to de-emphasize its contents

    

      
        Home
      
      
        Messages
      
      
        Friends
      
      

        

          

            
            
          

        

        
          Logout
        
      

    

  


  

    
Pointing

    
A menu can point to show its relationship to nearby content

    

      
        Home
      
      
        Messages
      
      
        Friends
      
      

        

          

            
            
          

        

      

    

    

      
    

  

  

    

      
        Home
      
      
        Messages
      
      
        Friends
      
      

        
          Logout
        
      

    

    

      
    

  


  

    
Tabular

    
A menu can be formatted to show tabs of information

    

      Be sure to visit the tab documentation for information on how to set up dynamic tabs
    

    

      
        Bio
      
      
        Photos
      
    

  

  

    

      
        Bio
      
      
        Photos
      
      

        

          

            
            
          

        

      

    

    

      
    

  

  

    

      
    

    

      
        Active Project
      
      
        Project #2
      
      
        Project #3
      
      

        
           New Tab
        
      

    

  

  

    

      

        

          
            Bio
          
          
            Pics
          
          
            Companies
          
          
            Links
          
        

      

      

        

          This is an stretched grid column. This segment will always match the tab height
        

      

    

  

  

    

      

        

          This is an stretched grid column. This segment will always match the tab height
        

      

      

        

          
            Bio
          
          
            Pics
          
          
            Companies
          
          
            Links
          
        

      

    

  



  

    
Text

    
A menu can be formatted for text content

    

      
Sort By

      
        Closest
      
      
        Most Comments
      
      
        Most Popular
      
    

  


  

    
Vertical Menu

    
A vertical menu displays elements vertically..

    
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.


    

      
        Inbox
        
1

      
      
        Spam
        
51

      
      
        Updates
        
1

      
      

        

          
          
        

      

    

  


  

    

      
        Account
      
      
        Settings
      
      

        
        Display Options
        

          
Text Size

          Small
          Medium
          Large
        

      

    

  


  

    

      
Sort By

      
        Closest
      
      
        Most Comments
      
      
        Most Popular
      
    

  


  

    

      
        Home
      
      
        Messages
      
      
        Friends
      
    

  


  

    

      
        Home
      
      
        Messages
      
      
        Friends
      
    

  


  

    
Pagination

    
A pagination menu is specially formatted to present links to pages of content

    
  


  
Content


  

    
Header

    
A menu item may include a header or may itself be a header

    

      

        Our Company
      

      
        About Us
      
      
        Jobs
      
      
        Locations
      
    

  

  

    

      

        
Products

        

          Enterprise
          Consumer
        

      

      

        
CMS Solutions

        

          Rails
          Python
          PHP
        

      

      

        
Hosting

        

          Shared
          Dedicated
        

      

      

        
Support

        

          E-mail Support
          FAQs
        

      

    

  


  

    
Text

    
A vertical menu item can include any type of text content.

    

      
        
Promotions

        
Check out our new promotions

      
      
        
Coupons

        
Check out our collection of coupons

      
      
        
Rebates

        
Visit our rebate forum for information on claiming rebates

      
    

  


  

    
Input

    
A menu item can contain an input inside of it

    

      

        

          
          
        

      

      

        

          
          
Go

        

      

    

  



  

    
Button

    
A menu item can contain a button inside of it


    

      

        
Sign up

      

      

        
Log-in

      

    

  



  

    
Link Item

    
A menu may contain a link item, or an item formatted as if it is a link.

    

      
        Visit Google
      
      

        Javascript Link
      

    

  


  

    
Dropdown Item

    
An item may contain a nested menu in a dropdown.

    

      
To have a dropdown open without Javascript, use the simple variation

    

    

      

        Categories
        
        

          Electronics
          Automotive
          Home
        

      

    

  


  

    
Popup Menu

    
A menu item may show a large menu, or additional content using a popup

    

      
        Browse
        
      
    

    

      

        

          
Fabrics

          

            Cashmere
            Linen
            Cotton
            Viscose
          

        

        

          
Size

          

            Small
            Medium
            Large
            Plus Sizes
          

        

        

          
Colored

          

            Neutrals
            Brights
            Pastels
          

        

        

          
Types

          

            Knitwear
            Outerwear
            Pants
            Shoes
          

        

      

    

  


  

    
Search

    
A menu can contain a search input

    

      

        

          
          
        

        

      

    

    

      
    

  


  

    
Menu

    
A menu may contain another menu group in the same level as menu items.

    

      Browse
      Submit
      

        Sign Up
        Help
      

    

  



  

    
Sub Menu

    
A menu item may contain another menu nested inside that acts as a grouped sub-menu.

    

      

        

      

      

        Home
        

          Search
          Add
          Remove
        

      

      
         Browse
      
      
        Messages
      
      

        More
        
        

           Edit Profile
           Choose Language
           Account Settings
        

      

    

  


  
States


  

    
Hover

    
A menu item can be hovered

    
Menu items are only hoverable if they are a links, or given the class name link

    

      
        A link
      
      

        div Link
      

    

  



  

    
Active

    
A menu item can be active

    

      

        Link
      

    

  



  
Variations


  

    
Fixed

    
A menu can be fixed to a side of its context

    
These examples use a an iframe, to prevent content from sticking to the browser viewport.

    
For more advanced behaviors consider using a sticky menu or visibility APIs.

    
    

      

        

          
        

        Features
        Testimonials
        Sign-in
      

      

        

          
        

        Features
        Testimonials
        Sign-in
      

      

      

    

  

  

    
    

      

        

          
        

        Features
        Testimonials
        Sign-in
      

      

        

          
        

        Features
        Testimonials
        Sign-in
      

      

      

    

  


  

    
Stackable

    
A menu can stack at mobile resolutions

    

      Stackable menus are intended to be used with only simple menu content. Stacked menus will not replicate all additional stylings for vertical menus like adjusting dropdown position.
    

    

      

        
      

      Features
      Testimonials
      Sign-in
    

  


  

    
Inverted

    
A menu may have its colors inverted to show greater contrast

    

      
        Home
      
      
        Messages
      
      
        Friends
      
    

  

  

    

      
        Home
      
      
        Messages
      
      
        Friends
      
    

  

  

    

      
        Home
      
      
        Messages
      
      
        Friends
      
    

  

  

    

      

        
          Home
        
        
          Messages
        
        
          Friends
        
      

    

  

  

    

      

        
          Home
        
        
          Messages
        
        
          Friends
        
      

    

  

  

    
Colored

    
Additional colors can be specified.

    

      Red
      Orange
      Yellow
      Olive
      Green
      Teal
    

    

      Blue
      Violet
      Purple
      Pink
      Brown
      Grey
    

  

  

    

      
        Home
      
      
        Messages
      
      
        Friends
      
    

    

      
        Home
      
      
        Messages
      
      
        Friends
      
    

    

      
        Home
      
      
        Messages
      
      
        Friends
      
    

    

      
        Home
      
      
        Messages
      
      
        Friends
      
    

    

      
        Home
      
      
        Messages
      
      
        Friends
      
    

    

      
        Home
      
      
        Messages
      
      
        Friends
      
    

    

      
        Home
      
      
        Messages
      
      
        Friends
      
    

    

      
        Home
      
      
        Messages
      
      
        Friends
      
    

    

      
        Home
      
      
        Messages
      
      
        Friends
      
    

    

      
        Home
      
      
        Messages
      
      
        Friends
      
    

    

      
        Home
      
      
        Messages
      
      
        Friends
      
    

    

      
        Home
      
      
        Messages
      
      
        Friends
      
    

  

  

    
These colors can also be inverted

    

      Red
      Orange
      Yellow
      Olive
      Green
      Teal
    

    

      Blue
      Violet
      Purple
      Pink
      Brown
      Grey
    

  

  

    

      
        Home
      
      
        Messages
      
      
        Friends
      
    

    

      
        Home
      
      
        Messages
      
      
        Friends
      
    

    

      
        Home
      
      
        Messages
      
      
        Friends
      
    

    

      
        Home
      
      
        Messages
      
      
        Friends
      
    

    

      
        Home
      
      
        Messages
      
      
        Friends
      
    

    

      
        Home
      
      
        Messages
      
      
        Friends
      
    

    

      
        Home
      
      
        Messages
      
      
        Friends
      
    

    

      
        Home
      
      
        Messages
      
      
        Friends
      
    

    

      
        Home
      
      
        Messages
      
      
        Friends
      
    

    

      
        Home
      
      
        Messages
      
      
        Friends
      
    

    

      
        Home
      
      
        Messages
      
      
        Friends
      
    

    

      
        Home
      
      
        Messages
      
      
        Friends
      
    

  



  

    
Icons

    
A menu may have just icons

    

      
        
      
      
        
      
      
        
      
    

    


    

      
        
      
      
        
      
      
        
      
    

  


  

    
Labeled Icon

    
A menu may have labeled icons

    

      
        
        Games
      
      
        
        Channels
      
      
        
        Videos
      
    

    


    

      
        
        Games
      
      
        
        Channels
      
      
        
        Videos
      
    

  



  

    
Fluid

    
A vertical menu may take the size of its container. (A horizontal menu does this by default) 

    

      Run
      Walk
      Bike
    

  


  

    
Compact

    
A menu can take up only the space necessary to fit its content

    

      
        
        Games
      
      
        
        Channels
      
      
        
        Videos
      
    

  

  

    

      
        
        Games
      
      
        
        Channels
      
      
        
        Videos
      
    

  



  

    
Evenly Divided

    
A menu may divide its items evenly

    

      Buy
      Sell
      Rent
    

  


  

    
A vertical menu can point to content adjacent to itself to show ownership

    

      
        Site Title
      
      

        Grouped Section
        

          Subsection 1
          Subsection 1
          Subsection 1
        

      

      

        Dropdown 
        

          
Choice 1

          
Choice 2

          
Choice 3

        

      

    

  



  

    
Attached

    
A menu may be attached to other content segments

    

      
        Tab 1
      
      
        Tab 2
      
    

    

      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.
    

  

  

    

      
        Section 1
      
      
        Section 2
      
    

    

      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.
    

    

      
        Section 1
      
      
        Section 2
      
    

  


  

    
Size

    
A menu can vary in size

    

      
        Home
      
      
        Messages
      
      

        

          Language 
          

            English
            Russian
            Spanish
          

        

        

            
Sign Up

        

      

    

  

  

    

      
        Home
      
      
        Messages
      
      

        

          Language 
          

            English
            Russian
            Spanish
          

        

        

            
Sign Up

        

      

    

  

  

    

      
        Home
      
      
        Messages
      
      

        

          Language 
          

            English
            Russian
            Spanish
          

        

        

            
Sign Up

        

      

    

  

  

    

      
        Home
      
      
        Messages
      
      

        

          Language 
          

            English
            Russian
            Spanish
          

        

        

            
Sign Up

        

      

    

  

  

    

      
        Home
      
      
        Messages
      
      

        

          Language 
          

            English
            Russian
            Spanish
          

        

        

            
Sign Up

        

      

    

  

  

    

      
        Home
      
      
        Messages
      
      

        

          Language 
          

            English
            Russian
            Spanish
          

        

        

            
Sign Up

        

      

    

  

  

    
A vertical menu can also vary in size

    

      
        
1

        Inbox
      
      
        
51

        Spam
      
      
        
1

        Updates
      
      

        

          
          
        

      

    

  

  

    

      
        
1

        Inbox
      
      
        
51

        Spam
      
      
        
1

        Updates
      
      

        

          
          
        

      

    

  

  

    

      
        
1

        Inbox
      
      
        
51

        Spam
      
      
        
1

        Updates
      
      

        

          
          
        

      

    

  

  

    

      
        
1

        Inbox
      
      
        
51

        Spam
      
      
        
1

        Updates
      
      

        

          
          
        

      

    

  


  
Items


  

    
Fitted

    
A menu item or menu can remove element padding, vertically or horizontally

    

      

        No padding whatsoever
      

      

        No horizontal padding
      

      

        No vertical padding
      

    

  



  

    
Borderless

    
A menu item or menu can have no borders

    

      1
      2
      3
      4
      5
      6
    

  







================================================
FILE: server/documents/collections/message.html.eco
================================================
---
layout      : 'default'
css         : 'message'
standalone  : true

element     : 'message'
elementType : 'collection'

title       : 'Message'
description : 'A message displays information that explains nearby content'
type        : 'UI Collection'

themes      : ['Default', 'GitHub', 'Gmail']
---



<%- @partial('header') %>




  
Types


  

    
Message

    
A basic message

    

      

        Changes in Service
      

      
We just updated our privacy policy here to better service our customers. We recommend reviewing the changes.

    

  


  

    
List Message

    
A message with a list

    

      

        New Site Features
      

      
    
        
  • You can now have cover images on blog pages
    • 
        
  • Drafts will now auto-save while writing
    • 
      

    

  


  

    

      Icon Message
      Flexbox
    

    
A message can contain an icon.

    

      
      

        

          Have you heard about our mailing list?
        

        
Get the best news in your e-mail every day.

      

    

  

  

    

      
      

        

          Just one second
        

        
We're fetching that content for you.

      

    

  


  

    
Dismissable Block

    
A message that the user can choose to hide

    

      
      

        Welcome back!
      

      
This is a special notification which you can dismiss if you're bored with it.

    

    

      
Dismissable blocks do not automatically close when using the close icon, this behavior must be defined using Javascript, for example:

      

      $('.message .close')
        .on('click', function() {
          $(this)
            .closest('.message')
            .transition('fade')
          ;
        })
      ;
      

    

  



  
States


  

    
Hidden

    
A message can be hidden

    

      
    

  


  

    
Visible

    
A message can be set to visible to force itself to be shown.

    

      
You can always see me

    

  


  
Variations


  

    
Floating

    
A message can float above content that it is related to

    

      
Way to go!

    

  


  

    
Compact

    
A message can only take up the width of its content.

    

      
Get all the best inventions in your e-mail every day. Sign up now!

    

  


  

    
Attached

    
A message can be formatted to attach itself to other content

    

      

        Welcome to our site!
      

      
Fill out the form below to sign-up for a new account

    

    

      

        

          
          
        

        

          
          
        

      

      

        
        
      

      

        
        
      

      

        

          
          
        

      

      
Submit

    

    

      
      Already signed up? Login here instead.
    

  


  

    
Warning

    
A message may be formatted to display warning messages.

    

      
      

        You must register before you can do that!
      

      Visit our registration page, then try again
    

  


  

    
Info

    
A message may be formatted to display information.

    

      
      

        Was this what you wanted?
      

      
    
        
  • It's good to see you again.
    • 
        
  • Did you know it's been a while?
    • 
      

    

  


  

    
Positive / Success

    
A message may be formatted to display a positive message.

    
      
      Positive/Success and Negative/Error messages by default use similar colors, but each has their own color  variables that can be distinguished in your theme.
    
    

      
      

        You are eligible for a reward
      

      
Go to your special offers page to see now.

    

  

  

    

      
      

        Your user registration was successful.
      

      
You may now log-in with the username you have chosen

    

  


  

    
Negative / Error 

    
A message may be formatted to display a negative message.

    

      
      

        We're sorry we can't apply that discount
      

      
That offer has expired
    

  

  

    

      
      

        There were some errors with your submission
      

      
    
        
  • You must include both a upper and lower case letters in your password.
    • 
        
  • You need to select your home country.
    • 
      

    

  


  

    
Colored

    
A message can be formatted to be different colors

    
Red

    
Orange

    
Yellow

    
Olive

    
Green

    
Teal

    
Blue

    
Violet

    
Purple

    
Pink

    
Brown

    
Black

  



  

    
Size

    
A message can have different sizes

    

      This is a mini message.
    

    

      This is a tiny message.
    

    

      This is a small message.
    

    

      This is large
    

    

      This is big
    

    

      This is huge
    

    

      This is massive
    

  







================================================
FILE: server/documents/collections/table.html.eco
================================================
---
layout      : 'default'
css         : 'table'
standalone  : true

element     : 'table'
elementType : 'collection'

title       : 'Table'
description : 'A table displays a collections of data grouped into rows'
type        : 'UI Collection'

themes      : ['Default', 'Basic', 'Classic', 'GitHub']
---




<%- @partial('header') %>




  
Types


  

    
Table

    
A standard table

    

      Tables will automatically stack their layouts for mobile devices. To disable this behavior, use the unstackable variation or tablet stackable to allow responsive adjustments for tablet.
    

    

      
        
Name
        Age
        Job
      

      
        

          James
          24
          Engineer
        

        

          Jill
          26
          Engineer
        

        

          Elyse
          24
          Designer
        

      
    

  


  


    

      
        
Evidence Rating
        Effect
        Efficacy
        Consensus
        Comments
      

      
        

          
            
A

          		
          
            Power Output
          
          
            

          		
          
            80% 

            18 studies
          		
          Creatine supplementation is the reference compound for increasing muscular creatine levels; there is variability in this increase, however, with some nonresponders.
        

        

          
            
A

          		
          
            Weight
          
          
            

          		
          
            100% 

            65 studies
          		
          Creatine is the reference compound for power improvement, with numbers from one meta-analysis to assess potency
        

      
      
        

          
        
      

    

  

  

    

      
        
Employee
        Correct Guesses
      

      
        

          
            

              
              

                Lena
                
Human Resources
              

            

          

          
            22
          
        

        

          
            

              
              

                Matthew
                
Fabric Design
              

            

          

          
            15
          
        

        

          
            

              
              

                Lindsay
                
Entertainment
              

            

          

          
            12
          
        

        

          
            

              
              

                Mark
                
Executive
              

            

          

          
            11
          
        

      
    

  

  

    

      
        

          Git Repository
        
      

      
        

          
             node_modules
          
          Initial commit
          10 hours ago
        

        

          
             test
          
          Initial commit
          10 hours ago
        

        

          
             build
          
          Initial commit
          10 hours ago
        

        

          
             package.json
          
          Initial commit
          10 hours ago
        

        

          
             Gruntfile.js
          
          Initial commit
          10 hours ago
        

      
    

  


  

    
Definition

    
A table may be formatted to emphasize a first column that defines a rows content

    
Definition tables are designed to display on a single background color. You can adjust this by changing @definitionPageBackground, or specifying a background color on the first cell

    

      
        

        Arguments
        Description
      

      
        

          reset rating
          None
          Resets rating to default value
        

        

          set rating
          rating (integer)
          Sets the current star rating to specified value
        

    

  

  

    

      
        

          
          Name
          Registration Date
          E-mail address
          Premium Plan
        

      
      
        

          
            

               
            

          		
          John Lilki
          September 14, 2013
          jhlilk22@yahoo.com
          No
        

        

          
            

               
            

          		
          Jamie Harington
          January 11, 2014
          jamieharingonton@yahoo.com
          Yes
        

        

          
            

               
            

          		
          Jill Lewis
          May 11, 2014
          jilsewris22@yahoo.com
          Yes
        

      
      
        

          
          
            

               Add User
            

            

              Approve
            

            

              Approve All
            

          		
        

      
    

  


  

    
Structured

    
A table can be formatted to display complex structured data


    

      
UI tables use border-collapse: separate to allow for tables to receive styles that cannot usually be applied to tables like border-radius. However this can cause some cell borders to appear missing with complex layouts that use rowspan or colspan and rows with varying column count.

      
ui structured table does not support some style features, but can correctly display all valid HTML table content.

    


    

      
        

          Name
          Type
          Files
          Languages
        

        

          Ruby
          JavaScript
          Python
        

      
      
        

          Alpha Team
          Project 1
          2
          
            
          
          
          
        

        

          Beta Team
          Project 1
          52
          
            
          
          
          
        

        

          Project 2
          12
          
          
            
          
          
        

        

          Project 3
          21
          
            
          
          
          
        

      
    

  



  
States


  

    
Positive / Negative

    
A cell or row may let a user know whether a value is good or bad

    

      
        

          Name
          Status
          Notes
        

      
      
        

          No Name Specified
          Unknown
          None
        

        

          Jimmy
           Approved
          None
        

        

          Jamie
          Unknown
           Requires call
        

        

          Jill
          Unknown
          None
        

      
    

  


  
Cells

  

    
Error

    
A cell or row may call attention to an error or a negative value

    

      
        

          Name
          Status
          Notes
        

      
      
        

          No Name Specified
          Approved
          None
        

        

          Jimmy
          Cannot pull data
          None
        

        

          Jamie
          Approved
           Classified
        

        

          Jill
          Approved
          None
        

      
    

  


  

    
Warning

    
A cell or row may warn a user

    

      
        

          Name
          Status
          Notes
        

      
      
        

          No Name Specified
          Unknown
          None
        

        

          Jimmy
           Requires Action
          None
        

        

          Jamie
          Unknown
           Hostile
        

        

          Jill
          Unknown
          None
        

      
    

  


  

    
Active

    
A cell or row can be active or selected by a user

    

      
        

          Name
          Status
          Notes
        

      
      
        

          Jamie
          Approved
          Requires call
        

        

          John
          Selected
          None
        

        

          Jamie
          Approved
          Requires call
        

        

          Jill
          Approved
          None
        

      
    

  

  

    
Disabled

    
A cell can be disabled

    

      
        

          Name
          Status
          Notes
        

      
      
        

          Jamie
          Approved
          Requires call
        

        

          John
          Selected
          None
        

        

          Jamie
          Approved
          Requires call
        

        

          Jill
          Approved
          None
        

      
    


  


  
Variations



  

    
Single Line

    
A table can specify that its cell contents should remain on a single line, and not wrap.

    

      
        

          Name
          Registration Date
          E-mail address
          Premium Plan
        

      
      
        

          John Lilki
          September 14, 2013
          jhlilk22@yahoo.com
          No
        

        

          Jamie Harington
          January 11, 2014
          jamieharingonton@yahoo.com
          Yes
        

        

          Jill Lewis
          May 11, 2014
          jilsewris22@yahoo.com
          Yes
        

      
    

  




  

    

      Fixed
    

    
A table can use table-layout: fixed a special faster form of table rendering that does not resize table cells based on content.

    

      
        
Name
        Status
        Description
      

      
        

          John
          Approved
          John is an interesting boy but sometimes you don't really have enough room to describe everything you'd like
        

        

          Jamie
          Approved
          Jamie is a kind girl but sometimes you don't really have enough room to describe everything you'd like
        

        

          Jill
          Denied
          Jill is an alright girl but sometimes you don't really have enough room to describe everything you'd like
        

      
    

  

  

    

      Fixed single line tables will automatically ensure content that does not fit in a single line will receive "..." ellipsis
    

    

      
        
Name
        Status
        Description
      

      
        

          John
          Approved
          This is much too long to fit I'm sorry about that
        

        

          Jamie
          Approved
          Shorter description
        

        

          Jill
          Denied
          Shorter description
        

      
    

  


  

    
Stacking

    
A table can specify how it stacks table content responsively


    

      
        

          Name
          Status
          Notes
        

      
      
        

          John
          Approved
          None
        

        

          Jamie
          Approved
          Requires call
        

        

          Jill
          Denied
          None
        

      
    


    

      
        

          Name
          Status
          Notes
        

      
      
        

          John
          Approved
          None
        

        

          Jamie
          Approved
          Requires call
        

        

          Jill
          Denied
          None
        

      
    


  



  

    
Selectable Row

    
A table can have its rows appear selectable

    

      
        

          Name
          Status
          Notes
        

      
      
        

          John
          No Action
          None
        

        

          Jamie
          Approved
          Requires call
        

        

          Jill
          Denied
          None
        

        

          John
          No Action
          None
        

        

          Jamie
          Approved
          Requires call
        

        

          Jill
          Denied
          None
        

      
    

  

  

    

      
        

          Name
          Status
          Notes
        

      
      
        

          John
          Approved
          None
        

        

          Jamie
          Approved
          Requires call
        

        

          Jill
          Denied
          None
        

      
    


  

  

    
Selectable Cell

    
A table cell can be selectable

    
Using an a link inside a selectable cell will automatically make the hit box the entire cell area. By default links will inherit their cell color.

    

      
        

          Name
          Status
          Edit
        

      
      
        

          John
          No Action
          
            Edit
          
        

        

          Jamie
          Approved
          
            Edit
          
        

        

          Jill
          Denied
          
            Edit
          
        

        

          John
          No Action
          
            Requires change
          
        

        

          Jamie
          Approved
          
            Approve
          
        

        

          Jill
          Denied
          
            Remove
          
        

      
    

  


  

    
Vertical Alignment

    
A table header, row, or cell can adjust its vertical alignment

    

      
        

          Name
          Status
          Notes
        

      
      
        

          John
          Approved
          
            Notes

            1

            2

          		
        

        

          Jamie
          Approved
          
            Notes

            1

            2

          		
        

      
    

  


  

    
Text Alignment

    
A table header, row, or cell can adjust its text alignment

    

      
        

          Name
          Status
          Notes
        

      
      
        

          John
          Approved
          None
        

        

          Jamie
          Approved
          Requires call
        

        

          Jill
          Denied
          None
        

      
    

  


  

    
Striped

    
A table can stripe alternate rows of content with a darker color to increase contrast

    

      
        

          Name
          Date Joined
          E-mail
          Called
        

      
      
        

          John Lilki
          September 14, 2013
          jhlilk22@yahoo.com
          No
        

        

          Jamie Harington
          January 11, 2014
          jamieharingonton@yahoo.com
          Yes
        

        

          Jill Lewis
          May 11, 2014
          jilsewris22@yahoo.com
          Yes
        

        

          John Lilki
          September 14, 2013
          jhlilk22@yahoo.com
          No
        

        

          John Lilki
          September 14, 2013
          jhlilk22@yahoo.com
          No
        

        

          Jamie Harington
          January 11, 2014
          jamieharingonton@yahoo.com
          Yes
        

        

          Jill Lewis
          May 11, 2014
          jilsewris22@yahoo.com
          Yes
        

        

          John Lilki
          September 14, 2013
          jhlilk22@yahoo.com
          No
        

      
    

  


  

    
Celled

    
A table may be divided each row into separate cells

    

      
        

          Name
          Status
          Notes
        

      
      
        

          John
          Approved
          None
        

        

          Jamie
          Approved
          Requires call
        

        

          Jill
          Denied
          None
        

      
      
        
3 People
        2 Approved
        
      

    

  


  

    
Basic

    
A table can reduce its complexity to increase readability.

    

      
        

          Name
          Status
          Notes
        

      
      
        

          John
          Approved
          None
        

        

          Jamie
          Approved
          Requires call
        

        

          Jill
          Denied
          None
        

      
    

  

  

    

      
        

          Name
          Status
          Notes
        

      
      
        

          John
          Approved
          None
        

        

          Jamie
          Approved
          Requires call
        

        

          Jill
          Denied
          None
        

      
    

  


  

    
Collapsing Cell

    
A cell can be collapsing so that it only uses as much space as required

    

      
      

        To ensure icons don't wrap to a separate line you must either specify collapsing on the widest row in the collapsing column, or on all rows
      

    


    

      
        

          
             node_modules
          
          Initial commit
          10 hours ago
        

        

          
             test
          
          Initial commit
          10 hours ago
        

        

          
             build
          
          Initial commit
          10 hours ago
        

      
    

  


  

    
Column Count

    
A table can specify its column count to divide its content evenly

    

      
        
Name
        Status
        Age
        Gender
        Notes
      

      
        

          John
          Approved
          22
          Male
          None
        

        

          Jamie
          Approved
          32
          Male
          Requires call
        

        

          Jill
          Denied
          22
          Female
          None
        

      
      
        
3 People
        2 Approved
        
        
        
      

    

  


  

    
Column Width

    
A table can specify the width of individual columns independently.

    
Tables use a 16 column grid similar to ui grid

    

      
        
Name
        Status
      

      
        

          John
          Approved
        

        

          Jamie
          Approved
        

        

          Jill
          Denied
        

      
      
        
3 People
        2 Approved
      

    

  


  

    
Collapsing

    
A table can be collapsing, taking up only as much space as its rows.

    

      
        

          Name
          Status
          Notes
        

      
      
        

          John
          Approved
          None
        

        

          Jamie
          Approved
          Requires call
        

        

          Jill
          Denied
          None
        

      
      
        
3 People
        2 Approved
        
      

    

  


  

    
Colored

    
A table can be given a color to distinguish it from other tables.

    

      
        
Food
        Calories
        Protein
      

        

          Apples
          200
          0g
        

        

          Orange
          310
          0g
        

      
    

    

      
        
Food
        Calories
        Protein
      

        

          Apples
          200
          0g
        

        

          Orange
          310
          0g
        

      
    

    

      
        
Food
        Calories
        Protein
      

        

          Apples
          200
          0g
        

        

          Orange
          310
          0g
        

      
  

    

      
        
Food
        Calories
        Protein
      

        

          Apples
          200
          0g
        

        

          Orange
          310
          0g
        

      
    

    

      
        
Food
        Calories
        Protein
      

        

          Apples
          200
          0g
        

        

          Orange
          310
          0g
        

      
    

    

      
        
Food
        Calories
        Protein
      

        

          Apples
          200
          0g
        

        

          Orange
          310
          0g
        

      
    

    

      
        
Food
        Calories
        Protein
      

        

          Apples
          200
          0g
        

        

          Orange
          310
          0g
        

      
    

    

      
        
Food
        Calories
        Protein
      

        

          Apples
          200
          0g
        

        

          Orange
          310
          0g
        

      
    

    

      
        
Food
        Calories
        Protein
      

        

          Apples
          200
          0g
        

        

          Orange
          310
          0g
        

      
    

    

      
        
Food
        Calories
        Protein
      

        

          Apples
          200
          0g
        

        

          Orange
          310
          0g
        

      
    

    

      
        
Food
        Calories
        Protein
      

        

          Apples
          200
          0g
        

        

          Orange
          310
          0g
        

      
    

    

      
        
Food
        Calories
        Protein
      

        

          Apples
          200
          0g
        

        

          Orange
          310
          0g
        

      
    

  


  

    
Inverted

    
A table's colors can be inverted

    

      
        

          Name
          Status
          Notes
        

      
      
        

          John
          Approved
          None
        

        

          Jamie
          Approved
          Requires call
        

        

          Jill
          Denied
          None
        

      
      
        
3 People
        2 Approved
        
      

    

  

  

    

      
        
Food
        Calories
        Protein
      

        

          Apples
          200
          0g
        

        

          Orange
          310
          0g
        

      
    

    

      
        
Food
        Calories
        Protein
      

        

          Apples
          200
          0g
        

        

          Orange
          310
          0g
        

      
    

    

      
        
Food
        Calories
        Protein
      

        

          Apples
          200
          0g
        

        

          Orange
          310
          0g
        

      
    

    

      
        
Food
        Calories
        Protein
      

        

          Apples
          200
          0g
        

        

          Orange
          310
          0g
        

      
    

    

      
        
Food
        Calories
        Protein
      

        

          Apples
          200
          0g
        

        

          Orange
          310
          0g
        

      
    

    

      
        
Food
        Calories
        Protein
      

        

          Apples
          200
          0g
        

        

          Orange
          310
          0g
        

      
    

    

      
        
Food
        Calories
        Protein
      

        

          Apples
          200
          0g
        

        

          Orange
          310
          0g
        

      
    

    

      
        
Food
        Calories
        Protein
      

        

          Apples
          200
          0g
        

        

          Orange
          310
          0g
        

      
    

    

      
        
Food
        Calories
        Protein
      

        

          Apples
          200
          0g
        

        

          Orange
          310
          0g
        

      
    

    

      
        
Food
        Calories
        Protein
      

        

          Apples
          200
          0g
        

        

          Orange
          310
          0g
        

      
    

    

      
        
Food
        Calories
        Protein
      

        

          Apples
          200
          0g
        

        

          Orange
          310
          0g
        

      
    

    

      
        
Food
        Calories
        Protein
      

        

          Apples
          200
          0g
        

        

          Orange
          310
          0g
        

      
    

  


  

    
Sortable

    
A table may allow a user to sort contents by clicking on a table header.


    
Adding the class ascending or descending to the th will show the user the sorting direction. This example uses a modified version of the kylefox's tablesort plugin to provide the proper class names. To make sortable tables work, include this javascript into your page and call $('table').tablesort() when the DOM is ready.
    


    

      
        

          Name
          Status
          Notes
        

      
      
        

          John
          No Action
          None
        

        

          Jamie
          Approved
          Requires call
        

        

          Jill
          Denied
          None
        

      
      
        
3 People
        2 Approved
        
      

    

  

  

    
Full-Width Header / Footer 

    
A definition table can have a full width header or footer, filling in the gap left by the first column

    

      
        

          
          Name
          Registration Date
          E-mail address
          Premium Plan
        

      
      
        

          
            

               
            

          		
          John Lilki
          September 14, 2013
          jhlilk22@yahoo.com
          No
        

        

          
            

               
            

          		
          Jamie Harington
          January 11, 2014
          jamieharingonton@yahoo.com
          Yes
        

        

          
            

               
            

          		
          Jill Lewis
          May 11, 2014
          jilsewris22@yahoo.com
          Yes
        

      
      
        

          
          
            

               Add User
            

            

              Approve
            

            

              Approve All
            

          		
        

      
    

  

  

    
Padded

    
A table may sometimes need to be more padded for legibility

    

      
        

          Name
          Status
          Notes
        

      
      
        

          John
          Approved
          He is a very nice guy and I enjoyed talking to him on the telephone. I hope we get to talk again.
        

        

          Jamie
          Approved
          Jamie was not interested in purchasing our product.
        

      
    

  

  

    

      
        

          Name
          Status
          Notes
        

      
      
        

          John
          Approved
          He is a very nice guy and I enjoyed talking to him on the telephone. I hope we get to talk again.
        

        

          Jamie
          Approved
          Jamie was not interested in purchasing our product.
        

      
    

  

  

    
Compact

    
A table may sometimes need to be more compact to make more rows visible at a time

    

      
        

          Name
          Status
          Notes
        

      
      
        

          John
          Approved
          None
        

        

          Jamie
          Approved
          Requires call
        

        

          John
          Approved
          None
        

        

          Jamie
          Approved
          Requires call
        

        

          John
          Approved
          None
        

        

          Jamie
          Approved
          Requires call
        

        

          John
          Approved
          None
        

        

          Jamie
          Approved
          Requires call
        

      
    

  

  

    

      
        
Name
        Status
        Another Status
        Notes
      

      
        

          John
          Approved
          Approved
          None
        

        

          Jamie
          Approved
          Approved
          Requires call
        

        

          John
          Approved
          Approved
          None
        

        

          Jamie
          Approved
          Approved
          Requires call
        

        

          John
          Approved
          Approved
          None
        

        

          Jamie
          Approved
          Approved
          Requires call
        

        

          John
          Approved
          Approved
          None
        

        

          Jamie
          Approved
          Approved
          Requires call
        

      
    

  


  

    
Size

    
A table can also be small or large

    

      
        

          Name
          Status
          Notes
        

      
      
        

          John
          Approved
          None
        

        

          Jamie
          Approved
          Requires call
        

        

          Jill
          Denied
          None
        

      
      
        
3 People
        2 Approved
        
      

    

  

  

    

      
        

          Name
          Status
          Notes
        

      
      
        

          John
          Approved
          None
        

        

          Jamie
          Approved
          Requires call
        

        

          Jill
          Denied
          None
        

      
      
        
3 People
        2 Approved
        
      

    

  





================================================
FILE: server/documents/elements/button.html.eco
================================================
---
layout      : 'default'
css         : 'button-page'
element     : 'button'
elementType : 'element'
standalone  : true

title       : 'Button'
description : 'A button indicates a possible user action'
type        : 'UI Element'

themes      : ['Default', 'Classic', 'Basic', 'Bootstrap3', 'Twitter', 'Raised', 'Chubby', 'Round', 'Amazon', 'Material', 'GitHub']
---




<%- @partial('header') %>




  
Types


  
  

    

      Although any tag can be used for a button, it will only be keyboard focusable if you use a <button> tag or you add the property tabindex="0". Keyboard accessible buttons will preserve focus styles after click, which may be visually jarring.

    

    
    

      Focusable
    

  


  

    
Emphasis

    
A button can be formatted to show different levels of emphasis

    
Setting your brand colors to primary and secondary color variables in site.variables will allow you to use your color theming for UI elements

    
    
  

  

    
    
  


  

    
Animated

    
A button can animate to show hidden content

    
The button will be automatically sized according to the visible content size. Make sure there is enough room for the hidden content to show

    

      
Next

      
    

    

      
      

        
      

    

    

      
Sign-up for a Pro account

      
    

  


  

    
Labeled

    
A button can appear alongside a label

    

      

         Like
      

      
        2,048
      
    

    

      
        2,048
      
      

         Like
      

    

    

      
        1,048
      
      

        
      

    

  

  

    

      

         Like
      

      
        1,048
      
    

    

      

         Forks
      

      
        1,048
      
    

  


  

    
Icon

    
A button can have only an icon

    
  


  

    
Labeled Icon

    
A button can use an icon as a label

    
    
    
  


  

    
Basic

    
A basic button is less pronounced

    
  

  

    
    
    
    
  

  

    
    
    
    
    
    
    
    
    
    
    
    
    
  


  

    
Inverted

    
A button can be formatted to appear on dark backgrounds

    

      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
    

  

  

    

      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
    

  



  
Groups


  

    
Buttons

    
Buttons can exist together as a group

    

      
      
      
    

  


  

    
Icon Buttons

    
Button groups can show groups of icons

    

      
      
      
      
    

    

      
      
      
    

  


  
Content


  

    
Conditionals

    
Button groups can contain conditionals

    

      
      

      
    

  

  

    

      Or buttons can have their text localized, or adjusted by using the data-text attribute. If the size of the conditional changes you will need to adjust @orCircleSize
    

    

      
      

      
    

  


  
States


  

    
Active

    
A button can show it is currently the active user selection

    
  


  

    
Disabled

    
A button can show it is currently unable to be interacted with

    
  


  

    
Loading

    
A button can show a loading indicator

    
    
    
    
  


  
Variations


  

    
Social

    
A button can be formatted to link to a social website

    
    
    
    
    
    
    
  



  

    
Size

    
A button can have different sizes

    
    
    
    
    
    
    
    
  


  

    
Floated

    
A button can be aligned to the left or right of its container

    
    
  



  

    
Colored

    
A button can have different colors

    
    
    
    
    
    
    
    
    
    
    
    
    
  


  

    
Compact

    
A button can reduce its padding to fit into tighter spaces

    
    
    
  


  

    
Toggle

    
A button can be formatted to toggle on and off

    
  


  

    
Positive

    
A button can hint towards a positive consequence

    
  


  

    
Negative

    
A button can hint towards a negative consequence

    
  


  

    
Fluid

    
A button can take the width of its container

    
  


  

    
Circular

    
A button can be circular

    
  

  

    
    
    
    
  


  

    
Vertically Attached

    
A button can be attached to the top or bottom of other content

    
Top

    

      
    

    
Bottom

  


  

    

        
One

        
Two

    

    

      
    

    

        
One

        
Two

    

  


  

    
Horizontally Attached

    
A button can be attached to the left or right of other content

    
    
  



  
Group Variations


  

    
Vertical Buttons

    
Groups can be formatted to appear vertically

    

      
      
      
      
    

  


  

    
Icon Buttons

    
Groups can be formatted as icons

    

      
      
      
    

  


  

    
Labeled Icon Buttons

    
Groups can be formatted as labeled icons

    

      
      
      
    

  

  

    
Mixed Group

    
Groups can be formatted to use multiple button types together

    

      
      
      
    

  



  

    
Equal Width

    
Groups can have their widths divided evenly

    

      
      
      
      
      
    

    

    

      
      
      
    

  



  

    
Colored Buttons

    
Groups can have a shared color

    

      
      
      
    

  


  

    
Basic Buttons

    
A button group can be less pronounced

    

      
One

      
Two

      
Three

    

    

    

      
      
      
    

  

  

    

      
      
      
    

  


  

    
Group Sizes

    
Groups can have a shared size

    

      
      
      
    

  

  

    

      
      
      
      
    

  

  

    

      
      

      
    

  






================================================
FILE: server/documents/elements/container.html.eco
================================================
---
layout      : 'default'
css         : 'basic minimal'
element     : 'container'
elementType : 'element'
standalone  : true

title       : 'Container'
description : 'A container limits content to a maximum width'
type        : 'UI Element'

themes      : ['Default']
---




<%- @partial('header', { tabs: {  introduction: 'Introduction', definition: 'Definition', examples: 'Examples' } }) %>




  


    
Introduction


    


      
When To Use


      
A container is an element designed to contain page elements to a reasonable maximum width based on the size of a user's screen. This is useful to couple with other UI elements like grid or menu to restrict their width to a reasonable size for display.



      
Container Sizes


      
Containers are designed to responsively adjust their maximum width based on the size of the screen on which they are appearing.


      

        
          

            Mobile
            Tablet
            Small Monitor
            Large Monitor
        

        
          

            Width
            100%
            
              723px
              
            
            
              933px
              
            
            
              1127px
              
            
          

          

            Gutter Size
            1em
            Fluid
            Fluid
            Fluid
          

          

            Variable
            $largestMobileScreen
            $mobileBreakpoint
            $smallMonitorBreakpoint
            $largeMonitorBreakpoint
          

          

            Device Width
            below 768px
            768px - 991px
            992px - 1200px
            above 1200px
          

        
      

      
Responsive Visibility

      
Since variations in Semantic UI are only assigned in the scope of components, there are no "free floating" responsive class names, however some components include responsive variations to help ease responsive design. Grid for example, includes responsive classes for hiding or showing column, row based on device type.


      See grid responsive variations 

      
Determining Maximum Widths


      
Containers appear at the same width at each device size. This size is calculated programmatically by determining the maximum device width available within a device breakpoint, given a desired minimum gutter size.


      
For example to determine tablet container size the following formula is used:


      

      /* In site.variables */
      @tabletBreakpoint : 768px;
      @scrollbarWidth : 17px; /* This is a constant */

      /* In container.variables */
      @tabletMinimumGutter : (@emSize  * 1); /* require 1em gutter */
      @tabletWidth : @tabletBreakpoint - (@tabletMinimumGutter * 2) - @scrollbarWidth;
      


      
This is the same as 768px - (14px * 2) - 17px or 723px


      
Adjusting site breakpoints in site.variables to use custom values will automatically adjust container widths.



    

  








  


    
Types


    

      
Container

      
A standard container

    


    

      

        

      

    


  


  

    
Lorem ipsum dolor sit amet, consectetuer adipiscing
    elit. Aenean commodo ligula eget dolor. Aenean massa
    strong. Cum sociis natoque penatibus
    et magnis dis parturient montes, nascetur ridiculus
    mus. Donec quam felis, ultricies nec, pellentesque
    eu, pretium quis, sem. Nulla consequat massa quis
    enim. Donec pede justo, fringilla vel, aliquet nec,
    vulputate eget, arcu. In enim justo, rhoncus ut,
    imperdiet a, venenatis vitae, justo. Nullam dictum
    felis eu pede link
    mollis pretium. Integer tincidunt. Cras dapibus.
    Vivamus elementum semper nisi. Aenean vulputate
    eleifend tellus. Aenean leo ligula, porttitor eu,
    consequat vitae, eleifend ac, enim. Aliquam lorem ante,
    dapibus in, viverra quis, feugiat a, tellus. Phasellus
    viverra nulla ut metus varius laoreet. Quisque rutrum.
    Aenean imperdiet. Etiam ultricies nisi vel augue.
    Curabitur ullamcorper ultricies nisi.

  


  


    

      
Text Container

      
A container can reduce its maximum width to more naturally accomodate a single column of text

      

        A text container is a simpler markup alternative to using a grid with a single column, and is designed to have a reasonable maximum width for displaying flowing text
      

    


    

      

      

    

  


  

    
Header

    
Lorem ipsum dolor sit amet, consectetuer adipiscing
    elit. Aenean commodo ligula eget dolor. Aenean massa
    strong. Cum sociis natoque penatibus
    et magnis dis parturient montes, nascetur ridiculus
    mus. Donec quam felis, ultricies nec, pellentesque
    eu, pretium quis, sem. Nulla consequat massa quis
    enim. Donec pede justo, fringilla vel, aliquet nec,
    vulputate eget, arcu. In enim justo, rhoncus ut,
    imperdiet a, venenatis vitae, justo. Nullam dictum
    felis eu pede link
    mollis pretium. Integer tincidunt. Cras dapibus.
    Vivamus elementum semper nisi. Aenean vulputate
    eleifend tellus. Aenean leo ligula, porttitor eu,
    consequat vitae, eleifend ac, enim. Aliquam lorem ante,
    dapibus in, viverra quis, feugiat a, tellus. Phasellus
    viverra nulla ut metus varius laoreet. Quisque rutrum.
    Aenean imperdiet. Etiam ultricies nisi vel augue.
    Curabitur ullamcorper ultricies nisi.

    
Lorem ipsum dolor sit amet, consectetuer adipiscing
    elit. Aenean commodo ligula eget dolor. Aenean massa
    strong. Cum sociis natoque penatibus
    et magnis dis parturient montes, nascetur ridiculus
    mus. Donec quam felis, ultricies nec, pellentesque
    eu, pretium quis, sem. Nulla consequat massa quis
    enim. Donec pede justo, fringilla vel, aliquet nec,
    vulputate eget, arcu. In enim justo, rhoncus ut,
    imperdiet a, venenatis vitae, justo. Nullam dictum
    felis eu pede link
    mollis pretium. Integer tincidunt. Cras dapibus.
    Vivamus elementum semper nisi. Aenean vulputate
    eleifend tellus. Aenean leo ligula, porttitor eu,
    consequat vitae, eleifend ac, enim. Aliquam lorem ante,
    dapibus in, viverra quis, feugiat a, tellus. Phasellus
    viverra nulla ut metus varius laoreet. Quisque rutrum.
    Aenean imperdiet. Etiam ultricies nisi vel augue.
    Curabitur ullamcorper ultricies nisi.

  


  



    
Variations


    

      
Text Alignment

      
A container can specify its text alignment


    


    

      

        

      

      

        

      

      

        

      

      

        

      

    


    

      Left Aligned
    

    

      Center Aligned
    

    

      Right Aligned
    

    

      Justified
      

      
Lorem ipsum dolor sit amet, consectetuer adipiscing
      elit. Aenean commodo ligula eget dolor. Aenean massa
      strong. Cum sociis natoque penatibus
      et magnis dis parturient montes, nascetur ridiculus
      mus. Donec quam felis, ultricies nec, pellentesque
      eu, pretium quis, sem. Nulla consequat massa quis
      enim. Donec pede justo, fringilla vel, aliquet nec,
      vulputate eget, arcu. In enim justo, rhoncus ut,
      imperdiet a, venenatis vitae, justo. Nullam dictum
      felis eu pede link
      mollis pretium. Integer tincidunt. Cras dapibus.
      Vivamus elementum semper nisi. Aenean vulputate
      eleifend tellus. Aenean leo ligula, porttitor eu,
      consequat vitae, eleifend ac, enim. Aliquam lorem ante,
      dapibus in, viverra quis, feugiat a, tellus. Phasellus
      viverra nulla ut metus varius laoreet. Quisque rutrum.
      Aenean imperdiet. Etiam ultricies nisi vel augue.
      Curabitur ullamcorper ultricies nisi.

      
Lorem ipsum dolor sit amet, consectetuer adipiscing
      elit. Aenean commodo ligula eget dolor. Aenean massa
      strong. Cum sociis natoque penatibus
      et magnis dis parturient montes, nascetur ridiculus
      mus. Donec quam felis, ultricies nec, pellentesque
      eu, pretium quis, sem. Nulla consequat massa quis
      enim. Donec pede justo, fringilla vel, aliquet nec,
      vulputate eget, arcu. In enim justo, rhoncus ut,
      imperdiet a, venenatis vitae, justo. Nullam dictum
      felis eu pede link
      mollis pretium. Integer tincidunt. Cras dapibus.
      Vivamus elementum semper nisi. Aenean vulputate
      eleifend tellus. Aenean leo ligula, porttitor eu,
      consequat vitae, eleifend ac, enim. Aliquam lorem ante,
      dapibus in, viverra quis, feugiat a, tellus. Phasellus
      viverra nulla ut metus varius laoreet. Quisque rutrum.
      Aenean imperdiet. Etiam ultricies nisi vel augue.
      Curabitur ullamcorper ultricies nisi.

    


    

      
Fluid

      
A fluid container has no maximum width

      
Fluid containers are useful for setting text alignment, or other variations on unstyled content


      

        

          Fluid
        

      

    


  


  

    
Dogs Roles with Humans

    
Domestic dogs inherited complex behaviors, such as bite inhibition, from their wolf ancestors, which would have been pack hunters with complex body language. These sophisticated forms of social cognition and communication may account for their trainability, playfulness, and ability to fit into human households and social situations, and these attributes have given dogs a relationship with humans that has enabled them to become one of the most successful species on the planet today.

    
The dogs' value to early human hunter-gatherers led to them quickly becoming ubiquitous across world cultures. Dogs perform many roles for people, such as hunting, herding, pulling loads, protection, assisting police and military, companionship, and, more recently, aiding handicapped individuals. This impact on human society has given them the nickname "man's best friend" in the Western world. In some cultures, however, dogs are also a source of meat.

  


  









  


    
Examples


    

      
Containers Using Grids

      
A container can be combined with a grid allowing you to use all of the layout and alignment available for grids including responsive patterns.

    


    

      

        

          

          

        

        

          

          

        

        

          

          

        

        

          

          

        

      

    

  


  

    

      
      
      
      
      
    

    

      
      
      
      
      
    

    

      
      
      
      
      
    

    

      
      
      
      
      
    

  


  

    

      
Centered Menu

      
A container can be used inside of a menu to make sure menu items appear inline with page contents. Using responsive variations like stackable menu can help make contents adjust to different device sizes.

    


    

      

        

          
             Home
          
          
             Browse
          
          
             Messages
          
          

            More
            
            

               Edit Profile
               Choose Language
               Account Settings
            

          

          

            

          

        

      

    

  


  

    

      
         Home
      
      
         Browse
      
      
         Messages
      
      

        More
        
        

           Edit Profile
           Choose Language
           Account Settings
        

      

      

        

      

    

  


  


    

      
Container Segment

      
A container can be used with a segment

    


    

      

        
Dogs Roles with Humans

        

        

      

    

  


  

    
Dogs Roles with Humans

    
Domestic dogs inherited complex behaviors, such as bite inhibition, from their wolf ancestors, which would have been pack hunters with complex body language. These sophisticated forms of social cognition and communication may account for their trainability, playfulness, and ability to fit into human households and social situations, and these attributes have given dogs a relationship with humans that has enabled them to become one of the most successful species on the planet today.

    
The dogs' value to early human hunter-gatherers led to them quickly becoming ubiquitous across world cultures. Dogs perform many roles for people, such as hunting, herding, pulling loads, protection, assisting police and military, companionship, and, more recently, aiding handicapped individuals. This impact on human society has given them the nickname "man's best friend" in the Western world. In some cultures, however, dogs are also a source of meat.

  



  





================================================
FILE: server/documents/elements/divider.html.eco
================================================
---
layout      : 'default'
css         : 'divider'
standalone  : true

element     : 'divider'
elementType : 'element'

title       : 'Divider'
description : 'A divider visually segments content into groups'
type        : 'UI Element'

themes      : ['default']
---

<%- @partial('header') %>





  
Types

  

    
Divider

    
A standard divider

    
To add a divider between parts of a grid use a divided grid variation.

    
    

    
  


  

    
Vertical Divider

    
A divider can segment content vertically

    

      Vertical dividers requires position: relative on the element that you would like to contain the divider
    

    

      Due to a change in W3C implementation of absolutely positioned elements in flex containers vertical dividers now currently only support 50/50 splits automatically, and only if not positioned as direct children of flex containers (like grid).
    

    

      

        

          
          
          
          
        

        

          
          
          
          
        

      

      

        and
      

    

  

  

    

      A vertical divider will automatically swap to a horizontal divider at mobile resolutions when used inside a stackable grid
    

    

      

        

          

            

              
              

                
                
              

            

            

              
              

                
                
              

            

            
Login

          

        

        

          

            
            Sign Up
          

        

      

      

        Or
      

    

  


  

    
Horizontal Divider

    
A divider can segment content horizontally

    
Horizontal dividers can also be used in combination with headers and icons to create different styles of dividers.
    

    
Dividers will automatically vary the size of their dividing rules to match the length of your text

    

      

        
        
        
Search

      

      

        Or
      

      

        Create New Order
        
      

    

  

  

    

      
      Description
    

    
Doggie treats are good for all times of the year. Proven to be eaten by 99.9% of all dogs worldwide.

    

      
      Specifications
    

    

      
        

          Size
          1" x 2"
        

        

          Weight
          6 ounces
        

        

          Color
          Yellowish
        

        

          Odor
          Not Much Usually
        

      
    

  


  
Variations


  

    
Inverted

    
A divider can have its colors inverted

    

      
      

      
      

        Horizontal
      

    

  


  

    
Fitted

    
A divider can be fitted, without any space above or below it.

    

      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
      

      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
    

  


  

    
Hidden

    
A hidden divider divides content without creating a dividing line

    
Section One

    
    
    
Section Two

    
  


  

    
Section

    
A divider can provide greater margins to divide sections of content

    
Section One

    
    

    
Section Two

    
  


  

    
Clearing

    
A divider can clear the contents above it

    

      
Floated Content

      

      
    

  






================================================
FILE: server/documents/elements/flag.html.eco
================================================
---
layout      : 'default'
css         : 'flag-page'
element     : 'flag'
elementType : 'element'
standalone  : true

title       : 'Flag'
description : 'A flag is used to represent a political state'
type        : 'UI Element'

---


<%- @partial('header') %>




  


    
Definition


    

      
Flag

      
A flag can use the two digit country code, the full name, or a common alias

      

        
        
        
      

    


    
Types

    

      
Many flag sets use SVG to render flags at multiple sizes. However svg flags usually appear blurry or render improperly at smaller sizes. Semantic's default theme uses an image sprite solution which provides crisper icons, but without the ability to resize

    

    

      
        
Flag
        Name
        ISO 3166-2 Code ?
        Additional Aliases
      

      
      

        
        Andorra
        ad
        
      

      

        
        U.A.E
        ae
        United Arab Emirates
      

      

        
        Afghanistan
        af
        
      

      

        
        Antigua
        ag
        
      

      

        
        Anguilla
        ai
        
      

      

        
        Albania
        al
        
      

      

        
        Armenia
        am
        
      

      

        
        Netherlands Antilles
        an
        
      

      

        
        Angola
        ao
        
      

      

        
        Argentina
        ar
        
      

      

        
        American Samoa
        as
        
      

      

        
        Austria
        at
        
      

      

        
        Australia
        au
        
      

      

        
        Aruba
        aw
        
      

      

        
        Aland Islands
        ax
        
      

      

        
        Azerbaijan
        az
        
      

      

        
        Bosnia
        ba
        
      

      

        
        Barbados
        bb
        
      

      

        
        Bangladesh
        bd
        
      

      

        
        Belgium
        be
        
      

      

        
        Burkina Faso
        bf
        
      

      

        
        Bulgaria
        bg
        
      

      

        
        Bahrain
        bh
        
      

      

        
        Burundi
        bi
        
      

      

        
        Benin
        bj
        
      

      

        
        Bermuda
        bm
        
      

      

        
        Brunei
        bn
        
      

      

        
        Bolivia
        bo
        
      

      

        
        Brazil
        br
        
      

      

        
        Bahamas
        bs
        
      

      

        
        Bhutan
        bt
        
      

      

        
        Bouvet Island
        bv
        
      

      

        
        Botswana
        bw
        
      

      

        
        Belarus
        by
        
      

      

        
        Belize
        bz
        
      

      

        
        Canada
        ca
        
      

      

        
        Cocos Islands
        cc
        
      

      

        
        Congo
        cd
        
      

      

        
        Central African Republic
        cf
        
      

      

        
        Congo Brazzaville
        cg
        
      

      

        
        Switzerland
        ch
        
      

      

        
        Cote Divoire
        ci
        
      

      

        
        Cook Islands
        ck
        
      

      

        
        Chile
        cl
        
      

      

        
        Cameroon
        cm
        
      

      

        
        China
        cn
        
      

      

        
        Colombia
        co
        
      

      

        
        Costa Rica
        cr
        
      

      

        
        Serbia
        cs
        
      

      

        
        Cuba
        cu
        
      

      

        
        Cape Verde
        cv
        
      

      

        
        Christmas Island
        cx
        
      

      

        
        Cyprus
        cy
        
      

      

        
        Czech Republic
        cz
        
      

      

        
        Germany
        de
        
      

      

        
        Djibouti
        dj
        
      

      

        
        Denmark
        dk
        
      

      

        
        Dominica
        dm
        
      

      

        
        Dominican Republic
        do
        
      

      

        
        Algeria
        dz
        
      

      

        
        Ecuador
        ec
        
      

      

        
        Estonia
        ee
        
      

      

        
        Egypt
        eg
        
      

      

        
        Western Sahara
        eh
        
      

      

        
        Eritrea
        er
        
      

      

        
        Spain
        es
        
      

      

        
        Ethiopia
        et
        
      

      

        
        European Union
        eu
        
      

      

        
        Finland
        fi
        
      

      

        
        Fiji
        fj
        
      

      

        
        Falkland Islands
        fk
        
      

      

        
        Micronesia
        fm
        
      

      

        
        Faroe Islands
        fo
        
      

      

        
        France
        fr
        
      

      

        
        Gabon
        ga
        
      

      

        
        United Kingdom
        gb uk
        
      

      

        
        England
        gb eng
        
      

      

        
        Scotland
        gb sct
        
      

      

        
        Wales
        gb wls
        
      

      

        
        Grenada
        gd
        
      

      

        
        Georgia
        ge
        
      

      

        
        French Guiana
        gf
        
      

      

        
        Ghana
        gh
        
      

      

        
        Gibraltar
        gi
        
      

      

        
        Greenland
        gl
        
      

      

        
        Gambia
        gm
        
      

      

        
        Guinea
        gn
        
      

      

        
        Guadeloupe
        gp
        
      

      

        
        Equatorial Guinea
        gq
        
      

      

        
        Greece
        gr
        
      

      

        
        Sandwich Islands
        gs
        
      

      

        
        Guatemala
        gt
        
      

      

        
        Guam
        gu
        
      

      

        
        Guinea-bissau
        gw
        
      

      

        
        Guyana
        gy
        
      

      

        
        Hong Kong
        hk
        
      

      

        
        Heard Island
        hm
        
      

      

        
        Honduras
        hn
        
      

      

        
        Croatia
        hr
        
      

      

        
        Haiti
        ht
        
      

      

        
        Hungary
        hu
        
      

      

        
        Indonesia
        id
        
      

      

        
        Ireland
        ie
        
      

      

        
        Israel
        il
        
      

      

        
        India
        in
        
      

      

        
        Indian Ocean Territory
        io
        
      

      

        
        Iraq
        iq
        
      

      

        
        Iran
        ir
        
      

      

        
        Iceland
        is
        
      

      

        
        Italy
        it
        
      

      

        
        Jamaica
        jm
        
      

      

        
        Jordan
        jo
        
      

      

        
        Japan
        jp
        
      

      

        
        Kenya
        ke
        
      

      

        
        Kyrgyzstan
        kg
        
      

      

        
        Cambodia
        kh
        
      

      

        
        Kiribati
        ki
        
      

      

        
        Comoros
        km
        
      

      

        
        Saint Kitts And Nevis
        kn
        
      

      

        
        North Korea
        kp
        
      

      

        
        South Korea
        kr
        
      

      

        
        Kuwait
        kw
        
      

      

        
        Cayman Islands
        ky
        
      

      

        
        Kazakhstan
        kz
        
      

      

        
        Laos
        la
        
      

      

        
        Lebanon
        lb
        
      

      

        
        Saint Lucia
        lc
        
      

      

        
        Liechtenstein
        li
        
      

      

        
        Sri Lanka
        lk
        
      

      

        
        Liberia
        lr
        
      

      

        
        Lesotho
        ls
        
      

      

        
        Lithuania
        lt
        
      

      

        
        Luxembourg
        lu
        
      

      

        
        Latvia
        lv
        
      

      

        
        Libya
        ly
        
      

      

        
        Morocco
        ma
        
      

      

        
        Monaco
        mc
        
      

      

        
        Moldova
        md
        
      

      

        
        Montenegro
        me
        
      

      

        
        Madagascar
        mg
        
      

      

        
        Marshall Islands
        mh
        
      

      

        
        Macedonia
        mk
        
      

      

        
        Mali
        ml
        
      

      

        
        Burma
        mm
        Myanmar
      

      

        
        Mongolia
        mn
        
      

      

        
        Macau
        mo
        
      

      

        
        Northern Mariana Islands
        mp
        
      

      

        
        Martinique
        mq
        
      

      

        
        Mauritania
        mr
        
      

      

        
        Montserrat
        ms
        
      

      

        
        Malta
        mt
        
      

      

        
        Mauritius
        mu
        
      

      

        
        Maldives
        mv
        
      

      

        
        Malawi
        mw
        
      

      

        
        Mexico
        mx
        
      

      

        
        Malaysia
        my
        
      

      

        
        Mozambique
        mz
        
      

      

        
        Namibia
        na
        
      

      

        
        New Caledonia
        nc
        
      

      

        
        Niger
        ne
        
      

      

        
        Norfolk Island
        nf
        
      

      

        
        Nigeria
        ng
        
      

      

        
        Nicaragua
        ni
        
      

      

        
        Netherlands
        nl
        
      

      

        
        Norway
        no
        
      

      

        
        Nepal
        np
        
      

      

        
        Nauru
        nr
        
      

      

        
        Niue
        nu
        
      

      

        
        New Zealand
        nz
        
      

      

        
        Oman
        om
        
      

      

        
        Panama
        pa
        
      

      

        
        Peru
        pe
        
      

      

        
        French Polynesia
        pf
        
      

      

        
        New Guinea
        pg
        
      

      

        
        Philippines
        ph
        
      

      

        
        Pakistan
        pk
        
      

      

        
        Poland
        pl
        
      

      

        
        Saint Pierre
        pm
        
      

      

        
        Pitcairn Islands
        pn
        
      

      

        
        Puerto Rico
        pr
        
      

      

        
        Palestine
        ps
        
      

      

        
        Portugal
        pt
        
      

      

        
        Palau
        pw
        
      

      

        
        Paraguay
        py
        
      

      

        
        Qatar
        qa
        
      

      

        
        Reunion
        re
        
      

      

        
        Romania
        ro
        
      

      

        
        Serbia
        rs
        
      

      

        
        Russia
        ru
        
      

      

        
        Rwanda
        rw
        
      

      

        
        Saudi Arabia
        sa
        
      

      

        
        Solomon Islands
        sb
        
      

      

        
        Seychelles
        sc
        
      

      

        
        Sudan
        sd
        
      

      

        
        Sweden
        se
        
      

      

        
        Singapore
        sg
        
      

      

        
        Saint Helena
        sh
        
      

      

        
        Slovenia
        si
        
      

      

        
        Jan Mayen
        sj
        Svalbard
      

      

        
        Slovakia
        sk
        
      

      

        
        Sierra Leone
        sl
        
      

      

        
        San Marino
        sm
        
      

      

        
        Senegal
        sn
        
      

      

        
        Somalia
        so
        
      

      

        
        Suriname
        sr
        
      

      

        
        Sao Tome
        st
        
      

      

        
        El Salvador
        sv
        
      

      

        
        Syria
        sy
        
      

      

        
        Swaziland
        sz
        
      

      

        
        Caicos Islands
        tc
        
      

      

        
        Chad
        td
        
      

      

        
        French Territories
        tf
        
      

      

        
        Togo
        tg
        
      

      

        
        Thailand
        th
        
      

      

        
        Tajikistan
        tj
        
      

      

        
        Tokelau
        tk
        
      

      

        
        Timorleste
        tl
        
      

      

        
        Turkmenistan
        tm
        
      

      

        
        Tunisia
        tn
        
      

      

        
        Tonga
        to
        
      

      

        
        Turkey
        tr
        
      

      

        
        Trinidad
        tt
        
      

      

        
        Tuvalu
        tv
        
      

      

        
        Taiwan
        tw
        
      

      

        
        Tanzania
        tz
        
      

      

        
        Ukraine
        ua
        
      

      

        
        Uganda
        ug
        
      

      

        
        Us Minor Islands
        um
        
      

      

        
        United States
        us
        America
      

      

        
        Uruguay
        uy
        
      

      

        
        Uzbekistan
        uz
        
      

      

        
        Vatican City
        va
        
      

      

        
        Saint Vincent
        vc
        
      

      

        
        Venezuela
        ve
        
      

      

        
        British Virgin Islands
        vg
        
      

      

        
        Us Virgin Islands
        vi
        
      

      

        
        Vietnam
        vn
        
      

      

        
        Vanuatu
        vu
        
      

      

        
        Wallis And Futuna
        wf
        
      

      

        
        Samoa
        ws
        
      

      

        
        Yemen
        ye
        
      

      

        
        Mayotte
        yt
        
      

      

        
        South Africa
        za
        
      

      

        
        Zambia
        zm
        
      

      

        
        Zimbabwe
        zw
        
      

      
    


  





================================================
FILE: server/documents/elements/header.html.eco
================================================
---
layout      : 'default'
css         : 'header'
standalone  : true

element     : 'header'
elementType : 'element'

title       : 'Header'
description : 'A header provides a short summary of content'
type        : 'UI Element'

themes      : ['Default', 'Classic', 'Bookish', 'Chubby', 'Material']
---

<%- @partial('header') %>






  
Types


  

    
Page Headers

    
Headers may be oriented to give the hierarchy of a section in the context of the page

    
Page headings are sized using rem and are not affected by surrounding content size.

    
First header

    
    
Second header

    
    
Third header

    
    
Fourth header

    
    
Fifth header

    
  


  

    
Content Headers

    
Headers may be oriented to give the importance of a section in the context of the content that surrounds it

    
Content headings are sized with em and are based on the font-size of their container.

    

       
       
    

    

      
Huge Header

      
      
Large Header

      
      
Medium Header

      
      
Small Header

      
      
Tiny Header

      
    

  


  

    
Icon Headers

    
A header can be formatted to emphasize an icon

    

      
      

        Account Settings
        
Manage your account settings and set e-mail preferences.

      

    

  


  

    

      
      Friends
    

    
  


  

    
Sub Headers

    
Headers may be formatted to label smaller or de-emphasized content.

    

      Price
    

    $10.99
  


  

    

      

        
        

          
Molly

          Coordinator
        

      

      

        
        

          
Elyse

          Developer
        

      

      

        
        

          
Eve

          Project Manager
        

      

    

  


  
Content



  

    
Image

    
A header may contain an image

    

      
      

        Learn More
      

    

    
  

  

    

      
      Patrick
    

    
  

  

    

      
      

        Plug-ins
        
Check out our plug-in marketplace

      

    

    
  



  

    
Icon

    
A header may contain an icon

    

      
      

        Uptime Guarantee
      

    

    
  

  

    

      
      

        Account Settings
        
Manage your preferences

      

    

    
  


  

    
Subheader

    
Headers may contain subheaders

    

      Account Settings
      
Manage your account settings and set e-mail preferences.

    

    
  

  

    

      H1
      
Sub Header

    

    

      H2
      
Sub Header

    

    

      H3
      
Sub Header

    

    

      H4
      
Sub Header

    

    

      H5
      
Sub Header

    

  


  
States


  

    
Disabled

    
A header can show that it is inactive

    

      Disabled Header
    

    
  


  
Variations



  

    
Dividing

    
A header can be formatted to divide itself from the content below it

    
    

      Dividing Header
    

    
  



  

    
Block

    
A header can be formatted to appear inside a content block

    

      Block Header
    

    

  


  

    
Attached

    
A header can be attached to other content, like a segment

    

      Top Attached
    

    

      
    

    

      Attached
    

    

      
    

    

      Bottom Attached
    

  


  

    
Floating

    
A header can sit to the left or right of other content

    

      

        Go Forward
      

      

        Go Back
      

    

  

  

    
Text Alignment

    
A header can have its text aligned to a side

    

      

        Right
      

      

        Left
      

      

        This should take up the full width even if only one line
      

      

        Center
      

    

  


  

    
Colored

    
A header can be formatted with different colors

    
Red

    
Orange

    
Yellow

    
Olive

    
Green

    
Teal

    
Blue

    
Purple

    
Violet

    
Pink

    
Brown

    
Grey

  



  

    
Inverted

    
A header can have its colors inverted for contrast

    

      Inverted headers use modified light versions of your site's color scheme that are adapted to have more contrast on dark background
    

    

      
Red

      
Orange

      
Yellow

      
Olive

      
Green

      
Teal

      
Blue

      
Purple

      
Violet

      
Pink

      
Brown

      
Grey

    

  






================================================
FILE: server/documents/elements/icon.html.eco
================================================
---
layout      : 'default'
css         : 'icon'
standalone  : true

element     : 'icon'
elementType : 'element'

title       : 'Icon'
description : 'An icon is a glyph used to represent something else'
type        : 'UI Element'

themes      : ['Default']
---

<%- @partial('header', { tabs: { icon: 'Icons', definition: 'Definition' } }) %>






  


    
      

        
        
      

      

    

    
Icon Set

    
An icon set contains an arbitrary number of glyphs

    

      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.
    


    
Semantic includes a complete port of Font Awesome 5.0.8 designed by the FontAwesome team for its standard icon set.


    

      
Accessibility

      
Icons can represent accessibility standards

      

        
american sign language interpreting

        
assistive listening systems

        
audio description

        
blind

        
braille

        
closed captioning

        
closed captioning outline

        
deaf

        
low vision

        
phone volume

        
question circle

        
question circle outline

        
sign language

        
tty

        
universal access

        
wheelchair

      

      

        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
      

    


    

      
Arrows

      
Icons can be used to indicate a direction

      

        
angle double down

        
angle double left

        
angle double right

        
angle double up

        
angle down

        
angle left

        
angle right

        
angle up

        
arrow alternate circle down

        
arrow alternate circle down outline

        
arrow alternate circle left

        
arrow alternate circle left outline

        
arrow alternate circle right

        
arrow alternate circle right outline

        
arrow alternate circle up

        
arrow alternate circle up outline

        
arrow circle down

        
arrow circle left

        
arrow circle right

        
arrow circle up

        
arrow down

        
arrow left

        
arrow right

        
arrow up

        
arrows alternate

        
arrows alternate horizontal

        
arrows alternate vertical

        
caret down

        
caret left

        
caret right

        
caret square down

        
caret square down outline

        
caret square left

        
caret square left outline

        
caret square right

        
caret square right outline

        
caret square up

        
caret square up outline

        
caret up

        
cart arrow down

        
chart line

        
chevron circle down

        
chevron circle left

        
chevron circle right

        
chevron circle up

        
chevron down

        
chevron left

        
chevron right

        
chevron up

        
cloud download

        
cloud upload

        
download

        
exchange

        
expand arrows alternate

        
external alternate

        
external square alternate

        
hand point down

        
hand point down outline

        
hand point left

        
hand point left outline

        
hand point right

        
hand point right outline

        
hand point up

        
hand point up outline

        
hand pointer

        
hand pointer outline

        
history

        
level down alternate

        
level up alternate

        
location arrow

        
long arrow alternate down

        
long arrow alternate left

        
long arrow alternate right

        
long arrow alternate up

        
mouse pointer

        
play

        
random

        
recycle

        
redo

        
redo alternate

        
reply

        
reply all

        
retweet

        
share

        
share square

        
share square outline

        
sign-in

        
sign-out

        
sign-in alternate

        
sign-out alternate

        
sort

        
sort alphabet down

        
sort alphabet up

        
sort amount down

        
sort amount up

        
sort down

        
sort numeric down

        
sort numeric up

        
sort up

        
sync

        
sync alternate

        
text height

        
text width

        
undo

        
undo alternate

        
upload

        
zoom-in

        
zoom-out

      

      

        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
      

    


    

      
Audio & Video

      
Icons can be used to represent common ways to interact with audio and video

      

        
audio description

        
backward

        
circle

        
circle outline

        
closed captioning

        
closed captioning outline

        
compress

        
eject

        
expand

        
expand arrows alternate

        
fast backward

        
fast forward

        
file audio

        
file audio outline

        
file video

        
file video outline

        
film

        
forward

        
headphones

        
microphone

        
microphone slash

        
music

        
pause

        
pause circle

        
pause circle outline

        
phone volume

        
play

        
play circle

        
play circle outline

        
podcast

        
random

        
redo

        
redo alternate

        
rss

        
rss square

        
step backward

        
step forward

        
stop

        
stop circle

        
stop circle outline

        
sync

        
sync alternate

        
undo

        
undo alternate

        
video

        
volume down

        
volume off

        
volume up

      

      

        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
      

    


    

      
Business

      
Icons can be used to represent business and common business actions

      

        
address book

        
address book outline

        
address card

        
address card outline

        
archive

        
balance scale

        
birthday cake

        
book

        
briefcase

        
building

        
building outline

        
bullhorn

        
bullseye

        
calculator

        
calendar

        
calendar outline

        
calendar alternate

        
calendar alternate outline

        
certificate

        
chart area

        
chart bar

        
chart bar outline

        
chart line

        
chart pie

        
clipboard

        
clipboard outline

        
coffee

        
columns

        
compass

        
compass outline

        
copy

        
copy outline

        
copyright

        
copyright outline

        
cut

        
edit

        
edit outline

        
envelope

        
envelope outline

        
envelope open

        
envelope open outline

        
envelope square

        
eraser

        
fax

        
file

        
file outline

        
file alternate

        
file alternate outline

        
folder

        
folder outline

        
folder open

        
folder open outline

        
globe

        
industry

        
paperclip

        
paste

        
pen square

        
pencil alternate

        
percent

        
phone

        
phone square

        
phone volume

        
registered

        
registered outline

        
save

        
save outline

        
sitemap

        
sticky note

        
sticky note outline

        
suitcase

        
table

        
tag

        
tags

        
tasks

        
thumbtack

        
trademark

      

      

        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
      

    


    

      
Chess

      
Icons which represent the game chess

      

        
chess

        
chess bishop

        
chess board

        
chess king

        
chess knight

        
chess pawn

        
chess queen

        
chess rook

        
square full

      

      

        
        
        
        
        
        
        
        
        
      

    


    

      
Code

      
Icons can represent programming and programming tools

      

        
archive

        
barcode

        
bath

        
bug

        
code

        
code branch

        
coffee

        
file

        
file outline

        
file alternate

        
file alternate outline

        
file code

        
file code outline

        
filter

        
fire extinguisher

        
folder

        
folder outline

        
folder open

        
folder open outline

        
keyboard

        
keyboard outline

        
microchip

        
qrcode

        
shield alternate

        
sitemap

        
terminal

        
user secret

        
window close

        
window close outline

        
window maximize

        
window maximize outline

        
window minimize

        
window minimize outline

        
window restore

        
window restore outline

      

      

        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
      

    


    

      
Communication

      
Icons which represent common ways of communication

      

        
address book

        
address book outline

        
address card

        
address card outline

        
american sign language interpreting

        
assistive listening systems

        
at

        
bell

        
bell outline

        
bell slash

        
bell slash outline

        
bullhorn

        
comment

        
comment outline

        
comment alternate

        
comment alternate outline

        
comments

        
comments outline

        
envelope

        
envelope outline

        
envelope open

        
envelope open outline

        
envelope square

        
fax

        
inbox

        
language

        
microphone

        
microphone slash

        
mobile

        
mobile alternate

        
paper plane

        
paper plane outline

        
phone

        
phone square

        
phone volume

        
rss

        
rss square

        
tty

        
wifi

      

      

        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
      

    


    

      
Computers

      
Icons can represent computing devices, or types of content found on a computer

      

        
desktop

        
download

        
hdd

        
hdd outline

        
headphones

        
keyboard

        
keyboard outline

        
laptop

        
microchip

        
mobile

        
mobile alternate

        
plug

        
power off

        
print

        
save

        
save outline

        
server

        
tablet

        
tablet alternate

        
tv

        
upload

      

      

        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
      

    


    

      
Currency

      
Icons can represent units of currency

      

        
dollar sign

        
euro sign

        
lira sign

        
money bill alternate

        
money bill alternate outline

        
pound sign

        
ruble sign

        
rupee sign

        
shekel sign

        
won sign

        
yen sign

      

      

        
        
        
        
        
        
        
        
        
        
        
      

    


    

      
Date & Time

      
Icons that represent common ways of showing date and time

      

        
bell

        
bell outline

        
bell slash

        
bell slash outline

        
calendar

        
calendar outline

        
calendar alternate

        
calendar alternate outline

        
calendar check

        
calendar check outline

        
calendar minus

        
calendar minus outline

        
calendar plus

        
calendar plus outline

        
calendar times

        
calendar times outline

        
clock

        
clock outline

        
hourglass

        
hourglass outline

        
hourglass end

        
hourglass half

        
hourglass start

        
stopwatch

      

      

        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
      

    


    

      
Design

      
Icons can represent common design related symbols or techniques

      

        
adjust

        
clone

        
clone outline

        
copy

        
copy outline

        
crop

        
crosshairs

        
cut

        
edit

        
edit outline

        
eraser

        
eye

        
eye dropper

        
eye slash

        
eye slash outline

        
object group

        
object group outline

        
object ungroup

        
object ungroup outline

        
paint brush

        
paste

        
pencil alternate

        
save

        
save outline

        
tint

      

      

        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
      

    


    

      
Editors

      
Icons can represent text editors and common editor actions

      

        
align center

        
align justify

        
align left

        
align right

        
bold

        
clipboard

        
clipboard outline

        
clone

        
clone outline

        
columns

        
copy

        
copy outline

        
cut

        
edit

        
edit outline

        
eraser

        
file

        
file outline

        
file alternate

        
file alternate outline

        
font

        
heading

        
i cursor

        
indent

        
italic

        
linkify

        
list

        
list alternate

        
list alternate outline

        
list ol

        
list ul

        
outdent

        
paper plane

        
paper plane outline

        
paperclip

        
paragraph

        
paste

        
pencil alternate

        
print

        
quote left

        
quote right

        
redo

        
redo alternate

        
reply

        
reply all

        
share

        
strikethrough

        
subscript

        
superscript

        
sync

        
sync alternate

        
table

        
tasks

        
text height

        
text width

        
th

        
th large

        
th list

        
trash

        
trash alternate

        
trash alternate outline

        
underline

        
undo

        
undo alternate

        
unlink

      

      

        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
      

    


    

      
Files

      
Icons can represent elements of a computer and its file system

      

        
archive

        
clone

        
clone outline

        
copy

        
copy outline

        
cut

        
file

        
file outline

        
file alternate

        
file alternate outline

        
file archive

        
file archive outline

        
file audio

        
file audio outline

        
file code

        
file code outline

        
file excel

        
file excel outline

        
file image

        
file image outline

        
file pdf

        
file pdf outline

        
file powerpoint

        
file powerpoint outline

        
file video

        
file video outline

        
file word

        
file word outline

        
folder

        
folder outline

        
folder open

        
folder open outline

        
paste

        
save

        
save outline

        
sticky note

        
sticky note outline

      

      

        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
      

    


    

      
Genders

      
Icons can represent genders or types of sexuality

      

        
genderless

        
mars

        
mars double

        
mars stroke

        
mars stroke horizontal

        
mars stroke vertical

        
mercury

        
neuter

        
transgender

        
transgender alternate

        
venus

        
venus double

        
venus mars

      

      

        
        
        
        
        
        
        
        
        
        
        
        
        
      

    


    

      
Hands & Gestures

      
Icons can represent hand signals and gestures

      

        
hand lizard

        
hand lizard outline

        
hand paper

        
hand paper outline

        
hand peace

        
hand peace outline

        
hand point down

        
hand point down outline

        
hand point left

        
hand point left outline

        
hand point right

        
hand point right outline

        
hand point up

        
hand point up outline

        
hand pointer

        
hand pointer outline

        
hand rock

        
hand rock outline

        
hand scissors

        
hand scissors outline

        
hand spock

        
hand spock outline

        
handshake

        
handshake outline

        
thumbs down

        
thumbs down outline

        
thumbs up

        
thumbs up outline

      

      

        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
      

    


    

      
Health

      
Icons which represent common health symbols

      

        
ambulance

        
h square

        
heart

        
heart outline

        
heartbeat

        
hospital

        
hospital outline

        
medkit

        
plus square

        
plus square outline

        
stethoscope

        
user md

        
wheelchair

      

      

        
        
        
        
        
        
        
        
        
        
        
        
        
      

    


    

      
Images

      
Icons that represent common image symbols and actions

      

        
adjust

        
bolt

        
camera

        
camera retro

        
clone

        
clone outline

        
compress

        
expand

        
eye

        
eye dropper

        
eye slash

        
eye slash outline

        
file image

        
file image outline

        
film

        
id badge

        
id badge outline

        
id card

        
id card outline

        
image

        
image outline

        
images

        
images outline

        
sliders horizontal

        
tint

      

      

        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
      

    


    

      
Interfaces

      
Icons can represent common actions a user can take or use

      

        
ban

        
barcode

        
bars

        
beer

        
bell

        
bell outline

        
bell slash

        
bell slash outline

        
bug

        
bullhorn

        
bullseye

        
calculator

        
calendar

        
calendar outline

        
calendar alternate

        
calendar alternate outline

        
calendar check

        
calendar check outline

        
calendar minus

        
calendar minus outline

        
calendar plus

        
calendar plus outline

        
calendar times

        
calendar times outline

        
certificate

        
check

        
check circle

        
check circle outline

        
check square

        
check square outline

        
circle

        
circle outline

        
clipboard

        
clipboard outline

        
clone

        
clone outline

        
cloud

        
cloud download

        
cloud upload

        
close icon

        
coffee

        
cog

        
cogs

        
copy

        
copy outline

        
cut

        
database

        
dot circle

        
dot circle outline

        
download

        
edit

        
edit outline

        
ellipsis horizontal

        
ellipsis vertical

        
envelope

        
envelope outline

        
envelope open

        
envelope open outline

        
eraser

        
exclamation

        
exclamation circle

        
exclamation triangle

        
external alternate

        
external square alternate

        
eye

        
eye slash

        
eye slash outline

        
file

        
file outline

        
file alternate

        
file alternate outline

        
filter

        
flag

        
flag outline

        
flag checkered

        
folder

        
folder outline

        
folder open

        
folder open outline

        
frown

        
frown outline

        
hashtag

        
heart

        
heart outline

        
history

        
home

        
i cursor

        
info

        
info circle

        
language

        
magic

        
meh

        
meh outline

        
microphone

        
microphone slash

        
minus

        
minus circle

        
minus square

        
minus square outline

        
paste

        
pencil alternate

        
plus

        
plus circle

        
plus square

        
plus square outline

        
qrcode

        
question

        
question circle

        
question circle outline

        
quote left

        
quote right

        
redo

        
redo alternate

        
reply

        
reply all

        
rss

        
rss square

        
save

        
save outline

        
search

        
search minus

        
search plus

        
share

        
share alternate

        
share alternate square

        
share square

        
share square outline

        
shield alternate

        
sign-in

        
sign-out

        
signal

        
sitemap

        
sliders horizontal

        
smile

        
smile outline

        
sort

        
sort alphabet down

        
sort alphabet up

        
sort amount down

        
sort amount up

        
sort down

        
sort numeric down

        
sort numeric up

        
sort up

        
star

        
star outline

        
star half

        
star half outline

        
sync

        
sync alternate

        
thumbs down

        
thumbs down outline

        
thumbs up

        
thumbs up outline

        
times

        
times circle

        
times circle outline

        
toggle off

        
toggle on

        
trash

        
trash alternate

        
trash alternate outline

        
trophy

        
undo

        
undo alternate

        
upload

        
user

        
user outline

        
user circle

        
user circle outline

        
wifi

        
x icon

      

      

        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
      

    


    

      
Logistics

      
Icons can represent common logistic activity

      

        
box

        
boxes

        
clipboard check

        
clipboard list

        
dolly

        
dolly flatbed

        
pallet

        
shipping fast

        
truck

        
warehouse

      

      

        
        
        
        
        
        
        
        
        
        
      

    


    

      
Maps

      
Icons can be used to represent elements on a map

      

        
ambulance

        
anchor

        
balance scale

        
bath

        
bed

        
beer

        
bell

        
bell outline

        
bell slash

        
bell slash outline

        
bicycle

        
binoculars

        
birthday cake

        
blind

        
bomb

        
book

        
bookmark

        
bookmark outline

        
briefcase

        
building

        
building outline

        
car

        
coffee

        
crosshairs

        
dollar sign

        
eye

        
eye slash

        
eye slash outline

        
fighter jet

        
fire

        
fire extinguisher

        
flag

        
flag outline

        
flag checkered

        
flask

        
gamepad

        
gavel

        
gift

        
glass martini

        
globe

        
graduation cap

        
h square

        
heart

        
heart outline

        
heartbeat

        
home

        
hospital

        
hospital outline

        
image

        
image outline

        
images

        
images outline

        
industry

        
info

        
info circle

        
key

        
leaf

        
lemon

        
lemon outline

        
life ring

        
life ring outline

        
lightbulb

        
lightbulb outline

        
location arrow

        
low vision

        
magnet

        
male

        
map

        
map outline

        
map marker

        
map marker alternate

        
map pin

        
map signs

        
medkit

        
money bill alternate

        
money bill alternate outline

        
motorcycle

        
music

        
newspaper

        
newspaper outline

        
paw

        
phone

        
phone square

        
phone volume

        
plane

        
plug

        
plus

        
plus square

        
plus square outline

        
print

        
recycle

        
road

        
rocket

        
search

        
search minus

        
search plus

        
ship

        
shopping bag

        
shopping basket

        
shopping cart

        
shower

        
street view

        
subway

        
suitcase

        
tag

        
tags

        
taxi

        
thumbtack

        
ticket alternate

        
tint

        
train

        
tree

        
trophy

        
truck

        
tty

        
umbrella

        
university

        
utensil spoon

        
utensils

        
wheelchair

        
wifi

        
wrench

      

      

        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
      

    


    

      
Medical

      
Icons can represent common medical actions

      

        
ambulance

        
band aid

        
dna

        
first aid

        
heart

        
heart outline

        
heartbeat

        
hospital

        
hospital outline

        
hospital symbol

        
pills

        
plus

        
stethoscope

        
syringe

        
thermometer

        
user md

        
weight

      

      

        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
      

    


    

      
Objects

      
Icons can be used to represent common objects

      

        
ambulance

        
anchor

        
archive

        
balance scale

        
bath

        
bed

        
beer

        
bell

        
bell outline

        
bicycle

        
binoculars

        
birthday cake

        
bomb

        
book

        
bookmark

        
bookmark outline

        
briefcase

        
bug

        
building

        
building outline

        
bullhorn

        
bullseye

        
bus

        
calculator

        
calendar

        
calendar outline

        
calendar alternate

        
calendar alternate outline

        
camera

        
camera retro

        
car

        
clipboard

        
clipboard outline

        
cloud

        
coffee

        
cog

        
cogs

        
compass

        
compass outline

        
copy

        
copy outline

        
cube

        
cubes

        
cut

        
envelope

        
envelope outline

        
envelope open

        
envelope open outline

        
eraser

        
eye

        
eye dropper

        
fax

        
fighter jet

        
file

        
file outline

        
file alternate

        
file alternate outline

        
film

        
fire

        
fire extinguisher

        
flag

        
flag outline

        
flag checkered

        
flask

        
futbol

        
futbol outline

        
gamepad

        
gavel

        
gem

        
gem outline

        
gift

        
glass martini

        
globe

        
graduation cap

        
hdd

        
hdd outline

        
headphones

        
heart

        
heart outline

        
home

        
hospital

        
hospital outline

        
hourglass

        
hourglass outline

        
image

        
image outline

        
images

        
images outline

        
industry

        
key

        
keyboard

        
keyboard outline

        
laptop

        
leaf

        
lemon

        
lemon outline

        
life ring

        
life ring outline

        
lightbulb

        
lightbulb outline

        
lock

        
lock open

        
magic

        
magnet

        
map

        
map outline

        
map marker

        
map marker alternate

        
map pin

        
map signs

        
medkit

        
microchip

        
microphone

        
mobile

        
mobile alternate

        
money bill alternate

        
money bill alternate outline

        
moon

        
moon outline

        
motorcycle

        
newspaper

        
newspaper outline

        
paint brush

        
paper plane

        
paper plane outline

        
paperclip

        
paste

        
paw

        
pencil alternate

        
phone

        
plane

        
plug

        
print

        
puzzle piece

        
road

        
rocket

        
save

        
save outline

        
search

        
shield alternate

        
shopping bag

        
shopping basket

        
shopping cart

        
shower

        
snowflake

        
snowflake outline

        
space shuttle

        
star

        
star outline

        
sticky note

        
sticky note outline

        
stopwatch

        
subway

        
suitcase

        
sun

        
sun outline

        
tablet

        
tablet alternate

        
tachometer alternate

        
tag

        
tags

        
taxi

        
thumbtack

        
ticket alternate

        
train

        
trash

        
trash alternate

        
trash alternate outline

        
tree

        
trophy

        
truck

        
tv

        
umbrella

        
university

        
unlock

        
unlock alternate

        
utensil spoon

        
utensils

        
wheelchair

        
wrench

      

      

        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
      

    


    

      
Payments & Shopping

      
Icons can represent common forms of payment and shopping actions

      

        
bell

        
bell outline

        
bookmark

        
bookmark outline

        
bullhorn

        
camera

        
camera retro

        
cart arrow down

        
cart plus

        
certificate

        
credit card

        
credit card outline

        
gem

        
gem outline

        
gift

        
handshake

        
handshake outline

        
heart

        
heart outline

        
key

        
shopping bag

        
shopping basket

        
shopping cart

        
star

        
star outline

        
tag

        
tags

        
thumbs down

        
thumbs down outline

        
thumbs up

        
thumbs up outline

        
trophy

      

      

        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
      

    


    

      
Shapes

      
Icons can be used to create shapes

      

        
bookmark

        
bookmark outline

        
calendar

        
calendar outline

        
certificate

        
circle

        
circle outline

        
cloud

        
comment

        
comment outline

        
file

        
file outline

        
folder

        
folder outline

        
heart

        
heart outline

        
map marker

        
play

        
square

        
square outline

        
star

        
star outline

      

      

        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
      

    


    

      
Spinners

      
Icons can represent loading

      

        
asterisk

        
certificate

        
circle notch

        
cog

        
compass

        
compass outline

        
crosshairs

        
life ring

        
life ring outline

        
snowflake

        
snowflake outline

        
spinner

        
sun

        
sun outline

        
sync

      

      

        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
      

    


    

      
Sports

      
Icons which represent sports

      

        
baseball ball

        
basketball ball

        
bowling ball

        
football ball

        
futbol

        
futbol outline

        
golf ball

        
hockey puck

        
quidditch

        
table tennis

        
volleyball ball

      

      

        
        
        
        
        
        
        
        
        
        
        
      

    


    

      
Status

      
Icons can represent different states

      

        
ban

        
battery empty

        
battery full

        
battery half

        
battery quarter

        
battery three quarters

        
bell

        
bell outline

        
bell slash

        
bell slash outline

        
calendar

        
calendar outline

        
calendar alternate

        
calendar alternate outline

        
calendar check

        
calendar check outline

        
calendar minus

        
calendar minus outline

        
calendar plus

        
calendar plus outline

        
calendar times

        
calendar times outline

        
cart arrow down

        
cart plus

        
exclamation

        
exclamation circle

        
exclamation triangle

        
eye

        
eye slash

        
eye slash outline

        
file

        
file outline

        
file alternate

        
file alternate outline

        
folder

        
folder outline

        
folder open

        
folder open outline

        
info

        
info circle

        
lock

        
lock open

        
minus

        
minus circle

        
minus square

        
minus square outline

        
plus

        
plus circle

        
plus square

        
plus square outline

        
question

        
question circle

        
question circle outline

        
shield alternate

        
shopping cart

        
sign in alternate

        
sign out alternate

        
thermometer empty

        
thermometer full

        
thermometer half

        
thermometer quarter

        
thermometer three quarters

        
thumbs down

        
thumbs down outline

        
thumbs up

        
thumbs up outline

        
toggle off

        
toggle on

        
unlock

        
unlock alternate

      

      

        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
      

    


    

      
Users & People

      
Icons can represent users or people

      

        
address book

        
address book outline

        
address card

        
address card outline

        
bed

        
blind

        
child

        
female

        
frown

        
frown outline

        
id badge

        
id badge outline

        
id card

        
id card outline

        
male

        
meh

        
meh outline

        
power off

        
smile

        
smile outline

        
street view

        
user

        
user outline

        
user circle

        
user circle outline

        
user md

        
user plus

        
user secret

        
user times

        
users

        
wheelchair

      

      

        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
      

    


    

      
Vehicles

      
Icons can represent vehicles or transport

      

        
ambulance

        
bicycle

        
bus

        
car

        
fighter jet

        
motorcycle

        
paper plane

        
paper plane outline

        
plane

        
rocket

        
ship

        
shopping cart

        
space shuttle

        
subway

        
taxi

        
train

        
truck

        
wheelchair

      

      

        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
      

    


    

      
Writing

      
Icons can represent writing and editing

      

        
archive

        
book

        
bookmark

        
bookmark outline

        
edit

        
edit outline

        
envelope

        
envelope outline

        
envelope open

        
envelope open outline

        
eraser

        
file

        
file outline

        
file alternate

        
file alternate outline

        
folder

        
folder outline

        
folder open

        
folder open outline

        
keyboard

        
keyboard outline

        
newspaper

        
newspaper outline

        
paper plane

        
paper plane outline

        
paperclip

        
paragraph

        
pen square

        
pencil alternate

        
quote left

        
quote right

        
sticky note

        
sticky note outline

        
thumbtack

      

      

        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
      

    


    

      
Brands

      
Icons can represent logos to common brands

      

        
500px

        
accessible icon

        
accusoft

        
adn

        
adversal

        
affiliatetheme

        
algolia

        
amazon

        
amazon pay

        
amilia

        
android

        
angellist

        
angrycreative

        
angular

        
app store

        
app store ios

        
apper

        
apple

        
apple pay

        
asymmetrik

        
audible

        
autoprefixer

        
avianex

        
aviato

        
aws

        
bandcamp

        
behance

        
behance square

        
bimobject

        
bitbucket

        
bitcoin

        
bity

        
black tie

        
blackberry

        
blogger

        
blogger b

        
bluetooth

        
bluetooth b

        
btc

        
buromobelexperte

        
buysellads

        
cc amazon pay

        
cc amex

        
cc apple pay

        
cc diners club

        
cc discover

        
cc jcb

        
cc mastercard

        
cc paypal

        
cc stripe

        
cc visa

        
centercode

        
chrome

        
cloudscale

        
cloudsmith

        
cloudversify

        
codepen

        
codiepie

        
connectdevelop

        
contao

        
cpanel

        
creative commons

        
css3

        
css3 alternate

        
cuttlefish

        
d and d

        
dashcube

        
delicious

        
deploydog

        
deskpro

        
deviantart

        
digg

        
digital ocean

        
discord

        
discourse

        
dochub

        
docker

        
draft2digital

        
dribbble

        
dribbble square

        
dropbox

        
drupal

        
dyalog

        
earlybirds

        
edge

        
elementor

        
ember

        
empire

        
envira

        
erlang

        
ethereum

        
etsy

        
expeditedssl

        
facebook

        
facebook f

        
facebook messenger

        
facebook square

        
firefox

        
first order

        
firstdraft

        
flickr

        
flipboard

        
fly

        
font awesome

        
font awesome alternate

        
font awesome flag

        
fonticons

        
fonticons fi

        
fort awesome

        
fort awesome alternate

        
forumbee

        
foursquare

        
free code camp

        
freebsd

        
get pocket

        
gg

        
gg circle

        
git

        
git square

        
github

        
github alternate

        
github square

        
gitkraken

        
gitlab

        
gitter

        
glide

        
glide g

        
gofore

        
goodreads

        
goodreads g

        
google

        
google drive

        
google play

        
google plus

        
google plus g

        
google plus square

        
google wallet

        
gratipay

        
grav

        
gripfire

        
grunt

        
gulp

        
hacker news

        
hacker news square

        
hips

        
hire a helper

        
hooli

        
hotjar

        
houzz

        
html5

        
hubspot

        
imdb

        
instagram

        
internet explorer

        
ioxhost

        
itunes

        
itunes note

        
jenkins

        
joget

        
joomla

        
js

        
js square

        
jsfiddle

        
keycdn

        
kickstarter

        
kickstarter k

        
korvue

        
laravel

        
lastfm

        
lastfm square

        
leanpub

        
less

        
linechat

        
linkedin

        
linkedin alternate

        
linode

        
linux

        
lyft

        
magento

        
maxcdn

        
medapps

        
medium

        
medium m

        
medrt

        
meetup

        
microsoft

        
mix

        
mixcloud

        
mizuni

        
modx

        
monero

        
napster

        
nintendo switch

        
node

        
node js

        
npm

        
ns8

        
nutritionix

        
odnoklassniki

        
odnoklassniki square

        
opencart

        
openid

        
opera

        
optin monster

        
osi

        
page4

        
pagelines

        
palfed

        
patreon

        
paypal

        
periscope

        
phabricator

        
phoenix framework

        
php

        
pied piper

        
pied piper alternate

        
pied piper pp

        
pinterest

        
pinterest p

        
pinterest square

        
playstation

        
product hunt

        
pushed

        
python

        
qq

        
quinscape

        
quora

        
ravelry

        
react

        
rebel

        
redriver

        
reddit

        
reddit alien

        
reddit square

        
rendact

        
renren

        
replyd

        
resolving

        
rocketchat

        
rockrms

        
safari

        
sass

        
schlix

        
scribd

        
searchengin

        
sellcast

        
sellsy

        
servicestack

        
shirtsinbulk

        
simplybuilt

        
sistrix

        
skyatlas

        
skype

        
slack

        
slack hash

        
slideshare

        
snapchat

        
snapchat ghost

        
snapchat square

        
soundcloud

        
speakap

        
spotify

        
stack exchange

        
stack overflow

        
staylinked

        
steam

        
steam square

        
steam symbol

        
sticker mule

        
strava

        
stripe

        
stripe s

        
studiovinari

        
stumbleupon

        
stumbleupon circle

        
superpowers

        
supple

        
telegram

        
telegram plane

        
tencent weibo

        
themeisle

        
trello

        
tripadvisor

        
tumblr

        
tumblr square

        
twitch

        
twitter

        
twitter square

        
typo3

        
uber

        
uikit

        
uniregistry

        
untappd

        
usb

        
ussunnah

        
vaadin

        
viacoin

        
viadeo

        
viadeo square

        
viber

        
vimeo

        
vimeo square

        
vimeo v

        
vine

        
vk

        
vnv

        
vuejs

        
wechat

        
weibo

        
weixin

        
whatsapp

        
whatsapp square

        
whmcs

        
wikipedia w

        
windows

        
wordpress

        
wordpress simple

        
wpbeginner

        
wpexplorer

        
wpforms

        
xbox

        
xing

        
xing square

        
y combinator

        
yahoo

        
yandex

        
yandex international

        
yelp

        
yoast

        
youtube

        
youtube square

      

      

        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
      

    

  


  


    
States


    

      
Disabled

      
An icon can show that it is disabled

      
    


    

      
Loading

      
An icon can be used as a simple loader

      
      
      
    



    
Variations


    

      
Fitted

      
An icon can be fitted, without any space to the left or right of it.

      Tight spacing
      
      Tight spacing
    


    

      
Size

      
An icon can vary in size

      
      
      
      

      
      

      
      

      
      

      
      

      
    


    

      
Link

      
An icon can be formatted as a link

      
      
    


    

      
Flipped

      
An icon can be flipped

      
      
    


    

      
Rotated

      
An icon can be rotated

      
      
    



    

      
Circular

      
An icon can be formatted to appear circular

      
      
      
      
    


    

      
Bordered

      

        In 0.x.x bordered was formally known as squared
      

      
An icon can be formatted to appear bordered

      
      
      
      
    


    

      
Colored

      
An icon can be formatted with different colors

      
      
      
      
      
      
      
      
      
      
      
      
      
    


    

      
Inverted

      
An icon can have its colors inverted for contrast

      

        
        
        
        
        
        
        
        
        
        
        
        
        
      

    


    
Groups


    

      
Icons

      
Several icons can be used together as a group

      
        
        
      
    

    

      
        
        
      
    

    

      
Corner Icon

      
A group of icons can display a smaller corner icon

      
        
        
      
    

    

      
        
        
      
      
        
        
      
      
        
        
      
      
        
        
      
    

    

      

        
          
          
        
        Add on Twitter
      

    


  






================================================
FILE: server/documents/elements/image.html.eco
================================================
---
layout      : 'default'
css         : 'image'
standalone  : true

element     : 'image'
elementType : 'element'

title       : 'Image'
description : 'An image is a graphic representation of something'
type        : 'UI Element'

themes      : ['Default']
---

<%- @partial('header') %>




  
Types


  

    
Image

    
An image

    

       Unless a size is specified, images will use the original dimensions of the image up to the size of its container..
    

    

      You can specify an img or svg as a ui image or use a child element.
    

    
  

  

    

      
    

  

  

    

      
        
      
    

  


  

    
Image Link

    
An image can be formatted to link to other content

    
      
    
  


  

    States
  


  

    
Hidden

    
An image can be hidden

    
  


  

    
Disabled

    
An image can show that it is disabled and cannot be selected

    
  


  
Variations


  

    
Avatar

    
An image may be formatted to appear inline with text as an avatar

    
    Username
  


  

    
Bordered

    
An image may include a border to emphasize the edges of white or transparent content

    
  



  

    
Fluid

    
An image can take up the width of its container

    
  


  

    
Rounded

    
An image may appear rounded

    
  


  

    
Circular

    
An image may appear circular

    
  


  

    
Vertically Aligned

    
An image can specify its vertical alignment

    
    Top Aligned
    

    
    Middle Aligned
    

    
    Bottom Aligned
  


  

    
Centered

    
An image can appear centered in a content block

    

      
      
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.

      
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.

      
      
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.

    

  


  

    
Spaced

    
An image can specify that it needs an additional spacing to separate it from nearby content


    

      
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.

    

  


  

      
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.


      
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.

  


  

    
Floated

    
An image can sit to the left or right of other content

    

      
      
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.

      
      
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.


      
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.

    

  


  

    
Size

    
An image may appear at different sizes

    

      Semantic uses arbitrary default values for image sizes from mini to massive. It is recommended to update these with values used in your project in image.variables.
    

    

      
        

          Class Name
          Size
        

      
      
        

          Mini
          35px
        

        

          Tiny
          80px
        

        

          Small
          150px
        

        

          Medium
          300px
        

        

          Large
          450px
        

        

          Big
          600px
        

        

          Huge
          800px
        

        

          Massive
          960px
        

      
    

    
    
    
    
    
    
    

    

      
      
      
      
      
      
      
      
    


  




  
Groups


  

    
Size

    
A group of images can be formatted to have the same size.

    

      
      
      
      
    

  

  

    

      
      
      
      
    

  






================================================
FILE: server/documents/elements/input.html.eco
================================================
---
layout      : 'default'
css         : 'input'
standalone  : true

element     : 'input'
elementType : 'element'

title       : 'Input'
description : 'An input is a field used to elicit a response from a user'
type        : 'UI Element'

themes      : ['Default', 'GitHub']
---

<%- @partial('header') %>






  
Types


  

    

      Input
    

    
A standard input

    

      
    

  


  
States


  

    
Focus

    
An input field can show a user is currently interacting with it

    

      
    

  


  

    
Loading

    
An icon input field can show that it is currently loading data

    
Loading inputs automatically modify the input's icon on loading state to show loading indication

    

      
      
    

  

  

    

      
      
    

  


  

    
Disabled

    
An input field can show that it is disabled

    

      
    

  

  

    

      
      
    

  

  

    

      
    

  


  

    
Error

    
An input field can show the data contains errors

    

      
    

  


  
Variations


  

    
Icon

    
An input can be formatted with an icon

    

      Input icons do not receive pointer-events unless a link icon is used.
    

    

      
      
    

  

  

    

      
      
    

  

  

    

      
      
    

  

  

    

      
      
    

  


  

    
Labeled

    
An input can be formatted with a label

    

      

        http://
      

      
    

  

  

    

      
      

        
.com

        
        

          
.com

          
.net

          
.org

        

      

    

  

  

    

      
      

        kg
      

    

  

  

    

      
      
      
.00

    

  

  

    

      
      
      
        Add Tag
      
    

  

  

    

      
      

        
      

    

  

  

    

      
      

        
      

    

  


  

    
Action

    
An input can be formatted to alert the user to an action they may perform

    

      
      
    

  

  

    

      
      
    

  

  

    

      
      
      

        
This Page

        
        

          
This Organization

          
Entire Site

        

      

    

  

  

    

      
      
      
Search

    

  

  

    

      
      
    

  

  

    

      
      
    

  


  

    
Transparent

    
A transparent input has no background

    

      
    

  

  

    

      
      
    

  

  

    

      
      
    

  


  

    
Inverted

    
An input can be formatted to appear on dark backgrounds

    

      

        
      

      

      

        
        
      

      

      

        
        
      

    

  



  

    
Fluid

    
An input can take the size of its container

    

      
      
    

    

    

      
      
Search

    

  


  

    
Size

    
An input can vary in size

    
Inputs will automatically size themselves unless you manually declare a width

    

      
      
    

  

  

    

      
      
    

  

  

    

      
      
    

  

  

    

      
      
    

  

  

    

      
      
    

  

  

    

      
      
    

  






================================================
FILE: server/documents/elements/label.html.eco
================================================
---
layout      : 'default'
css         : 'label'
standalone  : true

element     : 'label'
elementType : 'element'

title       : 'Label'
description : 'A label displays content classification'
type        : 'UI Element'

themes      : ['Default', 'GitHub']
---


<%- @partial('header') %>




  
Types


  

    
Label

    
A label

    

       23
    

  


  

    
Image

    
A label can be formatted to emphasize an image

    
      
      Joe
    
    
      
      Elliot
    
    
      
      Stevie
    
  

  

    
      
      Veronika
      
Friend

    
    
      
      Veronika
      
Student

    
    
      
      Helen
      
Co-worker

    
  

  

    

      
      Adrienne
      
    

    

      
      Zoe
      
    

    

      
      Nan
      
    

  


  

    
Pointing

    
A label can point to content next to it

    

      

        
        

          Please enter a value
        

      

      

      

        

          Please enter a value
        

        
      

      

      

        
        

          That name is taken!
        

      

      

      

        

          Your password must be 6 characters or more
        

        
      

    

  


  

    

      

        
        

          Please enter a value
        

      

      

      

        

          Please enter a value
        

        
      

      

      

        
        

          That name is taken!
        

      

      

      

        

          Your password must be 6 characters or more
        

        
      

    

  

  

    
Corner

    
A label can position itself in the corner of an element

    
A corner label must be positioned inside a container with position: relative to display properly. If a container is rounded you will need to add overflow:hidden to the container to produce a rounded label.

    

      

        

          
            
          
          
        

      

      

        

          
            
          
          
        

      

    

  


  

    
Tag

    
A label can appear as a tag

    New
    Upcoming
    Featured
  


  

    
Ribbon

    
A label can appear as a ribbon attaching itself to an element.

    

      

        

          Overview
          Account Details
          
          Community User Reviews
          
        

      

      

        

          Specs
          
          Reviews
          
        

      

    

  

  

    

      

        

          

             Hotel
          

          
        

      

      

        

          

             Food
          

          
        

      

    

  


  

    
Attached

    
A label can attach to a content segment

    

      
Attached labels attempt to intelligently pad other content to account for their position, but may not in all cases apply this padding correctly.

      
If this happens you may need to manually correct the padding of the other elements inside the container.
    

    

      

        

          

            
HTML

            
          

        

        

          

            
CSS

            
          

        

        

          

            
Code

            
          

        

      

      

        

          

            
View

            
          

        

        

          

            
User View

            
          

        

        

          

            
Admin View

            
          

        

      

    

      

    
HTML

    
CSS

    
Code

    
View

    
User View

    
Admin View

      

  



  

    
Horizontal

    
A horizontal label is formatted to label content along-side it horizontally

    

      
        
Fruit

        Kumquats
      
      
        
Candy

        Ice Cream
      
      
        
Fruit

        Orange
      
      
        
Dog

        Poodle
      
    

  


  

    
Floating

    
A label can float above another element.

    
A floating label must be positioned inside a container with position: relative to display properly.

    

      
         Messages
        
22

      
      
         Friends
        
22

      
    

  


  
Content


  

    
Detail

    
A label can contain a detail

    

      Dogs
      
214

    

  


  

    
Icon

    
A label can include an icon

    
      
      Mail
    
    
      Tag
      
    
  


  

    
Image

    
A label can include an image

    
      
      Elliot
    
    
      
      Stevie
    
  


  

    
Link

    
A label can be a link or contain an item that links

    
       23
    
  

  

    

      
      23
      View Mail
    

  


  
Variations



  

    
Circular

    
A label can be circular

    2
    2
    2
    2
    2
    2
    2
    2
    2
    2
    2
    2
    2
  

  

    
    
    
    
    
    
    
    
    
    
    
    
    
  


  

    
Basic
      
New in 2.1

    

    
A label can reduce its complexity

    Basic
    Pointing
    
      
      Elliot
    Red Pointing
    Blue
    
  


  

    
Colored

    
A label can have different colors

    Red
    Orange
    Yellow
    Olive
    Green
    Teal
    Blue
    Violet
    Purple
    Pink
    Brown
    Grey
    Black
  


  

    
Size

    
A label can be small or large

    

      Mini
    

    

      Tiny
    

    

      Small
    

    

      Medium
    

    

      Large
    

    

      Big
    

    

      Huge
    

    

      Massive
    

  


  
Groups


  

    
Group Size

    
Labels can share sizes together

    

      

        Fun
      

      

        Happy
      

      

        Smart
      

      

        Witty
      

    

  

  

    
Colored Group

    
Labels can share colors together

    

      
        Fun 
      
      
        Happy
        
22

      
      
        Smart
      
      
        Insane
      
      
        Exciting
      
    

  


  

    
Tag Group

    
Labels can share tag formatting

    

      
        $10.00
      
      
        $19.99
      
      
        $24.99
      
      
        $30.99
      
      
        $10.25
      
    

  


  

    
Circular Group

    
Labels can share shapes

    

      
        11
      
      
        22
      
      
        33
      
      
        44
      
      
        141
      
    

  






================================================
FILE: server/documents/elements/list.html.eco
================================================
---
layout      : 'default'
css         : 'list'
standalone  : true

element     : 'list'
elementType : 'element'

title       : 'List'
description : 'A list is used to group related content'
type        : 'UI Element'

themes      : ['Default']
---


<%- @partial('header') %>



  
Types

  

    
List

    
A list groups related content

    

      
Apples

      
Pears

      
Oranges

    

  

  

    

      

        
        

          Semantic UI
        

      

      

        
        

          New York, NY
        

      

      

        
        

          jack@semantic-ui.com
        

      

      

        
        

          semantic-ui.com
        

      

    

  

  

    

      

        
        

          Semantic-Org/Semantic-UI
          
Updated 10 mins ago

        

      

      

        
        

          Semantic-Org/Semantic-UI-Docs
          
Updated 22 mins ago

        

      

      

        
        

          Semantic-Org/Semantic-UI-Meteor
          
Updated 34 mins ago

        

      

    

  


  


    

      

        
        

          
src

          
Source files for project

          

            

              
              

                
site

                
Your site's theme

              

            

            

              
              

                
themes

                
Packaged theme files

                

                  

                    
                    

                      
default

                      
Default packaged theme

                    

                  

                  

                    
                    

                      
my_theme

                      
Packaged themes are also available in this folder

                    

                  

                

              

            

            

              
              

                
theme.config

                
Config file for setting packaged themes

              

            

          

        

      

      

        
        

          
dist

          
Compiled CSS and JS files

          

            

              
              

                
components

                
Individual component CSS and JS

              

            

          

        

      

      

        
        

          
semantic.json

          
Contains build settings for gulp

        

      

    

  


  

    
Bulleted

    
A list can mark items with a bullet

    

      
Gaining Access

      
Inviting Friends

      

        
Benefits

        

          Link to somewhere
          
Rebates

          
Discounts

        

      

      
Warranty

    

  

  

    
For convenience, a simple bulleted list can also use ul tag.

    
    
      
  • Gaining Access
    • 
      
  • Inviting Friends
    • 
      
  • Benefits
        
      
          
    • Use Anywhere
      • 
          
    • Rebates
      • 
          
    • Discounts
      • 
        
    
      
    • 
      
  • Warranty
    • 
    

  

  

    

      
        About Us
      
      
        Sitemap
      
      
        Contact
      
    

  


  

    
Ordered

    
A list can be ordered numerically

    

      Getting Started
      Introduction
      

        Languages
        

          HTML
          Javascript
          CSS
        

      

      Review
    

  

  

    
An ordered list can also use the ol tag

    
    
      
  1. Signing Up
    2. 
      
  2. User Benefits
    3. 
      
  3. User Types
        
      
          
    1. Admin
      2. 
          
    2. Power User
      3. 
          
    3. Regular User
      4. 
        
    
      
    4. 
      
  4. Deleting Your Account
    5. 
    

  


  

    
You can also manually specify a value for an ordered list using data-value on a div, or value on an li
    

    
    
      
  1. Signing Up
    2. 
      
  2. User Benefits
    3. 
      
  3. User Types
        
      
          
    1. Admin
      2. 
          
    2. Power User
      3. 
          
    3. Regular User
      4. 
        
    
      
    4. 
      
  4. Deleting Your Account
    5. 
    

  



  

    
Link

    
A list can be specially formatted for navigation links

    

      
Home

      About
      Jobs
      Team
    

  



  
Content


  

    
Item

    
A list item can contain a set of items

    

      

        1
      

      

        2
      

      

        3
      

    

  


  

    
Icon

    
A list item can contain an icon

    

      
        
        

          
Floated Icon

          
This text will always have a left margin to make sure it sits alongside your icon

        

      
      
        
        

          
Icon Alignment

          
Floated icons are by default top aligned. To have an icon top aligned try this example.

        

      
      

        
        Inline Text
      

    

  


  

    
Image

    
A list item can contain an image


    

      

        
        

          Rachel
          
Last seen watching Arrested Development just now.

        

      

      

        
        

          Lindsay
          
Last seen watching Bob's Burgers 10 hours ago.

        

      

      

        
        

          Matthew
          
Last seen watching The Godfather Part 2 yesterday.

        

      

      

        
        

          Jenny Hess
          
Last seen watching Twin Peaks 3 days ago.

        

      

      

        
        

          Veronika Ossi
          
Has not watched anything recently

        

      

    

  


  

    
Link

    
A list can contain links

    

      What is a FAQ?
      Who is our user?
      Where is our office located?
    

  

  

    

      

        Header
        

          Click a link in our description.
        

      

      

        Learn More
        

          Learn more about this site on our FAQ page.
        

      

    

  


  

    
Header

    
A list item can contain a header

    

      

        
New York City

        A lovely city
      

      

        
Chicago

        Also quite a lovely city
      

      

        
Los Angeles

        Sometimes can be a lovely city
      

      

        
San Francisco

        What a lovely city
      

    

  


  

    
Description

    
A list item can contain a description

    

      

        
        

          Krolewskie Jadlo
          
An excellent polish restaurant, quick delivery and hearty, filling meals.

        

      

      

        
        

          Xian Famous Foods
          
A taste of Shaanxi's delicious culinary traditions, with delights like spicy cold noodles and lamb burgers.

        

      

      

        
        

          Sapporo Haru
          
Greenpoint's best choice for quick and delicious sushi.

        

      

      

        
        

          Enid's
          
At night a bar, during the day a delicious brunch spot.

        

      

    

  


  
Variations



  

    
Horizontal

    
A list can be formatted to have items appear horizontally

    

      

        
        

          
Tom

          Top Contributor
        

      

      

        
        

          
Christian Rocha

          Admin
        

      

      

        
        

          
Matt

          Top Rated User
        

      

    

  


  

    

      

        
        

          
Steve Jobes

          50 Points
        

      

      

        
        

          
Stevie Feliciano

          44 Points
        

      

      

        
        

          
Jenny Hess

          11 Points
        

      

    

  

  

    

      
        Terms and Conditions
      
      
        Privacy Policy
      
      
        Contact Us
      
    

  


  

    
Inverted

    
A list can be inverted to appear on a dark background

    

      

        

          

            
Snickerdoodle

            An excellent companion
          

        

        

          

            
Poodle

            A poodle, its pretty basic
          

        

        

          

            
Paulo

            He's also a dog
          

        

      

    

  


  

    
Selection

    
A selection list formats list items as possible choices

    

      

        
        

          
Helen

        

      

      

        
        

          
Christian

        

      

      

        
        

          
Daniel

        

      

    

  


  

    
Animated

    
A list can animate to set the current item apart from the list

    

      Be sure content can fit on one line when using the animated variation, otherwise text content will reflow when hovered.
    

    

      

        
        

          
Helen

        

      

      

        
        

          
Christian

        

      

      

        
        

          
Daniel

        

      

    

  


  

    
Relaxed

    
A list can relax its padding to provide more negative space


    

      

        
        

          Daniel Louise
          
Last seen watching Arrested Development just now.

        

      

      

        
        

          Stevie Feliciano
          
Last seen watching Bob's Burgers 10 hours ago.

        

      

      

        
        

          Elliot Fu
          
Last seen watching The Godfather Part 2 yesterday.

        

      

    

  

  

    

      

        
        

          Daniel Louise
        

      

      

        
        

          Stevie Feliciano
        

      

      

        
        

          Elliot Fu
        

      

    

  

  

    

      

        
        

          Daniel Louise
          
Last seen watching Arrested Development just now.

        

      

      

        
        

          Stevie Feliciano
          
Last seen watching Bob's Burgers 10 hours ago.

        

      

      

        
        

          Elliot Fu
          
Last seen watching The Godfather Part 2 yesterday.

        

      

    

  

  

    

      

        
        

          Daniel Louise
        

      

      

        
        

          Stevie Feliciano
        

      

      

        
        

          Elliot Fu
        

      

    

  


  

    
Divided

    
A list can show divisions between content

    

      

        
        

          Daniel Louise
        

      

      

        
        

          Stevie Feliciano
        

      

      

        
        

          Elliot Fu
        

      

    

  


  

    
Celled

    
A list can divide its items into cells

    

      

        
        

          
Snickerdoodle

          An excellent companion
        

      

      

        
        

          
Poodle

          A poodle, its pretty basic
        

      

      

        
        

          
Paulo

          He's also a dog
        

      

    

  

  

    

      
Cats

      
Horses

      
Dogs
        

          
Labradoodles

          
Shiba Inu

          
Mastiff

        

      

    

  

  

    

      
About Us

      
Contact

      
Support

    

  


  

    
Size

    
A list can vary in size

    

      

        
        

          
Helen

        

      

      

        
        

          
Christian

        

      

      

        
        

          
Daniel

        

      

    

  

  

    

      

        
        

          
Helen

        

      

      

        
        

          
Christian

        

      

      

        
        

          
Daniel

        

      

    

  

  

    

      

        
        

          
Helen

        

      

      

        
        

          
Christian

        

      

      

        
        

          
Daniel

        

      

    

  

  

    

      

        
        

          
Helen

        

      

      

        
        

          
Christian

        

      

      

        
        

          
Daniel

        

      

    

  

  

    

      

        
        

          
Helen

        

      

      

        
        

          
Christian

        

      

      

        
        

          
Daniel

        

      

    

  

  

    

      

        
        

          
Helen

        

      

      

        
        

          
Christian

        

      

      

        
        

          
Daniel

        

      

    

  

  

    

      

        
        

          
Helen

        

      

      

        
        

          
Christian

        

      

      

        
        

          
Daniel

        

      

    

  


  
Content Variations



  

    
Vertically Aligned

    
An element inside a list can be vertically aligned

    

      

        
        

          Top Aligned
        

      

      

        
        

          Middle
        

      

      

        
        

          Bottom
        

      

    

  



  

    
Floated

    
An list, or an element inside a list can be floated left or right

    

      

        

          
Add

        

        
        

          Lena
        

      

      

        

          
Add

        

        
        

          Lindsay
        

      

      

        

          
Add

        

        
        

          Mark
        

      

      

        

          
Add

        

        
        

          Molly
        

      

    

  

  

    

      
© GitHub, Inc.

      Terms
      Privacy
      Contact
    

    

      About Us
      Jobs
    

  








================================================
FILE: server/documents/elements/loader.html.eco
================================================
---
layout      : 'default'
css         : 'loader'
standalone  : true

element     : 'loader'
elementType : 'element'

title       : 'Loader'
description : 'A loader alerts a user to wait for an activity to complete'
type        : 'UI Element'

themes      : ['Default', 'Duo', 'Pulsar']
---

<%- @partial('header') %>






  
Types

  

    
Loader

    
A loader

    
Loaders are hidden unless active or inside an active dimmer.

    

      
      

        

      

    

  


  

    
Text Loader

    
A loader can contain text

    

      

        
Loading

      

      
    

  

  

    

      

        
Loading

      

      
    

  



  
States


  

    
Indeterminate

    
A loader can show it's unsure of how long a task will take

    

      

        
Preparing Files

      

      
    

  


  

    
Active

    
A loader can be active or visible

    

      An active loader may not be clearly visible without using a ui dimmer
    

    

      

      

    

  


  

    
Disabled

    
A loader can be disabled or hidden

    

      

      
    

  



  
Variations


  

    
Inline

    
Loaders can appear inline with content 

    

  


  

    
Inline Center

    
Loaders can appear inline centered with content 

    

  


  

    
Size

    
Loaders can have different sizes


    

      

        
Loading

      

      
    

    

      

        
Loading

      

      
    

    

      

        
Loading

      

      
    

    

      

        
Loading

      

      
      
    

    

      

        
Loading

      

      
      
      
    

    

      

        
Loading

      

      
      
      
    

    

      

        
Loading

      

      
      
      
    

    

      

        
Loading

      

      
      
      
    

  


  

    
Inverted

    
Loaders can have their colors inverted.

    

      

      

      

      

      

    

  

  

    
Loaders will automatically be inverted inside inverted dimmer

    

      

        
Loading

      

      
    

    

      

        
Loading

      

      
    

    

      

        
Loading

      

      
      
    

    

      

        
Loading

      

      
      
      
    

  






================================================
FILE: server/documents/elements/placeholder.html.eco
================================================
---
layout      : 'default'
css         : 'loader'
standalone  : true

element     : 'placeholder'
elementType : 'element'

title       : 'Placeholder'
description : 'A placeholder is used to reserve splace for content that soon will appear in a layout'
type        : 'UI Element'

themes      : ['Default']
---

<%- @partial('header') %>






  
Types


  

    

      Placeholder
      
New in 2.4.0

    

    
A placeholder is used to reserve space for content that soon will appear in a layout.

    

      Placeholders can include paragraph, header, image header and image to let you format the loaders to emulate the content being loaded.
    

    

      

        

        

      

      

        

        

        

        

        

      

    

  

  

    

      

        

          

            

              

              

            

            

              

              

            

          

        

      

      

        

          

            

              

              

            

            

              

              

            

          

        

      

      

        

          

            

              

              

            

            

              

              

            

          

        

      

    

  

  

    <%- @partial('examples/content-loader') %>
  



  
Content

  

    
Lines

    
A placeholder can contain lines of text

    
By default, repeated lines will appear varied in width. However, it may be useful to specify an exact length to make it match up with content more effectively

    

      

      

      

      

      

    

  

  

    
Headers

    
A placeholder can contain a header

    

      Header content will have a slightly larger block size from paragraph
    

    

      

        

        

      

    

  

  

    

      

        

        

      

    

  

  

    
Paragraph

    
A placeholder can contain a paragraph

    
Paragraphs are used to group lines together.

    

      

        

        

        

        

        

      

      

        

        

        

      

    

  

  

    
Image

    
A placeholder can contain an image

    

      

    

  

  

    

      Using square (1:1) or rectangular (4:3) will embed an aspect ratio into the image loader so that they modify size correctly with responsive styles.
    

    

      

        

          

            

          

        

      

      

        

          

            

          

        

      

      

        

          

            

          

        

      

    

  

  

    

      

        

          

            

          

        

      

      

        

          

            

          

        

      

      

        

          

            

          

        

      

    

  

  
Variations


  

    
Line Length

    
A line can specify how long its contents should appear

    

      

      

      

      

      

      

    

  

  


    

      

        

        

      

      

        

        

      

    

  


  

    
Fluid

    
A fluid placeholder takes up the width of its container

    

      

        

        

      

      

        

        

        

      

    

  

  

    
Inverted

    
A placeholder can have their colors inverted.

    

      

        

          

          

        

        

          

          

          

        

      

    

  





================================================
FILE: server/documents/elements/rail.html.eco
================================================
---
layout      : 'default'
css         : 'basic minimal'
element     : 'rail'
elementType : 'element'
standalone  : true

title       : 'Rail'
description : 'A rail is used to show accompanying content outside the boundaries of the main view of a site'
type        : 'UI Element'

---


<%- @partial('header') %>




  

    
Introduction


    
When to Use

    
Rails display optional accompanying content outside of the main viewport of your website. Sites often use rails with sticky content to fix additional—often optional—content to your viewport as you scroll through the page.

    
Semantic's default rail is 300px wide, just large enough to fit many common ad unit sizes, and just wide enough for a sub-navigation menu or a prominent call-to-action.

    
Adjusting Sizes

    
Railed content will most likely require arbitrary breakpoints that are specific to your site's content, to ensure they do not exceed the horizontal width of a user's browser.

    
Rails are generally used beside long, single-column containers with long-form content like blog posts, articles, or user profiles. Generally your main text container width should be set between around 600-800px depending on your font size to optimize line length for readability.

    
This set-up means most tablet browsers can only accomodate a single rail. Ultrabooks and lower resolution computers two small rails, and larger monitors, usually two full-sized rails. The specifics of this implementation is left up to you in your project.

    

      The following examples do not use any breakpoints, so some railed content may appear outside your browser's viewport on smaller screens.
    

  


  
Types


  

    
Rail

    
A rail can be presented on the left or right side of a container


    

      

        

          Left Rail Content
        

      

      

        

          Right Rail Content
        

      

      
      
    

  

  

    
Internal

    
A rail can attach itself to the inside of a container


    

      

        

          Left Rail Content
        

      

      

        

          Right Rail Content
        

      

    

  


  

    
Dividing

    
A rail can create a division between itself and a container

    

      

        

          Left Rail Content
        

      

      

        

          Right Rail Content
        

      

      
      
    

  


  
Variations


  

    
Attached

    
A rail can appear attached to the main viewport

    

      

        

          Left Rail Content
        

      

      

        

          Right Rail Content
        

      

      
      
    

  

  

    

      

        

          Left Rail Content
        

      

      

        

          Right Rail Content
        

      

    

  


  

    
Close

    
A rail can appear closer to the main viewport

    

      

        

          Left Rail Content
        

      

      

        

          Right Rail Content
        

      

      
      
    

  

  

    

      

        

          Left Rail Content
        

      

      

        

          Right Rail Content
        

      

      
      
    

  


  

    
Size

    
A rail can have different sizes

    

      

        Mini
      

      

        Tiny
      

      
      
    

    

      

        Small
      

      

        Large
      

      
      
    

    

      

        Big
      

      

        Huge
      

      
      
    

    

      

        Massive
      

      
      
    

  







================================================
FILE: server/documents/elements/reveal.html.eco
================================================
---
layout      : 'default'
css         : 'reveal'
standalone  : true

element     : 'reveal'
elementType : 'element'

title       : 'Reveal'
description : 'A reveal displays additional content in place of previous content when activated'
type        : 'UI Element'

themes      : ['Default']
---

<%- @partial('header') %>




  
Types


  

    
Fade

    
An element can disappear to reveal content below

    

      

        
      

      
    

  

  

    

      
      
    

  


  

    
Move

    
An element can move in a direction to reveal content

    

      

        
      

      
    

  

  

    

      

        
      

      
    

  


  

    

      

        
      

      
    

  


  

    

      

        
      

      
    

  


  

    
Rotate

    
An element can rotate to reveal content below

    

      
      
    

  

  

    

      
      
    

  


  
Content


  

    
Visible Content

    
A reveal may contain content that is visible before interaction

    

      Visible and hidden content should be the same aspect ratio
    

    

      
      
    

  


  

    
Hidden Content

    
A reveal may contain content that is hidden before user interaction

    

      
      
    

  


  
States


  

    
Active

    
An active reveal displays its hidden content

    

      Adding the class active can allow you to show the hidden contents programatically
    

    

      

        
      

      
    

  


  
Variations



  

    
Instant

    
An element can show its content without delay

    

      

        
      

      
    

  



  
States


  

    
Disabled

    
A disabled reveal will not animate when hovered

    

      

        
      

      
    

  








================================================
FILE: server/documents/elements/segment.html.eco
================================================
---
layout      : 'default'
css         : 'segment'
standalone  : true

element     : 'segment'
elementType : 'element'

title       : 'Segment'
description : 'A segment is used to create a grouping of related content'
type        : 'UI Element'
themes      : ['default', 'GitHub']
---
<%- @partial('header') %>






  
Types


  

    
Segment

    
A segment of content

    

      
    

  

  

    

      Placeholder Segment
      
New in 2.4.0

    

    
A segment can be used to reserve space for conditionally displayed content.

    

      

        
        No documents are listed for this customer.
      

      
Add Document

    

  


  

    

      To use inline-block content inside a placeholder, wrap the content in inline.
    

    

      

        
        We don't have any documents matching your query
      

      

        
Clear Query

        
Add Document

      

    

  



  

    

      

        
Or

        

          

            

              
              Find Country
            

            

              

                

                  
                  
                

                

              

            

          

          

            

              
              Add New Country
            

            

              Create
            

          

        

      

    

  


  

    
Raised

    
A segment may be formatted to raise above the page.

    

      
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.

    

  


  

    
Stacked

    
A segment can be formatted to show it contains multiple pages

    

      
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.

    

  

  

    

      
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.

    

  


  

    
Piled

    
A segment can be formatted to look like a pile of pages

    

      Piled segments use negative z-index to format the additional pages below the segment. In order for them to appear correctly, your segment's offset container must have a z-index declared.
    

    

      
A header

      
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.


      
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.


      
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.

    

  


  

    
Vertical Segment

    
A vertical segment formats content to be aligned as part of a vertical group

    

      
    

    

      
    

    

      
    

  


  
Groups


  

    
Segments

    
A group of segments can be formatted to appear together


    

      

        
Top

      

      

        
Middle

      

      

        
Middle

      

      

        
Middle

      

      

        
Bottom

      

    

  

  

    

      

        
Top

      

      

        
Middle

      

      

        
Middle

      

      

        
Middle

      

      

        
Bottom

      

    

  

  

    

      

        
Top

      

      

        
Secondary Content

      

    

  

  

    
Nested Segments

    
A group of segments can be nested in another group of segments

    

      

        
Top

      

      

        

          
Nested Top

        

        

          
Nested Middle

        

        

          
Nested Bottom

        

      

      

        
Middle

      

      

        

          
Top

        

        

          
Middle

        

        

          
Bottom

        

      

      

        
Bottom

      

    

  


  

    
Horizontal Segments

    
A segment group can appear horizontally

    

      

        
      

      

        
      

      

        
      

    

  



  

    
Raised Segments

    
A group of segments can be raised

    

      

        
Top

      

      

        
Middle

      

      

        
Bottom

      

    

  


  

    
Stacked Segments

    
A group of segments can be stacked

    

      

        
Top

      

      

        
Middle

      

      

        
Bottom

      

    

  


  

    
Piled Segments

    
A group of segments can be piled

    

      

        
Top

      

      

        
Middle

      

      

        
Bottom

      

    

  


  
States


  

    
Disabled

    
A segment may show its content is disabled

    

      
    

  

  

    
Loading

    
A segment may show its content is being loaded

    

      
      
    

  


  
Variations


  

    
Inverted

    
A segment can have its colors inverted for contrast

    

      
I'm here to tell you something, and you will probably read me first.

    

  


  

    
Attached

    
A segment can be attached to other content on a page


    

      
Attached segments are designed to be used with other attached variations like attached header or attached messages.

    

    

      
This segment is on top

    

    

      
This segment is attached on both sides

    

    

      
This segment is on bottom

    

  

  

    

      Dogs
    

    

      
Dogs are one type of animal

    

    

      Cats
    

    

      
Cats are thought of as being related to dogs, but only humans think this.

    

    

      Lions
    

    

      
Humans don't think of lions as being like cats, but they are.

    

    

      
      You've reached the end of this content segment!
    

  


  

    
Padded

    
A segment can increase its padding

    

      
    

  

  

    

      
    

  


  

    
Compact

    
A segment may take up only as much space as is necessary

    

      
Pellentesque habitant morbi

    

  

  

    

      

        
Pellentesque habitant morbi

      

      

        
Pellentesque habitant morbi

      

    

  


  

    
Colored

    
A segment can be colored

    
Red

    
Orange

    
Yellow

    
Olive

    
Green

    
Teal

    
Blue

    
Violet

    
Purple

    
Pink

    
Brown

    
Grey

    
Black

  

  

    
These colors can be inverted

    
Red

    
Orange

    
Yellow

    
Olive

    
Green

    
Teal

    
Blue

    
Violet

    
Purple

    
Pink

    
Brown

    
Grey

    
Black

  


  

    
Emphasis

    
A segment can be formatted to appear more or less noticeable

    

      
I'm here to tell you something, and you will probably read me first.

    

    

      
I am pretty noticeable but you might check out other content before you look at me.

    

    

      
If you notice me you must be looking very hard.

    

  

  

    
Inverted colors may also be more or less noticeable

    

      
I'm here to tell you something, and you will probably read me first.

    

    

      
I am pretty noticeable but you might check out other content before you look at me.

    

    

      
If you notice me you must be looking very hard.

    

  

  

    

      
I'm here to tell you something, and you will probably read me first.

    

    

      
I am pretty noticeable but you might check out other content before you look at me.

    

    

      
If you notice me you must be looking very hard.

    

  

  

    
Circular

    
A segment can be circular

    
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

    

      

        Buy Now
        
$10.99

      

    

    

      

        Buy Now
        
$10.99

      

    

  



  

    

      Clearing
      New
    

    
A segment can clear floated content

    

      
Floated

    

  


  

    
Floated

    
A segment can appear to the left or right of other content

    

      
This segment will appear to the right
    

    

      This segment will appear to the left
    

  


  

    
Text Alignment

    
A segment can have its text aligned to a side

    

      Right
    

    

      Left
    

    

      Center
    

  


  

    
Basic

    
A basic segment has no special formatting

    

      
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.

    

  







================================================
FILE: server/documents/elements/step.html.eco
================================================
---
layout      : 'default'
css         : 'steps'
standalone  : true

element     : 'step'
elementType : 'element'

title       : 'Step'
description : 'A step shows the completion status of an activity in a series of activities'
type        : 'UI Element'

themes      : ['Default', 'Basic', 'GitHub']
---

<%- @partial('header') %>





  
Types


  

    
Step

    
A single step

    

      

        Shipping
      

    

  


  
Groups


  

    

      Steps
    

    
A set of steps

    

      
      

        
Responsive Element

        
Steps will automatically stack on mobile. To make steps automatically stack for tablet use the tablet stackable variation.

      

    

    

      

        
        

          
Shipping

          
Choose your shipping options

        

      

      

        
        

          
Billing

          
Enter billing information

        

      

      

        
        

          
Confirm Order

        

      

    

  


  

    
Ordered

    
A step can show a ordered sequence of steps

    

      

        

          
Shipping

          
Choose your shipping options

        

      

      

        

          
Billing

          
Enter billing information

        

      

      

        

          
Confirm Order

          
Verify order details

        

      

    

  


  

    
Vertical

    
A step can be displayed stacked vertically

    

      

        
        

          
Shipping

          
Choose your shipping options

        

      

      

        
        

          
Billing

          
Enter billing information

        

      

      

        
        

          
Confirm Order

          
Verify order details

        

      

    

  



  
Content


  

    
Description

    
A step can contain a description

    

      

        
Shipping

        
Choose your shipping options

      

    

  

  

    
Icon

    
A step can contain an icon

    

      

        
        

          
Shipping

          
Choose your shipping options

        

      

    

  

  

    
Link

    
A step can link

    

      
        
        

          
Shipping

          
Choose your shipping options

        

      
      
        

          
Billing

          
Enter billing information

        

      
    

  

  

    

      

        
        

          
Shipping

          
Choose your shipping options

        

      

      

        

          
Billing

          
Enter billing information

        

      

    

  



  
States


  

    
Active

    
A step can be highlighted as active

    

      

        
        

          
Billing

          
Enter billing information

        

      

    

  

  

    
Completed

    
A step can show that a user has completed it

    

      

        
        

          
Billing

          
Enter billing information

        

      

    

  

  

    

      

        

          
Billing

          
Enter billing information

        

      

    

  


  

    
Disabled

    
A step can show that it cannot be selected

    

      

        Billing
      

    

  


  
Variations


  

    
Stackable

    
A step can stack vertically only on smaller screens

    

      

        
        

          
Shipping

          
Choose your shipping options

        

      

      

        
        

          
Billing

          
Enter billing information

        

      

      

        
        

          
Confirm Order

          
Verify order details

        

      

    

  

  

    
Fluid

    
A fluid step takes up the width of its container

    

      

        

          

            
            

              
Shipping

              
Choose your shipping options

            

          

          

            
            

              
Billing

              
Enter billing information

            

          

        

      

      

        
The steps take up the entire column width

      

    

  


  

    

      Unstackable
      
New in 2.2.11

    

    
A step can prevent itself from stacking on mobile

    

      

        
        

          
Shipping

          
Choose your shipping options

        

      

      

        
        

          
Billing

          
Enter billing information

        

      

      

        
        

          
Confirm Order

          
Verify order details

        

      

    

  


  

    

      Attached
    

    
Steps can be attached to other elements


    

      

        
        

          
Shipping

          
Choose your shipping options

        

      

      

        
        

          
Billing

          
Enter billing information

        

      

      

        
        

          
Confirm Order

          
Verify order details

        

      

    

    

      
    

    

      

        
        

          
Shipping

          
Choose your shipping options

        

      

      

        
        

          
Billing

          
Enter billing information

        

      

      

        
        

          
Confirm Order

          
Verify order details

        

      

    

  




  

    
Evenly Divided

    
Steps can be divided evenly inside their parent

    

      

        
        

          
Shipping

        

      

      

        
        

          
Billing

        

      

      

        
        

          
Confirm Order

        

      

    

  


  

    

      

        
        

          
Billing

        

      

      

        
        

          
Confirm Order

        

      

    

  


  

    
Size

    
Steps can have different sizes

    

      

        
        

          
Shipping

          
Choose your shipping options

        

      

      

        
        

          
Billing

          
Enter billing information

        

      

      

        
        

          
Confirm Order

          
Verify order details

        

      

    

  

  

    

      

        
        

          
Shipping

          
Choose your shipping options

        

      

      

        
        

          
Billing

          
Enter billing information

        

      

      

        
        

          
Confirm Order

          
Verify order details

        

      

    

  

  

    

      

        
        

          
Shipping

          
Choose your shipping options

        

      

      

        
        

          
Billing

          
Enter billing information

        

      

      

        
        

          
Confirm Order

          
Verify order details

        

      

    

  

  

    

      

        
        

          
Shipping

        

      

      

        
        

          
Billing

        

      

    

  

  

    

      

        
        

          
Shipping

        

      

      

        
        

          
Billing

        

      

    

  

  

    

      

        
        

          
Shipping

        

      

      

        
        

          
Billing

        

      

    

  


  

    

      

        
        

          
Shipping

        

      

      

        
        

          
Billing

        

      

    

  








================================================
FILE: server/documents/globals/reset.html.eco
================================================
---
layout      : 'default'
css         : 'reset-page'
element     : 'reset'
elementType : 'global'

title       : 'Reset'
description : 'A reset is a set of normalized values for CSS properties that correct for abberations in browser defaults'
type        : 'UI Global'

themes      : ['Default', 'Basic', 'Resetcss']

---


<%- @partial('header', { tabs: {  overview: 'Overview', test: 'Test' } }) %>



  

    
What's In Our Reset

    
Semantic's default theme includes the latest Normalize CSS to provide a base line HTML reset. In addition, Semantic UI requires a Box-sizing reset, to make sure that elements handle width definitions in the same way.

    

      The reset is required for Semantic UI components to function properly, and should also be included when using individual components.
    


    
Reset Options

    

      The basic themes only includes the required box-sizing reset and nothing else. The resetcss theme provides a version of Reset CSS, a less opinionated CSS reset.
    

  

  

    
Reset Test

      

        
html

        
should have sans-serif font family (opinionated)

        

          abcdefghijklmnopqrstuvwxyz
        


        
body

        
should have no margin (opinionated)

        

          (there should be no red background visible on this page)
        


        
article, aside, details, figure, figcaption, footer, header, hgroup, main, nav, section, summary

        
should render as block

        

          
article

          
          

            summary
            details
          

          

            figure
            
figcaption

          

          
footer

          
header

          
hgroup

          
main

          
          
section

        


        
audio, canvas, progress, video

        
should render as inline-block and baseline-aligned

        

          
          canvas
          progress
          
        


        
audio:not([controls]), template, [hidden]

        
should not display

        

          
          
          
        


        
a

        
should have a transparent background when active

        

          dummy anchor
        

        
should not have a focus outline when both focused and hovered (opinionated)

        

          dummy anchor
        


        
abbr[title]

        
should have a dotted bottom border

        

          abbr
        


        
b, strong

        
should have bold font-weight

        

          b
          strong
        


        
dfn

        
should have italic font-style

        

          dfn
        


        
h1

        
should not change size within an article

        

          
Heading (control)

          

            
Heading (in article)

          

        

        
should not change size within a section

        

          
Heading (control)

          

            
Heading (in section)

          

        


        
mark

        
should have a yellow background

        

          mark
        


        
small

        
should render equally small in all browsers

        

          control. small.
        


        
sub and sup

        
should not affect a line's visual line-height

        

          
control.

          
control. sub.

          
control. sup.

        


        
img

        
should not have a border when wrapped in an anchor

        

          
            
            
          
        


        
svg

        
should not overflow

        

          
            
          
        


        
figure

        
should have margins

        

          

            
          

        


        
hr

        
should have a content-box box model

        

          

        


        
pre

        
should trigger a scrollbar when too wide for its container

        

          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et me.

        


        
code, kbd, pre, samp

        
should render em-unit preformatted text at the same absolute size as normal text

        

          span: abcdefghijklmnopqrstuvwxyz.

          code: abcdefghijklmnopqrstuvwxyz.

          kbd: abcdefghijklmnopqrstuvwxyz.

          samp: abcdefghijklmnopqrstuvwxyz.
          
pre: abcdefghijklmnopqrstuvwxyz.

        


        
button, input, optgroup, select, textarea

        
should inherit color from ancestor

        

          

          

          

          
        

        
should inherit font from ancestor

        

          

          

          

          
        

        
should not have margins

        

          
          
          
          
          
        


        
button

        
should have visible overflow

        

          
          
        


        
button, select

        
should not inherit text-transform

        

          
          
        


        
button and button-style input

        
should have pointer cursor style

        

          

          

          

          

          

        

        
should be styleable

        

          
          

          

          

          

          

        


        
disabled button and input

        
should have default cursor style

        

          

          

          

          

          

        


        
button, input

        
should not have extra inner padding in Firefox

        

          
          

          

          

          

          

        


        
input

        
should not inherit line-height

        

          
        


        
input[type="checkbox"], input[type="radio"]

        
should have a border-box box model

        

          
          
          
        

        
should not have padding

        

          
          
        


        
input[type="number"]

        
should display a default cursor for the decrement button's click target in Chrome

        

          
        


        
input[type="search"]

        
should be styleable

        

          
        

        
should have a content-box box model

        

          

            
          

        

        
should not have a cancel button in Safari or Chrome

        

          
        


        
fieldset

        
should have consistent border, padding, and margin

        

          

            

          

        


        
legend

        
should inherit color

        

          

            legend
          

        

        
should not have padding

        

          

            legend
          

        


        
textarea

        
should not have a scrollbar unless overflowing

        

          
        


        
table

        
should not have spaces between cells

        

          

            Jimi Hendrix - albums
            
              

                Album
                Year
                Price
              

            
            
              

                Album
                Year
                Price
              

            
            
              

                Are You Experienced
                1967
                $10.00
              

              

                Axis: Bold as Love
                1967
                $12.00
              

              

                Electric Ladyland
                1968
                $10.00
              

              

                Band of Gypsies
                1970
                $12.00
              

            
          

        


      


  







================================================
FILE: server/documents/globals/site.html.eco
================================================
---
layout      : 'default'
css         : 'site'
element     : 'site'
elementType : 'global'
standalone  : true

title       : 'Site'
description : 'A site is a set of global constraints that define the basic parameters of all UI elements'
type        : 'UI Global'
themes      : ['Default', 'GitHub', 'Material']

---







<%- @partial('header') %>




  
Introduction


  
Site is a special global definition which includes baseline parameters which all other elements inherit. In addition to providing global variables defaults, site also provides page styling for content that exists outside of interface elements.


  
Theming


  
Customizing site variables is an important part of using Semantic UI, to learn more about global site variables visit our theming guide.


  
Content


  


    
Headers

    
A site can define styles for headers


    
First Header

    
Second Header

    
Third Header

    
Fourth Header

    
Fifth Header

  


  

    
Page Font

    
A site can specify styles for page content.


    
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel tincidunt eros, nec venenatis ipsum. Nulla hendrerit urna ex, id sagittis mi scelerisque vitae. Vestibulum posuere rutrum interdum. Sed ut ullamcorper odio, non pharetra eros. Aenean sed lacus sed enim ornare vestibulum quis a felis. Sed cursus nunc sit amet mauris sodales tempus. Nullam mattis, dolor non posuere commodo, sapien ligula hendrerit orci, non placerat erat felis vel dui. Cras vulputate ligula ut ex tincidunt tincidunt. Maecenas eget gravida lorem. Nunc nec facilisis risus. Mauris congue elit sit amet elit varius mattis. Praesent convallis placerat magna, a bibendum nibh lacinia non.


    
Fusce mollis sagittis elit ut maximus. Nullam blandit lacus sit amet luctus euismod. Duis luctus leo vel consectetur consequat. Phasellus ex ligula, pellentesque et neque vitae, elementum placerat eros. Proin eleifend odio nec velit lacinia suscipit. Morbi mollis ante nec dapibus gravida. In tincidunt augue eu elit porta, vel condimentum purus posuere. Maecenas tincidunt, erat sed elementum sagittis, tortor erat faucibus tellus, nec molestie mi purus sit amet tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris a tincidunt metus. Fusce congue metus aliquam ex auctor eleifend.

    
Ut imperdiet dignissim feugiat. Phasellus tristique odio eu justo dapibus, nec rutrum ipsum luctus. Ut posuere nec tortor eu ullamcorper. Etiam pellentesque tincidunt tortor, non sagittis nibh pretium sit amet. Sed neque dolor, blandit eu ornare vel, lacinia porttitor nisi. Vestibulum sit amet diam rhoncus, consectetur enim sit amet, interdum mauris. Praesent feugiat finibus quam, porttitor varius est egestas id.


  


  

    
Text Selection

    
A site can specify text selection styles.

    
Highlight the text below with your cursor to see a demonstration


    
Fusce mollis sagittis elit ut maximus. Nullam blandit lacus sit amet luctus euismod. Duis luctus leo vel consectetur consequat. Phasellus ex ligula, pellentesque et neque vitae, elementum placerat eros. Proin eleifend odio nec velit lacinia suscipit. Morbi mollis ante nec dapibus gravida. In tincidunt augue eu elit porta, vel condimentum purus posuere. Maecenas tincidunt, erat sed elementum sagittis, tortor erat faucibus tellus, nec molestie mi purus sit amet tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris a tincidunt metus. Fusce congue metus aliquam ex auctor eleifend.


  

  

    
Spacing

    
A site can define default spacing for headers and paragraphs


    
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel tincidunt eros, nec venenatis ipsum. Nulla hendrerit urna ex, id sagittis mi scelerisque vitae. Vestibulum posuere rutrum interdum. Sed ut ullamcorper odio, non pharetra eros. Aenean sed lacus sed enim ornare vestibulum quis a felis. Sed cursus nunc sit amet mauris sodales tempus. Nullam mattis, dolor non posuere commodo, sapien ligula hendrerit orci, non placerat erat felis vel dui. Cras vulputate ligula ut ex tincidunt tincidunt. Maecenas eget gravida lorem. Nunc nec facilisis risus. Mauris congue elit sit amet elit varius mattis. Praesent convallis placerat magna, a bibendum nibh lacinia non.


    
Fusce mollis sagittis elit ut maximus. Nullam blandit lacus sit amet luctus euismod. Duis luctus leo vel consectetur consequat. Phasellus ex ligula, pellentesque et neque vitae, elementum placerat eros. Proin eleifend odio nec velit lacinia suscipit. Morbi mollis ante nec dapibus gravida. In tincidunt augue eu elit porta, vel condimentum purus posuere. Maecenas tincidunt, erat sed elementum sagittis, tortor erat faucibus tellus, nec molestie mi purus sit amet tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris a tincidunt metus. Fusce congue metus aliquam ex auctor eleifend.


    
Ut imperdiet dignissim feugiat. Phasellus tristique odio eu justo dapibus, nec rutrum ipsum luctus. Ut posuere nec tortor eu ullamcorper. Etiam pellentesque tincidunt tortor, non sagittis nibh pretium sit amet. Sed neque dolor, blandit eu ornare vel, lacinia porttitor nisi. Vestibulum sit amet diam rhoncus, consectetur enim sit amet, interdum mauris. Praesent feugiat finibus quam, porttitor varius est egestas id.

  


  

    
Links

    
A site can define link font formatting.

    
Ut imperdiet dignissim feugiat. Phasellus tristique odio eu justo dapibus, nec rutrum ipsum luctus. Ut posuere nec tortor eu ullamcorper. Etiam pellentesque tincidunt tortor, non sagittis nibh pretium sit amet.

    

      List Link
      List Link
      List Link
    

    

      
        
      
      

        Steve Jobes
        

          Last Seen 2 days ago
        

      

    

    

      

        

          
        

        

          Link Header
          

            
Ut imperdiet dignissim feugiat. Phasellus tristique odio eu justo dapibus, nec rutrum ipsum luctus. Ut posuere nec tortor eu ullamcorper. Etiam pellentesque tincidunt tortor, non sagittis nibh pretium sit amet. Sed neque dolor, blandit eu ornare vel, lacinia porttitor nisi. Vestibulum sit amet diam rhoncus, consectetur enim sit amet, interdum mauris. Praesent feugiat finibus quam, porttitor varius est egestas id.

          

        

      

      

        

          
        

        

          Link Header
          

            
Ut imperdiet dignissim feugiat. Phasellus tristique odio eu justo dapibus, nec rutrum ipsum luctus. Ut posuere nec tortor eu ullamcorper. Etiam pellentesque tincidunt tortor, non sagittis nibh pretium sit amet. Sed neque dolor, blandit eu ornare vel, lacinia porttitor nisi. Vestibulum sit amet diam rhoncus, consectetur enim sit amet, interdum mauris. Praesent feugiat finibus quam, porttitor varius est egestas id.

          

        

      

    

  


  
Variables


  

    
Brand Colors

    
A site can specify a primary and secondary brand color.

    Primary Brand Color
    Secondary Brand Color
  


  

    
Colors

    
A site can define a set of hex values for common named colors

    

      
Red

      
Orange

      
Yellow

      
Olive

      
Green

      
Teal

      
Blue

      
Violet

      
Purple

      
Pink

      
Brown

      
Grey

      
Black

    

  


  

    
Border Styles

    
A site can specify default border styles and radius.


    
Examples of UI that inherit border styles

    
Segment

    
Button

    

      
One

      
Two

    

    

      
        

        Header 1
        Header 2
      

      
        

          Definition
          1A
          1B
        

        

          Definition
          2A
          2B
        

      
    

  


  

    
Size

    
A site can define a root em size, used for providing relative sizes for the rest of a site's content

    

      em and rem are special units used to provide relative measurements for elements. 1em defines what baseline size, medium, is for UI elements. Most elements are sized in rem which are affected by this value, however some UI can also be defined using em which will be based on the surrounding font size of the parent element.

    


    
Examples of Absolutely Sized UI

    

      Button
    

    

      
    


    
Examples of Relative Sized UI

    

      
Larger content container

      

        List Item
        List Item
        List Item
        List Item
        List Item
      

      

        
Message

      

    

  






================================================
FILE: server/documents/hotfix.html
================================================
---
layout     : 'blank'
css        : 'hotfix'
standalone : true

title      : 'Test Page'
type       : 'Library'
---



  

  
  
  
Template

  

    
Item1

    
Item2












================================================
FILE: server/documents/iframe/fixed-menu.html
================================================
---
layout     : 'blank'
standalone : true
---


  

    
  

  Features
  Testimonials
  Sign-in




  

    
  

  Features
  Testimonials
  Sign-in






================================================
FILE: server/documents/iframe/fixed-vertical-menu.html
================================================
---
layout     : 'blank'
standalone : true
---


  

    
  

  Features
  Testimonials
  Sign-in




  

    
  

  Features
  Testimonials
  Sign-in






================================================
FILE: server/documents/index.html.eco
================================================
---
layout     : 'homepage'
css        : 'index'
standalone : false
---


  

    

      

        
      

      
         Menu
      
      

        

          <% if 'development' in @getEnvironments(): %>
          <% else: %>
          
          
          
          <% end %>
        

        
      

    

  





  

    

      
        <%= @getVersion() %>
      
      

        
          Semantic UI
        
        
          User Interface is the language of the web
        
      

      

      
        Get Started
      
      New in 2.4
    

    
  





  

    

      

        
        
Design Beautiful Websites Quickly

        
Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML.

      

    

  

  

    

      

        
Concise HTML

        
Semantic UI treats words and classes as exchangeable concepts.

        
Classes use syntax from natural languages like noun/modifier relationships, word order, and plurality to link concepts intuitively.

        
Get the same benefits as BEM or SMACSS, but without the tedium.

        

      

      

        
        

          
One

          
Two

          
Three

        

      

    

    

    

      

        
Intuitive Javascript

        
Semantic uses simple phrases called behaviors that trigger functionality.

        
Any arbitrary decision in a component is included as a setting that developers can modify.

      

      

        
        
        
      

    

    

    

      

        
Simplified Debugging

        
Performance logging lets you track down bottlenecks without digging through stack traces.

        
Don't have access to development tools right now? Check out this short clip.
        

      

      

        
        

          
          
          
        

      

    

  






  

    

      

        
        Unbelievable Theming
      

      
Semantic comes equipped with an intuitive inheritance system and high level theming variables that let you have complete design freedom.

      
Develop your UI once, then deploy with the same code everywhere.

      
    

    

      

        Select Theme
        
        
      

      

      

        View
      

      

         Add to Cart
      

      

         Save for Later
      

      

        
        Rate
      

      

        
1

        
2

        
3

      

    

  

  

    

      
Variable File

      

      

    

    

      
Override File

      

      

    

  





  

    

      

        

          
          3000+ Theming Variables
        

        
The only dogma from this framework: everything arbitrary is mutable.

        Theming Guide
      

      

        

          
          50+ UI Components
        

        
Build your entire site with one UI stack. Share your UI between multiple projects.

        
Browse UI

      

      

        

          
          5000+ Commits
        

        

          Semantic UI is a free open source project already used in multiple large scale production environments.
        

        Visit GitHub
      

    

  





  

    

      

        
        Unbelievable Breadth
      

      
Definitions aren't limited to just buttons on a page. Semantic's components allow several distinct types of definitions: elements, collections, views, modules and behaviors which cover the gamut of interface design.

      
        See Layout Examples
        
      
    

    

      

        

          

            Menu
          

          

            
              Inbox
              
1

            
            
              Trash
              
1

            
            

              

                
                
              

            

          

          

            
              Tab
            
            
              Tab
            
          

          

            
              Inbox
            
            
              Starred
            
            
              Trash
            
          

          

            
              Inbox
            
            
              Starred
            
            
              Trash
            
          

        

        

          

            Divider
          

          

            

              
A

            

            
or

            

              
B

            

          

        

        

          

            Accordion
          

          

            

              
                
                Size
              
              

                

                  

                    

                      

                        
                        
                      

                    

                    

                      

                        
                        
                      

                    

                    

                      

                        
                        
                      

                    

                    

                      

                        
                        
                      

                    

                  

                

              

            

            

              
                
                Colors
              
              

                

                  

                    

                      

                        
                        
                      

                    

                    

                      

                        
                        
                      

                    

                    

                      

                        
                        
                      

                    

                    

                      

                        
                        
                      

                    

                  

                

              

            

          

        

        

          

            Message
          

          

            
            This site uses cookies
          

          

            

              
Looking for help? 

              
            

          

          

            
We're creating your profile page

            
It will be ready in just a second.

          

        

      

      

        

          

            Card
          

          

            

              

                

                  

                    
Add Friend

                  

                

              

              
            

            

              
Rachel Maddaw

              

                Pundit
              

            

            

              
                Joined in 1998
              
              
                
                22 Friends
              
            

          

        

        

          

            Feed
          

          

            

              

                
              

              

                

                  
                    Mark
                   added you as a friend
                

              

            

            

              

                
              

              

                You added Lena to the group Close Friends
              

            

            

              

                
              

              

                Eve just posted on your page
              

            

          

        

        

          

            Label
          

          

            
            molly@thebears.com
            
          

          
             23 New
          
          Dresses
        

        

          

            Step
          

          

            
              
              

                
Shipping

                
Choose your shipping options

              

            
            
              
              

                
Billing

                
Enter billing information

              

            
            
              
              

                
Confirm Order

                
Verify order details

              

            
          

        

      

      

        

          

            Dropdown
          

          

            
            
            
Select Country

            

              
Andorra

              
United Arab Emirates

              
Afghanistan

              
Antigua

              
Anguilla

              
Albania

              
Armenia

              
Netherlands Antilles

              
Angola

              
Argentina

              
American Samoa

              
Austria

              
Australia

              
Aruba

              
Aland Islands

              
Azerbaijan

              
Bosnia

              
Barbados

              
Bangladesh

              
Belgium

              
Burkina Faso

              
Bulgaria

              
Bahrain

              
Burundi

              
Benin

              
Bermuda

              
Brunei

              
Bolivia

              
Brazil

              
Bahamas

              
Bhutan

              
Bouvet Island

              
Botswana

              
Belarus

              
Belize

              
Canada

              
Cocos Islands

              
Congo

              
Central African Republic

              
Congo Brazzaville

              
Switzerland

              
Cote Divoire

              
Cook Islands

              
Chile

              
Cameroon

              
China

              
Colombia

              
Costa Rica

              
Serbia

              
Cuba

              
Cape Verde

              
Christmas Island

              
Cyprus

              
Czech Republic

              
Germany

              
Djibouti

              
Denmark

              
Dominica

              
Dominican Republic

              
Algeria

              
Ecuador

              
Estonia

              
Egypt

              
Western Sahara

              
Eritrea

              
Spain

              
Ethiopia

              
European Union

              
Finland

              
Fiji

              
Falkland Islands

              
Micronesia

              
Faroe Islands

              
France

              
Gabon

              
England

              
Grenada

              
Georgia

              
French Guiana

              
Ghana

              
Gibraltar

              
Greenland

              
Gambia

              
Guinea

              
Guadeloupe

              
Equatorial Guinea

              
Greece

              
Sandwich Islands

              
Guatemala

              
Guam

              
Guinea-Bissau

              
Guyana

              
Hong Kong

              
Heard Island

              
Honduras

              
Croatia

              
Haiti

              
Hungary

              
Indonesia

              
Ireland

              
Israel

              
India

              
Indian Ocean Territory

              
Iraq

              
Iran

              
Iceland

              
Italy

              
Jamaica

              
Jordan

              
Japan

              
Kenya

              
Kyrgyzstan

              
Cambodia

              
Kiribati

              
Comoros

              
Saint Kitts and Nevis

              
North Korea

              
South Korea

              
Kuwait

              
Cayman Islands

              
Kazakhstan

              
Laos

              
Lebanon

              
Saint Lucia

              
Liechtenstein

              
Sri Lanka

              
Liberia

              
Lesotho

              
Lithuania

              
Luxembourg

              
Latvia

              
Libya

              
Morocco

              
Monaco

              
Moldova

              
Montenegro

              
Madagascar

              
Marshall Islands

              
MacEdonia

              
Mali

              
Burma

              
Mongolia

              
MacAu

              
Northern Mariana Islands

              
Martinique

              
Mauritania

              
Montserrat

              
Malta

              
Mauritius

              
Maldives

              
Malawi

              
Mexico

              
Malaysia

              
Mozambique

              
Namibia

              
New Caledonia

              
Niger

              
Norfolk Island

              
Nigeria

              
Nicaragua

              
Netherlands

              
Norway

              
Nepal

              
Nauru

              
Niue

              
New Zealand

              
Oman

              
Panama

              
Peru

              
French Polynesia

              
New Guinea

              
Philippines

              
Pakistan

              
Poland

              
Saint Pierre

              
Pitcairn Islands

              
Puerto Rico

              
Palestine

              
Portugal

              
Palau

              
Paraguay

              
Qatar

              
Reunion

              
Romania

              
Serbia

              
Russia

              
Rwanda

              
Saudi Arabia

              
Solomon Islands

              
Seychelles

              
Sudan

              
Sweden

              
Singapore

              
Saint Helena

              
Slovenia

              
Svalbard, I Flag Jan Mayen

              
Slovakia

              
Sierra Leone

              
San Marino

              
Senegal

              
Somalia

              
Suriname

              
Sao Tome

              
El Salvador

              
Syria

              
Swaziland

              
Caicos Islands

              
Chad

              
French Territories

              
Togo

              
Thailand

              
Tajikistan

              
Tokelau

              
Timorleste

              
Turkmenistan

              
Tunisia

              
Tonga

              
Turkey

              
Trinidad

              
Tuvalu

              
Taiwan

              
Tanzania

              
Ukraine

              
Uganda

              
Us Minor Islands

              
United States

              
Uruguay

              
Uzbekistan

              
Vatican City

              
Saint Vincent

              
Venezuela

              
British Virgin Islands

              
Us Virgin Islands

              
Vietnam

              
Vanuatu

              
Wallis and Futuna

              
Samoa

              
Yemen

              
Mayotte

              
South Africa

              
Zambia

              
Zimbabwe

            

          


          

          

            
            Filter Posts
            

              

                
                
              

              

                
                Tag Label
              

              

                

                  

                  Important
                

                

                  

                  Announcement
                

                

                  

                  Cannot Fix
                

                

                  

                  News
                

                

                  

                  Enhancement
                

                

                  

                  Change Declined
                

                

                  

                  Off Topic
                

                

                  

                  Interesting
                

                

                  

                  Discussion
                

              

            

          

      

        

          

            Segment
          

          

          

          

          


          

          

          

        

        

          

            Input
          

          

            
            
            
Search

          

          
          

            

              http://
            

            
            
          


          
          

            
            
              Add Tags
            
          

        

        

          

            Checkbox
          

          

            
            
          


          
          

            
            
          


          
          

            
            
          

        

      

    

  





  

    

      

        

          
          Responsively Designed
        

        
Semantic is designed completely with em making responsive sizing a breeze. Design variations built into elements allow you to make the choice how content adjusts for tablet and mobile.

        Responsive Examples
      

      

        

          
          Partners with Libraries You Love
        

        
Semantic has integrations with React, Angular, Meteor, Ember and many other frameworks to help organize your UI layer alongside your application logic.

        See Integrations
      

    

  





  

    

      

        
        Liberate your Development
      

      

        

          
Enterprise Ready

          
Build tools, performance logging, support for custom definitions, multiple-levels of theme inheritance—a developer's dream.

          
            
            Get Started Now
          
        

      

    

  





================================================
FILE: server/documents/introduction/advanced-usage.html.eco
================================================
---
layout      : 'default'
css         : 'started'
standalone  : true
order       : 4

title       : 'Recipes'
description : 'Additional integration paths for advanced users'
type        : 'Introduction'
---
<%- @partial('header') %>





  
Custom Pipelines

  

    
Importing Gulp Tasks

    
You don't have to use our gulp pipeline, just import the task into your own gulpfile

    
You can fork this example project to see an example of how to import Semantic UI tasks into your project.

    

    var
      gulp  = require('gulp'),
      watch = require('./semantic/tasks/watch'),
      build = require('./semantic/tasks/build')
    ;
    // import task with a custom task name
    gulp.task('watch ui', watch);
    gulp.task('build ui', build);
    

  


  
Semantic.json Settings


  

    
Auto-Install

    
Running npm install normally will launch an interactive installer, to allow this installer to run without user interaction include a special flag autoInstall: truein your semantic.json file.

    

     {
      // install will now automatically build your project files without user interaction
      "autoInstall": true,

      // these settings may be different
      "base": "",
      "paths": {
        "source": {
          "config": "src/theme.config",
          "definitions": "src/definitions/",
          "site": "src/site/",
          "themes": "src/themes/"
        },
        "output": {
          "packaged": "dist/",
          "uncompressed": "dist/components/",
          "compressed": "dist/components/",
          "themes": "dist/themes/"
        },
        "clean": "dist/"
      },
      "permission": false,
      "rtl": false,
    }
    

  


    

      
Right-to-left (RTL) Languages

      
Including the flag rtl:true will build Semantic UI using RTLCSS.

      
To build both LTR and RTL versions use the flag rtl: 'both'

      

       {
        // builds both LTR and RTL version
        "rtl": "both",

        // these settings may be different
        "base": "",
        "paths": {
          "source": {
            "config": "src/theme.config",
            "definitions": "src/definitions/",
            "site": "src/site/",
            "themes": "src/themes/"
          },
          "output": {
            "packaged": "dist/",
            "uncompressed": "dist/components/",
            "compressed": "dist/components/",
            "themes": "dist/themes/"
          },
          "clean": "dist/"
        },
        "permission": false,
      }
      

  


  
Prototyping with Semantic UI

  

    
Sketch Files

    
If you are looking to prototype layouts using Sketch with Semantic UI check out Semantic UI Sketch Files

    
  


  
Single Components


  

    
CDN Releases

    
Individual components are available on jsDelivr

    

    
    

    

    
    

    View All CDN Files
  


  

    
Tagged Releases

    
Component repos are released on NPM and as tagged releases on GitHub.

    
Check the list of repos available under Semantic Org on GitHub

    
Each component's release notes will automatically update with the relevant notes for that component from the main release.

    

     npm install semantic-ui-component
    

  


  

    
Server-Side Rendering

    
Individual components repos include an auto-generated index.js file to simplify require use with NodeJS, for server-side rendering or with Browserify.

    

     npm install semantic-ui-dropdown
    

    

      var
        dropdown = require('semantic-ui-dropdown')
      ;
      foo.dropdown();
    

  


  
Importing LESS


  

    
LESS Only Distribution

    
A special distribution Semantic-UI-LESS is available for projects that use custom integrations and do not require our build tools.

    
LESS source files are not prefixed, and will need to be run through autoprefixer before being used

  


  

    
Importing Semantic

    
semantic.less is available in all releases as an entry point for importing multiple components from other LESS files.

    

      /* Import all components */
      @import 'src/semantic';
    

  


  

    
Importing Components

    
If you need to import individual components, you should scope each import to avoid inheritance issues.

    

      /* Import specific components with scope */
      & { @import 'src/definitions/elements/button'; }
      & { @import 'src/definitions/elements/list'; }
    

  


  
Running Docs Locally


  

    
Download Docs Server

    
The easiest way to get Semantic UI docs is to clone the repo

    

      git clone https://github.com/Semantic-Org/Semantic-UI-Docs.git
    

  

  

    
Install Dependencies

    
Semantic UI's documentation is written in Docpad an amazing static site generator built in NodeJS

    

      cd docs/
      npm install
    

  


  

    
A Note About Paths

    
Semantic UI's build tools include two special commands build-docs and serve-docs for use with the documentation. These will pass changes from the ui/ folder directly to a live docs server.

    
These gulp tasks expect two sibling folders

    

      

        
        

          
ui/

          
Files from semantic ui repo

        

      

      

        
        

          
docs/

          
Files from docs repo

        

      

    

  

  

    
Build UI

    
The first time you run docs you will need to build the whole project once

    

      cd ui/
      gulp build-docs
    

  

  

    
Run Docpad Server

    
Docpad

    

      cd docs/
      # initial build may take several minutes
      docpad run
    

  

  

    
Serve UI to Docs

    
You can then continue to make modifications to UI and "serve" these files to a live docs instance to see your changes immediately

    

      cd ui/
      gulp serve-docs
    

  

  

    
Hosted Docs

    
If you are managing your documentation you can automatically deploy to GitHub Pages using a built in docpad gh-pages plugin

    
For more information about GitHub Pages, check out the docs on GitHub

    

      docpad deploy-ghpages --env static
    

  

  

    
Custom Docs Paths

    
Doc task paths are specified in a file tasks/config/docs.js and can be adjusted to use any folder set-up necessary for your project.

  






================================================
FILE: server/documents/introduction/build-tools.html.eco
================================================
---
layout      : 'default'
css         : 'started'
standalone  : true
order       : 3

title       : 'Build Tools'
description : 'Using Gulp with Semantic UI'
type        : 'Introduction'
---
<%- @partial('header') %>




  
Overview


  

    
30 Second Explanation

    
Download Semantic UI navigate to the install folder then run a gulp command.


    
To build all files:

    

      gulp build
    


    
To watch for changes

    

      gulp watch
    

  

  

    
Why Build Tools?

    
Semantic UI uses Gulp for several reasons:

    

      
Process LESS files with theming variables

      
Add vendor prefixes for supported browsers with autoprefixer

      
Watch file changes and rebuild the necessary files when adjusting themes

      
Automatically process asset paths, so that minified and concatenated releases can exist in different directories

      
Allow custom builds with only the required components for your site

      
Allow advanced usage like Right-To-Left (RTL) languages using RTLCSS

    

  

  

    
Folder Structure

    
A Semantic UI project includes the following folder structure.

    

      

        
        

          
src

          

            

              
              

                site
                
Your site's theme

              

            

            

              
              

                
themes

                

                  

                    
                    

                      default
                      
Default theme

                    

                  

                  

                    
                    

                      packaged-theme
                      
Additional themes

                    

                  

                

              

            

            

              
              

                theme.config
                
Config file for setting packaged themes

              

            

          

        

      

      

        
        

          
dist

          
Compiled CSS and JS files

          

            

              
              

                
components

                
Individual component CSS and JS

              

            

            

              
              

                
semantic.css

                
concatenated release

              

            

            

              
              

                
semantic.js

                
concatenated release

              

            

          

        

      

      

        
        

          semantic.json
          
Contains build settings for gulp

        

      

    

  

  

    
Gulp Commands

    
Below is a list of all available gulp commands

    

      
        
Command
        Description
      

      
        

          install
          Asks install questions to setup semantic.json
        

        

          watch (default)
          Watches for changes in source files, and builds file on change
        

        

          build
          Build all files
        

        

          clean
          Cleans dist/ folder
        

        

          version
          Outputs current version
        

        

          build-javascript
          Build JS files
        

        

          build-css
          Build CSS files
        

        

          build-assets
          Build assets files
        

        

          serve-docs
          Serves files to local docs instance
        

        

          build-docs
          Builds files to docs folder
        

      
    

  



  
Configuration Files


  

    
semantic.json

    
Build tool settings are stored in a special file called semantic.json It can be included in any folder that is in a parent folder of the semantic install folder.

    
If you used the npm or meteor, a semantic.json file is automatically generated for you in the root of your project. If you used a different package manager you can run gulp install to run the interactive installer.

    

    {
      // base path added to all other paths specified in "paths"
      "base": "",

      // current version of Semantic UI
      "version": "<%= @getVersion() %>",

      "paths": {

        "source": {

          // source theme.config
          "config"      : "src/theme.config",

          // source definition folder
          "definitions" : "src/definitions/",

          // source site theme
          "site"        : "src/site/",

          // source themes folder
          "themes"      : "src/themes/"
        },

        "output": {
          // packaged source (both compressed/uncompressed)
          "packaged"     : "dist/",

          // uncompressed source
          "uncompressed" : "dist/components/",

          // compressed source
          "compressed"   : "dist/components/",

          // output directory for theme assets
          "themes"       : "dist/themes/"
        },

        // directory for gulp clean task
        "clean"        : "dist/"
      },

      // when set to an integer permission, will set dist files with this file permission
      "permission" : false,

      // whether gulp watch/build should run RTLCSS
      "rtl": false,

      // will only include components with these names
      "components": [
        "reset",
        "site",
        "button",
        "container",
        "divider",
        "flag",
        "header",
        "icon",
        "image",
        "input",
        "label",
        "list",
        "loader",
        "rail",
        "reveal",
        "segment",
        "step",
        "breadcrumb",
        "form",
        "grid",
        "menu",
        "message",
        "table",
        "ad",
        "card",
        "comment",
        "feed",
        "item",
        "statistic",
        "accordion",
        "checkbox",
        "dimmer",
        "dropdown",
        "embed",
        "modal",
        "nag",
        "popup",
        "progress",
        "rating",
        "search",
        "shape",
        "sidebar",
        "sticky",
        "tab",
        "transition",
        "api",        
        "state",
        "visibility"
      ],
      // whether to include special project maintainer tasks
      "admin": false
    }

    

  


  

    
theme.config

    
LESS uses a special configuration file theme.config which lets you specify what theme each component should use. If you have not generated this file yet, you will receive an error message when running build tools

    
You can learn more about theme.config by checking out the theming guide

  


  

    
Importing Gulp Tasks

    
See our recipes section for examples on how to import individual gulp tasks into your custom Gulpfile.

  

  

    

      Auto-Install & Continuous Integration
      
New in 2.2

    

    
We've added a new setting to semantic.json in 2.2 to help make working with a CLI, or other automated deployments more streamlined.

    
Specifying autoInstall: true in an environments semantic.json configuration will prevent any user prompting when running npm install allowing for automated deployment.

  






================================================
FILE: server/documents/introduction/getting-started.html.eco
================================================
---
layout      : 'default'
css         : 'started'
standalone  : true
order       : 1

title       : 'Getting Started'
description : 'Getting up and running with Semantic UI'
type        : 'Main'
---


<%- @partial('header') %>




  
Preface


  


    
Using Build Tools


    
Semantic UI packaged Gulp build tools so your project can preserve its own theme changes.

    
The easiest way to install Semantic UI is our NPM package which contains special install scripts to make setup interactive and updates seamless.


    
For installing with specific integrations like Ember, React, or Meteor, see our integration guide

    
For integrating Semantic UI tasks into your own build tools, or using a CDN see our recipes section.


  

  

    
Simpler Setup

    
If you are using Semantic UI as a dependency and just want to use our default theme, use our lighter semantic-ui-css or semantic-ui-less repo. If you just need the files you can download them as a zip from GitHub.

    Download Zip
    View all Semantic-Org Repos 
  


  
Installing



  

    
Install NodeJS

    
If you are unfamiliar with setting up NodeJS you can follow the steps below, or check out the download page on nodejs.org


    

      Mac
      Linux
      Windows
    

    

      
Option 1: Homebrew

      
After installing homebrew

      

        brew install node
      

      
Option 2: Git

      

      git clone git://github.com/nodejs/node.git
      cd node
      ./configure
      make
      sudo make install
      

    

    

      
Install via PPA

      
Although Chris Lea's PPA was once the best way to install node, it is now somewhat out of date.

      
The recommended path to install Semantic UI is using Joyent's package manager guide.

      
Ubuntu

      

        curl --silent --location https://deb.nodesource.com/setup_6.x | sudo bash -
        sudo apt-get install --yes nodejs
      

      
Debian

      

        apt-get install curl
        curl --silent --location https://deb.nodesource.com/setup_6.x | bash -
        apt-get install --yes nodejs
      

      
Red Hat

      

      curl --silent --location https://rpm.nodesource.com/setup | bash -
      yum -y install nodejs
      

    

    

      
Install the exe

      
Download the NodeJS executable.

    

  


  

    
Install Gulp

    
Semantic UI uses Gulp to provide command line tools for building themed versions of the library with just the components you need.

    
Gulp is an NPM module and must be installed globally

    

    npm install -g gulp
    

  


  

    
Install Semantic UI

    
Semantic UI is available in an eponymous package on NPM

    

      
        Video
      
      
        Code
      
    

    

      
    

    

      

        npm install semantic-ui --save
        cd semantic/
        gulp build
      

    

  


  

    
Include in Your HTML

    
Running the gulp build tools will compile CSS and Javascript for use in your project. Just link to these files in your HTML along with the latest jQuery.

    

      <link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
      <script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
      <script src="semantic/dist/semantic.min.js"></script>
    

  

  
Updating


  

    
Updating via NPM

    
Semantic's NPM install script will automatically update Semantic UI to the latest version while preserving your site and packaged themes.

    

      npm update
    

  


  
Next Steps


  

    
All Set!

    
Well done! Semantic UI is now ready to be used.


    

      

        

          
          See how to use gulp commands and build tools
        

      

      

        

          
          Learn about changing themes
        

      

      

        

          
          See recipes for using Semantic UI in your project
        

      

    

  






================================================
FILE: server/documents/introduction/glossary.html.eco
================================================
---
layout      : 'default'
css         : 'started'
standalone  : true
order       : 5

title       : 'Glossary'
description : 'Jargon specific to Semantic UI'
type        : 'Introduction'
---
<%- @partial('header') %>





Terminology




  
Types of Components

  
Semantic UI classifies components into different definition types depending on its qualities. Each of these five types uses a unique definition format.

  

    
      

        Globals
        
          Globals are styles that are applied across a site. These include things like CSS resets, and sitewide font, link and sizing defaults.

          
Most importantly, globals include site-wide theming variables that other components can inherit and modify.

      

      
      

        Element
        
          UI elements are page elements with a single function. They can exist alone or in a plural form with elements sharing qualities.

          
For example, a group of buttons may use ui red buttons as a grouping with individual ui button children.

      

      

        Collection
        
          
Collections are heterogeneous groups of components which are usually found together. They describe a list of "usual suspects" which appear in a certain context. They may include and extend other ui elements for use in certain contexts—for example form may extend dropdown or input—as well as include their own content.

        		
      

      

        Views
        
          
A view is a convention for presenting specific types of content that is usually consistent across a website. These include things like comments, activity feeds, or cards.

        		
      

      

        Modules
        
          
Modules are components that include both a definition of how they appear and how they behave. These include components like, accordions, dropdowns, and popups.

        		
      

      

        Behaviors
        
          
Behaviors are standalone Javascript components that describe how page elements should act, but not how they should appear. Behaviors include things like form validation, state management, and API request routing.

        		
      

    
  






  
Project Terminology

  
Semantic UI classifies components into separate definition groupings.


  

    
      

        Component
        
          A component is a general term used to refer to any user interface element packaged for distribution.
        
      

      

        Definition
        
          
A definition is a set of CSS and Javascript which describe a component's essential qualities.

          
Definition use variables to express arbitrary parts of a component's appearance so that they can be changed with themes.

        		
      

      

        ui
        
          
ui is a special class name used to distinguish parts of components from components.

          
For example, a list will receive the class ui list because it has a corresponding definition, however a list item, will receive just the class item.

          
The ui class name helps encapsulate CSS rules by making sure all 'parts of a component' are defined in context to a 'whole' component.

          
It also helps make scanning unknown code simpler. If you see ui you know you are looking at a component.

        		
      

    
  






  
Definition Terminology

  
When browsing Semantic UI definitions, you will see content grouped into different sections. These parts of a definition are consistent across definitions, and are common patterns for describing components.


  

    
      

        Component
        
          A component is a general term used to refer to any user interface element packaged for distribution.
        
      

      

        Definition
        
          
A definition is a set of CSS and Javascript which describe a component's essential qualities.

          
Definition use variables to express arbitrary parts of a component's appearance so that they can be changed with themes.

        		
      

      

        Types
        
          
Types are versions of an element that modify the element's standard appearance.

          
Types cannot be used simultaneously on the same element. For example, "cats" and "dogs" are types of animals, but are mutually exclusive.

        		
      

      

        Variations
        
          
Variations modify qualities of an element like size, or color.

          
Variations are mutually inclusive, and can be used together to modify an element.

        		
      

      

        Content
        
          
Content are parts which only have meaning in the context of a component. Content use names which describe the type of expected content like header, description, menu, or item.

          
Content inside a collection or view often includes stubbed versions of other components. For example cards let you use image content, which can be extended by using ui image variations.
        

      

      

        States
        
          
States are modifications to an element that help indicate a change in affordances. Common states include loading, disabled, and active.

        		
      

      

        Behaviors
        
          
Behaviors are actions that a component can perform. Behaviors are represented by simple phrases like "set value" or "increment", that can be invoked in Javascript. Behaviors are automatically converted from spaced lowercase phrases to internal Javascript methods at invocation.

        		
      

    
  






  
General Terms


  
These terms are general programming terms that may be used without explanation in other documentation pages.


  

    

      Namespace
      A name given to an element for the explicit purpose of containing the application of properties.

      
In Semantic UI, components are given the class name ui to help distinguish them from parts of elements in code, and to provide a namespace for definitions which can limit the scope of CSS rules.

    

    

      Gulp
      Gulp is a tool for automating command line tasks Gulpjs.com
    

    

      NPM
      NPM is a package manager used for downloading Node JS packages.
    

    

      Node JS
      Node is a event driven programming language frequently used to run command line tools for front end development. nodejs.org
    

  









================================================
FILE: server/documents/introduction/integrations.html.eco
================================================
---
layout      : 'default'
css         : 'started'
standalone  : true
order       : 2

title       : 'Integrations'
description : 'Using Semantic UI with Other Libraries'
type        : 'Introduction'
---
<%- @partial('header') %>




  

    React
  


  

    
Contribute to React Development

    
Semantic UI React bindings are still in development, but are available for most components.

    Visit React Repo
  


  

    Meteor
  


  

    
Install via Atmosphere

    
Install the Semantic UI package from atmosphere.

    

      meteor add semantic:ui
    

    
The next step will differ depending on what version of Meteor you are running. Continue to the section relevant to your version of Meteor.

    
(Meteor <1.3) Install less-autoprefixer package

    
You will need a special package less-autoprefixer, to add vendor prefixes to your LESS pipeline.

    

      Since flemay:less-autoprefixer compiles LESS files you don't need any other less package.
    

    

      meteor add flemay:less-autoprefixer
    

    
Continue to the "Create a custom.semantic.json file" section

    
(Meteor 1.3+) Install less and postcss packages

    
Remove the standard-minifier-css package.

    

      meteor remove standard-minifier-css
    

    
Install the less and postcss packages.

    

      meteor add less juliancwirko:postcss
    

    
To configure the postcss package, add the following to your package.json file and save it.

    

      {
        "devDependencies": {
          "autoprefixer": "^6.3.1"
        },
        "postcss": {
          "plugins": {
            "autoprefixer": {"browsers": ["last 2 versions"]}
          }
        }
      }
    

    
To finish setting up the postcss package, install the new autoprefixer NPM package.

    

      meteor npm install
    

  

  

    
Create a custom.semantic.json file

    
With meteor stopped:
    

      touch client/lib/semantic-ui/custom.semantic.json
    

    
custom.semantic.json is a special file used to determine which themes and components to include in your project's build.

    
To remove a component from the pipeline, simply set the boolean value to false

    

      {
      "definitions": {
        "accordion" : true,
        "ad"        : true,
        "api"       : true,
        /* etc */
      },
      "themes": {
        "amazon"     : false,
        "basic"      : false,
        "bookish"    : false,
        "bootstrap3" : false,
        "chubby"     : false,
        "classic"    : false,
        "default"    : true,
        /* etc */
      }
    

  

  

    
Start Meteor / Generate


    
Every time Meteor starts or refreshes it calls the package semantic:ui to generate Semantic UI.


    
The package has a uses the diff between custom.semantic.json and .custom.semantic.json to avoid regenerating files unnecessarily.


    
If the file .custom.semantic.json does not exist or it is different than custom.semantic.json then it will generate Semantic UI.

  

  

    
Customize Site Variables

    
Semantic UI meteor includes a site theme, site/ which can be used to customize less variables for your site. These files are optional, and can safely be removed if customization is not necessary.

    
Visit our theming guide to learn more about theming.

  

  

    
Issues & Debugging

    
For help with Semantic UI Meteor, and for the latest updates, please visit the repository home on GitHub

     Visit Meteor Repo
  


  

    Ember
  



  

    
Installing via CLI

    
Include the library as an NPM dependency, from within an ember-cli app.


    
If you are using Ember CLI 1.13-2.X
    

      ember install semantic-ui-ember
    

    
If you are using an older version < 0.1.5
    

    npm install --save-dev Semantic-Org/Semantic-UI-Ember
    

  


  

    
Run the Library's Blueprint

    

      ember generate semantic-ui-ember
    

  

  

    
Get Coding

    
For example of individual components check out the GitHub repository

     Visit Ember Repo
  


  

    Angular
  


  

    
Contribute to Angular Development

    
Semantic UI angular bindings are still in development, but are available for some components

    Visit Angular Repo
  





================================================
FILE: server/documents/introduction/new.html.eco
================================================
---
layout      : 'default'
css         : 'new'
standalone  : true
order       : 1

title       : 'New in 2.4'
description : 'An introduction to new features found in the latest release'
type        : 'Main'
---

<%- @partial('header',  { tabs: { twoFour: 'New in 2.4', twothree: '2.3', twotwo: '2.2', twoone: '2.1', two: '2.0' } }) %>





  

    

      Solving Empty State
    

    
Semantic 2.4 brings a new components for handling content loading ui placeholder, as well as a new type of segment used to reserve space for content: ui placeholder segment.


    
Additionally several important component updates are included in this release.
    

      
Modals have been re-architected to use hybrid flex support, falling back to JS positioning for more complex use-cases (or older browsers). 

      
Dropdowns now include a clearable setting for letting users reset dropdowns to its empty state.

    



    
If you are upgrading from a previous SUI version, be sure to add @placeholder to your theme.config to include the placeholder component in your code.


    

      New UI Component
    

    

      

        Placeholders
      

      
Placeholders can be used to reduce the jarringness, and perceived load time when loading new content

      <%- @partial('examples/content-loader') %>
    

    

      

        

          
          

            Semantic-Org/Semantic-UI-Docs
            
Updated 22 mins ago

          

        

        

          
          

            

              

                

                

              

            

          

        

        

          
          

            

              

                

                

              

            

          

        

        

          
          

            

              

                

                

              

            

          

        

        

          
          

            

              

                

                

              

            

          

        

      

    

    

      

        Placeholder Segment
      

      
Placeholder segments allow you to reserve space in your design for where content is intended to appear. This is useful when a page should prompt a user about its intended functionality, even when no content is present.

      

        

          
          No users have been added yet
        

        
Add User

      

    

    

      

        

          
Or

          

            

              

                
                Find Country
              

              

                

                  

                    
                    
                  

                  

                

              

            

            

              

                
                Add New Country
              

              

                Create
              

            

          

        

      

    

    

      New Features
    

    

      

        Clearable Dropdowns
      

      
Now dropdowns can specify that their content can be cleared with clearable: true.


      

        
        

          South Korea
        

        
        <%- @partial('examples/single/flag-menu') %>
      

      

      

        Show me
        

          
          
css

          
          

            <%- @partial('examples/single/preset-menu') %>
          

        

        classes currently available.
      

    

    

      

        Improved Flexbox Modals
      

      
Although flex-box were introduced in 2.3.0 there were limitations which may have prevented some advanced use-cases. For example, flexbox modals did not support modals that used detachable: false and werent directly inside dimmer flex containers. Also some flex browsers (IE11) do not support absolutely positioned elements inside flex containers, so multiple overlapping modals could not be used in those cases.

      

        2.4.0 solves this by introducing a hybrid flex system, that will fall back to javascript positioning for browsers or layouts that aren't compatible with flex.
      

    

  


  

    
A New Approach


    
After an extended period of patches, Semantic UI 2.3 marks the return to significant feature changes for the project.

    
In upcoming Semantic releases we will be releasing more frequently, but with smaller changesets, to make it easier for users to upgrade and adjust to global changes.


    
New Features

    


      
Font Awesome 5.0 & Better Icon Searching

      
In 2.3 icons now include a full port of Font Awesome 5.0.6, including 929 icons.

      
Icon categories now match icon categories in Font Awesome's documentation, making it easier to find icons between docs.

      

        
Smile

        
Smile Outline

        
Hand Rock 

        
Hand Paper 

        
Hand Scissors

      

      
Semantic UI icon docs now includes a global icon search with easy copy and paste access to html

    



    

      
Flexbox Modals and Dimmers


      
Semantic UI 2.3 includes a rewrite of modal to include non-js flexbox positioning for vertical centering. No longer will you have to call $('.ui.modal').modal('refresh') if content height changes to recenter.


      
In addition there's a new setting centered: false which makes it easier to do top aligned modals when the internal may be dynamic and you dont want content to shift vertically.



      

        

          Top Aligned Modal
        

        

          
          
        

        

          

            Cancel
          

          

            Submit
            
          

        

      

      
        Open Top Aligned Modal
      
      

        $('.ui.special.modal')
          .modal({
            centered: false
          })
          .modal('attach events', '.modal.example .button')
        ;
      

    


    

      
New Transitions

      

        Transition now includes zoom and glow. Glow is useful for highlighting elements on page,
      

      

        $('.autumn.leaf')
          .transition('zoom')
        ;
      

      

        $('.autumn.leaf')
          .transition('glow')
        ;
      

      
    


    

      
Global Font Weight Variables

      
Theming now uses two no global variables @bold and @normal making it easier to modify font weights in a more complex font stack

      

        /* Use some custom font weights */
        @bold: 600;
        @normal: 400;
      


    

    

      
Local Category Search

      
You can now use category search with the source option without having to add API callbacks

      

        

          
          
        

        

      

      

        var categoryContent = [
          { category: 'South America', title: 'Brazil' },
          { category: 'South America', title: 'Peru' },
          { category: 'North America', title: 'Canada' },
          { category: 'Asia', title: 'South Korea' },
          { category: 'Asia', title: 'Japan' },
          { category: 'Asia', title: 'China' },
          { category: 'Europe', title: 'Denmark' },
          { category: 'Europe', title: 'England' },
          { category: 'Europe', title: 'France' },
          { category: 'Europe', title: 'Germany' },
          { category: 'Africa', title: 'Ethiopia' },
          { category: 'Africa', title: 'Nigeria' },
          { category: 'Africa', title: 'Zimbabwe' },
        ];
        $('.local-category.example .ui.search')
          .search({
            type: 'category',
            source: categoryContent,
            searchFields: [
              'title',
              'category'
            ]
          })
        ;
      

    

    

      
Arrow Aligment on Small Popups

      
Semantic popups now detects when horizontally aligning the popup on it's arrow is more reasonable than matching edges with a popup.

      

        To use this feature be sure to specify movePopup: false in your settings
      

      

      

      
      

        $('.centering.example .avatar.image').popup();
      

    

    

      
Popups Support Multiple Coordinate Systems

      
Popups now can correctly place elements with two different coordinate systems. These are typically caused by having a parent element with css properties transform or position.

      

        
Button is in here

        
Button

      

      

        
Popup is in here

        

          

            Test
          

          
This popup now appears correct without having to move the popup to the same coordinate system by moving the DOM element.

        

      

      

        

          
Button is in here

          
Button

        

        

          
Popup is in here

          

            

              Test
            

            
This popup now appears correct without having to move the popup to the same coordinate system by moving the DOM element.

          

        

      

      

        /* Activating element is inside #one with different positioning context */
        #one {
          display: block;
          position: relative;
          padding: 50px 100px;
          background-color: #F0F0F0;
        }
        /* Popup is inside two with position relative (creating another positioning context) */
        #two {
          display: block;
          background-color: #E2EAE4;
          position: relative;
          top: 10px;
          padding: 50px 8px;
        }
      

      

        $('.complex-popup.example .ui.button')
          .popup({
            movePopup: false,
            popup: $('.complex-popup.example .popup')
          })
        ;
      

    


    

      
New Matching Options

      
In addition, search now includes three tiers of matched results, similar to the options available in dropdown. Fuzzy results now are turned off by the new default fullTextSearch: 'exact' 

      

        
Query matches the start of field exactly

        

          Query matches any part of field 
New

        

        
Query "fuzzy" matches field

      

      

        $('.ui.search')
          .search({
            fullTextSearch: 'exact' // only matches exact matches (no fuzzy matching)
          })
        ;
      

    


  


  

    
By The Numbers

    
2.2 represents nearly a half year of updates, many new features, and bug patches.

    

      
124 closed issues

      
40 new features

      
70 bug fixes

    


    
For the complete list of bugs, their accompanying issue threads and the fixes please consult the release notes

    Release Notes

    
Project Changes


    

      
Critical Bug Fixes


      
2.2 brings many new bug fixes. For a complete list please check out our release notes. Here is a highlight of some critical bugs


      

        

          
          View Critical Bug List
        

        

          

            

              All UI - Using component('setting, {}) to add multiple settings as an object literal, for example error: {}, will now deep extend the existing object instead of replacing it.
            

            

              API - beforeSend would not correctly cancel request when return false; is used in callback.
            

            

              API - cache: 'local' would not return the localstorage cached results in some cases
            

            

              Divider - Descenders like "g" are cut off in horizontal divider
            

            

              Dropdown - forceSelection will now automatically select values with multi dropdowns. When using userAdditions setting it will now automatically tokenize the current entered value
            

            

              Dropdown - search selection would not let you move back in an entered search string with left arrow
            

            

              Dropdown - Fixed issue where value set using javascript DOM metadata would be cleared when a message or user addition triggered refresh
            

            

              Form Validation / Dropdown - Using "enter" key in a search dropdown could cause a form to be submitted
            

            

              Form Validation - Fix issue with some foreign email addresses with extended charsets causing email validation to fail
            

            

              Form Validation - Revalidating a field on: blur could cause fields not yet interacted with to be validated
            

            

              Form - Fixed issue with (x) fields and equal width fields where middle rows would be slightly smaller because they include both left and right padding in % width. (Edges only have one side padding). Field groups now use negative margins instead.
            

            

              Popup - Fixed issue where clicking element inside popup removed from DOM (like clicking a multi select label) would cause popup to close
            

            

              Rail - Fixed incorrect width for close rail and very close rail caused by variable addition with mixed units px + em
            

            

              Search - Fixed bug where a previously XHR query could cause the next one to fail depending on the latency of the request.
            

            

              Search - Fixed an issue where onResult returning false would not prevent the search menu from hiding. Clicking on an empty results message will also no longer close the search results.
            

            

              Sticky/Visibility -  Added mutation observer to teardown element with destroy if removed from DOM context, fixing a possible memory leak
            

            

              Video - Fixed issue with .video('change') behavior not properly changing video.
            

          

        

      

    



    
New Features


    

      
CSS-Only Tooltips

      
2.2 includes CSS only popups that work without JS initialization using the data-tooltip property on any element. CSS tooltips even support inversion and specified positioning.

      

        
      

      

        
      

      

        Top Left
      

      

        Top Center
      

      

        Top Right
      

      

      

        Bottom Left
      

      

        Bottom Center
      

      

        Bottom Right
      

      

      

        Right Center
      

      

        Left Center
      

    

    

      

        Top Left
      

      

        Top Center
      

      

        Top Right
      

      

      

        Bottom Left
      

      

        Bottom Center
      

      

        Bottom Right
      

      

      

        Right Center
      

      

        Left Center
      

    

    

      
New Icons

      
2.2 of Semantic UI includes the latest version of Font Awesome with 50+ new icons. For a complete breakdown of new icons please check Font Awesome's list.

      

        
Wheelchair

        
American Sign Language (ASL) Interpreting

        
Assistive Listening Systems

        
Audio Description

        
Blind

        
Braille

        
Deafness

        
Low Vision

        
Sign Language

        
Universal Access

        
Volume Control Phone

      

      

      View All Icons 
    

    

      
Rapid-Ready Progress

      
Progress bars in 2.2 have been recoded to handle rapid update events.

      
Now developers can trigger updates at fast intervals without causing animations to stutter, or easing tweens to occur unnaturally.

      

        

          

            

          

          
Waiting for you to press button

        

      

      
        Rapidly Update
      
      

        $('.rapid.example .ui.button')
          .on('click', function() {
            var
              $progress       = $('.rapid.example .ui.progress'),
              $button         = $(this),
              updateEvent
            ;
            clearInterval(window.fakeProgress)
            $progress.progress('reset');

            // updates every 10ms until complete
            window.fakeProgress = setInterval(function() {
              $progress.progress('increment');
              $button.text( $progress.progress('get value') );
              // stop incrementing when complete
              if($progress.progress('is complete')) {
                clearInterval(window.fakeProgress)
              }
            }, 10);
          })
        ;
        $('.rapid.example .ui.progress')
          .progress({
            duration : 200,
            total    : 200,
            text     : {
              active: '{value} of {total} done'
            }
          })
        ;
      

    

    

      
Reduced Memory Leaks

      
Sticky, visibility, popup, and dropdown, modules that can attach events on initialization to window and body, for example to detect changes in window scroll, will now use additional mutation observers to determine if they are removed from the DOM and automatically fire their destroy behaviors.

      
This can prevent memory leaks when the parent element of a component is removed without the element is propertly teared down by calling its destroy behavior.

      
Simulate Memory Leak

      

        Not Active
      

      

        

          This segment has visibility events attached to modify the button above to say "active" when it is on screen
        

      

      

        $('.memory.example .demo.segment')
          .visibility({
            onOnScreen: function() {
              // this will no longer fire even though element was removed indirectly
              $('.memory.example .display.segment').html('This is active');
            }
          })
        ;
        // button will remove parent of visibility element and callback will stop firing automatically
        $('.memory.example .ui.button')
          .on('click', function() {
            $('.memory.example .display.segment').html('De-activated');
            $('.memory.example .wrapper')
              .remove()
            ;
          })
        ;
      

    

    

      
Dependent Form Validation

      
Form field validation can now specify a depends property which will only cause validation to occur only when another field, like a checkbox or input, is selected.

      

        

          

            
            
          

        

        

          
          
        

        

        
Submit

        

      

      

      $('.depends.example .ui.form')
        .form({
          onSuccess: function() {
            alert('No form problems');
            return false;
          },
          fields: {
            yearsPracticed: {
              identifier : 'yearsPracticed',
              depends    : 'isDoctor',
              rules      : [
                {
                  type   : 'empty',
                  prompt : 'Please enter the number of years you have been a doctor'
                }
              ]
            }
          }
        })
      ;
      

    

    

      
Faster Dropdown Selection

      
We've updated dropdowns to make it simpler to breeze through forms with dropdowns, and provide more intuitive selection controls

      

        

          Multiple select dropdowns use a new algorithm for line breaks based on actual rendered pixels and not estimated length based on glyph width calculations, meaning more choices can squeeze on a line than before.
        

        

          Dropdowns now change selections on keyboards without hitting "enter", this lets users quickly navigate between dropdown elements in a form without having to hit "enter" before "tab" after each field entry, saving an additional keystroke.
        

        

          All dropdown menus now support letter keyboard shortcuts. Hitting "C" for instance will let you jump to "California" in a dropdown list, then hitting it again "Colorado", even without using a search selection dropdown.
        

      

      

        

          
        

        

          
        

      

    


    

      
More Basic Buttons

      
We've added primary, secondary, positive and negative basic buttons

      
      
      
      
    


    

      
Popup Boundaries and Scroll Context

      
Popups now include a new setting boundary that let you specify that a popup should not escape the boundary of another section. This can be useful in complex paned layouts

      
Additionally popups can now specify a scroll context, to allow for scroll containers other than window to cause a clicked popup to hide on scroll.

      

        $('.boundary.example .button')
          .popup({
            boundary: '.boundary.example .segment'
          })
        ;
      


      

        
Hover Me

        
Normally this popup would open in the default position top center but because this would escape the boundaries of the segment it will search other available positions until it can find one to place the popup while staying inside the segment

      

    


    
New Settings


    
We've added many new settings to components to help provide more granular control for some use-cases.


    

      
Dropdowns

      

        
          

            selectOnKeydown
            Whether dropdown should change active selection on keyboard shortcuts, preventing the requirement of hitting enter to confirm selection before the user tabs out of the field. (This will save one extra keystroke)
            
          

            allowReselection
            Setting to true will allow onChange to be triggered even when reselecting the same option
          

          

            fullTextSearch
            Setting to true will allow search across any part of string, setting to exact will disable fuzzy matching for dropdowns.
          

          

            hideAdditions
            Setting to true will allow custom user additions without triggering a special dropdown message for "Add custom choice". This is now enabled by default
          

          

            minCharacters
            Minimum characters required to begin showing filtered results
          

        
      

      Dropdown settings
        
      
    


    

      
Popup

      

        
          

            boundary
            A selector, or DOM element that the popup should never escape when positioning itself
            
          

          

            scrollContext
            A selector or DOM element which should be used for determining if user has scrolled.
          

          

            observeChanges
            Whether popup should automatically watch for its own removal from page to avoid memory leaks.
          

        
      

      Popup settings
        
      
    


    

      
Search

      

        
          

            selectFirstResult
            Whether the first search result element should be selected after results appear.
            
          

          

            showNoResults
            Whether a message should appear when no search results are returned
            
          

        
      

      Search settings
        
      
    


    

      
Rating

      

        
          

            fireOnInit
            Whether the rating component should fire callbacks on initialization.
            
          

        
      

      Rating settings
        
      
    


    

      
Visibility

      

        
          

            zIndex
            Allows you to specify the z-index used with type: 'fixed'
            
          

          

            onFixed
            A callback used with type: 'fixed' to occur when content is fixed to the page.
            
          

          

            onUnfixed
            A callback used with type: 'fixed' to occur when content is fixed to the page.
            
          

          

            onLoaded
            A callback used with type: 'image' to occur when content is loaded.
            
          

          

            onAllLoaded
            A callback used with type: 'image' to occur when all images initialized together are loaded.
            
          

        
      

      Visibility settings
        
      
    



    

      
Tab

      

        
          

            cacheType
            When set to html will cache the tabs html after load, reloading with the exact same html. Setting to response will cache the serve response, allowing for load events to fire with same contents.
            
          

          

            deactivate
            When set to siblings deactivates only DOM elements that are siblings of the selected tab activator. all will deactivate all other elements initialized at the same time.
            
          

        
      

      Tab settings
        
      
    


    

      
Shape

      

        
          

            width
            When set to next will use the size of the next side during the shape's animation. When set to initial it will use the size of the shape at initialization. When set to a specifix pixel width, will force the size to that width.
            
          

          

            height
            When set to next will use the size of the next side during the shape's animation. When set to initial it will use the size of the shape at initialization. When set to a specifix pixel height, will force the size to that height.
            
          

        
      

      Shape settings
        
      
    

  

  

    
The Tally

    
2.1 sums up around two months of work, including many new features, and updates to help bulletproof existing UI.

    

      
72 closed issues

      
70 bug fixes

      
23 new UI updates

      
14 feature enhancements

    


    
To see the complete list of updates review our release notes


    

      
Labeled Buttons

      
Labeled buttons are a useful design pattern for displaying a tally alongside a button.

      
Labeled buttons are compatible with any label type, but looks great alongside a basic label.

      

        

           Like
        

        
          2,048
        
      

      

        

           Forks
        

        
          1,048
        
      

      

        

           Hospitals
        

        
          2,048
        
      

      

      

        

           Star
        

        
          1,048
        
      

      

        
          2,048
        
        

           Like
        

      

      

        
          1,048
        
        

          
        

      

    


    

      
Basic Labels

      
We've added a new style basic label that is less intrusive, and compatible with all other label variations, reducing their complexity.

      Basic
      Pointing
      
        
        Elliot
      Red Pointing
      Blue
      

      

        

          

            Pointing Look over here
            
          

        

        

          

            So Complex
            So Simple
            Much adjectives
          

        

      

    


    

      
Multiple Input Labels

      
Labeled input now supports labels on both sides of content at the same time.

      

        
$

        
        
.00

      

    


    

      
More Tabular Directions

      
Tabular menus now support right and bottom positioning.

      

        

          

            This is an stretched grid column. This segment will always match the tab height
          

        

        

          

            
              Bio
            
            
              Pics
            
            
              Companies
            
            
              Links
            
          

        

      

    

    

      

        
      

      

        
          Active Project
        
        
          Project #2
        
        
          Project #3
        
      

    

    

      

        

          

            
              Bio
            
            
              Pics
            
            
              Companies
            
            
              Links
            
          

        

        

          

            This is an stretched grid column. This segment will always match the tab height
          

        

      

    


    

      
Enhanced Vertical Dividers

      
Grids now support using multiple vertical dividers per column, in any specified arrangement.

      

        

          

            
          

          

            
          

          
and

          

            
          

          
and

          

            
          

        

        

          

            
          

          
not

          

            
          

          
nor

          

            
          

          

            
          

        

      

    


    

      
Inverted Colored Menu

      
Inverted menus now support individual item colors


      

        
          
          Games
        
        
          
          Channels
        
        
          
          Videos
        
      

    


    

      

        
          Inbox
        
        
          Spam
        
        
          Updates
        
        

          

            
            
          

        

      

    



    

      
Reversable Grid Columns

      
Grids now support reversing their column flow per-device. This can be useful when a column should appear on the opposite side of the screen on smaller screens.

      
Reversing grids are also designed to be compatible with column-order specific variations like divided or celled

      

        

          Computer First 

          Tablet Fourth
        

        

          Computer Second 

          Tablet Third
        

        

          Computer Third 

          Tablet Second
        

        

          Computer Fourth 

          Tablet First
        

      

    


    

      
Stackable Cards

      
Cards have a stackable variation so that they appear full width on mobile.

      

        

          

            
14h

             Elliot
          

          

            
              
              17 likes
            
            
            3 comments
          

          

            

              
              
            

          

        

        

          

            
14h

             Elliot
          

          

            
              
              17 likes
            
            
            3 comments
          

          

            

              
              
            

          

        

        

          

            
14h

             Elliot
          

          

            
              
              17 likes
            
            
            3 comments
          

          

            

              
              
            

          

        

        

          

            
14h

             Elliot
          

          

            
              
              17 likes
            
            
            3 comments
          

          

            

              
              
            

          

        

      

    


  

    

      Fixed Tables
    

    
Tables now include a variation for using table-layout: fixed, which does not adjust column widths based on size.

    
This can help present data more cleanly with content that is uniformly formatted.

    
Fixed tables also support content collapsing using text-overflow: ellipsis when used with single line.

    

      
        
Name
        Status
        Gender
      

      
        

          John
          Approved
          Male
        

        

          Jamie
          Approved
          Male
        

        

          Jill
          Denied
          Female
        

      
    

  

  

    

      Fixed Tables
    

    

      
        
Name
        Status
        Description
      

      
        

          John
          Approved
          This is much too long to fit I'm sorry about that
        

        

          Jamie
          Approved
          Shorter description
        

        

          Jill
          Denied
          Shorter description
        

      
    

  


    
New Behaviors


    

      
Fully Customizable JSON

      
In 2.1 all component that uses remote data will let you specify a fields array to modify expected JSON property names, saving you the trouble of specifying an onResponse callback to modify the data structure.

      

      $('.ui.search')
        .search({
          apiSettings: {
            url: '//api.github.com/search/repositories?q={query}'
          },
          fields: {
            results : 'items',
            title   : 'name',
            url     : 'html_url'
          }
        })
      ;
      

      

        

          
          
        

      

    


    

      
Fields can also be used with local search to simplify working with unusual search sources.

      

      $('.ui.search')
        .search({
          searchFields: ['pickle'],
          fields: {
            title   : 'mustard'
          },
          source: [
            {
              mustard: 'Title #1',
              pickle: 'thing'
            },
            {
              mustard: 'Title #2',
              pickle: 'another thing'
            },
            {
              mustard: 'Title #3',
              pickle: 'thing 100'
            }
          ]
        })
      ;
      

      

        

          
          
        

      

    


    

      
Credit Card Validation

      
We've added new validation rules for payment. These work with luhn and non-luhn card numbers. If you only accept a certain set of credit cards you can specify that too.

      

        Try 4565340519181845 a test visa card number
      

      

        

          
          
        

        

          
          
        

        
Submit

      

      

        $('.payment.example form')
          .form({
            on: 'blur',
            inline: true,
            fields: {
              card: {
                identifier  : 'card',
                rules: [
                  {
                    type   : 'creditCard',
                    prompt : 'Please enter a valid credit card'
                  }
                ]
              },
              exactCard: {
                identifier  : 'exact-card',
                rules: [
                  {
                    type   : 'creditCard[visa,amex]',
                    prompt : 'Please enter a visa or amex card'
                  }
                ]
              }
            }
          })
        ;
      

    

    

      
Cancellable Checkboxes

      
Checkboxes now include four new callbacks beforeChecked, beforeUnchecked, beforeDeterminate, and beforeIndeterminate, returning false from these callbacks will cancel the action from occuring.

      

        
        
      

      

        $('.cancel.example .ui.checkbox')
          .checkbox({
            beforeChecked: function() {
              var
                luckyPerson = (Math.random() < 0.5)
              ;
              return luckyPerson;
            }
          })
        ;
      

    



    
Theme Updates


    

      
Global Form Focus

      
Global variables have been added to modify form focus color across all components. The default theme now uses a light blue to signal selection.

      

        

          

            
            
          

          

            
            
          

        

        

          
          
        

        

          

            
            
          

        

        
      

    

    

      
Updated Form Validation

      
Form validation now uses basic label for validation prompts.

      

        

          
          
        

        

          
          
        

        

          

            
            
          

        

        
      

    


    

      
Colored Basic Buttons

      
Basic colored buttons now are colored without hover, making the style more similar to common usage on most sites.

      
      
      
      
      
      
      
      
      
      
      
      
      
    


    

      
Labeled Icon Menu

      
Horizontal labeled icon menu now use stacked icons to appear more in-tune with common icon menu usage.

      

        
          
          Games
        
        
          
          Channels
        
        
          
          Videos
        
      

    


  


  


    
Introduction


    


      
The Devil is in the Details

      
2.0 brings a whopping set of changes to the project:
      

        
129 enhancements

        
118 bug fixes

        
3 new components

        
Rewrites of many components including menu, and input

      


      
There's just too much to cover in one page, but we've tried our best to give you examples of some of the new features available in 2.0


      
To see the full list of what's changed check out the project's release notes.


      View Release Notes
    



    
Global Changes


    

      
Flexbox All The Things

      
Flexbox allows for elements to intuitively resize to fill available space, making many complex layouts much simpler.

      
13 components: Form, Grid, Menu, Message, Button, Segment, Step, Dropdown, Modal, Feed, Statistic, Card, Item now use flex for positioning.


    


    

      
Complete Spectrum

      
Semantic now includes twelve named colors, enough for most languages to distinguish between colors. New in 2.0 are: olive, violet, brown and grey.

      Grey
      Red
      Orange
      Yellow
      
        
        Olive
      
      Green
      
        Teal
        
Detail

      
      
        
        Blue
      
      
        Violet
      
      
        Purple
        
      
      

        

          
Pink

          
        

        

          
Brown

          
        

      

    

    

      
New Default Theme

      
All components have received a face-lift for 2.0. Styles give slightly more negative space and a few idiosyncratic design touches have been removed.

    

    

      
More Precise EM Values

      
EM sizing has been improved in 2.0, with all values rounding to exact pixel values. This helps common relative sizing pitfalls like rounding errors in vertical alignment.

      
Em variables now use new globally calculated em ratios, like @relative4px, to express pixel values in terms of root em size. This makes sure components don't include confusing decimal or fractional values when dealing with sizing.

    



    
Grids


    

      
Flexbox Grid

      
Grids in 2.0 now use flexbox so columns are always equal height across rows.

      

        

          

            

              1
            

          

          

            

              1
            

            

              2
            

          

          

            

              1
            

            

              2
            

            

              3
            

          

        

      

    

    

      
Grids Create Themselves

      
The new equal width variation adjusts column widths automatically splitting available width between columns.

      

        

        

        

        

      

      
If a column has a specified width, other columns will adapt to take available space around it.

      

        

        

        

      

    

    

      
Containers

      
Containers have been added as a simple way to limit content width.

      

        

          

          

          

        

      

    


    

      
Stretched rows

      
The new stretched variation makes vertically aligning layouts much simpler. Columns will not only match heights, but stretch their contents to match heights.

      

        

          

            1
          

          

            2
          

        

        

          

            
          

        

        

          

            1
          

          

            2
          

        

      

    


    
Dropdowns


    

      
Multiple Selection

      
Multiple select dropdowns are now available, and can generate automatically from standard HTML selects.  

      
Dropdowns now all support advanced keyboard shortcuts like pagedown, delete, shift+left ctrl+click, and selection using first letter of item.

      
Additionally dropdowns will now automatically open upward if there is not enough space available in the viewport below a dropdown.

      
    


    

      
User Tagging

      
All dropdowns, single and multiple now support user tagging. Values can be automatically separated by a delimiter and placed in a hidden input, or extend an existing select element.

      

      $('.ui.dropdown')
        .dropdown({
          allowAdditions: true
        })
      ;
      

      

        

          

            
            

              
              
              
Skills

              

                <%- @partial('examples/single/preset-menu') %>
              

            

          

          

            
            

              
              
              
Skills

              

                <%- @partial('examples/single/preset-menu') %>
              

            

          

        

      

    


    

      
Remote Data

      
All dropdowns now support loading remote data. Selected name value pairs retrieved remotely are stored in sessionStorage so that selected values are repopulated correctly even after a page refresh.

      

        // somewhere in app
        $.api.settings.api = {
          queryTags: '//api.semantic-ui.com/tags/{query}'
        };
        $('.ui.dropdown')
          .dropdown({
            apiSettings: {
              action: 'queryTags'
            }
          })
        ;
      

      

        

          

            
            

              
              
              
              
Select one...

            

          

          

            
            

              
              
              
              
Select...

            

          

        

      

    


    

      
Scrolling Menus

      
Scrolling menu and nested menus are now supported.

      
Listing choices in a nested menu will still give all the same keyboard shortcuts and filtering as regular menus.

      

        
        Filter Posts
        

          

            
            
          

          

          

            
            Tag Label
          

          

            

              

              Already Fixed
            

            

              

              Announcement
            

            

              

              Cannot Fix
            

            

              

              Discussion
            

            

              

              Enhancement
            

            

              

              Important
            

            

              

              Interesting
            

            

              

              News
            

            

              

              Off Topic
            

            

              

              Up Next
            

          

        

      

    

    

      
Advanced Shortcuts

      
Dropdowns now support advanced shortcuts like page down and page up, scrolling to selection on first letter press, i.e. "N" for New York, shift+left/right for group selection, and ctrl+click for modifying groups.

      
    


    

      
Much More

      
Dropdowns support many, many new features, including:

      
    
        
  • Maximum selection count is supported for multiple selects
    • 
        
  • Mutation observers will now watch for changes in menus or the elements they are generated from and will update choices automatically
    • 
        
  • Custom templated error messages are now supported with dropdowns
    • 
      

    


    
API



    

      
Local Caching

      
API now supports sessionStorage caching. This setting makes repeated requests to a URL return results instantly across a user's session, drastically improving performance for components like search.

      
Try refreshing the page and searching the same letter, results will appear instantly without a server roundtrip.

      

      $('.ui.dropdown')
        .dropdown({
          apiSettings: {
            cache : 'local',
            url: '//api.semantic-ui.com/tags/{query}'
          }
        })
      ;
      

      

        

          
          

            
            
            
            
Select one...

          

        

      

    



    

      
Translates Any API

      
API now lets you adjust a server's JSON response using a new callback, onResponse. This can let you restructure third party APIs to match your local data requirements.

      

        

          
          
        

      

      

      $('.ui.search')
        .search({
          type          : 'category',
          minCharacters : 3,
          apiSettings   : {
            onResponse: function(githubResponse) {
              var
                response = {
                  results : {}
                }
              ;
              // translate GitHub API response to work with search
              $.each(githubResponse.items, function(index, item) {
                var
                  language   = item.language || 'Unknown',
                  maxResults = 8
                ;
                if(index >= maxResults) {
                  return false;
                }
                // create new language category
                if(response.results[language] === undefined) {
                  response.results[language] = {
                    name    : language,
                    results : []
                  };
                }
                // add result to category
                response.results[language].results.push({
                  title       : item.name,
                  description : item.description,
                  url         : item.html_url
                });
              });
              return response;
            },
            url: '//api.github.com/search/repositories?q={query}'
          }
        })
      

    


    

      
Mocked Responses

      
API now supports mocked responses, letting you specify how responses are returned in advance.

      

        $('.toggle.button')
          .api({

            // lets pretend this took a while
            loadingDuration: 500,

            // lets treat this button as requesting this JSON
            mockResponse: {
              success: true
            }
          })
          // successful responses will trigger a text state change
          .state({
            text: {
              inactive   : 'Off',
              active     : 'On'
            }
          })
        ;
      

      

        Off
      

    

    

      
Custom Backends

      
API can now use custom asynchronous callbacks for resolving API requests, this can let you use other custom XHR backends, or local data to resolve requests.

      

      $('.toggle.button')
        .api({
          // lets wait a half second then try your luck
          mockResponseAsync: function(settings, callback) {
            var
              luckyPerson = (Math.random() < 0.5),
              response    = (luckyPerson)
                ? { success: true }
                : { success: false, message: 'You are not lucky' }
            ;
            // simulate this is an async task
            setTimeout(function() {
              callback(response);
            }, 500);
          },
          successTest: function(response) {
            return response && response.success;
          },
          onFailure: function (response) {
            alert(response.message);
          }
        })
        .state({
          text: {
            inactive : 'Off',
            active   : 'On'
          }
        })
      ;
      

      

        Off
      


    


    
Form


    

      
Autocomplete

      
Form now include custom styling for browser autocompleted form fields. Autocompleted fields can also specify focused autocomplete, and errored autocomplete styles.


      

        
Shipping Information

        

          
          

            

              
            

            

              
            

          

        

        

          
          

            

              
            

            

              
            

            

              
            

          

        

        
Submit

      


    



    
Dimmer


    

      
Blurring Dimmers

      
Dimmers now include blurring dimmer variations.

      
Other component can use blurring dimmers to add overlay content, modal also includes a blurring setting that affects its generated dimmer.


      

        

          

            

              

                

                  
Send Memo

                

              

            

            
          

          

            Matthew
          

          

            
              Hired Jan 2014
            
            
              Human Resources
            
          

        

        

          

            

              

                

                  
Send Memo

                

              

            

            
          

          

            Rachel
          

          

            
              Hired Feb 2015
            
            
              Accounting
            
          

        

      


    


    
Checkbox


  

    

      
Indeterminate Checkbox


      
Checkboxes now support an indeterminate state. This is useful when a collection of checkboxes may be partially selected.

      

        

          

            
            
          

          

            

              

                
                
              

            

            

              

                
                
              

            

            

              

                
                
              

            

          

        

        

          

            
            
          

          

            

              

                
                
              

            

            

              

                
                
              

            

            

              

                
                
              

            

          

        

      

    



    
Segment


    

      
Horizontal Groups

      
Horizontal groups are now available for segment.

      

        

          
Left

        

        

          
Center

        

        

          
Right

        

      

    


    

      
Complex Layouts

      
Groups now use flexbox and fully support nesting.

      

        

          
Top

        

        

          

            
Nested Top

          

          

            
Nested Middle

          

          

            
Nested Bottom

          

        

        

          
Middle

        

        

          

            
Left

          

          

            
Center

          

          

            
Right

          

        

        

          
Bottom

        

      

    

    

      
Typed Groups

    
Groups now support types like raised, stacked, or piled

      

        

          
Top

        

        

          

            
Left

          

          

            
Center

          

          

            
Center

          

          

            
Center

          

          

            
Right

          

        

        

          
Bottom

        

      

    


    
Menus


    

      
Flexible Menus

      
Menus have been completely rewritten to use flexbox. Items inside a menu will automatically adjust to align with other menu items regardless of size.

      

        

          
        

        
          Bio
        
        
          Photos
        
      

      

        
      

    

    

      
Vertical Tabs

      
Menus now include a new vertical tabular menu type.

      

        

          

            
              Bio
            
            
              Pics
            
            
              Companies
            
            
              Links
            
          

        

        

          

            This is an stretched grid column. This segment will always match the tab height
          

        

      

    

    

      
Better Coupling

      
Menus now have better coupling with other components like dropdown, search, button, and input.


      

        $('.ui.menu .browse.item')
          .popup({
            popup     : '.classes.popup',
            hoverable : true,
            position  : 'bottom left',
            delay     : {
              show: 300,
              hide: 800
            }
          })
        ;
      

      

        $('.ui.search')
          .search({
            type: 'category',
            apiSettings: {
              action: 'categorySearch'
            }
          })
        ;
      

      

        
Browse

        

          

            
            
          

          

        

      

      

        

          

            
Business

            

              Design & Urban Ecologies
              Fashion Design
              Fine Art
              Strategic Design
            

          

          

            
Liberal Arts

            

              Anthropology
              Economics
              Media Studies
              Philosophy
            

          

          

            
Social Sciences

            

              Food Studies
              Journalism
              Non Profit Management
            

          

        

      

    


    
Visibility


    


      
Simple Sticky


      
Visibility APIs now include useful shortcuts for sticky content. A placeholder will automatically be added when an element is passed making sure other content does not shift position.


      
Additionally visibility and sticky have been rewritten to use a pub/sub pattern which is much more performant than 1.0


      

        $('.overlay')
          .visibility({
            type   : 'fixed',
            offset : 15 // give some space from top of screen
          })
        ;
      

      

      .overlay {
        background-color: #FFFFFF;
        padding: 0.5em;
        box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
        transition: all 0.5s ease;
        background: transparent;
      }
      /* change style */
      .fixed.overlay {
        position: fixed;
        padding: 1em;
        box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
      }
      

      

        

          

            
               Menu
            
            Option 1
            Option 2
            Option 3
          

        

        

        
        
        
        
        
        
      

    

  





================================================
FILE: server/documents/kitchen-sink.html.eco
================================================
---
layout      : 'default'
css         : 'custom'
standalone  : true

title       : 'All UI'
type        : 'UI Examples'
description : 'Examples of all user interface elements'
---

<%- @partial('header', { tabs: {  elements: 'Elements', collections: 'Collections', views: 'Views', modules: 'Modules' } }) %>




  

    

      Elements
    

    

      

        Button
      

      <%- @partial('examples/button') %>
    

    

      

        Divider
      

      <%- @partial('examples/divider') %>
    

    

      

        Flag
      

      <%- @partial('examples/flag') %>
    

    

      

        Header
      

      <%- @partial('examples/header') %>
    

    

      

        Icon
      

      <%- @partial('examples/icon') %>
    

    

      

        Image
      

      <%- @partial('examples/image') %>
    

    

      

        Input
      

      <%- @partial('examples/input') %>
    

    

      

        Label
      

      <%- @partial('examples/label') %>
    

    

      

        List
      

      <%- @partial('examples/list') %>
    

    

      

        Loader
      

      <%- @partial('examples/loader') %>
    

    

      

        Reveal
      

      <%- @partial('examples/reveal') %>
    

    

      

        Segment
      

      <%- @partial('examples/segment') %>
    

    

      

        Step
      

      <%- @partial('examples/step') %>
    

  

  

    

      Collections
    


    

      

        Breadcrumb
      

      <%- @partial('examples/breadcrumb') %>
    

    

      

        Form
      

      <%- @partial('examples/form') %>
    

    

      

        Grid
      

      <%- @partial('examples/grid') %>
    

    

      

        Menu
      

      <%- @partial('examples/menu') %>
    

    

      

        Message
      

      <%- @partial('examples/message') %>
    

    

      

        Table
      

      <%- @partial('examples/table') %>
    

  

  

    

      Views
    

    

      

        Card
      

      <%- @partial('examples/card') %>
    

    

      

        Feed
      

      <%- @partial('examples/feed') %>
    

    

      

        Item
      

      <%- @partial('examples/item') %>
    

    

      

        Statistic
      

      <%- @partial('examples/statistic') %>
    

  

  

    

      Modules
    

    

      

        Accordion
      

      <%- @partial('examples/accordion') %>
    

    

      

        Checkbox
      

      <%- @partial('examples/checkbox') %>
    

    

      

        Dimmer
      

      <%- @partial('examples/dimmer') %>
    

    

      

        Dropdown
      

      <%- @partial('examples/dropdown') %>
    

    

      

        Modal
      

      <%- @partial('examples/modal') %>
    

    

      

        Popup
      

      <%- @partial('examples/popup') %>
    

    

      

        Progress
      

      <%- @partial('examples/progress') %>
    

    

      

        Rating
      

      <%- @partial('examples/rating') %>
    

    

      

        Search
      

      <%- @partial('examples/search') %>
    


    

      

        Shape
      

      <%- @partial('examples/shape') %>
    


    

      

        Sidebar
      

      <%- @partial('examples/sidebar') %>
    

    

      

        Tab
      

      <%- @partial('examples/tab') %>
    

    

      

        Transition
      

      <%- @partial('examples/transition') %>
    

  





================================================
FILE: server/documents/modules/accordion.html.eco
================================================
---
layout      : 'default'
css         : 'accordion'
element     : 'accordion'
elementType : 'module'
standalone  : true

title       : 'Accordion'
description : 'An accordion allows users to toggle the display of sections of content'
type        : 'UI Module'

themes      : ['Default', 'Chubby']
---



<%- @partial('header', { tabs: 'module' }) %>




  


    
Types

    

      
Accordion

      
A standard accordion

      

        

          
          What is a dog?
        

        

          
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.

        

        

          
          What kinds of dogs are there?
        

        

          
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.

        

        

          
          How do you acquire a dog?
        

        

          
Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.

          
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.

        

      

    


    

      
Styled

      
A styled accordion adds basic formatting

      

        

          
          What is a dog?
        

        

          
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.

        

        

          
          What kinds of dogs are there?
        

        

          
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.

        

        

          
          How do you acquire a dog?
        

        

          
Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.

          
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.

        

      

    


    
Variations

    

      
Fluid

      
An accordion can take up the width of its container

      

        

          
          What is a dog?
        

        

          
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.

        

        

          
          What kinds of dogs are there?
        

        

          
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.

        

        

          
          How do you acquire a dog?
        

        

          
Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.

          
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.

        

      

    


    

      
Inverted

      
An accordion can be formatted to appear on dark backgrounds

      

        

          

            
            What is a dog?
          

          

            
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.

          

          

            
            What kinds of dogs are there?
          

          

            
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.

          

          

            
            How do you acquire a dog?
          

          

            
Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.

            
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.

          

        

      

    



  


  


    
Examples


    

      
Nested Accordions

      
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

      

        

          
          Level 1
        

        

          Welcome to level 1
          

            

                
                Level 1A
            

            

              
Level 1A Contents

              

                

                    
                    Level 1A-A
                

                

                    Level 1A-A Contents
                

                

                    
                    Level 1A-B
                

                

                    Level 1A-B Contents
                

              

            

            

                
                Level 1B
            

            

                Level 1B Contents
            

            

                
                Level 1C
            

            

                Level 1C Contents
            

          

        

        

          
          Level 2
        

        

          
Welcome to level 2

          

            

              
              Level 2A
            

            

              
Level 2A Contents

              

                

                    
                    Level 2A-A
                

                

                    Level 2A-A Contents
                

                

                    
                    Level 2A-B
                

                

                    Level 2A-B Contents
                

              

            

            

                
                Level 2B
            

            

                Level 2B Contents
            

            

                
                Level 2C
            

            

                Level 2C Contents
            

          

        

      

    


    

      
Changing Trigger

      
An accordion normally triggers when its title is clicked. However you can change the trigger selector to specify an element inside a title to use as an activator

      

        $('.trigger.example .accordion')
          .accordion({
            selector: {
              trigger: '.title .icon'
            }
          })
        ;
      

      

        

          
          What is a dog?
        

        

          
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.

        

        

          
          What kinds of dogs are there?
        

        

          
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.

        

        

          
          How do you acquire a dog?
        

        

          
Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.

          
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.

        

      

    


    

      
Form Fields

      
An accordion can be used anywhere where content can be shown or hidden. For example, to show optional form fields.

      

        

          

            

              
              
            

            

              
              
            

          

          

            

              
              Optional Details
            

            

              
              
            

          

          
Sign Up

        

      

    

    

      
Accordion Menu

      
An accordion can be used to create content drawers inside a menu

      

        

          
            
            Size
          
          

            

              

                

                  

                    
                    
                  

                

                

                  

                    
                    
                  

                

                

                  

                    
                    
                  

                

                

                  

                    
                    
                  

                

              

            

          

        

        

          
            
            Colors
          
          

            

              

                

                  

                    
                    
                  

                

                

                  

                    
                    
                  

                

                

                  

                    
                    
                  

                

                

                  

                    
                    
                  

                

              

            

          

        

      

    

  

  


    
Initializing


    

      
Initializing an accordion

      
Accordion is initialized on pre-existing markup

      

      $('.ui.accordion')
        .accordion()
      ;
      

    


    

      
AJAX Content

      
Accordions use DOM Mutation Observers and delegated events to allow for easy compatibility with AJAX content, or content added after initialization.

      
If the DOM tree changes the module will automatically call module.refresh and update the selector cache. Because events are bound on the parent module using delegated events, events will automatically fire on content added after initialization.

      
If you change other attributes of the module without DOM insertion and need to update the cache you can do so by calling this module's refresh behavior.
      

        $('.ui.accordion').accordion('refresh');
      

    


    
Behaviors


    
Behaviors are short english phrases used for accessing specific functionality in

    
Behaviors are accessible with Javascript using the syntax:

    

    $('.ui.accordion').accordion('behavior', argumentOne, argumentTwo...);
    


    

      

        refresh
        Refreshes all cached selectors and data
      

      

        open (index)
        Opens accordion content at index
      

      

        close others
        Closes accordion content that are not active
      

      

        close (index)
        Closes accordion content at index
      

      

        toggle (index)
        Toggles accordion content at index
      

    


  


  

    

      Accordion
    


    

      Behavior
    

    

      
        

        Default
        Description
      

      
        

          exclusive
          true
          Only allow one section open at a time
        

        

          on
          click
          Event on title that will cause accordion to open
        

        

          animateChildren
          true
          Whether child content opacity should be animated (may cause performance issues with many child elements)
        

        

          closeNested
          true
          Close open nested accordion content when an element closes
        

        

          collapsible
          true
          Allow active sections to collapse
        

        

          duration
          500
          Duration in ms of opening animation
        

        

          easing
          easeInOutQuint
          Easing of opening animation. EaseInOutQuint is included with accordion, for additional options you must include easing equations.
        

      
    


    

      Callbacks
    


    

      
        

        Context
        Description
      

      
        

          onOpening
          active content
          Callback before element opens
        

        

          onOpen
          active content
          Callback after element is open
        

        

          onClosing
          active content
          Callback before element closes
        

        

          onClose
          active content
          Callback after element is closed
        

        

          onChanging
          active content
          Callback before element opens or closes
        

        

          onChange
          active content
          Callback on element open or close
        

      
    


    

      Module
    


    
These settings are native to all modules, and define how the component ties content to DOM attributes, and debugging settings for the module.


    

      
        

        Default
        Description
      

      
        

          name
          Accordion
          Name used in log statements
        

        

          namespace
          accordion
          Event namespace. Makes sure module teardown does not effect other events attached to an element.
        

        

          selector
          
            

            selector    : {
              accordion : '.accordion',
              title     : '.title',
              trigger   : '.title',
              content   : '.content'
            }
            

          		
          Selectors used to find parts of a module
        

        

          className
          
            

            className   : {
              active    : 'active',
              animating : 'animating'
            }
            

          		
          Class names used to determine element state
        

        

          silent
          False
          Silences all console output including error messages, regardless of other debug settings.
        

        

          debug
          false
          Debug output to console
        

        

          performance
          true
          Show console.table output with performance metrics
        

        

          verbose
          false
          Debug output includes all internal behaviors
        

        

          errors
          
            

            error   : {
              method   : 'The method you called is not defined.'
            }
            

          		
        

      
    

  





================================================
FILE: server/documents/modules/checkbox.html.eco
================================================
---
layout      : 'default'
css         : 'checkbox'
element     : 'checkbox'
elementType : 'module'
standalone  : true

title       : 'Checkbox'
description : "A checkbox allows a user to select a value from a small set of options, often binary"
type        : 'UI Module'

themes      : ['Default', 'Colored']
---



<%- @partial('header', { tabs: 'module' }) %>




  



    
Types


    

      
Checkbox

      
A standard checkbox

      

        
        
      

    


    

      
Radio

      
A checkbox can be formatted as a radio element. This means it is an exclusive option.


      

        
        
      

    

    

      

        

          
          

            

              
              
            

          

          

            

              
              
            

          

          

            

              
              
            

          

          

            

              
              
            

          

        

      

    

    

      

        

          
          

            

              
              
            

          

          

            

              
              
            

          

          

            

              
              
            

          

          

            

              
              
            

          

        

      

    


    

      
Slider

      
A checkbox can be formatted to emphasize the current selection state

      

        
        
      

    


    

      

        

          
          

            

              
              
            

          

          

            

              
              
            

          

          

            

              
              
            

          

          

            

              
              
            

          

        

      

    


    

      
Toggle

      
A checkbox can be formatted to show an on or off choice

      

        
        
      

    


    
States


    

      
Read-only

      
A checkbox can be read-only and unable to change states

      

        
        
      

    


    

      
Checked

      
A checkbox can be checked

      

        
        
      

    


    

      
Indeterminate

      
A checkbox can be indeterminate

      

        An indeterminate state can only be set in Javascript, see examples section
      

      

        
        
      

    


    

      
Disabled

      
A checkbox can be read-only and unable to change states

      

        A checkbox can be disabled by either setting the disabled attribute on the hidden input, or class disabled on the ui checkbox
      

      

        
        
      

      

      

      

        
        
      

    


    
Variations


    

      
Fitted

      
A fitted checkbox does not leave padding for a label

      

        

          
          
        

      

      

        

          
          
        

      

      

        

          
          
        

      

    



  


  


    
Examples

    

      
Using Callbacks

      
Checkbox has two versions of each state change behavior to let you determine whether the call should trigger checkbox callbacks.

      
Calling a behavior like check will trigger an elements callbacks, however using set checked will adjust the checkbox state without triggering callbacks

      
This differentiation is important to differentiate between programmatic changes, and user-invoked changes to state.

      

        

          

            

              Example
            

            

              
              
            

            

            

              
              
            

          

        

        

          

            

              Console
            

          

        

        

          

            
Toggle

            
Check

            
Uncheck

            
Indeterminate

            
Determinate

            
Enable

            
Disable

          

          

          

            
Set Checked

            
Set Unchecked

            
Set Indeterminate

            
Set Determinate

            
Set Enabled

            
Set Disabled

          

        

      

      

        var
          $console = $('.callback .console')
        ;
        $('.callback.example .checkbox')
          .checkbox()
          .first().checkbox({
            onChecked: function() {
              $console.append('onChecked called
');
            },
            onUnchecked: function() {
              $console.append('onUnchecked called
');
            },
            onEnable: function() {
              $console.append('onEnable called
');
            },
            onDisable: function() {
              $console.append('onDisable called
');
            },
            onDeterminate: function() {
              $console.append('onDeterminate called
');
            },
            onIndeterminate: function() {
              $console.append('onIndeterminate called
');
            },
            onChange: function() {
              $console.append('onChange called
');
            }
          })
        ;
        // bind events to buttons
        $('.callback.example .button')
          .on('click', function() {
            $('.callback .checkbox').checkbox( $(this).data('method') );
          })
        ;
      

    

    

      
Grouped Checkboxes

      
The indeterminate state can be used to represent a value that is neither checked or unchecked.

      
This can be useful with groups where a "master" checkbox, should display the selections of several other checkboxes


      

        

          

            
            
          

          

            

              

                
                
              

            

            

              

                
                
              

            

            

              

                
                
              

            

          

        

        

          

            
            
          

          

            

              

                
                
              

            

            

              

                
                
              

            

            

              

                
                
              

            

          

        

      

      

        $('.list .master.checkbox')
          .checkbox({
            // check all children
            onChecked: function() {
              var
                $childCheckbox  = $(this).closest('.checkbox').siblings('.list').find('.checkbox')
              ;
              $childCheckbox.checkbox('check');
            },
            // uncheck all children
            onUnchecked: function() {
              var
                $childCheckbox  = $(this).closest('.checkbox').siblings('.list').find('.checkbox')
              ;
              $childCheckbox.checkbox('uncheck');
            }
          })
        ;
      

      

        $('.list .child.checkbox')
          .checkbox({
            // Fire on load to set parent value
            fireOnInit : true,
            // Change parent state on each child checkbox change
            onChange   : function() {
              var
                $listGroup      = $(this).closest('.list'),
                $parentCheckbox = $listGroup.closest('.item').children('.checkbox'),
                $checkbox       = $listGroup.find('.checkbox'),
                allChecked      = true,
                allUnchecked    = true
              ;
              // check to see if all other siblings are checked or unchecked
              $checkbox.each(function() {
                if( $(this).checkbox('is checked') ) {
                  allUnchecked = false;
                }
                else {
                  allChecked = false;
                }
              });
              // set parent checkbox state, but dont trigger its onChange callback
              if(allChecked) {
                $parentCheckbox.checkbox('set checked');
              }
              else if(allUnchecked) {
                $parentCheckbox.checkbox('set unchecked');
              }
              else {
                $parentCheckbox.checkbox('set indeterminate');
              }
            }
          })
        ;
      

    



    

      
Checking Conditions

      
Checkboxes include four new callbacks beforeChecked, beforeUnchecked, beforeDeterminate, and beforeIndeterminate, returning false from these callbacks will cancel the action from occuring before the input value is updated.

      

        
        
      

      

        $('.cancel.example .ui.checkbox')
          .checkbox({
            beforeChecked: function() {
              var
                luckyPerson = (Math.random() < 0.5)
              ;
              return luckyPerson;
            }
          })
        ;
      

    


    

      
One-Way Choices

      
To make a user able to check a box, but unable to uncheck it, use the uncheckable setting.

      
To always disable a checkbox, add the property disabled to your input.

      
To make a checkbox read-only do not initialize it, or include the read-only class which will not allow events.

      

        $('.state.example .checkbox')
          .last()
          .checkbox({
            uncheckable: false
          })
        ;
      

      

        

          

            
            
          

        

        

          

            
            
          

        

        

          

            
            
          

        

      

    


    

      
Attaching Events to other Elements

      
Checkbox can use the attach events behavior to attach events easily to other activating elements. This defaults to toggling, but other behaviors can be used as well.

      

        $('.test.checkbox').checkbox('attach events', '.toggle.button');
        $('.test.checkbox').checkbox('attach events', '.check.button', 'check');
        $('.test.checkbox').checkbox('attach events', '.uncheck.button', 'uncheck');
      

      
Toggle

      
Check

      
Uncheck

      

        

          

            
            
          

        

        

          

            
            
          

        

        

          

            
            
          

        

        

          

            
            
          

        

        

          

            
            
          

        

        

          

            
            
          

        

      

    

  


  

    
Initializing


    

      
Checkbox

      
A checkbox does not require Javascript to function.

      

        
        
      

      

        

          
          
        

      

    


    

      
Full Featured Checkboxes

      
Using Javascript with checkboxes will automatically make the checkbox's label trigger a change in the input and provide callback functions. Additionally, some states like indeterminate can only be triggered with Javascript.

      

        
        
      

      

        

          
          
        

      

    



    

      
Linked Labels

      
If you just need labels to link without any other features of Javascript checkboxes, you can match the for attribute of the label to an input's id.

      

        
        
      

      

        

          
          
        

      

    


    
Behavior

    
Behaviors are accessible with Javascript using the syntax:

    

    $('.ui.checkbox').checkbox(behavior, argumentOne, argumentTwo...);
    


    

      

        toggle
        Switches a checkbox from current state
      

      

        check
        Set a checkbox state to checked
      

      

        uncheck
        Set a checkbox state to unchecked
      

      

        indeterminate
        Set as indeterminate checkbox
      

      

        determinate
        Set as determinate checkbox
      

      

        enable
        Enable interaction with a checkbox
      

      

        set checked
        Set a checkbox state to checked without callbacks
      

      

        set unchecked
        Set a checkbox state to unchecked without callbacks
      

      

        set indeterminate
        Set as indeterminate checkbox without callbacks
      

      

        set determinate
        Set as determinate checkbox without callbacks
      

      

        set enabled
        Enable interaction with a checkbox without callbacks
      

      

        set disabled
        Disable interaction with a checkbox without callbacks
      

      

        attach events(selector, behavior)
        Attach checkbox events to another element
      

      

        is radio
        Returns whether element is radio selection
      

      

        is checked
        Returns whether element is currently checked
      

      

        is unchecked
        Returns whether element is not checked
      

      

        can change
        Returns whether element is able to be changed
      

      

        should allow check
        Returns whether element can be checked (checking if already checked or `beforeChecked` would cancel)
      

      

        should allow uncheck
        Returns whether element can be unchecked (checking if already unchecked or `beforeUnchecked` would cancel)
      

      

        should allow determinate
        Returns whether element can be determinate (checking if already determinate or `beforeDeterminate` would cancel)
      

      

        should allow indeterminate
        Returns whether element can be indeterminate (checking if already indeterminate or `beforeIndeterminate` would cancel)
      

      

        can uncheck
        Returns whether element is able to be unchecked
      

    

  



  

    
Checkbox


    
These settings are specific to checkbox, and determine the parameters of its behavior


    

      
        

        Default
        Description
      

      
        

          uncheckable
          auto
          Setting to true/false will determine whether an input will allow no selection. Auto will set disallow this behavior only for radio boxes
        

        

          fireOnInit
          false
          Whether callbacks for checked status should be fired on init as well as change
        

      
    


    

      
        

        Context
        Description
      

      
        

          onChange
          HTML input element
          Callback after a checkbox is either checked or unchecked.
        

        

          onChecked
          HTML input element
          Callback after a checkbox is checked.
        

        

          onIndeterminate
          HTML input element
          Callback after a checkbox is set to undeterminate.
        

        

          onDeterminate
          HTML input element
          Callback after a checkbox is set to determinate.
        

        

          onUnchecked
          HTML input element
          Callback after a checkbox is unchecked.
        

        

          beforeChecked
          HTML input element
          Callback before a checkbox is checked. Can cancel change by returning false
        

        

          beforeIndeterminate
          HTML input element
          Callback before a checkbox is set to undeterminate. Can cancel change by returning false
        

        

          beforeDeterminate
          HTML input element
          Callback before a checkbox is set to determinate. Can cancel change by returning false
        

        

          beforeUnchecked
          HTML input element
          Callback before a checkbox is unchecked. Can cancel change by returning false
        

        

          onEnable
          HTML input element
          Callback after a checkbox is enabled.
        

        

          onDisable
          HTML input element
          Callback after a checkbox is disabled.
        

      
    


    
Module


    
These settings are native to all modules, and define how the component ties content to DOM attributes, and debugging settings for the module.

    

      
        

        Default
        Description
      

      
        

          name
          Checkbox
          Name used in log statements
        

        

          namespace
          checkbox
          Event namespace. Makes sure module teardown does not effect other events attached to an element.
        

        

          selector
          
            

            selector : {
              input  : 'input[type=checkbox], input[type=radio]',
              label  : 'label'
            }
            

          		
          Selectors used to find parts of a module
        

        

          className
          
            

            className   : {
              checked  : 'checked',
              disabled : 'disabled',
              radio    : 'radio',
              readOnly : 'read-only'
            }
            

          		
          Class names used to determine element state
        

        

          silent
          False
          Silences all console output including error messages, regardless of other debug settings.
        

        

          debug
          false
          Debug output to console
        

        

          performance
          true
          Show console.table output with performance metrics
        

        

          verbose
          false
          Debug output includes all internal behaviors
        

        

          errors
          
            

            error   : {
              method   : 'The method you called is not defined.'
            }
            

          		
        

      
    

  






================================================
FILE: server/documents/modules/dimmer.html.eco
================================================
---
layout      : 'default'
css         : 'dim'
standalone  : true

element     : 'dimmer'
elementType : 'module'

title       : 'Dimmer'
description : "A dimmer hides distractions to focus attention on particular content"
type        : 'UI Module'

themes      : ['Default']
---




<%- @partial('header', { tabs: 'module' }) %>




  


    
Types


    

      
Dimmer

      
A simple dimmer displays no content

      

        // left button
        $('.segment').dimmer('show');
        // right button
        $('.segment').dimmer('hide');
      

      
A dimmer will automatically be created when a dimming behavior is triggered on an element.
      

      

        

          Overlayable Section
        

        

          
          
          
        

        
      

      

        

          
          

            Overlayable Section
          

          

            
            
            
          

          

        

      

      

        

        

      

    


    

      
Content Dimmer

      
A dimmer can display content

      
Since 
2.3
 dimmers with content now only need a single wrapping content container.

      

        

          Overlayable Section
        

        

          
          
          
        

        
        

          

            

              
              Dimmed Message!
            

          

        

      

      

        

        

      

    


    

      
Page Dimmer

      
A dimmer can be formatted to be fixed to the page

      

        

          

            Hello
          

        

      

      

        Show
      

    



    
States


    

      
Active

      
An active dimmer will dim its parent container

      

        

        
        
      

    


    

      
Disabled

      
A disabled dimmer cannot be activated

      

        

        
        
      

    


    
Variations


    
Dimmable

    

      

        Blurring
        New in 2.0
      

      
A dimmable element can blur its contents

      

        

        
        
      

      

        

        

      

    

    

      

        

        
        
      

      

        

        

      

    


    
Alignment

    

      

        Vertical Alignment
        New in 2.3
      

      
A dimmer can have its content top or bottom aligned.

      

        

          

            
Title

            
Add

            
View

          

        

        
        
      

      

        

        

      

    

    

      

        

          

            
Title

            
Add

            
View

          

        

        
        
      

      

        

        

      

    


    
Dimmer

    

      
Simple Dimmer

      
A dimmer can be controlled without Javascript

      
Having any parent element receive the class ui dimmable dimmed will trigger the dimmer to display.

      

        

        
        
      

    


    

      
Inverted Dimmer

      
A dimmer can be formatted to have its colors inverted

      

        

        
        
      

      

        

        

      

    

  

  


    
Examples


    

      
Dimmer Events

      
A dimmer can trigger a visibility change on an event

      

      $('.event.example .image')
        .dimmer({
          on: 'hover'
        })
      ;
      

      

        

          

            
Title

            
Add

            
View

          

        

        
      

      

        

          

            
Add

            
View

          

        

        
      

    


    

      
Loaders inside Dimmers

      
Any loader inside a dimmer will automatically use an appropriate color to match

      

        

          
Loading

        

        
        
      

      

        

        

      

    


  


  


    
Usage


    

      
Display

      
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.

      

      // these two are the same
      $('.ui.dimmable')
        .dimmer('show')
      ;
      $('.ui.dimmable .dimmer')
        .dimmer('show')
      ;
      

    


    

      
Creating Dimmers

      
If a dimmer does not exist inside the element it will be created on first use.

      

        $('h4')
          .dimmer('toggle')
        ;
      

    


    

      
Showing a Specific Dimmer

      
If a dimmer is already inside an element, you can call behavior on the dimmable section or the dimmer itself.

      

        // If a dimmer exists on a page, you can make it appear by calling it directly
        $('.page.dimmer:first')
          .dimmer('toggle')
        ;
      

    


    
Behavior


    
All the following behaviors can be called using the syntax:


    

      Behaviors must be called on the same content which you originally initialize the dimmer, whether it is the dimmable context, or the ui dimmer
    


    

    $('.your.element')
      .dimmer('behavior name', argumentOne, argumentTwo)
    ;
    


    

      
        
Behavior
        Description
      

      
        

          add content (element)
          Detaches a given element from DOM and reattaches element inside dimmer
        

        

          show
          Shows dimmer
        

        

          hide
          Hides dimmer
        

        

          toggle
          Toggles current dimmer visibility
        

        

          set opacity(opacity)
          Changes dimmer opacity
        

        

          create
          Creates a new dimmer in dimmable context
        

        

          get duration
          Returns current duration for show or hide event depending on current visibility
        

        

          get dimmer
          Returns DOM element for dimmer
        

        

          has dimmer
          Returns whether current dimmable has a dimmer
        

        

          is active
          Whether section's dimmer is active
        

        

          is animating
          Whether dimmer is animating
        

        

          is dimmer
          Whether current element is a dimmer
        

        

          is dimmable
          Whether current element is a dimmable section
        

        

          is disabled
          Whether dimmer is disabled
        

        

          is enabled
          Whether dimmer is not disabled
        

        

          is page
          Whether dimmable section is body
        

        

          is page dimmer
          Whether dimmer is a page dimmer
        

        

          set active
          Sets page dimmer to active
        

        

          set dimmable
          Sets an element as a dimmable section
        

        

          set dimmed
          Sets a dimmable section as dimmed
        

        

          set page dimmer
          Sets current dimmer as a page dimmer
        

        

          set disabled
          Sets a dimmer as disabled
        

      
    


  


   

    

      Dimmer
    


    

      Behavior
    

    

      
        

        Default
        Description
      

      
        

          useFlex
          true
          Whether dimmers should use flex or legacy positioning
        

        

          variation
          false
          Specify a variation to add when generating dimmer, like inverted
        

        

          dimmerName
          false
          If initializing a dimmer on a dimmable context, you can use dimmerName to distinguish between multiple dimmers in that context.
        

        

          closable
          auto
          Whether clicking on the dimmer should hide the dimmer (Defaults to auto, closable only when settings.on is not hover
        

        

          on
          false
          Can be set to hover or click to show/hide dimmer on dimmable event
        

        

          useCSS
          true
          Whether to dim dimmers using CSS transitions.
        

        

          duration
          
            

            duration    : {
              show : 500,
              hide : 500
            }
            

          		
          Animation duration of dimming. If an integer is used, that value will apply to both show and hide animations.
        

        

          transition
          
            Fade
          
          Named transition to use when animating menu in and out. Fade and slide down are available without including ui transitions
        

      
    


    

      Callbacks
    


    

      
        

        Context
        Description
      

      
        

          onShow
          dimmable
          Callback on element show
        

        

          onHide
          dimmable
          Callback on element hide
        

        

          onChange
          dimmable
          Callback on element show or hide
        

      
    


    

      Module
    


    
These settings are native to all modules, and define how the component ties content to DOM attributes, and debugging settings for the module.


    

      
        

        Default
        Description
      


      
        

          namespace
          dimmer
          Event namespace. Makes sure module teardown does not effect other events attached to an element.
        

        

          selector
          
            

            selector: {
              dimmable : '.dimmable',
              dimmer   : '.ui.dimmer',
              content  : '.ui.dimmer > .content, .ui.dimmer > .content > .center'
            }
            

          		
          Object containing selectors used by module.
        

        

          template
          
            

            template : {
              dimmer: function() {
               return $('
').attr('class', 'ui dimmer');
              }
            }
            

          

          Templates used to generate dimmer content
        

        

          className
          
            

            className : {
              active     : 'active',
              dimmable   : 'dimmable',
              dimmed     : 'dimmed',
              disabled   : 'disabled',
              pageDimmer : 'page',
              hide       : 'hide',
              show       : 'show',
              transition : 'transition'
            }
            

          		
          Class names used to attach style to state
        

        

          name
          Dimmer
          Name used in debug logs
        

        

          silent
          False
          Silences all console output including error messages, regardless of other debug settings.
        

        

          debug
          False
          Provides standard debug output to console
        

        

          performance
          True
          Provides standard debug output to console
        

        

          verbose
          True
          Provides ancillary debug output to console
        

        

          errors
          
            

            error   : {
              method   : 'The method you called is not defined.'
            }
            

          		
          Error messages displayed to console
        

      
    

  






================================================
FILE: server/documents/modules/dropdown.html.eco
================================================
---
layout      : 'default'
css         : 'dropdown'
standalone  : true

title       : 'Dropdown'
description : 'A dropdown allows a user to select a value from a series of options'
type        : 'UI Module'

element     : 'dropdown'
elementType : 'module'

themes      : ['Default', 'GitHub', 'Material']
---





<%- @partial('header', { tabs: 'module' }) %>




  

    
Types


    

      
Dropdown

      
A dropdown

      

        
File

        
        

          
New

          

            ctrl + o
            Open...
          

          

            ctrl + s
            Save as...
          

          

            ctrl + r
            Rename
          

          
Make a copy

          

            
            Move to folder
          

          

            
            Move to trash
          

          

          
Download As...

          

            
            Publish To Web
            

              
Google Docs

              
Google Drive

              
Dropbox

              
Adobe Creative Cloud

              
Private FTP

              
Another Service...

            

          

          
E-mail Collaborators

        

      

    


    

      
Selection

      
A dropdown can be used to select between choices in a form

      

        Selection dropdowns can be initialized directly on a select or with the matching HTML and a hidden input.
      

      

        
        
        
Gender

        

          
Male

          
Female

        

      

    

    

      
    

    

      

        
        
        
Select Friend

        

          

            
            Jenny Hess
          

          

            
            Elliot Fu
          

          

            
            Stevie Feliciano
          

          

            
            Christian
          

          

            
            Matt
          

          

            
            Justen Kitsune
          

        

      

    


    

      
Search Selection

      
A selection dropdown can allow a user to search through a large list of choices.

      

        
        
        
Select Country

        <%- @partial('examples/single/flag-menu') %>
      

    

    

      
    

    

      
Multiple Selection

      
A selection dropdown can allow multiple selections

      
    

    

      
Multiple Search Selection

      
A selection dropdown can allow multiple search selections

      
    

    

      

        Dropdowns can support content that may not be allowed inside option tags when converting select elements. For more complex content like flags or icons you can use full dropdown markup
      

      

        
        
        
Select Country

        <%- @partial('examples/single/flag-menu') %>

      

    



    

      
Search Dropdown

      
A dropdown can be searchable

      

        
        Select Language
        

          
Arabic

          
Chinese

          
Danish

          
Dutch

          
English

          
French

          
German

          
Greek

          
Hungarian

          
Italian

          
Japanese

          
Korean

          
Lithuanian

          
Persian

          
Polish

          
Portuguese

          
Russian

          
Spanish

          
Swedish

          
Turkish

          
Vietnamese

        

      

    


    

      
Search In-Menu

      
A dropdown can include a search prompt inside its menu

      

        
        Filter Posts
        

          

            
            
          

          

          

            
            Tag Label
          

          

            

              

              Important
            

            

              

              Announcement
            

            

              

              Cannot Fix
            

            

              

              News
            

            

              

              Enhancement
            

            

              

              Change Declined
            

            

              

              Off Topic
            

            

              

              Interesting
            

            

              

              Discussion
            

          

        

      

    


    

      

        
        
        Filter Posts
        

          

            
            
          

          

          

            
            Tag Label
          

          

            

              

              Important
            

            

              

              Announcement
            

            

              

              Cannot Fix
            

            

              

              News
            

            

              

              Enhancement
            

            

              

              Off Topic
            

            

              

              Interesting
            

            

              

              Discussion
            

          

        

      

    


    

      
Inline

      
A dropdown can be formatted to appear inline in other content

      
        Show me posts by
        

          

            
            Jenny Hess
          

          
          

            

              
              Jenny Hess
            

            

              
              Elliot Fu
            

            

              
              Stevie Feliciano
            

            

              
              Christian
            

            

              
              Matt
            

            

              
              Justen Kitsune
            

          

        

      
    


    

      

        
        

          Trending repos
          

            
today

            
            

              
Adjust time span

              
Today

              
This Week

              
This Month

            

          

        

      

    


    

    
Pointing

    
A dropdown can be formatted so that its menu is pointing

      

        
          Home
        
        

          Shopping
          
          

            
Categories

            

              
              Clothing
              

                
Mens

                
Shirts

                
Pants

                
Jeans

                
Shoes

                

                
Womens

                
Dresses

                
Shoes

                
Bags

              

            

            
Home Goods

            
Bedroom

            

            
Order

            
Status

            
Cancellations

          

        

        
          Forums
        
        
          Contact Us
        
      

    

    

      

        
          Home
        
        

          
          Messages
          

            
Inbox

            
Starred

            
Sent Mail

            
Drafts (143)

            

            
Spam (1009)

            
Trash

          

        

        
          Browse
        
        
          Help
        
      

    

    

      

        
        

          
Display Density

          
Comfortable

          
Cozy

          
Compact

          

          
Settings

          

            
            Upload Settings
            

              

                
                Convert Uploaded Files to PDF
              

              

                
                Digitize Text from Uploaded Files
              

            

          

          
Manage Apps

          
Keyboard Shortcuts

          
Help

        

      

    

    

      
Bottom pointing dropdown menus have sub-menus open upwards

      

        
        

          

            
            New
            

              
Document

              
Image

            

          

          
Save As...

          
Edit

        

      

      

        
        

          

            
            New
            

              
Document

              
Image

            

          

          
Save As...

          
Edit

        

      

    

    

      

        
        Filter Posts
        

          

            
            
          

          

          

            
            Filter by tag
          

          

            

            Important
          

          

            

            Announcement
          

          

            

            Discussion
          

          

          

            
            Filter by date
          

          

            
            This Week
          

          

            
            This Month
          

          

            
            This Year
          

        

      

    

    

      

        
        

          

            
            
          

          

          

            
            Filter by tag
          

          

            

            Important
          

          

            

            Announcement
          

          

            

            Discussion
          

        

      

      

        
        

          

            
            
          

          

            
            Tag Label
          

          

            

            Important
          

          

            

            Announcement
          

          

            

            Discussion
          

        

      

    


    

      
Floating

      
A dropdown menu can appear to be floating below an element.

      

        
Save

        

          
          

            
 Edit Post

            
 Remove Post

            
 Hide Post

          

        

      

    


    

      
Simple

      
A simple dropdown can open without Javascript

      

        

          Dropdown
          
          

            
Choice 1

            
Choice 2

            
Choice 3

          

        

      

    


    
Content


    

      
Header

      
A dropdown menu can contain a header

      

        
        Filter
        

          

            
            Filter by tag
          

          

            Important
          

          

            Announcement
          

          

            Discussion
          

        

      

    

    

      
Divider

      
A dropdown menu can contain dividers to separate related content

      

        
        Filter
        

          

            
            Filter by tag
          

          

          

            Important
          

          

            Announcement
          

          

            Discussion
          

        

      

    


    

      
Icon

      
A dropdown menu can contain an icon.

      

        
        Filter
        

          

            
            Filter by tag
          

          

          

            
            Important
          

          

            
            Announcement
          

          

            
            Discussion
          

        

      

    


    

      
Description

      
A dropdown menu can contain a description.

      

        Using a description may require setting a minimum width on menu to prevent content overlap
      

      

        
        Filter Tags
        

          

            Filter by tag
          

          

          

            2 new
            Important
          

          

            10 new
            Hopper
          

          

            5 new
            Discussion
          

        

      

    


    

      
Label

      
A dropdown menu can contain a label.

      

        
        Filter
        

          

            Search Issues
          

          

            
            
          

          

            
            Filter by tag
          

          

            

            Important
          

          

            

            Announcement
          

          

            

            Discussion
          

        

      

    


    

      
Message

      
A dropdown menu can contain a message.

      

        
        Login
        

          

            
Error

            
You must log-in to see all categories

          

        

      

    


    

      
Floated Content

      
A dropdown menu can contain floated content.

      
Floated content may stack to two lines without manually setting a width when or using a fluid dropdown
      

      

        
        Select Type
        

          

            
            Important
          

          

            
            Announcement
          

          

            
            Discussion
          

        

      

    



    

      
Input

      
A dropdown menu can contain an input

      

        
        Filter
        

          

            Search Issues
          

          

            
            
          

          

            
            Filter by tag
          

          

          

            

            Important
          

          

            

            Announcement
          

          

            

            Discussion
          

        

      

    


    

      
Image

      
A dropdown menu can contain an image

      

        
        Add User
        

          

            People You Might Know
          

          

            
            Jenny Hess
          

          

            
            Elliot Fu
          

          

            
            Stevie Feliciano
          

          

            Your Friends' Friends
          

          

            
            Christian
          

          

            
            Matt
          

          

            
            Justen Kitsune
          

        

      

    


    
States


    

      
Loading

      
A dropdown can show that it is currently loading data

      

        Dropdown 
        

          
Choice 1

          
Choice 2

          
Choice 3

        

      

    

    

      

        
        
        
        
Search...

        

          
Choice 1

          
Choice 2

          
Choice 3

        

      

    

    

      

        Dropdown 
        

          
Choice 1

          
Choice 2

          
Choice 3

        

      

    

    

      
Error

      
An errored dropdown can alert a user to a problem

      

        Dropdown 
        

          
Choice 1

          
Choice 2

          
Choice 3

        

      

    

    

      

        Dropdown 
        

          
Choice 1

          
Choice 2

          
Choice 3

        

      

    


    

      
Active

      
An active dropdown has its menu open

      
An active state will only automatically open a ui simple dropdown. To activate a normal dropdown use $('.ui.dropdown').dropdown('show');

      

        Dropdown 
        

          
Choice 1

          
Choice 2

        

      

    


    

      
Disabled

      
A disabled dropdown menu or item does not allow user interaction

      

        Dropdown 
        

          
Choice 1

          
Choice 2

          
Choice 3

        

      

    

    

      

        Disabled Item 
        

          
Choice 1

          
Disabled

          
Choice 3

        

      

    



    
Variations


    

      
Scrolling

      
A dropdown can have its menu scroll

      

        Scrolling dropdowns are incompatible with the usage of sub menu.
      

      

        
        
Select choice

        
        

          
Choice 1

          
Choice 2

          
Choice 3

          
Choice 4

          
Choice 5

          
Choice 6

          
Choice 7

          
Choice 8

          
Choice 9

          
Choice 10

          
Choice 11

          
Choice 12

          
Choice 13

          
Choice 14

          
Choice 15

        

      

    

    

      

        
        Filter Posts
        

          

            
            
          

          

          

            
            Tag Label
          

          

            

              

              Important
            

            

              

              Announcement
            

            

              

              Cannot Fix
            

            

              

              News
            

            

              

              Enhancement
            

            

              

              Change Declined
            

            

              

              Off Topic
            

            

              

              Interesting
            

            

              

              Discussion
            

          

        

      


    


    

      
Compact

      
A compact dropdown has no minimum width

      

        
        
Compact

        

          
A

          
B

          
C

        

      

    


    

      
Fluid

      
A dropdown can take the full width of its parent

      

        Link 1
        Link 2
        
All Sections

        

          

            
More

            
            

              
Choice 1

              
Choice 2

              
Choice 3

            

          

        

      

    


    

      
Menu Direction

      
A dropdown menu or sub-menu can specify the direction it should open

      

        Specifying left on a menu will make all child menus open in the same direction implicitly. To have a dropdown icon appear on the left side on a child menu, you will need to use left dropdown example
      

      

        
        Menu
        

          

            
            Left
            

              
1

              
2

              
3

            

          

          

            
            Right
            

              
1

              
2

              
3

            

          

        

      

    


    

      

        
        Menu
        

          

            
            Left
            

              

                
                Still Left
                

                  
1

                  
2

                  
3

                

              

              
2

              
3

            

          

          

            
            Left 2
            

              
1

              
2

              
3

            

          

        

      

    


  



  



    
Selection Dropdowns


    

      

        Clearable
        

          New in 2.4.0
        

      

      
Using the clearable setting will let users remove their selection from a dropdown.


      

        
        
Select Country

        
        <%- @partial('examples/single/flag-menu') %>
      

      

      

        Show me
        

          
          
css

          
          

            <%- @partial('examples/single/preset-menu') %>
          

        

        classes currently available.
      


      

        $('.clearable.example .ui.selection.dropdown')
          .dropdown({
            clearable: true
          })
        ;
        $('.clearable.example .ui.inline.dropdown')
          .dropdown({
            clearable: true,
            placeholder: 'any'
          })
        ;
      

    


    

      
Maximum Selections

      
Using maxSelections lets you force a maximum number of selections. You can also use form validation rules to specify minimum and maximum validation settings for multi-selects inside forms.


      
Selection

      

      
Search Selection

      

        
        
        
Select Country

        <%- @partial('examples/single/flag-menu') %>
      


      
Without Labels

      

        
        
        
Select Country

        <%- @partial('examples/single/flag-menu') %>
      


      

        $('.max.example .ui.normal.dropdown')
          .dropdown({
            maxSelections: 3
          })
        ;
        $('.max.example .ui.special.dropdown')
          .dropdown({
            useLabels: false,
            maxSelections: 3
          })
        ;
      

    


    

      
Tagging and User Additions

      
Using allowAdditions: true gives users the ability to add their own options. This can work with either single or multiple search select dropdowns


      

        Although all dropdowns support select initialization, custom choices will not be saved on page refresh unless you use a hidden input. This is because option created dynamically are not preserved on page refresh.
      


      
Single

      

      
Multiple

      

        
        
        
Skills

        

          <%- @partial('examples/single/preset-menu') %>
        

      


      

        $('.tag.example .ui.dropdown')
          .dropdown({
            allowAdditions: true
          })
        ;
      

    


    

      
Text Labels

      
Sometimes multiselect include options which are long and would appear awkwardly as labels. Setting useLabels: false will display a selected count, and allow reselection directly from the menu.

      

        You can customize any of the messages displayed by adjusting templates in settings.message
      

      

      
or


      

        
        
        
Select Country

        <%- @partial('examples/single/flag-menu') %>
      


      

        $('.no.label.example .ui.dropdown')
          .dropdown({
            useLabels: false
          })
        ;
      

    


    

      
Clearing Dropdown

      
You can reset a form field to its placeholder value

      

        
        
        
Default

        

            
Value

            
Another Value

        

       

      

        
        
Select a value

        
        

            
Value

            
Another Value

        

       


      

        Clear
      

      

        $('.clear.example .button')
          .on('click', function() {
            $('.clear.example .ui.dropdown')
              .dropdown('clear')
            ;
          })
        ;
      

    


    

      
Restoring Defaults

      
You can restore a dropdown to its value set on page load using the restore defaults behavior. If no default text is set on load, restore defaults will restore placeholder text

      

        
        
        
Default

        

            
Value

            
Another Value

            
Default Value

            
Second Default

        

      

      

      

        
        
        
Select a value

        

            
Value

            
Another Value

        

       

      

      

        
        
        
Default Value

        

            
Value

            
Another Value

            
Default Value

        

       

      

      

          Restore All Dropdowns
      

      

        $('.restore.example .button')
          .on('click', function() {
            $('.restore.example .ui.dropdown')
              .dropdown('restore defaults')
            ;
          })
        ;
      

    



    

      
Upward

      
A dropdown menu will automatically change which direction it opens if it can't fit on screen. If you need a dropdown to open in a specific direction you can specify it when initializing a dropdown.

      

        $('.upward.example .dropdown')
          .dropdown({
            direction: 'upward'
          })
        ;
      

      

        
      

      

        

          
          

            

              
              New
              

                
Document

                
Image

              

            

            
Save As...

            
Edit

          

        

      

    



    
Remote Content


    

      
Match Search Query on Server

      
Search selection dropdowns can specify API settings for retrieving values remotely, this can use either a named API action or url.

      
Using API can allow users to select choices from large datasets that would be too large to include directly in page markups.

      
If your backend is not designed to return the correct markup you can use API's onResponse callback to adjust the format of an API response after it is received from the server.

      
Requests for the same API endpoints will automatically cached locally, to avoid server roundtrips. You can disable this by adjusting the cache API setting.

      
When a user refreshes the page, selection labels are automatically recreated by using sessionStorage to store the corresponding names for selected values. You can disable this feature by setting saveRemoteData: false



      

        

          

            
            

              
              
              
              
Select one...

            

          

          

            
            

              
              
              
              
Select...

            

          

        

      


      

        $('.remote.filter.example .ui.dropdown')
          .dropdown({
            apiSettings: {
              // this url parses query server side and returns filtered results
              url: '//api.semantic-ui.com/tags/{query}'
            },
          })
        ;
      

      

      // Expected server response
      {
          "success": true,
          "results": [
            {
              // name displayed in dropdown
              "name"  : "Choice 1",

              // selected value
              "value" : "value1",

              // name displayed after selection (optional)
              "text"  : "Choice 1"

              // whether field should be displayed as disabled (optional)
              "disabled"  : false

            },
            {
              "name"  : "Choice 2",
              "value" : "value2",
              "text"  : "Choice 2"
            },
            {
              "name"  : "Choice 3",
              "value" : "value3",
              "text"  : "Choice 3"
            },
            {
              "name"  : "Choice 4",
              "value" : "value4",
              "text"  : "Choice 4"
            },
            {
              "name"  : "Choice 5",
              "value" : "value5",
              "text"  : "Choice 5"
            }
          ]
      }
      

    


    

      
Return All Choices Remotely

      
When possible choicesets are large, ideally API results should only return values matching the passed query term to reduce transmissions over the wire. However if there are only a few hundred or less choices, you may consider returning the full set of results from an API endpoint and filtering them against the query clientside using the setting filterRemoteData: true.

      

        

          

            
            

              
              
              
Select one...

            

          

          

            
            

              
              
              
              
Select one...

            

          

          

            
            

              
              
              
              
Select...

            

          

        

      


      

        $('.remote.choices.example .ui.dropdown')
          .dropdown({
            apiSettings: {
              // this url just returns a list of tags (with API response expected above)
              url: '//api.semantic-ui.com/tags/'
            },
            filterRemoteData: true
          })
        ;
      

    


    
Menus


    

      
Changing Transitions

      
A dropdown can specify a different transition.


      

      $('.dropdown')
        .dropdown({
          // you can use any ui transition
          transition: 'drop'
        })
      ;
      


      

        
Toggle

        

          
          

            
Drop

            
Horizontal Flip

            
Fade Up

            
Scale

          

        

      

    


    

      
Multiple Levels

      
A dropdown menu can also contain sub menus inside of it

      My favorite animal breed is
      

        
        
Shiba Inu

        
        

          

            
            Dogs
            

              
Shiba Inu

              

                
                Poodle
                

                  
Toy

                  
Standard

                

              

              
Labrador

            

          

          

            
            Cats
            

              
Aegean

              
Balinese

              
Persian

            

          

        

      

    


    

      
Category Selection

      
Using a multi-level menu with allowCategorySelection: true will allow items with sub-menus to be selected.

      

        $('.category.example .ui.dropdown')
          .dropdown({
            allowCategorySelection: true
          })
        ;
      

      

        Choose Category
        
        

          

            Category 1
          

          

            
            Category 2
            

              
Item 2A

              
Item 2B

              
Item 2C

            

          

          

            
            Category 3
            

              
Item 3A

              
Item 3B

              
Item 3C

            

          

        

      

    



    

      
Preserving User Selections

      
This example uses a preset text value to preserve the menu item on page navigation

      

        
        

          
A dropdown will automatically select on page load any menu item that includes the current 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.

        

      



      Current action: 

        
Hide

        
        

          
Edit

          
Remove

          
Hide

        

      


    



    
Adjusting Actions


    

      
Combo Dropdowns

      

        
A button can be formatted with a dropdown.

        
Using the combo action will change the preceding element to the selected value.

      

      

      $('.combo.dropdown')
        .dropdown({
          action: 'combo'
        })
      ;
      


      

        
Save

        

          
          

            
 Edit

            
 Delete

            
 Hide

          

        

      

    


    

      
Link Dropdowns

      

        
Dropdowns support different default actions that can occur when an item is selected. For example, you can set your dropdown not to change its text, or select a value from its menu.

        

        $('.link.example .dropdown')
          .dropdown({
            action: 'hide'
          })
        ;
        

      

      
      

        
Go to

        
        

           Home
           Browse
           Search
        

      

    


    
Coupling


    

    
Button Group

      
A button group can be formatted to show additional content as a dropdown

      

        

          
          

            
Edit User

            
Remove User

            
Make Invisible

          

        

        

          
          

            
Edit Group

            
Remove Group

            
Hide from Group

          

        

        

          
          

            
 Edit

            
 Remove

            
 Hide

          

        

      

    


    

      
Menu

      
A menu element can contain a dropdown

        

          
            Home
          
          
            Messages
            
            

              

                
                Categories
                

                  
Unread

                  
Promotions

                  
Updates

                

              

              
Archive

            

          
          
            Browse
          
        

    


    

      
Form

      
A dropdown can be formatted to allow selection inside a form

      

        

          

            
            
          

          

            
            
          

        

        

          
          

            
            
Select Gender

            
            

              
Male

              
Female

            

          

        

      

    


  


  

    
Initializing


    

      
Initializing Existing HTML

      
Initializing a dropdown with pre-existing HTML allows for greater performance than initializing a dropdown directly on a select element.

      
Any select element initialized as dropdown will also be hidden until Javascript can create HTML, this is to avoid the flash of unstyled content, and the change in element height adjusting page flow.

      

        

          
          
          
Gender

          

            
Male

            
Female

          

        

      

      

        $('.ui.dropdown')
          .dropdown()
        ;
      

    

    

      

        Initializing with Javascript Only
        
New in 2.2.12

      

      
You can specify a list of values in the settings object to avoid having to stub the html yourself.

      
Adding selected: true to an item will have that item selected by default.

      
You can also use the placeholder setting to specify placeholder text before an option is selected.

      

        

          

          
        

      

      

        $('.ui.dropdown')
          .dropdown({
            values: [
              {
                name: 'Male',
                value: 'male'
              },
              {
                name     : 'Female',
                value    : 'female',
                selected : true
              }
            ]
          })
        ;
      

    

    

      
Specifying Different Text & Hidden Input Values

      
You can specify different values for selected text, and selected form values by adding data-text or data-value to any item. This is useful if you include additional data, like icons, that you want to appear only inside the dropdown menu.

      
If you don't specify a value (either in the `select` or via a `data-value` property, then the input value will be set to the lowercased text in the element.


      

        

          
          
          
Gender

          

            

              
              Male
            

            

              
              Female
            

          

        

      

      

        
        
        
Gender

        

          

            
            Male
          

          

            
            Female
          

        

      

    

    

      
Converting Form Elements

      
For convenience, select elements can automatically be converted to selection dropdown. A select options with blank string values will be converted to prompt text.

      

        
      

      

        $('#select')
          .dropdown()
        ;
      

      
    

    

      
Hybrid Form Initialization

      
As a third option, you can include a wrapper around your select so that it will appear correctly on page load, but will then populate the hidden menu when Javascript fires. In this case, the select element does not receive the ui dropdown class.

      

        
      

      

        $('#hybrid select')
          .dropdown({
            on: 'hover'
          })
        ;
      

      
    


    

      
Searching Dropdowns

      
Using a search selection dropdown will allow you users to search more easily through large lists. This can also be converted directly from a form select element.

      

        $('#search-select')
          .dropdown()
        ;
      

      
      
      

        
      

    

    

      
Multiple Selections

      
You can allow multiple selections by the multiple property on a select element, or by including the class multiple on a dropdown.

      
When pre-existing HTML with a hidden input is used, values will be passed through a single value separated by a delimiter. The default is "," but this can be changed by adjusting the delimiter setting.

      

        $('#multi-select')
          .dropdown()
        ;
      


      

      

      
Dropdown

      

        

          
          
          
          
States

          

            
Alabama

            
Alaska

            
Arizona

            
Arkansas

            
California

            
            
Ohio

            
Oklahoma

            
Oregon

            
Pennsylvania

            
Rhode Island

            
South Carolina

            
South Dakota

            
Tennessee

            
Texas

            
Utah

            
Vermont

            
Virginia

            
Washington

            
West Virginia

            
Wisconsin

            
Wyoming

          

        

      


      
Select

      

        
      

    



    

      
Specifying Select Action

      
Dropdowns have multiple built-in actions that can occur on item selection. You can specify a built-in action by passing its name to settings.action or pass a custom function that performs an action.


      

        
          

            Action
            Description
          

        
        
          

            activate (Default)
            Selects current item, adjusts dropdown value and changes dropdown text
          

          

            combo
            Same as activate, but updates previous elements text instead of self
          

          

            select
            Selects current item from menu and stores value, but does not change dropdown text
          

          

            hide
            Hides the dropdown menu and stores value, but does not change text
          

          

            function(text, value){}
            Custom action
          

          

            nothing
            Does nothing
          

        
      


      
To specify a different built in action, simply specify the name.

      

        $('.dropdown')
          .dropdown({
            action: 'combo'
          })
        ;
      

      
To trigger only your custom action and no default action, specify your own function for settings.action.

      

        $('.dropdown')
          .dropdown({
            action: function(text, value) {
              // nothing built in occurs
            }
          })
        ;
      


      
If you want to have both a built in action occur, and your own custom action use onChange in combination with action


      

        $('.dropdown')
          .dropdown({
            action: 'hide',
            onChange: function(value, text, $selectedItem) {
              // custom action
            }
          })
        ;
      



    




    
Behavior


    
All the following behaviors can be called using the syntax:

    

    $('.your.element')
      .dropdown('behavior name', argumentOne, argumentTwo)
    ;
    


    

      
        

          Behavior
          Description
        

      
      
        

          setup menu(values)
          Recreates dropdown menu from passed values. values should be an object with the following structure: { values: [ {value, text, name} ] }.
        

          
change values (values)
          Changes dropdown to use new values
        

        

          refresh
          Refreshes all cached selectors and data
        

        

          toggle
          Toggles current visibility of dropdown
        

        

          show
          Shows dropdown
        

        

          hide
          Hides dropdown
        

        

          clear
          Clears dropdown of selection
        

        

          hide others
          Hides all other dropdowns that is not current dropdown
        

        

          restore defaults
          Restores dropdown text and value to its value on page load
        

        

          restore default text
          Restores dropdown text to its value on page load
        

        

          restore placeholder text
          Restores dropdown text to its prompt, placeholder text
        

        

          restore default value
          Restores dropdown value to its value on page load
        

        

          save defaults
          Saves current text and value as new defaults (for use with restore)
        

        

          set selected(value)
          Sets value as selected
        

        

          remove selected(value)
          Remove value from selected
        

        

          set selected([value1, value2])
          Adds a group of values as selected
        

        

          set exactly([value1, value2])
          Sets selected values to exactly specified values, removing current selection
        

        

          set text(text)
          Sets dropdown text to a value
        

        

          set value(value)
          Sets dropdown input to value (does not update display state)
        

        

          get text
          Returns current dropdown text
        

        

          get value
          Returns current dropdown input value
        

        

          get item(value)
          Returns DOM element that matches a given input value
        

        

          bind touch events
          Adds touch events to element
        

        

          bind mouse events
          Adds mouse events to element
        

        

          bind intent
          Binds a click to document to determine if you click away from a dropdown
        

        

          unbind intent
          Unbinds document intent click
        

        

        determine intent
          Returns whether event occurred inside dropdown
        

        

          determine select action(text, value)
          Triggers preset item selection action based on settings passing text/value
        

        

          set active
          Sets dropdown to active state
        

          set visible
          Sets dropdown to visible state
        

        

          remove active
          Removes dropdown active state
        

          remove visible
          Removes dropdown visible state
        

        

          is selection
          Returns whether dropdown is a selection dropdown
        

        

          is animated
          Returns whether dropdown is animated
        

        

          is visible
          Returns whether dropdown is visible
        

        

          is hidden
          Returns whether dropdown is hidden
        

        

          get default text
          Returns dropdown value as set on page load
        

        

          get placeholder text
          Returns placeholder text
        

      
    

  


  


    

      Dropdown
    


    


    

      Frequently Used Settings
    

    

      
        

        Setting
        Default
        Description
        

      
      
        

          values
          false
          When specified allows you to initialize dropdown with specific values. See usage guide for details.
        

        

          on
          click
          Event used to trigger dropdown (Hover, Click, Custom Event)
        

        

          clearable
          false
          Whether the dropdown value can be cleared by the user after being selected. 
        

        

          ignoreCase
          false
New in 2.2.13

          Whether values with matching cases should be treated as identical when adding them to a dropdown.
        

        

          allowReselection
          false
          When set to true will fire onChange even when the value a user select matches the currently selected value.
        

        

          allowAdditions
          false
          Whether search selection should allow users to add their own selections, works for single or multiselect.
        

        

          hideAdditions
          true
          If disabled user additions will appear in the dropdown's menu using a specially formatted selection item formatted by templates.addition.
        

        

          action
          auto
          
          
Sets a default action to occur. (See usage guide)

          

            

              
activate (default)

              
Updates dropdown text with selected value, sets element state to active, updates any hidden fields if available

            

            

              
select

              
activates menu and updates input fields, but does not change current text

            

            

              
combo

              
changes text of previous sibling element

            

            

              
nothing

              
no action occurs

            

            

              
hide

              
Dropdown menu is hidden

            

            

              
function(text, value, element){}

              
custom function is executed with values specified in callback

            

          

        

        

          minCharacters
          1
          The minimum characters for a search to begin showing results
        

        

          match
          both
          When using search selection specifies how to match values.
          

            

              
both

              
Matches against text and value

            

            

              
value

              
matches against value only

            

            

              
text

              
matches against text only

            

          

        

        

          selectOnKeydown
          true
          Whether dropdown should select new option when using keyboard shortcuts. Setting to false will require enter or left click to confirm a choice.
        

        

          forceSelection
          true
          Whether search selection will force currently selected choice when element is blurred.
        

        

          allowCategorySelection
          false
          Whether menu items with sub-menus (categories) should be selectable
        

        

          placeholder
          auto
          
            

              

                
auto

                
Convert option with "" (blank string) value to placeholder text

              

              

                
value

                
Sets string value to placeholder text, leaves "" value

              

              

                
false

                
Leaves "" value as a selectable option

              

            

          		
        

      
    

    


    


    

      Remote Settings
    


    

      
        

        Setting
        Default
        Description
        

      
      
        

          apiSettings
          false
          Can be set to an object to specify API settings for retrieving remote selection menu content from an API endpoint
        

        

          fields
          
            

            fields: {
              remoteValues : 'results', // grouping for api results
              values       : 'values', // grouping for all dropdown values
              name         : 'name',   // displayed dropdown text
              value        : 'value'   // actual dropdown value
            }
            

          		
          List mapping dropdown content to JSON Property when using API
        

        

          filterRemoteData
          false
          Whether results returned from API should be filtered by query before being displayed
        

        

          saveRemoteData
          true
          When enabled, will automatically store selected name/value pairs in sessionStorage to preserve user selection on page refresh. Disabling will clear remote dropdown values on refresh.
        

      
    

    


    


    

      Multiple Select Settings
    


    

      
        

        Setting
        Default
        Description
        

      
      
        

          useLabels
          
           true
          
          Whether multiselect should use labels. Must be set to true when allowAdditions is true
        

        

          maxSelections
          
           false
          
          When set to a number, sets the maximum number of selections
        

        

          glyphWidth
          
           1.0714
          
          Maximum glyph width, used to calculate search size. This is usually size of a "W" in your font in em
        

        

          label
          
            

            label: {
              transition : 'horizontal flip',
              duration   : 200,
              variation  : false
            }
            

          		
          Allows customization of multi-select labels
        

      
    

    


    

    

      Additional Settings
    

    

      
        

        Setting
        Default
        Description
        

      
      
        

          direction
          'auto'
          When set to auto determines direction based on whether dropdown can fit on screen. Set to upward or downward to always force a direction.
        

        

          keepOnScreen
          true
          Whether dropdown should try to keep itself on screen by checking whether menus display position in its context (Default context is page).
        

        

          context
          window
          Element context to use when checking whether can show when keepOnScreen: true
        

        

          fullTextSearch
          false
          Specifying to "true" will use a fuzzy full text search, setting to "exact" will force the exact search to be matched somewhere in the string, setting to "false" will only match start of string.
        

        

          preserveHTML
          true
          Whether HTML included in dropdown values should be preserved. (Allows icons to show up in selected value)
        

        

          sortSelect
          false
          Whether to sort values when creating a dropdown automatically from a select element.
        

        

          showOnFocus
          true
          Whether to show dropdown menu automatically on element focus.
        

        

          allowTab
          true
          Whether to allow the element to be navigable by keyboard, by automatically creating a tabindex
        

        

          transition
          
            auto (slide down / slide up)
          
          Named transition to use when animating menu in and out. Defaults to slide down or slide up depending on dropdown direction. Fade and slide down are available without including ui transitions
        

        

          duration
          
            200
          
          Duration of animation events
        

        

          keys
          
          

          keys : {
            backspace  : 8,
            delimiter  : 188, // comma
            deleteKey  : 46,
            enter      : 13,
            escape     : 27,
            pageUp     : 33,
            pageDown   : 34,
            leftArrow  : 37,
            upArrow    : 38,
            rightArrow : 39,
            downArrow  : 40
          }
          

          		
          
            The keycode used to represent keyboard shortcuts. To avoid issues with some foreign languages, you can pass false for comma delimiter's value
          
        

        

          delay
          
          

          delay : {
            hide   : 300,
            show   : 200,
            search : 50,
            touch  : 50
          }
          

          		
          Time in milliseconds to debounce show or hide behavior when on: hover is used, or when touch is used.
        

      
    


    


    

      Callbacks
    


    

      
        

          
          Context
          Description
        

      
      
        

          onChange(value, text, $choice)
          Dropdown
          Is called after a dropdown value changes. Receives the name and value of selection and the active menu element
        

        

          onAdd(addedValue, addedText, $addedChoice)
          Dropdown
          Is called after a dropdown selection is added using a multiple select dropdown, only receives the added value
        

        

          onRemove(removedValue, removedText, $removedChoice)
          Dropdown
          Is called after a dropdown selection is removed using a multiple select dropdown, only receives the removed value
        

        

          onLabelCreate(value, text)
          $label (jQDOM)
          Allows you to modify a label before it is added. Expects the jQ DOM element for a label to be returned.
        

        

          onLabelRemove(value)
          $label (jqDOM)
          Called when a label is remove, return false; will prevent the label from being removed.
        

        

          onLabelSelect($selectedLabels)
          Dropdown
          Is called after a label is selected by a user
        

        

          onNoResults(searchValue)
          Dropdown
          Is called after a dropdown is searched with no matching values
        

        

          onShow
          Dropdown
          Is called before a dropdown is shown. If false is returned, dropdown will not be shown.
        

        

          onHide
          Dropdown
          Is called before a dropdown is hidden. If false is returned, dropdown will not be hidden.
        

      
    


    

      Module Settings
    


    

      DOM Settings
      
DOM settings specify how this module should interface with the DOM

    

    

      
        

          
          Default
          Description
        

      
      
        

          namespace
          dropdown
          Event namespace. Makes sure module teardown does not effect other events attached to an element.
        

        

          message
          
            

              You can specify site wide messages by modifying $.fn.dropdown.settings.message
              that will apply on any dropdown if it appears in the page.
            

            

            message: {
              addResult     : 'Add {term}',
              count         : '{count} selected',
              maxSelections : 'Max {maxCount} selections',
              noResults     : 'No results found.'
            }
            

          		
        

        

          selector
          
            

            selector : {
              addition     : '.addition',
              dropdown     : '.ui.dropdown',
              icon         : '> .dropdown.icon',
              input        : '> input[type="hidden"], > select',
              item         : '.item',
              label        : '> .label',
              remove       : '> .label > .delete.icon',
              siblingLabel : '.label',
              menu         : '.menu',
              message      : '.message',
              menuIcon     : '.dropdown.icon',
              search       : 'input.search, .menu > .search > input',
              text         : '> .text:not(.icon)'
            }
            

          		
        

        

          regExp
          
            

            regExp : {
              escape   : /[-[\]{}()*+?.,\\^$|#\s]/g,
            }
            

          		
        

        

          metadata
          
            

            metadata : {
              defaultText     : 'defaultText',
              defaultValue    : 'defaultValue',
              placeholderText : 'placeholderText',
              text            : 'text',
              value           : 'value'
            }
            

          		
        

        

          className
          
            

            className : {
              active      : 'active',
              addition    : 'addition',
              animating   : 'animating',
              disabled    : 'disabled',
              dropdown    : 'ui dropdown',
              filtered    : 'filtered',
              hidden      : 'hidden transition',
              item        : 'item',
              label       : 'ui label',
              loading     : 'loading',
              menu        : 'menu',
              message     : 'message',
              multiple    : 'multiple',
              placeholder : 'default',
              search      : 'search',
              selected    : 'selected',
              selection   : 'selection',
              upward      : 'upward',
              visible     : 'visible'
            }
            

          		
        

        

          name
          Dropdown
          Name used in debug logs
        

        

          silent
          False
          Silences all console output including error messages, regardless of other debug settings.
        

        

          debug
          False
          Provides standard debug output to console
        

        

          performance
          True
          Provides performance stats in console, and suppresses other debug output.
        

        

          verbose
          True
          Provides ancillary debug output to console
        

        

          error
          
            

            error   : {
              action       : 'You called a dropdown action that was not defined',
              alreadySetup : 'Once a select has been initialized behaviors must be called on the created ui dropdown',
              labels       : 'Allowing user additions currently requires the use of labels.',
              method       : 'The method you called is not defined.',
              noTransition : 'This module requires ui transitions '
            }
            

          		
        

      
    


  






================================================
FILE: server/documents/modules/embed.html.eco
================================================
---
layout      : 'default'
css         : ''
standalone  : true

element     : 'Embed'
elementType : 'module'

title       : 'Embed'
description : 'An embed displays content from other websites like YouTube videos or Google Maps'
type        : 'UI Module'

---


<%- @partial('header',  { tabs: { overview: 'Overview', definition: 'Definition', usage: 'Usage', settings: 'Settings' } }) %>



  


    
When to Use


    

      
Responsive Aspect Ratio

      
Embeds use an instrinsic aspect ratio which allows them to resize responsively based on their expected aspect ratio and not by using a single specified width or height.

    

    

      
Only Load After Interaction

      
Including an iframe embed directly will automatically load all iframe contents on page load which can drastically reduce the responsiveness of a page.

      
Semantic's embed combats this by not  loading iframe content until a user has interacted with your embed's placeholder content.

      
To give you an idea of how much file size including an embed will add to your page load see the chart below

      
The following are download estimates taken from firebug and a single sample embed. Individual results may vary.

      

        
          
Network
          Embed Size
        

        
          

            
              Google Maps
            
            
              237kb
            
          

          

            
              YouTube
            
            
              380kb
            
          

          

            
              Vimeo
            
            
              81kb
            
          

        
      

    

  


  


    
Types


    

      
YouTube

      
An embed can be used to display YouTube Content


      

      


    


    

      
Vimeo

      
An embed can be used to display Vimeo content.


      

      


    


    

      
Custom Content

      
An embed can display any web content

      
Embeds use an intrinsic aspect ratios to embed content responsively. Content will preserve their intrinsic aspect ratio for all browser sizes responsively

      

      

    



    
Variations


    

      
Aspect Ratio

      
An embed can specify an alternative aspect ratio

      

      


    


  


  


    
Initializing


    

      
Specifying a URL

      
Specifying a url will automatically match to an embed source using the domain of the url.

      

        $('.url.example .ui.embed').embed();
      

      

        

      

    


    

      
Using Content IDs

      
Embed is designed to automatically generate urls from content ids. This way your site's backend can store meaningful content metadata and not worry about generating urls.

      

        $('.content.example .ui.embed').embed();
      

      

        

      

    


    

      
Specifying Metadata

      
Other settings like icons and placeholder images can be specified in metadata overriding presets for a site.

      

        $('.metadata.example .ui.embed').embed();
      

      

        

      

    


    

      
Specifying Programmatically

      
You can also specify embed settings at run-time in the settings object.

      

        $('.custom.example .ui.embed').embed({
          source      : 'youtube',
          id          : 'O6Xo21L0ybE',
          placeholder : '/images/bear-waving.jpg'
        });
      

      

        

      


    


    

      
Specifying New Sources

      
Embed comes with two predefined embed sources, but can be extended with custom sources. Each source specifies default parameters and their mappings to settings, a templated url, and what icon should be used for overlays

      
Extending $.fn.embed.settings.sources allows you to use other proprietary embeds.

      

        // built in
        $.fn.embed.settings.sources = {
          youtube: {
            name   : 'youtube',
            type   : 'video',
            icon   : 'video play',
            domain : 'youtube.com',
            url    : '//www.youtube.com/embed/{id}',
            parameters: function(settings) {
              return {
                autohide       : !settings.showUI,
                autoplay       : settings.autoplay,
                color          : settings.colors || undefined,
                hq             : settings.hd,
                jsapi          : settings.api,
                modestbranding : 1
              };
            }
          },
          vimeo: {
            name   : 'vimeo',
            type   : 'video',
            icon   : 'video play',
            domain : 'vimeo.com',
            url    : '//www.youtube.com/embed/{id}',
            parameters: function(settings) {
              return {
                api      : settings.api,
                autoplay : settings.autoplay,
                byline   : settings.showUI,
                color    : settings.colors || undefined,
                portrait : settings.showUI,
                title    : settings.showUI
              };
            }
          }
        };
      

    


    
Behaviors

    
All the following behaviors can be called using the syntax:

    

    $('.your.element')
      .embed('behavior name', argumentOne, argumentTwo)
    ;
    


    

      
        
Behavior
        Description
      

      
        

          change(source, id, url)
          Changes iframe to a new content source
        

        

          reset
          Removes embed and shows placeholder content if available
        

        

          show
          Shows embed content
        

        

          hide
          Hides embed content and shows placeholder content
        

        

          get id
          Returns current content id
        

        

          get placeholder
          Returns placeholder image url
        

        

          get sources
          Returns source name
        

        

          get type
          Returns source type
        

        

          get url
          Returns URL with all parameters added
        

        

          has placeholder
          Returns whether embed content has placeholder
        

        

          destroy
          Destroys instance and removes all events
        

      
    



  


  


    

      Embed Settings
      
Settings to configure video behavior

    

    

      
        
Setting
        Default
        Description
      

      
        

          icon
          false
          Specifies an icon to use with placeholder content
        

        

          source
          false
          Specifies a source to use, if no source is provided it will be determined from the domain of a specified url.
        

        

          url
          false
          Specifies a url to use for embed
        

        

          id
          false
          Specifies an id value to replace with the {id} value found in templated urls
        

        

          parameters
          false
          Specify an object containing key/value pairs to add to the iframes GET parameters
        

      
    



    

      Video Settings
      
Settings to configure video behavior

    


    

      
        
Setting
        Default
        Description
      

      
        

          autoplay
          auto
          Default setting auto will only autoplay content when a placeholder is specified. Setting to true or false will force autoplay.
        

        

          color
          #444444
          Specifies a default chrome color with Vimeo or YouTube.
        

        

          url
          false
          Specifies a url to use for embed
        

        

          hd
          true
          Whether to prefer HD content
        

        

          brandedUI
          false
          Whether to show networks branded UI like title cards, or after video calls to action.
        

      
    


     
Callbacks

    
Callbacks specify a function to occur after a specific behavior.


    

      
        

          
          Parameters
          Context
          Description
        

      
      
        

          onCreate
          url
          $module
          Callback when iframe is generated
        

        

          onDisplay
          
          $module
          Whenever an iframe contents is shown
        

        

          onPlaceholderDisplay
          
          $module
          Callback immediately before Embed is removed from DOM
        

        

          onEmbed
          parameters
          $module
          Callback when module parameters are determined. Allows you to adjust parameters at run time by returning a new parameters object.
        

      
    



    

      DOM Settings
      
DOM settings specify how this module should interface with the DOM

    

    

      
        
Setting
        Default
        Description
      

      
        

          namespace
          embed
          Event namespace. Makes sure module teardown does not effect other events attached to an element.
        

        

          selector
          
            

            selector : {
              embed       : '.embed',
              placeholder : '.placeholder',
              play        : '.play'
            }
            

          		
          DOM Selectors used internally
        

        

          metadata
          
            

            metadata    : {
              id          : 'id',
              icon        : 'icon',
              placeholder : 'placeholder',
              source      : 'source',
              url         : 'url'
            }
            

          		
          HTML Data attributes used to store data
        

        

          className
          
            

            className : {
              active : 'active',
              embed  : 'embed'
            }
            

          		
          Class names used to attach style to state
        

        

          templates
          
            

            $.fn.embed.settings.templates = {
              iframe: function(url, parameters) {
                // returns html for iframe
              },
              placeholder: function(image, icon) {
               // returns html for placeholder element
              }
            }
            

          		
        

        

          metadata
          
            

            metadata    : {
              id          : 'id',
              icon        : 'icon',
              placeholder : 'placeholder',
              source      : 'source',
              url         : 'url'
            }
            

          		
        

        

          errors
          
            

            error : {
              noURL  : 'No URL specified',
              method : 'The method you called is not defined'
            }
            

          		
        

      
    


    


    

      Debug Settings
      
Debug settings controls debug output to the console

    


    

      
        
Setting
        Default
        Description
      

      
        

          name
          Embed
          Name used in debug logs
        

        

          silent
          False
          Silences all console output including error messages, regardless of other debug settings.
        

        

          debug
          False
          Provides standard debug output to console
        

        

          performance
          True
          Provides standard debug output to console
        

        

          verbose
          True
          Provides ancillary debug output to console
        

      
    



  






================================================
FILE: server/documents/modules/modal.html.eco
================================================
---
layout      : 'default'
css         : 'modal-page'
standalone  : true

element     : 'modal'
elementType : 'module'

title       : 'Modal'
description : 'A modal displays content that temporarily blocks interactions with the main view of a site'
type        : 'UI Module'

themes      : ['Default', 'Material']
---




<%- @partial('header', { tabs: 'module' }) %>




  

    
Header

    

      Content
      
Button

    

  


  

    

      Modal #1
    

    

      

        
      

      

        
We have more to share with you. Follow us along to modal 2

      

    

    

      
Proceed

    

  

  

    

      Modal #2
    

    

      

        
That's everything!

      

    

    

      

        
        All Done
      

    

  


  

    

      
      Archive Old Messages
    

    

      
Your inbox is getting full, would you like us to enable automatic archiving of old messages?

    

    

      

        
        No
      

      

        
        Yes
      

    

  

  

    

      Delete Your Account
    

    

      
Are you sure you want to delete your account

    

    

      

        No
      

      

        Yes
        
      

    

  


  

    

      Delete Your Account
    

    

      
      
    

    

      

        No
      

      

        Yes
        
      

    

  


  

    

      Delete Your Account
    

    

      
Are you sure you want to delete your account

    

    

      

        No
      

      

        Yes
        
      

    

  


  

    

      Delete Your Account
    

    

      
Are you sure you want to delete your account

    

    

      

        No
      

      

        Yes
        
      

    

  


  

    
    

      Update Your Settings
    

    

      

        
Give us your feedback

        

          
          
        

        

          

            
            
          

        

      

    

    

      
Cancel

      
Send

    

  


  

    

      Changing Your Thing
    

    

      
Do you want to change that thing to something else?

    

    

      

        No
      

      

        Yes
        
      

    

  


  

    

      Profile Picture
    

    

      

        
      

      

        
Modal Header

        
This is an example of expanded content that will cause the modal's dimmer to scroll

        
        

        
        

        
        

        
        

        
        

        
        

        
      

    

    

      

        Proceed
        
      

    

  


  

    

      Profile Picture
    

    

      

        
      

      

        
Modal Header

        
This is an example of expanded content that will cause the modal's dimmer to scroll

        
        

        
        

        
        

        
        

        
        

        
        

        
        

        
      

    

    

      

        Proceed
        
      

    

  


  

    

      Select a Photo
    

    

      

        
      

      

        
Default Profile Image

        
We've found the following gravatar image associated with your e-mail address.

        
Is it okay to use this photo?

      

    

    

      

        Nope
      

      

        Yep, that's me
        
      

    

  

  

    

      Select a Photo
    

    

      

        
      

      

        
Default Profile Image

        
We've found the following gravatar image associated with your e-mail address.

        
Is it okay to use this photo?

      

    

    

      

        Nope
      

      

        Yep, that's me
        
      

    

  


  


    
Types


    

      
Modal

      
A standard modal

      

      $('.ui.modal')
        .modal('show')
      ;
      

      

        

          
          

            Profile Picture
          

          

            

              
            

            

              
We've auto-chosen a profile image for you.

              
We've grabbed the following image from the gravatar image associated with your registered e-mail address.

              
Is it okay to use this photo?

            

          

          

            

              Nope
            

            

              Yep, that's me
              
            

          

        

      

    


    

      
Basic

      
A modal can reduce its complexity

      

      $('.ui.basic.modal')
        .modal('show')
      ;
      

      

        

          

            
            Archive Old Messages
          

          

            
Your inbox is getting full, would you like us to enable automatic archiving of old messages?

          

          

            

              
              No
            

            

              
              Yes
            

          

        

      

    


    
Content


    

      

        Header
      

      
A modal can have a header

      

        

          
Header

        

      

    


    

      

        Content
      

      
A modal can contain content

      

        

          
Header

          

            

            

            

          

        

      

    


    

      

        Image Content
        
          New in 2.0
        
      

      
A modal can contain image content

      

        Modals with image content must use the image content class in 2.0. This is to make sure flex-box rules do not affect regular content.
      

      

        

          
Header

          

            
            

              

            

          

        

      

    


    

      

        Actions
      

      
A modal can contain a row of actions

      

        
Close actions are applied by default to all button actions, in addition an onApprove or onDeny callback will fire if the elements match either selector.

        

          approve  : '.positive, .approve, .ok',
          deny     : '.negative, .deny, .cancel'
        

      

      

        
To prevent a modal action from causing the modal to close, you can return false; from either callback.

      

      

        

          
Header

          

            

          

          

            
Approve

            
Neutral

            
Cancel

          

        

      

    


    
Variations


    

      
Full Screen

      
A modal can use the entire size of the screen

      

      $('.fullscreen.modal')
        .modal('show')
      ;
      

    

    

      
Size

      
A modal can vary in size

      

      $('.mini.modal')
        .modal('show')
      ;
      

      

      $('.tiny.modal')
        .modal('show')
      ;
      

      

      $('.small.modal')
        .modal('show')
      ;
      

      

      $('.large.modal')
        .modal('show')
      ;
      

    


    

      

        Scrolling Content
        
New in 2.2.11

      

      
A modal can use the entire size of the screen

      

        

          
Header

          

            
Very long content goes here

          

        

      

      

      $('.ui.longer.modal')
        .modal('show')
      ;
      

    


    
States


    

      
Active

      
An active modal is visible on the page

      

        

      

    

  


  


    
Examples


    

      

        Disabling Vertical Centering
        
New in 2.3

      

      
When your modal has dynamic content, or multiple steps, it can make sense to disable centering so content doesn't jump around vertically when its height changes.

      

      $('.special.modal')
        .modal({
          centered: false
        })
        .modal('show')
      ;
      

    


    

      
Scrolling Modal

      
When your modal content exceeds the height of the browser the scrollable area will automatically expand to include just enough space for scrolling, without scrolling the page below.

      

      $('.long.modal')
        .modal('show')
      ;
      

    


    

      
Internally Scrolling Content

      
You may prefer to have the content of your modal scroll itself, you can do this by using the scrolling content variation.

      

      $('.longer.modal')
        .modal('show')
      ;
      

    


    

      
Multiple Modals

      
A modal can open a second modal. If you use allowMultiple: true parameter the second modal will  be opened on top of the first modal. Otherwise the modal will be closed before the second modal is opened.

      

      // initialize all modals
      $('.coupled.modal')
        .modal({
          allowMultiple: true
        })
      ;
      // open second modal on first modal buttons
      $('.second.modal')
        .modal('attach events', '.first.modal .button')
      ;
      // show first immediately
      $('.first.modal')
        .modal('show')
      ;
      

      

      $('.coupled.modal')
        .modal({
          allowMultiple: false
        })
      ;
      // attach events to buttons
      $('.second.modal')
        .modal('attach events', '.first.modal .button')
      ;
      // show first now
      $('.first.modal')
        .modal('show')
      ;
      

    


    

      
Forcing a Choice

      
You can disable a modal's dimmer from being closed by click to force a user to make a choice

      

      $('.basic.test.modal')
        .modal('setting', 'closable', false)
        .modal('show')
      ;
      

    


    

      
Approve / Deny Callbacks

      
Modals will automatically tie approve deny callbacks to any positive/approve, negative/deny or ok/cancel buttons.
      

        If onDeny, onApprove or onHide returns false it will prevent the modal from closing
      

      

      $('.ui.basic.test.modal')
        .modal({
          closable  : false,
          onDeny    : function(){
            window.alert('Wait not yet!');
            return false;
          },
          onApprove : function() {
            window.alert('Approved!');
          }
        })
        .modal('show')
      ;
      

    


    

      
Attach events

      
A modal can attach events to another element

      

      $('.test.modal')
        .modal('attach events', '.test.button', 'show')
      ;
      

      
Launch modal

    


    

      
Transitions

      
A modal can use any named ui transition.

      

        
        
Choose transition

        
        

          
Horizontal Flip

          
Vertical Flip

          
Fade Up

          
Fade

          
Scale

        

      

      

      

      $('.selection.dropdown')
        .dropdown({
          onChange: function(value) {
            $('.test.modal')
              .modal('setting', 'transition', value)
              .modal('show')
            ;
          }
        })
      ;
      

    


    

      
Dimmer Variations

      
Modals can specify additional variations like blurring or inverted which adjust how the dimmer displays.

      
Full screen blurring modals are not performant for current-gen computers at widescreen resolutions with integrated graphics.

      

      $('.ui.modal')
        .modal({
          inverted: true
        })
        .modal('show')
      ;
      

      

      $('.ui.modal')
        .modal({
          blurring: true
        })
        .modal('show')
      ;
      

    


  


  


    
Usage


    
Initializing a modal

    
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.

    

      
Why move modal content?

      
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.

      
If you need to have your modal stay in its current location you can preserve its position using the setting detachable: false

    

    

      $('.ui.modal')
        .modal()
      ;
    

    

      

        
        

          Modal Title
        

        

          

            An image can appear on left or an icon
          

          

            A description can appear on the right
          

        

        

          
Cancel

          
OK

        

      

    


    
Behavior


    
All the following behaviors can be called using the syntax:

    

    $('.ui.modal')
      .modal('behavior name', argumentOne, argumentTwo)
    ;
    


    

      
        

          Behavior
          Description
        

      
      
        

          show
          Shows the modal
        

        

          hide
          Hides the modal
        

        

          toggle
          Toggles the modal
        

        

          refresh
          Refreshes centering of modal on page
        

        

          show dimmer
          Shows associated page dimmer
        

        

          hide dimmer
          Hides associated page dimmer
        

        

          hide others
          Hides all modals not selected modal in a dimmer
        

        

          hide all
          Hides all visible modals in the same dimmer
        

        

          cache sizes
          Caches current modal size
        

        

          can fit
          Returns whether the modal can fit on the page
        

        

          is active
          Returns whether the modal is active
        

        

          set active
          Sets modal to active
        

      
    

  


  


    
Settings


    
Modal Settings
      
Modal settings modify the modal's behavior

    


    

      
        

          Setting
          Default
          Description
        

      
      
        

          detachable
          true
          If set to false will prevent the modal from being moved to inside the dimmer
        

        

          useFlex
          'auto'
          Auto will automatically use flex in browsers that support absolutely positioned elements inside flex containers. Setting to true/false will force this setting for all browsers.
        

        

          autofocus
          true
          When true, the first form input inside the modal will receive focus when shown.  Set this to false to prevent this behavior.
        

        

          observeChanges
          false
          Whether any change in modal DOM should automatically refresh cached positions
        

        

          allowMultiple
          false
          If set to true will not close other visible modals when opening a new one
        

        

          keyboardShortcuts
          true
          Whether to automatically bind keyboard shortcuts
        

        

          offset
          0
          A vertical offset to allow for content outside of modal, for example a close button, to be centered.
        

        

          context
          
          body
          
          Selector or jquery object specifying the area to dim
        

        

          closable
          
          true
          
          Setting to false will not allow you to close the modal by clicking on the dimmer
        

        

          dimmerSettings
          
          

          {
            closable : false,
            useCSS   : true
          }
          

          		
          You can specify custom settings to extend UI dimmer
        

        

          transition
          
            scale
          
          Named transition to use when animating menu in and out, full list can be found in ui transitions docs.
        

        

          duration
          
            400
          
          Duration of animation
        

        

          queue
          
            false
          
          Whether additional animations should queue
        

      
    


    

    
Callbacks
      
Callbacks specify a function to occur after a specific behavior.

    



    

      
        

          Setting
          Context
          Description
        

      
      
        

          onShow
          Modal
          Is called when a modal starts to show.
        

        

          onVisible
          Modal
          Is called after a modal has finished showing animating.
        

        

          onHide($element)
          Modal
          Is called after a modal starts to hide. If the function returns false, the modal will not hide.
        

        

          onHidden
          Modal
          Is called after a modal has finished hiding animation.
        

        

          onApprove($element)
          Click
          Is called after a positive, approve or ok button is pressed. If the function returns false, the modal will not hide.
        

        

          onDeny($element)
          Modal
          Is called after a negative, deny or cancel button is pressed. If the function returns false the modal will not hide.
        

      
    


    
DOM Settings
      
DOM settings specify how this module should interface with the DOM

    


    

      
        

        Setting
        Default
        Description
      

      
        

          namespace
          modal
          Event namespace. Makes sure module teardown does not effect other events attached to an element.
        

        

          selector
          
            

      selector    : {
        close    : '.close, .actions .button',
        approve  : '.actions .positive, .actions .approve, .actions .ok',
        deny     : '.actions .negative, .actions .deny, .actions .cancel'
      },
            

          		
        

        

          className
          
            

      className : {
        active    : 'active',
        scrolling : 'scrolling'
      }
            

          		
        

      
    


    
Debug Settings
      
Debug settings controls debug output to the console

    


    

      
        

          Setting
          Default
          Description
        

      
      
        

          name
          Modal
          Name used in debug logs
        

        

          debug
          False
          Provides standard debug output to console
        

        

          performance
          True
          Provides standard debug output to console
        

        

          verbose
          True
          Provides ancillary debug output to console
        

        

          error
          
            

      error   : {
        method    : 'The method you called is not defined.'
      }
            

          		
        

      
    

  






================================================
FILE: server/documents/modules/nag.html.eco
================================================
---
layout      : 'default'
css         : ''
element     : 'nag'
elementType : 'module'
standalone  : true

title       : 'Nag'
description : 'A nag is an important message that persists until dismissed by a user'
type        : 'Future Module'

---

<%- @partial('header') %>




  


    
Current Progress

    

      

        
60%

      

      
Needs Documentation / Re-coding

    


    
Usage

    

      

      
Nags are used to present a user with a one time message which will persist until a user acknowledges the message. This can be used for providing notices like the site's use of cookies, an important change to a site like a security breach.

      
Semantic's nag component provides built in options for ensuring a nag is only displayed once. You can trigger an API endpoint on dismissal, in order to store a value in your database, or you can use localstorage or cookie value to make sure that a particular computer does not receive the nag again.

    


    
Example


    

    // Wont re-appear unless cleared
    $('.cookie.nag')
      .nag('show')
    ;
    

    

    // Clears cookie so nag shows again
    $('.cookie.nag')
      .nag('clear')
    ;
    

    

      

        
          We use cookies to ensure you get the best experience on our website
        
        
      

    

    

    // Automatically shows on init if cookie isnt set
    $('.cookie.nag')
      .nag({
        key      : 'accepts-cookies',
        value    : true
      })
    ;
    


    
Support Development

    


      
You can help support the future development of the Semantic UI project, and help boost the priority of this component by donating to Semantic UI development.


      
Please be sure to leave a note in the comments to indicate that you are interested in the development of this particular component.


    


  






================================================
FILE: server/documents/modules/popup.html.eco
================================================
---
layout      : 'default'
css         : 'popup'
standalone  : true

element     : 'popup'
elementType : 'module'

title       : 'Popup'
description : 'A popup displays additional information on top of a page'
type        : 'UI Module'

themes      : ['Default']
---



<%- @partial('header', { tabs: 'module' }) %>



  


    

      Types
    


    
Javascript


    

      Popup includes both a javascript version (with a full featureset) and a limited CSS only version, which can be useful in pages that use many popups, or with libraries like React or Meteor to avoid handling DOM lifecycle.
    


    

      
Popup

      
An element can specify popup content to appear

      

        
      

    


    

      
Titled

      
An element can specify popup content with a title

      
      
      
    


    

      
HTML

      
An element can specify HTML for a popup


      

        

          
        

        

          
My Neighbor Totoro

          

            Two sisters move to the country with their father in order to be closer to their hospitalized mother, and discover the surrounding trees are inhabited by magical spirits.
          

        

        

          

            
            Queue
          

          

            
            Watch
          

        

      

    


    

      
Pre-Existing

      
An element can display a popup that is already included in the page


      

        

          
        

        

          
Watchmen

          

            In a gritty and alternate 1985 the glory days of costumed vigilantes have been brought to a close by a government crackdown, but after one of the masked veterans is brutally murdered an investigation into the killer is initiated.
          

        

        

          

            
            Queue
          

          

            
            Watch
          

        

      

      

        
User Rating

        

      

    


    
No Javascript


    

      
Tooltip
        
New in 2.2

      

      
An element can specify a simple tooltip that can appear without javascript

      

        Tooltips use an element's :before and :after pseudo classes. Elements like icon that already use these classes for styling will need to have the tooltips to a wrapping element, like a button, or a span to make sure tooltips work correctly.
      

      

        
      

      

        
      

    

    

      

        Top Left
      

      

        Top Center
      

      

        Top Right
      

      

      

        Bottom Left
      

      

        Bottom Center
      

      

        Bottom Right
      

      

      

        Right Center
      

      

        Left Center
      

    

    

      

        Top Left
      

      

        Top Center
      

      

        Top Right
      

      

      

        Bottom Left
      

      

        Bottom Center
      

      

        Bottom Right
      

      

      

        Right Center
      

      

        Left Center
      

    



    
Variations


    

      
Basic

      
A popup can provide more basic formatting

      

        
      

    


    

      
Width

      
A popup can be extra wide to allow for longer content

      
      
    


    

      
Fluid

      
A fluid popup will take up the entire width of its offset container

      
Show fluid popup

      

        

          
1

          
2

          
3

          
4

        

      

    


    

      
Size

      
A popup can vary in size

      
      
      
      
      
    


    

      
Flowing

      
A popup can have no maximum width and continue to flow to fit its content

      
Show flowing popup

      

        

          

            
Basic Plan

            
2 projects, $10 a month

            
Choose

          

          

            
Business Plan

            
5 projects, $20 a month

            
Choose

          

          

            
Premium Plan

            
8 projects, $25 a month

            
Choose

          

        

      

    


    

      
Inverted

      
A popup can have its colors inverted

      
      

        
      

    

  


  


    
Usage


    

      
Initializing A Popup

      
A popup is initialized on an activating element

      

      $('.activating.element')
        .popup()
      ;
      

    


    

      
Using a Pre-existing Popup

      
Using a pre-existing popup allows for you to include complex HTML inside your popup.

      
If you include your popup on page load as an adjacent sibling element to your activating element it can be found automatically.

      
To instruct popup to look inline for your popup element you can initialize it with the inline parameter

      

        $('.button')
          .popup({
            inline: true
          })
        ;
      

      

        
Activator

        

          
Custom Header

          
Click Me

        

      

    

    

      
Using a Pre-existing Popup Anywhere

      
If you cannot include your popup element as a sibling element, you can specify a custom selector to retrieve your popup

      

        $('.button')
          .popup({
            popup: '.special.popup'
          })
        ;
      

    


    

      
Specifying Content In Metadata

      
Frequently used settings like, title, content, HTML, or offset or variation, can be included in HTML metadata

      

        
        

          
Specifying Content

          
Popups can specify content in three ways:

          
    
            
  • Using HTML title attribute
    • 
            
  • Using data-content attribute
    • 
            
  • Using data-html for specific HTML
    • 
            
  • Using the content property in the initialization of the popup
    • 
          

          
Popups can also specify some other frequently used settings using metadata

          
    
            
  • data-variation: the popup variation to use 
    • 
            
  • data-offset: a pixel offset correction for popup
    • 
            
  • data-position: the side to position popup on
    • 
          

        

      

      

        
      

    

    

      
Specifying Content In Javascript

      

      $('.ui.popup')
        .popup({
          title   : 'Popup Title',
          content : 'Hello I am a popup'
        })
      ;
      

    


    
Behavior


    
All the following behaviors can be called using the syntax:

    

    $('.your.element')
      .popup('behavior name', argumentOne, argumentTwo)
    ;
    


    

      
        
Behavior
        Description
      

      
        

          show
          Shows popup
        

        

          hide
          Hides popup
        

        

          hide all
          Hides all visible pop ups on the page
        

        

          get popup
          Returns current popup dom element
        

        

          change content(html)
          Changes current popup content
        

        

          toggle
          Toggles visibility of popup
        

        

          is visible
          Returns whether popup is visible
        

        

          is hidden
          Returns whether popup is hidden
        

        

          exists
          Returns whether popup is created and inserted into the page
        

        

          reposition
          Adjusts popup when content size changes (only necessary for centered popups)
        

        

          set position(position)
          Repositions a popup
        

        

          destroy
          Removes popup from the page and removes all events
        

        

          remove popup
          Removes popup from the page
        

      
    


  



  


    
Examples


    

      
Specifying Popup Boundaries
        
New in 2.2

      

      
Popups now include a new setting boundary that let you specify that a popup should not escape the boundary of another section. This can be useful in complex paned layouts

      
Additionally popups can now specify a scroll context, to allow for scroll containers other than window to cause a clicked popup to hide on scroll.

      

        $('.boundary.example .button')
          .popup({
            boundary: '.boundary.example .segment'
          })
        ;
      


      

        
Hover Me

        
Normally this popup would open in the default position top center but because this would escape the boundaries of the segment it will search other available positions until it can find one to place the popup while staying inside the segment

      

    


    

      
Wide Popup Menu

      
An easier way to display complex content, like a wide popup menu is to have the popup content as a pre-  existing part of your page's HTML.

      
Using the setting inline: true will let Semantic know to display the next sibling ui  popup element after the activator.


      
Tweaking settings like the delay for show, and hide, and making the menu hoverable will help it function   more like a dropdown menu


      

      $('.example .menu .browse')
        .popup({
          inline     : true,
          hoverable  : true,
          position   : 'bottom left',
          delay: {
            show: 300,
            hide: 800
          }
        })
      ;
      

      

        
          Browse
          
        
        

          

            

              
Fabrics

              

                Cashmere
                Linen
                Cotton
                Viscose
              

            

            

              
Size

              

                Small
                Medium
                Large
                Plus Sizes
              

            

            

              
Colors

              

                Neutrals
                Brights
                Pastels
              

            

            

              
Types

              

                Knitwear
                Outerwear
                Pants
                Shoes
              

            

          

        

        
          
          Checkout
        
      


    


    

      
Specifying a selector for a popup

      
If its not possible to include the popup content as the next sibling, you can also specify a custom selector to help link the popup contents to its activator.

      

        Using an inline popup may require specifying a min-width on your popup, if your popup content will appear outside the boundaries of its parent element.
      

      

      $('.example .custom.button')
        .popup({
          popup : $('.custom.popup'),
          on    : 'click'
        })
      ;
      

      

        
Show custom popup

      

      

        I'm not on the same level as the button, but i can still be found.
      

    



    

      
Specifying a trigger event

      
A popup trigger event can be specified

      

    $('.example .teal.button')
      .popup({
        on: 'click'
      })
    ;
    $('.example input')
      .popup({
        on: 'focus'
      })
    ;
      

      
Click Me

      

        
        
      

    


    

      
Target Element

      
A popup can specify a different target element than itself to show a popup

      

      $('.test.button')
        .popup({
          position : 'right center',
          target   : '.test.image',
          title    : 'My favorite dog',
          content  : 'My favorite dog would like other dogs as much as themselves'
        })
      ;
      

      
Hover Me

      

      
    

    

      
Inline or relative to page

      
A popup can either be inserted directly after an element, or added as a child element to the page's body.

      

        Using inline will allow your popups to go places other popups can't go, like inside fixed or absolutely positioned elements
      

      

        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.
      

      

      /* this will only style the popup if inline is true */
      .example .popup {
        color: #FF0000;
      }
      

      

      $('.inline.icon')
        .popup({
          inline: true
        })
      ;
      

      
      

    

    

      
Positioning

      
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.

      

        
        
        
        
        
        
        
        
      

    


    

      
Specifying an offset

      
A popup position can be adjusted manually by specifying an offset property using data-offset="value"


      
    



    

      
Transitions

      
A popup can use any named ui transition.

       Home

      


      

        
        
        
Choose a transition

        

          
Horizontal Flip

          
Vertical Flip

          
Fade Up

          
Fade

          
Scale

        

      

      

      

    $('.selection')
      .dropdown({
        onChange: function(value) {
          $('.demo.icon')
            .popup({
              transition: value
            })
            .popup('toggle')
          ;
        }
      })
    ;
      

    

  


  


    

      Popup Settings
      
Settings to configure popup behavior

    

    

      
        
Setting
        Default
        Description
      

      
        

          popup
          false
          Can specify a DOM element that should be used as the popup. This is useful for including a pre-formatted popup.
        

        

          exclusive
          false
          Whether all other popups should be hidden when this popup is opened
        

        

          movePopup
          true
          Whether to move popup to same offset container as target element when popup already exists on the page. Using a popup inside of an element without overflow:visible, like a sidebar, may require you to set this to false
        

        

          observeChanges
          true
          Whether popup should attach mutationObservers to automatically run destroy when the element is removed from the page's DOM.
        

        

          boundary
          window
          When the popup surpasses the boundary of this element, it will attempt to find another display position.
        

        

          context
          body
          Selector or jquery object specifying where the popup should be created.
        

        

          scrollContext
          window
          Will automatically hide a popup on scroll event in this context
        

        

          jitter
          2
          Number of pixels that a popup is allowed to appear outside the boundaries of its context. This allows for permissible rounding errors when an element is against the edge of its context.
        

        

          position
          top left
          Position that the popup should appear
        

        

          inline
          false
          If 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.
        

        

          preserve
          false
          Whether popup contents should be preserved in the page after being hidden, allowing it to re-appear slightly faster on subsequent loads.
        

        

          prefer
          adjacent
          Can be set to adjacent or opposite to prefer adjacent or opposite position if popup cannot fit on screen
        

        

          lastResort
          false
          When set to false, a popup will not appear and produce an error message if it cannot entirely fit on page. Setting this to a position like, right center forces the popup to use this position as a last resort even if it is partially offstage. Setting this to true will use the last attempted position.
        

        

          on
          hover
          Event used to trigger popup. Can be either focus, click, hover, or manual. Manual popups must be triggered with $('.element').popup('show');
        

        

          delay
          
            

    delay: {
      show: 50,
      hide: 0
    }
            

          		
          Delay in milliseconds before showing or hiding a popup on hover or focus
        

        

          transition
          
            slide down
          
          Named transition to use when animating menu in and out.
        

        

          duration
          
            200
          
          Duration of animation events
        

        

          arrowPixelsFromEdge 
New in 2.3

          20
          When a target element is less than 2x this amount, the popup will appear with the arrow centered on the target element, instead of with the popup edge matching the target's edge.
        

        

          setFluidWidth
          true
          Whether popup should set fluid popup variation width on load to avoid width: 100% including padding
        

        

          hoverable
          false
          Whether popup should not close on hover (useful for popup navigation menus)
        

        

          closable
          true
          When using on: 'click' specifies whether clicking the page should close the popup
        

        

          addTouchEvents
          true
          When using on: 'hover' whether touchstart events should be added to allow the popup to be triggered
        

        

          hideOnScroll
          auto
          Whether popup should hide on scroll or touchmove, auto only hides for popups without on: 'click'.

          Set this to false to prevent mobile browsers from closing popups when you tap inside input fields.		
        

        

          target
          false
          If a selector or jQuery object is specified this allows the popup to be positioned relative to that element.
        

        

          distanceAway
          0
          Offset for distance of popup from element
        

        

          offset
          0
          Offset in pixels from calculated position
        

        

          maxSearchDepth
          10
          Number of iterations before giving up search for popup position when a popup cannot fit on screen
        

      
    


     
Callbacks

    
Callbacks specify a function to occur after a specific behavior.


    

      
        

          
          Parameters
          Context
          Description
        

      
      
        

          onCreate
          $module
          $popup
          Callback on popup element creation, with created popup
        

        

          onRemove
          $module
          $popup
          Callback immediately before Popup is removed from DOM
        

        

          onShow
          $module
          $popup
          Callback before popup is shown. Returning false from this callback will cancel the popup from showing.
        

        

          onVisible
          $module
          $popup
          Callback after popup is shown
        

        

          onHide
          $module
          $popup
          Callback before popup is hidden. Returning false from this callback will cancel the popup from hiding.
        

        

          onHidden
          $module
          $popup
          Callback after popup is hidden
        

        

          onUnplaceable
          $module
          $popup
          Callback after popup cannot be placed on screen
        

      
    


    

      Content Settings
      
Settings to specify popup contents

    

    

      
        
Setting
        Description
      

      
        

          variation
          Popup variation to use, can use multiple variations with a space delimiter
        

        

          content
          Content to display
        

        

          title
          Title to display alongside content
        

        

          html
          HTML content to display instead of preformatted title and content
        

      
    


    

      DOM Settings
      
DOM settings specify how this module should interface with the DOM

    

    

      
        
Setting
        Default
        Description
      

      
        

          namespace
          popup
          Event namespace. Makes sure module teardown does not effect other events attached to an element.
        

        

          selector
          
            

    selector    : {
      popup    : '.ui.popup'
    }
            

          		
          DOM Selectors used internally
        

        

          metadata
          
            

    metadata: {
      content   : 'content',
      html      : 'html',
      offset    : 'offset',
      position  : 'position',
      title     : 'title',
      variation : 'variation'
    }
            

          		
          HTML Data attributes used to store data
        

        

          className
          
            

    className   : {
      loading     : 'loading',
      popup       : 'ui popup',
      position    : 'top left center bottom right',
      visible     : 'visible'
    }
            

          		
          Class names used to attach style to state
        

      
    


    


    

      Debug Settings
      
Debug settings controls debug output to the console

    


    

      
        
Setting
        Default
        Description
      

      
        

          name
          Popup
          Name used in debug logs
        

        

          silent
          false
          Silences all console output including error messages, regardless of other debug settings.
        

        

          debug
          false
          Provides standard debug output to console
        

        

          performance
          true
          Provides standard debug output to console
        

        

          verbose
          true
          Provides ancillary debug output to console
        

        

          errors
          
            

            error: {
              invalidPosition : 'The position you specified is not a valid position',
              cannotPlace     : 'Popup does not fit within the boundaries of the viewport',
              method          : 'The method you called is not defined.',
              noTransition    : 'This module requires ui transitions ',
              notFound        : 'The target or popup you specified does not exist on the page'
            }
            

          		
        

      
    


  






================================================
FILE: server/documents/modules/progress.html.eco
================================================
---
layout      : 'default'
css         : 'progress'
standalone  : true

element     : 'progress'
elementType : 'module'

title       : 'Progress'
description : 'A progress bar shows the progression of a task'
type        : 'UI Module'

themes      : ['Default', 'Classic', 'Basic', 'Striped']
---



<%- @partial('header', { tabs: 'module' }) %>




  


    
Types


    

      
Standard

      
A standard progress bar

      

        

          

        

        
Uploading Files

      

      

        

          

          

        

      

    

    

      
Indicating

      
An indicating progress bar visually indicates the current level of progress of a task

      

        

        
Funding

      

      

        

          

          

        

      

    


    
Content


    

      
Bar

      
A progress element can contain a bar visually indicating progress

      

        

      

    


    

      
Progress

      
A progress bar can contain a text value indicating current progress

      

        

          

        

      

    


    

      
Label

      
A progress element can contain a label

      

        

          

        

        
Uploading Files

      

    


    
States


    

      
Active

      
A progress bar can show activity

      

        

          

        

        
Uploading Files

      

    



    

    
Success

    
A progress bar can show a success state

      

        

          

        

        
Everything worked, your file is all ready.

      

    


    

    
Warning

    
A progress bar can show a warning state

      

        

          

        

        
Your file didn't meet the minimum resolution requirements.

      

    


    

    
Error

    
A progress bar can show an error state

      

        

          

        

        
There was an error.

      

    


    

    
Disabled

    
A progress bar can be disabled

      

        

      

    


    
Variations


    

      
Inverted

      
A progress bar can have its colors inverted

      

        

          

            

          

          
Uploading Files

        

        

          

            

          

          
Success

        

        

          

            

          

          
Warning

        

        

          

            

          

          
Error

        

      

      

        

          

        

      

    


    

      
Attached

      
A progress bar can show progress of an element

      

        

          

        

        
La la la la

        

          

        

      

      

        

          

          

        

      

    


    

      

        

          
        

        

          Project
          

            Started in 2014
          

        

        

          
            
            22 Friends
          
        

        

          

        

      

      

        

          

          

        

      

    


    

      
Size

      
A progress bar can vary in size

      

        Some small sizes may not be able to fit an inlined label
      

      

        

        
Tiny

      

      

        

        
Small

      

      

        

        
Standard

      

      

        

        
Large

      

      

        

        
Big

      

      

        

          

          

        

      

    


    

      
Color

      
Can have different colors:

      

        

      

      

        

      

      

        

      

      

        

      

      

        

      

      

        

      

      

        

      

      

        

      

      

        

      

      

        

      

      

        

      

      

        

      

      

        

      

      

        

          

          

        

      

    

    

      
Inverted Color

      
These colors can also be inverted for improved contrast on dark backgrounds

      

        

          

            

          

        

        

          

            

          

        

        

          

            

          

        

        

          

            

          

        

        

          

            

          

        

        

          

            

          

        

        

          

            

          

        

        

          

            

          

        

        

          

            

          

        

        

          

            

          

        

        

          

            

          

        

        

          

            

          

        

        

          

            

          

        

        

          

            

            

          

        

      

    


  


  


    
Initializing a progress bar


    

      
With metadata

      
A progress bar can be initialized with metadata

      

        $('#example1').progress();
      

      

        

          

          
74% Funded

        

      

    

    

      
With Javascript

      
A progress bar can be initialized with a Javascript settings object

      

        $('#example2').progress({
          percent: 22
        });
      

      

        

          

          
22% Earned

        

      

    


    
Task Completion Percent


    

      
Adding a Total Value

      
A progress bar can keep track of the current value as a ratio of a total value. This is useful for tracking the progress of a series of events with a known quantity, for example "uploading 1 of 20" photos.

      
Each call to increment will increase the value by 1, or the value specified as the second parameter

      

        $('#example3')
          .progress('increment')
        ;
      

      

        

          

            

          

          
Adding Photos

        

      

      

        $('#example3')
          .progress({
            total: 3
          })
        ;
      

    


    

      
Initializing with Metadata

      
A progress bar can keep track of the current value as a ratio of a total value. This is useful for tracking the progress of a series of events with a known quantity, for example "uploading 1 of 20" photos.

      
Each call to increment will increase the value by 1, or the value specified as the second parameter

      
In addition you can pass in templates text for each state available to your progress bar which will automatically be updated when your progress bar reaches that state

      

        $('#example4')
          .progress('increment')
        ;
      

      

        

          

            

          

          
Adding Photos

        

      

    


    

      
Adding Custom Labels

      
You can pass in templates text for each state available to your progress bar which will automatically be updated when your progress bar reaches that state

      
You can use label setting to change progress bar labels between two preset messages. In addition you can customize the messages themselves by specifying the templated text in text. Templated strings will replace three values on render

      

        

          {percent}
          Current percentage
        

        

          {value}
          Current value
        

        

          {total}
          Total value
        

        

          {left}
          Distance to total, or % progress left
        

      

      

        $('#example5')
          .progress('increment')
        ;
      

      

        

          

          
Adding Photos

        

      

      

        $('#example5')
          .progress({
            text: {
              active  : 'Adding {value} of {total} photos',
              success : '{total} Photos Uploaded!'
            }
          })
        ;
      

    


    

      
Translation

      
You can also adjust text labels to help strings appear translated

      

        $('#example6')
          .progress('increment')
        ;
      

      

        

          

            

          

          
Carga de archivos

        

      

      

        $('#example6')
          .progress({
            label: 'ratio',
            text: {
              ratio: '{value} de {total}'
            }
          })
        ;
      

    



    
Behavior


    
All the following behaviors can be called using the syntax:

    

    $('.your.element')
      .progress('behavior name', argumentOne, argumentTwo)
    ;
    


    

      
        
Behavior
        Description
      

      
        

          set percent(percent)
          Sets current percent of progress to value. If using a total will convert from percent to estimated value.
        

        

          set progress(value)
          Sets progress to specified value. Will automatically calculate percent from total.
        

        

          increment(incrementValue)
          Increments progress by increment value, if not passed a value will use random amount specified in settings
        

        

          decrement(decrementValue)
          Decrements progress by decrement value, if not passed a value will use random amount specified in settings
        

        

          update progress(value)
          Immediately updates progress to value, ignoring progress animation interval delays
        

        

          complete
          Finishes progress and sets loaded to 100%
        

        

          reset
          Resets progress to zero
        

        

          set total(total)
          Set total to a new value
        

        

          get text(text)
          Replaces templated string with value, total, percent left and percent.
        

        

          get normalized value(value)
          Returns normalized value inside acceptable range specified by total.
        

        

          get percent
          Returns percent as last specified
        

        

          get value
          Returns current progress value
        

        

          get total
          Returns total
        

        

          is complete
          Returns whether progress is completed
        

        

          is success
          Returns whether progress was a success
        

        

          is warning
          Returns whether progress is in warning state
        

        

          is error
          Returns whether progress is in error state
        

        

          is active
          Returns whether progress is in active state
        

        

          set active
          Sets progress to active state
        

        

          set warning
          Sets progress to warning state
        

        

          set success
          Sets progress to success state
        

        

          set error
          Sets progress to error state
        

        

          set duration(value)
          Changes progress animation speed
        

        

          set label(text)
          Sets progress exterior label to text
        

        

          set bar label(text)
          Sets progress bar label to text
        

        

          remove active
          Removes progress to active state
        

        

          remove warning
          Removes progress to warning state
        

        

          remove success
          Removes progress to success state
        

        

          remove error
          Removes progress to error state
        

      
    



  

  


    
Examples


    

      
Frequently Updated Progress

      
Progress bar will automatically poll for the last progress value after completing an animation, so that animation easing continues to work smoothly, even if update events occur much more frequently than UI updates.

      
        Rapidly Update
      
      

        

          

            

          

          
Waiting for you to press button

        

      

      

        $('.rapid.example .ui.button')
          .on('click', function() {
            var
              $progress       = $('.rapid.example .ui.progress'),
              $button         = $(this),
              updateEvent
            ;
            // restart to zero
            clearInterval(window.fakeProgress)
            $progress.progress('reset');

            // updates every 10ms until complete
            window.fakeProgress = setInterval(function() {
              $progress.progress('increment');
              $button.text( $progress.progress('get value') );
              // stop incrementing when complete
              if($progress.progress('is complete')) {
                clearInterval(window.fakeProgress)
              }
            }, 10);
          })
        ;
        $('.rapid.example .ui.progress')
          .progress({
            duration : 200,
            total    : 200,
            text     : {
              active: '{value} of {total} done'
            }
          })
        ;
      

    



  


  


    

      Progress Settings
      
Form settings modify the tab behavior

    

    

      
        

          Setting
          Default
          Description
        

      
      
        

          autoSuccess
          true
          Whether success state should automatically trigger when progress completes
        

        

          showActivity
          true
          Whether progress should automatically show activity when incremented
        

        

          limitValues
          true
          When set to true, values that calculate to above 100% or below 0% will be adjusted. When set to false, inappropriate values will produce an error.
        

        

          label
          percent
          Can be set to either to display progress as percent or ratio. Matches up to corresponding text template with the same name.
        

        

          random
          
          

            className : {
              active  : 'active',
              error   : 'error',
              success : 'success',
              warning : 'warning'
            }
          

          		
          When incrementing without value, sets range for random increment value
        

        

          precision
          1
          Decimal point precision for calculated progress
        

        

          total
          false
          Setting a total value will make each call to increment get closer to this total (i.e. 1/20, 2/20 etc)
        

        

          value
          false
          Sets current value, when total is specified, this is used to calculate a ratio of the total, with percent this should be the overall percent
        

      
    


    

    
Callbacks

    
Callbacks specify a function to occur after a specific behavior.


    

      
        

          
          Parameters
          Context
          Description
        

      
      
        

          onChange
          percent, value, total
          Progress
          Callback on percentage change
        

        

          onSuccess
          total
          Progress
          Callback on success state
        

        

          onActive
          value, total
          Progress
          Callback on active state
        

        

          onError
          value, total
          Progress
          Callback on error state
        

        

          onWarning
          value, total
          Progress
          Callback on warning state
        

      
    


    


    

      DOM Settings
      
DOM settings specify how this module should interface with the DOM

    

    

      
        

          Setting
          Default
          Description
        

      
      
        

          namespace
          progress
          Event namespace. Makes sure module teardown does not effect other events attached to an element.
        

        

          text
          
            

            text : {
              active  : false,
              error   : false,
              success : false,
              warning : false,
              percent : '{percent}%',
              ratio   : '{value} of {total}'
            }
            

          		
          Text content for each state, uses simple templating with {percent}, {value}, {total}
        

        

          regExp
          
            

            regExp: {
              variable: /\{\$*[A-z0-9]+\}/g
            }
            

          		
          Regular expressions used by module
        

        

          selector
          
            

            selector : {
              bar      : '> .bar',
              label    : '> .label',
              progress : '.bar > .progress'
            }
            

          		
          Selectors used by module
        

        

          metadata
          
            

            metadata: {
              percent : 'percent',
              total   : 'total',
              value   : 'value'
            }
            

          		
          DOM metadata used by module
        

        

          className
          
            

            className : {
              active  : 'active',
              error   : 'error',
              success : 'success',
              warning : 'warning'
            }
            

          		
          Class names used to attach style to state
        

      
    


    


    

      Debug Settings
      
Debug settings controls debug output to the console

    


    

      
        

          Setting
          Default
          Description
        

      
      
        

          name
          Progress
          Name used in debug logs
        

        

          silent
          False
          Silences all console output including error messages, regardless of other debug settings.
        

        

          debug
          False
          Provides standard debug output to console
        

        

          performance
          True
          Provides standard debug output to console
        

        

          verbose
          True
          Provides ancillary debug output to console
        

        

          errors
          
            

            error    : {
              method     : 'The method you called is not defined.',
              nonNumeric : 'Progress value is non numeric'
            }
            

          		
        

      
    

  






================================================
FILE: server/documents/modules/rating.html.eco
================================================
---
layout      : 'default'
css         : 'rating'
standalone  : true

element     : 'rating'
elementType : 'module'

title       : 'Rating'
description : 'A rating indicates user interest in content'
type        : 'UI Module'

themes      : ['Default']
---

<%- @partial('header', { tabs: 'module' }) %>







  


    
Types


    

      
Rating
        Flexbox
      

      
A basic rating 

      

    


    

      
Star

      
A rating can use a set of star icons


      Rating
      

    


    

      
Heart

      
A rating can use a set of heart icons

      

    


    
Variations


    

      
Size

      
A rating can vary in size

      

      


      

      


      

      


      

      


      

      


      

      


      

    

  


  


    
Examples


    

      
Setting existing values

      
The starting rating can be set either using metadata value data-rating or the setting initialRating.
      
The maximum rating can be be set using the metadata value data-max-rating or the settings maxRating, or you can just include the icon HTML yourself on initialization to avoid the overhead of the DOM template insertions. 

      
If a metadata rating is specified it will automatically override the default value specified in Javascript.

      

      $('.toggle.example .rating')
        .rating({
          initialRating: 2,
          maxRating: 4
        })
      ;
      

      

        

          
          

            

              New York Dog Fair
              

            

            A fun day at the fair
          

        

        

          
          

            

              Dog Appreciation Day
              

            

            I'd like to tell your dog he's great
          

        

      

    


    

      
Read-Only Ratings

      
You can disable or enable interactive rating

      

      $('.toggle.example .rating')
        .rating('disable')
      ;
      

      

      $('.toggle.example .rating')
        .rating('enable')
      ;
      

      

        
        
        
        
        
      

    


    

      
Clearing Ratings

      
When clearable is set to true you can clear the rating by clicking on the current start rating.

      

      $('.clearing.example .rating')
        .rating('setting', 'clearable', true)
      ;
      

      

        
        
        
        
        
      

    

  


  


    
Initializing


    

      
Metadata

      
You can specify the starting rating, and max rating in metadata.
      

        $('.ui.rating')
          .rating()
        ;
      

      

        

      

    


    

      
Javascript

      
You can specify the rating values in Javascript

      

        $('.ui.rating')
          .rating({
            initialRating: 3,
            maxRating: 5
          })
        ;
      

      

        

      

    


    
Behaviors


    
All the following behaviors can be called using the syntax:

    

    $('.ui.rating')
      .rating('behavior name', argumentOne, argumentTwo)
    ;
    


    

      
        
Behavior
        Description
      

      
        

          set rating(rating)
          Sets rating programmatically
        

        

          get rating
          Gets current rating
        

        

          disable
          Disables interactive rating mode
        

        

          enable
          Enables interactive rating mode
        

        

          clear rating
          Clears current rating
        

      
    

  


  

    

      Rating Settings
      
Rating settings modify the rating's behavior

    

    

      
        
Setting
        Default
        Description
      

      
        

          initialRating
          0
          A number representing the default rating to apply
        

        

          fireOnInit
          false
          Whether callbacks like onRate should fire immediately after initializing with the current value.
        

        

          clearable
          auto
          By default a rating will be only clearable if there is 1 icon. Setting to true/false will allow or disallow a user to clear their rating
        

        

          interactive
          true
          Whether to enable user's ability to rate
        

      
    


    

      Callbacks
      
Callbacks specify a function to occur after a specific behavior.

    

    

      
        
Setting
        Context
        Description
      

      
        

          onRate(value)
          Rating
          Is called after user selects a new rating
        

      
    


    

      DOM Settings
      
DOM settings specify how this module should interface with the DOM

    

    

      
        
Setting
        Default
        Description
      

      
        

          namespace
          rating
          Event namespace. Makes sure module teardown does not effect other events attached to an element.
        

        

          selector
          
            

      selector  : {
        icon : '.icon'
      }
            

          		
        

        

          className
          
            

      className : {
        active     : 'active',
        hover      : 'hover',
        loading    : 'loading'
      },
            

          		
        

      
    



    

      Debug Settings
      
Debug settings controls debug output to the console

    

    

      
        
Setting
        Default
        Description
      

      
        

          name
          Rating
          Name used in debug logs
        

        

          silent
          False
          Silences all console output including error messages, regardless of other debug settings.
        

        

          debug
          False
          Provides standard debug output to console
        

        

          performance
          True
          Provides standard debug output to console
        

        

          verbose
          True
          Provides ancillary debug output to console
        

        

          error
          
            

      error   : {
        action    : 'You called a rating action that was not defined'
      }
            

          		
        

      
    

  






================================================
FILE: server/documents/modules/search.html.eco
================================================
---
layout      : 'default'
css         : ''
element     : 'search'
elementType : 'module'
standalone  : true

title       : 'Search'
description : 'A search module allows a user to query for results from a selection of data'
type        : 'UI Module'
---




<%- @partial('header', { tabs: { definition: 'Definition', examples: 'Examples', usage: 'Usage', settings: 'Settings'} }) %>




  


    
Types


    

      
Standard

      
A search can display a set of results

      

        
        

      

    


    

      

        Using a ui input allows you to use additional input types, like this icon input
      

      

        

          
          
        

        

      

    



    

      
Category

      
A search can display results from remote content ordered by categories

      

        

          
          
        

        

      

    



    

      
Local Search

      
A search can look for results inside a static local source.

      

        By default, results will return content first that begin with the query text, but also afterward content that matches the query anywhere inside. To disable full text search you can specify in settings fullTextSearch: false.
      

      

        

          
          
        

        

      

      

        $('.ui.search')
          .search({
            source: content
          })
        ;
      

      
    



    

      

        Local Category Search
        
New in 2.3

      

      
A search can look for category results inside a static local source.

      

        By default, results will return content first that begin with the query text, but also afterward content that matches the query anywhere inside. To disable full text search you can specify in settings fullTextSearch: false.
      

      

        

          
          
        

        

      

      

        $('.ui.search')
          .search({
            type: 'category',
            source: categoryContent
          })
        ;
      

      
    


    

    
States

    

      
Loading

      
A search can show a loading indicator

      

        

          
          
        

        

      

    


    
Variations


    

      

        Disabled
        
New in 2.3.1

      

      
A search can show it is currently unable to be interacted with

      

        

          
          
        

        

      

    


    

      
Fluid

      
A search can have its results take up the width of its container

      

        

          
          
        

        

      

    


    

      
Aligned

      
A search can have its results aligned to its left or right container edge

      

        

          
          
        

        

      

    


  


  


    
Initializing


    

      Search is built ontop of Semantic API behaviors to allow for URL templating, and UI state management. Please check out the API documentation for more information on adjusting API settings.
    


    
Automatic Routing

    
By default search will automatically route to the named API endpoint 'search'

    

      // initializes with default endpoint /search/{query}
      $('.ui.search')
        .search({
          type: 'category'
        })
      ;
    


    
Named URL

    
You can specify custom API settings to adjust the url, callback settings, or specify a different API action.

    


      $('.ui.search')
        .search({
          // change search endpoint to a custom endpoint by manipulating apiSettings
          apiSettings: {
            url: 'custom-search/?q={query}'
          },
          type: 'category'
        })
      ;
    


    
Local Object

    
Local search results allow you to search across specified properties of a javacript object literal looking for matching values

    

      You can set which fields are searchable using the searchFields setting. Local object search can only display standard search results (not categories).
    

    

      // searches across any array/object of searchable objects
      var
        content = [
          {
            title: 'Horse',
            description: 'An Animal',
          },
          {
            title: 'Cow',
            description: 'Another Animal',
          }
        ]
      ;
      $('.ui.search')
        .search({
          source : content,
          searchFields   : [
            'title'
          ],
          fullTextSearch: false
        })
      ;
    


    
Server Responses


    
You may also consider adding a top level property like success: true and using API's successTest parameter to determine whether a server response is actually succesful, even if it returns the correct HTTP code


    
Standard

    

      {
        "results": [
          {
            "title": "Result Title",
            "url": "/optional/url/on/click",
            "image": "optional-image.jpg",
            "price": "Optional Price",
            "description": "Optional Description"
          },
          {
            "title": "Result Title",
            "description": "Result Description"
          }
        ],
        // optional action below results
        "action": {
          "url": '/path/to/results',
          "text": "View all 202 results"
        }
      }
    



    
Category

    

      {
        "results": {
          "category1": {
            "name": "Category 1",
            "results": [
              {
                "title": "Result Title",
                "url": "/optional/url/on/click",
                "image": "optional-image.jpg",
                "price": "Optional Price",
                "description": "Optional Description"
              },
              {
                "title": "Result Title",
                "url": "/optional/url/on/click",
                "image": "optional-image.jpg",
                "price": "Optional Price",
                "description": "Optional Description"
              }
            ]
          },
          "category2": {
            "name": "Category 2",
            "results": [
              {
                "title": "Result Title",
                "url": "/optional/url/on/click",
                "image": "optional-image.jpg",
                "price": "Optional Price",
                "description": "Optional Description"
              }
            ]
          }
        },
        // optional action below results
        "action": {
          "url": '/path/to/results',
          "text": "View all 202 results"
        }
      }
    



    
Retreiving Results


    
Unique IDs

    
If no id property is included on a result, a key will automatically be generated when your results are returned for each result.

    
IDs are generated using the position in the results, for example the first element will receive the id 1, and the first category result will receive the id a1.

    
An id or search result title can then be used with get result(value) to return the result object.
    

    

      // get result from current query results with the title cat
      $('.ui.search')
        .search('get result', 'cat')
      ;
      // get first result from first category with category search
      $('.ui.search')
        .search('get result', 'a1')
      ;
      // get first result from standard search
      $('.ui.search')
        .search('get result', '1')
      ;
    



    
Behaviors


    
All the following behaviors can be called using the syntax:

    

    $('.your.element')
      .search('behavior name', argumentOne, argumentTwo)
    ;
    


    

      
        
Behavior
        Description
      

      
        

          query (callback)
          Search for value currently set in search input
        

        

          display message(text, type)
          Displays message in search results with text, using template matching type
        

        

          cancel query
          Cancels current remote search query
        

        

          search local(query)
          Search local object for specified query and display results
        

        

          has minimum characters
          Whether has minimum characters
        

        

          search remote(query, callback)
          Search remote endpoint for specified query and display results
        

        

          search object(query, object, searchFields)
          Search object for specified query and return results
        

        

          cancel query
          Cancels current remote search request
        

        

          is focused
          Whether search is currently focused
        

        

          is visible
          Whether search results are visible
        

        

          is empty
          Whether search results are empty
        

        

          get value
          Returns current search value
        

        

          get result(value)
          Returns JSON object matching searched title or id (see above)
        

        

          set value(value)
          Sets search input to value
        

        

          read cache(query)
          Reads cached results for query
        

        

          clear cache(query)
          Clears value from cache, if no parameter passed clears all cache
        

        

          write cache(query)
          Writes cached results for query
        

        

          add results(html)
          Adds HTML to results and displays
        

        

          show results(callback)
          Shows results container
        

        

          hide results(callback)
          Hides results container
        

        

          generate results(response)
          Generates results using parser specified by settings.template
        

        

          destroy
          Removes all events
        

      
    



  


  


    
Examples


    

      
Using Different Response Fields

      
Search expects a very specific API response, however you can easily modify the mapping of server response to displayed field using the fields parameter.
      

      $('.ui.search')
        .search({
          apiSettings: {
            url: '//api.github.com/search/repositories?q={query}'
          },
          fields: {
            results : 'items',
            title   : 'name',
            url     : 'html_url'
          },
          minCharacters : 3
        })
      ;
      

      

        

          
          
        

      

    


    

      
Using API Settings

      
API provides a callback onResponse that can be used to restructure third party APIs to match the expected server response for search.

      
You can also use mockResponseAsync to use a custom backend for fullfilling searches.

      

        

          
          
        

      

      

      $('.ui.search')
        .search({
          type          : 'category',
          minCharacters : 3,
          apiSettings   : {
            onResponse: function(githubResponse) {
              var
                response = {
                  results : {}
                }
              ;
              // translate GitHub API response to work with search
              $.each(githubResponse.items, function(index, item) {
                var
                  language   = item.language || 'Unknown',
                  maxResults = 8
                ;
                if(index >= maxResults) {
                  return false;
                }
                // create new language category
                if(response.results[language] === undefined) {
                  response.results[language] = {
                    name    : language,
                    results : []
                  };
                }
                // add result to category
                response.results[language].results.push({
                  title       : item.name,
                  description : item.description,
                  url         : item.html_url
                });
              });
              return response;
            },
            url: '//api.github.com/search/repositories?q={query}'
          }
        })
      ;
      

    

  


  

    

      Search
    


    

      Behavior
    

    

      
        

        Default
        Description
      

      
        

          apiSettings
          
          

          {
            action: 'search'
          }
          

          		
          Settings for API call.
        

        

          minCharacters
          1
          Minimum characters to query for results
        

        

          searchOnFocus
          true
          Whether search should show results on focus (must also match min character length)
        

        

          transition
          
            fade
          
          Named transition to use when animating menu in and out. Fade and slide down are available without including ui transitions
        

        

          duration
          
            300
          
          Duration of animation events
        

        

          maxResults
          7
          Maximum results to display when using local and simple search, maximum category count for category search
        

        

          cache
          true
          Caches results locally to avoid requerying server
        

        

          source
          false
          Specify a Javascript object which will be searched locally
        

        

          selectFirstResult
          false
          Whether the search should automatically select the first search result after searching
        

        

          showNoResults
          false
          Whether a "no results" message should be shown if no results are found. (These messages can be modified using the template object specified below)
        

        

          fullTextSearch
          'exact'
          Specifying to "true" will use a fuzzy full text search, setting to "exact" will force the exact search to be matched somewhere in the string, setting to false will only match to start of string. (This setting was previously called searchFullText.)
        

        

          fields
          
            

            fields: {
              categories      : 'results',     // array of categories (category view)
              categoryName    : 'name',        // name of category (category view)
              categoryResults : 'results',     // array of results (category view)
              description     : 'description', // result description
              image           : 'image',       // result image
              price           : 'price',       // result price
              results         : 'results',     // array of results (standard)
              title           : 'title',       // result title
              action          : 'action',      // "view more" object name
              actionText      : 'text',        // "view more" text
              actionURL       : 'url'          // "view more" url
            }
            

          		
          List mapping display content to JSON property, either with API or source.
        

        

          searchFields
          
            

              [
                'title',
                'description'
              ]
            

          		
          Specify object properties inside local source object which will be searched
        

        

          hideDelay
          0
          Delay before hiding results after search blur
        

        

          searchDelay
          100
          Delay before querying results on inputchange
        

        

          easing
          
            easeOutExpo
          
          Easing equation when using fallback Javascript animation
        

      
    


    

      Callbacks
    


    

      
        

        Context
        Description
      

      
        

          onSelect(result, response)
          module
          Callback on element selection by user. The first parameter includes the filtered response results for that element. The function should return false to prevent default action (closing search results and selecting value).
        

        

          onResultsAdd(html)
          module
          Callback after processing element template to add HTML to results. Function should return false to prevent default actions.
        

        

          onSearchQuery(query)
          module
          Callback on search query
        

        

          onResults(response)
          module
          Callback on server response
        

        

          onResultsOpen
          results element
          Callback when results are opened
        

        

          onResultsClose
          results element
          Callback when results are closed
        

      
    


    

      Templates
    


    
These templates are used to generate the HTML structures for search results


    

      By specifying a search as type: 'customType', and a custom template under $.fn.search.settings.templates.customType you can create custom search results. Keep in mind that .title will be used for matching results onSelect
    

     

      
        

        Functions
      

        

          templates
          
            

            $.fn.search.settings.templates : {
              escape: function(string) {
                // returns escaped string for injected results
              },
              message: function(message, type) {
               // returns html for message with given message and type
              },
              category: function(response) {
               // returns results html for category results
              },
              standard: function(response) {
               // returns results html for standard results
              }
            }
            

          		
        

      
    


    

      Module
    


    
These settings are native to all modules, and define how the component ties content to DOM attributes, and debugging settings for the module.


    

      
        

        Default
        Description
      

      
        

          name
          Search
          Name used in log statements
        

        

          namespace
          search
          Event namespace. Makes sure module teardown does not effect other events attached to an element.
        

        

          regExp
          
            

            regExp: {
              escape     : /[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g,
              beginsWith : '(?:\s|^)'
            }
            

          		
          Regular expressions used for matching
        

        

          selector
          
            

            selector : {
              prompt       : '.prompt',
              searchButton : '.search.button',
              results      : '.results',
              category     : '.category',
              result       : '.result'
            }
            

          		
          Selectors used to find parts of a module
        

        

          metadata
          
            

            metadata: {
              cache   : 'cache',
              results : 'results'
            }
            

          		
          HTML5 metadata attributes used internally
        

        

          className
          
            

            className: {
              active  : 'active',
              empty   : 'empty',
              focus   : 'focus',
              loading : 'loading',
              pressed : 'down'
            }
            

          		
          Class names used to determine element state
        

        

          silent
          False
          Silences all console output including error messages, regardless of other debug settings.
        

        

          debug
          false
          Debug output to console
        

        

          performance
          true
          Show console.table output with performance metrics
        

        

          verbose
          false
          Debug output includes all internal behaviors
        

        

          errors
          
            

            error : {
              source      : 'Cannot search. No source used, and Semantic API module was not included',
              noResults   : 'Your search returned no results',
              logging     : 'Error in debug logging, exiting.',
              noTemplate  : 'A valid template name was not specified.',
              serverError : 'There was an issue with querying the server.',
              maxResults  : 'Results must be an array to use maxResults setting',
              method      : 'The method you called is not defined.'
            },
            

          		
        

      
    

  





================================================
FILE: server/documents/modules/shape.html.eco
================================================
---
layout      : 'default'
css         : 'shape'
standalone  : true

element     : 'shape'
elementType : 'module'

title       : 'Shape'
description : 'A shape is a three dimensional object displayed on a two dimensional plane'
type        : 'UI Module'

themes      : ['default']
---





<%- @partial('header', { tabs: 'module' }) %>




  


    
Types


    

      
Shape

      
A shape is a three dimensional object including any flat content as a side.


      

        

          

            

              

                
              

              

                
Steve Jobes

                

                  Acquaintances
                

                

                  Steve Jobes is a fictional character designed to resemble someone familiar to readers.
                

              

              

                
                  Joined in 2014
                
                
                  
                  151 Friends
                
              

            

          

          

            

              

                
              

              

                Stevie Feliciano
                

                  Joined in 2014
                

                

                  Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing.
                

              

              

                
                  
                  22 Friends
                
              

            

          

        

      

      

      

        

        

        

        

      

      

        

        

      

    


    

      
Cube

      
A cube shape is formatted so that each side is the face of a cube

      

        

          

            

              

                1
              

            

          

          

            

              

                2
              

            

          

          

            

              

                3
              

            

          

          

            

              

                4
              

            

          

          

            

              

                5
              

            

          

          

            

              

                6
              

            

          

        

      


      

      

        

        

        

        

      

      

        

        

      


    


    

      
Text

      
A text shape is formatted to allow for sides of text to be displayed


      

        
        

          
Using Shapes

          
    
            
  • A shape must have defined width and heights for each side or else text flow may change during animation
    • 
            
  • The module uses 3D transformations which are currently only supported in modern versions of Chrome, Safari, and Firefox.
    • 
          

        

      


      

        

          
Did you know? This side starts visible.

          
Help, its another side!

          
This is the last side

        

      


      

      

        

        

        

        

      

      

        

        

      

    

  


  


    
Examples


    

      
Shape Types

      
Shapes do not have to be regular or have its sides match up in length and width to animate correctly.


      
Shape

      

        
Auto

        
Square

        
Irregular

      

      

      

        

          

            
          

          

            
          

          

            
          

        

      


      

      

        

        

        

        

      

      

        

        

      

    

  


  


    
Getting Started


    

      
Required Markup

      
Shapes can have any arbitrary content, just wrap each side in side

      

        

          

            
This side starts visible.

            
This is yet another side

            
This is the last side

          

        

      

    


    


      
Animating with Javascript

      
Animations use CSS3 transitions and Javascript to set-up the correct conditions.


      
Initializing a shape

      

        $('.shape').shape();
      


      
Transitions automatically assume next side is the next sibling (or first if last element)

      

        $('.shape').shape('flip up');
      


      
To manually set the next side to appear use a selector or jQuery object

      

      $('.shape')
        .shape('set next side', '.second.side')
        .shape('flip up')
      ;
      


      
Any internal method can be invoked programmatically

      

        $('.shape').shape('repaint');
      


    


    
Behavior


    

      
All the following behaviors can be called using the syntax:

      

      $('.your.element')
        .shape('behavior name', argumentOne, argumentTwo)
      ;
      

    


    

      
        
Behavior
        Description
      

      
        

          flip up
          Flips the shape upward
        

        

          flip down
          Flips the shape downward
        

        

          flip right
          Flips the shape right
        

        

          flip left
          Flips the shape left
        

        

          flip over
          Flips the shape over clock-wise
        

        

          flip back
          Flips the shape over counter-clockwise
        

        

          set next side(selector)
          Set the next side to a specific selector
        

        

          is animating
          Returns whether shape is currently animating
        

        

          reset
          Removes all inline styles
        

        

          queue(animation)
          Queues an animationtill after current animation
        

        

          repaint
          Forces a reflow on element
        

        

          set default side
          Set the next side to next sibling to active element
        

        

          set stage size
          Sets shape to the content size of the next side
        

        

          refresh
          Refreshes the selector cache for element sides
        

        

          get transform down
          Returns translation for next side staged below
        

        

          get transform left
          Returns translation for next side staged left
        

        

          get transform right
          Returns translation for next side staged right
        

        

          get transform up
          Returns translation for next side staged up
        

        

          get transform down
          Returns translation for next side staged down
        

      
    


  


  


    

      Shape Settings
      
Shape settings modify the shape's behavior

    


    

      
        
Setting
        Default
        Description
      

      
        

          duration
          700ms
          Duration of side change animation
        

        

          width 
2.2

          initial
          
            

              
When set to next will use the width of the next side during the shape's animation.

              
When set to initial it will use the width of the shape at initialization.

              
When set to a specifix pixel height, will force the width to that height.

            

          		
        

        

          height 
2.2

          initial
          
            

              
When set to next will use the height of the next side during the shape's animation.

              
When set to initial it will use the height of the shape at initialization.

              
When set to a specifix pixel height, will force the height to that height.

            

          		
        

      
    


    


    

      Callbacks
      
Callbacks specify a function to occur after a specific behavior.

    



    

      
        
Setting
        Context
        Description
      

      
        

          beforeChange
          Next Side
          Is called before side change
        

        

          onChange
          Active Side
          Is called after visible side change
        

      
    


    


    

      DOM Settings
      
DOM settings specify how this module should interface with the DOM

    


    

      
        
Setting
        Default
        Description
      

      
        

          namespace
          shape
          Event namespace. Makes sure module teardown does not effect other events attached to an element.
        

        

          selector
          
            

            selector    : {
              sides : '.sides',
              side  : '.side'
            }
            

          		
        

        

          className
          
            

            className   : {
              animating : 'animating',
              hidden    : 'hidden',
              loading   : 'loading',
              active    : 'active'
            }
            

          		
        

      
    


    


    

      Debug Settings
      
Debug settings controls debug output to the console

    


    

      
        
Setting
        Default
        Description
      

      
        

          name
          Shape
          Name used in debug logs
        

        

          silent
          False
          Silences all console output including error messages, regardless of other debug settings.
        

        

          debug
          False
          Provides standard debug output to console
        

        

          performance
          True
          Provides standard debug output to console
        

        

          verbose
          True
          Provides ancillary debug output to console
        

        

          error
          
            

            error: {
              side   : 'You tried to switch to a side that does not exist.',
              method : 'The method you called is not defined'
            }
            

          		
        

      
    


  






================================================
FILE: server/documents/modules/sidebar.html.eco
================================================
---
layout      : 'default'
css         : 'minimal'
standalone  : true

element     : 'sidebar'
elementType : 'element'

title       : 'Sidebar'
description : 'A sidebar hides additional content beside a page.'
type        : 'UI Module'

themes      : ['Default']
---



<%- @partial('header', { tabs: 'module' }) %>




  


    
Types


    

      
Sidebar

      
A sidebar

      

        
Although sidebars can be used with any content, in most cases, sidebars are used with inverted vertical menu. Please see the usage tab for more details.

      

      

        <body>
          <div class="ui sidebar inverted vertical menu">
            <a class="item">
              1
            </a>
            <a class="item">
              2
            </a>
            <a class="item">
              3
            </a>
          </div>
          <div class="pusher">
            <!-- Site content !-->
          </div>
        </body>
      

      

      $('.ui.sidebar')
        .sidebar('toggle')
      ;
      

    

    

      

        <div class="ui left demo vertical inverted sidebar labeled icon menu">
          <a class="item">
            <i class="home icon"></i>
            Home
          </a>
          <a class="item">
            <i class="block layout icon"></i>
            Topics
          </a>
          <a class="item">
            <i class="smile icon"></i>
            Friends
          </a>
        </div>
      

      

      $('.ui.labeled.icon.sidebar')
        .sidebar('toggle')
      ;
      

    


    
States


    
Sidebar


    

      
Visible

      
A sidebar can be visible on the page

      

        To have a sidebar appear on page load simply add the class visible to the sidebar.
      

      

        

      

    


    
Pusher


    

      
Dimmed

      
A pusher can be dimmed

      

        

      

    


    
Variations


    

      
Direction

      
A sidebar can appear on different sides of the page


      

        

        

        

        

      


    


    

      
Width

      
A sidebar can specify its width

      

        A sidebar will automatically adjust its animations to match any custom size specified in CSS
      

      

        

        

        

        

        

      


    


  


  


    
Set-up


    

      
Page Structure

      
Using a sidebar requires a specific page structure. For optimal performance your page should be already set-up with this structure before initializing a sidebar.

      

        Sidebar will automatically add the correct layout on first load if it is not set-up, however fixing your page's layout on load will reduce performance and is not recommended.
      

      

        <body>
          <div class="ui sidebar">
            ...
          </div>
          <div class="pusher">
            Your site's actual content
          </div>
        </body>
      

    

    

      
Using with Menu

      
Sidebars can be any content, however the most common type of content to display off-canvas is a menu. To understand the required structure for a menu, please refer to the menu documentation.

      

        <body>
          <div class="ui left vertical menu sidebar">
            <a class="item">
              Item 1
            </a>
            <a class="item">
              Item 2
            </a>
            <a class="item">
              Item 3
            </a>
          </div>
          <div class="pusher">
            <!-- Site content !-->
          </div>
        </body>
      

    


    

      
Using Fixed Content

      
Any fixed position content that should move with page content when your sidebar is visible, should receive the class name fixed and exist as a sibling element to your sidebar.
      

        Fixed content that is not included adjacent to your pusher will lose its positioning when a sidebar is shown.
      

      

        <body>
          <div class="ui sidebar">
            ...
          </div>
          <div class="ui top fixed menu">
            ...
          </div>
          <div class="pusher">
            Your site's actual content
          </div>
        </body>
      

    


    

      
iOS Sidebars

      
Sidebars use a special fix for iOS that are added using userAgent detection.

      
This should have no meaningful affect on your code, but will prevent the canvas from incorrectly autoresizing when a sidebar opens.

      

      html.ios {
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
      }
      html.ios,
      html.ios body {
        height: initial !important;
      }
      

    


    
Behavior


    
All the following behaviors can be called using the syntax:

    

    $('.your.element')
      .sidebar('behavior name', argumentOne, argumentTwo)
    ;
    


    

      
        

          Behavior
          Description
        

      
      
        

          attach events(selector, event)
          Attaches sidebar action to given selector. Default event if none specified is toggle
        

        

          show
          Shows sidebar
        

        

          hide
          Hides sidebar
        

        

          toggle
          Toggles visibility of sidebar
        

        

          is visible
          Returns whether sidebar is visible
        

        

          is hidden
          Returns whether sidebar is hidden
        

        

          push page
          Pushes page content to be visible alongside sidebar
        

        

          get direction
          Returns direction of current sidebar
        

        

          pull page
          Returns page content to original position
        

        

          add body CSS
          Adds stylesheet to page head to trigger sidebar animations
        

        

          remove body CSS
          Removes any inline stylesheets for sidebar animation
        

        

          get transition event
          Returns vendor prefixed transition end event
        

      
    



  


  


    
Examples


    

      
Transitions

      
Not all sidebar transitions are available for every sidebar direction, or when multiple sidebars are visible at a time.

      

        
          

            
            Multiple Visible 
            Supports Vertical Sidebars
            Supports Horizontal Sidebars
          

        
        
          

            Overlay
            
            
            
          

          

            Push
            
            
            
          

          

            Scale Down
            
            
            
          

          

            Uncover
            
            
            
          

          

            Slide Along
            
            
            
          

          

            Slide Out
            
            
            
          

        
      


      

        
        
      


      

      
Direction

      

        

          Left
        

        

          Right
        

        

          Top
        

        

          Bottom
        

      


      

      
All Direction Animations

      

        Overlay
      

      

        Push
      

      

        Scale Down
      


      
Vertical-Only Animations

      

        Uncover
      

      

        Slide Along
      

      

        Slide Out
      


    


    

      
Displaying Multiple

      
Multiple sidebars can be displayed at the same time only when using a supported animation like push or overlay.

      
You may need to manually set the z-index on elements to ensure the intended sidebar element appears on top.


      

        If you are triggering multiple sidebars at the same time, its recommended to set the transition to overlay.
      


      

      // showing multiple
      $('.demo.sidebar')
        .sidebar('setting', 'transition', 'overlay')
        .sidebar('toggle')
      ;
      

    

    

      
Using a custom context

      
A sidebar can be initialized inside any element, not just a page's body.

      

        A sidebar's context cannot have any padding. You can solve this by padding its inner content, or using an additional containing element
      

      

        
          
          Menu
        
      

      

        

          
            
            Home
          
          
            
            Topics
          
          
            
            Friends
          
          
            
            History
          
        

        

          

            
Application Content

            
            
            
            
          

        

      

      

      // using context
      $('.context.example .ui.sidebar')
        .sidebar({
          context: $('.context.example .bottom.segment')
        })
        .sidebar('attach events', '.context.example .menu .item')
      ;
      

    


    

      
Triggering show/hide with other content

      
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

      

      $('.left.demo.sidebar').first()
        .sidebar('attach events', '.toggle.button')
      ;
      $('.toggle.button')
        .removeClass('disabled')
      ;
      

      

        
        Trigger Sidebar
      

    


    

      
Triggering custom behavior with other content

      
You can also specify what behavior should occur when the element is clicked

      

      $('.left.demo.sidebar').first()
        .sidebar('attach events', '.open.button', 'show')
      ;
      $('.open.button')
        .removeClass('disabled')
      ;
      

      

        
        Open Sidebar
      

    


    

      
Starting Visible

      
A sidebar can start visible by adding the class name visible

      

        You must include the class pushable on a sidebars containing element for it to appear correctly before Javascript initializes the element
      

      

        Although sidebars support any size content, sidebars that are visible on load only support standard, predefined sizes like thin or wide. This makes sure content can be positioned correctly before Javascript is available.
      

      

        

          
            
            Home
          
          
            
            Topics
          
          
            
            Friends
          
          
            
            History
          
        

        

          

            
Application Content

            
            
            
            
          

        

      

      

      // showing multiple
      $('.visible.example .ui.sidebar')
        .sidebar({
          context: '.visible.example .bottom.segment'
        })
        .sidebar('hide')
      ;
      

    


  


  


    

      Sidebar
    


    

      Behavior
    

    

      
        

          Setting
          Default
          Description
        

      
      
        

          context
          body
          Context which sidebar will appear inside
        

        

          exclusive
          false
          Whether multiple sidebars can be open at once
        

        

          closable
          true
          Whether sidebar can be closed by clicking on page
        

        

          dimPage
          true
          Whether to dim page contents when sidebar is visible
        

        

          scrollLock
          false
          Whether to lock page scroll when sidebar is visible
        

        

          returnScroll
          false
          Whether to return to original scroll position when sidebar is hidden, automatically occurs with transition: scale
        

        

          delaySetup
          false
          When sidebar is initialized without the proper HTML, using this option will defer creation of DOM to use requestAnimationFrame.
        

      
    


    


    

      Animation
    

    

      
        

          Setting
          Default
          Description
        

      
      
        

          transition
          auto
          Named transition to use when animating sidebar. Defaults to 'auto' which selects transition from defaultTransition based on direction.
        

        

          mobileTransition
          auto
          Named transition to use when animating when detecting mobile device. Defaults to 'auto' which selects transition from defaultTransition based on direction.
        

        

          defaultTransition
          
            

            {
              computer: {
                left   : 'uncover',
                right  : 'uncover',
                top    : 'overlay',
                bottom : 'overlay'
              },
              mobile: {
                left   : 'uncover',
                right  : 'uncover',
                top    : 'overlay',
                bottom : 'overlay'
              }
            }
            

          		
          Default transitions for each direction and screen size, used with transition: auto
        

        

          useLegacy
          false
          Whether Javascript animations should be used. Defaults to false. Setting to auto will use legacy animations only for browsers that do not support CSS transforms
        

        

          duration
          500
          Duration of sidebar animation when using legacy Javascript animation
        

        

          easing
          easeInOutQuint
          Easing to use when using legacy Javascript animation
        

      
    


    


    
Callbacks


    

      
        

          Setting
          Context
          Description
        

      
      
        

          onVisible
          Sidebar
          Is called when a sidebar begins animating in.
        

        

          onShow
          Sidebar
          Is called when a sidebar has finished animating in.
        

        

          onChange
          Sidebar
          Is called when a sidebar begins to hide or show
        

        

          onHide
          Sidebar
          Is called before a sidebar begins to animate out.
        

        

          onHidden
          Sidebar
          Is called after a sidebar has finished animating out.
        

      
    


    

      Module
    


    

      DOM Settings
    

    

      
        

          Setting
          Default
        

      
      
        

          namespace
          sidebar
        

        

          className
          
            

            className         : {
              active    : 'active',
              animating : 'animating',
              dimmed    : 'dimmed',
              ios       : 'ios',
              pushable  : 'pushable',
              pushed    : 'pushed',
              right     : 'right',
              top       : 'top',
              left      : 'left',
              bottom    : 'bottom',
              visible   : 'visible'
            }
            

          		
        

        

          regExp
          
            

            regExp: {
              ios    : /(iPad|iPhone|iPod)/g,
              mobile : /Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/g
            }
            

          		
        

        

          selector
          
            

            selector: {
              fixed   : '.fixed',
              omitted : 'script, link, style, .ui.modal, .ui.dimmer, .ui.nag, .ui.fixed',
              pusher  : '.pusher',
              sidebar : '.ui.sidebar'
            }
            

          		
        

      
    


    


    

      Debug
    


    

      
        

          Setting
          Default
          Description
        

      
      
        

          name
          Sidebar
          Name used in debug logs
        

        

          silent
          False
          Silences all console output including error messages, regardless of other debug settings.
        

        

          debug
          False
          Provides standard debug output to console
        

        

          performance
          True
          Provides standard debug output to console
        

        

          verbose
          True
          Provides ancillary debug output to console
        

        

          errors
          
            

            error   : {
              method       : 'The method you called is not defined.',
              pusher       : 'Had to add pusher element. For optimal performance make sure body content is inside a pusher element',
              movedSidebar : 'Had to move sidebar. For optimal performance make sure sidebar and pusher are direct children of your body tag',
              overlay      : 'The overlay setting is no longer supported, use animation: overlay',
              notFound     : 'There were no elements that matched the specified selector'
            }
            

          		
        

      
    

  






================================================
FILE: server/documents/modules/sticky.html.eco
================================================
---
layout      : 'default'
css         : 'basic minimal'
element     : 'sticky'
elementType : 'module'
standalone  : true

title       : 'Sticky'
description : 'Sticky content fixes itself to the browser viewport as content is scrolled'
type        : 'UI Module'

---



<%- @partial('header', { tabs: {  examples: 'Examples', usage: 'Usage', settings: 'Settings' } }) %>




  


    
Introduction

    


      
Sticky content stays fixed to the browser viewport while another column of content is visible on the page.

      
Although sticky content can be used inside any container, sticky pairs well with ui rail because often "stuck" content is used to occupy additional canvas space outside of the main content of a website, making sure follow up links, ads, and other ancillary content remains on screen while engaging the sites main content.


      

        The following examples may be hidden on small screen sizes. For the best experience, view these examples on a large resolution display.
      

    


    
Examples


    

      
Sticking to Adjacent Context

      
Sticky content attaches itself to the viewport when it is passed, and remains fixed to the viewport until this fixed content collides with the bottom edge of the passed context. Additional static content can exist above sticky content without affecting its position.


      

      $('.ui.sticky')
        .sticky({
          context: '#example1'
        })
      ;
      

      

        

          
          
          
          

            
Stuck Content

            
          

        

        

          

            
Stuck Content

            
          

        

        
        
        
        
        
        
        
        
        
      

    


    

      
Pushing

      
Specifying pushing: true will have the viewport "push" the sticky content depending on the scroll direction. When scrolling down content will be stuck to the top of the viewport, but in the opposite direction content is stuck to the bottom of the viewport.

      

      $('.ui.sticky')
        .sticky({
          context: '#example2',
          pushing: true
        })
      ;
      

      

        

          

            
Stuck Content

            
          

        

        

          
          
          
          

            
Stuck Content

            
          

        

        
        
        
        
        
        
        
        
        
      

    


    

      
Oversized Content


      
Sticky content that is larger than the viewport will automatically scroll independently from the context, shifting scroll direction at any time will also immediately adjust the scroll position of the fixed content.


      
This behavior makes sure users aren't required to navigate all the way to the top of the context element to see content that can't fit on-screen inside the sticky element.


      

      $('.ui.sticky')
        .sticky({
          context: '#example3'
        })
      ;
      

      
    


    


      
Sticking to Own Context


      
Sticky content without a specified context can also stick itself to its current context, although this may cause overlap issues with content.


      
Content that sticks to its own context will adjust its own layout when being "stuck". You can fix layout issues caused by this reflow by adding styles to the next element after a ui fixed sticky

      

        .ui.fixed.sticky + p {
          margin-top: 39px;
        }
      


      

      $('.ui.sticky')
        .sticky()
      ;
      

      

        

          

            Tab 1
            Tab 2
            Tab 3
          

        

        

          
          
          
          
          
          
          
          
          
        

      

    


  


  


    
Usage


    

      
Initializing

      
Sticky is initialized on content that should be stuck to viewport. Most instances require specifying a secondary context which will define the top and bottom bounds of the sticky element. Sticky content must be included inside a containing element. This container can be a ui rail or your own arbitrary container, but should exist parallel to your context.


      

        Sticky does not work in tables without using table-layout: fixed to prevent automatic resizing with content
      

      

        

          

            
          

        

        

          
        

      

      

      $('.ui.sticky')
        .sticky({
          context: '#context'
        })
      ;
      

    

    

      
Refreshing Cached Values

      
Sticky content caches its current offset on the page and other crucial values on initialization. This prevents it from having to query the DOM on each browser scroll which would drastically reduce performance.

      
Sticky uses mutation observers to adjust its position when content is added to the context, and also will automatically recalculate on browser resize, but any other changes to your page that adjust the elements context require you to refresh the sticky's position

      
Examples of changes that might affect sticky elements are:

      

        
Loading images without specified size

        
Setting CSS which adjusts the layout of the page

        
Hiding elements using Javascript

      

      
Refreshing cached values just requires calling the refresh behavior.

      

        // recalculates offsets
        $('.ui.sticky')
          .sticky('refresh')
        ;
      

    


    

      
Sticky Conditions

      
Sticky content is required to be inside its own position: relative container that is either the sticky context, or shares vertical positioning with the context element.

      
You can use ui rail or ui grid column that are in the same row to provide this set-up, or your own custom CSS

      
Sticky elements swap between being bound to the edges of their container, or fixed to the edges of the browser viewport

      

        
          

            
            Class
            Description
          

        
        
          

            Fixed Top
            ui fixed top sticky
            Element is fixed to top of viewport
          

          

            Fixed Bottom
            ui fixed bottom sticky
            Element is fixed to bottom of viewport
          

          

            Bound Top
            ui bound top sticky
            Element is bound to the top of its containing element (usually rail or column)
          

          

            Bound Bottom
            ui bound bottom sticky
            Element is bound to the bottom of its containing element (usually rail or column)
          

        
      

    

    

      
Adjusting Offset and Padding

      
If you have content fixed to the viewport it might make sense to include a top or bottom offset. An offset will adjust all values so that content does not overlap any content between the top of the browser and the specified value. A bottomOffset will do the same thing for content fixed to the bottom of the viewport.

      

      $('.ui.sticky')
        .sticky({
          offset       : 50,
          bottomOffset : 50,
          context      : '#element-to-follow'
        })
      ;
      

    


  


  


    

      Sticky Settings
      
Settings to configure sticky behavior

    

    

      
        
Setting
        Default
        Description
      

      
        

          pushing
          false
          Whether element should be "pushed" by the viewport, attaching to the bottom of the screen when scrolling up
        

        

          setSize
          true 
New in 2.2.11

          Sets size of fixed content to match its width before fixing to screen dynamically. This is used because fixed may display block or 100% width content differently than it appears before sticking.
        

        

          jitter
          5
          Sticky container height will only be set if the difference between heights of container and context is larger than this jitter value.
        

        

          observeChanges
          false
          Whether any change in context DOM should automatically refresh cached sticky positions
        

        

          context
          false
          Context which sticky element should stick to
        

        

          scrollContext
          window
          Context which sticky should attach onscroll events.
        

        

          offset
          0
          Offset in pixels from the top of the screen when fixing element to viewport
        

        

          bottomOffset
          0
          Offset in pixels from the bottom of the screen when fixing element to viewport
        

      
    


     
Callbacks

    
Callbacks specify a function to occur after a specific behavior.


    

      
        

          
          Context
          Description
        

      
      
        

          onReposition
          $module
          Callback when element is repositioned from layout change
        

        

          onScroll
          $module
          Callback when requestAnimationFrame fires from scroll handler.
        

        

          onStick
          $module
          Callback when element is fixed to page
        

        

          onUnstick
          $module
          Callback when element is unfixed from page
        

        

          onTop
          $module
          Callback when element is bound to top of parent container
        

        

          onBottom
          $module
          Callback when element is bound to bottom of parent container
        

      
    


    

      DOM Settings
      
DOM settings specify how this module should interface with the DOM

    

    

      
        
Setting
        Default
        Description
      

      
        

          namespace
          sticky
          Event namespace. Makes sure module teardown does not effect other events attached to an element.
        

        

          className
          
            

            className : {
              bound     : 'bound',
              fixed     : 'fixed',
              supported : 'native',
              top       : 'top',
              bottom    : 'bottom'
            }
            

          		
          Class names used to attach style to state
        

      
    


    


    

      Debug Settings
      
Debug settings controls debug output to the console

    


    

      
        
Setting
        Default
        Description
      

      
        

          name
          Sticky
          Name used in debug logs
        

        

          silent
          False
          Silences all console output including error messages, regardless of other debug settings.
        

        

          debug
          False
          Provides standard debug output to console
        

        

          performance
          True
          Provides standard debug output to console
        

        

          verbose
          True
          Provides ancillary debug output to console
        

        

          errors
          
            

            error         : {
              container      : 'Sticky element must be inside a relative container',
              visible        : 'Element is hidden, you must call refresh after element becomes visible',
              method         : 'The method you called is not defined.',
              invalidContext : 'Context specified does not exist',
              elementSize    : 'Sticky element is larger than its container, cannot create sticky.'
            }
            

          		
        

      
    


  







================================================
FILE: server/documents/modules/tab.html.eco
================================================
---
layout      : 'default'
css         : ''
element     : 'tab'
elementType : 'module'
standalone  : true

title       : 'Tab'
description : 'A tab is a hidden section of content activated by a menu'
type        : 'UI Module'

themes      : ['Default']
---




<%- @partial('header', { tabs: { definition: 'Definition', examples: 'Examples',  usage: 'Usage',  settings: 'Settings' } }) %>




  


    

      Type
    


    

      

        Tab
      

      
A basic tab

      
A tab is hidden by default, and will only become visible when given the class name active or when activated with Javascript. For more information, see the usage section.

      

        
Tab

      

      

        
        
      

    


    

      States
    


    

      

        Active
      

      
A tab can be activated, and visible on the page

      

        
Tab

      

      

        
        
      

    


    

      

        Loading
      

      
A tab can display a loading indicator

      

        
Tab

      

      

        
        
      

    


  


  


    
Basic Examples


    

      
Basic Tabs

      
Tabs are connecting using paths specified in the data-tab attribute. Tab is then initialized in Javascript on the activating elements.

      

        To have a tab visible on page load, add the class active to both the initializing menu and the tab.
      

      

        First
        Second
        Third
      

      

        First
      

      

        Second
      

      

        Third
      

      

      $('.menu .item')
        .tab()
      ;
      

    


    

      
Multiple Tab Groups

      
There are a several of ways to include independent tab groups on the same page, even with history. One of the easiest ways is provide a specific parent context for each tab group.

      

        If you are using tab contexts inside of tabs, you can also specify childrenOnly: true which will only look for tabs as the immediate children of the given context, or context: 'parent' a special keyword which avoids having to create unique selectors for each group.
      

      

        $('#context1 .menu .item')
          .tab({
            context: $('#context1')
          })
        ;
        $('#context2 .menu .item')
          .tab({
            // special keyword works same as above
            context: 'parent'
          })
        ;
      

      

        

          First
          Second
          Third
        

        

          

            1A
            1B
            1C
          

          
1A

          
1B

          
1C

        

        

          

            2A
            2B
            2C
          

          
2A

          
2B

          
2C

        

        

          

            3A
            3B
            3C
          

          
3A

          
3B

          
3C

        

      

      

      
      

        

          

            First
            Second
            Third
          

          

            

              1A
              1B
              1C
            

            
1A

            
1B

            
1C

          

          

            

              2A
              2B
              2C
            

            
2A

            
2B

            
2C

          

          

            

              3A
              3B
              3C
            

            
3A

            
3B

            
3C

          

        

        

        
      

    


    


      
Default Paths

      
When you specify a path like first/ after opening the tab it will look for the any child paths and open the first. In this example even if the path is first/, the tab corresponding with first/a will automatically also be open because it is the default child tab. This will work recursively for as many additional child tab groups as you include.

      
Each of these examples is initialized with a context to prevent contamination with other tab examples on this page. This is not necessary unless using multiple tab systems on a single page.

      

      $('.paths.example .menu .item')
        .tab({
          context: '.paths.example'
        })
      ;
      


      

        First
        Second
        Third
      

      

        

          1A
          1B
          1C
        

        
1A

        
1B

        
1C

      

      

        

          2A
          2B
          2C
        

        
2A

        
2B

        
2C

      

      

        

          3A
          3B
          3C
        

        
3A

        
3B

        
3C

      

    


    
Remote Examples



    

      
Retreiving Remote Content

      
Using auto: true will load the tab's path from your server with additional headers to specify an in-page request. When cache: true is set, re-opening a tab will be loaded from cache without a server request.

      

        API requests for the following example have been faked using mockResponse API setting to avoid network overhead.
      

      

      $('.dynamic.example .menu .item')
        .tab({
          cache: false,
          // faking API request
          apiSettings: {
            loadingDuration : 300,
            mockResponse    : function(settings) {
              var response = {
                first  : 'AJAX Tab One',
                second : 'AJAX Tab Two',
                third  : 'AJAX Tab Three'
              };
              return response[settings.urlData.tab];
            }
          },
          context : 'parent',
          auto    : true,
          path    : '/'
        })
      ;
      

      

        First
        Second
        Third
      

      

        
AJAX Tab One

        
        
        
      

      

      

      

      

    


    

      
Evaluating Scripts in HTML

      
By default, script tags included in HTML will only be evaluated on first load. To change this behavior you can adjust the  evaluateScripts setting.

      

      $('.eval.example .menu .item')
        .tab({
          evaluateScripts : 'once',
          context         : 'parent',
          auto            : true,
          path            : '/'
        })
      ;
      

      

        First
        Second
        Third
      

      

        
AJAX Tab One

        
        
        
      

      

      

      

      

    



    
History Examples


    

      
Using Hash History

      
For static sites, or sites that only require simple history, in-page links can be used to trigger different local tab states

      

        $('.history.example .menu .item')
          .tab({
            context : '.history.example',
            history : true
          })
        ;
      


      

        First
        Second
        Third
      

      

        

          1A
          1B
          1C
        

        
1A

        
1B

        
1C

      

      

        

          2A
          2B
          2C
        

        
2A

        
2B

        
2C

      

      

        

          3A
          3B
          3C
        

        
3A

        
3B

        
3C

      

    


    

      
Using HTML5 State

      
For sites that are able to replicate change on the server, tab can automatically map changes in tab navigation to html5 state.
      

      

        Since these docs are statically hosted on GitHub Pages, html5 state tabs are not demonstrable from the docs. You will need to try this example in your own code.
      

      

        $('.ui.menu .item')
          .tab({
            history : true,
            historyType : 'state',
            // base url for all other path changes
            path        : '/my/base/url'
          })
        ;
      

    


  



  


    
Initializing Tabs


    

      
...with Menus

      
Tabs are usually used in concert with an element that activates the tab. Tabs are initialized on the activating item instead of the tab.

      
Tabs are connected to their activators with a metadata attribute data-tab. This should be added to both the activating element and the tab itself.


      

        $('.tabular.menu .item').tab();
      

      

        

          
Tab Name

          
Tab Name 2

        

        

          
        

        

          
        

      


    


    

      
...without Menus

      
If there are no menus that activate tab elements on the page, tabs can be initialized globally by using $.tab() and activated programmatically using $.tab('change tab', path);


      

        $('.ui.button')
          .on('click', function() {
            // programmatically activating tab
            $.tab('change tab', 'tab-name');
          })
        ;
      

      

        
Activate Tab

        

          
        

      

    



    

      

        
Default Tabs

        
After any tab is opened it will look for a default tab to open inside of the current tab. This is the first tab that begins with the same stem url as the parent tab. For example a tab with the path data-tab="home" might open a tab automatically data-tab="/home/inbox".

        
This will happen recursively for every tab open, allowing as many levels of tabs as you like.

      

    



    
Managing State


    

      
...with Hash Tags


      
Hash tags use in page links and onhashstatechange to create history events for each tab. This is sometimes easier to use than the more advanced push state, because it does not require you to route those URLs on your server. All in page links will route to the same url.


      

        
Tabs use Asual's Address library to provide cross-browser push state support. This is a required dependency for tabs with history to work correctly.

      


      

        $('.ui.menu .item')
          .tab({
            history: true,
            historyType: 'hash'
          })
        ;
      

    


    

      
...with HTML5 State

      
Tabs can can use html5 push state to manage page state without using #/foo links. When a user refreshes a page using push state the server will be queried for the new url. This means you must set up appropriate routes in your backend to match each link.

      

      $('.ui.menu .item')
        .tab({
          history: true,
          historyType: 'state',
          path: '/modules/tab.html'
        })
      ;
      

    


    

      
Setting Paths

      
Using historyType: state requires specifying a base URL without any internal state. This cannot be set automatically to window.location because all tabs with html5 state will appear as normal page urls, and route accordingly.

      
HTML5 state will only work with dynamic site back-ends because it requires each tab path to correctly route on the server to the appropriate content.

      

      $('.ui.menu .item')
        .tab({
          history: true,
          historyType: 'state'
          path: '/modules/tab.html'
        })
      ;
      

    


    
Using an incorrect base path is a common error when using HTML5 state, and can cause unusual behaviors.


    
AJAX Content


    

      
...with automatic routing


      
Specifying the setting auto: true, will automatically retrieve content at a remote url matching the url set in the browser.

      
So for example the tab inbox will retrieve content from the URL base-url/inbox/

      
The URL will receive an addition HTTP Header 'X-Remote': true. You can use this on your server's back-end to determine whether a request is an AJAX request from a tab, or a full page request.

      
Queries with 'X-Remote': true should refresh only the tabbed content, while queries without are normal resources and should refresh the entire page contents

      
This uses a similar technique to pJax or Rail's turbolinks.

      
There are a variety of settings for configuring dynamic content behavior. Visit the tab settings section for more information

      

      $('.dynamic.example .menu .item')
        .tab({
          context : '.dynamic.example',
          auto    : true,
          path    : '/modules/tab.html'
        })
      ;
      

    


    

      
...with an API Behavior

      
Tabs provide an optional coupling with API which allow you to specify a templated API endpoint that a tab can query

      
Tabs will automatically pass the url variable {$tab} which can be replaced for RESTful API links.

      
To learn more about API behaviors built into semantic check out the API docs

      View API Docs 
    


    
Behavior


    All the following behaviors can be called using the syntax $('.foo').tab('behavior name', argumentOne, argumentTwo)

    

      

        attach events(selector, event)
        Attaches tab action to given selector. Default event if none specified is toggle
      

      

        change tab(path)
        Changes tab to path
      

      

        set state(path)
        Sets current path to state
      

      

        get path
        Returns current path
      

      

        is tab
        Returns whether tab exists
      

      

        cache read(path)
        Returns cached HTML for path
      

      

        cache add(path, html)
        Sets cached HTML for path
      

      

        cache remove(path)
        Removes cached HTML for path
      

    

  



  


    

      Tab Settings
      
Form settings modify the tab behavior

    

    

      
        

          Setting
          Default
          Description
        

      
      
        

          auto
          false
          Whether tab should load remote content as same url as history
        

        

          deactivate
          'siblings'
          When set to siblings will only deactivate elements that are DOM siblings with the activated element. When set to all the component will deactivate all other elements initialized at the same time.
        

        

          history
          false
          Whether to record history events for tab changes
        

        

          ignoreFirstLoad
          false
          Do not load content remotely on first tab load. Useful when open tab is rendered on server.
        

        

          evaluateScripts
          once
          Whether inline scripts in tab HTML should be parsed on tab load. Defaults to once, parsing only on first load. Can also be set to true or false to always parse or never parse inline scripts.
        

        

          alwaysRefresh
          false
          Tab should reload content every time it is opened
        

        

          deactivate 
2.2

          siblings
          Can be set to either siblings or all. Siblings will only de-activate tab activators that are siblings of the clicked element when a tab is selected. All will deactivate all other tab activators initialized at the same time.
        

        

          cacheType 
2.2

          response
          Can be set to either response, DOM or html. Using DOM will cache the a clone of the DOM tree, preserving all events as they existed on render. response will cache the original response on load, this way callbacks always receive the same content. Using html will cache the resulting html after all callbacks, making sure any changes to content are preserved.
        

        

          cache
          true
          Tab should cache content after loading locally to avoid server trip on second load
        

        

          apiSettings
          false
          Settings object for $.api call
        

        

          historyType
          hash
          Can be set to hash or state. Hash will use an in-page link to create history events. State will use DOM History and load pages from server on refresh.
        

        

          path
          false
          When using historyType state you must specify the base URL for all internal links.
        

        

          context
          false
          Tabs are limited to those found inside this context
        

        

          childrenOnly
          false
          If enabled limits tabs to children of passed context
        

        

          maxDepth
          25
          Maximum amount of nested tabs allowed (avoids recursion)
        

      
    


    

    
Callbacks

    
Callbacks specify a function to occur after a specific behavior.


    

      
        

          
          Parameters
          Context
          Description
        

      
      
        

          onFirstLoad
          tabPath, parameterArray, historyEvent
          Tab
          Callback only the first time a tab is loaded
        

        

          onLoad
          tabPath, parameterArray, historyEvent
          Tab
          Callback every time a tab is loaded
        

        

          onRequest
          tabPath
          Tab
          Called when a tab begins loading remote content
        

        

          onVisible
          tabPath
          Tab
          Called after a tab becomes visible
        

      
    


    


    

      DOM Settings
      
DOM settings specify how this module should interface with the DOM

    

    

      
        

          Setting
          Default
          Description
        

      
      
        

          namespace
          tab
          Event namespace. Makes sure module teardown does not effect other events attached to an element.
        

        

          templates
          
            

            templates    : {
              // returns page title
              determineTitle: function(tabArray) {}
            }
            

          		
          Functions used to return content
        

        

          selector
          
            

            selector    : {
              tabs : '.ui.tab',
              parent : '.ui:not(.menu)'
            }
            

          		
          Selectors used by module
        

        

          metadata
          
            

            metadata : {
              tab    : 'tab',
              loaded : 'loaded',
              promise: 'promise'
            }
            

          		
          DOM metadata used by module
        

        

          className
          
            

            className   : {
              loading : 'loading',
              active  : 'active'
            }
            

          		
          Class names used to attach style to state
        

      
    


    


    

      Debug Settings
      
Debug settings controls debug output to the console

    


    

      
        

          Setting
          Default
          Description
        

      
      
        

          name
          Tab
          Name used in debug logs
        

        

          silent
          False
          Silences all console output including error messages, regardless of other debug settings.
        

        

          debug
          False
          Provides standard debug output to console
        

        

          performance
          True
          Provides standard debug output to console
        

        

          verbose
          True
          Provides ancillary debug output to console
        

        

          errors
          
            

      error: {
        api        : 'You attempted to load content without API module',
        method     : 'The method you called is not defined',
        missingTab : 'Activated tab cannot be found for this context.',
        noContent  : 'The tab you specified is missing a content url.',
        path       : 'History enabled, but no path was specified',
        recursion  : 'Max recursive depth reached',
        state      : 'The state library has not been initialized'
      }
            

          		
        

      
    

  






================================================
FILE: server/documents/modules/transition.html.eco
================================================
---
layout      : 'default'
css         : 'transition'
element     : 'transition'
elementType : 'module'
standalone  : true

title       : 'Transition'
description : 'A transition is an animation usually used to move content in or out of view'
type        : 'UI Module'
---

<%- @partial('header', { tabs: 'module' }) %>





  

    

      

        
      

    

    


      
Transitions


      

        
Scale

        
An element can scale into or out of view

        

        $('.autumn.leaf')
          .transition('scale')
        ;
        

      


      

        

          Zoom
          
New in 2.3

        

        
An element can zoom into view from far away

        

        $('.autumn.leaf')
          .transition('zoom')
        ;
        

      


      

        
Fade

        
An element can fade into or out of view descending and ascending

        

        $('.autumn.leaf')
          .transition('fade')
        ;
        

        

        $('.autumn.leaf')
          .transition('fade up')
        ;
        

        

        $('.autumn.leaf')
          .transition('fade down')
        ;
        

        

        $('.autumn.leaf')
          .transition('fade left')
        ;
        

        

        $('.autumn.leaf')
          .transition('fade right')
        ;
        

      


      

        
Flip

        
An element can flip into or out of view vertically or horizontally

        

        $('.autumn.leaf')
          .transition('horizontal flip')
        ;
        

        

        $('.autumn.leaf')
          .transition('vertical flip')
        ;
        

      


      

        
Drop

        
An element can drop into view from above 

        

        $('.autumn.leaf')
          .transition('drop')
        ;
        

      


      

        
Fly

        
An element can fly in from off canvas

        

        $('.autumn.leaf')
          .transition('fly left')
        ;
        

        

        $('.autumn.leaf')
          .transition('fly right')
        ;
        

        

        $('.autumn.leaf')
          .transition('fly up')
        ;
        

        

        $('.autumn.leaf')
          .transition('fly down')
        ;
        

      


      

        
Swing

        
An element can swing into view

        

        $('.autumn.leaf')
          .transition('swing left')
        ;
        

        

        $('.autumn.leaf')
          .transition('swing right')
        ;
        

        

        $('.autumn.leaf')
          .transition('swing up')
        ;
        

        

        $('.autumn.leaf')
          .transition('swing down')
        ;
        

      



      

        
Browse


        
An element can appear and disappear as part of a series

        

        $('.autumn.leaf')
          .transition('browse')
        ;
        

        

        $('.autumn.leaf')
          .transition('browse right')
        ;
        

      


      

        
Slide

        
An element can appear to slide in from above or below
        

        $('.autumn.leaf')
          .transition('slide down')
        ;
        

        

        $('.autumn.leaf')
          .transition('slide up')
        ;
        

        

        $('.autumn.leaf')
          .transition('slide left')
        ;
        

        

        $('.autumn.leaf')
          .transition('slide right')
        ;
        

      


      
Static Animations


      

        
Jiggle

        
An element can jiggle to draw attention to its shape

        

        $('.autumn.leaf')
          .transition('jiggle')
        ;
        

      

      

        
Flash

        
An element can flash to draw attention to itself

        

        $('.autumn.leaf')
          .transition('flash')
        ;
        

      

      

        
Shake

        
An element can shake to draw attention to its position

        

        $('.autumn.leaf')
          .transition('shake')
        ;
        

      

      

        
Pulse

        
An element can pulse to draw attention to its visibility

        

        $('.autumn.leaf')
          .transition('pulse')
        ;
        

      

      

        
Tada

        
An element can give user positive feedback for an action

        

        $('.autumn.leaf')
          .transition('tada')
        ;
        

      

      

        
Bounce

        
An element can bounce to politely remind you of itself

        

        $('.autumn.leaf')
          .transition('bounce')
        ;
        

      

      

        

          Glow
          
New in 2.3

        

        
An element can glow to show its position in a page.

        

        $('.autumn.leaf')
          .transition('glow')
        ;
        

      


    

  

  

    

      

        
      

    

    

      
Visibility

      
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.

      

      $('.long.leaf.image')
        .transition('scale')
      ;
      


      
Specifying a direction

      
To force an animation direction, add either in or out to the animation name.

      

      $('.long.leaf.image')
        // if a direction if specified it will be obeyed
        .transition('horizontal flip in')
        .transition('vertical flip in')
      ;
      


      
Automatic Direction


      
If an animation direction is not specified it will automatically be determined based on the elements current visibility. For example, if the element is visible the animation "fade out" will be called, if the animation is not visible "fade in".


      

      $('.long.leaf.image')
        // fade up out is used if available
        .transition('fade up')
        // this is now fade up in
        .transition('fade up')
      ;
      


      
Grouped Transitions


      
Animation Intervals

      
When animating several different items in a group you may want to use an interval so that each item appears consecutively

      

      $('.jiggle.images .image')
        .transition({
          animation : 'jiggle',
          duration  : 800,
          interval  : 200
        })
      ;
      

      

        
        
        
      

      
Animation Order

      
When hiding groups of elements, the default setting uses reverse: 'auto'. This will automatically reverse the order of animations from back-to-front when hiding elements to avoid layout reflows. When showing elements the order will return to its normal sequence.

      

      $('.sequenced.images .image')
        .transition({
          animation : 'scale',
          reverse   : 'auto', // default setting
          interval  : 200
        })
      ;
      

      

        
        
        
        
        
        
      


      
Forcing Order

      
If you need to manually force reverse animations regardless of the animation direction, you can use reverse: true.

      

      $('.reverse.images .image')
        .transition({
          animation : 'pulse',
          reverse   : true,
          interval  : 200
        })
      ;
      

      

        
        
        
      


      
Static Animations

      
Animations that do not have an in or out animation defined, will maintain their current visibility after running

      

      $('.long.leaf.image')
        .transition('pulse')
      ;
      


      
Looping

      
Animation loops can be controlled by setting looping. Callbacks will occur after each loop cycle

      

      $('.long.leaf.image')
        .transition('set looping')
        .transition('bounce', '2000ms')
      ;
      

      

      $('.long.leaf.image')
        .transition('remove looping')
      ;
      

    

  



  

    

      

        
      

    

    

      
Introduction


      
UI Transitions provide a wrapper for using CSS transitions in Javascript providing cross-browser callbacks, advanced queuing, and feature detection.

      
Transitions are loosely coupled with other ui modules like dropdowns and modals to provide element transitions


      
Types

      
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.


      
Usage


      
Initializing


      
If a transition is called without any arguments all default settings will be used.


      

      $('.green.leaf')
        // default everything
        .transition()
      ;
      


      
Passing in settings

      
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.

      

      $('.green.leaf')
        .transition({
          animation  : 'scale',
          duration   : '2s',
          onComplete : function() {
            alert('done');
          }
        })
      ;
      


      
Display Type


      
Animations can be used on any display type not just block level elements. For example you can animate a button while preserving its inline-block status.

      

      $('.test.button')
        .transition('horizontal flip', '500ms')
      ;
      

      

      

         Sign-up
      


      
Queuing animations


      
Animations called in sequence will be queued. Any queued animation will automatically determine the transition direction if none is specified.

      

      $('.green.leaf')
        .transition('horizontal flip', '500ms')
        .transition('horizontal flip', 500, function() {
          alert('done!');
        })
      ;
      



      
Stopping Animations


      
Animations can be stopped using three methods. stop will end the current animation, stop all will end animation and remove queued animations, and clear queue will continue the current playback but remove queued animations.


      

      // only first horizontal flip cancelled
      $('.green.leaf')
        .transition('horizontal flip')
        .transition('horizontal flip')
        .transition('horizontal flip')
        .transition('stop')
        .transition('vertical flip')
      ;
      

      

      // all horizontal flip cancelled
      $('.green.leaf')
        .transition('horizontal flip')
        .transition('horizontal flip')
        .transition('horizontal flip')
        .transition('stop all')
        .transition('vertical flip')
      ;
      

      

      // all queued animations cancelled
      $('.green.leaf')
        .transition('horizontal flip')
        .transition('horizontal flip')
        .transition('vertical flip')
        .transition('clear queue')
      ;
      


      
Hide/Show Without Transition


      
You can use transitions show and hide behavior to hide content without animation. This will preserve the display type, like flex or table-cell of an element just like animations.


      
Transition only use inline styles when an element's final display state is not block, or when an element cannot be hidden without an inline override.


      

      $('.demo.table tr:last-child')
        .transition('toggle')
      ;
      

      

      $('.demo.table td:last-child')
        .transition('hide')
      ;
      


      

        
          

            John Lilki
            jhlilk22@yahoo.com
            No
          

          

            Jamie Harington
            jamieharingonton@yahoo.com
            Yes
          

          

            Jill Lewis
            jilsewris22@yahoo.com
            Yes
          

        
      


      
Behavior


      
All the following behaviors can be called using the syntax:

      

      $('.your.element')
        .transition('behavior name', argumentOne, argumentTwo)
      ;
      


      

        
          

          Behavior
          Description
          

        
        
          

            stop
            Stop current animation and preserve queue
          

          

            stop all
            Stop current animation and queued animations
          

          

            clear queue
            Clears all queued animations
          

          

            show
            Stop current animation and show element
          

          

            hide
            Stop current animation and hide element
          

          

            toggle
            Toggles between hide and show
          

          

            force repaint
            Forces reflow using a more expensive but stable method
          

          

            repaint
            Triggers reflow on element
          

          

            reset
            Resets all conditions changes during transition
          

          

            looping
            Enables animation looping
          

          

            remove looping
            Removes looping state from element
          

          

            disable
            Adds disabled state (stops ability to animate)
          

          

            enable
            Removes disabled state
          

          

            set duration(duration)
            Modifies element animation duration
          

          

            save conditions
            Saves all class names and styles to cache to be retrieved after animation
          

          

            restore conditions
            Adds back cached names and styles to element
          

          

            get animation name
            Returns vendor prefixed animation property for animationname
          

          

            get animation event
            Returns vendor prefixed animation property for animationend
          

          

            is visible
            Returns whether element is currently visible
          

          

            is animating
            Returns whether transition is currently occurring
          

          

            is looping
            Returns whether animation looping is set
          

          

            is supported
            Returns whether animations are supported
          

        
      

    

  


  


    

      Transition Settings
      
Form settings modify the transition behavior

    

    

      
        

        Setting
        Default
        Description
        

      
      
        

          animation
          fade
          Named animation event to used. Must be defined in CSS.
        

        

          interval
          0
          Interval in MS between each elements transition
        

        

          reverse
          auto
          When an interval is specified, sets order of animations. auto reverses only animations that are hiding.
        

        

          displayType
          false
          Specify the final display type (block, inline-block etc) so that it doesn't have to be calculated.
        

        

          duration
          500ms
          Duration of the CSS transition animation
        

        

          useFailSafe
          true
          If enabled a timeout will be added to ensure animationend callback occurs even if element is hidden
        

        

          allowRepeats
          false
          If enabled will allow same animation to be queued while it is already occurring
        

        

          queue
          true
          Whether to automatically queue animation if another is occurring
        

      
    


    


    

      Callbacks
      
Callbacks specify a function to occur after a specific behavior.

    


    

      
        

        Setting
        Context
        Description
        

      
      
        

          onShow
          transitioned element
          Callback on each transition that changes visibility to shown
        

        

          onHide
          transitioned element
          Callback on each transition that changes visibility to hidden
        

        

          onStart
          transitioned element
          Callback on animation start, useful for queued animations
        

        

          onComplete
          transitioned element
          Callback on each transition complete
        

      
    


    


    

      DOM Settings
      
DOM settings specify how this module should interface with the DOM

    

    

      
        

        Setting
        Default
        Description
        

      
      
        

          namespace
          transition
          Event namespace. Makes sure module teardown does not effect other events attached to an element.
        

        

          className
          
            

  className   : {
    animating  : 'animating',
    disabled   : 'disabled',
    hidden     : 'hidden',
    inward     : 'in',
    loading    : 'loading',
    looping    : 'looping',
    outward    : 'out',
    transition : 'transition',
    visible    : 'visible'
  }
            

          		
          Class names used to attach style to state
        

      
    


    


    

      Debug Settings
      
Debug settings controls debug output to the console

    


    

      
        

        Setting
        Default
        Description
        

      
      
        

          name
          Transition
          Name used in debug logs
        

        

          silent
          False
          Silences all console output including error messages, regardless of other debug settings.
        

        

          debug
          False
          Provides standard debug output to console
        

        

          performance
          True
          Provides standard debug output to console
        

        

          verbose
          True
          Provides ancillary debug output to console
        

        

          errors
          
            

  errors   : {
    noAnimation : 'There is no CSS animation matching the one you specified.',
    method      : 'The method you called is not defined'
  }
            

          		
        

      
    

  






================================================
FILE: server/documents/test.html.eco
================================================
---
layout     : 'blank'
css        : 'hotfix'
standalone : true

title      : 'Layout Page'
description: 'This page can be used to help make adjustments to the global docs layout partials'
type       : 'Library'
---




  <%- @partial('meta') %>
  <%- @partial('javascript') %>
  <%- @partial('css') %>
  <%- @partial('tracking') %>
  <%- @partial('transifex') %>


  <% if @document.element is 'sidebar': %>
  <%- @partial('demo-sidebar') %>
  <% end %>
  <%- @partial('sidebar') %>
  <%- @partial('fixed-menu') %>
  

    

      

<% uiGlobals         = @getCollection("documents").findAll({type: $in: ['UI Global']},[{title: 1}]).toJSON() %>
<% uiElements        = @getCollection("documents").findAll({type: $in: ['UI Element']},[{title: 1}]).toJSON() %>
<% uiCollections     = @getCollection("documents").findAll({type: $in: ['UI Collection']},[{title: 1}]).toJSON() %>
<% uiViews           = @getCollection("documents").findAll({type: $in: ['UI View']},[{title: 1}]).toJSON() %>
<% uiModules         = @getCollection("documents").findAll({type: $in: ['UI Module']},[{title: 1}]).toJSON() %>
<% uiBehavior        = @getCollection("documents").findAll({type: $in: ['UI Behavior']},[{title: 1}]).toJSON() %>



  
    
    Getting Started
  
  

    
Examples

    

      
        Layouts
      
      
        UI
      
    

  

  

    
Globals

    

      <% for element in uiGlobals: %>
        
          <%= element.title %>
          <% if element.status?: %>
          
          <% end %>
        
      <% end %>
    

  

  

    
Elements

    

      <% for element in uiElements: %>
        
          <%= element.title %>
          <% if element.status?: %>
          
          <% end %>
        
      <% end %>
    

  

  

    
Collections

    

      <% for element in uiCollections: %>
        
          <%= element.title %>
          <% if element.status?: %>
          
          <% end %>
        
      <% end %>
    

  

  

    
Views

    

      <% for element in uiViews: %>
        
          <%= element.title %>
          <% if element.status?: %>
          
          <% end %>
        
      <% end %>
    

  

  

    
Modules

    

      <% for element in uiModules: %>
        
          <%= element.title %>
          <% if element.status?: %>
          
          <% end %>
        
    <% end %>
    

  

  

    
Behaviors

    

      <% for element in uiBehavior: %>
        
          <%= element.title %>
          <% if element.status?: %>
          
          <% end %>
        
      <% end %>
    

  



      

      

        <% @tabs = {  definition: 'Definition', examples: 'Examples', usage: 'Usage', settings: 'Settings' } if @tabs == 'module' %>
        <% @tabs = {  overview: 'Overview', usage: 'Usage', examples: 'Examples', settings: 'Settings' } if @tabs == 'behavior' %>
        

          

            


              

                <%=@document.title %>
                <% if @document.status?: %><%= @document.status %><% end %>
                

                  <% if 'developments' in @getEnvironments(): %>
                  <% else: %>
                  
                  <% end %>
                  <%=@document.description %>
                

              


              

              

                <% if @document.type is 'UI Element' or @document.type is 'UI View' or @document.type is 'UI Collection' or @document.type is 'UI Module': %>
                
                  
                
                
                  
                
                <% end %>
                
                  
                
              

              

                
                  
                
                
              


              <% if @document.type is 'UI Module': %>
        
              <% end %>
              <% if @document.themes? && @document.themes.length > 1: %>
              

                <%= @document.themes.length %> Themes
                
              

              <% end %>
              <% if @document.type is 'UI Element' or @document.type is 'UI View' or @document.type is 'UI Collection' or @document.type is 'UI Module': %>
              

                Download
              

              

                

                  

                    
UI Framework

                    

                      
 Themable

                      
 Build Tools

                    

                    
Choose

                  

                  

                    
Standalone

                    

                      
Default Theme

                      
Precompiled

                    

                    
Choose

                  

                

                

                  

                    
Semantic UI

                    
                      Download ZIP
                    
                    Getting Started
                    
Package Managers

                    

                      

                        
                        

                          
                        

                      

                      

                        
                        

                          
                        

                      

                    

                  

                

                

                  

                    
Standalone <%=@document.title %>

                    
                      Download ZIP
                    
                    
                      View GitHub
                    
                    
Package Managers

                    

                      

                        
                        

                          
                        

                      

                      

                        
                        

                          
                        

                      

                      

                        
                        

                          
                        

                      

                    

                  

                

              

              <% end %>
            

            
            <% if @tabs?: %>
            <% index = 0 %>
            <% tabCount = 0 %>
            <% numbers = ['', '', 'two item', 'three item', 'four item', 'five item', 'six item'] %>
            <% colors = ['red', 'teal', 'blue', 'purple', 'black', 'orange'] %>
              <% for id, name of @tabs: %>
                <% tabCount++ %>
              <% end %>
              

                <% for id, name of @tabs: %>
                  <%= name %>
                  <% index++ %>
                <% end %>
              

              <% index = 0 %>
              

                <% for id, name of @tabs: %>
                  <%= name %>
                  <% index++ %>
                <% end %>
              

            <% end %>
          

        

        


          
Types


          
          

            

              Although any tag can be used for a button, it will only be keyboard focusable if you use a <button> tag or you add the property tabindex="0".
            

            
            

              Focusable
            

          


          

            
Ordinality

            
A button can be formatted to show different levels of emphasis

            
Setting your brand colors to primary and secondary color variables in site.variables will allow you to use your color theming for UI elements

            
            
          

          

            
            
          


          

            
Animated

            
A button can animate to show hidden content

            
The button will be automatically sized according to the visible content size. Make sure there is enough room for the hidden content to show

            

              
Next

              
            

            

              
              

                
              

            

            

              
Sign-up for a Pro account

              
            


          



          

            
Icon

            
A button can have only an icon

            
          


          

            
Labeled Icon

            
A button can have an icon and a label

            
            
          


          

            
Basic

            
A basic button is less pronounced

            
          

          

            
            
            
            
            
            
            
            
            
            
            
            
            
          

        

      

    

    <%- @partial('footer') %>
  


  <%- @partial('language-modal') %>
  <%- @partial('dimmer-demo') %>
  <%- @partial('less') %>





================================================
FILE: server/documents/usage/layout.html.eco
================================================
---
layout      : 'default'
css         : 'layouts'
standalone  : true
order       : 3

title       : 'Layouts'
description : 'Examples of using Semantic UI'
type        : 'Usage'
---

<%- @partial('header') %>


  
Starter

  
Examples to introduce components and their function

  

    
      

        
      

      

        
Theming

        

          Examples of many common UI components, useful for testing custom themes.
        

      

    
    
      

        
      

      

        
Responsive

        

          Patterns for adjusting display for different devices.
        

      

    
    
      

        
      

      

        
Grid

        

          An introduction to using Semantic UI grids.
        

      

    
    
      

        
      

      

        
Attached Content

        

          Examples of content that can attach to other content.
        

      

    
    
      

        
      

      

        
Bootstrap Migration

        

          Examples of replacements for components found in Bootstrap.
        

      

    
  


  
Pages

  
Starter page templates

  

    
      

        
      

      

        
Homepage

        

          A simple, responsive homepage design with sidebar.
        

      

    
    
      

        
      

      

        
Sticky Menus

        

         Using visibility APIs to fix content after passing position in page.
        

      

    
    
      

        
      

      

        
Fixed Menu

        

          Using a fixed menu with page content.
        

      

    
    
      

        
      

      

        
Login Form

        

          A full-screen login form.
        

      

    
  






================================================
FILE: server/documents/usage/theming.html.eco
================================================
---
layout      : 'default'
css         : 'theming'
standalone  : true
order       : 2

title       : 'Theming'
description : 'An introduction to theming'
type        : 'Usage'
---

<%- @partial('header') %>










  

    Preface
  


  

    
Progressive Truthfulness

    

      
[Progressive truthfulness] is perhaps a better way to build models of physical objects...Start with a model that is fully detailed but only resembles what is wanted. Then, one adjusts one attribute after another, bringing the result ever closer to the mental vision of the new creation, or to the real properties of a real-world object

      
...Starting with exemplars that themselves have consistency of style ensures that such consistency is the designer's to lose.

      Frederick Brooks - The Design of Design
    

    
Components in Semantic UI are designed to help developers adhere to progressive truthfulness in their development.

    
Instead of having to create components from a blank canvas, developers using Semantic UI only need to specify how their components should differ from the default theme using CSS variables.

    
For developers who don't have time to hone a specific look-and-feel the default theme is elegant and neutral with a legible, open source sans-serif font Lato.


  



  

    Lead By Example
  

  

    
Recreating GitHub

    
Semantic UI includes an example project designed to showcase theming. This project includes examples of creating a packaged theme, using component CSS overrides, and managing your themes with theme.config.


    
To get started click the paint can icon next to the notification button in the top right


    
The example project includes two HTML files, index.html is designed to swap themes using a sidebar, and uses precompiled CSS. static.html uses files outputted by Semantic UI and can be used alongside our gulp pipeline to try modifying themes hands on.


    
Some special things to note:


    

      
Using site.variables to modify page container sizes, default fonts, and colors

      
Using overrides with variables to add GitHub's specially formatted tab style

      
Combining multiple individual component themes together in one theme.config

      
Using a custom icon font, and modifying paths to assets.

    

    
      
      View Theming Demo
    
  


  

    Using Themes
  

  

    
Sitewide Defaults


    
Semantic UI includes twelve named colors. Components with color variations inherit these global variables when defining how colors should appear.


    
Each level of inheritance includes a special file site.variables which defines theme-wide defaults that each component can extend.


    
Global variables use higher level abstractions, to avoid tedium in having to modify multiple properties to change the appearance of an element.

    
Other button shades like those used in hover, active and focus states are created by modifying the saturation and lightness of color variables, these derived variables will automatically adjust to your new color palette.

    

    @primaryColor   : @pink;
    @secondaryColor : @grey;
    @red            : #B03060;
    @orange         : #FE9A76;
    @yellow         : #FFD700;
    @olive          : #32CD32;
    @green          : #016936;
    @teal           : #008080;
    @blue           : #0E6EB8;
    @violet         : #EE82EE;
    @purple         : #B413EC;
    @pink           : #FF1493;
    @brown          : #A52A2A;
    @grey           : #A0A0A0;
    @black          : #000000;
    


    
    
    
All Colors

    
    
    
    
    
    
    
    
    
    
    
    
    
  

  

    
Component Defaults

    
Components inherit default values from site.variables which they may redefine specifically for their component

    
For example, you could decide that instead of the boring default grey checkboxes, you want yours to include your site's branded colors. This can be accomplished in just a few variables.

    

      /* Checkbox */
      @checkboxActiveBackground: @primaryColor;
      @checkboxActiveBorderColor: @primaryColor;
      @checkboxActiveCheckColor: @white;
      /* Focused Checkbox */
      @checkboxActiveFocusBackground: @primaryColorFocus;
      @checkboxActiveFocusBorderColor: @primaryColorFocus;
      @checkboxActiveFocusCheckColor: @white;
      @checkboxTransition: none;
      /* Radio */
      @radioActiveBackground: @white;
      @radioActiveBorderColor: @primaryColor;
      @radioActiveBulletColor: @primaryColor;
      /* Focused Radio */
      @radioActiveFocusBackground: @white;
      @radioActiveFocusBorderColor: @primaryColorFocus;
      @radioActiveFocusBulletColor: @primaryColorFocus;
      /* Slider */
      @sliderOnLineColor: @primaryColor;
      /* Focused Slider */
      @sliderOnFocusLineColor: @primaryColorFocus;
    

    

      
      
    


    
    

      

        

          

            
            
          

        

        

          

            
            
          

        

        

          

            
            
          

        

        

          

            
            
          

        

      

    


    
    

      
      
    

  

  

    
Using Packaged Themes

    
When you download Semantic UI all components will be set up to use the default theme. Semantic uses a special file theme.config for controlling your project's packaged theming configuration.

    
Packaged themes are applied per component, and not globally. This means you can specify individual themes for each component, mixing and matching from available themes.

    
The default theme.config will have all component values set to default. To choose a theme, simply change a component to match the theme name.


    
For example: 

    

    /*******************************
            Theme Selection
    *******************************/

    /* Global */
    @site       : 'material';  /* Loads material site defaults */
    @reset      : 'default';

    /* Elements */
    @button     : 'github'; /* But uses them with GitHub Buttons */
    @container  : 'default';
    @divider    : 'default';
    @flag       : 'default';
    @header     : 'default';
    @icon       : 'default';
    @image      : 'default';
    @input      : 'default';
    @label      : 'default';
    @list       : 'default';
    @loader     : 'default';
    @rail       : 'default';
    @reveal     : 'default';
    @segment    : 'default';
    @step       : 'default';

    /* Collections */
    @breadcrumb : 'default';
    @form       : 'default';
    @grid       : 'default';
    @menu       : 'chubby'; /* Other UI can use different themes as well */
    @message    : 'default';
    @table      : 'default';

    /* Modules */
    @accordion  : 'default';
    @checkbox   : 'default';
    @dimmer     : 'default';
    @dropdown   : 'default';
    @embed      : 'default';
    @modal      : 'default';
    @nag        : 'default';
    @popup      : 'default';
    @progress   : 'default';
    @rating     : 'default';
    @search     : 'default';
    @shape      : 'default';
    @sidebar    : 'default';
    @sticky     : 'default';
    @tab        : 'default';
    @transition : 'default';

    /* Views */
    @ad         : 'default';
    @card       : 'default';
    @comment    : 'default';
    @feed       : 'default';
    @item       : 'default';
    @statistic  : 'default';
    

  


  

    
Browsing for Themes

    
Each UI definitions include a dropdown at the top of the page to preview themes included with the project.

    
Themes are per component, so although, for example, material themes are available for menu, button, and site, changing all values to "material" will produce an error for components which are not included in that theme.

  


  

    Composing a Component
  



  

    
Definition File

    
Each component includes a source CSS and Javascript file which declares how a components variables should affect its display on screen. Definition files are updated with each new release of Semantic UI, which may also include new variables.

    
Navigating definition files are a great way for developers who are comfortable with CSS to get an idea of how themes affect a components display.


    
Here's an abridged version of button with an explanation of each section of the file.


    


/*******************************
                Theme
*******************************/

/* Define type and element to help locate theme files */
@type    : 'element';
@element : 'button';

/* Processes Variable Inheritance */
@import (multiple) '../../theme.config';

/* Create scope */
& {

/*******************************
               Button
*******************************/

/* Define Component */
.ui.button {
  cursor: pointer;
  display: inline-block;

  min-height: 1em;

  outline: none;
  border: none;
  vertical-align: @verticalAlign;
  background: @background;
  color: @textColor;

  font-family: @fontFamily;

  margin: 0em @horizontalMargin @verticalMargin 0em;
  padding: @verticalPadding @horizontalPadding (@verticalPadding + @shadowOffset);

  text-transform: @textTransform;
  text-shadow: @textShadow;
  font-weight: @fontWeight;
  line-height: @lineHeight;
  font-style: normal;
  text-align: center;
  text-decoration: none;

  border-radius: @borderRadius;
  box-shadow: @boxShadow;

  user-select: none;
  transition: @transition;
  will-change: @willChange;

  -webkit-tap-highlight-color: @tapColor;
}

/* Additional CSS removed for brevity */

/* Load CSS Overrides and Inline */
.loadUIOverrides();

}

    

  


  

    
Theme Files

    
Themes are made up of two files: a .variables file and a .overrides file. A theme can include both variables and overrides, or just either one alone.

  

  

    
Variables Files

    
A .variables file specifies variables which should be adjusted for a theme.

    
A theme's variable file only needs to include variables which are different for a theme.

  

  

    
Override Files

    
An .overrides file specifies additional CSS rules to be added to a definition for a theme. This file also has access to all inherited variables for a component.

  


  

    Cascading Inheritance
  


  

    
Theme Inheritance

    
Themes contain three separate levels of variable inheritance.

    
Each level of inheritance corresponds to a different level of permanence for a variable.

    

      

        
        

          
Defaults

          
UI Defaults

        

      

      

        
        

          
Packaged Theme

          
Distributable Packages

        

      

    

        
        

          
Site Theme

          
Site Specific Changes

        

      

    

  


  

    
Default Theme

    

      

        
        src
      

      
      

        
        themes
      

      
      

        
        default
      

    

    
The default theme provides baseline variables for a component.

    
The best way to understand what variables are available for inclusion in a theme is to examine a component's default .variables file.

  


  

    
Packaged Theme

    

      

        
        src
      

      
      

        
        themes
      

      
      

        
        theme-name
      

    

    
Packaged themes are themes bundled together in a folder for distribution. These can be downloaded from the internet, or carried between projects.

    
Packaged themes can be used by modifying values in your theme.config file.

  


  

    
Site Theme

    

      

        
        src
      

      
      

        
        site
      

    

    
A site theme, not to be mistaken with site.variables a file located in every theme, is a special user theme that can be loaded on top of all other themes.

    
This is the best location to store changes that will be used on a single site. A site theme can be thought of as similar to a child theme in Wordpress.

    
Site theme files are optional includes and can be safely removed if you do not need to add additional changes to a component on your project.

  





================================================
FILE: server/documents/views/advertisement.html.eco
================================================
---
layout      : 'default'
css         : 'ad'

element     : 'advertisement'
elementType : 'view'

title       : 'Advertisement'
description : 'An ad displays third-party promotional content'
type        : 'UI View'

---

<%- @partial('header') %>





  
Types


  

    
Ad

    
A standard ad

    
The following example uses a basic AdSense implementation. Your code will vary depending on your ad network.

    

      
      
      
    

    

      
      
      
      
    

    
    

      

        
      

      

      
      

      
    

  


  

    
Common Units

    
An advertisement can appear in common ad unit sizes

    

      These additional examples use the test variation to appear on the page. ui ad is best used as a wrapper for third party ad network content like AdSense or DoubleClick.
    

    

    
    

    

    

  


  

    
Mobile

    
An ad can use common mobile ad sizes

    
Mobile ads will automatically only appear on mobile browser viewports

    

    
  



  

    
Rectangle

    
An ad can use a common rectangle ad unit size

    

    

  


  

    
Button

    
An ad can use button ad unit size

    

    

    

  


  

    
Skyscraper

    
An ad can use skyscraper ad unit size

    

    

  


  

    
Banner

    
An ad can use banner ad unit size

    
    
    
    
  


  

    
Leaderboards

    
An ad can use leaderboard ad unit size

    

    

    

  


  

    
Panorama

    
An ad can use panorama ad unit size

    

  


  

    
Netboard

    
An ad can use netboard ad unit size

    

  




  
Variations


  

    
Centered

    
An advertisement can appear centered

    
  


  

    
Test

    
A advertisement can be formatted to help verify placement

    
You can adjust the text displayed for your test ad placement by changing the value of data-text
    

    

    

  






================================================
FILE: server/documents/views/card.html.eco
================================================
---
layout      : 'default'
css         : 'card'
standalone  : true

element     : 'card'
elementType : 'view'

title       : 'Card'
description : 'A card displays site content in a manner similar to a playing card'
type        : 'UI View'

themes      : ['Default', 'Basic', 'Classic', 'Instagram']
---

<%- @partial('header') %>







  
Types


  

    
Card

    
A single card.

    

      To ensure cards are equal height use the plural, cards. Card groups automatically uses flex styles to match height between cards in the same row.
    

    

      

        
      

      

        Kristy
        

          Joined in 2013
        

        

          Kristy is an art director living in New York.
        

      

      

        
          
          22 Friends
        
      

    

  

  

    

      

        
14h

         Elliot
      

      

        
      

      

        
          
          17 likes
        
        
        3 comments
      

      

        

          
          
        

      

    

  


  

    
Cards

    
A group of cards.

    

      
Cards are designed to be flexible to your content. content blocks can include any custom elements related to your content.

    

    

      

        

          
          

            Elliot Fu
          

          

            Friends of Veronika
          

          

            Elliot requested permission to view your contact details
          

        

        

          

            
Approve

            
Decline

          

        

      

      

        

          
          

            Jenny Hess
          

          

            New Member
          

          

            Jenny wants to add you to the group best friends
          

        

        

          

            
Approve

            
Decline

          

        

      

    

  

  

    

      

        

          
        

        

          
Matt Giampietro

          

            Friends
          

          

            Matthew is an interior designer living in New York.
          

        

        

          
            Joined in 2013
          
          
            
            75 Friends
          
        

      

      

        

          
        

        

          
Molly

          

            Coworker
          

          

            Molly is a personal assistant living in Paris.
          

        

        

          
            Joined in 2011
          
          
            
            35 Friends
          
        

      

      

        

          
        

        

          
Elyse

          

            Coworker
          

          

            Elyse is a copywriter working in New York.
          

        

        

          
            Joined in 2014
          
          
            
            151 Friends
          
        

      

    

  


  
Content


  

    
Content Block

    
A card can contain blocks of content

    

      

        
Project Timeline

      

      

        
Activity

        

          

            

              

                 Elliot Fu added Jenny Hess to the project
              

            

          

          

            

              

                 Stevie Feliciano was added as an Administrator
              

            

          

          

            

              

                 Helen Troy added two pictures
              

            

          

        

      

      

        
      

    

  

  

    
Image

    
A card can contain an image

    
Cards can use reveal or dimmers to easily show additional content, or options on hover

    

      

        
        
      

      

        Team Fu & Hess
        

          Created in Sep 2014
        

      

      

        
          
          2 Members
        
      

    

  

  

    

    $('.special.cards .image').dimmer({
      on: 'hover'
    });
    

    

      

        

          

            

              

                
Add Friend

              

            

          

          
        

        

          Team Fu
          

            Created in Sep 2014
          

        

        

          
            
            2 Members
          
        

      

      

        

          

            

              

                
Add Friend

              

            

          

          
        

        

          Team Hess
          

            Created in Aug 2014
          

        

        

          
            
            2 Members
          
        

      

    

  


  

    
Header

    
A card can contain a header

    

      

        

          
Elliot Fu

          
Friend

          

            Elliot Fu is a film-maker from New York.
          

        

      

      

        

          
Veronika Ossi

          
Friend

          

            Veronika Ossi is a set designer living in New York who enjoys kittens, music, and partying.
          

        

      

      

        

          
Jenny Hess

          
Friend

          

            Jenny is a student studying Media Management at the New School
          

        

      

    

  


  

    
Metadata

    
A card can contain content metadata


    

      
      You can include an arbitrary amount of metadata using your own class conventions, all child elements will automatically be spaced
    

    

      

        
Cute Dog

        

          2 days ago
          Animals
        

        
      

    

  


  

    
Link

    
A card can contain contain links as images, headers, or inside content

    
To make the entire content of a card link, check out the link variation below
    

    

      
        
      
      

        Steve Jobes
        

          Last Seen 2 days ago
        

      

    

  

  

    
Buttons

    
A card can contain buttons

    

      

        

          
Elliot Fu

          

            Elliot Fu is a film-maker from New York.
          

        

        

          
          Add Friend
        

      

      

        

          
Veronika Ossi

          

            Veronika Ossi is a set designer living in New York who enjoys kittens, music, and partying.
          

        

        

          
          Add Friend
        

      

      

        

          
Jenny Hess

          

            Jenny is a student studying Media Management at the New School
          

        

        

          
          Add Friend
        

      

    

  


  

    
Approval

    
A card can contain a like or star action.

    

      

        
        
        
Cute Dog

        

          
        

      

      

        
        
          
          Favorite
        
      

    

  


  

    
Description

    
A card can contain a description with one or more paragraphs

    

      

        
Cute Dog

        
2 days ago

        

          
Cute dogs come in a variety of shapes and sizes. Some cute dogs are cute for their adorable faces, others for their tiny stature, and even others for their massive size.

          
Many people also have their own barometers for what makes a cute dog.

        

      

    

  


  

    
Extra Content

    
A card can contain extra content meant to be formatted separately from the main content

    

      

        
Cute Dog

        
2 days ago

        

          
Cute dogs come in a variety of shapes and sizes. Some cute dogs are cute for their adorable faces, others for their tiny stature, and even others for their massive size.

          
Many people also have their own barometers for what makes a cute dog.

        

      

      

        
        121 Votes
      

    


  


  
Variations


  

    
Fluid Card

    
A fluid card takes up the width of its container

    

      

        

          

            
          

          

            Daniel Louise
          

        

      

      

        

          

            
          

          

            Helen Troy
          

        

      

      

        

          

            
          

          

            Elliot Fu
          

        

      

    

  


  

    
Centered Card

    
A card can center itself inside its container


    

      

        
      

      

        Elyse
      

    

  

  

    
Raised Card

    
A card may be formatted to raise above the page.

    

      

        
Cute Dog

        

          Animals
        

        

          
        

      

      

        

           Matt
        

      

    

  

  

    

      

        
Cute Dog

        

          Animals
        

        

          
        

      

      

        

           Matt
        

      

    

  


  

    
Link Card

    
A card can be formatted so that the entire contents link to another page

    
      

        
Cute Dog

        

          Animals
        

        

          
        

      

      

        

           Matt
        

      

    
  

  

    

      

        
Cute Dog

        

          Animals
        

        

          
        

      

      

        

           Matt
        

      

    

  


  

    
Floated Content

    
Any content element can be floated left or right

    

      
      You can include an arbitrary amount of metadata using your own class conventions, all child elements will automatically be spaced
    

    

      

        
Cute Dog

        

          2 days ago
          Animals
        

        

          
        

      

      

        

           Matt
        

      

    

  


  

    
Text Alignment

    
Any element inside a card can have its text alignment specified

    

      
      You can include an arbitrary amount of metadata using your own class conventions, all child elements will automatically be spaced
    

    

      

        
Jenny Hess

        

          
Jenny is a student studying Media Management at the New School

        

      

      

        

           Jenny
        

      

    

  


  

    
Colored

    
A card can specify a color

    

      
        

          
        

      
      
        

          
        

      
      
        

          
        

      
      
        

          
        

      
      
        

          
        

      
      
        

          
        

      
      
        

          
        

      
      
        

          
        

      
      
        

          
        

      
      
        

          
        

      
      
        

          
        

      
      
        

          
        

      
      
        

          
        

      
    

  

  

    
Column Count

    
A group of cards can set how many cards should exist in a row

    

      

        

          
        

        

          Rating:
          

        

      

      

        

          
        

        

          Rating:
          

        

      

      

        

          
        

        

          Rating:
          

        

      

      

        

          
        

        

          Rating:
          

        

      

      

        

          
        

        

          Rating:
          

        

      

      

        

          
        

        

          Rating:
          

        

      

      

        

          
        

        

          Rating:
          

        

      

      

        

          
        

        

          Rating:
          

        

      

    

  


  

    
Stackable

    
A group of cards can automatically stack rows to a single columns on mobile devices

    
Resize your browser to a smaller size to see the cards stack after reaching mobile breakpoints

    

      

        

          
        

      

      

        

          
        

      

      

        

          
        

      

      

        

          
        

      

      

        

          
        

      

      

        

          
        

      

    

  


  

    
Doubling

    
A group of cards can double its column width for mobile

    
Resize your browser to a smaller size to see the cards stack after reaching mobile breakpoints

    

      

        

          
        

      

      

        

          
        

      

      

        

          
        

      

      

        

          
        

      

      

        

          
        

      

      

        

          
        

      

    

  






================================================
FILE: server/documents/views/comment.html.eco
================================================
---
layout      : 'default'
css         : 'comment'
element     : 'comment'
elementType : 'view'
standalone  : true

title       : 'Comment'
description : 'A comment displays user feedback to site content'
type        : 'UI View'

themes      : ['Default', 'Chubby']
---

<%- @partial('header') %>





  
Types


  

    
Comments

    
A basic list of comments

    

      
These examples uses ui segment to create content segments. This is not required.

    

    

      
UI Views provide structured layouts, but do not hook up site specific code. You will need to add your own Javascript behaviors to hide and show the appropriate forms. For example, having a reply button open a reply form

    

    

      
Comments

      

        
          
        
        

          Matt
          

            Today at 5:42PM
          

          

            How artistic!
          

          

            Reply
          

        

      

      

        
          
        
        

          Elliot Fu
          

            Yesterday at 12:30AM
          

          

            
This has been very useful for my research. Thanks as well!

          

          

            Reply
          

        

        

          

            
              
            
            

              Jenny Hess
              

                Just now
              

              

                Elliot you are always so right :)
              

              

                Reply
              

            

          

        

      

      

        
          
        
        

          Joe Henderson
          

            5 days ago
          

          

            Dude, this is awesome. Thanks so much
          

          

            Reply
          

        

      

      

        

          
        

        

           Add Reply
        

      

    

  

  
Content


  
Comment


  

    
Avatar

    
A comment can contain an image or avatar

    

      

        
          
        
        

          Elliot Fu
        

      

    

  


  

    
Metadata

    
A comment can contain metadata about the comment, an arbitrary amount of metadata may be defined.

    

      

        
          
        
        

          Stevie Feliciano
          

            
2 days ago

            

              
              5 Faves
            

          

          

            Hey guys, I hope this example comment is helping you read this documentation.
          

        

      

    

  


  

    
Actions

    
A comment can contain an list of actions a user may perform related to this comment.

    

      

        
          
        
        

          Tom Lukic
          

            This will be great for business reports. I will definitely download this.
          

          

            Reply
            Save
            Hide
            
              
              Full-screen
            
          

        

      

    

  


  

    
Reply Form

    
A comment can contain a form to reply to a comment. This may have arbitrary content.

    

      
If a comment form is located inside a  ui comment it will be formatted as an nested reply form. If the comment form is included after all comments, it will be formatted as a normal reply form.

    

    

      

        
          
        
        

          Steve Jobes
          

            
2 days ago

          

          

            Revolutionary!
          

          

            Reply
          

          

            

              
            

            

               Add Reply
            

          

        

      

    

  

  

    

      

        
          
        
        

          Joe Henderson
          

            
1 day ago

          

          

            
The hours, minutes and seconds stand as visible reminders that your effort put them all there. 

            
Preserve until your next run, when the watch lets you see how Impermanent your efforts are.

          

          

            Reply
          

        

      

      

        
          
        
        

          Christian Rocha
          

            
2 days ago

          

          

            I re-tweeted this.
          

          

            Reply
          

        

      

      

        

          
        

        

           Add Comment
        

      

    

  


  
States


  

    
Collapsed

    
Comments can be collapsed, or hidden from view

    

      

        
          
        
        

          Christian Rocha
          

            2 days ago
          

          

            I'm very interested in this motherboard. Do you know if it'd work in a Intel LGA775 CPU socket?
          

          

            Reply
          

        

        
      

    

  



  
Variations


  

    
Threaded

    
A comment list can be threaded to showing the relationship between conversations

    

      
Comments

      

        
          
        
        

          Matt
          

            Today at 5:42PM
          

          

            How artistic!
          

          

            Reply
          

        

      

      

        
          
        
        

          Elliot Fu
          

            Yesterday at 12:30AM
          

          

            
This has been very useful for my research. Thanks as well!

          

          

            Reply
          

        

        

          

            
              
            
            

              Jenny Hess
              

                Just now
              

              

                Elliot you are always so right :)
              

              

                Reply
              

            

          

        

      

      

        
          
        
        

          Joe Henderson
          

            5 days ago
          

          

            Dude, this is awesome. Thanks so much
          

          

            Reply
          

        

      

      

        

          
        

        

           Add Reply
        

      

    

  


  

    
Minimal

    
Comments can hide extra information unless a user shows intent to interact with a comment.

    

      
Comments

      

        
          
        
        

          Matt
          

            Today at 5:42PM
          

          

            How artistic!
          

          

            Reply
          

        

      

      

        
          
        
        

          Elliot Fu
          

            Yesterday at 12:30AM
          

          

            
This has been very useful for my research. Thanks as well!

          

          

            Reply
          

        

        

          

            
              
            
            

              Jenny Hess
              

                Just now
              

              

                Elliot you are always so right :)
              

              

                Reply
              

            

          

        

      

      

        
          
        
        

          Joe Henderson
          

            5 days ago
          

          

            Dude, this is awesome. Thanks so much
          

          

            Reply
          

        

      

      

        

          
        

        

           Add Reply
        

      

    

  


  

    
Size

    
Comments can have different sizes

    

      
Comments

      

        
          
        
        

          Matt
          

            Today at 5:42PM
          

          

            How artistic!
          

          

            Reply
          

        

      

      

        
          
        
        

          Elliot Fu
          

            Yesterday at 12:30AM
          

          

            
This has been very useful for my research. Thanks as well!

          

          

            Reply
          

        

        

          

            
              
            
            

              Jenny Hess
              

                Just now
              

              

                Elliot you are always so right :)
              

              

                Reply
              

            

          

        

      

      

        
          
        
        

          Joe Henderson
          

            5 days ago
          

          

            Dude, this is awesome. Thanks so much
          

          

            Reply
          

        

      

      

        

          
        

        

           Add Reply
        

      

    

  

  

    

      
Comments

      

        
          
        
        

          Matt
          

            Today at 5:42PM
          

          

            How artistic!
          

          

            Reply
          

        

      

      

        
          
        
        

          Elliot Fu
          

            Yesterday at 12:30AM
          

          

            
This has been very useful for my research. Thanks as well!

          

          

            Reply
          

        

        

          

            
              
            
            

              Jenny Hess
              

                Just now
              

              

                Elliot you are always so right :)
              

              

                Reply
              

            

          

        

      

      

        
          
        
        

          Joe Henderson
          

            5 days ago
          

          

            Dude, this is awesome. Thanks so much
          

          

            Reply
          

        

      

      

        

          
        

        

           Add Reply
        

      

    

  








================================================
FILE: server/documents/views/feed.html.eco
================================================
---
layout      : 'default'
css         : 'feed'
standalone  : true

title       : 'Feed'
description : 'A feed presents user activity chronologically'
type        : 'UI View'

element     : 'feed'
elementType : 'view'

themes      : ['Default', 'Timeline']
---



<%- @partial('header') %>



  
Types


  

    
Feed

    
A feed

    

      

        

          
        

        

          

            
              Elliot Fu
             added you as a friend
            

              1 Hour Ago
            

          

          

            
          

        

      

      

        

          
        

        

          

            Helen Troy added 2 new illustrations
            

              4 days ago
            

          

          

            
            
          

          

            
          

        

      

      

        

          
        

        

          

            
              Jenny Hess
             added you as a friend
            

              2 Days Ago
            

          

          

            
          

        

      

      

        

          
        

        

          

            Joe Henderson posted on his page
            

              3 days ago
            

          

          

            Ours is a life of constant reruns. We're always circling back to where we'd we started, then starting all over again. Even if we don't run extra laps that day, we surely will come back for more of the same another day soon.
          

          

            
          

        

      

      

        

          
        

        

          

            Justen Kitsune added 2 new photos of you
            

              4 days ago
            

          

          

            
            
          

          

            
          

        

      

    

  


  
Content


  

    
Label

    
An event can contain an image or icon label

    

      

        

          
        

        

          You added Elliot Fu to the group Coworkers
        

      

    

  

  

    

      

        

          
        

        

          

            You posted on your friend Stevie Feliciano's wall.
            
Today

          

        

      

    

  



  

    
Date

    
An event or an event summary can contain a date

    

      

        

          
        

        

          

            3 days ago
          

          

             You added Jenny Hess to your coworker group.
          

        

      

    

  

  

    

      

        

          
        

        

          

            You added Jenny Hess to your coworker group.
            

              3 days ago
            

          

        

      

    

  


  

    
Additional information

    
An event can contain additional information like a set of images or text

    

      

        

          
        

        

          

            3 days ago
          

          

             Helen Troy added 2 photos
          

          

            
            
          

        

      

      

        

          
        

        

          

            3 days ago
          

          

             Laura Faucet created a post
          

          

            Have you seen what's going on in Israel? Can you believe it.
          

        

      

    

  



  
Variations

  

    
Size

    
A feed can have different sizes


    

      
Followers Activity

      

        

          

             Elliot Fu added Jenny Hess as a friend
          

        

      

      

        

          

             Stevie Feliciano added Elliot Fu as a friend
          

        

      

      

        

          

             Helen Troy added Christian Rocha as a friend
          

        

      

      

        

          

             Christian Rocha signed up for the  site.
          

        

      

    

  

  

    

      

        

          
        

        

          

            
              Elliot Fu
             added you as a friend
            

              1 Hour Ago
            

          

          

            
          

        

      

      

        

          
        

        

          

            You submitted a new post to the page
            

              3 days ago
            

          

          

            I'm having a BBQ this weekend. Come by around 4pm if you can.
          

          

            
          

        

      

      

        

          
        

        

          

            4 days ago
          

          

            Helen Troy added 2 new illustrations
          

          

            
            
          

          

            
          

        

      

    


  






================================================
FILE: server/documents/views/item.html.eco
================================================
---
layout      : 'default'
css         : 'item'
standalone  : true

element     : 'item'
elementType : 'view'

title       : 'Item'
description : 'An item view presents large collections of site content for display'
type        : 'UI View'

themes      : ['Default']
---

<%- @partial('header') %>







  
Types


  

    

      Items
      Flexbox
    

    
A group of items.

    

      
      

        
Responsive Element

        
Item views are designed to be responsive with images stacking at mobile resolutions.

      

    

    

      

        

          
        

        

          Header
          

            Description
          

          

            
          

          

            Additional Details
          

        

      

      

        

          
        

        

          Header
          

            Description
          

          

            
          

          

            Additional Details
          

        

      

    

  


  
Content


  

    
Image

    
An item can contain an image

    

      

        

          
        

      

      

        

          
        

      

      

        

          
        

      

    

  


  

    
Content

    
An item can contain content

    

      

        

          
        

        

          Content A
        

      

      

        

          
        

        

          Content B
        

      

      

        

          
        

        

          Content C
        

      

    

  


  

    
Header

    
An item can contain a header

    

      

        

          
        

        

          12 Years a Slave
        

      

      

        

          
        

        

          My Neighbor Totoro
        

      

      

        

          
        

        

          Watchmen
        

      

    

  


  

    
Metadata

    
An item can contain content metadata

    

      
      You can include an arbitrary amount of metadata using your own class conventions, all child elements will automatically be spaced
    

    

      

        

          
        

        

          
Arrowhead Valley Camp

          

            $1200
            1 Month
          

          

            
          

        

      

      

        

          
        

        

          
Buck's Homebrew Stayaway

          

            $1000
            2 Weeks
          

          

            
          

        

      

      

        

          
        

        

          
Astrology Camp

          

            $1600
            6 Weeks
          

          

            
          

        

      

    

  


  

    
Link

    
An item can contain links as images, headers, or inside content

    

      
      To make the entire content of an item link, check out the link variation below
    

    

      

        
          
        
        

          Stevie Feliciano
          

            
Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing.

          

        

      

      

        
          
        
        

          Veronika Ossi
          

            
Veronika Ossi is a set designer living in New York who enjoys kittens, music, and partying.

          

        

      

      

        
          
        
        

          Jenny Hess
          

            
Jenny is a student studying Media Management at the New School.

          

        

      

    

  


  

    
Description

    
An item can contain a description with a single or multiple paragraphs

    

      

        
          
        
        

          Cute Dog
          

            
Cute dogs come in a variety of shapes and sizes. Some cute dogs are cute for their adorable faces, others for their tiny stature, and even others for their massive size.

            
Many people also have their own barometers for what makes a cute dog.

          

        

      

    

  


  

    
Extra Content

    
An item can contain extra content meant to be formatted separately from the main content

    

      

        

          Cute Dog
          

            
            
          

          

            
            121 Votes
          

        

      

    

  


  

    
Rating

    
An item can contain icons signifying a 'like' or 'favorite' action

    

      You can use the rating component to attach events to like and favorite icons
    

    

      

        
          
        
        

          

            
            Veronika Ossi
          

        

      

      

        
          
        
        

          

            
            Justen Kitsune
          

        

      

    

  



  
Variations


  

    
Stacking

    
A table can specify how it stacks items responsively

    

      

        

          
        

        

          Header
          

            Description
          

          

            
          

          

            Additional Details
          

        

      

      

        

          
        

        

          Header
          

            Description
          

          

            
          

          

            Additional Details
          

        

      

    

  



  

    
Divided

    
Items can be divided to better distinguish between grouped content

    

      
      The following example uses ui for legibility only. This is not necessary for using ui items
    


    

      

        

          
        

        

          12 Years a Slave
          

            Union Square 14
          

          

            
          

          

            
IMAX

            
 Additional Languages

          

        

      

      

        

          
        

        

          My Neighbor Totoro
          

            IFC Cinema
          

          

            
          

          

            

              Buy tickets
              
            

            
Limited

          

        

      

      

        

          
        

        

          Watchmen
          

            IFC
          

          

            
          

          

            

              Buy tickets
              
            

          

        

      

    

  


  

    
Relaxed

    
A group of items can relax its padding to provide more negative space

    

      

        

          
        

        

          12 Years a Slave
        

      

      

        

          
        

        

          My Neighbor Totoro
        

      

      

        

          
        

        

          Watchmen
        

      

    

  

  

    

      

        

          
        

        

          12 Years a Slave
        

      

      

        

          
        

        

          My Neighbor Totoro
        

      

      

        

          
        

        

          Watchmen
        

      

    

  



  

    
Link Item

    
An item can be formatted so that the entire contents link to another page

    

      

        

          
        

        

          
Stevie Feliciano

          

            
          

        

      

      

        

          
        

        

          
Veronika Ossi

          

            
          

        

      

      

        

          
        

        

          
Jenny Hess

          

            
          

        

      

    

  


  

    
Vertical Alignment

    
Content can specify its vertical alignment

    

      
      You can include an arbitrary amount of metadata using your own class conventions, all child elements will automatically be spaced
    

    

      

        

          
        

        

          

            Top Aligned
          

        

      

      

        

          
        

        

          

            Middle Aligned
          

        

      

      

        

          
        

        

          

            Bottom Aligned
          

        

      

    

  


  

    
Floated Content

    
Any content element can be floated left or right

    

      
      You can include an arbitrary amount of metadata using your own class conventions, all child elements will automatically be spaced
    

    

      

        

          
        

        

          

            Content A
          

          

            
          

          

            

              Action
            

          

        

      

      

        

          
        

        

          

            Content B
          

          

            
          

          

            

              Action
            

          

        

      

      

        

          
        

        

          

            Content C
          

          

            
          

          

            

              Action
            

          

        

      

    

  






================================================
FILE: server/documents/views/statistic.html.eco
================================================
---
layout      : 'default'
css         : 'stat'
standalone  : true

element     : 'statistic'
elementType : 'view'

title       : 'Statistic'
description : 'A statistic emphasizes the current value of an attribute'
type        : 'UI View'

themes      : ['Default']
---

<%- @partial('header') %>







  
Types


  

    
Statistic

    
A statistic can display a value with a label above or below it.

    

      

        5,550
      

      

        Downloads
      

    

  

  

    

      

        Views
      

      

        40,509
      

    

  


  

    
Statistic Group

    
A group of statistics

    

      

        

          22
        

        

          Faves
        

      

      

        

          31,200
        

        

          Views
        

      

      

        

          22
        

        

          Members
        

      

    

  


  
Content


  

    
Value

    
A statistic can contain a numeric, icon, image, or text value

    

      

        

          22
        

        

          Saves
        

      

      

        

          Three

          Thousand
        

        

          Signups
        

      

      

        

           5
        

        

          Flights
        

      

      

        

          
          42
        

        

          Team Members
        

      

    

  


  

    
Label

    
A statistic can contain a label to help provide context for the presented value

    

      

        2,204
      

      

        Views
      

    

  



  
Variations


  

    
Horizontal Statistic

    
A statistic can present its measurement horizontally

    

      

        2,204
      

      

        Views
      

    

  

  

    

      

        

          2,204
        

        

          Views
        

      

      

        

          3,322
        

        

          Downloads
        

      

      

        

          22
        

        

          Tasks
        

      

    

  


  

    
Colored

    
A statistic can be formatted to be different colors

    

      

        

          27
        

        

          Red
        

      

      

        

          8
        

        

          Orange
        

      

      

        

          28
        

        

          Yellow
        

      

      

        

          7
        

        

          Olive
        

      

      

        

          14
        

        

          Green
        

      

      

        

          82
        

        

          Teal
        

      

      

        

          1
        

        

          Blue
        

      

      

        

          22
        

        

          Violet
        

      

      

        

          23
        

        

          Purple
        

      

      

        

          15
        

        

          Pink
        

      

      

        

          36
        

        

          Brown
        

      

      

        

          49
        

        

          Grey
        

      

    

  

  

    
Inverted

    
A statistic can be formatted to fit on a dark background

    

      

        

          54
        

        

          Inverted
        

      

      

        

          27
        

        

          Red
        

      

      

        

          8
        

        

          Orange
        

      

      

        

          28
        

        

          Yellow
        

      

      

        

          7
        

        

          Olive
        

      

        

        

          14
        

        

          Green
        

      

      

        

          82
        

        

          Teal
        

      

      

        

          1
        

        

          Blue
        

      

      

        

          22
        

        

          Violet
        

      

      

        

          23
        

        

          Purple
        

      

      

        

          15
        

        

          Pink
        

      

      

        

          36
        

        

          Brown
        

      

      

        

          49
        

        

          Grey
        

      

    

  


  

    
Evenly Divided

    
A statistic group can have its items divided evenly

    

      

        

          22
        

        

          Saves
        

      

      

        

          Three

          Thousand
        

        

          Signups
        

      

      

        

           5
        

        

          Flights
        

      

      

        

          
          42
        

        

          Team Members
        

      

    

  


  

    
Floated

    
An statistic can sit to the left or right of other content


    

      

        

          2,204
        

        

          Views
        

      

      
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.


      
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.


      

        

          2,204
        

        

          Views
        

      

      
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.


      
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.


    

  


  

    
Size

    
A statistic can vary in size

    

      

        2,204
      

      

        Views
      

    

    

      

        2,204
      

      

        Views
      

    

    

      

        2,204
      

      

        Views
      

    

    

      

        2,204
      

      

        Views
      

    

    

      

        2,204
      

      

        Views
      

    

    

      

        2,204
      

      

        Views
      

    

  

  

    

    

      

        2,204
      

      

        Views
      

    

    

    

      

        2,204
      

      

        Views
      

    

    

    

      

        2,204
      

      

        Views
      

    

    

    

      

        2,204
      

      

        Views
      

    

    

    

      

        2,204
      

      

        Views
      

    

    

    

      

        2,204
      

      

        Views
      

    

  






================================================
FILE: server/files/javascript/accordion.js
================================================
semantic.accordion = {};

// ready event
semantic.accordion.ready = function() {

  // selector cache
  var
    $accordion     = $('.ui.accordion'),
    $menuAccordion = $('.ui.menu.accordion'),
    $checkbox      = $('.ui.checkbox'),
    // alias
    handler
  ;
  $accordion
    .accordion()
  ;
  $menuAccordion
    .accordion({
     exclusive: true
    })
  ;
  $checkbox
    .checkbox()
  ;

};


// attach ready event
$(document)
  .ready(semantic.accordion.ready)
;

================================================
FILE: server/files/javascript/api.js
================================================

$.fn.api.settings.debug = true;

/* Define API endpoints once globally */
$.extend($.fn.api.settings.api, {
  'get followers' : '/followers/{id}?results={count}',
  'create user'   : '/create',
  'follow user'   : '/follow/{id}',
  'search'        : '/search/?query={value}'
});

semantic.api = {};
// ready event
semantic.api.ready = function() {

  $.fn.api.settings.responseAsync = function(settings, callback) {
    setTimeout(function() {
      callback({
        "success": "true"
      });
    }, 500);
  };


  $('.response.example .ui.search')
    .search({
      type          : 'category',
      minCharacters : 3,
      apiSettings   : {
        responseAsync : false,
        onFailure     : function() {
          $(this).search('display message', 'Hold off a few minutes 
 GitHub rate limit exceeded for anonymous search.');
        },
        onResponse: function(githubResponse) {
          var
            response = {
              results : {}
            }
          ;
          if(githubResponse.items.length === 0) {
            // no results
            return response;
          }
          $.each(githubResponse.items, function(index, item) {
            var
              language  = item.language || 'Unknown',
              maxLength = 200,
              description
            ;
            if(index >= 8) {
              // only show 8 results
              return false;
            }
            // Create new language category
            if(response.results[language] === undefined) {
              response.results[language] = {
                name    : language,
                results : []
              };
            }
            description = (item.description < maxLength)
                ? item.description
                : item.description.substr(0, maxLength) + '...'
            ;
            description = $.fn.search.settings.templates.escape(description);
            // Add result to category
            response.results[language].results.push({
              title       : item.name,
              description : description,
              url         : item.html_url
            });
          });
          return response;
        },
        url: '//api.github.com/search/repositories?q={query}'
      }
    })
  ;


  $('.test.example .ui.button')
    .api()
  ;
  $('.test.example .ui.input input')
    .api({
      stateContext: '.test.example .ui.input'
    })
  ;

  $('form .ui.dropdown')
    .dropdown()
  ;

};


// attach ready event
$(document)
  .ready(semantic.api.ready)
;


================================================
FILE: server/files/javascript/button.js
================================================
semantic.button = {};

// ready event
semantic.button.ready = function() {

  // selector cache
  var
    $buttons         = $('.main .ui.buttons .button'),
    $invertedButtons = $('.main .inverted.button'),
    $toggle          = $('.main .ui.toggle.button'),
    $follow          = $('.follow.example .button'),
    $button          = $('.ui.button').not($buttons).not($toggle),
    // alias
    handler = {

      activate: function() {
        $(this)
          .addClass('active')
          .siblings()
          .removeClass('active')
        ;
      }

    }
  ;

  $buttons
    .on('click', handler.activate)
  ;

  $follow
    .state({
      text: {
        inactive : 'Follow',
        active   : 'Following'
      }
    })
  ;

  $toggle
    .state({
      text: {
        inactive : 'Vote',
        active   : 'Voted'
      }
    })
  ;

};


// attach ready event
$(document)
  .ready(semantic.button.ready)
;


================================================
FILE: server/files/javascript/card.js
================================================
semantic.card = {};

// ready event
semantic.card.ready = function() {

  // selector cache
  var
    $icon = $('.card .corner.label'),
    handler
  ;

  handler = {


  };

  $('.ui.rating')
    .rating()
  ;

  $icon
    .state()
  ;

};


// attach ready event
$(document)
  .ready(semantic.card.ready)
;

================================================
FILE: server/files/javascript/checkbox.js
================================================
semantic.checkbox = {};

// ready event
semantic.checkbox.ready = function() {

  // selector cache
  var
    $indeterminate  = $('.indeterminate.example').find('.ui.checkbox'),
    $simpleCheckbox = $('.simple.example').find('.ui.checkbox'),
    $checkbox       = $('.example').not('.static').find('.ui.checkbox').not($simpleCheckbox),
    // alias
    handler
  ;

  // event handlers
  handler = {

  };

  $checkbox
    .checkbox()
  ;

  $indeterminate
    .checkbox('indeterminate')
  ;



};


// attach ready event
$(document)
  .ready(semantic.checkbox.ready)
;

================================================
FILE: server/files/javascript/container.js
================================================
semantic.container = {};

// ready event
semantic.container.ready = function() {

  var
    $helpIcon = $('.main.container .help.icon'),
    $pageTabs = $('.masthead.tab.segment .menu .item')
  ;

  $pageTabs
    .tab({
      history     : true,
      onFirstLoad : function() {
        semantic.handler.makeCode();
      }
    })
  ;
  semantic.handler.makeCode();

  $helpIcon
    .popup()
  ;

};


// attach ready event
$(document)
  .ready(semantic.container.ready)
;

================================================
FILE: server/files/javascript/customize.js
================================================
semantic.customize = {};

// ready event
semantic.customize.ready = function() {

  var
    $accordion = $('.main.container .ui.accordion'),
    $choice    = $('.download .item'),
    $popup     = $('.main.container [data-content]'),
    $checkbox  = $('.download .item .checkbox'),
    handler = {}
  ;

  $choice
    .on('click', function() {
      $(this)
        .find($checkbox)
          .checkbox('toggle')
      ;
    })
  ;

  $checkbox
    .checkbox()
  ;

  $accordion
    .accordion({
      exclusive: false,
      onChange: function() {
        $('.ui.sticky').sticky('refresh');
      }
    })
  ;


  $popup
    .popup()
  ;


};


// attach ready event
$(document)
  .ready(semantic.customize.ready)
;

================================================
FILE: server/files/javascript/dimmer.js
================================================
semantic.dimmer = {};

// ready event
semantic.dimmer.ready = function() {

  // selector cache
  var
    $pageDimmer = $('.demo.page.dimmer'),
    $examples   = $('.example'),
    $showButton = $examples.find('.show.button'),
    $pageButton = $examples.find('.page.button'),
    $hideButton = $examples.find('.hide.button'),
    // alias
    handler
  ;

  // event handlers
  handler = {
    show: function() {
      $(this)
        .closest('.example')
        .find('> .html > .segment, > .segment:not(.existing):not(.html)')
        .dimmer('show')
      ;
    },
    hide: function() {
      $(this)
        .closest('.example')
        .find('> .html > .segment, > .segment:not(.existing):not(.html)')
        .dimmer('hide')
      ;
    },
    page: function() {
      $('body > .demo.page.dimmer')
        .dimmer('show')
      ;
    }
  };

  $pageDimmer
    .dimmer()
  ;

  $pageButton
    .on('click', handler.page)
  ;
  $showButton
    .on('click', handler.show)
  ;
  $hideButton
    .on('click', handler.hide)
  ;
};


// attach ready event
$(document)
  .ready(semantic.dimmer.ready)
;

================================================
FILE: server/files/javascript/docs.js
================================================

// namespace
window.semantic = {
  handler: {}
};

// Allow for console.log to not break IE
if (typeof window.console == "undefined" || typeof window.console.log == "undefined") {
  window.console = {
    log  : function() {},
    info : function(){},
    warn : function(){}
  };
}
if(typeof window.console.group == 'undefined' || typeof window.console.groupEnd == 'undefined' || typeof window.console.groupCollapsed == 'undefined') {
  window.console.group = function(){};
  window.console.groupEnd = function(){};
  window.console.groupCollapsed = function(){};
}
if(typeof window.console.markTimeline == 'undefined') {
  window.console.markTimeline = function(){};
}
window.console.clear = function(){};

// ready event
semantic.ready = function() {

  // selector cache
  var
    $document            = $(document),
    $sortableTables      = $('.sortable.table'),
    $sticky              = $('.ui.sticky'),

    $themeDropdown       = $('.theme.dropdown'),

    $ui                  = $('.ui').not('.hover, .down'),
    $swap                = $('.theme.menu .item'),
    $menu                = $('#toc'),
    $hideMenu            = $('#toc .hide.item'),
    $search              = $('#search'),
    $sortTable           = $('.sortable.table'),
    $demo                = $('.demo'),
    $begSegment          = $('.beg.segment'),

    $fullHeightContainer = $('.pusher > .full.height'),
    $container           = $('.main.container'),
    $allHeaders          = $('.main.container > h2, .main.container > .tab > h2, .main.container > .tab > .examples h2'),
    $sectionHeaders      = $container.children('h2'),
    $followMenu          = $container.find('.following.menu'),
    $sectionExample      = $container.find('.example'),
    $exampleHeaders      = $sectionExample.children('h4'),
    $footer              = $('.page > .footer'),

    $menuMusic           = $('.ui.main.menu .music.item'),
    $menuPopup           = $('.ui.main.menu .popup.item'),
    $pageDropdown        = $('.ui.main.menu .page.dropdown'),
    $pageTabs            = $('.masthead.tab.segment .tabs.menu .item'),

    $languageDropdown    = $('.language.dropdown'),
    $chineseModal        = $('.chinese.modal'),
    $languageModal       = $('.language.modal'),

    $downloadPopup       = $('.download.button'),
    $downloads           = $('.download.popup'),
    $downloadFramework   = $('.framework.column .button'),
    $downloadInput       = $('.download.popup input'),
    $downloadStandalone  = $('.standalone.column .button'),

    $helpPopup           = $('.header .help'),

    $example             = $('.example'),
    $popupExample        = $example.not('.no'),
    $shownExample        = $example.filter('.shown'),
    $prerenderedExample  = $example.has('.ui.checkbox, .ui.dropdown, .ui.search, .ui.progress, .ui.rating, .ui.dimmer, .ui.embed, .ui.placeholder'),

    $visibilityExample   = $example.filter('.visiblity').find('.overlay, .demo.segment, .items img'),


    $sidebarButton       = $('.fixed.launch.button'),
    $code                = $('div.code').not('.existing'),
    $existingCode        = $('.existing.code'),

    expertiseLevel       = ($.cookie !== undefined)
      ? $.cookie('expertiseLevel') || 0
      : 0,
    languageDropdownUsed = false,

    metadata,

    requestAnimationFrame = window.requestAnimationFrame
      || window.mozRequestAnimationFrame
      || window.webkitRequestAnimationFrame
      || window.msRequestAnimationFrame
      || function(callback) { setTimeout(callback, 0); },

    // alias
    handler
  ;


  // event handlers
  handler = {

    getMetadata: function() {
      $.api({
        debug : false,
        on    : 'now',
        url   : '/metadata.json',
        cache : 'local',
        onSuccess: function(response) {
          metadata = response;
        }
      });
    },

    scrollToHash: function() {
      if(handler.scrollToSelector) {
        var
          location = handler.scrollToSelector,
          $element = $(location)
        ;
        if($element.length) {
          var
            position = $element.offset().top + 10
          ;
          $element
            .addClass('active')
          ;
          $('html, body')
            .stop()
            .animate({
              scrollTop: position
            }, 500)
          ;
          delete handler.scrollToSelector;
        }
      }
    },

    showBeg: function() {
      if(window.localStorage !== undefined) {
        $begSegment
          .find('.delete.icon')
            .on('click', handler.hideBeg)
        ;
        if(!window.localStorage.getItem('begDismissed')) {
          $begSegment.transition('slide down');
        }
      }
    },

    hideBeg: function() {
      $begSegment.transition('slide down');
      if(window.localStorage !== undefined) {
        window.localStorage.setItem('begDismissed', true);
      }
    },

    createIcon: function() {
      $example
        .each(function(){
          var
            $insertPoint = $(this).is('.another')
              ? $(this).children().eq(0)
              : $(this).children().eq(1)
          ;
          $('')
            .addClass('fitted icon code')
            .insertBefore( $insertPoint )
          ;
        })
        .find('i.code')
          .on('click', handler.createCode)
      ;
    },

    shortcut: {
      modal: function() {
        var
          $modal = $('#shortcuts'),
          shortcutModalExists,
          shortcut,
          index
        ;
        if(!shortcutModalExists) {
          var
            html = '';
          $('body').append(html);
          $modal = $('#shortcuts');
        }
        $('#shortcuts').modal('show');
      }
    },

    createWaypoints: function() {
      $sectionHeaders
        .visibility({
          observeChanges: false,
          once: false,
          offset: 50,
          onTopPassed: handler.activate.section,
          onTopPassedReverse: handler.activate.previous
        })
      ;

      $sectionExample
        .visibility({
          observeChanges: false,
          once: false,
          offset: 50,
          onTopPassed: handler.activate.example,
          onBottomPassedReverse: handler.activate.example
        })
      ;
      $footer
        .visibility({
          observeChanges: false,
          once: false,
          onBottomVisible: function(calculations) {
            var
              $title = $followMenu.find('> .item > .title').last()
            ;
            $followMenu
              .accordion('open', $title)
            ;
          }
        })
      ;
    },

    activate: {
      previous: function() {
        var
          $menuItems  = $followMenu.children('.item'),
          $section    = $menuItems.filter('.active'),
          index       = $menuItems.index($section)
        ;
        if($section.prev().length > 0) {
          $section
            .removeClass('active')
            .prev('.item')
            .addClass('active')
          ;
          $followMenu
            .accordion('open', index - 1)
          ;
        }
      },
      accordion: function() {
        var
          $section       = $(this),
          index          = $sectionHeaders.index($section),
          $followSection = $followMenu.children('.item'),
          $activeSection = $followSection.eq(index)
        ;
      },
      section: function() {
        var
          $section       = $(this),
          index          = $sectionHeaders.index($section),
          $followSection = $followMenu.children('.item'),
          $activeSection = $followSection.eq(index),
          isActive       = $activeSection.hasClass('active')
        ;
        if(!isActive) {
          $followSection.filter('.active')
            .removeClass('active')
          ;
          $activeSection
            .addClass('active')
          ;
          $followMenu
            .accordion('open', index)
          ;
        }
      },
      example: function() {
        var
          $section       = $(this).children('h4').eq(0),
          index          = $exampleHeaders.index($section),
          $followSection = $followMenu.find('.menu > .item'),
          $activeSection = $followSection.eq(index),
          inClosedTab    = ($(this).closest('.tab:not(.active)').length > 0),
          anotherExample = ($(this).filter('.another.example').length > 0),
          isActive       = $activeSection.hasClass('active')
        ;
        if(index !== -1 && !inClosedTab && !anotherExample && !isActive) {
          $followSection.filter('.active')
            .removeClass('active')
          ;
          $activeSection
            .addClass('active')
          ;
        }
      }
    },

    translatePage: function(languageCode, text, $choice) {
      languageDropdownUsed = true;
      if(window.Transifex !== undefined) {
        window.Transifex.live.translateTo(languageCode, true);
      }
    },

    showLanguageModal: function(languageCode) {
      var
        $choice = $languageDropdown.find('[data-value="' + languageCode + '"]').eq(0),
        percent = $choice.data('percent') || 0,
        text    = $choice.text()
      ;
      // dont trigger on translate event every page load
      if(languageDropdownUsed) {
        if(languageCode == 'zh' && window.location.host.replace('www.','') !== 'semantic-ui.cn') {
          $chineseModal
            .modal({
              closable: false
            })
            .modal('show')
          ;
        }
        else if(percent < 100) {
          languageDropdownUsed = false;
          $languageModal
            .modal()
            .find('.header .name')
              .html(text)
              .end()
            .find('.complete')
              .html(percent)
              .end()
          ;
          $languageModal
            .modal('show', function() {
              $('.language.modal .progress .bar').css('width', percent + '%');
            })
          ;
        }
      }
    },

    tryCreateMenu: function(event) {
      if($(window).width() > 640 && !$('body').hasClass('basic')) {
        if($container.length > 0 && $container.find('.following.menu').length === 0) {
          handler.createMenu();
          handler.createWaypoints();
          $(window).off('resize.menu');
        }
      }
    },

    createAnchors: function() {
      $allHeaders
        .each(function() {
          var
            $section = $(this),
            text     = handler.getText($section),
            safeName = handler.getSafeName(text),
            id       = window.escape(safeName),
            $anchor  = $('').addClass('anchor').attr('id', id)
          ;
          $section
            .append($anchor)
          ;
        })
      ;
      $example
        .each(function() {
          var
            $title   = $(this).children('h4').eq(0),
            text     = handler.getText($title),
            safeName = handler.getSafeName(text),
            id       = window.escape(safeName),
            $anchor  = $('').addClass('anchor').attr('id', id)
          ;
          if($title.length > 0) {
            $title.after($anchor);
          }
        })
      ;

    },

    getPageTitle: function() {
      return $.trim($('h1').eq(0).contents().filter(function() { return this.nodeType == 3; }).text().toLowerCase());
    },
    getSafeName: function(text) {
      return text.replace(/\s+/g, '-').replace(/[^-,'A-Za-z0-9]+/g, '').toLowerCase();
    },

    getText: function($element) {
      $element = ($element.find('a').not('.label, .anchor').length > 0)
        ? $element.find('a')
        : $element
      ;
      var
        $text = $element.contents().filter(function(){
          return this.nodeType == 3;
        })
      ;
      return ($text.length > 0)
        ? $text[0].nodeValue.trim()
        : $element.find('a').text().trim()
      ;
    },

    createMenu: function() {
      // grab each h3
      var
        html      = '',
        pageTitle = handler.getPageTitle(),
        title     = pageTitle.charAt(0).toUpperCase() + pageTitle.slice(1),
        $sticky,
        $rail
      ;
      $sectionHeaders
        .each(function(index) {
          var
            $currentHeader = $(this),
            $nextElements  = $currentHeader.nextUntil('h2'),
            $examples      = $nextElements.find('.example:not(.another)').addBack().filter('.example:not(.another)'),
            activeClass    = (index === 0)
              ? 'active '
              : '',
            text     = handler.getText($currentHeader),
            safeName = handler.getSafeName(text),
            id       = window.escape(safeName),
            $anchor  = $('').addClass('anchor').attr('id', id)
          ;
          html += '
';
          if($examples.length === 0) {
            html += '' + $(this).text() + '';
          }
          else {
            html += ' ' + $(this).text() + '';
          }
          if($examples.length > 0) {
            html += '
';
            $examples
              .each(function() {
                var
                  $title   = $(this).children('h4').eq(0),
                  text     = handler.getText($title),
                  safeName = handler.getSafeName(text),
                  id       = window.escape(safeName),
                  $anchor  = $('').addClass('anchor').attr('id', id)
                ;
                if($title.length > 0) {
                  html += '' + text + '';
                }
              })
            ;
            html += '
';
          }
          html += '
';
        })
      ;
      $followMenu = $('
')
        .addClass('ui vertical following fluid accordion text menu')
        .html(html)
      ;
      /* Advert
      var $advertisement = $('
')
        .addClass('advertisement')
        .html('')
      ;
      */
      $sticky = $('
')
        .addClass('ui sticky')
        .html($followMenu)
        //.prepend($advertisement)
        .prepend('
' + title + '
')
      ;
      $rail = $('
')
        .addClass('ui dividing right rail')
        .html($sticky)
        .prependTo($container)
      ;
      $sticky.sticky({
        silent: true,
        context: $container,
        container: $('html'),
        offset: 30
      });
      $followMenu
        .accordion({
          exclusive: false,
          animateChildren: false,
          onChange: function() {
            $('.ui.sticky').sticky('refresh');
          }
        })
        .find('.menu a[href], .title[href]')
          .on('click', handler.scrollTo)
      ;
    },

    scrollTo: function(event) {
      var
        id       = $(this).attr('href').replace('#', ''),
        $element = $('#' + id),
        position = $element.offset().top + 10
      ;
      $element
        .addClass('active')
      ;
      $('html, body')
        .stop()
        .animate({
          scrollTop: position
        }, 500)
      ;
      location.hash = '#' + id;
      event.stopImmediatePropagation();
      event.preventDefault();
      return false;
    },

    less: {

      parseFile: function(content) {
        var
          variables = {},
          lines = content.match(/^\s*(@[\s|\S]+?;)/gm),
          name,
          value
        ;
        if(lines) {
          $.each(lines, function(index, line) {
            // clear whitespace
            line = $.trim(line);
            // match variables only
            if(line[0] == '@') {
              name = line.match(/^@(.+?):/);
              value = line.match(/:\s*([\s|\S]+?;)/);
              if( ($.isArray(name) && name.length >= 2) && ($.isArray(value) && value.length >= 2) ) {
                name = name[1];
                value = value[1];
                variables[name] = value;
              }
            }
          });
        }
        console.log(variables);
        return variables;
      },

      changeTheme: function(theme) {
        var
          $themeDropdown = $(this),
          element        = $themeDropdown.data('element'),
          urlData     = {
            theme   : typeof(theme === 'string')
              ? theme.toLowerCase()
              : theme,
            type    : $themeDropdown.data('type'),
            element : $themeDropdown.data('element')
          },
          variables = {
            theme: urlData.theme
          }
        ;
        variables[element] = urlData.theme;
        window.less.modifyVars(variables);

        $themeDropdown
          .api({
            on       : 'now',
            debug    : true,
            action   : 'getVariables',
            dataType : 'text',
            urlData  : urlData,
            onSuccess: function(content) {
              window.less.modifyVars( handler.less.parseFile(content) );
              $themeDropdown
                .api({
                  on       : 'now',
                  action   : 'getOverrides',
                  dataType : 'text',
                  urlData  : urlData,
                  onSuccess: function(content) {
                    if( $('style.override').length > 0 ) {
                      $('style.override').remove();
                    }
                    console.log(content);
                    $('')
                      .addClass('override')
                      .appendTo('body')
                    ;
                    $sticky.sticky('refresh');
                  }
                })
              ;
            }
          })
        ;
      }

    },

    create: {
      examples: function(json) {
        var
          types      = json['Types'],
          text       = json['Text'],
          states     = json['States'],
          variations = json['Variations'],

          $element,
          html
        ;
        $.each(types, function(name, type){
          html += '
' + name + ' 0)
          ? 6
          : 4
        ;
      }
      if(leadingSpaces !== 0) {
        indent = leadingSpaces;
      }
      else {
        // string has already been trimmed, get first indented line and subtract 2
        $.each(lines, function(index, line) {
          leadingSpaces = line.length - line.replace(/^\s*/g, '').length;
          if(leadingSpaces !== 0) {
            indent = leadingSpaces - spacesPerIndent;
            return false;
          }
        });
      }
      return indent || 4;
    },

    generateCode: function() {
      var
        $example    = $(this).closest('.example'),
        $annotation = $example.find('.annotation'),
        $code       = $annotation.find('.code'),
        $intro      = $example.children().not('.ignored, h4:first-child').filter('.ui, i:not(.code)').eq(0).prevAll(),
        $ignored    = $('i.code:last-child, .wireframe, .anchor, .code, .existing, .instructive, .language.label, .annotation, br, .ignore, .ignored'),
        $demo       = $example.children().not($intro).not($ignored),
        code        = ''
      ;
      if( $code.length === 0) {
        $demo
          .each(function() {
            var
              $this      = $(this).clone(false),
              $wireframe = $this.find('.wireframe').add($this.filter('.wireframe'))
            ;
            $wireframe
              .each(function() {
                var
                  src       = $(this).attr('src'),
                  image     = (src.search('image') !== -1),
                  paragraph = (src.search('paragraph') !== -1)
                ;
                if(paragraph) {
                  $(this).replaceWith('
');
                }
                else if(image) {
                  $(this).replaceWith('');
                }
              })
            ;

            // remove wireframe images
            $this.find('.wireframe').remove();

            if($this.not('br').not('.wireframe')) {
              // allow inline styles only with this one class
              if($this.is('.my-container')) {
                code += $this.get(0).outerHTML + "\n";
              }
              else {
                code += $this.removeAttr('style').get(0).outerHTML + "\n";
              }
            }
          })
        ;
      }
      $example.data('code', code);
      return code;
    },

    copyCode: function() {
      $(this)
        .popup('change content', 'Copied to clipboard')
      ;
    },

    createCode: function() {
      var
        $example        = $(this).closest('.example'),
        $intro          = $example.children().not('.ignored, h4:first-child').filter('.ui, i:not(.code)').eq(0).prevAll(),
        $annotation     = $example.find('.annotation'),
        $code           = $annotation.find('.code'),
        $html           = $example.children('.html'),
        $ignoredContent = $('.ui.popup, i.code:last-child, .anchor, .code, .existing.segment, .instructive, .language.label, .annotation, .ignore, style, script, .ignored'),
        $demo           = $example.children().not($intro).not($ignoredContent),
        code            = $example.data('code') || $.proxy(handler.generateCode, this)(),
        $copyCode,
        $label
      ;

      // process existing code first
      if( $code.hasClass('existing') ) {
        $code.removeClass('existing');
        $.proxy(handler.initializeCode, $code)(true);
      }

      // create annotation wrapper
      if($annotation.length === 0) {
        $annotation = $('
')
          .addClass('annotation')
          .hide()
          .insertAfter($demo.last())
        ;
      }

      if($html.length === 0) {
        $html     = $('
').insertBefore($annotation);
        $label    = $('
').html('Example ');
        $copyCode = $label.find('i.copy');
        $copyCode
          .on('click', handler.copyCode)
          .popup({
            variation    : 'inverted',
            distanceAway : 6
          })
        ;
        $label
          .prependTo($html)
        ;
        new Clipboard($copyCode.get(0), {
          text: function() {
            var
              code = $copyCode.closest('.example').data('code') || ''
            ;
            return handler.formatCode(code);
          }
        });
        if($demo.length === 0) {
          $html.addClass('empty');
        }
        else {
          $demo
            .detach()
            .prependTo($html)
          ;
        }
      }

      // create code inside annotation wrapper
      if( $example.find('.instructive').length === 0) {
        $code = $('
')
          .data('type', 'html')
          .addClass('code')
          .html(code)
          .hide()
          .appendTo($annotation)
        ;
        $.proxy(handler.initializeCode, $code)(true);
      }
      if( $annotation.hasClass('visible') ) {
        $annotation.transition('hide');
        $html.removeClass('ui top attached segment');
      }
      else {
        $html.addClass('ui top attached segment');
        $intro.css('display', '');
        $annotation.transition('show');
      }
      setTimeout(function() {
        handler.refreshSticky();
      }, 400);
    },

    refreshSticky: function() {
      $sectionHeaders.visibility('refresh');
      $sectionExample.visibility('refresh');
      $('.ui.sticky').sticky('refresh');
      $footer.visibility('refresh');
      $visibilityExample.visibility('refresh');
    },

    createAnnotation: function() {
      if(!$(this).data('type')) {
        $(this).data('type', 'html');
      }
      $(this)
        .wrap('
')
        .parent()
        .hide()
      ;
    },

    makeCode: function() {
      if(window.hljs !== undefined) {
        $code
          .filter(':visible')
          .each(handler.initializeCode)
        ;
        $existingCode
          .each(handler.createAnnotation)
        ;
      }
      else {
        console.log('Syntax highlighting not found');
      }
    },

    highlightClasses: function($code) {
      var
        $closestExample = $code.closest('.example'),
        $example        = ($closestExample.length === 0)
          ? $code.closest('.segment').prevAll('.example').not('.another').eq(0)
          : ($closestExample.hasClass('another'))
            ? $closestExample.prevAll('.example').not('.another').eq(0)
            : $closestExample,
        $header     = $example.find('h4').eq(0),
        $attributes = $code.find('.attribute, .class'),
        $tags       = $code.find('.title'),
        pageName    = handler.getPageTitle(),
        name        = handler.getText($header).toLowerCase(),
        classes     = $example.data('class') || '',
        tags        = $example.data('tag')  || false,
        useContent  = $example.data('use-content') || false
      ;
      // Add title
      if(name) {
        if(name == pageName) {
          name = 'ui ' + name;
        }
        classes = (classes === '')
          ? name
          : classes + ',' + name
        ;
      }
      // Add common variations
      classes = classes.replace('text alignment', "left aligned, right aligned, justified, center aligned");
      classes = classes.replace('floated', "right floated,left floated,floated");
      classes = classes.replace('floating', "right floated,left floated,floated");
      classes = classes.replace('horizontally aligned', "left aligned, center aligned, right aligned, justified");
      classes = classes.replace('vertically aligned', "top aligned, middle aligned, bottom aligned");
      classes = classes.replace('vertically attached', "attached");
      classes = classes.replace('horizontally attached', "attached");
      classes = classes.replace('padded', "very padded, padded");
      classes = classes.replace('relaxed', "very relaxed, relaxed");
      classes = classes.replace('attached', "left attached,right attached,top attached,bottom attached,attached");
      classes = classes.replace('wide', "one wide,two wide,three wide,four wide,five wide,six wide,seven wide,eight wide,nine wide,ten wide,eleven wide,twelve wide,thirteen wide,fourteen wide,fifteen wide,sixteen wide");
      classes = classes.replace('count', "one,two,three,four,five,six,seven,eight,nine,ten,eleven,twelve,thirteen,fourteen,fifteen,sixteen");
      classes = classes.replace('column count', "one column,two column,three column,four column,five column,six column,seven column,eight column,nine column,ten column,eleven column,twelve column,thirteen column,fourteen column,fifteen column,sixteen column");
      classes = classes.replace('evenly divided', "one,two,three,four,five,six,seven,eight,nine,ten,eleven,twelve,thirteen,fourteen,fifteen,sixteen");
      classes = classes.replace('size', "mini,tiny,small,medium,large,big,huge,massive");
      classes = classes.replace('emphasis', "primary,secondary,tertiary");
      classes = classes.replace('colored', "red,orange,yellow,olive,green,teal,blue,violet,purple,pink,brown,grey,black");
      classes = (classes !== '')
        ? classes.split(',')
        : []
      ;
      // highlight tags if asked
      if(tags) {
        tags = (tags !== '')
          ? tags.split(',')
          : []
        ;
        $tags.each(function() {
          var
            $tag    = $(this),
            tagHTML = $tag.html(),
            newHTML = false
          ;
          $.each(tags, function(index, tag) {
            if(tagHTML == tag) {
              newHTML = tagHTML.replace(tag, '' + tag + '');
            }
          });
          if(newHTML) {
            $tag
              .addClass('class')
              .html(newHTML)
            ;
          }
        });
      }
      // highlight classes
      $attributes.each(function() {
        var
          $attribute    = $(this),
          attributeHTML = $attribute.html(),
          $tag,
          $value,
          tagHTML,
          isUI,
          isPageElement,
          isOtherUI,
          isOtherIcon,
          classNames,
          classString,
          html,
          newHTML
        ;
        // only parse classes
        if(attributeHTML.search('class') === -1) {
          return true;
        }
        $value        = $attribute.next('.value, .string').eq(0);
        $tag          = $attribute.prev('.title').eq(0);
        tagHTML       = $tag.html();
        html          = $value.html();
        classNames    = html.replace(/\"/g, '').split(' ');

        isUI          = (html.search('ui') !== -1);
        isPageElement = (html.search(pageName) > 0);
        isOtherUI     = (!isPageElement && isUI);
        isOtherIcon   = (!isPageElement && tagHTML === 'i' && html.search('icon') !== -1);
        // check if any class match
        $.each(classes, function(index, string) {
          var
            className      = $.trim(string),
            isClassMatch   = (html.search(className) !== -1)
          ;
          if(className === '') {
            return true;
          }
          // class match on current page element (or content if allowed)
          if(isClassMatch && (isPageElement || useContent) ) {
            newHTML = html.replace(className, '' + className + '');
            return false;
          }
        });

        // generate links to other UI
        if(isOtherUI || isOtherIcon) {
          html           = newHTML || html;
          classString    = /^\"(.*)\"/g.exec(html);
          if(!classString || classString.length < 2) {
            return true;
          }
          classString = classString[1];
          $.each(classNames, function(index, string){
            var
              className = string.replace('"', '')
            ;
            // yep..
            if(className == 'item') {
              return;
            }
            if(metadata && metadata[className] && metadata[className].url) {
              // we found a match
              newHTML = html.replace(classString, '' + classString + '');
            }
          });
        }

        if(newHTML) {
          $value
            .addClass('class')
            .html(newHTML)
          ;
        }
      });

    },

    formatCode: function(code) {
      var
        indent     = handler.getIndent(code) || 2,
        whiteSpace = new RegExp('\\n\\s{' + indent + '}', 'g')
      ;
      return $.trim(code).replace(whiteSpace, '\n');
    },

    initializeCode: function(codeSample) {
      var
        $code         = $(this).show(),
        $codeTag      = $(''),
        codeSample    = codeSample || false,
        code          = $code.html(),
        existingCode  = $code.hasClass('existing'),
        evaluatedCode = $code.hasClass('evaluated'),
        contentType   = $code.data('type')     || 'html',
        title         = $code.data('title')    || false,
        less          = $code.data('less')     || false,
        demo          = $code.data('demo')     || false,
        eval          = $code.data('eval')     || false,
        preview       = $code.data('preview')  || false,
        label         = $code.data('label')    || false,
        preserve      = $code.data('preserve') || false,
        escape        = $code.data('escape') || false,
        displayType   = {
          html       : 'HTML',
          javascript : 'Javascript',
          css        : 'CSS',
          text       : 'Command Line',
          sh         : 'Command Line'
        },
        padding    = 20,
        name = (codeSample === true)
          ? 'instructive bottom attached'
          : 'existing',
        formattedCode = code,
        styledCode,
        $example,
        $label,
        codeHeight
      ;
      var entityMap = {
        "&"  : "&",
        "<"   : "<",
        ">"   : ">",
        '"' : '"',
        '''  : "'",
        '/' : "/"
      };
      contentType = contentType.toLowerCase();

      function escapeHTML(string) {
        return $('
').html(string).text();
      }


      // escape html entities
      if(contentType != 'html' || escape) {
        code = escapeHTML(code);
      }

      // evaluate if specified
      if(evaluatedCode) {
        window.eval(code);
      }

      // should trim whitespace
      if(preserve) {
        formattedCode = code;
      }
      else {
        formattedCode = handler.formatCode(code);
      }

      // color code
      formattedCode = window.hljs.highlightAuto(formattedCode);

      // create  tag
      $codeTag
        .addClass($code.attr('class'))
        .addClass(formattedCode.language)
        .html(formattedCode.value)
      ;
      // replace 
 with 
      $code.replaceWith($codeTag);
      $code = $codeTag;
      $code
        .wrap('
')
        .wrap('
')
      ;

      if(contentType == 'html') {
        // add class emphasis to used classes
        handler.highlightClasses($code);
      }

      // add label
      if(title) {
        $('
')
          .addClass('ui attached top label')
          .html('' + title + '' + '' + (displayType[contentType] || contentType) + '')
          .prependTo( $code.closest('.segment') )
        ;
      }
      if(label) {
        $('
')
          .addClass('ui pointing below ignored language label')
          .html(displayType[contentType] || contentType)
          .insertBefore ( $code.closest('.segment') )
        ;
      }
      // add apply less button
      if(less) {
        $('')
          .addClass('ui black pointing below ignored label')
          .html('Apply Theme')
          .on('click', function() {
            window.less.modifyVars( handler.less.parseFile( code ) );
          })
          .insertBefore ( $code.closest('.segment') )
        ;
      }
      // add run code button
      if(demo) {
        $('')
          .addClass('ui black pointing below ignored label')
          .html('Run Code')
          .on('click', function() {
            if(eval) {
              window.eval(eval);
            }
            else {
              window.eval(code);
            }
          })
          .insertBefore ( $code.closest('.segment') )
        ;
      }
      // add preview if specified
      if(preview) {
        $(code)
          .insertAfter( $code.closest('.segment') )
        ;
      }

      $code.removeClass('hidden');

    },

    resetDownloads: function() {
      $downloads
        .find('.grid')
        .hide()
        .filter('.choice.grid')
          .show()
      ;
    },

    selectAll: function () {
      this.setSelectionRange(0, this.value.length);
    },

    chooseStandalone: function() {
      $downloads
        .find('.grid')
        .hide()
        .filter('.standalone.grid')
          .show()
      ;
      $downloadPopup.popup('reposition');
    },

    chooseFramework: function() {
      $downloads
        .find('.grid')
        .hide()
        .filter('.framework.grid')
          .show()
      ;
      $downloadPopup.popup('reposition');
    },

    swapStyle: function() {
      var
        theme = $(this).data('theme')
      ;
      $(this)
        .addClass('active')
        .siblings()
          .removeClass('active')
      ;
      $('head link.ui')
        .each(function() {
          var
            href         = $(this).attr('href'),
            subDirectory = href.split('/')[3],
            newLink      = href.replace(subDirectory, theme)
          ;
          $(this)
            .attr('href', newLink)
          ;
        })
      ;
    }
  };

  semantic.handler = handler;

  // code highlighting languages
  window.hljs.configure({
    classPrefix : '',
    languages   : [
      'xml',
      'bash',
      'css',
      'less',
      'javascript'
    ]
  });

  // add anchors to docs headers
  handler.createAnchors();

  // register less files
  window.less.registerStylesheets();


  // load page tabs
  if( $pageTabs.length > 0 ) {
    $pageTabs
      .tab({
        context      : '.main.container',
        childrenOnly : true,
        history      : true,
        onFirstLoad  : function() {
          handler.makeCode();

          $container = ($('.fixed.column').length > 0 )
            ? $(this).find('.examples')
            : $(this)
          ;
          $(this).find('> .rail .ui.sticky, .fixed .ui.sticky')
            .sticky({
              context: $container,
              container: $('html'),
              silent: true,
              offset: 30
            })
          ;
          $sectionHeaders = $container.children('h2');
          $sectionExample = $container.find('.example');
          $exampleHeaders = $sectionExample.children('h4');
          // create code
          handler.tryCreateMenu();
          $(window).on('resize.menu', function() {
            handler.tryCreateMenu();
          });
          handler.scrollToHash();
        },
        onLoad : function() {
          $(this).find('.ui.sticky')
            .sticky('refresh')
          ;
        }
      })
    ;
  }
  else {
    handler.makeCode();
    handler.tryCreateMenu();
    $(window).on('resize.menu', function() {
      handler.tryCreateMenu();
    });
  }

  $shownExample
    .each(handler.createCode)
  ;
  $prerenderedExample
    .each(handler.generateCode)
  ;

  // main sidebar
  $menu
    .sidebar({
      dimPage          : true,
      transition       : 'overlay',
      mobileTransition : 'uncover'
    })
  ;

  // launch buttons
  $menu
    .sidebar('attach events', '.launch.button, .view-ui, .launch.item')
  ;

  handler.createIcon();

  if(expertiseLevel < 2 && $(window).width() > 640) {
    $popupExample
      .each(function() {
        $(this)
          .popup({
            preserve: false,
            on       : 'hover',
            variation: 'inverted',
            delay: {
              show: 500,
              hide: 100
            },
            position : 'top left',
            content  : 'View Source',
            target   : $(this).find('i.code')
          })
          .find('i.code')
            .on('click', function() {
              $.cookie('expertiseLevel', 2, {
                expires: 365
              });
            })
        ;
      })
    ;
  }

  $menuMusic
    .on('click', handler.openMusic)
  ;

  $downloadPopup
    .popup({
      transition : 'horizontal flip',
      duration   : 350,
      position   : 'bottom center',
      on         : 'click',
      onHidden   : handler.resetDownloads
    })
  ;
  $downloadInput
    .on('mouseup', handler.selectAll)
  ;
  $downloadFramework
    .on('click', handler.chooseFramework)
  ;
  $downloadStandalone
    .on('click', handler.chooseStandalone)
  ;

  $themeDropdown
    .dropdown({
      allowTab: false,
      onChange: handler.less.changeTheme
    })
  ;

  if($.fn.tablesort !== undefined && $sortTable.length > 0) {
    $sortTable
      .tablesort()
    ;
  }

  $helpPopup
    .popup({
      position: 'top left',
      variation: 'inverted'
    })
  ;

  $swap
    .on('click', handler.swapStyle)
  ;


  $menuPopup
    .add($languageDropdown)
    .popup({
      position  : 'bottom center',
      delay: {
        show: 100,
        hide: 50
      }
    })
  ;

  $pageDropdown
    .dropdown({
      on       : 'hover',
      action   : 'nothing',
      allowTab : false
    })
  ;

  $languageDropdown
    .dropdown({
      allowTab       : false,
      on             : 'click',
      fullTextSearch : 'exact',
      match          : 'text',
      onShow         : function() {
        $(this).popup('hide');
      },
      onChange        : handler.translatePage
    })
  ;

  //$.fn.api.settings.base = '//api.semantic-ui.com';
  $.extend($.fn.api.settings.api, {
    categorySearch     : '//api.semantic-ui.com/search/category/{query}',
    getOverrides       : '/src/themes/{$theme}/{$type}s/{$element}.overrides',
    getVariables       : '/src/themes/{$theme}/{$type}s/{$element}.variables',
    search             : '//api.semantic-ui.com/search/{query}'
  });

  if(window.Transifex !== undefined) {
    window.Transifex.live.onTranslatePage(handler.showLanguageModal);
  }

  if(typeof detectAdBlock === 'undefined') {
    handler.showBeg();
  }
  else {
    detectAdBlock.onDetected(handler.showBeg);
  }

  var
    selector = (window.location.hash || '').replace(/^#\//, '#')
  ;
  if(selector) {
    handler.scrollToSelector = selector;
  }

  handler.getMetadata();

};


// attach ready event
$(document)
  .ready(semantic.ready)
;


================================================
FILE: server/files/javascript/dropdown.js
================================================
semantic.dropdown = {};

// ready event
semantic.dropdown.ready = function() {

  // selector cache
  var
    $examples         = $('.example'),
    $hoverDropdown    = $examples.filter('.hover').find('.ui.dropdown'),
    $clearingDropdown = $examples.filter('.clearing').find('.ui.dropdown'),
    $buttonDropdown   = $examples.filter('.button.example').find('.ui.dropdown'),
    $dropdown         = $examples.filter('.dropdown').find('.menu > .item > .ui.dropdown, .menu > .item.ui.dropdown, > .ui.dropdown:not(.simple), .inline.dropdown, .icon.buttons .button, .form .dropdown.selection'),
    $transition       = $examples.filter('.transition').find('.ui.dropdown'),
    $simpleDropdown   = $examples.filter('.simple').find('.ui.dropdown'),
    $transitionButton = $examples.filter('.transition').find('.ui.button').first(),
    $categoryDropdown = $examples.filter('.category').find('.ui.dropdown'),
    // alias
    handler
  ;

  // event handlers
  handler = {

  };

  $transitionButton
    .on('click', function(event) {
      $transition.dropdown('toggle');
      event.stopImmediatePropagation();
    })
  ;

  $clearingDropdown
    .dropdown({
      clearable: true
    })
  ;

  $transition
    .dropdown({
      onChange: function(value) {
        $transition.dropdown('setting', 'transition', value);
      }
    })
  ;

  $categoryDropdown
    .dropdown({
      allowCategorySelection: true
    })
  ;

  $dropdown
    .dropdown()
  ;
  $hoverDropdown
    .dropdown({
      on: 'hover',
      action: 'hide'
    })
  ;
  $simpleDropdown
    .dropdown({
      action: 'hide'
    })
  ;
  $buttonDropdown
    .dropdown({
      action: 'hide'
    })
  ;

};


// attach ready event
$(document)
  .ready(semantic.dropdown.ready)
;


================================================
FILE: server/files/javascript/embed.js
================================================
semantic.embed = {};

// ready event
semantic.embed.ready = function() {

  // selector cache
  var
    // alias
    $myfavesEmbed = $('.example').eq(0).find('iframe'),
    handler
  ;

  // event handlers
  handler = {

  };

  $('.embed.example .ui.embed')
    .embed()
  ;
  $('.existing.code .embed').removeClass('embed').addClass('ui embed');


};


// attach ready event
$(document)
  .ready(semantic.embed.ready)
;

================================================
FILE: server/files/javascript/form.js
================================================
semantic.validateForm = {};

// ready event
semantic.validateForm.ready = function() {

  // selector cache
  var
    $codeDropdown = $('.existing.code .dropdown'),
    $dropdown     = $('.main.container .ui.dropdown').not($codeDropdown),
    // alias
    handler
  ;

  // event handlers
  handler = {

  };

  $dropdown
    .dropdown()
  ;

};


// attach ready event
$(document)
  .ready(semantic.validateForm.ready)
;


================================================
FILE: server/files/javascript/grid.js
================================================
semantic.grid = {};

// ready event
semantic.grid.ready = function() {

  $('.animation.checkbox')
    .checkbox({
      onChecked: function() {
        $('body').addClass('animated');
      },
      onUnchecked: function() {
        $('body').removeClass('animated');
      }
    })
  ;

};


// attach ready event
$(document)
  .ready(semantic.grid.ready)
;

================================================
FILE: server/files/javascript/header.js
================================================
semantic.header = {};

// ready event
semantic.header.ready = function() {

  // selector cache
  var
    $increaseFont     = $('.font .increase'),
    $decreaseFont     = $('.font .decrease'),

    // alias
    handler
  ;

  // event handlers
  handler = {
    font: {

      increase: function() {
        var
          $container = $(this).parent().next('.sizer'),
          fontSize   = parseInt( $container.css('font-size'), 10)
        ;
        $container
          .css('font-size', fontSize + 1)
        ;
      },
      decrease: function() {
        var
          $container = $(this).parent().next('.sizer'),
          fontSize   = parseInt( $container.css('font-size'), 10)
        ;
        $container
          .css('font-size', fontSize - 1)
        ;
      }
    }
  };

  $increaseFont
    .on('click', handler.font.increase)
  ;
  $decreaseFont
    .on('click', handler.font.decrease)
  ;

};


// attach ready event
$(document)
  .ready(semantic.header.ready)
;

================================================
FILE: server/files/javascript/home.js
================================================
semantic.home = {};

// ready event
semantic.home.ready = function() {

  var
    $themeDropdown = $('.theme.dropdown'),
    $header        = $('.masthead'),
    $ui            = $header.find('h1 b'),
    $phrase        = $header.find('h1 span'),
    $download      = $header.find('.download'),
    $library       = $header.find('.library'),
    $cursor        = $header.find('.typed-cursor'),
    $version       = $header.find('.version'),
    $themeButton   = $('.theming .source.button'),
    $themeGrid     = $('.theming .source.grid'),

    handler
  ;

  handler = {
    getRandomInt: function(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    },
    introduction: function() {
      var
        background = 'bg' + handler.getRandomInt(1, 14)
      ;
      // zoom out
      $header
        .addClass(background)
        .removeClass('zoomed')
      ;
    },
    changeLogo: function() {
      var
        $logo = $('.following .logo'),
        $nextSide = $logo.find('.'+ $(this).data('site') +'.side'),
        directions = [
          'up',
          'left',
          'down',
          'right'
        ],
        direction = directions[Math.floor(Math.random() * directions.length)]
      ;
      if($nextSide.length > 0) {
        clearTimeout(handler.timer);
        handler.timer = setTimeout(function() {
          $logo
            .shape('set next side', $nextSide)
            .shape('flip ' +  direction)
          ;
        }, 50);
      }
    },
    returnLogo: function() {
      var
        $logo = $('.following .logo'),
        $nextSide = $logo.find('.ui.side')
      ;
      clearTimeout(handler.timer);
      handler.timer = setTimeout(function() {
        $logo
          .shape('set next side', $nextSide)
          .shape('flip over')
        ;
      }, 500);

    },

    less: {

      parseFile: function(content) {
        var
          variables = {},
          lines = content.match(/^\s*(@[\s|\S]+?;)/gm),
          name,
          value
        ;
        if(lines) {
          $.each(lines, function(index, line) {
            // clear whitespace
            line = $.trim(line);
            // match variables only
            if(line[0] == '@') {
              name = line.match(/^@(.+?):/);
              value = line.match(/:\s*([\s|\S]+?;)/);
              if( ($.isArray(name) && name.length >= 2) && ($.isArray(value) && value.length >= 2) ) {
                name = name[1];
                value = value[1];
                variables[name] = value;
              }
            }
          });
        }
        console.log(variables);
        return variables;
      },

      changeTheme: function(theme) {
        var
          $themeDropdown     = $(this),
          $variableCode      = $('.variable.code'),
          $overrideCode      = $('.override.code'),
          $existingVariables = $variableCode.closest('.existing'),
          $existingOverrides  = $overrideCode.closest('.existing'),

          variableURL = '/src/themes/{$theme}/{$type}s/{$element}.variables',
          overrideURL = '/src/themes/{$theme}/{$type}s/{$element}.overrides',
          urlData     = {
            theme   : typeof(theme === 'string')
              ? theme.toLowerCase()
              : theme,
            type    : $themeDropdown.data('type'),
            element : $themeDropdown.data('element')
          }
        ;
        if($existingVariables.length > 0) {
          $variableCode = $('
');
          $variableCode
            .insertAfter($existingVariables)
          ;
          $existingVariables.remove();
          console.log($variableCode);
        }

        if($existingOverrides.length > 0) {
          $overrideCode = $('
');
          $overrideCode
            .insertAfter($existingOverrides)
          ;
          $existingOverrides.remove();
          console.log($overrideCode);
        }

        $themeDropdown
          .api({
            on       : 'now',
            url      : variableURL,
            dataType : 'text',
            urlData  : urlData,
            onSuccess: function(content) {
              window.less.modifyVars( handler.less.parseFile(content) );
              $themeDropdown
                .api({
                  on       : 'now',
                  url      : overrideURL,
                  dataType : 'text',
                  urlData  : urlData,
                  onSuccess: function(content) {
                    if( $('style.override').length > 0 ) {
                      $('style.override').remove();
                    }
                    $('')
                      .addClass('override')
                      .appendTo('body')
                    ;
                    $('.sticky').sticky('refresh');

                    $overrideCode.html(content);
                    $.proxy(semantic.handler.initializeCode, $overrideCode[0])();
                  }
                })
              ;
              $variableCode.html(content);
              $.proxy(semantic.handler.initializeCode, $variableCode[0])();
            }
          })
        ;
      }
    },
    showThemeButton: function(value, text) {
      if(!$themeButton.transition('is visible')) {
        $themeButton.transition('scale in');
      }
      $.proxy(handler.less.changeTheme, this)(value);
    },
    createDemos: function() {
      $('.demo.menu .item, .demo.buttons .button')
        .on('click', function() {
          if(!$(this).hasClass('dropdown')) {
            $(this)
              .addClass('active')
              .closest('.ui.menu, .ui.buttons')
              .find('.item, .button')
                .not($(this))
                .removeClass('active')
            ;
          }
        })
      ;
      $('.example .message .close')
        .on('click', function() {
          $(this).closest('.message').transition('scale out');
        })
      ;
    },
    toggleTheme: function() {
      $(this).toggleClass('active');
      $themeGrid.toggleClass('visible');
    }
  };

  // intro
  handler.introduction();

  if($(window).width() > 600) {
    $('body')
      .visibility({
        offset         : -10,
        observeChanges : false,
        once           : false,
        continuous     : false,
        onTopPassed: function() {
          requestAnimationFrame(function() {
            $('.following.bar')
              .addClass('light fixed')
              .find('.menu')
                .removeClass('inverted')
            ;
            $('.following .additional.item')
              .transition('scale in', 750)
            ;
          });
        },
        onTopPassedReverse: function() {
          requestAnimationFrame(function() {
            $('.following.bar')
              .removeClass('light fixed')
              .find('.menu')
                .addClass('inverted')
                .find('.additional.item')
                  .transition('hide')
            ;
          });
        }
      })
    ;
  }
  $('.additional.item')
    .popup({
      delay: {
        show: 200,
        hide: 50
      },
      position: 'bottom center'
    })
  ;

  $('.email.stripe form')
    .form({
      fields: {
        email: {
          identifier : 'email',
          rules: [
            {
              type   : 'empty',
              prompt : 'Please enter an e-mail'
            },
            {
              type   : 'email',
              prompt : 'Please enter a valid e-mail address'
            }
          ]
        }
      }
    })
  ;



  $themeDropdown
    .dropdown('setting', 'transition', 'drop')
    .dropdown('setting', 'duration', 350)
    .dropdown('setting', 'action', 'activate')
    .dropdown('setting', 'onChange', handler.showThemeButton)
  ;

  $themeButton
    .on('click', handler.toggleTheme)
  ;


  // demos
  $('.demo .checkbox')
    .checkbox()
  ;
  $('.demo .accordion')
    .accordion()
  ;
  $('.demo .dimmer')
    .dimmer({
      on: 'hover'
    })
  ;
  $('.demo .ui.dropdown')
    .dropdown()
  ;

  if(window.Transifex !== undefined) {
    window.Transifex.live.onTranslatePage(function(countryCode){
      var fullName = $('.language.dropdown .item[data-value=' + countryCode + ']').eq(0).text();
      $('.language.dropdown > .text').html(fullName);
    });
  }

  $('.ui.sidebar')
    .sidebar('setting', {
      transition: 'overlay'
    })
  ;

  handler.createDemos();

};


// attach ready event
$(document)
  .ready(semantic.home.ready)
;


================================================
FILE: server/files/javascript/icon.js
================================================
semantic.icon = {};

// ready event
semantic.icon.ready = function() {

  // selector cache
  var
    $iconSearch = $('iconSearch.ui.search'),
    $grid       = $('.ui.five.column.doubling.grid'),
    // alias
    handler = {
      getIconList: function() {
        var
          $examples   = $('.icon .example')
          icons       = []
        ;
        $examples.each(function() {
          var
            $header  = $(this).children('.ui.header'),
            $icons   = $(this).find('.grid > .column'),
            category = $header.text()
          ;
          $icons.each(function() {
            var
              $icon = $(this).find('.icon'),
              icon  = $icon.attr('class').replace(' icon', '')
              title = ' ' + icon
            ;
            if(!_.findWhere(icons, { icon: icon})) {
              icons.push({
                category : category,
                title    : title,
                icon     : icon
              });
            }
          });
        });
        return icons;
      }
    }
  ;

  if($iconSearch.length > 0) {

    $iconSearch
      .search({
        type          : 'category',
        minCharacters : 1,
        maxResults    : 10,
        source        : handler.getIconList(),
        onResults     : function(result) {
          setTimeout(function() {
            var
              $results = $('iconSearch.ui.search .result')
            ;
            $results.each(function() {
              var
                $result = $(this)
              ;
              new Clipboard(this, {
                text: function() {
                  var
                    iconHTML = $result.find('i').get(0).outerHTML
                  ;
                  return iconHTML;
                }
            });
            });
          }, 0);
        },
        onSelect: function() {
          var
            $search = $('iconSearch .input > input')
          ;
          $search.blur();
          setTimeout(function() {
            $('iconSearch input').transition('glow');
            $search.val('Copied to clipboard!');
          }, 50)
          setTimeout(function() {
            $search.val('');
          }, 1500)
          return false;
        }
      })
    ;

  }

};


// attach ready event
$(document)
  .ready(semantic.icon.ready)
;


================================================
FILE: server/files/javascript/input.js
================================================
semantic.input = {};

// ready event
semantic.input.ready = function() {

  $('.main.container .ui.dropdown').dropdown();

};


// attach ready event
$(document)
  .ready(semantic.input.ready)
;

================================================
FILE: server/files/javascript/item.js
================================================
semantic.item = {};

// ready event
semantic.item.ready = function() {

  // selector cache
  $('.item .favorite.icon, .item .like.icon')
    .state()
  ;

};


// attach ready event
$(document)
  .ready(semantic.item.ready)
;

================================================
FILE: server/files/javascript/library/clipboard.js
================================================
/*!
 * clipboard.js v1.5.2
 * https://zenorocha.github.io/clipboard.js
 *
 * Licensed MIT © Zeno Rocha
 */
(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.Clipboard = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o 1 && !$.isFunction(value)) {
      options = $.extend({}, config.defaults, options);

      if (typeof options.expires === 'number') {
        var days = options.expires, t = options.expires = new Date();
        t.setMilliseconds(t.getMilliseconds() + days * 864e+5);
      }

      return (document.cookie = [
        encode(key), '=', stringifyCookieValue(value),
        options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
        options.path    ? '; path=' + options.path : '',
        options.domain  ? '; domain=' + options.domain : '',
        options.secure  ? '; secure' : ''
      ].join(''));
    }

    // Read

    var result = key ? undefined : {},
      // To prevent the for loop in the first place assign an empty array
      // in case there are no cookies at all. Also prevents odd result when
      // calling $.cookie().
      cookies = document.cookie ? document.cookie.split('; ') : [],
      i = 0,
      l = cookies.length;

    for (; i < l; i++) {
      var parts = cookies[i].split('='),
        name = decode(parts.shift()),
        cookie = parts.join('=');

      if (key === name) {
        // If second argument (value) is a function it's a converter...
        result = read(cookie, value);
        break;
      }

      // Prevent storing a cookie that we couldn't decode.
      if (!key && (cookie = read(cookie)) !== undefined) {
        result[name] = cookie;
      }
    }

    return result;
  };

  config.defaults = {};

  $.removeCookie = function (key, options) {
    // Must not alter options, thus extending a fresh object...
    $.cookie(key, '', $.extend({}, options, { expires: -1 }));
    return !$.cookie(key);
  };

}));

================================================
FILE: server/files/javascript/library/detect.js
================================================
/*
 * DetectAdBlock 3.2.1
 * Copyright (c) 2015 Valentin Allaire 
 * Released under the MIT license
 * https://github.com/sitexw/DetectAdBlock
 */

(function(window) {
  var DetectAdBlock = function(options) {
    this._options = {
      checkOnLoad:    false,
      resetOnEnd:     false,
      loopCheckTime:    50,
      loopMaxNumber:    5,
      baitClass:      'pub_300x250 pub_300x250m pub_728x90 text-ad textAd text_ad text_ads text-ads text-ad-links',
      baitStyle:      'width: 1px !important; height: 1px !important; position: absolute !important; left: -10000px !important; top: -1000px !important;',
      debug:        false
    };
    this._var = {
      version:      '3.2.1',
      bait:       null,
      checking:     false,
      loop:       null,
      loopNumber:     0,
      event:        { detected: [], notDetected: [] }
    };
    if(options !== undefined) {
      this.setOption(options);
    }
    var self = this;
    var eventCallback = function() {
      setTimeout(function() {
        if(self._options.checkOnLoad === true) {
          if(self._options.debug === true) {
            self._log('onload->eventCallback', 'A check loading is launched');
          }
          if(self._var.bait === null) {
            self._creatBait();
          }
          setTimeout(function() {
            self.check();
          }, 1);
        }
      }, 1);
    };
    if(window.addEventListener !== undefined) {
      window.addEventListener('load', eventCallback, false);
    } else {
      window.attachEvent('onload', eventCallback);
    }
  };
  DetectAdBlock.prototype._options = null;
  DetectAdBlock.prototype._var = null;
  DetectAdBlock.prototype._bait = null;

  DetectAdBlock.prototype._log = function(method, message) {
    console.log('[DetectAdBlock]['+method+'] '+message);
  };

  DetectAdBlock.prototype.setOption = function(options, value) {
    if(value !== undefined) {
      var key = options;
      options = {};
      options[key] = value;
    }
    for(var option in options) {
      this._options[option] = options[option];
      if(this._options.debug === true) {
        this._log('setOption', 'The option "'+option+'" he was assigned to "'+options[option]+'"');
      }
    }
    return this;
  };

  DetectAdBlock.prototype._creatBait = function() {
    var bait = document.createElement('div');
      bait.setAttribute('class', this._options.baitClass);
      bait.setAttribute('style', this._options.baitStyle);
    this._var.bait = window.document.body.appendChild(bait);

    this._var.bait.offsetParent;
    this._var.bait.offsetHeight;
    this._var.bait.offsetLeft;
    this._var.bait.offsetTop;
    this._var.bait.offsetWidth;
    this._var.bait.clientHeight;
    this._var.bait.clientWidth;

    if(this._options.debug === true) {
      this._log('_creatBait', 'Bait has been created');
    }
  };
  DetectAdBlock.prototype._destroyBait = function() {
    window.document.body.removeChild(this._var.bait);
    this._var.bait = null;

    if(this._options.debug === true) {
      this._log('_destroyBait', 'Bait has been removed');
    }
  };

  DetectAdBlock.prototype.check = function(loop) {
    if(loop === undefined) {
      loop = true;
    }

    if(this._options.debug === true) {
      this._log('check', 'An audit was requested '+(loop===true?'with a':'without')+' loop');
    }

    if(this._var.checking === true) {
      if(this._options.debug === true) {
        this._log('check', 'A check was canceled because there is already an ongoing');
      }
      return false;
    }
    this._var.checking = true;

    if(this._var.bait === null) {
      this._creatBait();
    }

    var self = this;
    this._var.loopNumber = 0;
    if(loop === true) {
      this._var.loop = setInterval(function() {
        self._checkBait(loop);
      }, this._options.loopCheckTime);
    }
    setTimeout(function() {
      self._checkBait(loop);
    }, 1);
    if(this._options.debug === true) {
      this._log('check', 'A check is in progress ...');
    }

    return true;
  };
  DetectAdBlock.prototype._checkBait = function(loop) {
    var detected = false;

    if(this._var.bait === null) {
      this._creatBait();
    }

    if(window.document.body.getAttribute('abp') !== null
    || this._var.bait.offsetParent === null
    || this._var.bait.offsetHeight == 0
    || this._var.bait.offsetLeft == 0
    || this._var.bait.offsetTop == 0
    || this._var.bait.offsetWidth == 0
    || this._var.bait.clientHeight == 0
    || this._var.bait.clientWidth == 0) {
      detected = true;
    }
    if(window.getComputedStyle !== undefined) {
      var baitTemp = window.getComputedStyle(this._var.bait, null);
      if(baitTemp && (baitTemp.getPropertyValue('display') == 'none' || baitTemp.getPropertyValue('visibility') == 'hidden')) {
        detected = true;
      }
    }

    if(this._options.debug === true) {
      this._log('_checkBait', 'A check ('+(this._var.loopNumber+1)+'/'+this._options.loopMaxNumber+' ~'+(1+this._var.loopNumber*this._options.loopCheckTime)+'ms) was conducted and detection is '+(detected===true?'positive':'negative'));
    }

    if(loop === true) {
      this._var.loopNumber++;
      if(this._var.loopNumber >= this._options.loopMaxNumber) {
        this._stopLoop();
      }
    }

    if(detected === true) {
      this._stopLoop();
      this._destroyBait();
      this.emitEvent(true);
      if(loop === true) {
        this._var.checking = false;
      }
    } else if(this._var.loop === null || loop === false) {
      this._destroyBait();
      this.emitEvent(false);
      if(loop === true) {
        this._var.checking = false;
      }
    }
  };
  DetectAdBlock.prototype._stopLoop = function(detected) {
    clearInterval(this._var.loop);
    this._var.loop = null;
    this._var.loopNumber = 0;

    if(this._options.debug === true) {
      this._log('_stopLoop', 'A loop has been stopped');
    }
  };

  DetectAdBlock.prototype.emitEvent = function(detected) {
    if(this._options.debug === true) {
      this._log('emitEvent', 'An event with a '+(detected===true?'positive':'negative')+' detection was called');
    }

    var fns = this._var.event[(detected===true?'detected':'notDetected')];
    for(var i in fns) {
      if(this._options.debug === true) {
        this._log('emitEvent', 'Call function '+(parseInt(i)+1)+'/'+fns.length);
      }
      if(fns.hasOwnProperty(i)) {
        fns[i]();
      }
    }
    if(this._options.resetOnEnd === true) {
      this.clearEvent();
    }
    return this;
  };
  DetectAdBlock.prototype.clearEvent = function() {
    this._var.event.detected = [];
    this._var.event.notDetected = [];

    if(this._options.debug === true) {
      this._log('clearEvent', 'The event list has been cleared');
    }
  };

  DetectAdBlock.prototype.on = function(detected, fn) {
    this._var.event[(detected===true?'detected':'notDetected')].push(fn);
    if(this._options.debug === true) {
      this._log('on', 'A type of event "'+(detected===true?'detected':'notDetected')+'" was added');
    }

    return this;
  };
  DetectAdBlock.prototype.onDetected = function(fn) {
    return this.on(true, fn);
  };
  DetectAdBlock.prototype.onNotDetected = function(fn) {
    return this.on(false, fn);
  };

  window.DetectAdBlock = DetectAdBlock;

  if(window.detectAdBlock === undefined) {
    window.detectAdBlock = new DetectAdBlock({
      checkOnLoad: true,
      resetOnEnd: true
    });
  }
})(window);


================================================
FILE: server/files/javascript/library/easing.js
================================================
/*
 * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
 *
 * Open source under the BSD License.
 *
 * Copyright © 2001 Robert Penner
 * All rights reserved.
 *
*/
jQuery.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' +
                    _d.title.replace(/\'/g, '\\\'') + 'AJAX Tab One',
            second : 'AJAX Tab Two',
            third  : 'AJAX Tab Three'
          };
          return response[settings.urlData.tab];
        }
      },
      context : 'parent',
      auto    : true,
      path    : '/'
    })
  ;

};


// attach ready event
$(document)
  .ready(semantic.dropdown.ready)
;


================================================
FILE: server/files/javascript/table.js
================================================
semantic.table = {};

// ready event
semantic.table.ready = function() {

  // selector cache
  var
    // alias
    handler
  ;

  $('.ui.checkbox').checkbox({
    onChecked: function() {
      $(this).closest('.table').find('.button').removeClass('disabled');
    }
  });

  $('.ui.rating')
    .rating({
      interactive: false
    })
  ;


};


// attach ready event
$(document)
  .ready(semantic.table.ready)
;

================================================
FILE: server/files/javascript/theming.js
================================================
semantic.theming = {};

// ready event
semantic.theming.ready = function() {

  var
    $defaultTheme = $('.variable.grid .code')
  ;

  // selector cache
  var handler = {

  };

  $('.main .ui.checkbox')
    .checkbox()
  ;

  $('.load.button')
    .dropdown({
      fireOnInit: true,
      onChange: function(theme) {
        $(this)
          .api({
            on        : 'now',
            dataType  : 'text',
            action    : 'getVariables',
            urlData   : {
              theme: theme
            },
            onSuccess : function(response) {
              if(theme == 'default') {
                $defaultTheme
                  .html(response)
                ;
                $.proxy(semantic.handler.createCode, $defaultTheme);
              }
            }
          })
        ;
      }
    })
  ;


};


// attach ready event
$(document)
  .ready(semantic.theming.ready)
;

================================================
FILE: server/files/javascript/transition.js
================================================
semantic.transition = {};

// ready event
semantic.transition.ready = function() {

  // selector cache
  var
    $tab = $('.main.container .secondary.menu .item'),
    handler
  ;

  // event handlers
  handler = {

  };


  $tab
    .tab({
      context: 'parent'
    })
  ;

};


// attach ready event
$(document)
  .ready(semantic.transition.ready)
;

================================================
FILE: server/files/javascript/validate-form.js
================================================
semantic.validateForm = {};

// ready event
semantic.validateForm.ready = function() {

  // selector cache
  var
    $dogForm      = $('.dog.example .ui.form'),
    $matchingForm = $('.matching.example .ui.form'),
    $autoForm     = $('.auto.example .ui.form'),
    $colorForm    = $('.color.example .ui.form'),
    $promptForm   = $('.prompt.example .ui.form'),
    $ruleForm     = $('.custom.rule.example .ui.form'),
    $dropdownForm = $('.dropdown.example .ui.form'),
    $optionalForm = $('.optional.example .ui.form'),
    $dependsForm  = $('.depends.example .ui.form'),
    $inlineForm   = $('.inline.example .ui.form'),
    $addForm      = $('.add.example .ui.form'),
    $form         = $('.ui.form').not($dogForm).not($inlineForm).not($dropdownForm).not($optionalForm).not($promptForm),
    $checkbox     = $('.main.container .ui.checkbox'),
    $dropdown     = $('.main.container .ui.dropdown'),
    // alias
    handler
  ;

  // event handlers
  handler = {

  };
  $checkbox
    .checkbox()
  ;
  $dropdown
    .dropdown()
  ;

  $.fn.form.settings.onSuccess = function() {
    // alert('Valid form!');
    return false;
  };



  $.fn.form.settings.defaults = {
    firstName: {
      identifier  : 'first-name',
      rules: [
        {
          type   : 'empty',
          prompt : 'Please enter your first name'
        }
      ]
    },
    skills: {
      identifier  : 'skills',
      rules: [
        {
          type   : 'minCount[2]',
          prompt : 'Please select at least two skills'
        }
      ]
    },
    name: {
      identifier  : 'name',
      rules: [
        {
          type   : 'empty',
          prompt : 'Please enter your name'
        }
      ]
    },
    gender: {
      identifier  : 'gender',
      rules: [
        {
          type   : 'empty',
          prompt : 'Please select a gender'
        }
      ]
    },
    lastName: {
      identifier  : 'last-name',
      rules: [
        {
          type   : 'empty',
          prompt : 'Please enter your last name'
        }
      ]
    },
    username: {
      identifier : 'username',
      rules: [
        {
          type   : 'empty',
          prompt : 'Please enter a username'
        },
        {
          type   : 'length[5]',
          prompt : 'Your username must be at least 5 characters'
        }
      ]
    },
    email: {
      identifier : 'email',
      rules: [
        {
          type   : 'email',
          prompt : 'Please enter a valid e-mail'
        }
      ]
    },
    password: {
      identifier : 'password',
      rules: [
        {
          type   : 'empty',
          prompt : 'Please enter a password'
        },
        {
          type   : 'length[6]',
          prompt : 'Your password must be at least 6 characters'
        }
      ]
    },
    passwordConfirm: {
      identifier : 'password-confirm',
      rules: [
        {
          type   : 'empty',
          prompt : 'Please confirm your password'
        },
        {
          identifier : 'password-confirm',
          type       : 'match[password]',
          prompt     : 'Please verify password matches'
        }
      ]
    },
    terms: {
      identifier : 'terms',
      rules: [
        {
          type   : 'checked',
          prompt : 'You must agree to the terms and conditions'
        }
      ]
    }
  };

  $form
    .form()
  ;

  $matchingForm
    .form({
      fields: {
        name: {
          identifier : 'special-name',
          rules: [
            {
              type   : 'empty'
            }
          ]
        }
      }
    })
  ;

  $inlineForm
    .form({
      inline : true,
      on: 'blur'
    })
  ;

  $dropdownForm
    .form({
      fields: {
        gender: {
          identifier  : 'gender',
          rules: [
            {
              type   : 'empty',
              prompt : 'Please enter a gender'
            }
          ]
        },
        name: {
          identifier  : 'name',
          rules: [
            {
              type   : 'empty',
              prompt : 'Please enter your name'
            }
          ]
        }
      }
    })
    .find('.dropdown')
      .dropdown()
  ;

/*  $autoForm
    .form({
      fields: {
        name     : 'empty',
        gender   : 'empty',
        username : 'empty',
        password : ['minLength[6]', 'empty'],
        skills   : ['minCount[2]', 'empty'],
        terms    : 'checked'
      }
    })
  ;
*/

  $colorForm.form({
    fields: {
      color: {
        identifier: 'color',
        rules: [{
          type: 'regExp',
          value: /rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/i,
        }]
      }
    }
  });


  $promptForm
    .form({
      fields: {
        field1: {
          rules: [
            {
              type   : 'empty'
            }
          ]
        },
        field2: {
          rules: [
            {
              type   : 'isExactly[dog]',
              prompt : '{name} is set to "{value}" that is totally wrong. It should be {ruleValue}'
            }
          ]
        },
        field3: {
          rules: [
            {
              type   : 'isExactly[cat]',
              prompt : function(value) {
                if(value == 'dog') {
                  return 'I told you to put cat, not dog!';
                }
                return 'That is not cat';
              }
            }
          ]
        },
      }
    })
  ;

  $dependsForm
    .form({
      fields: {
        yearsPracticed: {
          identifier : 'yearsPracticed',
          depends    : 'isDoctor',
          rules      : [
            {
              type   : 'empty',
              prompt : 'Please enter the number of years you have been a doctor'
            }
          ]
        }
      }
    })
  ;

  $optionalForm
    .form({
      fields: {
        email: {
          identifier : 'email',
          rules: [
            {
              type   : 'email',
              prompt : 'Please enter a valid e-mail'
            }
          ]
        },
        ccEmail: {
          identifier : 'cc-email',
          optional   : true,
          rules: [
            {
              type   : 'email',
              prompt : 'Please enter a valid second e-mail'
            }
          ]
        }
      }
    })
  ;

  // no need to actually do this
  $.fn.form.settings.rules.adminLevel = function(value, adminLevel) {
    window.user && window.user.adminLevel >= adminLevel;
  };
  $ruleForm
    .form({
      fields: {
        dog: {
          identifier: 'dog',
          rules: [
            {
              type: 'adminLevel[2]',
              prompt: 'You must be at least a level-2 admin to add a dog'
            }
          ]
        }
      }
    })
  ;

  $dogForm
    .form({
      fields: {
        dog: {
          rules: [
            {
              type: 'empty',
              prompt: 'You must have a dog to add'
            },
            {
              type: 'contains[fluffy]',
              prompt: 'I only want you to add fluffy dogs!'
            },
            {
              type: 'not[mean]',
              prompt: 'Why would you add a mean dog to the list?'
            }
          ]
        }
      }
    })
  ;

  $addForm
    .form('remove fields', ['password', 'gender'])
  ;
};


// attach ready event
$(document)
  .ready(semantic.validateForm.ready)
;


================================================
FILE: server/files/javascript/visibility.js
================================================
semantic.visiblity = {};

// ready event
semantic.visiblity.ready = function() {

  // selector cache
  var
    $pageTabs           = $('.masthead.tab.segment .stackable.menu .item'),
    $firstColumn        = $('.first.example .main.column'),
    $firstSegment       = $('.first.example .demo.segment'),
    $firstSticky        = $('.first.example .grid .sticky'),

    $secondColumn       = $('.second.example .main.column'),
    $secondSegment      = $('.second.example .demo.segment'),
    $secondSticky       = $('.second.example .grid .sticky'),
    $settingsCheckboxes = $('.second.example .checkbox'),
    $log                = $('.second.example .console'),
    $clearButton        = $('.second.example .clear.button'),

    handler
  ;

  // event handlers
  handler = {
    clearConsole: function() {
      $log.empty();
    },
    updateTable: function(calculations) {
      $.each(calculations, function(name, value) {
        var
          value = (typeof value == 'integer')
            ? parseInt(value, 10)
            : value.toString(),
          $td
        ;
        if(name == 'pixelsPassed' || name == 'width' || name == 'height') {
          value = parseInt(value, 10) + 'px';
        }
        else if(name == 'percentagePassed') {
          value = parseInt(value * 100, 10) + '%';
        }
        $td = $('.first.example .grid .sticky tr.'+ name +' td:last-child');
        if($td.html() !== value) {
          if(value == 'true' || value == 'false') {
            $td.removeClass('highlight').addClass('highlight');
            setTimeout(function(){ $td.removeClass('highlight'); }, 2000);
          }
          $td.html(value);
        }
      });
    }
  };

  $pageTabs.tab('setting', 'onLoad', function() {
    $('.ui.sticky')
      .sticky('refresh')
    ;
    $(this).find('.visibility.example .overlay, .visibility.example .demo.segment, .visibility.example .items img')
      .visibility('refresh')
    ;
  });

  $firstSticky
    .sticky({
      observeChanges : false,
      pushing        : true,
      context        : $firstColumn,
      offset         : 60
    })
  ;

  $clearButton
    .on('click', handler.clearConsole)
  ;

  $firstSegment
    .visibility({
      once           : false,
      continuous     : true,
      observeChanges : false,
      onUpdate       : handler.updateTable
    })
  ;

  $secondSegment
    .visibility({
      onOnScreen: function() {
        $log.append('
onOnScreen fired
');
        $log.scrollTop(999999);
      },
      onOffScreen: function() {
        $log.append('
onOffScreen fired
');
        $log.scrollTop(999999);
      },
      onTopVisible: function() {
        $log.append('
onTopVisible fired
');
        $log.scrollTop(999999);
      },
      onBottomVisible: function() {
        $log.append('
onBottomVisible fired
');
        $log.scrollTop(999999);
      },
      onPassing: function() {
        $log.append('
onPassing fired
');
        $log.scrollTop(999999);
      },
      onTopPassed: function() {
        $log.append('
onTopPassed fired
');
        $log.scrollTop(999999);
      },
      onBottomPassed: function() {
        $log.append('
onBottomPassed fired
');
        $log.scrollTop(999999);
      },
      onTopVisibleReverse: function() {
        $log.append('
onTopVisibleReverse fired
');
        $log.scrollTop(999999);
      },
      onBottomVisibleReverse: function() {
        $log.append('
onBottomVisibleReverse fired
');
        $log.scrollTop(999999);
      },
      onPassingReverse: function() {
        $log.append('
onPassingReverse fired
');
        $log.scrollTop(999999);
      },
      onTopPassedReverse: function() {
        $log.append('
onTopPassedReverse fired
');
        $log.scrollTop(999999);
      },
      onBottomPassedReverse: function() {
        $log.append('
onBottomPassedReverse fired
');
        $log.scrollTop(999999);
      }
    })
  ;

  $settingsCheckboxes
    .checkbox({
      onChecked: function() {
        var setting = $(this).attr('name');
        $secondSegment.visibility('setting', setting, true);
      },
      onUnchecked: function() {
        var setting = $(this).attr('name');
        $secondSegment.visibility('setting', setting, false);
      }
    })
  ;

  $secondSticky
    .sticky({
      observeChanges : false,
      pushing        : true,
      context        : $secondColumn,
      offset         : 60
    })
  ;

};

var count = 1;
window.loadFakeContent = function() {
  // load fake content
  var
    $segment = $('.infinite .demo.segment'),
    $loader  = $segment.find('.inline.loader'),
    $content = $('
Loaded Content #' + count + '
')
  ;
  if(count <= 5) {
    $loader.addClass('active');
    setTimeout(function() {
      $loader
        .removeClass('active')
        .before($content)
      ;
      $('.ui.sticky')
        .sticky('refresh')
      ;
      $('.visibility.example > .overlay, .visibility.example > .demo.segment, .visibility.example .items img')
        .visibility('refresh')
      ;
    }, 1000);
  }
  count++;
}

// attach ready event
$(document)
  .ready(semantic.visiblity.ready)
;

================================================
FILE: server/files/stylesheets/customize.css
================================================
/*******************************
          Customizer
*******************************/

#example.custom .accordion .title + .content {
  padding: 0em;
}
#example.custom .download.list {
  margin: 0em;
}
#example.custom .header {
  position: relative;
}
#example.custom .header .all {
  position: absolute;
  right: 1em;
}
#example.custom .download.list .checkbox + .content {
  opacity: 0.6;
  transition: opacity 0.3s ease;
}
#example.custom .download.list .checkbox + .content .header {
  transition: color 0.3s ease;
  font-weight: normal;
}
#example.custom .download.list .content .description {
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.9em;
}

#example.custom .main.container > h2:first-child {
  margin-top: 0em;
}
#example.custom .download.list .checkbox.checked + .content {
  opacity: 1;
}
#example.custom .download.list .checkbox.checked + .content .header {
  color: #000000;
  font-weight: bold;
}

/* Element Lists */
#example.custom .download.list .item > .checkbox {
  display: block;
  float: left;
  margin-top: 0.75em;
  margin-left: 0.5em;
}
#example.custom .download.list .item > .content {
  margin-left: 3em;
}
#example.custom .download.list .item .icon.button {
  opacity: 0;
  margin: 0.3em 0.3em 0em 0em;
  transition: opacity 0.5s ease;
}
#example.custom .download.list .item:hover .icon.button {
  opacity: 1;
}

================================================
FILE: server/files/stylesheets/docs.css
================================================

/*******************************
             Global
*******************************/

/* Regular */
@font-face {
  font-family: 'Lato';
  src:
    url(/fonts/lato/Lato-Regular.woff2) format('woff2')
  ;
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: 'Lato';
  src:
    url(/fonts/lato/Lato-Italic.woff2) format('woff2')
  ;
  font-style: italic;
  font-weight: normal;
}

/* Bold */
@font-face {
  font-family: 'Lato';
  src:
    url(/fonts/lato/Lato-Bold.woff2) format('woff2')
  ;
  font-style: normal;
  font-weight: 700;
}
@font-face {
  font-family: 'Lato';
  src:
    url(/fonts/lato/Lato-BoldItalic.woff2) format('woff2')
  ;
  font-style: italic;
  font-weight: 700;
}


/*--------------
     Page
---------------*/

ul.list {
  list-style-type: disc;
}
ul.list li {
  list-style-position: outside;
}

p {
  margin: 1em 0em;
}
p:first-child {
  margin-top: 0em;
}
p:last-child {
  margin-bottom: 0em;
}


/*----------------
      Footer
-----------------*/

#example > .pusher > .footer {
  margin: 0em;
  border-radius: 0em;
  padding: 4em 0em 4em 0em;
}

/*--------------
     Code
---------------*/

/* Inline Code */
pre {
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}
pre {
  background-color: #FFFFFF;
  text-align: left;
}


/*rtl:ignore*/
pre.console {
  background-color: transparent;
  line-height: 1.6;
  font-family:  'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
  height: 300px;
  overflow: auto;
  direction:ltr;
}
code {
  background-color: rgba(0, 0, 0, 0.08);
  border-radius: 3px;
  display: inline-block;
  font-family: "Monaco","Menlo","Ubuntu Mono","Consolas","source-code-pro",monospace;
  font-size: 0.875em;
  font-weight: bold;
  padding: 1px 6px;
  vertical-align: baseline;
}
pre code {
  border: none;
  padding: 0px;
  font-size: 1em;
}

blockquote {
  border-left: 4px solid #777777;
  font-size: 16px;
  line-height: 1.5;
  padding: 0em 2em;
  margin: 1em 0em 2em;
}
blockquote p {
  line-height: inherit;
}
blockquote .author {
  display: block;
  margin: 1em 0em 0em;
  font-weight: bold;
}

/* Code Inside Message */
.ui.message > p > code,
.ui.message > code {
  background-color: rgba(0, 0, 0, 0.06);
  line-height: 1;
  padding: 3px 4px;
}


/*--------------
    Docs Icon
---------------*/


/* Replace Code Icon */
@font-face {
  font-family: 'Docs Code';
  src:
    url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggi/LYAAAC8AAAAYGNtYXAaVcxXAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zl4DICgAAAFwAAAAeGhlYWQCOGXvAAAB6AAAADZoaGVhA6IB5gAAAiAAAAAkaG10eALAAAAAAAJEAAAAFGxvY2EAKABQAAACWAAAAAxtYXhwAAgAEAAAAmQAAAAgbmFtZVcZpu4AAAKEAAABRXBvc3QAAwAAAAADzAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADmAAHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIOYA//3//wAAAAAAIOYA//3//wAB/+MaBAADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAgAAAEABwAGAAAYADQAAAQcXBxc3JyMHFzcnNycBMDBwcDCQkKCQkDBwcDABgDBwcDCgoKCgMHBwMAAAAQAAAAEAAH1wL6hfDzz1AAsCAAAAAADQrRK5AAAAANCtErkAAAAAAcABgAAAAAgAAgAAAAAAAAABAAAB4P/gAAACAAAAAAABwAABAAAAAAAAAAAAAAAAAAAABQAAAAAAAAAAAAAAAAEAAAABwAAAAAAAAAAKABQAHgA8AAEAAAAFAA4AAgAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAOAAAAAQAAAAAAAgAOAEcAAQAAAAAAAwAOACQAAQAAAAAABAAOAFUAAQAAAAAABQAWAA4AAQAAAAAABgAHADIAAQAAAAAACgA0AGMAAwABBAkAAQAOAAAAAwABBAkAAgAOAEcAAwABBAkAAwAOACQAAwABBAkABAAOAFUAAwABBAkABQAWAA4AAwABBAkABgAOADkAAwABBAkACgA0AGMAaQBjAG8AbQBvAG8AbgBWAGUAcgBzAGkAbwBuACAAMQAuADAAaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AbgBSAGUAZwB1AGwAYQByAGkAYwBvAG0AbwBvAG4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=) format('truetype'),
    url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAQ4AAsAAAAAA+wAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgCCL8tmNtYXAAAAFoAAAATAAAAEwaVcxXZ2FzcAAAAbQAAAAIAAAACAAAABBnbHlmAAABvAAAAHgAAAB4XgMgKGhlYWQAAAI0AAAANgAAADYCOGXvaGhlYQAAAmwAAAAkAAAAJAOiAeZobXR4AAACkAAAABQAAAAUAsAAAGxvY2EAAAKkAAAADAAAAAwAKABQbWF4cAAAArAAAAAgAAAAIAAIABBuYW1lAAAC0AAAAUUAAAFFVxmm7nBvc3QAAAQYAAAAIAAAACAAAwAAAAMCAAGQAAUAAAFMAWYAAABHAUwBZgAAAPUAGQCEAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA5gAB4P/g/+AB4AAgAAAAAQAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAA4AAAACgAIAAIAAgABACDmAP/9//8AAAAAACDmAP/9//8AAf/jGgQAAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAIAAABAAcABgAAGAA0AAAEHFwcXNycjBxc3JzcnATAwcHAwkJCgkJAwcHAwAYAwcHAwoKCgoDBwcDAAAAEAAAABAAB9cC+oXw889QALAgAAAAAA0K0SuQAAAADQrRK5AAAAAAHAAYAAAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAAcAAAQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAABAAAAAcAAAAAAAAAACgAUAB4APAABAAAABQAOAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoANABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoANABjAGkAYwBvAG0AbwBvAG4AVgBlAHIAcwBpAG8AbgAgADEALgAwAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG4AUgBlAGcAdQBsAGEAcgBpAGMAbwBtAG8AbwBuAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('woff');
  font-weight: normal;
  font-style: normal;
}

#example .example i.code.icon:before {
  font-family: 'Docs Code';
  content: "\e600";
  vertical-align: top;
}


/*--------------
     Sidebar
---------------*/


#example .ui.sidebar.menu .item {
  will-change: transform;
}

#example .sidebar.menu .logo.image,
#example .ui.menu .logo.image {
  width: 35px;
  margin-right: 1em;
}

#example #toc > * {
  will-change: transform;
}
#example #toc > :last-child {
  padding-bottom: 2em;
}


#example #toc > .ui.menu {
  max-height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Incomplete Label */
#example #toc .item .circular.label {
  position: absolute;
  top: 0.75rem;
  right: 1em;
  opacity: 0.2;
  transition: background 0.3s ease;
}
#example #toc .item.active > .circular.label,
#example #toc .item:hover > .circular.label {
  opacity: 0.8;
}

/* Hidden Items */
#example #toc .hide.item {
  display: none;
}

/* Sidebar Header */
#example #toc .inverted.header {
  font-size: 1em;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0.5em;
}
#example #toc a.inverted.header.active,
#example #toc a.inverted.header:hover {
  color: rgba(255, 255, 255, 1);
}
#example #toc .menu .active.item {
  color: #FFF;
}

/*--------------
   Page Headers
---------------*/

#example .masthead.segment {
  position: relative;
  z-index: 3;
  margin: 0em;
  min-height: 185px;
  padding: 3em 0em;
  background-color: #FFFFFF;
  border-bottom: 1px solid #DDDDDD;
  box-shadow: none;
}

#example .masthead .introduction {
  display: block;
}
#example .masthead .introduction:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

#example .masthead.segment h1 {
  margin: 0em;
}

#example .masthead iframe.github {
  width: 101px !important;
}
#example .masthead iframe {
  margin-left: 5px;
  float: right;
}

/* Align with buttons */
#example .masthead .main.menu {
  margin-top: -2px;
  min-height: 0em;
}
#example .masthead .main.menu > .item {
  padding-top: 0.785714em;
  padding-bottom: 0.785714em;
}

/*--------------
    Languages
---------------*/

#example .language.dropdown.button {
  margin-top: 0.3em;
}
#example .language.dropdown > .text .description {
  color: rgba(255, 255, 255, 0.4);
}
#example .language.dropdown > .menu {
  width: 280px;
}

/*--------------
    Page Tabs
---------------*/

#example .tab.masthead.segment {
  display: block;
  padding-bottom: 0em;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1) inset;
}
#example .tab.masthead.segment .vertical.menu {
  display: none;
  margin: 2rem 0em 1rem;
}
#example .tab.masthead.segment .tabular.menu {
  margin: 3rem 0px 0em;
  border-bottom: none;
}
#example .tab.masthead.segment .tabular.menu .active.item {
  background-color: #F7F7F7;
}

/*--------------
    Ad Beg
---------------*/

#example .beg.segment {
  background-color: #F9F5F5;
  padding: 2em 3em;
}
#example .beg.segment .delete.icon {
  position: absolute;
  top: 1.5em;
  right: 1.5em;
}
#example .beg.segment .ui.header {
  margin: 0 !important;
}

/*--------------
    Download
---------------*/

/* Download Popup */
#example .masthead.segment .download.popup {
  width: 400px;
}
#example .masthead.segment .download.popup .check.icon {
  margin-left: -1em;
}
#example .masthead.segment .download.popup .framework.grid,
#example .masthead.segment .download.popup .standalone.grid,
#example .masthead.segment .download.popup .integration.grid,
#example .masthead.segment .download.popup .link.grid {
  display: none;
}


/* lists */
#example .features {
  list-style-position: inside;
  margin: 10px 0px 0px;
  padding: 0px;
}
#example .features li {
  list-style-type: disc;
  margin: 0px 0px 10px;
  font-weight: bold;
}


#example .main.container a.anchor {
  height: 1px;
  position: absolute;
  right: 100%;
  top: -2.5em;
  width: 1px;
}


/*--------------
  Fixed Columns
---------------*/

#example .fixed.column {
  position: absolute;
  right: -0.5em;
  top: 0px;
  width: 250px;
  padding-top: 2em;
}
#example .fixed.column + .examples {
  margin-right: 280px;
}

#example .tab.masthead .item.menu {
  margin: 3rem 0rem 2rem;
}

#example .tab.masthead.segment .fixed .tabular.menu {
  position: fixed;
  top: 50px;
}
#example .fixed .launch {
  display: none;
}
#example .fixed.column .sticky {
  margin-top: 0em;
}

/*--------------
   Fixed Menu
---------------*/

#example .main.menu .title.item b {
  margin-right: 0.5em;
}
#example .fixed.main.menu .launch.item {
  display: block;
}
#example .fixed.main.menu .search .icon {
  opacity: 0.9;
}


/*--------------
  Sidebar Button
---------------*/

#example .fixed.launch.button {
  display: none;
  position: fixed;
  top: 2.5em;
  left: 0px;

  width: 55px;
  height: auto;
  white-space: nowrap;
  overflow: hidden;
  -webkit-transition:
    0.3s width ease,
    0.5s transform ease
  ;
  -moz-transition:
    0.3s width ease,
    0.5s transform ease
  ;
  -o-transition:
    0.3s width ease,
    0.5s transform ease
  ;
  -ms-transition:
    0.3s width ease,
    0.5s transform ease
  ;
  transition:
    0.3s width ease,
    0.5s transform ease
  ;
}
#example .launch.button .icon {
  margin-left: 0px;
}


#example .fixed.launch.button .text {
  position: absolute;
  white-space: nowrap;
  top: auto;
  left: 54px;
  opacity: 0;
  -webkit-transition:
    0.3s opacity 0.3s
  ;
  -moz-transition:
    0.3s opacity 0.3s
  ;
  -o-transition:
    0.3s opacity 0.3s
  ;
  -ms-transition:
    0.3s opacity 0.3s
  ;
  transition:
    0.3s opacity 0.3s
  ;
}
#example .fixed.launch.button:hover {
  width: 130px;
}
#example .fixed.launch.button:hover .text {
  opacity: 1;
}

/* Position Change */
#example.pushable.left.overlay .fixed.launch.button {
  transform: translate3d(0, 0, 0);
}
#example.pushable.overlay.left.pushed .fixed.launch.button {
  transform: translate3d(260px, 0, 0);
}


/*******************************
        Alternate Layouts
*******************************/

/*----------------
   Wide Layout
-----------------*/

#example.wide .main.container {
  max-width: 1200px !important;
}

/*----------------
   Basic Layout
-----------------*/

#example.basic .fixed.menu > .container,
#example.basic .main.container,
#example.basic .masthead > .container {
  position: relative;
  width: 700px !important;
  left: 0px;
  margin-right: 4em !important;
}

#example.basic .main.container > .rail,
#example.basic .main.container > .tab > .rail {
  display: none !important;
}
#example .main.container .introduction p,
#example .main.container .tab > p,
#example .main.container .example > p,
#example .main.container > p {
  font-size: 16px;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.8);
}

/* Link Styles */
#example .main.container > p a,
#example .main.container > .tab > p a,
#example .main.container .example > .ignored a,
#example .main.container .example > p a  {
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: top;
  z-index: 0;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
  outline: none;
}
#example .main.container > p a > code,
#example .main.container > .tab > p a > code,
#example .main.container .example > .ignored a > code,
#example .main.container .example > p a > code {
  background-color: rgba(0, 50, 100, 0.08);
}
#example .main.container > p a:before,
#example .main.container > .tab > p a:before,
#example .main.container .example > .ignored a:before,
#example .main.container .example > p a:before,
#example .main.container .code .value a:before {
  position: absolute;
  top: auto;
  bottom: 1px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #4183C4;
  content: '';
  -webkit-transition: all 0.2s;
  -webkit-backface-visibility: hidden;
  transition: all 0.2s;
  backface-visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}

/* Not on UI */
#example .main.container .example > .ignored a.ui:before {
  display: none;
}

/* Hover */
#example .main.container > p a:hover > code,
#example .main.container > .tab > p a:hover > code,
#example .main.container .example > .ignored a:hover > code,
#example .main.container .example > p a:hover > code {
  background-color: rgba(0, 50, 100, 0.12);
}
#example .main.container > p a:hover:before,
#example .main.container > p a:focus:before,
#example .main.container > .tab > p a:hover:before,
#example .main.container > .tab > p a:focus:before,
#example .main.container .example > .ignored a:hover:before,
#example .main.container .example > .ignored a:focus:before,
#example .main.container .example > p a:hover:before,
#example .main.container .example > p a:focus:before,
#example .main.container .code .value a:hover:before  {
  background-color: #2C76BF;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

#example .ui.ad {
  max-width: 100%;
}

/*----------------
   Minimal Layout
-----------------*/


/* Always Hidden Sidebar */
#example.minimal.basic > .launch.button {
  display: block;
}
#example.minimal.basic .full.height > .toc {
  display: none;
}
#example.minimal.basic .full.height > .article {
  margin-left: 0px;
}
#example.minimal.basic .fixed.menu > .container,
#example.minimal.basic .main.container,
#example.minimal.basic .masthead > .container,
#example.minimal.basic .footer > .container {
  position: relative;
  width: 700px !important;
  left: 0px;
  margin-left: auto !important;
  margin-right: auto !important;
}
#example.minimal > .pusher > .footer {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media only screen and (max-width: 820px) {

  #example.minimal.basic .fixed.menu > .container,
  #example.minimal.basic .main.container,
  #example.minimal.basic .masthead > .container,
  #example.minimal.basic .footer > .container {
    width: auto !important;
    margin-left: 1em !important;
    margin-right: 1em !important;
  }
}



/*----------------
  Settings Table
-----------------*/

#example .settings.table {
  margin-bottom: 20px;
}
#example .settings.table td:first-child {
  font-weight: bold;
}
#example .settings.table td:nth-child(2n) {
  width: 100px;
}

/*----------------
   Code Samples
-----------------*/

#example .segment pre {
  background-color: transparent;
  margin: 0em;
  padding: 0em;
}
#example .segment pre .code {
  margin: 0em;
  padding: 0em;
  max-height: 610px;
  font-weight: normal;
  transform: rotateZ(0deg);
  -ms-transform: none !important;
  font-family:  'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
}

#example table .instructive.segment {
  background-color: transparent;
  border: 0px;
  box-shadow: none;
  padding: 0em;
}

#example .ui.label + .instructive.segment {
  margin-top: 0em;
}
#example .instructive.segment:after {
  display: none;
}
#example .existing.segment em,
#example .instructive.segment em {
  font-style: normal;
  color: rgba(0, 0, 0, 0.4);
}
#example .existing.segment .title + em,
#example .instructive.segment .title + em {
  position: absolute;
  right: 1em;
}
#example .label + .code {
  margin-top: 1.5em;
}

/*----------------
     Examples
-----------------*/

#example .example {
  margin: 2em 0em;
  padding: 2em 0em;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
#example .example > .ignored.message,
#example .example > .ignore.message,
#example .example > p {
  max-width: 700px;
}

#example .example:last-child {
  margin-bottom: none;
}

/* Header */
#example .example > h4:first-child {
  font-size: 18px;
  margin: 0em 0em 0em;
}

/* Wireframe Image */
#example .example .wireframe.image {
  opacity: 0.5;
}
#example .example .accordion .content > .wireframe.image {
  opacity: 0.5 !important;
}
#example .example :not(.images) > .wireframe.image {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
#example .example :not(.images) > .wireframe.image:first-child {
  margin-top: 0em;
}
#example .example :not(.images) > .wireframe.image:last-child {
  margin-bottom: 0em;
}

/* Description */
#example .example .anchor + p {
  margin-top: 0;
  padding-bottom: 1em;
}
#example .no.example .anchor + p {
  margin: 0em 0px 1em;
  padding-bottom: 0em;
}
#example .example > p {
  color: rgba(0, 0, 0, 0.8);
}

/* Message */
#example .example .anchor + p + .ignored.message:not(.attached),
#example .example .anchor + p + .ignored.message + .ignored.message:not(.attached) {
  margin: 0em 0 2em;
}

#example .pushing.example .rail .sticky {
  margin: 2em 0em;
}

#example .inline.example > .segment > .sticky.fixed {
  background-color: #FFFFFF;
}
#example .inline.example > .segment > .sticky.fixed + * {
  margin-top: 39px;
}


/* Another */
#example .another.example {
  margin-top: 0em;
  padding-top: 2em;
}

/* Spaced */
#example .spaced.example .buttons,
#example .spaced.example .button {
  margin-bottom: 0.75em;
}
#example .spaced.example .buttons .button {
  margin-bottom: 0em;
}
#example .example .toggle.button {
  min-width: 100px;
}

/* Examples Tab */
#example .tab[data-tab*="examples"] .example > p,
#example .examples.tab .example > p {
  margin: 1em 0em;
}
#example .tab[data-tab*="examples"] .example .anchor + p,
#example .examples.tab .example .anchor + p {
  padding: 0em;
}

/* Intro Tab */
#example .intro > h3.ui.header {
  margin-top: 4em;
}
#example .intro .example .anchor + p {
  margin-top: 0.5em;
}
#example .intro .example > p {
  color: rgba(0, 0, 0, 0.8);
}


#example .existing.segment:after,
#example .instructive.segment:after {
  display: none;
}

/*----------------
  Example Types
-----------------*/

/* No Example */
#example .no.example i.code {
  display: none;
}

#example .fixed.example iframe {
  border: none;
  width: 100%;
  height: 350px;
}
/* Stretched Example */

#example .stretched.example .column img {
  /* This is only necessary for IE which doesnt respect img intrinsic aspect ratios */
  max-height: 225px;
}

#example .clear.dropdown .dropdown {
  vertical-align: middle;
}


/* Requires Clear */
#example .clearing.example {
  overflow: hidden;
  clear: both;
  padding-left: 1px;
  padding-right: 1px;
  padding-bottom: 1px;
}
#example .piled.example {
  position: relative;
  z-index: 1;
}
#example .main.container:after {
  content: '';
  display: block;
  height: 0px;
  clear: both;
  visibility: hidden;
}
#example .example-group {
  position: relative;
}
#example .main.container > .tab {
  position: relative;
}

#example .main.container .examples > h2,
#example .main.container > h2,
#example .main.container > .tab > h2{
  position: relative;
  margin: 5rem 0rem 3rem;
}
#example .main.container .examples > h3,
#example .main.container > h3,
#example .main.container > .tab > h3{
  position: relative;
  margin: 3rem 0rem 2rem;
}
#example .main.container .examples > .rail + h2,
#example .main.container > .rail + h2,
#example .main.container > .tab > .rail + h2,
#example .main.container .examples > h2:first-child,
#example .main.container > h2:first-child,
#example .main.container > .tab > h2:first-child {
  margin-top: 0em;
}

/* After Section Header */
#example .example:first-child,
#example h2 + .example,
#example h3 + .example,
#example h4 + .example {
  margin-top: 0px;
}
#example .example:first-child i.code,
#example h2 + .example i.code,
#example h3 + .example i.code,
#example h4 + .example i.code {
  top: 0.75em;
}
#example .another.example i.code {
  top: -0.5em;
}

/* Spaced */
#example .spaced.example .buttons,
#example .spaced.example .button {
  margin-bottom: 0.75em;
}
#example .spaced.example .buttons .button {
  margin-bottom: 0em;
}
#example .example .toggle.button {
  min-width: 200px;
}

/* Code Language */
#example .example .language.label {
  margin: 1em 0em 0.75em;
}


/*--------------
   Code Button
---------------*/

#example .example i.code {
  cursor: pointer;
  position: absolute;

  top: 2rem;
  right: 0rem;
  margin: 0;
  opacity: 0.5;

  font-size: 20px;
  color: #000000;

  -webkit-transition: opacity 0.3s ease-out;
  -moz-transition: opacity 0.3s ease-out;
  -o-transition: opacity 0.3s ease-out;
  -ms-transition: opacity 0.3s ease-out;
  transition: opacity 0.3s ease-out;
}

/*#example .example i.code:before {*/
  /*font-family: 'Docs';*/
  /*content: "\e600";*/
/*}*/
#example .example:hover i.code {
  opacity: 0.85;
}
#example .example:hover i.code:hover {
  opacity: 1;
}
#example .example .grid i.code {
  right: 25%;
}

#example .pointing.label + .existing.segment {
  margin-top: 0em;
}
#example .existing.code {
  display: none;
}

/* Code Annotation */
#example .example .annotation {
  margin: 0em;
}
#example .annotation pre code {
  min-width: 500px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}


#example .transition.example .ui.button {
  margin-bottom: 0.5em;
}

/* HTML Wrapper */
#example .example > .html {
  padding: 0em;
  transition:
    box-shadow 0.2s ease,
    padding 0.2s ease
  ;
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
}
#example .example > .html > .top.attached.label {
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  display: none;
  background-color: #F8F8F8;
  box-shadow: 0px 0px 0px 1px #DDDDDD;
}
#example .example > .html > .top.attached.label .copy {
  position: absolute;
  top: 9px;
  right: 8px;
  color: #AAAAAA;
}
#example .example > .html > .top.attached.label .copy:hover {
  color: #666666;
}
#example .example > .empty.html.segment {
  padding: 1.15em 1em 1em;
}
#example .example > .html.segment:after {
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
#example .example > .html.segment > .attached.label {
  display: block;
}
#example .example > .html.segment > .attached.label .copy {
  float: right;
}
#example .example > .html.segment {
  padding: 3.5em 1em 1em;
}
#example .example .instructive.segment {
  margin-top: -1px;
}

/* Fixes for UI */
#example .segment > .dimmer {
  z-index: 800;
}
#example .code .active.ui.modal {
  display: none !important;
}
#example .example .circular.segment {
  width: 175px;
  height: 175px;
}
#example .example .annotation.visible + .icon.buttons {
  margin-top: 1rem;
}


/*******************************
           UI Pages
*******************************/


/*----------------
  Getting Started
-----------------*/

#example.started .tab.segment > .example:first-child {
  margin-top: 0em;
  padding-top: 0em;
}
#example.started .tab.segment > .example:last-child {
  margin-bottom: 0em;
  padding-bottom: 0em;
}

/*----------------
     Theming
-----------------*/

#example.theming .main.container .button {
  margin-bottom: 0.4em;
}
#example.theming .variable.grid .segment {
  display: block;
  width: 100%;
  height: 500px;
  overflow: auto;
}

/*--------------
  Content Loader
---------------*/
#example .content.example .ignored.card {
  display: none;
}
#example .content.example .card .image + .content {
  min-height: 94px;
}

/*--------------
    Colored
---------------*/

#example .colored.example .label,
#example .colored.example .button,
#example .colored.example .menu {
  margin-bottom: 0.5em;
}
#example .colored.example .menu {
  margin-right: 0.5em;
}
#example .colored.example .attached.label {
  margin-bottom: 0em;
}

/*--------------
    Callback
---------------*/

#example .callback.example .console {
  height: 350px;
  overflow: auto;
}

/*--------------
    Fitted
---------------*/

#example .fitted.example .segment {
  line-height: 1;
}

/*--------------
      Grid
---------------*/

#example .highlighted.example .grid {
  position: relative;
}
#example .highlighted.example .grid:before {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background-color: #FAFAFA;
  content: '';
  width: calc(100% - 2rem);
  height: calc(100% - 2rem);
  box-shadow: 0px 0px 0px 1px #DDDDDD inset;
}
#example .highlighted.example .relaxed.grid:before {
  width: calc(100% - 3rem);
  left: 1.5em;
}
/* Consecutive */
#example .highlighted.example > .grid + .grid {
  margin-top: 1rem;
}

#example .highlighted.example .grid .grid:before {
  background-color: #F0F0F0;
}
#example .highlighted.example .row {
  position: relative;
}

#example .highlighted.example .grid > .column {
  position: relative;
  z-index: 11;
}
#example .highlighted.example .grid .column:not(.row):not(.grid):after {
  background-color: rgba(86, 61, 124, .1);
  -webkit-box-shadow: 0px 0px 0px 1px rgba(86, 61, 124, 0.2) inset;
  box-shadow: 0px 0px 0px 1px rgba(86, 61, 124, 0.2) inset;
  content: "";
  display: block;
  min-height: 50px;
}
#example .highlighted.example .grid .column:not(.grid):first-child,
#example .ui.type.cards .image .grid .column:not(.grid):first-child {
  box-shadow: none;
}
#example .highlighted.example .grid .column:not(.grid),
#example .ui.type.cards .image .grid .column:not(.grid) {
  min-height: 50px;
}
#example .highlighted.example .grid .segment,
#example .ui.type.cards .image .grid .segment {
  border-radius: 0px;
  box-shadow: 0 0 0 1px #D4D4D4;
}
#example .negative.example > .button {
  position: relative;
  z-index: 100;
  margin: 0px 1px;
}

/* Nested Grid Example */
#example .highlighted.special.example .ui.grid > .column:first-child:after,
#example .highlighted.special.example .ui.grid > .column:last-child:after {
  display: none;
}
#example .highlighted.special.example .ui.grid .grid .column:not(.row):not(.grid):after {
  display: block;
  background-color: rgba(186, 61, 84, 0.1);
  -webkit-box-shadow: 0 0 0 1px rgba(186, 61, 84, 0.2) inset;
  box-shadow: 0 0 0 1px rgba(186, 61, 84, 0.2) inset;
}


#example.animated .negative.example > .grid {
  margin: -1rem !important;
  background-color: #FFEEEE;
}

#example .colored.example .column {
  padding-top: 2em;
  padding-bottom: 2em;
}

/* Animation */
#example.animated .highlighted.example .html > .grid,
#example.animated .animated.example .html > .grid,
#example.animated .highlighted.example > .grid,
#example.animated .animated.example > .grid {
  margin: -1rem auto;
  -webkit-animation: grid 7s ease infinite;
  -moz-animation: grid 7s ease infinite;
  animation: grid 7s ease infinite;
}
#example.animated .negative.example .html > .grid,
#example.animated .negative.example > .grid {
  -webkit-animation: none;
  -moz-animation: none;
  -ms-animation: none;
  animation: none;
}
/* Grid Inside Grid */
#example.animated .highlighted.example .grid .grid,
#example.animated .animated.example .grid .grid {
  -webkit-animation: none;
  -moz-animation: none;
  -ms-animation: none;
  animation: none;
}

#example .ui.table .help.icon {
  float: right;
}

#example.site .colors.example .column {
  padding: 50px 0px;
  text-align: center;
  color: #FFFFFF;
  font-weight: bold;
}

@-webkit-keyframes grid {
  0% {
    width: 100%;
  }
  45% {
    width: 90%;
  }
  55% {
    width: 90%;
  }
  100% {
    width: 100%;
  }
}
@-moz-keyframes grid {
  0% {
    width: 100%;
  }
  45% {
    width: 90%;
  }
  55% {
    width: 90%;
  }
  100% {
    width: 100%;
  }
}
@keyframes grid {
  0% {
    width: 100%;
  }
  45% {
    width: 90%;
  }
  55% {
    width: 90%;
  }
  100% {
    width: 100%;
  }
}

#example .layered.example {
  z-index: 1;
}

/*--------------
      Demo
---------------*/

#example .demo.container .button.demo > .buttons,
#example .demo.container .button.demo > .button,
#example .demo.container .button.demo > .segment > .button {
  margin-bottom: 0.5em;
}
#example .demo.container h4:first-child {
  font-weight: bold !important;
  margin: 0em 0em 1em !important;
  font-size: 18px;
}
#example .demo.container .example:first-child {
  margin-top: 0;
  padding-top: 0;
}
#example .demo.container .segment.example {
  z-index: 1;
}
#example .demo.container > .ui.label:not(.empty) {
  margin-bottom: 1em;
}
#example .demo.container .segment .ui.label {
  margin-bottom: 0em;
}

/*--------------
    New
---------------*/

.complex-popup.example #one {
  display: block;
  position: relative;
  padding: 50px 100px;
  background-color: #F0F0F0;
}
.complex-popup.example #two {
  display: block;
  background-color: #E2EAE4;
  position: relative;
  top: 10px;
  padding: 50px 8px;
}


/*--------------
   Visibility
---------------*/

/* static */
.visibility.example .overlay {
  padding: 0em;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
  transition:
    padding 0.5s ease
  ;
  background: transparent;
}
.visibility.example .overlay.fixed + .placeholder {
  display: none;
}
/* fixed */
.visibility.example .overlay.fixed {
  position: fixed;
  background-color: #FFFFFF;
  padding: 1em;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
  z-index: 10;
}
.visibility.example .overlay.fixed + .placeholder {
  display: block;
  height: 28px;
}

/* Flash Animation */
.main.container .highlight {
  -moz-animation: highlight 2s ease-out;
    -moz-animation-iteration-count: 1;
    -webkit-animation: highlight 2s ease-out;
    -webkit-animation-iteration-count: 1;
    -ms-animation: highlight 2s ease-out;
    -ms-animation-iteration-count: 1;
    animation: highlight 2s ease-out;
    animation-iteration-count: 1;
}

@-webkit-keyframes highlight {
    0% {
      background-color: none;
    }
    30% {
      background-color: #ffff00;
    }
    100% {
      background-color: none;
    }
}

@-moz-keyframes highlight {
    0% {
      background-color: none;
    }
    30% {
      background-color: #ffff00;
    }
    100% {
      background-color: none;
    }
}

@-ms-keyframes highlight {
    0% {
      background-color: none;
    }
    30% {
      background-color: #ffff00;
    }
    100% {
      background-color: none;
    }
}


/*--------------
   Progress
---------------*/


body.progress.animated .ui.progress .bar {
  -webkit-animation: finish 10s ease-in-out infinite;
  -moz-animation: finish 10s ease-in-out infinite;
  -ms-animation: finish 10s ease-in-out infinite;
  animation: finish 10s ease-in-out infinite;
}

/*--------------
    Divider
---------------*/

#example.divider .ui.grid {
  position: relative;
}

/*--------------
      Header
---------------*/

#example.header .wireframe.image {
  max-width: 500px;
}

/*--------------
      Modal
---------------*/

#example.modal-page .main.container {
  z-index: auto;
}

/*--------------
      Popup
---------------*/

#example.popup .inline.example .popup {
  color: #FF0000;
}
#example .position.example .icon {
  position: absolute;
  margin: 0em;
  width: auto;
  font-size: 1.5em;
  height: auto;
  padding: 0.5em !important;
}
#example .position.example .segment:not(.instructive) {
  width: 250px;
  height: 250px;
}
#example .position.example .segment .icon:nth-of-type(1) {
  top: 0em;
  left: 0em;
}
#example .position.example .segment .icon:nth-of-type(2) {
  top: 0em;
  left: 50%;
  margin-left: -1em;
}
#example .position.example .segment .icon:nth-of-type(3) {
  top: 0em;
  right: 0em;
}
#example .position.example .segment .icon:nth-of-type(4) {
  top: 50%;
  margin-top: -1em;
  right: 0em;
}
#example .position.example .segment .icon:nth-of-type(5) {
  bottom: 0em;
  right: 0em;
}
#example .position.example .segment .icon:nth-of-type(6) {
  bottom: 0em;
  left: 50%;
  margin-left: -1em;
}
#example .position.example .segment .icon:nth-of-type(7) {
  bottom: 0em;
  left: 0em;
}
#example .position.example .segment .icon:nth-of-type(8) {
  top: 50%;
  margin-top: -1em;
  left: 0em;
}

#example .main.ui.grid {
  position: relative;
}

/*--------------
      Icon
---------------*/

#example iconSearch.ui.search {
  float: right;
  position: relative;
  z-index: 3;
}
#example iconSearch .result i.icon {
  font-size: 20px;
  float: right;
  margin-top: -5px;
  margin-left: 11px;
  color: #000000;
}


#example .icon.example .grid {
  text-align: left;
}
#example .icon.example .grid .code {
  position: static;
}
#example .icon.example .grid > .column {
  opacity: 0.8;
  text-align: center;
  color: transparent;

  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;

  -webkit-transition:
    color 0.3s ease,
    opacity 0.3s ease
  ;
  -moz-transition:
    color 0.3s ease,
    opacity 0.3s ease
  ;
  -o-transition:
    color 0.3s ease,
    opacity 0.3s ease
  ;
  -ms-transition:
    color 0.3s ease,
    opacity 0.3s ease
  ;
  transition:
    color 0.3s ease,
    opacity 0.3s ease
  ;
}
#example .icon.example .attached.segment .grid > .row > .column  {
  color: #555555;
}
#example .icon.example .column .icon {
  opacity: 1;
  height: 1em;
  color: #333333;
  display: block;
  margin: 0em auto 0.25em;
  font-size: 2em;

  -webkit-transition:
    color 0.6s ease,
    transform 0.2s ease
  ;
  -moz-transition:
    color 0.6s ease,
    transform 0.2s ease
  ;
  -o-transition:
    color 0.6s ease,
    transform 0.2s ease
  ;
  -ms-transition:
    color 0.6s ease,
    transform 0.2s ease
  ;
  transition:
    color 0.6s ease,
    transform 0.2s ease
  ;
}
#example .icon.example .html.segment .grid .column,
#example .icon.example .grid:hover .column {
  color: #777777;
}
#example .icon.example .grid:hover .column .icon {
  color: #333333;
}

#example .icon.example .grid .column:hover .icon {
  color: #000000;
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -o-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
}
#example .icon.example .grid .column:hover {
  opacity: 1;
  color: #444444;
}
#example .another.icon.example {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

#example .another.example i.code ~ .ignored.message {
  margin: 0em 0em 2em;
}

/*--------------
    List Page
---------------*/

#example .element.cards .image {
  overflow: hidden;
  min-height: 100px;
}
#example .collection.cards {
  min-height: 350px;
}
#example .ui.type.cards > .item {
  min-height: 255px;
}

#example .ui.type.cards > .item > .image {
  padding: 1em;
  height: 165px;
  vertical-align: middle;
}
/*--------------
      Header
---------------*/

#example.header .sizer {
  padding: 1rem 0em;
}

/*--------------
      Flag
---------------*/

#example.flag .basic.table tbody td:first-child {
  width: 20px;
}

/*--------------
      Feed
---------------*/

#example.feed .example .segment {
  max-width: 800px;
}


/*--------------
      Search
---------------*/

.fixed.menu .right.searching.menu .borderless.item,
.fixed.menu .right.searching.menu .popup.item,
.fixed.menu .right.searching.menu .language.item {
  display: none;
}

#search input {
  color: white;
  width: 146px;
  text-align: right;
}
#search.hidden input {
  padding: 0 0.8em 0 0 !important;
  width: 0;
}
#search .results {
  margin-top: 1em;
  border-radius: 0px 0px 3px 3px;
}
#search.ui.input input::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.75);
}
#search.ui.input input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.75);
}

#shortcuts.ui.modal .actions {
    padding: 0;
    border: none;
    background: none;
}

/*******************************
         Code Samples
*******************************/


code.code {
  display: block;
  overflow-x: auto;
  padding: 0em;
  color: #666;
  background-color: transparent;
  -webkit-text-size-adjust: none;
}

/*--------------
   Hover Only
---------------*/

code.code,
code.code span {
  -moz-transition: 0.5s color ease;
  -webkit-transition: 0.5s color ease;
  -ms-transition: 0.5s color ease;
  transition: 0.5s color ease;
}
code.code {
  color: #333333;
}

code.code.xml {
  color: #555555;
}
code.code.xml:hover {
  color: #333333;
}

/* Class Name */
code .string,
code .tag .value,
code .phpdoc,
code .dartdoc,
code .tex .formula {
  color: #008C79;
}
code:hover .string,
code:hover .tag .value,
code:hover .phpdoc,
code:hover .dartdoc,
code:hover .tex .formula {
  color: #007b6b;
}

/* Comment */
code .comment,
code .template_comment,
code .diff .header,
code .javadoc {
  color: #AAAAAA;
  font-style: italic;
}


/* Properties */
code .tag,
code .rules .property,
code .django .tag .keyword {
  color: #858188;
  font-weight: normal;
}

code:hover .tag,
code:hover .rules .property,
code:hover .django .tag .keyword {
  color: #892A6F;
  font-weight: normal;
}

/* HTML Tag */
code .tag .title {
  color: #858188;
  font-weight: normal;
}
code:hover .tag .title {
  color: #892A6F;
}

/* Attribute */
code .attribute,
code .variable,
code .lisp .body {
  color: #8D8A8A;
  transition: color 0.3s;
}
code:hover .attribute,
code:hover .variable,
code:hover .lisp .body {
  color: #934E4E;
}

/* CSS ID */
code .title,
code .id,
code .scss .preprocessor {
  color: #9C989F;
  font-weight: bold;
}

/* CSS Attribute */
code .rule .attribute {
  color: #892A6F;
}
code:hover .rule .attribute {
  color: #892A6F;
}

/* CSS Value */
code .number,
code .hexcolor,
code .ruby .constant {
  color: #666666;
}

code:hover .number,
code:hover .hexcolor,
code:hover .ruby .constant {
  color: #333333;
}

/* LESS */
code.less .number,
code.less .hexcolor,
code.less .ruby .constant {
  color: #005FAA;
}
code.less:hover .number,
code.less:hover .hexcolor,
code.less:hover .ruby .constant {
  color: #005FAA;
}
/* LESS Variable */
code.less .attribute,
code.less .variable,
code.less .lisp .body {
  color: #333333;
  transition: color 0.3s;
}
code.less:hover .attribute,
code.less:hover .variable,
code.less:hover .lisp .body {
  color: #333333;
}

/* Emphasized Value */
code.code .class {
  color: #008C79;
}
code.code .class b {
  font-weight: normal;
  background-color: rgba(90, 90, 90, 0);
  border-radius: 5px;
  line-height: 1;
  vertical-align: baseline;
  display: inline-block;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  margin: 0px -4px;
  padding: 1px 4px;
}
code.code .class b {
  background-color: rgba(218, 189, 40, 0.15);
  color: #9E6C00;
}

/*
code.code:hover .class.string b,
code.code:hover .class.value b {
  background-color: rgba(218, 189, 40, 0.1);
  color: inherit;
}
*/


/* Linked UI */
code .tag .value a {
  position: relative;
  border-radius: 5px;
  line-height: 1;
  color: inherit;
  margin: 0px -2px;
  padding: 1px 4px;
  background-color: rgba(150, 150, 150, 0.1);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
code .tag .value a b {
  border-radius: 0px;
}
code .tag .value a:hover {
  background-color: rgba(40, 150, 218, 0.2);
  color: #00689E;
}
code .tag .value a:hover b {
  background-color: transparent;
  color: inherit;
}



/*--------------
      Normal
---------------*/

code .keyword,
code .css .rule .keyword,
code .winutils,
code .javascript .title,
code .nginx .title,
code .subst,
code .request,
code .status {
  color: #333;
  font-weight: bold;
}

code .javascript .title,
code .list .keyword,
code .subst {
  font-weight: normal;
}

code .class .title,
code .type,
code .vhdl .literal,
code .tex .command {
  color: #458;
  font-weight: bold;
}


code .regexp {
  color: #009926;
}

code .built_in {
  color: #0086b3;
}

code .preprocessor,
code .pragma,
code .pi,
code .doctype,
code .shebang,
code .cdata {
  color: #999;
  font-weight: bold;
}

code .deletion {
  background: #fdd;
}

code .addition {
  background: #dfd;
}

code .diff .change {
  background: #0086b3;
}

code .chunk {
  color: #aaa;
}


/*******************************
         Sidebar Layout
*******************************/

#example > .pusher > .full.height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
}
#example:not(.site) > .pusher > .full.height {
  background-color: #FFFFFF;
}

/* page layout */
#example .full.height > .toc {
  position: fixed;
  z-index: 1;
  background-color: #1b1c1d;
  width: 250px;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}
#example .full.height > .toc .ui.menu {
  border-radius: 0;
  border-width: 0 1px 0 0;
  box-shadow: none;
  margin: 0;
  width: inherit;
  overflow: hidden;
  will-change: transform;
  max-height: 100vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
#example .article {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 0px;
  margin-left: 250px;
}

#example .full.height > .toc .ui.menu::-webkit-scrollbar {
  -webkit-appearance: none;
}
#example .full.height > .toc .ui.menu::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, 0);
}
#example .full.height > .toc .ui.menu::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0);
}

#example .full.height > .toc .ui.menu:hover::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, 0.1);
}
#example .full.height > .toc .ui.menu:hover::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.25);
}

#example > .pusher > .footer,
#example .article > .footer {
  border-top: 1px solid #DDDDDD;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.08) inset;
  background-color: #FAFAFA;
  padding-top: 2em;
}

/*******************************
      Definition Container
*******************************/

#example > .pusher > .footer {
  clear: both;
}

#example .fixed.menu > .container,
#example .main.container,
#example .masthead > .container,
#example .footer > .container {
  position: relative;
}

#example .main.container {
  padding: 2em 0em 7em;
}
#example .wide.main.container {
  width: 80%;
  margin: 0 auto;
  max-width: 1140px;
}

#example .main.container > .right.rail .sticky,
#example .main.container > .tab > .examples > .right.rail .sticky,
#example .main.container > .tab > .right.rail .sticky {
  padding-bottom: 2em;
}

#example .following.menu .menu .active.item {
  font-weight: bold;
}

/*******************************
           Advert
*******************************/

/*----------------
  Style Overrides
-----------------*/

#example .masthead .advertisement {
  width: 285px;
  height: 130px;
}
#example .masthead .advertisement #carbonads {
  width: 100%;
  height: 130px;
}
#example .advertisement #carbonads {
  position: relative;
  display: block;
  margin: 0 auto;
  background-color: #F5F5F5;
  border: 1px solid #CCCCCC;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.08) inset;
  padding: 1em;
  font-family: "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
#example .advertisement #carbonads:hover {
  background-color: #F0F8F9;
  border: 1px solid #87C7D0;
}
#example .advertisement .carbon-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
#example .advertisement .carbon-img {
  width: 130px;
  margin-right: 0.75em;
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 auto;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
}
#example .advertisement .carbon-img img {
  display: block;
  border: 1px solid #DDDDDD;
}
#example .advertisement .carbon-text {
  font-size: 13px;
  line-height: 16px;
  padding-bottom: 1.5em;
  height: auto;
  min-width: 145px;
  color: rgba(20, 50, 50, 0.8);
}
#example .advertisement .carbon-text:hover {
  color: rgba(0, 30, 30, 0.8);
}
#example .carbon-poweredby {
  position: absolute;
  left: 130px;
  margin-left: 2em;
  bottom: 1em;
  color: #bbb;
  font-size: 11px;
  color: rgba(0, 0, 0, 0.3);
  text-align: left;
}


/*******************************
        Advertisements
*******************************/

/* Rail Ad */
#example .rail .advertisement {
  display: block;
  float: none;
  margin: 1em 0;
  padding-left: 0;
}
#example .rail .advertisement #carbonads {
  display: block;
  margin: 0 -1.5em;
  width: auto;
}

#semantic-sponsor {
  min-height: 40px;
  border-bottom: solid 1px #dddddd;
}


.native-link {
  display: block;
  width: 100%;
  background-color: #F5F5F5;
  padding: 5px 3em;
  color: #415a5a;
}
.native-link:hover {
  color: #000000;
  background-color: #F0F8F9;
}

.native-link,
.native-ad {
  text-decoration: none;
}
.native-ad {
  position: absolute;
  right: 1rem;
}

.native-inline,
.native-link {
  display: flex;
  align-items: center;
}

.native-img {
  margin-right: 10px;
  display: block;
  padding: 5px;
  height: 30px;
  flex: 0 0 auto;
  width: 30px;
  border-radius: 50%;
}

.native-text {
  margin-right: 38px;
}

.native-ad {
  padding: 4px 7px 4px;
  line-height: 1;
  border-radius: 3px;
  background-color: #848484;
  color: #fff;
  font-size: 10px;
}

.native-ad:hover {
  color: #fff;
}


/*******************************
          Responsive
*******************************/

/* Defaults */
#example .masthead > .container,
#example .main.container,
#example .fixed.menu > .container {
  margin-left: 3em !important;
  margin-right: 3em !important;
  width: auto !important;
  max-width: 960px !important;
}
#example .masthead > .container {
  margin-right: 387px !important;
}
#example .main.container {
  margin-right: 387px !important;
}

/* Rail Default */
#example .main.container > .right.rail,
#example .main.container > .tab > .examples > .right.rail,
#example .main.container > .tab > .right.rail {
  margin-left: 3em;
  padding-top: 2em;
  width: 319px;
}

#example .masthead .advertisement {
  margin-left: 3em;
  padding: 0em 1.25em;
  width: 342px;
}

/* Absolute Ad */
#example .masthead .introduction {
  display: block;
}
#example .masthead .advertisement {
  position: absolute;
  left: 100%;
  bottom: -2px;
}

/* Remove Overview from pages with Examples */
@media only screen and (max-width: 1500px) {

  #example .fixed.column {
    right: auto;
    left: 100%;
    margin-left: 4.5em;
    width: 300px;
  }
  #example .fixed.column + .examples {
    margin-right: 0px;
  }
  #example .fixed.column + .examples .right.rail {
    display: none;
  }

}


/* Table Ad */
@media only screen and (max-width: 1272px) {

  #example .masthead > .container:first-child {
    display: flex;
    flex-direction: row;
  }
  #example .masthead > .container {
    margin-right: 2em !important;
    max-width: none !important;
  }
  #example .masthead .introduction {
    vertical-align: top;
    flex: 1 0 auto;
  }
  #example .masthead .advertisement {
    position: static;
    float: none;
    flex: 0 1 auto;
    vertical-align: bottom;
    padding-left: 0em;
    margin-left: 2rem;
    margin-top: -0.5rem;
    padding-right: 0em;
  }
  #example .bsa-cpc ._default_ {
    margin-right: 0px;
  }
}

/* Squish Content (Just For Small Computers) */
@media only screen and (max-width: 1272px) {

  /* Resize TOC  */
  #example .full.height > .toc {
    width: 200px;
  }
  #example .article {
    margin-left: 200px;
  }
  #example .masthead > .container,
  #example .main.container,
  #example .fixed.menu > .container {
    margin-left: 2rem !important;
    margin-right: 2rem !important;
  }
  /* Resize Main Container */
  #example .main.container {
    margin-right: 318px !important;
  }

  .native-link {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .native-ad {
    right: 2rem;
  }

  /* Resize Rail */
  #example .main.container > .right.rail,
  #example .main.container > .tab > .examples > .right.rail,
  #example .main.container > .tab > .right.rail {
    padding-left: 1.5em;
    width: 260px;
  }

  #example .fixed.column {
    width: 250px;
    margin-left: 2.5em;
  }

}

/* Hide Top Bar */
@media only screen and (min-width: 1145px) {
  #example .fixed.main.menu {
    display: none;
  }
}

/* Remove Fixed Sidebar /  Show Top Bar */
@media only screen and (max-width: 1144px) {

  /* Hide Fixed Sidebar */
  #example .full.height > .toc {
    display: none;
  }
  #example .full.height > .article {
    margin-left: 0px;
  }

  /* Hide Fixed Launch Button */
  #example .fixed.launch.button {
    display: none !important;
  }

  /* Additional Padding for Fixed Menu */
  #example .masthead.segment {
    padding-top: 5em;
  }

  /* Hide GitHub Stars in Intro */
  #example .masthead iframe {
    display: none;
  }

  /* Less Left Padding */
  #example .masthead > .container,
  #example .main.container,
  #example .fixed.menu > .container {
    margin-left: 2em !important;
  }

  /* Padding Above Rail */
  #example .main.container > .right.rail .sticky,
  #example .main.container > .tab > .examples > .right.rail .sticky,
  #example .main.container > .tab > .right.rail .sticky {
    padding-top: 2.5em;
  }

  /* 100% Menu Width */
  #example .fixed.menu > .container {
    margin-left: 0em !important;
    margin-right: 0em !important;
    width: 100% !important;
    max-width: none !important;
  }

  /* Remove Bug Reports */
  #example .main.menu .bug.item {
    display: none;
  }

  /* Hide Music *]/
  #example .main.menu .music.item {
    display: none;
  }

  /* Space For Header Over Examples */
  #example .fixed.column .sticky {
    padding-top: 2em;
  }

}

/* Remove Rail */
@media only screen and (max-width: 992px) {

  /* Remove Rail */
  #example .main.container > .right.rail,
  #example .main.container > .tab > .examples > .right.rail,
  #example .main.container > .tab > .right.rail {
    display: none;
  }

  /* Fluid Containers */
  #example .masthead > .container,
  #example .main.container,
  #example .fixed.menu > .container {
    margin-left: 1em !important;
    margin-right: 1em !important;
    max-width: none !important;
  }

  /* Still 100% Fixed Menu */
  #example .fixed.menu > .container {
    margin-left: 0em !important;
    margin-right: 0em !important;
    width: 100% !important;
    max-width: none !important;
  }

  /* Remove Padding on Ad */
  #example .masthead .advertisement {
    padding-right: 0em !important;
  }


}


@media only screen and (max-width: 820px) {

  /* Ad Takes Full Width */
  #example .masthead .introduction {
    display: block;
  }
  #example .masthead .advertisement {
    display: block;
    float: none;
    margin: 2em 0em 0em;
    padding-left: 0em;
    width: auto;
  }
  #example .masthead .advertisement #carbonads > span {
    position: relative;
    display: block;
    max-width: 300px;
  }

}

@media only screen and (max-width: 768px) {

  #example .masthead > .container:first-child {
    flex-direction: column;
  }
  #example .masthead .advertisement #carbonads {
    height: auto;
  }
  #example .masthead .advertisement {
    height: auto;
    margin: 1rem 0rem;
  }
  /* Hide Some Fixed Menu Content (Pagination, Search) */
  #example .fixed.menu > .container > .section.item {
    display: none;
  }
  #example .masthead.segment {
    padding-bottom: 0em;
  }

  #example.button-page .example > .button,
  #example.button-page .example .html > .button {
    margin-bottom: 8px;
  }
  #example .stackable.grid .ui.vertical.divider {
    display: none;
  }

  /* Add Sticky Footers */
  body.pushable > .pusher {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  }
  body.pushable > .pusher > .full.height {
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 auto;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  }

  /* Ad Label */
  #example .bsa-cpc ._default_ {
    padding-left: 1em;
    padding-right: 1em;
  }

  /* Let Buttons Vertically Stack */
  #example .masthead .button {
    margin-bottom: 0.75em;
  }

  #example .masthead .main.menu {
    display: none;
  }
  #example .masthead .main.menu + .main.menu {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }

  /* No Download Button */
  #example .masthead .download.button {
    display: none;
  }

  /* Hide Sitemap */
  #example .pusher > .footer .grid .three.column {
    display: none !important;
  }
}

/* Small Phone */
@media only screen and (max-width: 500px) {

  /* Stack Advert */
  #example .masthead .advertisement #carbonads > span {
    max-width: none;
  }
  #example .advertisement .carbon-wrap {
  -webkit-flex-direction: column-reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;

    text-align: center;
    align-items: center;
  }
  #example .carbon-poweredby {
    display: none;
  }

}


================================================
FILE: server/files/stylesheets/home.css
================================================
/*******************************
            Homepage
*******************************/

#example.index .pusher > .page {
  background-color: #FFFFFF;
}

@media only screen and (max-width: 992px) {
  html {
    overflow-x: visible;
    -webkit-overflow-scrolling: auto;
  }
}
#example > .pusher {
  display: block;
  min-height: 0px;
  flex-direction: initial;
}
#example > .pusher > .full.height {
  display: block;
  flex: none !important;
}

/*--------------
    Masthead
---------------*/

#example.index .masthead.segment.zoomed h1 {
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 0);
  color: rgba(255, 255, 255, 1);
}
#example.index .masthead.zoomed:after {
  opacity: 0;
}
#example.index .masthead.zoomed {
  background-color: #25282A;
}

#example.index .masthead {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 0em;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 0px;
  border-bottom: none;

  background-color: #000000;
  background-position: 50% 50%;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
#example.index .masthead:after {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: -1;
  width: 100%;
  height: 100%;
  content: '';
  background-size: cover;

  opacity: 0.45;
}
#example.index .masthead.bg1:after {
  background-image: url("/images/backgrounds/1.jpg");
}
#example.index .masthead.bg2:after {
  background-image: url("/images/backgrounds/2.jpg");
}
#example.index .masthead.bg3:after {
  background-image: url("/images/backgrounds/3.jpg");
}
#example.index .masthead.bg4:after {
  background-image: url("/images/backgrounds/4.jpg");
}
#example.index .masthead.bg5:after {
  background-image: url("/images/backgrounds/5.jpg");
}
#example.index .masthead.bg6:after {
  background-image: url("/images/backgrounds/6.jpg");
}
#example.index .masthead.bg7:after {
  background-image: url("/images/backgrounds/7.jpg");
}
#example.index .masthead.bg8:after {
  background-image: url("/images/backgrounds/8.jpg");
}
#example.index .masthead.bg9:after {
  background-image: url("/images/backgrounds/9.jpg");
}
#example.index .masthead.bg10:after {
  background-image: url("/images/backgrounds/10.jpg");
}
#example.index .masthead.bg11:after {
  background-image: url("/images/backgrounds/11.jpg");
}
#example.index .masthead.bg12:after {
  background-image: url("/images/backgrounds/12.jpg");
}
#example.index .masthead.bg13:after {
  background-image: url("/images/backgrounds/13.jpg");
}
#example.index .masthead.bg14:after {
  background-image: url("/images/backgrounds/14.jpg");
}


#example.index .masthead,
#example.index .masthead:after {
  -ms-transition:
    background 6s cubic-bezier(0.680, -0.550, 0.265, 1.4) 0s,
    opacity 6s cubic-bezier(0.680, -0.550, 0.265, 1.4) 0s
  ;
  -moz-transition:
    background 6s cubic-bezier(0.680, -0.550, 0.265, 1.4) 0s,
    opacity 6s cubic-bezier(0.680, -0.550, 0.265, 1.4) 0s
  ;
  -webkit-transition:
    background 6s cubic-bezier(0.680, -0.550, 0.265, 1.4) 0s,
    opacity 6s cubic-bezier(0.680, -0.550, 0.265, 1.4) 0s
  ;
  transition:
    background 6s cubic-bezier(0.680, -0.550, 0.265, 1.4) 0s,
    opacity 6s cubic-bezier(0.680, -0.550, 0.265, 1.4) 0s
  ;
}
#example.index .masthead .container {
  height: 55vh;
  margin-left: auto !important;
  margin-right: auto !important;
  min-height: 600px;

  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
#example .masthead .container {
  padding: 15rem 0em;
}
#example.index .following.bar iframe.github {
  margin-top: 0px;
}
#example.index .following.bar .menu .item {
  display: block;
}
#example.index.pushed .masthead,
#example.index.pushed .following.bar {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

#example.index > .pusher > .footer {
  padding-left: 0em;
}

#example.index .light.following.bar {
  padding: 0em 0em;
  background-color: #FFFFFF;
  border-bottom: 1px solid #DDDDDD;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.04);
}

#example.index .masthead.segment .typed-cursor {
  position: relative;
  top: -0.05em;
  left: -0.25em;
  visibility: hidden;
  opacity: 1;
  -webkit-animation: blink 0.7s infinite;
  -moz-animation: blink 0.7s infinite;
  animation: blink 0.7s infinite;
  -webkit-transition: opacity 0.7s ease;
  -moz-transition: opacity 0.7s ease;
  transition: opacity 0.7s ease;
}
#example.index .masthead.segment .typed-cursor.stop {
  opacity: 0;
  -moz-animation-duration: 0s;
  -webkit-animation-duration: 0s;
  animation-duration: 0s;
}
@keyframes blink {
  0% { opacity:1; }
  50% { opacity:0; }
  100% { opacity:1; }
}
@-webkit-keyframes blink {
  0% { opacity:1; }
  50% { opacity:0; }
  100% { opacity:1; }
}
@-moz-keyframes blink {
  0% { opacity:1; }
  50% { opacity:0; }
  100% { opacity:1; }
}

#example.index .vertical.segment {
  box-shadow: none;
}

#example.index .masthead.segment h1 {
  font-size: 3em;
  color: rgba(255, 255, 255, 1);
  line-height: 1.2;
  margin: 0px 0px 0px;
  padding-bottom: 0px;
  -moz-perspective: 500px;
  -webkit-perspective: 500px;
  perspective: 500px;

  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);

  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
#example.index .masthead.segment h1 .tagline {
  font-size: 0.75em;
}
#example.index .masthead.segment h1 > .library {
  display: block;
  font-size: 1.75em;
  font-weight: bold;
}
#example.index .masthead.segment h1 b {
  display: inline-block;
  font-weight: 500;
}
#example.index .masthead.segment h1 .text {
  display: inline-block;
  font-weight: 300;
  margin-left: -0.4em;
}
#example.index .masthead h2 {
  font-weight: normal;
  margin: 0px 0 16px 0px;
  font-size: 1.75em;
  border-bottom: none;
  line-height: 1;
}
#example.index .masthead p {
  font-size: 1.5em;
  margin: 1em 0em 1.5em;
  padding: 0px;
}
#example.index .ui.header {
  font-weight: normal;
}
#example.index .footer .ui.header {
  font-weight: bold;
}

#example.index .introduction {
  position: relative;
  clear: both;
  display: block;
  text-align: center;
}
#example.index .introduction .buttons {
  margin-top: 3em;
}


#example.index .advertisement {
  display: none !important;
  padding-left: 0;
  position: absolute;
  left: auto;
  right: 6em;
  top: 50%;
  transform: translateY(-50%);
  vertical-align: top;
}
#example.index .fixed.launch.button {
  display: none;
  top: 100px;
}
#example.index .main.menu {
  top: 0px;
}
#example.index pre.console {
  height: 120px;
}

/*--------------
    Intro
---------------*/

#example .intro.segment h1 + p {
  font-size: 22px;
}

/*--------------
    Demo
---------------*/

#example .demo.row .example > .ui.label:not(.empty) {
  margin-bottom: 1em;
}
#example .demo.row .ui.progress {
  margin-bottom: 2.5em;
}
#example .demo.row h4 {
  font-weight: bold !important;
  margin: 0em 0em 1em !important;
}
#example .demo.row .example {
  clear: both;
  padding-top: 3em;
  margin-top: 3em;
}
#example .demo.row .ui.menu,
#example .demo.row .ui.card {
  width: 100%;
}
#example .demo.row .ui.card {
  width: 100%;
  max-width: 400px;
}

/*--------------
    Features
---------------*/

#example.index .hidden.code {
  visibility: hidden;
}

#example.index .demo.row .example {
  clear: both;
  padding-top: 1.5em;
  margin-top: 1.5em;
}
#example.index .demo.row .example:first-child {
  margin-top: 0;
  padding-top: 0;
}
#example.index .demo.row .example:last-child {
  margin-bottom: 0em;
}

/*--------------
    Following
---------------*/

#example.index .following.bar {
  position: fixed;
  top: 0px;
  z-index: 900;
  left: 0%;
  padding: 2em 0em;
  width: 100%;
  box-shadow: 0px 0px 0px 0px transparent;
  border-bottom: 1px solid transparent;
  transition:
    padding 0.5s ease,
    background 0.5s ease,
    box-shadow 0.5s ease,
    border 0.5s ease
  ;
}
#example.index .following.bar > .menu .item {
  transition: all 0.5s ease;
}
#example.index.pushed .following.bar .menu .item,
#example.index.pushed .following.bar {
  transition: none;
}
#example.index .following.bar .additional.item[data-site="learn"]:hover {
  color: #D9499A;
}
#example.index .following.bar span.additional.item {
  cursor: default;
  color: rgba(0, 0, 0, 0.2);
}
#example.index .following.bar .inverted span.additional.item {
  color: rgba(255, 255, 255, 0.2);
}
#example.index .following.bar .column > .menu {
  margin-top: 0px;
  height: 35px;
}
#example.index .following.bar .network.menu .item {
  font-weight: bold;
}
#example.index .following.bar .item iframe {
  margin-left: 10px;
}
#example.index .following.bar .network.menu .view-ui {
  margin-right: 1em;
}
#example.index .light.following.bar .network.menu .view-ui {
  color: #00B5AD;
}
#example.index .light.following.bar .inverted.network.menu .view-ui {
  color: #6DFFFF;
}
#example.index .following .logo {
  float: left;
  width: 35px;
  margin-right: 1em;
}
#example.index .following .logo .side {
  width: 35px;
}
#example .masthead .version.label:after {
  background-color: #000000 !important;
}
#example.index .following .version.label {
  margin: 0.25em 0px 0px 1em;
}


/*--------------
     Stripes
---------------*/

#example.index .stripe .grid .row {
  margin: 2rem 0rem;
}
#example.index .feature.stripe .grid .row {
  margin: 0rem;
}
#example.index .feature.stripe .column {
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
}
#example.index .feature.stripe p {
  -webkit-flex: 1 0 auto;
  -moz-flex: 1 0 auto;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  margin: 0.5em 0em 2em;
}
#example .stripe .ui.vertical.divider {
  font-size: 1rem;
}
#example.index .feature.stripe .icon.header .icon.image {
  width: auto;
  height: 65px;
  margin-bottom: 20px;
}
#example.index .stripe .icon.header .icon.image {
  height: 65px;
  margin-bottom: 20px;
}
#example.index .community.stripe {
  box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1);
  padding: 4em 0;
}
#example.index .stripe .icon.header i.icon {
  font-size: 2em;
}


/* Final */
#example.index .final.stripe {
  border-top: 1px solid #DDDDDD;
  background-color: #F8F8F8;
}

/* Alternate */
#example .alternate.stripe {
  background-color: #F2F3F5;
}

/* Inverted */
#example.index .inverted.stripe {
  background-color: #1B1C1D;
}
#example.index .inverted.stripe p {
  color: #FFFFFF;
}


/*--------------
    Legacy?
---------------*/

/* content */
#example .solid,
#example .stripe {
  background-color: #FFFFFF;
  padding: 10em 0px;
  border-radius: 0em;
  margin: 0em;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
#example .theming.stripe {
  -webkit-transform: none;
  transform: none;
}

#example .stripe h1 {
  font-size: 40px;
}
#example .stripe h2 {
  font-size: 26px;
}
#example .stripe h3 {
  font-size: 20px;
}
#example .feature.stripe {
  padding: 3em 0em;
}
#example .theming.stripe .left.aligned.column {
  padding-top: 8em;
}
#example .theming.stripe .hljs.code {
  height: 483px;
  max-height: 483px;
}
#example .theming .source.grid {
  display: none !important;
  margin: 2rem 2rem -4rem;
}
#example .theming .source.grid.visible {
  display: block;
  display: flex !important;
}

#example .theming.stripe .buttons {
  vertical-align: top;
}
#example .theming.stripe .button {
  margin-bottom: 0.5em;
}
#example .stripe .column > p {
  font-size: 16px;
  line-height: 1.6;
  margin: 1em 0em;
}

#example .dark.stripe {
  background-color: #333333;
  background: url(/images/dark-bg.png) repeat;
  color: #FFFFFF;
}
#example .stripe .column > .label {
  margin-bottom: 1em;
}

#example .solid {
  background-color: #FFFFFF;
  -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.1);
}
#example .solid .column {
  color: #555555;
}
#example .solid .column p b {
  color: rgba(0, 0, 0, 0.9);
}
#example .solid .column p {
  color: rgba(0, 0, 0, 0.5);
}

/*--------------
    Promo
---------------*/

#example.index .promo.stripe {
  padding: 3em 0em;
}


/*--------------
    Newsletter
---------------*/

#example.index .email.stripe {
  padding: 5em 0em;
}
#example.index .email.stripe p {
  margin: -0.5em 0em 1em;
}
#example.index .email.stripe .input {
  width: 450px;
}
#example.index .email.stripe .submit.button {
  margin-left: 1em;
}


@media only screen and (max-width : 400px) {
  #example.index .advertisement {
    display: none;
    margin-left: -130px !important;
  }
  #example.index .carbonad {
    width: 260px !important;
  }
  #example.index .masthead.segment h1  {
    font-size: 1.75em !important;
  }
  #example.index .feature.stripe {
    padding: 1em;
  }
}



@media only screen and (max-width : 600px) {
  #example.index .solid,
  #example.index .stripe {
    padding: 4em 0em;
  }
  #example.index .masthead.segment h1 .text {
    margin-left: 0em;
  }
  #example.index .following.bar {
    display: none;
  }
  #example.index .masthead:before {
    display: none;
  }
  #example.index .following.bar .column {
    text-align: center;
  }
  #example.index .following .logo {
    float: none;
  }
  #example.index .codebase.stripe {
    display: none;
  }
  #example.index .following .version.label {
    vertical-align: top;
    margin-top: 0em;
  }
  #example .masthead .container {
    padding: 6rem 0rem;
  }
  #example.index .masthead.segment h1 {
    font-size: 2.25em;
  }
  #example.index .email.stripe .input {
    width: 100%;
  }
  #example.index .following .secondary.menu {
    display: none;
  }
  #example.index .email.stripe .submit.button {
    margin-top: 0.5em;
  }
  #example.index .stripe .icon.header .icon.image {
    height: 50px;
  }
  #example.index .stripe {
    padding: 2em 0em !important;
  }
}

@media only screen and (max-width : 650px) {
  #example.index .fixed.launch.button {
    display: none;
  }
  #example .stripe h1 {
    font-size: 32px;
  }
}
@media only screen and (min-width : 601px) {
  #example .theming .source.button {
    display: none;
  }
  #example.index .main.menu {
    display: none;
  }

  #example.index .fixed.launch.button {
    display: none;
  }
}



/* Homepage */
@media only screen and (max-width : 810px) {
  #example.index .masthead.segment h1 > .library {
    font-size: 1.75em;
  }
  #example.index .feature.stripe p {
    height: auto;
    min-height: 0px;
  }
  #example.index .container {
    margin-left: 0em;
    margin-right: 0em;
  }
  #example .solid, #example .stripe {
    padding: 6em 0em;
  }
  #example.index .masthead .container {
    margin-top: 50px;
  }
  #example.index .following.bar span.additional.item {
    display: none;
    visibility: hidden !important;
  }
  #example.index .following.bar .network.menu .view-ui {
    margin-right: 0.75em;
  }
  #example.index .masthead .container {
    min-height: 350px;
    height: auto;
  }
}


@media only screen and (max-width : 1040px) {
  #example.index .following.bar .network.menu .view-ui {
    margin-right: 0.5em;
  }
}


@media only screen and (max-width: 1300px) {
  #example.index .advertisement {
    position: absolute;
    top: auto;
    left: 50%;
    bottom: 2rem;
    margin-left: -175px;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    transform: none;
  }
  #example.index .inverted.advertisement .carbonad-img {
    margin-top: 0px;
  }
  #example.index #carbonads-container {
    float: none;
  }
  #example.index .carbonad {
    width: 340px;
  }
  #example.index .carbonad-text,
  #example.index .carbonad-tag {
    float: none;
    display: block;
    text-align: left;
    margin-left: 160px;
    width: 170px;
  }
}


================================================
FILE: server/files/stylesheets/library/basic.icon.css
================================================
/*
 * # Semantic - Icon
 * http://github.com/jlukic/semantic-ui/
 *
 *
 * Copyright 2013 Contributors
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */

@font-face {
  font-family: 'Basic Icons';
  src: url("fonts/icons.eot");
  src: url("fonts/icons.eot?#iefix") format('embedded-opentype'), url("fonts/icons.svg#icons") format('svg'), url("fonts/icons.woff") format('woff'), url("fonts/icons.ttf") format('truetype');
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-decoration: inherit;
  text-transform: none;
}

i.icon {
  display: inline-block;
  opacity: 0.75;
  margin: 0em 0.25em 0em 0em;
  width: 1.23em;
  height: 1em;
  font-family: 'Basic Icons';
  font-style: normal;
  line-height: 1;
  font-weight: normal;
  text-decoration: inherit;
  text-align: center;
  speak: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-smoothing: antialiased;
}

/*******************************
             Types
*******************************/

/*--------------
    Loading
---------------*/

i.icon.loading {
  -webkit-animation: icon-loading 2s linear infinite;
  animation: icon-loading 2s linear infinite;
}

@-webkit-keyframes icon-loading {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes icon-loading {
  from {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/*******************************
             States
*******************************/

i.icon.hover {
  opacity: 1;
}

i.icon.active {
  opacity: 1;
}

i.emphasized.icon {
  opacity: 1;
}

i.icon.disabled {
  opacity: 0.3;
}

/*******************************
           Variations
*******************************/

/*-------------------
         Link
--------------------*/

i.link.icon {
  cursor: pointer;
  opacity: 0.75;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}

i.link.icon:hover {
  opacity: 1 !important;
}

/*-------------------
      Circular
--------------------*/

i.circular.icon {
  border-radius: 500em !important;
  padding: 0.5em 0.35em !important;
  -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
  line-height: 1 !important;
  width: 2em !important;
  height: 2em !important;
}

i.circular.inverted.icon {
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/*-------------------
      Flipped
--------------------*/

i.flipped.icon,
i.horizontally.flipped.icon {
  -webkit-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

i.vertically.flipped.icon {
  -webkit-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1);
}

/*-------------------
      Rotated
--------------------*/

i.rotated.icon,
i.right.rotated.icon,
i.clockwise.rotated.icon {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

i.left.rotated.icon,
i.counterclockwise.rotated.icon {
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

/*-------------------
        Square
--------------------*/

i.square.icon {
  width: 2em;
  height: 2em;
  padding: 2em !important;
  -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
  vertical-align: baseline;
}

i.square.inverted.icon {
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/*-------------------
      Inverted
--------------------*/

i.inverted.icon {
  background-color: #222222;
  color: #FFFFFF;
}

/*-------------------
       Colors
--------------------*/

i.black.icon {
  color: #555555 !important;
}

i.blue.icon {
  color: #6ecff5 !important;
}

i.green.icon {
  color: #5bbd72 !important;
}

i.orange.icon {
  color: #e96633 !important;
}

i.pink.icon {
  color: #d9499a !important;
}

i.purple.icon {
  color: #564f8a !important;
}

i.red.icon {
  color: #d95c5c !important;
}

i.teal.icon {
  color: #00b5ad !important;
}

i.yellow.icon {
  color: #ffcb08 !important;
}

/*-------------------
   Inverted Colors
--------------------*/

i.inverted.black.icon {
  background-color: #555555 !important;
  color: #FFFFFF !important;
}

i.inverted.blue.icon {
  background-color: #6ecff5 !important;
  color: #FFFFFF !important;
}

i.inverted.green.icon {
  background-color: #5bbd72 !important;
  color: #FFFFFF !important;
}

i.inverted.orange.icon {
  background-color: #e96633 !important;
  color: #FFFFFF !important;
}

i.inverted.pink.icon {
  background-color: #d9499a !important;
  color: #FFFFFF !important;
}

i.inverted.purple.icon {
  background-color: #564f8a !important;
  color: #FFFFFF !important;
}

i.inverted.red.icon {
  background-color: #d95c5c !important;
  color: #FFFFFF !important;
}

i.inverted.teal.icon {
  background-color: #00b5ad !important;
  color: #FFFFFF !important;
}

i.inverted.yellow.icon {
  background-color: #ffcb08 !important;
  color: #FFFFFF !important;
}

/*-------------------
        Sizes
--------------------*/

i.small.icon {
  font-size: 0.875em;
}

i.icon {
  font-size: 1em;
}

i.large.icon {
  font-size: 1.5em;
  vertical-align: middle;
}

i.big.icon {
  font-size: 2em;
  vertical-align: middle;
}

i.huge.icon {
  font-size: 4em;
  vertical-align: middle;
}

i.massive.icon {
  font-size: 8em;
  vertical-align: middle;
}

/* basic.icons available */

i.basic.icon.circle.attention:before {
  content: '\2757';
}

/* '❗' */

i.basic.icon.circle.help:before {
  content: '\e704';
}

/* '' */

i.basic.icon.circle.info:before {
  content: '\e705';
}

/* '' */

i.basic.icon.add:before {
  content: '\2795';
}

/* '➕' */

i.basic.icon.chart:before {
  content: '📈';
}

/* '\1f4c8' */

i.basic.icon.chart.bar:before {
  content: '📊';
}

/* '\1f4ca' */

i.basic.icon.chart.pie:before {
  content: '\e7a2';
}

/* '' */

i.basic.icon.resize.full:before {
  content: '\e744';
}

/* '' */

i.basic.icon.resize.horizontal:before {
  content: '\2b0d';
}

/* '⬍' */

i.basic.icon.resize.small:before {
  content: '\e746';
}

/* '' */

i.basic.icon.resize.vertical:before {
  content: '\2b0c';
}

/* '⬌' */

i.basic.icon.down:before {
  content: '\2193';
}

/* '↓' */

i.basic.icon.down.triangle:before {
  content: '\25be';
}

/* '▾' */

i.basic.icon.down.arrow:before {
  content: '\e75c';
}

/* '' */

i.basic.icon.left:before {
  content: '\2190';
}

/* '←' */

i.basic.icon.left.triangle:before {
  content: '\25c2';
}

/* '◂' */

i.basic.icon.left.arrow:before {
  content: '\e75d';
}

/* '' */

i.basic.icon.right:before {
  content: '\2192';
}

/* '→' */

i.basic.icon.right.triangle:before {
  content: '\25b8';
}

/* '▸' */

i.basic.icon.right.arrow:before {
  content: '\e75e';
}

/* '' */

i.basic.icon.up:before {
  content: '\2191';
}

/* '↑' */

i.basic.icon.up.triangle:before {
  content: '\25b4';
}

/* '▴' */

i.basic.icon.up.arrow:before {
  content: '\e75f';
}

/* '' */

i.basic.icon.folder:before {
  content: '\e810';
}

/* '' */

i.basic.icon.open.folder:before {
  content: '📂';
}

/* '\1f4c2' */

i.basic.icon.globe:before {
  content: '𝌍';
}

/* '\1d30d' */

i.basic.icon.desk.globe:before {
  content: '🌐';
}

/* '\1f310' */

i.basic.icon.star:before {
  content: '\e801';
}

/* '' */

i.basic.icon.star.empty:before {
  content: '\e800';
}

/* '' */

i.basic.icon.star.half:before {
  content: '\e701';
}

/* '' */

i.basic.icon.lock:before {
  content: '🔒';
}

/* '\1f512' */

i.basic.icon.unlock:before {
  content: '🔓';
}

/* '\1f513' */

i.basic.icon.layout.grid:before {
  content: '\e80c';
}

/* '' */

i.basic.icon.layout.block:before {
  content: '\e708';
}

/* '' */

i.basic.icon.layout.list:before {
  content: '\e80b';
}

/* '' */

i.basic.icon.heart.empty:before {
  content: '\2661';
}

/* '♡' */

i.basic.icon.heart:before {
  content: '\2665';
}

/* '♥' */

i.basic.icon.asterisk:before {
  content: '\2731';
}

/* '✱' */

i.basic.icon.attachment:before {
  content: '📎';
}

/* '\1f4ce' */

i.basic.icon.attention:before {
  content: '\26a0';
}

/* '⚠' */

i.basic.icon.trophy:before {
  content: '🏉';
}

/* '\1f3c9' */

i.basic.icon.barcode:before {
  content: '\e792';
}

/* '' */

i.basic.icon.cart:before {
  content: '\e813';
}

/* '' */

i.basic.icon.block:before {
  content: '🚫';
}

/* '\1f6ab' */

i.basic.icon.book:before {
  content: '📖';
}

i.basic.icon.bookmark:before {
  content: '🔖';
}

/* '\1f516' */

i.basic.icon.calendar:before {
  content: '📅';
}

/* '\1f4c5' */

i.basic.icon.cancel:before {
  content: '\2716';
}

/* '✖' */

i.basic.icon.close:before {
  content: '\e80d';
}

/* '' */

i.basic.icon.color:before {
  content: '\e794';
}

/* '' */

i.basic.icon.chat:before {
  content: '\e720';
}

/* '' */

i.basic.icon.check:before {
  content: '\2611';
}

/* '☑' */

i.basic.icon.time:before {
  content: '🕔';
}

/* '\1f554' */

i.basic.icon.cloud:before {
  content: '\2601';
}

/* '☁' */

i.basic.icon.code:before {
  content: '\e714';
}

/* '' */

i.basic.icon.email:before {
  content: '\40';
}

/* '@' */

i.basic.icon.settings:before {
  content: '\26ef';
}

/* '⛯' */

i.basic.icon.setting:before {
  content: '\2699';
}

/* '⚙' */

i.basic.icon.comment:before {
  content: '\e802';
}

/* '' */

i.basic.icon.clockwise.counter:before {
  content: '\27f2';
}

/* '⟲' */

i.basic.icon.clockwise:before {
  content: '\27f3';
}

/* '⟳' */

i.basic.icon.cube:before {
  content: '\e807';
}

/* '' */

i.basic.icon.direction:before {
  content: '\27a2';
}

/* '➢' */

i.basic.icon.doc:before {
  content: '📄';
}

/* '\1f4c4' */

i.basic.icon.docs:before {
  content: '\e736';
}

/* '' */

i.basic.icon.dollar:before {
  content: '💵';
}

/* '\1f4b5' */

i.basic.icon.paint:before {
  content: '\e7b5';
}

/* '' */

i.basic.icon.edit:before {
  content: '\270d';
}

/* '✍' */

i.basic.icon.eject:before {
  content: '\2ecf';
}

/* '⻏' */

i.basic.icon.export:before {
  content: '\e715';
}

/* '' */

i.basic.icon.hide:before {
  content: '\e70b';
}

/* '' */

i.basic.icon.unhide:before {
  content: '\e80f';
}

/* '' */

i.basic.icon.facebook:before {
  content: '\f301';
}

/* '' */

i.basic.icon.fast-forward:before {
  content: '\e804';
}

/* '' */

i.basic.icon.fire:before {
  content: '🔥';
}

/* '\1f525' */

i.basic.icon.flag:before {
  content: '\2691';
}

/* '⚑' */

i.basic.icon.lightning:before {
  content: '\26a1';
}

/* '⚡' */

i.basic.icon.lab:before {
  content: '\68';
}

/* 'h' */

i.basic.icon.flight:before {
  content: '\2708';
}

/* '✈' */

i.basic.icon.forward:before {
  content: '\27a6';
}

/* '➦' */

i.basic.icon.gift:before {
  content: '🎁';
}

/* '\1f381' */

i.basic.icon.github:before {
  content: '\f308';
}

/* '' */

i.basic.icon.globe:before {
  content: '\e817';
}

/* '' */

i.basic.icon.headphones:before {
  content: '🎧';
}

/* '\1f3a7' */

i.basic.icon.question:before {
  content: '\2753';
}

/* '❓' */

i.basic.icon.home:before {
  content: '\2302';
}

/* '⌂' */

i.basic.icon.i:before {
  content: '\2139';
}

/* 'ℹ' */

i.basic.icon.idea:before {
  content: '💡';
}

/* '\1f4a1' */

i.basic.icon.open:before {
  content: '🔗';
}

/* '\1f517' */

i.basic.icon.content:before {
  content: '\e782';
}

/* '' */

i.basic.icon.location:before {
  content: '\e724';
}

/* '' */

i.basic.icon.mail:before {
  content: '\2709';
}

/* '✉' */

i.basic.icon.mic:before {
  content: '🎤';
}

/* '\1f3a4' */

i.basic.icon.minus:before {
  content: '\2d';
}

/* '-' */

i.basic.icon.money:before {
  content: '💰';
}

/* '\1f4b0' */

i.basic.icon.off:before {
  content: '\e78e';
}

/* '' */

i.basic.icon.pause:before {
  content: '\e808';
}

/* '' */

i.basic.icon.photos:before {
  content: '\e812';
}

/* '' */

i.basic.icon.photo:before {
  content: '🌄';
}

/* '\1f304' */

i.basic.icon.pin:before {
  content: '📌';
}

/* '\1f4cc' */

i.basic.icon.play:before {
  content: '\e809';
}

/* '' */

i.basic.icon.plus:before {
  content: '\2b';
}

/* '+' */

i.basic.icon.print:before {
  content: '\e716';
}

/* '' */

i.basic.icon.rss:before {
  content: '\e73a';
}

/* '' */

i.basic.icon.search:before {
  content: '🔍';
}

/* '\1f50d' */

i.basic.icon.shuffle:before {
  content: '\e803';
}

/* '' */

i.basic.icon.tag:before {
  content: '\e80a';
}

/* '' */

i.basic.icon.tags:before {
  content: '\e70d';
}

/* '' */

i.basic.icon.terminal:before {
  content: '\e7ac';
}

/* '' */

i.basic.icon.thumbs.down:before {
  content: '👎';
}

/* '\1f44e' */

i.basic.icon.thumbs.up:before {
  content: '👍';
}

/* '\1f44d' */

i.basic.icon.to-end:before {
  content: '\e806';
}

/* '' */

i.basic.icon.to-start:before {
  content: '\e805';
}

/* '' */

i.basic.icon.top.list:before {
  content: '🏆';
}

/* '\1f3c6' */

i.basic.icon.trash:before {
  content: '\e729';
}

/* '' */

i.basic.icon.twitter:before {
  content: '\f303';
}

/* '' */

i.basic.icon.upload:before {
  content: '\e711';
}

/* '' */

i.basic.icon.user.add:before {
  content: '\e700';
}

/* '' */

i.basic.icon.user:before {
  content: '👤';
}

/* '\1f464' */

i.basic.icon.community:before {
  content: '\e814';
}

/* '' */

i.basic.icon.users:before {
  content: '👥';
}

/* '\1f465' */

i.basic.icon.id:before {
  content: '\e722';
}

/* '' */

i.basic.icon.url:before {
  content: '🔗';
}

/* '\1f517' */

i.basic.icon.zoom.in:before {
  content: '\e750';
}

/* '' */

i.basic.icon.zoom.out:before {
  content: '\e751';
}

/* '' */

/*--------------
   Spacing Fix
---------------*/

/* dropdown arrows are to the right */

i.dropdown.basic.icon {
  margin: 0em 0em 0em 0.5em;
}

/* stars are usually consecutive */

i.basic.icon.star {
  width: auto;
  margin: 0em;
}

/* left side basic.icons */

i.basic.icon.left {
  width: auto;
  margin: 0em 0.5em 0em 0em;
}

/* right side basic.icons */

i.basic.icon.search,
i.basic.icon.up,
i.basic.icon.down,
i.basic.icon.right {
  width: auto;
  margin: 0em 0em 0em 0.5em;
}

/*--------------
     Aliases
---------------*/

/* aliases for convenience */

i.basic.icon.delete:before {
  content: '\e80d';
}

/* '' */

i.basic.icon.dropdown:before {
  content: '\25be';
}

/* '▾' */

i.basic.icon.help:before {
  content: '\e704';
}

/* '' */

i.basic.icon.info:before {
  content: '\e705';
}

/* '' */

i.basic.icon.error:before {
  content: '\e80d';
}

/* '' */

i.basic.icon.dislike:before {
  content: '\2661';
}

/* '♡' */

i.basic.icon.like:before {
  content: '\2665';
}

/* '♥' */

i.basic.icon.eye:before {
  content: '\e80f';
}

/* '' */

i.basic.icon.eye.hidden:before {
  content: '\e70b';
}

/* '' */

i.basic.icon.date:before {
  content: '📅';
}

/* '\1f4c5' */

/*******************************
           Overrides
*******************************/


================================================
FILE: server/files/stylesheets/library/docco.css
================================================
/*--------------------- Typography ----------------------------*/

@font-face {
  font-family: 'Neutraface';
  src:
    url("../fonts/neutraface-book.otf") format('opentype')
  ;
  font-weight: normal;
  font-style: normal;
  font-size-adjust: 0.448;
}
@font-face {
  font-family: 'Neutraface';
  src:
    url("../fonts/neutraface-bold.otf") format('opentype')
  ;
  font-weight: bold;
  font-style: normal;
  font-size-adjust: 0.448;
}


/*--------------------- Layout ----------------------------*/
html { height: 100%; }
body {
  font-family: "Neutraface", "Helvetica Neue", "Arial", sans-serif;
  font-size: 14px;
  line-height: 18px;
  color: #30404f;
  margin: 0; padding: 0;
  height:100%;
}
#container { min-height: 100%; }

a {
  color: #000;
}

b, strong {
  font-weight: normal;
}

p, ul, ol {
  margin: 15px 0 0px;
}

h1, h2, h3, h4, h5, h6 {
  color: #112233;
  font-family: "Neutraface", "Helvetica Neue", "Arial", sans-serif;
  line-height: 1em;
  text-transform: none;
  margin: 30px 0 15px 0;
}
h1 {
  margin: 0px 0px 20px;
  font-size: 38px;
  color: #00B4AC;
}
h2 {
  margin: 0px 0px 20px;
  font-size: 28px;
  color: #6E4889;
}
h3 {
  margin: 0px 0px 20px;
  font-size: 22px;
}
h4 {
  margin: 0px 0px 10px;
  font-size: 18px;
  color: #555555;
}
h5 {
  margin: 0px 0px 10px;
  font-size: 16px;
  color: #555555;
}
a {
  font-weight: bold;
  color: #009FDA;
  text-decoration: none;
}
a:hover {
  color: #00BAFF;
}

hr {
  border: 0;
  background: 1px solid #ddd;
  height: 1px;
  margin: 20px 0;
}

pre, tt, code {
  font-size: 12px; line-height: 16px;
  font-family: Menlo, Monaco, Consolas, "Lucida Console", monospace;
  margin: 0; padding: 0;
}
  .annotation pre {
    display: block;
    margin: 0;
    padding: 7px 10px;
    background: #fcfcfc;
    -moz-box-shadow:    inset 0 0 10px rgba(0,0,0,0.1);
    -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
    box-shadow:         inset 0 0 10px rgba(0,0,0,0.1);
    overflow-x: auto;
  }
    .annotation pre code {
      border: 0;
      padding: 0;
      background: transparent;
    }


blockquote {
  border-left: 5px solid #ccc;
  margin: 0;
  padding: 1px 0 1px 1em;
}
  .sections blockquote p {
    font-family: Menlo, Consolas, Monaco, monospace;
    font-size: 12px; line-height: 16px;
    color: #999;
    margin: 10px 0 0;
    white-space: pre-wrap;
  }

ul.sections {
  list-style: none;
  padding:0 0 5px 0;;
  margin:0;
}

/*
  Force border-box so that % widths fit the parent
  container without overlap because of margin/padding.

  More Info : http://www.quirksmode.org/css/box.html
*/
ul.sections > li > div {
  -moz-box-sizing: border-box;    /* firefox */
  -ms-box-sizing: border-box;     /* ie */
  -webkit-box-sizing: border-box; /* webkit */
  -khtml-box-sizing: border-box;  /* konqueror */
  box-sizing: border-box;         /* css3 */
}


/*---------------------- Jump Page -----------------------------*/
#jump_to, #jump_page {
  margin: 0;
  background: white;
  -webkit-box-shadow: 0 0 25px #777; -moz-box-shadow: 0 0 25px #777;
  -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomleft: 5px;
  font: 16px Arial;
  cursor: pointer;
  text-align: right;
  list-style: none;
}

#jump_to a {
  text-decoration: none;
}

#jump_to a.large {
  display: none;
}
#jump_to a.small {
  font-size: 22px;
  font-weight: bold;
  color: #676767;
}

#jump_to, #jump_wrapper {
  position: fixed;
  right: 0; top: 0;
  padding: 10px 15px;
  margin:0;
}

#jump_wrapper {
  display: none;
  padding:0;
}

#jump_to:hover #jump_wrapper {
  display: block;
}

#jump_page {
  padding: 5px 0 3px;
  margin: 0 0 25px 25px;
}

#jump_page .source {
  display: block;
  padding: 15px;
  text-decoration: none;
  border-top: 1px solid #eee;
}

#jump_page .source:hover {
  background: #f5f5ff;
}

#jump_page .source:first-child {
}

/*---------------------- Low resolutions (> 320px) ---------------------*/
@media only screen and (min-width: 320px) {
  .pilwrap { display: none; }

  ul.sections > li > div {
    display: block;
    padding:5px 10px 0 10px;
  }

  ul.sections > li > div.annotation ul, ul.sections > li > div.annotation ol {
    padding-left: 30px;
  }

  ul.sections > li > div.content {
    background: #f5f5ff;
    overflow-x:auto;
    -webkit-box-shadow: inset 0 0 5px #e5e5ee;
    box-shadow: inset 0 0 5px #e5e5ee;
    border: 1px solid #dedede;
    margin:5px 10px 5px 10px;
    padding-bottom: 5px;
  }

  ul.sections > li > div.annotation pre {
    margin: 7px 0 7px;
    padding-left: 15px;
  }

  ul.sections > li > div.annotation p tt, .annotation code {
    display: inline-block;
    padding: 3px 10px;
    font-size: 14px;
    margin-top: 10px;
    background: #f8f8ff;
    border: 1px solid #dedede;
  }
}

/*----------------------  (> 481px) ---------------------*/
@media only screen and (min-width: 481px) {
  #container {
    position: relative;
  }
  body {
    background-color: #F5F5FF;
    font-size: 15px;
    line-height: 21px;
  }
  pre, tt, code {
    line-height: 18px;
  }
  p, ul, ol {
    margin: 0 0 15px;
  }


  #jump_to {
    padding: 5px 10px;
  }
  #jump_wrapper {
    padding: 0;
  }
  #jump_to, #jump_page {
    font: 10px Arial;
    text-transform: uppercase;
  }
  #jump_page .source {
    padding: 5px 10px;
  }
  #jump_to a.large {
    display: inline-block;
  }
  #jump_to a.small {
    display: none;
  }


  #background {
    position: absolute;
    top: 0; bottom: 0;
    width: 350px;
    border-right: 1px solid #e5e5ee;
    z-index: -1;
    background: #FCFCFC url(../images/bg.jpg) repeat;

  }

  ul.sections > li > div.annotation ul, ul.sections > li > div.annotation ol {
    padding-left: 40px;
  }

  ul.sections > li {
    white-space: nowrap;
  }

  ul.sections > li > div {
    display: inline-block;
  }

  ul.sections > li > div.annotation {
    max-width: 350px;
    min-width: 350px;
    min-height: 5px;
    padding: 13px;
    overflow-x: hidden;
    white-space: normal;
    vertical-align: top;
    text-align: left;
  }
  ul.sections > li > div.annotation pre {
    margin: 15px 0 15px;
    padding-left: 15px;
  }

  ul.sections > li > div.content {
    padding: 13px;
    vertical-align: top;
    background: #f5f5ff;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }

  .pilwrap {
    position: relative;
    display: inline;
  }

  .pilcrow {
    font: 12px Arial;
    text-decoration: none;
    color: #454545;
    position: absolute;
    top: 3px; left: -20px;
    padding: 1px 2px;
    opacity: 0;
    -webkit-transition: opacity 0.2s linear;
  }
    .for-h1 .pilcrow {
      top: 47px;
    }
    .for-h2 .pilcrow, .for-h3 .pilcrow, .for-h4 .pilcrow {
      top: 35px;
    }

  ul.sections > li > div.annotation:hover .pilcrow {
    opacity: 1;
  }
}

/*---------------------- (> 1025px) ---------------------*/
@media only screen and (min-width: 1025px) {

  body {
    font-size: 16px;
    line-height: 24px;
  }

  #background {
    width: 525px;
  }
  ul.sections {
    padding-top: 50px;
  }
  ul.sections > li > div.annotation {
    max-width: 525px;
    min-width: 525px;
    padding: 10px 25px 1px 50px;
  }
  ul.sections > li > div.content {
    padding: 9px 15px 16px 25px;
  }

  ul.sections p {
    font-size: 16px;
    line-height: 1.33;
  }
}

/*---------------------- Syntax Highlighting -----------------------------*/

td.linenos { background-color: #f0f0f0; padding-right: 10px; }
span.lineno { background-color: #f0f0f0; padding: 0 5px 0 5px; }
/*

github.com style (c) Vasily Polovnyov 

*/

pre code {
  display: block; padding: 0.5em;
  color: #000;
  background: #f8f8ff
}

pre .comment,
pre .template_comment,
pre .diff .header,
pre .javadoc {
  color: #408080;
  font-style: italic
}

pre .keyword,
pre .assignment,
pre .literal,
pre .css .rule .keyword,
pre .winutils,
pre .javascript .title,
pre .lisp .title,
pre .subst {
  color: #954121;
  /*font-weight: bold*/
}

pre .number,
pre .hexcolor {
  color: #40a070
}

pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula {
  color: #219161;
}

pre .title,
pre .id {
  color: #19469D;
}
pre .params {
  color: #00F;
}

pre .javascript .title,
pre .lisp .title,
pre .subst {
  font-weight: normal
}

pre .class .title,
pre .haskell .label,
pre .tex .command {
  color: #458;
  font-weight: bold
}

pre .tag,
pre .tag .title,
pre .rules .property,
pre .django .tag .keyword {
  color: #000080;
  font-weight: normal
}

pre .attribute,
pre .variable,
pre .instancevar,
pre .lisp .body {
  color: #008080
}

pre .regexp {
  color: #B68
}

pre .class {
  color: #458;
  font-weight: bold
}

pre .symbol,
pre .ruby .symbol .string,
pre .ruby .symbol .keyword,
pre .ruby .symbol .keymethods,
pre .lisp .keyword,
pre .tex .special,
pre .input_number {
  color: #990073
}

pre .builtin,
pre .constructor,
pre .built_in,
pre .lisp .title {
  color: #0086b3
}

pre .preprocessor,
pre .pi,
pre .doctype,
pre .shebang,
pre .cdata {
  color: #999;
  font-weight: bold
}

pre .deletion {
  background: #fdd
}

pre .addition {
  background: #dfd
}

pre .diff .change {
  background: #0086b3
}

pre .chunk {
  color: #aaa
}

pre .tex .formula {
  opacity: 0.5;
}


================================================
FILE: server/files/stylesheets/library/sidr.css
================================================
.sidr{display:none;position:absolute;position:fixed;top:0;height:100%;z-index:999999;width:260px;overflow-x:none;overflow-y:auto;font-family:"lucida grande",tahoma,verdana,arial,sans-serif;font-size:15px;background:#f8f8f8;color:#333;-webkit-box-shadow:inset 0 0 5px 5px #ebebeb;-moz-box-shadow:inset 0 0 5px 5px #ebebeb;box-shadow:inset 0 0 5px 5px #ebebeb}.sidr .sidr-inner{padding:0 0 15px}.sidr .sidr-inner>p{margin-left:15px;margin-right:15px}.sidr.right{left:auto;right:-260px}.sidr.left{left:-260px;right:auto}.sidr h1,.sidr h2,.sidr h3,.sidr h4,.sidr h5,.sidr h6{font-size:11px;font-weight:normal;padding:0 15px;margin:0 0 5px;color:#333;line-height:24px;background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #dfdfdf));background-image:-webkit-linear-gradient(#ffffff,#dfdfdf);background-image:-moz-linear-gradient(#ffffff,#dfdfdf);background-image:-o-linear-gradient(#ffffff,#dfdfdf);background-image:linear-gradient(#ffffff,#dfdfdf);-webkit-box-shadow:0 5px 5px 3px rgba(0,0,0,0.2);-moz-box-shadow:0 5px 5px 3px rgba(0,0,0,0.2);box-shadow:0 5px 5px 3px rgba(0,0,0,0.2)}.sidr p{font-size:13px;margin:0 0 12px}.sidr p a{color:rgba(51,51,51,0.9)}.sidr>p{margin-left:15px;margin-right:15px}.sidr ul{display:block;margin:0 0 15px;padding:0;border-top:1px solid #dfdfdf;border-bottom:1px solid #fff}.sidr ul li{display:block;margin:0;line-height:48px;border-top:1px solid #fff;border-bottom:1px solid #dfdfdf}.sidr ul li:hover,.sidr ul li.active,.sidr ul li.sidr-class-active{border-top:none;line-height:49px}.sidr ul li:hover>a,.sidr ul li:hover>span,.sidr ul li.active>a,.sidr ul li.active>span,.sidr ul li.sidr-class-active>a,.sidr ul li.sidr-class-active>span{-webkit-box-shadow:inset 0 0 15px 3px #ebebeb;-moz-box-shadow:inset 0 0 15px 3px #ebebeb;box-shadow:inset 0 0 15px 3px #ebebeb}.sidr ul li a,.sidr ul li span{padding:0 15px;display:block;text-decoration:none;color:#333}.sidr ul li ul{border-bottom:none;margin:0}.sidr ul li ul li{line-height:40px;font-size:13px}.sidr ul li ul li:last-child{border-bottom:none}.sidr ul li ul li:hover,.sidr ul li ul li.active,.sidr ul li ul li.sidr-class-active{border-top:none;line-height:41px}.sidr ul li ul li:hover>a,.sidr ul li ul li:hover>span,.sidr ul li ul li.active>a,.sidr ul li ul li.active>span,.sidr ul li ul li.sidr-class-active>a,.sidr ul li ul li.sidr-class-active>span{-webkit-box-shadow:inset 0 0 15px 3px #ebebeb;-moz-box-shadow:inset 0 0 15px 3px #ebebeb;box-shadow:inset 0 0 15px 3px #ebebeb}.sidr ul li ul li a,.sidr ul li ul li span{color:rgba(51,51,51,0.8);padding-left:30px}.sidr form{margin:0 15px}.sidr label{font-size:13px}.sidr input[type="text"],.sidr input[type="password"],.sidr input[type="date"],.sidr input[type="datetime"],.sidr input[type="email"],.sidr input[type="number"],.sidr input[type="search"],.sidr input[type="tel"],.sidr input[type="time"],.sidr input[type="url"],.sidr textarea,.sidr select{width:100%;font-size:13px;padding:5px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0 0 10px;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;border-radius:2px;border:none;background:rgba(0,0,0,0.1);color:rgba(51,51,51,0.6);display:block;clear:both}.sidr input[type=checkbox]{width:auto;display:inline;clear:none}.sidr input[type=button],.sidr input[type=submit]{color:#f8f8f8;background:#333}.sidr input[type=button]:hover,.sidr input[type=submit]:hover{background:rgba(51,51,51,0.9)}


================================================
FILE: server/files/stylesheets/library/snap.css
================================================
html, body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body > .content > .page,
body > .content  {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
  z-index: 2;
  -webkit-overflow-scrolling: touch;

  -webkit-transition:
    all 0.2s ease
  ;
  -moz-transition:
    all 0.2s ease
  ;
  -o-transition:
    all 0.2s ease
  ;
  -ms-transition:
    all 0.2s ease
  ;
  transition:
    all 0.2s ease
  ;

  backface-visibility:hidden;
  -webkit-backface-visibility:hidden; /* Chrome and Safari */
  -moz-backface-visibility:hidden; /* Firefox */
  -ms-backface-visibility:hidden; /* Internet Explorer 10+ */

  -webkit-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
       -o-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
body > .content > .page {
  overflow: auto;
}

body > .content.drag {
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  -ms-transition: none;
  transition: none;
}

.drawers {
  position: absolute;
  background-color: #2D2D2D;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;

}

.drawer {
  position: absolute;
  top: 0;
  right: auto;
  bottom: 0;
  left: auto;
  width: 275px;
  height: auto;
  overflow: auto;
  
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  -webkit-overflow-scrolling: touch;
  -webkit-transition: width 0.3s ease;
     -moz-transition: width 0.3s ease;
      -ms-transition: width 0.3s ease;
       -o-transition: width 0.3s ease;
          transition: width 0.3s ease;
}

.drawer.left {
  left: 0;
  z-index: 1;
}

.drawer.right {
  right: 0;
  z-index: 1;
}


================================================
FILE: server/files/stylesheets/reset.css
================================================
/*! normalize.css v2.1.3 | MIT License | git.io/normalize */

/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined in IE 8/9.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block;
}

/**
 * Correct `inline-block` display not defined in IE 8/9.
 */

audio,
canvas,
video {
    display: inline-block;
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
    display: none;
    height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9.
 * Hide the `template` element in IE, Safari, and Firefox < 22.
 */

[hidden],
template {
    display: none;
}

/* ==========================================================================
   Base
   ========================================================================== */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
    font-family: sans-serif; /* 1 */
    -ms-text-size-adjust: 100%; /* 2 */
    -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
    margin: 0;
}

/* ==========================================================================
   Links
   ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
    background: transparent;
}

/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */

a:focus {
    outline: thin dotted;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
    outline: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari 5, and Chrome.
 */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9, Safari 5, and Chrome.
 */

abbr[title] {
    border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
 */

b,
strong {
    font-weight: bold;
}

/**
 * Address styling not present in Safari 5 and Chrome.
 */

dfn {
    font-style: italic;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
    background: #ff0;
    color: #000;
}

/**
 * Correct font family set oddly in Safari 5 and Chrome.
 */

code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    font-size: 1em;
}

/**
 * Improve readability of pre-formatted text in all browsers.
 */

pre {
    white-space: pre-wrap;
}

/**
 * Set consistent quote types.
 */

q {
    quotes: "\201C" "\201D" "\2018" "\2019";
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* ==========================================================================
   Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9.
 */

img {
    border: 0;
}

/**
 * Correct overflow displayed oddly in IE 9.
 */

svg:not(:root) {
    overflow: hidden;
}

/* ==========================================================================
   Figures
   ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari 5.
 */

figure {
    margin: 0;
}

/* ==========================================================================
   Forms
   ========================================================================== */

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
    border: 0; /* 1 */
    padding: 0; /* 2 */
}

/**
 * 1. Correct font family not being inherited in all browsers.
 * 2. Correct font size not being inherited in all browsers.
 * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
 */

button,
input,
select,
textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 2 */
    margin: 0; /* 3 */
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

button,
input {
    line-height: normal;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */

button,
select {
    text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
    cursor: default;
}

/**
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/**
 * 1. Remove default vertical scrollbar in IE 8/9.
 * 2. Improve readability and alignment in all browsers.
 */

textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}

/* ==========================================================================
   Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

table {
    border-collapse: collapse;
    border-spacing: 0;
}

================================================
FILE: server/files/stylesheets/rtl.css
================================================
/*******************************
       Right-To-Left
     (Arabic / Persian)
*******************************/


html[lang="fa"],
html[lang="ar"] {
  direction: rtl;
}

================================================
FILE: server/files/stylesheets/shape.css
================================================

/*******************************
        Shapes Example
*******************************/


#example.shape .ui.header {
  clear: both;
  margin-top: 1rem;
}

#example .dog.shape {
  margin: 0em 0em 3em;
}

#example .dog.shape .side .item {
  margin: 0em;
  min-height: 400px;
}
#example .dog.two.shape .side {
  width: 315px;
}
#example .dog.two.shape .side:nth-child(n+1),
#example .dog.two.shape .side:nth-child(n+1) .item {
  width: 315px;
}
#example .dog.two.shape .side:nth-child(n+2),
#example .dog.two.shape .side:nth-child(n+2) .item {
  width: 150px;
}
#example .dog.two.shape .side:nth-child(n+3),
#example .dog.two.shape .side:nth-child(n+3) .item {
  width: 200px;
}

#example .dog.three.shape .side:nth-child(n+1),
#example .dog.three.shape .side:nth-child(n+1) .item {
  width: 215px;
}
#example .dog.three.shape .side:nth-child(n+2),
#example .dog.three.shape .side:nth-child(n+2) .item {
  width: 350px;
}
#example .dog.three.shape .side:nth-child(n+3),
#example .dog.three.shape .side:nth-child(n+3) .item {
  width: 140px;
}


#example .demo.shape .side {
  width: 250px;
  height: 250px;
}

#example .demo.shape .side img {
  display: block;
  margin: 0px auto;
  max-width: 100%;
  max-height: 100%;
}

#example .demo.shape .first.side {
  background-color: #EEE0D8;
}
#example .demo.shape .second.side {
  background-color: #EEE6D8;
}
#example .demo.shape .third.side {
  background-color: #D8EED8;
}

#example .demo.shape .side b {
  display: block;
  position: absolute;
  top: 50%;
  width: 100%;
  font-size: 80px;
  margin-top: -48px;
  text-align: center;
}

#example .demo.auto.shape .side {
  width: auto;
  height: auto;
}

#example .irregular.shape .first.side {
  width: 200px;
  height: 200px;
}
#example .irregular.shape .second.side {
  width: 300px;
  height: 300px;
}
#example .irregular.shape .third.side {
  width: 500px;
  height: 300px;
}

================================================
FILE: server/layouts/basic.html.eco
================================================




  
  
  
  

  

  
  <%- @getBlock('meta').toHTML() %>
  <%= @getPreparedTitle() %>

  
  

  <% if 'development' in @getEnvironments(): %>
  
  
  

  

  
  
  
  
  
  
  
  
  
  
  
  

  
  
  
  
  
  

  
  
  
  
  

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  <% else: %>
  
  <% end %>

  
  

  <% if 'development' in @getEnvironments(): %>
  
  <% else: %>
  
  <% end %>
  
  
  
  
  

  <% if 'development' in @getEnvironments(): %>
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  <% else: %>
  
  <% end %>

  
  
  
  


  <%- @content %>
  




================================================
FILE: server/layouts/blank.html.eco
================================================



  <%- @partial('meta') %>
  <%- @partial('library-javascript') %>
  <%- @partial('ui-javascript') %>
  <%- @partial('ui-css') %>


  <%- @content %>



================================================
FILE: server/layouts/default.html.eco
================================================



  <%- @partial('meta') %>
  <%- @partial('javascript') %>
  <%- @partial('css') %>
  <%- @partial('tracking') %>
  <%- @partial('site-ads') %>
  <%- @partial('transifex') %>


  <% if @document.element is 'sidebar': %>
  <%- @partial('demo-sidebar') %>
  <% end %>
  <%- @partial('sidebar') %>
  <%- @partial('fixed-menu') %>
  

    

      

        

          <%- @partial('site-menu') %>
        

      

      

        <%- @content %>
        <%- @partial('footer') %>
      

    

  

  <%- @partial('language-modal') %>
  <%- @partial('dimmer-demo') %>
  <%- @partial('less') %>




================================================
FILE: server/layouts/homepage.html.eco
================================================



  <%- @partial('meta') %>
  <%- @partial('css') %>

  
  

  <%- @partial('tracking') %>



  <%- @partial('sidebar') %>
  <%- @partial('fixed-menu') %>

  

    

      <%- @content %>
    

    <%- @partial('footer') %>
  


  <%- @partial('language-modal') %>

  <% if 'development' in @getEnvironments(): %>
  
  <% else: %>
  
  <% end %>

  <%- @partial('transifex') %>
  
  
  <%- @partial('ui-javascript') %>
  
  
  <%- @partial('less') %>




================================================
FILE: server/layouts/none.html.eco
================================================

  <%- @content %>

================================================
FILE: server/partials/css.html.eco
================================================
<%- @partial('ui-css') %>
<%- @partial('docs-css') %>



================================================
FILE: server/partials/demo-sidebar.html
================================================


  
    1
  
  
    2
  
  
    3
  





  
    
    Home
  
  
    
    Topics
  
  
    
    Friends
  





  File Permissions
  Share on Social
  Share by E-mail
  Edit Permissions
  Delete Permanently





  

    

      

        
New Content Awaits

      

    

    

      

        
      

      

        
      

      

        
      

    

  






  
    
    Home
  
  
    
    Topics
  
  
    
    Friends
  
  
    
    History
  
  
    
    Messages
  
  
    
    Discussions
  
  
    
    Achievements
  
  
    
    Store
  
  
    
    Settings
  




================================================
FILE: server/partials/dimmer-demo.html
================================================


  

    

      

        
        Dimmer Message
        
Dimmer sub-header

      

    

  




================================================
FILE: server/partials/docs-css.html.eco
================================================
<% if 'development' in @getEnvironments(): %>




<% else: %>




<% end %>


================================================
FILE: server/partials/examples/accordion.html
================================================


  

    
      
      Menu Item
    
    

      

        

          

            

              
              
            

          

          

            

              
              
            

          

          

            

              
              
            

          

          

            

              
              
            

          

        

      

    

  

  

    
      
      Menu Item
    
    

      

        

          

            

              
              
            

          

          

            

              
              
            

          

          

            

              
              
            

          

          

            

              
              
            

          

        

      

    

  









  

    
    FAQ Question 1?
  

  

    
  

  

    
    FAQ Question 2?
  

  

    
  

  

    
    FAQ Question 3?
  

  

    
  









  

    
    Title
  

  

    
  

  

    
    Title
  

  

    
  

  

    
    Title
  

  

    
  






================================================
FILE: server/partials/examples/breadcrumb.html
================================================


  Home
  
 / 

  Store
  
 / 

  
T-Shirt






  Home
  
  Registration
  
  
Personal Information




================================================
FILE: server/partials/examples/button.html
================================================


  

    View
  

  

     Add to Cart
  

  

     Save for Later
  

  

    
    Rate
  

  
Basic


  

  

    
Horizontal

    
  

  

    
Vertical

    
  

  

    
Fade In

    
  


  

  
  
  

    
    Google Plus
  


  
  

    
1

    
2

    
3

  



  

    
Cancel

    

    
Save

  


  

    

    

    

    

  

  
  
Blue

  
Red

  
Teal

  
Blue

  
Red

  
Teal


  

    
Inverted

    
Blue

    
Red

    
Basic

    
Blue

    
Red

  


  

  

    
Feed

    
Messages

    
Events

    
Photos

  


  

    
1

    
2

    
3

  


  

    

    

    

    

  






================================================
FILE: server/partials/examples/card.html
================================================


  

    

      

        

          
Add Friend

        

      

    

    
  

  

    
Title

    

      Meta
    

    
One or two sentence description that may go to several lines

  

  

    Arbitrary
    
      Arbitrary
  





  

    

      
      Abbreviated Header
    

    

      Short Description
    

  

  

    

      Action 1
    

    

      Action 2
    

  





  

    

      
      
    

  

  

    

      
      
    

  

  

    

      
      
    

  

  

    

      
      
    

  





  

    

      
    

    

      

    

  

  

    

      
    

    

      

    

  

  

    

      
    

    

      

    

  

  

    

      
    

    

      

    

  







================================================
FILE: server/partials/examples/checkbox.html
================================================


  
  






  

    

      

        
        
      

    

    

      

        
        
      

    

    

      

        
        
      

    

    

      

        
        
      

    

  







  
  






  
  





================================================
FILE: server/partials/examples/content-loader.html
================================================

    
Simulate Loading

    

    

      

        

          

            

          

        

        

          

            

              

              

            

            

              

            

          

        

        

          
Add

          
Delete

        

      

    

    

      

        
      

      

        Lindsay
        

          Joined in 2013
        

        

          Primary Contact
        

      

      

        
Add

        
Delete

      

    



================================================
FILE: server/partials/examples/dimmer.html
================================================


  

    

      Dimmable Section
    

    

      
      
      
    

    
    

  

  

    

    

  





  

    

      Inverted Dimmer
    

    

      
      
      
    

    
    

  

  

    

    

  





  

    

      Dimmer With Content
    

    

      
      
      
    

    
    

      

        

          

            
            Dimmed Message!
          

        

      

    

  

  

    

    

  





  

     Page Dimmer
  







================================================
FILE: server/partials/examples/divider.html
================================================


  
A

  
and

  
B






  

    
A

  

  
or

  

    
B

  






  





  
  Specifications





  
A

  

  
B




================================================
FILE: server/partials/examples/dropdown.html
================================================


  
  Select Language
  

    
Arabic

    
Chinese

    
Danish

    
Dutch

    
English

    
French

    
German

    
Greek

    
Hungarian

    
Italian

    
Japanese

    
Korean

    
Lithuanian

    
Persian

    
Polish

    
Portuguese

    
Russian

    
Spanish

    
Swedish

    
Turkish

    
Vietnamese

  





  
  
  
Select Country

  

    
Andorra

    
U.A.E

    
Afghanistan

    
Antigua

    
Anguilla

    
Albania

    
Armenia

    
Netherlands Antilles

    
Angola

    
Argentina

    
American Samoa

    
Austria

    
Australia

    
Aruba

    
Aland Islands

    
Azerbaijan

    
Bosnia

    
Barbados

    
Bangladesh

    
Belgium

    
Burkina Faso

    
Bulgaria

    
Bahrain

    
Burundi

    
Benin

    
Bermuda

    
Brunei

    
Bolivia

    
Brazil

    
Bahamas

    
Bhutan

    
Bouvet Island

    
Botswana

    
Belarus

    
Belize

    
Canada

    
Cocos Islands

    
Congo

    
Central African Republic

    
Congo Brazzaville

    
Switzerland

    
Cote Divoire

    
Cook Islands

    
Chile

    
Cameroon

    
China

    
Colombia

    
Costa Rica

    
Serbia

    
Cuba

    
Cape Verde

    
Christmas Island

    
Cyprus

    
Czech Republic

    
Germany

    
Djibouti

    
Denmark

    
Dominica

    
Dominican Republic

    
Algeria

    
Ecuador

    
Estonia

    
Egypt

    
Western Sahara

    
Eritrea

    
Spain

    
Ethiopia

    
European Union

    
Finland

    
Fiji

    
Falkland Islands

    
Micronesia

    
Faroe Islands

    
France

    
Gabon

    
United Kingdom

    
Grenada

    
Georgia

    
French Guiana

    
Ghana

    
Gibraltar

    
Greenland

    
Gambia

    
Guinea

    
Guadeloupe

    
Equatorial Guinea

    
Greece

    
Sandwich Islands

    
Guatemala

    
Guam

    
Guinea-Bissau

    
Guyana

    
Hong Kong

    
Heard Island

    
Honduras

    
Croatia

    
Haiti

    
Hungary

    
Indonesia

    
Ireland

    
Israel

    
India

    
Indian Ocean Territory

    
Iraq

    
Iran

    
Iceland

    
Italy

    
Jamaica

    
Jordan

    
Japan

    
Kenya

    
Kyrgyzstan

    
Cambodia

    
Kiribati

    
Comoros

    
Saint Kitts and Nevis

    
North Korea

    
South Korea

    
Kuwait

    
Cayman Islands

    
Kazakhstan

    
Laos

    
Lebanon

    
Saint Lucia

    
Liechtenstein

    
Sri Lanka

    
Liberia

    
Lesotho

    
Lithuania

    
Luxembourg

    
Latvia

    
Libya

    
Morocco

    
Monaco

    
Moldova

    
Montenegro

    
Madagascar

    
Marshall Islands

    
MacEdonia

    
Mali

    
Burma

    
Mongolia

    
MacAu

    
Northern Mariana Islands

    
Martinique

    
Mauritania

    
Montserrat

    
Malta

    
Mauritius

    
Maldives

    
Malawi

    
Mexico

    
Malaysia

    
Mozambique

    
Namibia

    
New Caledonia

    
Niger

    
Norfolk Island

    
Nigeria

    
Nicaragua

    
Netherlands

    
Norway

    
Nepal

    
Nauru

    
Niue

    
New Zealand

    
Oman

    
Panama

    
Peru

    
French Polynesia

    
New Guinea

    
Philippines

    
Pakistan

    
Poland

    
Saint Pierre

    
Pitcairn Islands

    
Puerto Rico

    
Palestine

    
Portugal

    
Palau

    
Paraguay

    
Qatar

    
Reunion

    
Romania

    
Serbia

    
Russia

    
Rwanda

    
Saudi Arabia

    
Solomon Islands

    
Seychelles

    
Sudan

    
Sweden

    
Singapore

    
Saint Helena

    
Slovenia

    
Svalbard, I Flag Jan Mayen

    
Slovakia

    
Sierra Leone

    
San Marino

    
Senegal

    
Somalia

    
Suriname

    
Sao Tome

    
El Salvador

    
Syria

    
Swaziland

    
Caicos Islands

    
Chad

    
French Territories

    
Togo

    
Thailand

    
Tajikistan

    
Tokelau

    
Timorleste

    
Turkmenistan

    
Tunisia

    
Tonga

    
Turkey

    
Trinidad

    
Tuvalu

    
Taiwan

    
Tanzania

    
Ukraine

    
Uganda

    
Us Minor Islands

    
United States

    
Uruguay

    
Uzbekistan

    
Vatican City

    
Saint Vincent

    
Venezuela

    
British Virgin Islands

    
Us Virgin Islands

    
Vietnam

    
Vanuatu

    
Wallis and Futuna

    
Samoa

    
Yemen

    
Mayotte

    
South Africa

    
Zambia

    
Zimbabwe

  








  
  Filter Posts
  

    

      Filter
    

    

      

      Tag A
    

    

      

      Tag B
    

    

      

      Tag C
    

    

      

      Tag D
    

  






Show me posts trending


    
today

    
    

      
Today

      
This Week

      
This Month

    








  
  

    

      
      
    

    

    

      
      Filter by tag
    

    

      

      Important
    

    

      

      Announcement
    

    

      

      Discussion
    

  








  
    Home
  
  

    Shopping
    
    

      
Categories

      

        
        Clothing
        

          
Mens

          
Shirts

          
Pants

          
Jeans

          
Shoes

          

          
Womens

          
Dresses

          
Shoes

          
Bags

        

      

      
Home Goods

      
Bedroom

      

      
Order

      
Status

      
Cancellations

    

  

  
    Forums
  
  
    Contact Us
  







  
    Home
  
  

    
    Messages
    

      
Inbox

      
Starred

      
Sent Mail

      
Drafts (143)

      

      
Spam (1009)

      
Trash

    

  

  
    Browse
  
  
    Help
  







  

    
    

      
Edit User

      
Remove User

      
Make Invisible

    

  

  

    
    

      
Edit Group

      
Remove Group

      
Hide from Group

    

  

  

    
    

      
 Edit

      
 Remove

      
 Hide

    

  







================================================
FILE: server/partials/examples/feed.html
================================================


  

    

      

        

          
        

        

          

            
              Username
             added you as a friend
          

        

      

      

        

          
        

        

          You added Username to the group Group Name
        

      

      

        

          
        

        

          

            Time period ago
          

          

            Username added new photos
          

          

            
          

          

            
          

        

      

    

  

  

    

      

        

          
        

        

          

            You wrote something
            

              Time period ago
            

          

          

            Blockquote
          

          

            Metadata
            Metadata
          

        

      

      

        

          
        

        

          

            You uploaded a photo
            

              Time period ago
            

          

          

            Metadata
            Metadata
          

        

      

    

    
    

      

        

          

             Elliot Fu added Jenny Hess as a friend
          

        

      

      

        

          

             Stevie Feliciano added Elliot Fu as a friend
          

        

      

      

        

          

             Helen Troy added Christian Rocha as a friend
          

        

      

      

        

          

             Christian Rocha signed up for the site.
          

        

      

    

  




================================================
FILE: server/partials/examples/flag.html
================================================



















































































































































































































































================================================
FILE: server/partials/examples/form.html
================================================


  

    

      
      

        
Select

        
        
        

          
Choice 1

          
Choice 2

        

      

    

    

      
      
    

  

  

    
    
  

  

    

      
      
    

    

      
      
    

    

      
      
    

  

  

    
    

      

        
        
      

    

    

      

        
        
      

    

    

      

        
        
      

    

    

      

        
        
      

    

  

  

    
    

      
      
    

  

  

    

      
      
    

  

  

    
    

      

        
        
      

    

    

      

        
        
      

    

    

      

        
        
      

    

    

      

        
        
      

    

  

  

    

      
      
    

    

      
    

    

      
    

  

  

    
    
  

  
Sub-header

  

    

      
      
    

  

  

    

      
      
    

  

  
Submit






  

    
Warning Message

    
    
      
  • Problem #1
    • 
      
  • Problem #2
    • 
    

  

  

    

      
      
    

    

      
      
    

  

  
Submit





  

    
Error Message

    
Error message long description

  

  

    

      
      
    

    

      
      
    

  

  
Submit




================================================
FILE: server/partials/examples/grid.html
================================================






  

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

  

  

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

  

  

    

    

    

    

    

    

    

    

    

    

    

    

    

    

  

  

    

    

    

    

    

    

    

    

    

    

    

    

    

  

  

    

    

    

    

    

    

    

    

    

    

    

    

  

  

    

    

    

    

    

    

    

    

    

    

    

  

  

    

    

    

    

    

    

    

    

    

    

  

  

    

    

    

    

    

    

    

    

    

  

  

    

    

    

    

    

    

    

    

  

  

    

    

    

    

    

    

    

  

  

    

    

    

    

    

    

  

  

    

    

    

    

    

  

  

    

    

    

    

  

  

    

    

    

  

  

    

    

  

  

    

  






  

    

    

  

  

    

    

  

  

    

    

  

  

    

    

  

  

    

    

  

  

    

    

  

  

    

    

  

  

    

    

  

  

    

    

  

  

    

    

  

  

    

    

  

  

    

    

  

  

    

    

  

  

    

    

  

  

    

    

  






  

    

    

    

    

    

    

    

    

  

  

    

    

    

    

    

    

    

  

  

    

    

    

    

    

    

  

  

    

    

    

    

    

  

  

    

    

    

    

  

  

    

    

    

  

  

    

    

  

  

    

  






  

    

    

    

    

    

    

    

    

  

  

    

    

    

    

    

    

    

  

  

    

    

    

    

    

    

  

  

    

    

    

    

    

  

  

    

    

    

    

  

  

    

    

    

  

  

    

    

  

  

    

  















  

    

      

        

        

      

    

    

      

        

        

      

    

  

  

    

      

        

        

      

    

    

      

        

        

      

    

    

      

        

        

      

    

  

  

    

      

        

        

      

    

    

      

        

        

      

    

    

      

        

        

      

    

    

      

        

        

      

    

  

  

    

      

        

        

      

    

    

      

        

        

      

    

    

      

        

        

      

    

    

      

        

        

      

    

    

      

        

        

      

    

  

  

    

      

        

        

      

    

    

      

        

        

      

    

    

      

        

        

      

    

    

      

        

        

      

    

    

      

        

        

      

    

    

      

        

        

      

    

  









================================================
FILE: server/partials/examples/header.html
================================================



  

    
H1

    
H2

    
H3

    
H4

    
H5


    

      
      

        Icon Header
        
Sub-header

      

    


    

      
      

        Header
        
Sub-header

      

    

  

  

    

      
      

        Block
        
Sub-header

      

    


    

      
      

        Dividing
        
Sub-header

      

    


    

      
      

        Color
        
Sub-header

      

    


    
Attached

    

    
Attached

  




================================================
FILE: server/partials/examples/icon.html
================================================


  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  



























================================================
FILE: server/partials/examples/image.html
================================================
 User Avatar



  
  
  
  





================================================
FILE: server/partials/examples/input.html
================================================


  
  
  
Search







  
  

    
  







  

    http://
  

  
  






  
    Label
  
  





  
  
    Label
  



================================================
FILE: server/partials/examples/item.html
================================================


  

    

      
    

    

      Content Header
      

        Date
        Category
      

      

        A description which may flow for several lines and give context to the content.
      

      

         Username
      

    

  

  

    

      
    

    

      Content Header
      

        Date
        Category
      

      

        A description which may flow for several lines and give context to the content.
      

      

        

          Primary
          
        

        
Limited

      

    

  

  

    

      
    

    

      Content Header
      

        Date
        Category
      

      

        A description which may flow for several lines and give context to the content.
      

      

        

          Primary
          
        

      

    

  








  

    

      
    

    

      Content Header
      

        A description which may flow for several lines and give context to the content.
      

    

  

  

    

      
    

    

      Content Header
      

        A description which may flow for several lines and give context to the content.
      

    

  

  

    

      
    

    

      Content Header
      

        A description which may flow for several lines and give context to the content.
      

    

  




================================================
FILE: server/partials/examples/label.html
================================================


  
  email@address.com
  



  Some Name
  Group


   Icon

Tag










  

    

      
      

        Pointing Label
      

    

    

      

        Pointing below label
      

      
    

  







  
    Item
  
  
    Item
    
141

  






  
    
  
  




  
    
  
  




  
    
  
  






  
Top Labeled

  
Bottom Labeled





  
Top Left

  
Top Right

  
Bottom Left

  
Bottom Right





  Ribbon



================================================
FILE: server/partials/examples/list.html
================================================


  

    

      

        

          
        

        

          
Header

          Description
          

            

              
              

                Sub Header
                
Sub Description

              

            

            

              
              

                Sub Header
                
Sub Description

              

            

          

        

      

      

        

          
        

        

          
Header

          Description
          

            

              
              

                Sub Header
                
Sub Description

              

            

            

              
              

                Sub Header
                
Sub Description

              

            

          

        

      

    


    

      

        
        

          
Header

          Description
        

      

      

        
        

          
Header

          Description
        

      

      

        
        

          
Header

          Description
        

      

    


    

      

        

          
        

        

          
Header

          Description
        

      

      

        

          
        

        

          
Header

          Description
        

      

      

        

          
        

        

          
Header

          Description
        

      

    


  


  

    

      Link
      Link
      Link
      Link
      Link
    


    

      Selection
      Selection
      Selection
      Selection
      Selection
    


    

      

        

          
Header

          Description
        

        

          

            Sub-header
          

          

            Sub-header
          

          

            Sub-header
          

        

      

      

        

          
Header

          Description
        

      

      

        

          
Header

          Description
        

      

    


    

      Getting Started
      Introduction
      

        Languages
        

          HTML
          Javascript
          CSS
        

      

      Review
    

  








  

    

      
    

    

      
Header

      Description
    

  

  

    

      
    

    

      
Header

      Description
    

  

  

    

      
    

    

      
Header

      Description
    

  








  

    

      
    

    

      
Header

      Description
    

  

  

    

      
    

    

      
Header

      Description
    

  

  

    

      
    

    

      
Header

      Description
    

  








  

    
    

      
Steve Jobes

      50 Points
    

  

  

    
    

      
Stevie Feliciano

      44 Points
    

  

  

    
    

      
Jenny Hess

      11 Points
    

  




================================================
FILE: server/partials/examples/loader.html
================================================


  

    

      

        

      

      


      


      


    

  

  

    

      

        

      

      


      


      


    

  

  

    

      

        

      

      


      


      


    

  

  

    

      

        

      

      


      


      


    

  





  

    

      

        

          Loading
        

      

      


      


      


    

  

  

    

      

        

          Loading
        

      

      


      


      


    

  

  

    

      

        

          Loading
        

      

      


      


      


    

  

  

    

      

        

          Loading
        

      

      


      


      


    

  





  

    

      

        

      

      


      


      


    

  

  

    

      

        

      

      


      


      


    

  

  

    

      

        

      

      


      


      


    

  

  

    

      

        

      

      


      


      


    

  





  

    

      

        

          Loading
        

      

      


      


      


    

  

  

    

      

        

          Loading
        

      

      


      


      


    

  

  

    

      

        

          Loading
        

      

      


      


      


    

  

  

    

      

        

          Loading
        

      

      


      


      


    

  








  

    

      Preparing...
    

  

  


  


  







  

    

  

  


  


  






================================================
FILE: server/partials/examples/menu.html
================================================


  
    A
  
  
    B
  
  
    C
  




  
    A
  
  
    B
    
1

  
  

  

      
      
    

  





  
    Tab
  
  
    Tab
  




  
    A
  
  
    B
  
  
    C
  




  
    A
  
  
    B
  
  
    C
  




  
    A
  
  
    B
  
  
    C
  




  
    A
  
  
    B
  
  
    C
  




  
    A
  
  
    B
  
  
    C
  





================================================
FILE: server/partials/examples/message.html
================================================


  
  Closable message




  

  
Warning Message

    
    
      
  • List item
    • 
      
  • List item
    • 
    

  





  

    List Message
  

  
    
    
  • List item 1
    • 
    
  • List item 2
    • 
    
  • List item 3
    • 
  





  
Info Message

  
Example description





  

    
Positive Message

    
Example description

  





  
  

    
Negative Message

    
Example description

  





  Top attached




  Bottom attached





================================================
FILE: server/partials/examples/modal.html
================================================

Standard Modal


Basic Modal


Full-Screen Modal




  
  

    Profile Picture
  

  

    

      
    

    

      
We've auto-chosen a profile image for you.

      
We've grabbed the following image from the gravatar image associated with your registered e-mail address.

      
Is it okay to use this photo?

    

  

  

    

      Nope
    

    

      Yep, that's me
      
    

  






  

    Archive Old Messages
  

  

    

      
    

    

      
Your inbox is getting full, would you like us to enable automatic archiving of old messages?

    

  

  

    

      

        
        No
      

      

        
        Yes
      

    

  






  
  

    Update Your Settings
  

  

    

      
Give us your feedback

      

        
        
      

      

        

          
          
        

      

    

  

  

    
Cancel

    
Send

  







================================================
FILE: server/partials/examples/popup.html
================================================


  
  
  

  
Fluid Popup

  

    

      
1

      
2

      
3

      
4

    

  


  
HTML Content

  
Basic Popup

  

    Basic pop-up
  

  
Small

  

    Small pop-up
  

  
Large

  

    Large pop-up
  

  

    Inverted
  

  

    
      Link
    
    
      
      Popup Link
    
    

      

        

          
Fabrics

          

            Cashmere
            Linen
            Cotton
            Viscose
          

        

        

          
Sizes

          

            Small
            Medium
            Large
            Plus Sizes
          

        

        

          
Colors

          

            Neutrals
            Brights
            Pastels
          

        

        

          
Types

          

            Knitwear
            Outerwear
            Pants
            Shoes
          

        

      

    

  


  

    

      
      
      
      
      
      
      
      
    

  







================================================
FILE: server/partials/examples/progress.html
================================================


  

    

  

  
Uploading Files







  

  
Funding






  

    

  

  






  









  






================================================
FILE: server/partials/examples/rating.html
================================================


  

    

      

        

        

          
          Choice #1
        

      

    

    

      

        

        

          
          Choice #2
        

      

    

    

      

        

        

          
          Choice #3
        

      

    

  


  


  

    

      

        
      

      

        Content Header
        

          A description which may flow for several lines and give context to the content.
        

        

          11 

        

      

    

    

      

        
      

      

        Content Header
        

          A description which may flow for several lines and give context to the content.
        

        

          42 

        

      

    

    

      

        
      

      

        Content Header
        

          A description which may flow for several lines and give context to the content.
        

        

          16 

        

      

    

  


  

  

    

      

    

    

      

    

    

      

    

    

      

    

    

      

    

    

      

    

    

      

    

    

      

    

    

      

    

  







================================================
FILE: server/partials/examples/reveal.html
================================================



  

    
  

  




  

    
  

  




  

    
  

  




  

    
  

  





  

    
  

  




  

    
  

  




  

    
  

  




  

    
  

  





  

    
  

  




  

    
  

  




================================================
FILE: server/partials/examples/search.html
================================================



  

    

      
      
    

    

  


  

  

    

      
      
    

    

  


  

  

    

      
      
    

    

  







================================================
FILE: server/partials/examples/segment.html
================================================



















================================================
FILE: server/partials/examples/shape.html
================================================



  

    

      

        

          

            
          

          

            
          

        

      


      

      

        

        

        

        

      


      

        

        

      

    

    

      

        

          

            

              

                1
              

            

          

          

            

              

                2
              

            

          

          

            

              

                3
              

            

          

          

            

              

                4
              

            

          

          

            

              

                5
              

            

          

          

            

              

                6
              

            

          

        

      


      

      

        

        

        

        

      

      

        

        

      

    

    

      

        

          
Did you know? This side starts visible.

          
Help, its another side!

          
This is the last side

        

      


      

      

        

        

        

        

      

      

        

        

      


    

  







================================================
FILE: server/partials/examples/sidebar.html
================================================



  

    
    
  


  

  

    

      Left
    

    

      Right
    

    

      Top
    

    

      Bottom
    

  


  

  
Animation

  

    Overlay
  

  

    Push
  

  

    Scale Down
  


  
Horizontal-Only Animation

  

    Uncover
  

  

    Slide Along
  

  

    Slide Out
  







  File Permissions
  Share on Social
  Share by E-mail
  Edit Permissions
  Delete Permanently





  
    
    Home
  
  
    
    Topics
  
  
    
    Friends
  
  
    
    History
  
  
    
    Messages
  
  
    
    Discussions
  
  
    
    Achievements
  
  
    
    Store
  
  
    
    Settings
  





  

    

      

        
New Content Awaits

      

    

    

      

        
      

      

        
      

      

        
      

    

  






  
    
    Home
  
  
    
    Topics
  
  
    
    Friends
  
  
    
    History
  
  
    
    Messages
  
  
    
    Discussions
  
  
    
    Achievements
  
  
    
    Store
  
  
    
    Settings
  







================================================
FILE: server/partials/examples/single/flag-menu.html
================================================


        
Afghanistan

        
Aland Islands

        
Albania

        
Algeria

        
American Samoa

        
Andorra

        
Angola

        
Anguilla

        
Antigua

        
Argentina

        
Armenia

        
Aruba

        
Australia

        
Austria

        
Azerbaijan

        
Bahamas

        
Bahrain

        
Bangladesh

        
Barbados

        
Belarus

        
Belgium

        
Belize

        
Benin

        
Bermuda

        
Bhutan

        
Bolivia

        
Bosnia

        
Botswana

        
Bouvet Island

        
Brazil

        
British Virgin Islands

        
Brunei

        
Bulgaria

        
Burkina Faso

        
Burma

        
Burundi

        
Caicos Islands

        
Cambodia

        
Cameroon

        
Canada

        
Cape Verde

        
Cayman Islands

        
Central African Republic

        
Chad

        
Chile

        
China

        
Christmas Island

        
Cocos Islands

        
Colombia

        
Comoros

        
Congo Brazzaville

        
Congo

        
Cook Islands

        
Costa Rica

        
Cote Divoire

        
Croatia

        
Cuba

        
Cyprus

        
Czech Republic

        
Denmark

        
Djibouti

        
Dominica

        
Dominican Republic

        
Ecuador

        
Egypt

        
El Salvador

        
England

        
Equatorial Guinea

        
Eritrea

        
Estonia

        
Ethiopia

        
European Union

        
Falkland Islands

        
Faroe Islands

        
Fiji

        
Finland

        
France

        
French Guiana

        
French Polynesia

        
French Territories

        
Gabon

        
Gambia

        
Georgia

        
Germany

        
Ghana

        
Gibraltar

        
Greece

        
Greenland

        
Grenada

        
Guadeloupe

        
Guam

        
Guatemala

        
Guinea-Bissau

        
Guinea

        
Guyana

        
Haiti

        
Heard Island

        
Honduras

        
Hong Kong

        
Hungary

        
Iceland

        
India

        
Indian Ocean Territory

        
Indonesia

        
Iran

        
Iraq

        
Ireland

        
Israel

        
Italy

        
Jamaica

        
Japan

        
Jordan

        
Kazakhstan

        
Kenya

        
Kiribati

        
Kuwait

        
Kyrgyzstan

        
Laos

        
Latvia

        
Lebanon

        
Lesotho

        
Liberia

        
Libya

        
Liechtenstein

        
Lithuania

        
Luxembourg

        
Macau

        
Macedonia

        
Madagascar

        
Malawi

        
Malaysia

        
Maldives

        
Mali

        
Malta

        
Marshall Islands

        
Martinique

        
Mauritania

        
Mauritius

        
Mayotte

        
Mexico

        
Micronesia

        
Moldova

        
Monaco

        
Mongolia

        
Montenegro

        
Montserrat

        
Morocco

        
Mozambique

        
Namibia

        
Nauru

        
Nepal

        
Netherlands Antilles

        
Netherlands

        
New Caledonia

        
New Guinea

        
New Zealand

        
Nicaragua

        
Niger

        
Nigeria

        
Niue

        
Norfolk Island

        
North Korea

        
Northern Mariana Islands

        
Norway

        
Oman

        
Pakistan

        
Palau

        
Palestine

        
Panama

        
Paraguay

        
Peru

        
Philippines

        
Pitcairn Islands

        
Poland

        
Portugal

        
Puerto Rico

        
Qatar

        
Reunion

        
Romania

        
Russia

        
Rwanda

        
Saint Helena

        
Saint Kitts and Nevis

        
Saint Lucia

        
Saint Pierre

        
Saint Vincent

        
Samoa

        
San Marino

        
Sandwich Islands

        
Sao Tome

        
Saudi Arabia

        
Senegal

        
Serbia

        
Serbia

        
Seychelles

        
Sierra Leone

        
Singapore

        
Slovakia

        
Slovenia

        
Solomon Islands

        
Somalia

        
South Africa

        
South Korea

        
Spain

        
Sri Lanka

        
Sudan

        
Suriname

        
Svalbard

        
Swaziland

        
Sweden

        
Switzerland

        
Syria

        
Taiwan

        
Tajikistan

        
Tanzania

        
Thailand

        
Timorleste

        
Togo

        
Tokelau

        
Tonga

        
Trinidad

        
Tunisia

        
Turkey

        
Turkmenistan

        
Tuvalu

        
Uganda

        
Ukraine

        
United Arab Emirates

        
United States

        
Uruguay

        
Us Minor Islands

        
Us Virgin Islands

        
Uzbekistan

        
Vanuatu

        
Vatican City

        
Venezuela

        
Vietnam

        
Wallis and Futuna

        
Western Sahara

        
Yemen

        
Zambia

        
Zimbabwe

      



================================================
FILE: server/partials/examples/single/preset-menu.html
================================================

Angular


CSS


Graphic Design


Ember


HTML


Information Architecture


Javascript


Mechanical Engineering


Meteor


NodeJS


Plumbing


Python


Rails


React


Kitchen Repair


Ruby


UI Design


User Experience


================================================
FILE: server/partials/examples/single/skill-menu.html
================================================




















================================================
FILE: server/partials/examples/single/state-options.html
================================================

        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        

================================================
FILE: server/partials/examples/statistic.html
================================================


  

    Top Label
  

  

    4:05
  









  

    22
  

  

    Bottom Label
  









  

    Eighty

    Two
  

  

    Text
  





  

     5
  

  

    Labeled Icon
  









  

    

      
      22
    

    

      Horizontal Label
    

  

  

    

      
      51
    

    

      Horizontal Label
    

  

  

    

      
      81
    

    

      Horizontal Label
    

  





================================================
FILE: server/partials/examples/step.html
================================================


  
    

      
Step

      
Description

    

  
  
    

      
Step

      
Description

    

  





  
    

      
Previous Step

      
Description

    

  
  
    

      
Active Step

      
Description

    

  
  
    

      
Disabled Step

      
Description

    

  







  
    
    

      
Previous Step

      
Description

    

  
  
    
    

      
Active Step

      
Description

    

  
  
    
    

      
Disabled Step

      
Description

    

  



================================================
FILE: server/partials/examples/tab.html
================================================


  

    First
    Second
    Third
  

  

    

      1A
      1B
      1C
    

    
1A

    
1B

    
1C

  

  

    

      2A
      2B
      2C
    

    
2A

    
2B

    
2C

  

  

    

      3A
      3B
      3C
    

    
3A

    
3B

    
3C

  







================================================
FILE: server/partials/examples/table.html
================================================


  
    

      Files
    
  

    

      
         folder
      
      Comment
      10 hours ago
    

    

      
         folder2
      
      Comment
      10 hours ago
    

    

      
         folder3
      
      Comment
      10 hours ago
    

    

      
         package.json
      
      Comment
      10 hours ago
    

    

      
         Gruntfile.js
      
      Comment
      10 hours ago
    

  





  
    

    Header 1
    Header 2
  

  
    

      Definition
      1A
      1B
    

    

      Definition
      2A
      2B
    

  





  
    

      
      Name
      Registration Date
      E-mail address
      Premium Plan
    

  
  
    

      
        

           
        

      		
      
      
      
      
    

    

      
        

           
        

      		
      
      
      
      
    

    

      
        

           
        

      		
      
      
      
      
    

  
  
    

      
      
        

           Primary
        

        

          Button
        

        

          Disabled
        

      		
    

  





  
    

      Name
      Status
      Notes
    

  
  
    

      User 1
      Value
      Comment
    

    

      User 1
      Selected
      Data
    

    

      User 1
      Value
      Comment
    

    

      User 2
      Value
      Data
    

    

      User 1
      Value
      
        
        Warning
      
    

    

      User 3
      Value
      Data
    

    

      User 1
      Value
      
         Positive
      
    

    

      User 2
      
        
        Warning
      
      Data
    

    

      User 2
       Positive
      Data
    

    

      User 2
      Value
      Data
    

  





  
    

      Name
      Status
      Notes
    

  
  
    

      User 1
      Data
      Data
    

    

      User 3
      Data
      Data
    

    

      User 2
      Denied
      Data
    

  
  
    

      Footer
      Footer
      
    

  



================================================
FILE: server/partials/examples/transition.html
================================================



  

    
    
    
    
    
  


  
Flash

  
Shake

  
Pulse

  
Tada

  
Bounce

  
Drop

  
Browse

  
Horizontal Flip

  
Vertical Flip

  
Fade

  
Fade Up

  
Fade Down

  
Scale

  
Slide Down

  
Slide Up







================================================
FILE: server/partials/fixed-menu.html.eco
================================================
<% currentCollection = @getCollection("documents").findAll({type: $in: [@document.type]},[{title: 1}]).toJSON() %>
<% pageCount         = @pageCount(currentCollection) %>
<% pageNumber        = @getPage(currentCollection, @document.id) %>
<% pageCollection    = @getPageCollection(currentCollection, @document.id) %>



  

    
      
    
    <% if @document.title: %>
      

        <%= @document.title %>
      

    <% end %>
    

      <% if 'development' in @getEnvironments(): %>
      <% else: %>
      

        
      

      <% end %>
      
    

  





================================================
FILE: server/partials/footer.html
================================================


  

    

      

        
Community

        

          Help Translate
          Submit an Issue
          Join our Chat
          CLA
        

      

      

        
Network

        

          GitHub Repo
          User Forums
          1.x Docs
          0.x Docs
        

      

      

        
Help Preserve This Project

        
 Support for the continued development of Semantic UI comes directly from the community.

        

          
          
          
        

      

    

    

    
    

      Free & Open Source (MIT)
    

  





================================================
FILE: server/partials/header.html.eco
================================================

<% @tabs = {  definition: 'Definition', examples: 'Examples', usage: 'Usage', settings: 'Settings' } if @tabs == 'module' %>
<% @tabs = {  overview: 'Overview', usage: 'Usage', examples: 'Examples', settings: 'Settings' } if @tabs == 'behavior' %>


  

    


      

        <%=@document.title %>
        <% if @document.status?: %><%= @document.status %><% end %>
        

          <% if 'development' in @getEnvironments(): %>
          <% else: %>
          
          
          
          <% end %>
          <%=@document.description %>
        

      


      

      

        
          
        
        <% if @document.type is 'UI Element' or @document.type is 'UI View' or @document.type is 'UI Collection' or @document.type is 'UI Module': %>
        
          
        
        <% end %>
        
          
        
      

      

        
          
        
        
      


      <% if @document.type is 'UI Module': %>

      <% end %>
      <% if @document.themes? && @document.themes.length > 1: %>
      

        <%= @document.themes.length %> Themes
        
      

      <% end %>
      <% if @document.type is 'UI Element' or @document.type is 'UI View' or @document.type is 'UI Collection' or @document.type is 'UI Module': %>
      

        Download
      

      

        

          

            
UI Framework

            

              
 Themable

              
 Build Tools

            

            
Choose

          

          

            
Standalone

            

              
Default Theme

              
Precompiled

            

            
Choose

          

        

        

          

            
Semantic UI

            
              Download ZIP
            
            Getting Started
            
Package Managers

            

              

                
                

                  
                

              

              

                
                

                  
                

              

            

          

        

        

          

            
Standalone <%=@document.title %>

            
              Download ZIP
            
            
              View GitHub
            
            
Package Managers

            

              

                
                

                  
                

              

              

                
                

                  
                

              

              

                
                

                  
                

              

            

          

        

      

      <% end %>
    

    
    <% if @tabs?: %>
    <% index = 0 %>
    <% tabCount = 0 %>
    <% numbers = ['', '', 'two item', 'three item', 'four item', 'five item', 'six item'] %>
    <% colors = ['red', 'teal', 'blue', 'purple', 'black', 'orange'] %>
      <% for id, name of @tabs: %>
        <% tabCount++ %>
      <% end %>
      

        <% for id, name of @tabs: %>
          <%= name %>
          <% index++ %>
        <% end %>
      

    <% end %>
  



<% if 'development' in @getEnvironments(): %>
<% else: %>
  

  
  
<% end %>


================================================
FILE: server/partials/javascript.html.eco
================================================
<%- @partial('library-javascript') %>
<%- @partial('ui-javascript') %>



================================================
FILE: server/partials/language-modal.html
================================================


  
  
The  Translation Needs Your Help

  

    

      
    

    

      
This translation is only % complete!

      

        

      

      
We need your help to make Semantic available to  people who speak your language.

      
Our translation tools are easy to use and allow you to translate text without having to leave the site.
      

    

  

  

    
No Thanks

    
      
      Help Translate
    
  






  
  
Would you like to visit the mirror site?

  

    

      
    

    

      
Semantic is available at semantic-ui.cn a mirror site hosted inside China. This should make browsing much faster for those visiting from mainland China.
      

    

  

  

    
No Thanks

    
      
      Yes, take me to the mirror
    
  




================================================
FILE: server/partials/languages.html
================================================


  

    English
    English
  

  

    dansk
    Danish
  

  

    Español
    Spanish
  

  

    简体中文
    Chinese
  

  

    中文 (臺灣)
    Chinese (Taiwan)
  

  

    پارسی
    Persian
  

  

    Français
    French
  

  

    ελληνικά
    Greek
  

  

    Русский
    Russian
  

  

    Deutsch
    German
  

  

    Italiano
    Italian
  

  

    Nederlands
    Dutch
  

  

    Português(BR)
    Portuguese
  

  

    Indonesian
    Indonesian
  

  

    Lietuvių
    Lithuanian
  

  

    Türkçe
    Turkish
  

  

    한국어
    Korean
  

  

    العربية
    Arabic
  

  

    Magyar
    Hungarian
  

  

    tiếng Việt
    Vietnamese
  

  

    svenska
    Swedish
  

  

    polski
    Polish
  

  

    日本語
    Japanese
  

  

    românește
    Romanian
  





================================================
FILE: server/partials/less.html.eco
================================================

<% if 'development' in @getEnvironments(): %>

<% else: %>

<% end %>


================================================
FILE: server/partials/library-javascript.html.eco
================================================
<% if 'development' in @getEnvironments(): %>
  
  
  
  
  
  
  
  
  
  
<% else: %>
  
  
  
  
  
  
  
  
  
  
<% end %>



================================================
FILE: server/partials/meta.html.eco
================================================








<%- @getBlock('meta').toHTML() %>
<%= @getPreparedTitle() %>




================================================
FILE: server/partials/sidebar.html.eco
================================================




  
  Menu



================================================
FILE: server/partials/site-ads.html.eco
================================================
<% if ('development' in @getEnvironments()): %>
<% else: %>
  
<% end %>


================================================
FILE: server/partials/site-menu.html.eco
================================================
<% introduction      = @getCollection("documents").findAll({type: $in: ['Introduction']},[{order: 1}]).toJSON() %>
<% usage             = @getCollection("documents").findAll({type: $in: ['Usage']},[{order: 1}]).toJSON() %>
<% uiGlobals         = @getCollection("documents").findAll({type: $in: ['UI Global']},[{title: 1}]).toJSON() %>
<% uiElements        = @getCollection("documents").findAll({type: $in: ['UI Element']},[{title: 1}]).toJSON() %>
<% uiCollections     = @getCollection("documents").findAll({type: $in: ['UI Collection']},[{title: 1}]).toJSON() %>
<% uiViews           = @getCollection("documents").findAll({type: $in: ['UI View']},[{title: 1}]).toJSON() %>
<% uiModules         = @getCollection("documents").findAll({type: $in: ['UI Module']},[{title: 1}]).toJSON() %>
<% uiBehavior        = @getCollection("documents").findAll({type: $in: ['UI Behavior']},[{title: 1}]).toJSON() %>



  
  UI Docs



  Getting Started


  New in 2.4



  
Introduction

  

    <% for element in introduction: %>
      
        <%= element.title %>
      
    <% end %>
  





  
Usage

  

    <% for element in usage: %>
      
        <%= element.title %>
      
    <% end %>
  





  
Globals

  

    <% for element in uiGlobals: %>
      
        <%= element.title %>
        <% if element.status?: %>
        
        <% end %>
      
    <% end %>
  





  
Elements

  

    <% for element in uiElements: %>
      
        <%= element.title %>
        <% if element.status?: %>
        
        <% end %>
      
    <% end %>
  





  
Collections

  

    <% for element in uiCollections: %>
      
        <%= element.title %>
        <% if element.status?: %>
        
        <% end %>
      
    <% end %>
  





  
Views

  

    <% for element in uiViews: %>
      
        <%= element.title %>
        <% if element.status?: %>
        
        <% end %>
      
    <% end %>
  





  
Modules

  

    <% for element in uiModules: %>
      
        <%= element.title %>
        <% if element.status?: %>
        
        <% end %>
      
  <% end %>
  





  
Behaviors

  

    <% for element in uiBehavior: %>
      
        <%= element.title %>
        <% if element.status?: %>
        
        <% end %>
      
    <% end %>
  





================================================
FILE: server/partials/tab-header.html.eco
================================================


  

    

      

        <%=@document.title %>
        <% if @document.status?: %><%= @document.status %><% end %>
      

      
<%=@document.description %>

      <% if @document.type is 'UI Element' or @document.type is 'UI View' or @document.type is 'UI Collection' or @document.type is 'UI Module': %>
      

        Definition
        
      

      <% end %>
    

    
  





================================================
FILE: server/partials/tracking.html.eco
================================================
<% if ('development' in @getEnvironments()): %>
<% else: %>

<% end %>

================================================
FILE: server/partials/transifex.html.eco
================================================
<% if ('development' in @getEnvironments()) or (@document.title? and @document.title is 'Page Not Found'): %>
<% else: %>


<% end %>


================================================
FILE: server/partials/ui-css.html.eco
================================================
<% if 'development' in @getEnvironments(): %>



















































<% else: %>

<% end %>


================================================
FILE: server/partials/ui-javascript.html.eco
================================================
<% if 'development' in @getEnvironments(): %>






















<% else: %>



<% end %>


================================================
FILE: server/raw/.htaccess
================================================
# Apache configuration file
# httpd.apache.org/docs/2.2/mod/quickreference.html

# Note .htaccess files are an overhead, this logic should be in your Apache
# config if possible: httpd.apache.org/docs/2.2/howto/htaccess.html

# Techniques in here adapted from all over, including:
#   Kroc Camen: camendesign.com/.htaccess
#   perishablepress.com/press/2006/01/10/stupid-htaccess-tricks/
#   Sample .htaccess file of CMS MODx: modxcms.com


# ----------------------------------------------------------------------
# Better website experience for IE users
# ----------------------------------------------------------------------

# Force the latest IE version, in various cases when it may fall back to IE7 mode
#  github.com/rails/rails/commit/123eb25#commitcomment-118920
# Use ChromeFrame if it's installed for a better experience for the poor IE folk


  Header set X-UA-Compatible "IE=Edge,chrome=1"
  # mod_headers can't match by content-type, but we don't want to send this header on *everything*...
  
    Header unset X-UA-Compatible
  



# ----------------------------------------------------------------------
# Cross-domain AJAX requests
# ----------------------------------------------------------------------

# Serve cross-domain Ajax requests, disabled by default.
# enable-cors.org
# code.google.com/p/html5security/wiki/CrossOriginRequestSecurity

#  
#    Header set Access-Control-Allow-Origin "*"
#  


# ----------------------------------------------------------------------
# CORS-enabled images (@crossorigin)
# ----------------------------------------------------------------------

# Send CORS headers if browsers request them; enabled by default for images.
# developer.mozilla.org/en/CORS_Enabled_Image
# blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html
# hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/
# wiki.mozilla.org/Security/Reviews/crossoriginAttribute


  
    # mod_headers, y u no match by Content-Type?!
    
      SetEnvIf Origin ":" IS_CORS
      Header set Access-Control-Allow-Origin "*" env=IS_CORS
    
  



# ----------------------------------------------------------------------
# Webfont access
# ----------------------------------------------------------------------

# Allow access from all domains for webfonts.
# Alternatively you could only whitelist your
# subdomains like "subdomain.example.com".


  
    Header set Access-Control-Allow-Origin "*"
  



# ----------------------------------------------------------------------
# Proper MIME type for all files
# ----------------------------------------------------------------------

# JavaScript
#   Normalize to standard type (it's sniffed in IE anyways)
#   tools.ietf.org/html/rfc4329#section-7.2
AddType application/javascript         js jsonp
AddType application/json               json

# Audio
AddType audio/ogg                      oga ogg
AddType audio/mp4                      m4a f4a f4b

# Video
AddType video/ogg                      ogv
AddType video/mp4                      mp4 m4v f4v f4p
AddType video/webm                     webm
AddType video/x-flv                    flv

# SVG
#   Required for svg webfonts on iPad
#   twitter.com/FontSquirrel/status/14855840545
AddType     image/svg+xml              svg svgz
AddEncoding gzip                       svgz

# Webfonts
AddType application/vnd.ms-fontobject  eot
AddType application/x-font-ttf         ttf ttc
AddType font/opentype                  otf
AddType application/x-font-woff        woff

# Assorted types
AddType image/x-icon                        ico
AddType image/webp                          webp
AddType text/cache-manifest                 appcache manifest
AddType text/x-component                    htc
AddType application/xml                     rss atom xml rdf
AddType application/x-chrome-extension      crx
AddType application/x-opera-extension       oex
AddType application/x-xpinstall             xpi
AddType application/octet-stream            safariextz
AddType application/x-web-app-manifest+json webapp
AddType text/x-vcard                        vcf
AddType application/x-shockwave-flash       swf
AddType text/vtt                            vtt


# ----------------------------------------------------------------------
# Allow concatenation from within specific js and css files
# ----------------------------------------------------------------------

# e.g. Inside of script.combined.js you could have
#   
#   
# and they would be included into this single file.

# This is not in use in the boilerplate as it stands. You may
# choose to use this technique if you do not have a build process.

#
#  Options +Includes
#  AddOutputFilterByType INCLUDES application/javascript application/json
#  SetOutputFilter INCLUDES
#

#
#  Options +Includes
#  AddOutputFilterByType INCLUDES text/css
#  SetOutputFilter INCLUDES
#


# ----------------------------------------------------------------------
# Gzip compression
# ----------------------------------------------------------------------



  # Force deflate for mangled headers developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping/
  
    
      SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
      RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
    
  

  # Compress all output labeled with one of the following MIME-types
  
    AddOutputFilterByType DEFLATE application/atom+xml \
                                  application/javascript \
                                  application/json \
                                  application/rss+xml \
                                  application/vnd.ms-fontobject \
                                  application/x-font-ttf \
                                  application/xhtml+xml \
                                  application/xml \
                                  font/opentype \
                                  image/svg+xml \
                                  image/x-icon \
                                  text/css \
                                  text/html \
                                  text/plain \
                                  text/x-component \
                                  text/xml
  




# ----------------------------------------------------------------------
# Expires headers (for better cache control)
# ----------------------------------------------------------------------

# These are pretty far-future expires headers.
# They assume you control versioning with filename-based cache busting
# Additionally, consider that outdated proxies may miscache
#   www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/

# If you don't use filenames to version, lower the CSS and JS to something like
# "access plus 1 week".


  ExpiresActive on

# Perhaps better to whitelist expires rules? Perhaps.
  ExpiresDefault                          "access plus 1 month"

# cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
  ExpiresByType text/cache-manifest       "access plus 0 seconds"

# Your document html
  ExpiresByType text/html                 "access plus 0 seconds"

# Data
  ExpiresByType text/xml                  "access plus 0 seconds"
  ExpiresByType application/xml           "access plus 0 seconds"
  ExpiresByType application/json          "access plus 0 seconds"

# Feed
  ExpiresByType application/rss+xml       "access plus 1 hour"
  ExpiresByType application/atom+xml      "access plus 1 hour"

# Favicon (cannot be renamed)
  ExpiresByType image/x-icon              "access plus 1 week"

# Media: images, video, audio
  ExpiresByType image/gif                 "access plus 1 month"
  ExpiresByType image/png                 "access plus 1 month"
  ExpiresByType image/jpeg                "access plus 1 month"
  ExpiresByType video/ogg                 "access plus 1 month"
  ExpiresByType audio/ogg                 "access plus 1 month"
  ExpiresByType video/mp4                 "access plus 1 month"
  ExpiresByType video/webm                "access plus 1 month"

# HTC files  (css3pie)
  ExpiresByType text/x-component          "access plus 1 month"

# Webfonts
  ExpiresByType application/x-font-ttf    "access plus 1 month"
  ExpiresByType font/opentype             "access plus 1 month"
  ExpiresByType application/x-font-woff   "access plus 1 month"
  ExpiresByType image/svg+xml             "access plus 1 month"
  ExpiresByType application/vnd.ms-fontobject "access plus 1 month"

# CSS and JavaScript
  ExpiresByType text/css                  "access plus 1 year"
  ExpiresByType application/javascript    "access plus 1 year"




# ----------------------------------------------------------------------
# Prevent mobile network providers from modifying your site
# ----------------------------------------------------------------------

# The following header prevents modification of your code over 3G on some
# European providers.
# This is the official 'bypass' suggested by O2 in the UK.

# 
# Header set Cache-Control "no-transform"
# 


# ----------------------------------------------------------------------
# ETag removal
# ----------------------------------------------------------------------

# FileETag None is not enough for every server.

  Header unset ETag


# Since we're sending far-future expires, we don't need ETags for
# static content.
#   developer.yahoo.com/performance/rules.html#etags
FileETag None


# ----------------------------------------------------------------------
# Stop screen flicker in IE on CSS rollovers
# ----------------------------------------------------------------------

# The following directives stop screen flicker in IE on CSS rollovers - in
# combination with the "ExpiresByType" rules for images (see above).

# BrowserMatch "MSIE" brokenvary=1
# BrowserMatch "Mozilla/4.[0-9]{2}" brokenvary=1
# BrowserMatch "Opera" !brokenvary
# SetEnvIf brokenvary 1 force-no-vary


# ----------------------------------------------------------------------
# Set Keep-Alive Header
# ----------------------------------------------------------------------

# Keep-Alive allows the server to send multiple requests through one
# TCP-connection. Be aware of possible disadvantages of this setting. Turn on
# if you serve a lot of static content.

# 
#   Header set Connection Keep-Alive
# 


# ----------------------------------------------------------------------
# Cookie setting from iframes
# ----------------------------------------------------------------------

# Allow cookies to be set from iframes (for IE only)
# If needed, specify a path or regex in the Location directive.

# 
#   Header set P3P "policyref=\"/w3c/p3p.xml\", CP=\"IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT\""
# 


# ----------------------------------------------------------------------
# Start rewrite engine
# ----------------------------------------------------------------------

# Turning on the rewrite engine is necessary for the following rules and
# features. FollowSymLinks must be enabled for this to work.

# Some cloud hosting services require RewriteBase to be set: goo.gl/HOcPN
# If using the h5bp in a subdirectory, use `RewriteBase /foo` instead where
# 'foo' is your directory.

# If your web host doesn't allow the FollowSymlinks option, you may need to
# comment it out and use `Options +SymLinksOfOwnerMatch`, but be aware of the
# performance impact: http://goo.gl/Mluzd


  Options +FollowSymlinks
# Options +SymLinksIfOwnerMatch
  RewriteEngine On
# RewriteBase /



# ----------------------------------------------------------------------
# Suppress or force the "www." at the beginning of URLs
# ----------------------------------------------------------------------

# The same content should never be available under two different URLs -
# especially not with and without "www." at the beginning, since this can cause
# SEO problems (duplicate content). That's why you should choose one of the
# alternatives and redirect the other one.

# By default option 1 (no "www.") is activated.
# no-www.org/faq.php?q=class_b

# If you'd prefer to use option 2, just comment out all option 1 lines
# and uncomment option 2.

# IMPORTANT: NEVER USE BOTH RULES AT THE SAME TIME!

# ----------------------------------------------------------------------

# Option 1:
# Rewrite "www.example.com -> example.com".


  RewriteCond %{HTTPS} !=on
  RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
  RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L]


# ----------------------------------------------------------------------

# Option 2:
# Rewrite "example.com -> www.example.com".
# Be aware that the following rule might not be a good idea if you use "real"
# subdomains for certain parts of your website.

# 
#   RewriteCond %{HTTPS} !=on
#   RewriteCond %{HTTP_HOST} !^www\..+$ [NC]
#   RewriteRule ^ http://www.%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
# 


# ----------------------------------------------------------------------
# Built-in filename-based cache busting
# ----------------------------------------------------------------------

# If you're not using the build script to manage your filename version revving,
# you might want to consider enabling this, which will route requests for
# /css/style.20110203.css to /css/style.css

# To understand why this is important and a better idea than all.css?v1231,
# read: github.com/h5bp/html5-boilerplate/wiki/cachebusting

# 
#   RewriteCond %{REQUEST_FILENAME} !-f
#   RewriteCond %{REQUEST_FILENAME} !-d
#   RewriteRule ^(.+)\.(\d+)\.(js|css|png|jpg|gif)$ $1.$3 [L]
# 


# ----------------------------------------------------------------------
# Prevent SSL cert warnings
# ----------------------------------------------------------------------

# Rewrite secure requests properly to prevent SSL cert warnings, e.g. prevent
# https://www.example.com when your cert only allows https://secure.example.com

# 
#   RewriteCond %{SERVER_PORT} !^443
#   RewriteRule ^ https://example-domain-please-change-me.com%{REQUEST_URI} [R=301,L]
# 


# ----------------------------------------------------------------------
# Prevent 404 errors for non-existing redirected folders
# ----------------------------------------------------------------------

# without -MultiViews, Apache will give a 404 for a rewrite if a folder of the
# same name does not exist.
# webmasterworld.com/apache/3808792.htm

Options -MultiViews


# ----------------------------------------------------------------------
# Custom 404 page
# ----------------------------------------------------------------------

# You can add custom pages to handle 500 or 403 pretty easily, if you like.
# If you are hosting your site in subdirectory, adjust this accordingly
#    e.g. ErrorDocument 404 /subdir/404.html
ErrorDocument 404 /404.html


# ----------------------------------------------------------------------
# UTF-8 encoding
# ----------------------------------------------------------------------

# Use UTF-8 encoding for anything served text/plain or text/html
AddDefaultCharset utf-8

# Force UTF-8 for a number of file formats
AddCharset utf-8 .atom .css .js .json .rss .vtt .xml


# ----------------------------------------------------------------------
# A little more security
# ----------------------------------------------------------------------

# To avoid displaying the exact version number of Apache being used, add the
# following to httpd.conf (it will not work in .htaccess):
# ServerTokens Prod

# "-Indexes" will have Apache block users from browsing folders without a
# default document Usually you should leave this activated, because you
# shouldn't allow everybody to surf through every folder on your server (which
# includes rather private places like CMS system folders).

  Options -Indexes


# Block access to "hidden" directories or files whose names begin with a
# period. This includes directories used by version control systems such as
# Subversion or Git.

  RewriteCond %{SCRIPT_FILENAME} -d [OR]
  RewriteCond %{SCRIPT_FILENAME} -f
  RewriteRule "(^|/)\." - [F]


# Block access to backup and source files. These files may be left by some
# text/html editors and pose a great security danger, when anyone can access
# them.

  Order allow,deny
  Deny from all
  Satisfy All


# If your server is not already configured as such, the following directive
# should be uncommented in order to set PHP's register_globals option to OFF.
# This closes a major security hole that is abused by most XSS (cross-site
# scripting) attacks. For more information: http://php.net/register_globals
#
# IF REGISTER_GLOBALS DIRECTIVE CAUSES 500 INTERNAL SERVER ERRORS:
#
# Your server does not allow PHP directives to be set via .htaccess. In that
# case you must make this change in your php.ini file instead. If you are
# using a commercial web host, contact the administrators for assistance in
# doing this. Not all servers allow local php.ini files, and they should
# include all PHP configurations (not just this one), or you will effectively
# reset everything to PHP defaults. Consult www.php.net for more detailed
# information about setting PHP directives.

# php_flag register_globals Off

# Rename session cookie to something else, than PHPSESSID
# php_value session.name sid

# Disable magic quotes (This feature has been DEPRECATED as of PHP 5.3.0 and REMOVED as of PHP 5.4.0.)
# php_flag magic_quotes_gpc Off

# Do not show you are using PHP
# Note: Move this line to php.ini since it won't work in .htaccess
# php_flag expose_php Off

# Level of log detail - log all errors
# php_value error_reporting -1

# Write errors to log file
# php_flag log_errors On

# Do not display errors in browser (production - Off, development - On)
# php_flag display_errors Off

# Do not display startup errors (production - Off, development - On)
# php_flag display_startup_errors Off

# Format errors in plain text
# Note: Leave this setting 'On' for xdebug's var_dump() output
# php_flag html_errors Off

# Show multiple occurrence of error
# php_flag ignore_repeated_errors Off

# Show same errors from different sources
# php_flag ignore_repeated_source Off

# Size limit for error messages
# php_value log_errors_max_len 1024

# Don't precede error with string (doesn't accept empty string, use whitespace if you need)
# php_value error_prepend_string " "

# Don't prepend to error (doesn't accept empty string, use whitespace if you need)
# php_value error_append_string " "

# Increase cookie security

  php_value session.cookie_httponly true



================================================
FILE: server/raw/CNAME
================================================
semantic-ui.com

================================================
FILE: server/raw/api.json
================================================
{
  "success": true
}

================================================
FILE: server/raw/crossdomain.xml
================================================



    

    
    

    
    



================================================
FILE: server/raw/draft/carousel.js
================================================
/*  ******************************
  Semantic Module: Carousel
  Author: Jack Lukic
  Notes: First Commit May 28, 2013

  A carousel alternates between
  several pieces of content in sequence.

******************************  */

;(function ( $, window, document, undefined ) {

$.fn.carousel = function(parameters) {
  var
    $allModules     = $(this),

    settings        = $.extend(true, {}, $.fn.carousel.settings, parameters),

    eventNamespace  = '.' + settings.namespace,
    moduleNamespace = 'module-' + settings.namespace,
    moduleSelector  = $allModules.selector || '',

    time            = new Date().getTime(),
    performance     = [],

    query           = arguments[0],
    methodInvoked   = (typeof query == 'string'),
    queryArguments  = [].slice.call(arguments, 1),
    returnedValue
  ;

  $allModules
    .each(function() {
      var
        $module     = $(this),
        $arrows     = $(settings.selector.arrows),
        $leftArrow  = $(settings.selector.leftArrow),
        $rightArrow = $(settings.selector.rightArrow),
        $content    = $(settings.selector.content),
        $navigation = $(settings.selector.navigation),
        $navItem    = $(settings.selector.navItem),

        selector    = $module.selector || '',
        element     = this,
        instance    = $module.data('module-' + settings.namespace),

        className   = settings.className,
        namespace   = settings.namespace,
        errors      = settings.errors,
        module
      ;

      module      = {

        initialize: function() {
          module.openingAnimation();
          module.marquee.autoAdvance();
          $leftArrow
            .on('click', module.marquee.left)
          ;
          $rightArrow
            .on('click', module.marquee.right)
          ;
          $navItem
            .on('click', module.marquee.change)
          ;
        },

        destroy: function() {
          module.verbose('Destroying previous module for', $module);
          $module
            .off(eventNamespace)
          ;
        },

        left: function() {
          var
            $activeContent = $content.filter('.' + className.active),
            currentIndex   = $content.index($activeContent),
            imageCount     = $content.size(),
            newIndex       = (currentIndex - 1 != -1)
              ? (currentIndex - 1)
              : (imageCount - 1)
          ;
          $navItem
            .eq(newIndex)
              .trigger('click')
          ;
        },

        right: function() {
          var
            $activeContent = $content.filter('.' + className.active),
            currentIndex   = $content.index($activeContent),
            imageCount     = $content.size(),
            newIndex       = (currentIndex + 1 != imageCount)
              ? (currentIndex + 1)
              : 0
          ;
          $navItem
            .eq(newIndex)
              .trigger('click')
          ;
        },

        change: function() {
          var
            $selected      = $(this),
            selectedIndex  = $navItem.index($selected),
            $selectedImage = $content.eq(selectedIndex)
          ;
          module.marquee.autoAdvance();
          $selected
            .addClass('active')
            .siblings()
              .removeClass('active')
          ;
          $selectedImage
            .addClass('active animated fadeIn')
            .siblings('.' + className.active)
              .removeClass('animated fadeIn scaleIn')
              .animate({
                opacity: 0
              }, 500, function(){
                $(this)
                  .removeClass('active')
                  .removeAttr('style')
                ;
              })
          ;
        },

        autoAdvance: function() {
          clearInterval(module.timer);
          module.timer = setInterval(module.marquee.right, settings.duration);
        },

        setting: function(name, value) {
          if(value !== undefined) {
            if( $.isPlainObject(name) ) {
              module.verbose('Modifying settings object', name, value);
              $.extend(true, settings, name);
            }
            else {
              module.verbose('Modifying setting', name, value);
              settings[name] = value;
            }
          }
          else {
            return settings[name];
          }
        },
        internal: function(name, value) {
          if(value !== undefined) {
            if( $.isPlainObject(name) ) {
              module.verbose('Modifying internal property', name, value);
              $.extend(true, module, name);
            }
            else {
              module.verbose('Changing internal method to', value);
              module[name] = value;
            }
          }
          else {
            return module[name];
          }
        },
        debug: function() {
          if(settings.debug) {
            if(settings.performance) {
              module.performance.log(arguments);
            }
            else {
              module.debug = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
              module.debug.apply(console, arguments);
            }
          }
        },
        verbose: function() {
          if(settings.verbose && settings.debug) {
            if(settings.performance) {
              module.performance.log(arguments);
            }
            else {
              module.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
              module.verbose.apply(console, arguments);
            }
          }
        },
        error: function() {
          module.error = Function.prototype.bind.call(console.error, console, settings.moduleName + ':');
          module.error.apply(console, arguments);
        },
        performance: {
          log: function(message) {
            var
              currentTime,
              executionTime,
              previousTime
            ;
            if(settings.performance) {
              currentTime   = new Date().getTime();
              previousTime  = time || currentTime;
              executionTime = currentTime - previousTime;
              time          = currentTime;
              performance.push({
                'Element'        : element,
                'Name'           : message[0],
                'Arguments'      : message[1] || 'None',
                'Execution Time' : executionTime
              });
              clearTimeout(module.performance.timer);
              module.performance.timer = setTimeout(module.performance.display, 100);
            }
          },
          display: function() {
            var
              title              = settings.moduleName,
              caption            = settings.moduleName + ': ' + moduleSelector + '(' + $allModules.size() + ' elements)',
              totalExecutionTime = 0
            ;
            if(moduleSelector) {
              title += ' Performance (' + moduleSelector + ')';
            }
            if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
              console.groupCollapsed(title);
              if(console.table) {
                $.each(performance, function(index, data) {
                  totalExecutionTime += data['Execution Time'];
                });
                console.table(performance);
              }
              else {
                $.each(performance, function(index, data) {
                  totalExecutionTime += data['Execution Time'];
                  console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
                });
              }
              console.log('Total Execution Time:', totalExecutionTime +'ms');
              console.groupEnd();
              performance = [];
              time        = false;
            }
          }
        },
        invoke: function(query, passedArguments, context) {
          var
            maxDepth,
            found
          ;
          passedArguments = passedArguments || queryArguments;
          context         = element         || context;
          if(typeof query == 'string' && instance !== undefined) {
            query    = query.split(/[\. ]/);
            maxDepth = query.length - 1;
            $.each(query, function(depth, value) {
              if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) {
                instance = instance[value];
                return true;
              }
              else if( instance[value] !== undefined ) {
                found = instance[value];
                return true;
              }
              module.error(errors.method);
              return false;
            });
          }
          if ( $.isFunction( found ) ) {
            return found.apply(context, passedArguments);
          }
          return found || false;
        }
      };

      if(methodInvoked) {
        if(instance === undefined) {
          module.initialize();
        }
        module.invoke(query);
      }
      else {
        if(instance !== undefined) {
          module.destroy();
        }
        module.initialize();
      }
    })
  ;
  return (returnedValue !== undefined)
    ? returnedValue
    : this
  ;
};

$.fn.carousel.settings = {

  name  : 'Carousel',
  namespace   : 'carousel',

  verbose     : true,
  debug       : true,
  performance : true,

  // delegated event context
  duration: 5000,

  errors     : {
    method   : 'The method you called is not defined.'
  },

  selector : {
    arrows     : '.arrow',
    leftArrow  : '.left.arrow',
    rightArrow : '.right.arrow',
    content    : '.content',
    navigation : '.navigation',
    navItem    : '.navigation .icon'
  },

  className : {
    active : 'active'
  }

};

})( jQuery, window , document );

================================================
FILE: server/raw/draft/carousel.less
================================================
/*
 * # Semantic Carousel
 * http://github.com/quirkyinc/semantic
 *
 *
 * Copyright 2013 Contributors
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 * Released: June 03, 2013
 */


/*******************************
            Carousel
*******************************/

.ui.carousel {
  position: relative;
  overflow: hidden;
}
.ui.carousel .arrow {
  position: absolute;
  font-size: 1.5em;
  top: 50%;
  left: 0%;
  margin-top: -0.5em;
  z-index: 10;
}
.ui.carousel .right.arrow {
  left: auto;
  right: 0%;
}

.ui.carousel .slides {
  position: relative;
  width: 200%;
  width: 9999px;
  overflow: hidden;
  font-size: 0em;
}
.ui.carousel .slides .slide {
  display: inline-block;
  height: 100%;
  font-size: 1rem;
}
.ui.carousel .slides .slide > img {
  display: block;
  width: 100%;
}


/*--------------------
     Loading State
---------------------*/

/* On Form */
.ui.carousel.loading {
  position: relative;
}
.ui.carousel.loading:after {
  position: absolute;
  top: 0%;
  left: 0%;
  content: '';

  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8) url(../images/loader-large.gif) no-repeat 50% 50%;
  visibility: visible;
}

================================================
FILE: server/raw/draft/extra.transitions.less
================================================
/*******************************
  Semantic Module: Transition
  Author: Jack Lukic
  Notes: First Commit March 25, 2013

  CSS animation definitions for
  transition module

*******************************/

/*
  Some transitions adapted from Animate CSS
  https://github.com/daneden/animate.css
*/


.ui.transition {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;

  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  animation-iteration-count: 1;

  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;

  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;

  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;

  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}

/*******************************
       States
*******************************/

/* Loading */
.ui.loading.transition {
  position: absolute;
  top: -999999px;
  left: -99999px;
}

/* Hidden */
.ui.hidden.transition {
  display: none;
}

/* Visible */
.ui.visible.transition {
  display: block;
  visibility: visible;
}


/* Direction */
.ui.out.transition {
  -webkit-animation-direction: reverse;
  -moz-animation-direction: reverse;
  -o-animation-direction: reverse;
  animation-direction: reverse;
}

/* Disabled */
.ui.disabled.transition {
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -ms-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
}

/*******************************
          Variations
*******************************/

.ui.looping.transition {
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

/*******************************
             Types
*******************************/

/*--------------
     Moving
---------------*/

.ui.move.down.transition.in,
.ui.move.down.transition.out {
  animation-name: moveDown;
  -webkit-animation-name: moveDown;

  animation-duration: 1s;
  -webkit-animation-duration: 1s;

  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
}

@keyframes moveDown {
  0% {
    transform: translateY(-100%);
  }
  50%{
    transform: translateY(8%);
  }
  65%{
    transform: translateY(-4%);
  }
  80%{
    transform: translateY(4%);
  }
  95%{
    transform: translateY(-2%);
  }
  100% {
    transform: translateY(0%);
  }
}

@-webkit-keyframes moveDown {
  0% {
    -webkit-transform: translateY(-100%);
  }
  50%{
    -webkit-transform: translateY(8%);
  }
  65%{
    -webkit-transform: translateY(-4%);
  }
  80%{
    -webkit-transform: translateY(4%);
  }
  95%{
    -webkit-transform: translateY(-2%);
  }
  100% {
    -webkit-transform: translateY(0%);
  }
}

.ui.move.up.transition.in,
.ui.move.up.transition.out {
  animation-name: moveUp;
  -webkit-animation-name: moveUp;

  animation-duration: 1s;
  -webkit-animation-duration: 1s;

  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
}

@keyframes moveUp {
  0% {
    transform: translateY(100%);
  }
  50%{
    transform: translateY(-8%);
  }
  65%{
    transform: translateY(4%);
  }
  80%{
    transform: translateY(-4%);
  }
  95%{
    transform: translateY(2%);
  }
  100% {
    transform: translateY(0%);
  }
}

@-webkit-keyframes moveUp {
  0% {
    -webkit-transform: translateY(100%);
  }
  50%{
    -webkit-transform: translateY(-8%);
  }
  65%{
    -webkit-transform: translateY(4%);
  }
  80%{
    -webkit-transform: translateY(-4%);
  }
  95%{
    -webkit-transform: translateY(2%);
  }
  100% {
    -webkit-transform: translateY(0%);
  }
}


.ui.move.left.transition.in,
.ui.move.left.transition.out {
  animation-name: moveLeft;
  -webkit-animation-name: moveLeft;

  animation-duration: 1s;
  -webkit-animation-duration: 1s;

  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;

  visibility: visible !important;
}

@keyframes moveLeft {
  0% {
    transform: translateX(150%);
  }
  50%{
    ransform: translateX(-8%);
  }
  65%{
    transform: translateX(4%);
  }
  80%{
    transform: translateX(-4%);
  }
  95%{
    transform: translateX(2%);
  }
  100% {
    transform: translateX(0%);
  }
}

@-webkit-keyframes moveLeft {
  0% {
    -webkit-transform: translateX(150%);
  }
  50%{
    -webkit-transform: translateX(-8%);
  }
  65%{
    -webkit-transform: translateX(4%);
  }
  80%{
    -webkit-transform: translateX(-4%);
  }
  95%{
    -webkit-transform: translateX(2%);
  }
  100% {
    -webkit-transform: translateX(0%);
  }
}


.ui.move.right.transition.in,
.ui.move.right.transition.out {
  animation-name: moveRight;
  -webkit-animation-name: moveRight;

  animation-duration: 1s;
  -webkit-animation-duration: 1s;

  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;

  visibility: visible !important;
}

@keyframes moveRight {
  0% {
    transform: translateX(-150%);
  }
  50%{
    transform: translateX(8%);
  }
  65%{
    transform: translateX(-4%);
  }
  80%{
    transform: translateX(4%);
  }
  95%{
    transform: translateX(-2%);
  }
  100% {
    transform: translateX(0%);
  }
}

@-webkit-keyframes moveRight {
  0% {
    -webkit-transform: translateX(-150%);
  }
  50%{
    -webkit-transform: translateX(8%);
  }
  65%{
    -webkit-transform: translateX(-4%);
  }
  80%{
    -webkit-transform: translateX(4%);
  }
  95%{
    -webkit-transform: translateX(-2%);
  }
  100% {
    -webkit-transform: translateX(0%);
  }
}

/*
==============================================
slideExpandUp
==============================================
*/


.slideExpandUp{
  animation-name: slideExpandUp;
  -webkit-animation-name: slideExpandUp;

  animation-duration: 1.6s;
  -webkit-animation-duration: 1.6s;

  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease -out;

  visibility: visible !important;
}

@keyframes slideExpandUp {
  0% {
    transform: translateY(100%) scaleX(0.5);
  }
  30%{
    transform: translateY(-8%) scaleX(0.5);
  }
  40%{
    transform: translateY(2%) scaleX(0.5);
  }
  50%{
    transform: translateY(0%) scaleX(1.1);
  }
  60%{
    transform: translateY(0%) scaleX(0.9);
  }
  70% {
    transform: translateY(0%) scaleX(1.05);
  }
  80%{
    transform: translateY(0%) scaleX(0.95);
  }
  90% {
    transform: translateY(0%) scaleX(1.02);
  }
  100%{
    transform: translateY(0%) scaleX(1);
  }
}

@-webkit-keyframes slideExpandUp {
  0% {
    -webkit-transform: translateY(100%) scaleX(0.5);
  }
  30%{
    -webkit-transform: translateY(-8%) scaleX(0.5);
  }
  40%{
    -webkit-transform: translateY(2%) scaleX(0.5);
  }
  50%{
    -webkit-transform: translateY(0%) scaleX(1.1);
  }
  60%{
    -webkit-transform: translateY(0%) scaleX(0.9);
  }
  70% {
    -webkit-transform: translateY(0%) scaleX(1.05);
  }
  80%{
    -webkit-transform: translateY(0%) scaleX(0.95);
  }
  90% {
    -webkit-transform: translateY(0%) scaleX(1.02);
  }
  100%{
    -webkit-transform: translateY(0%) scaleX(1);
  }
}

/*
==============================================
expandUp
==============================================
*/


.expandUp{
  animation-name: expandUp;
  -webkit-animation-name: expandUp;

  animation-duration: 0.7s;
  -webkit-animation-duration: 0.7s;

  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;

  visibility: visible !important;
}

@keyframes expandUp {
  0% {
    transform: translateY(100%) scale(0.6) scaleY(0.5);
  }
  60%{
    transform: translateY(-7%) scaleY(1.12);
  }
  75%{
    transform: translateY(3%);
  }
  100% {
    transform: translateY(0%) scale(1) scaleY(1);
  }
}

@-webkit-keyframes expandUp {
  0% {
    -webkit-transform: translateY(100%) scale(0.6) scaleY(0.5);
  }
  60%{
    -webkit-transform: translateY(-7%) scaleY(1.12);
  }
  75%{
    -webkit-transform: translateY(3%);
  }
  100% {
    -webkit-transform: translateY(0%) scale(1) scaleY(1);
  }
}

/*
==============================================
fadeIn
==============================================
*/

.fadeIn{
  animation-name: fadeIn;
  -webkit-animation-name: fadeIn;

  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;

  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;

  visibility: visible !important;
}

@keyframes fadeIn {
  0% {
    transform: scale(0);
    opacity: 0.0;
  }
  60% {
    transform: scale(1.1);
  }
  80% {
    transform: scale(0.9);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    -webkit-transform: scale(0);
    opacity: 0.0;
  }
  60% {
    -webkit-transform: scale(1.1);
  }
  80% {
    -webkit-transform: scale(0.9);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
}

/*
==============================================
expandOpen
==============================================
*/


.expandOpen{
  animation-name: expandOpen;
  -webkit-animation-name: expandOpen;

  animation-duration: 1.2s;
  -webkit-animation-duration: 1.2s;

  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;

  visibility: visible !important;
}

@keyframes expandOpen {
  0% {
    transform: scale(1.8);
  }
  50% {
    transform: scale(0.95);
  }
  80% {
    transform: scale(1.05);
  }
  90% {
    transform: scale(0.98);
  }
  100% {
    transform: scale(1);
  }
}

@-webkit-keyframes expandOpen {
  0% {
    -webkit-transform: scale(1.8);
  }
  50% {
    -webkit-transform: scale(0.95);
  }
  80% {
    -webkit-transform: scale(1.05);
  }
  90% {
    -webkit-transform: scale(0.98);
  }
  100% {
    -webkit-transform: scale(1);
  }
}

/*
==============================================
bigEntrance
==============================================
*/


.bigEntrance{
  animation-name: bigEntrance;
  -webkit-animation-name: bigEntrance;

  animation-duration: 1.6s;
  -webkit-animation-duration: 1.6s;

  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;

  visibility: visible !important;
}

@keyframes bigEntrance {
  0% {
    transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
    opacity: 0.2;
  }
  30% {
    transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
    opacity: 1;
  }
  45% {
    transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
  60% {
    transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
  75% {
    transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
  90% {
    transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
}

@-webkit-keyframes bigEntrance {
  0% {
    -webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
    opacity: 0.2;
  }
  30% {
    -webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
    opacity: 1;
  }
  45% {
    -webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
  60% {
    -webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
  75% {
    -webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
  90% {
    -webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
}

/*
==============================================
hatch
==============================================
*/

.hatch{
  animation-name: hatch;
  -webkit-animation-name: hatch;

  animation-duration: 2s;
  -webkit-animation-duration: 2s;

  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;

  transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -webkit-transform-origin: 50% 100%;

  visibility: visible !important;
}

@keyframes hatch {
  0% {
    transform: rotate(0deg) scaleY(0.6);
  }
  20% {
    transform: rotate(-2deg) scaleY(1.05);
  }
  35% {
    transform: rotate(2deg) scaleY(1);
  }
  50% {
    transform: rotate(-2deg);
  }
  65% {
    transform: rotate(1deg);
  }
  80% {
    transform: rotate(-1deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes hatch {
  0% {
    -webkit-transform: rotate(0deg) scaleY(0.6);
  }
  20% {
    -webkit-transform: rotate(-2deg) scaleY(1.05);
  }
  35% {
    -webkit-transform: rotate(2deg) scaleY(1);
  }
  50% {
    -webkit-transform: rotate(-2deg);
  }
  65% {
    -webkit-transform: rotate(1deg);
  }
  80% {
    -webkit-transform: rotate(-1deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}


/*
==============================================
bounce
==============================================
*/


.bounce{
  animation-name: bounce;
  -webkit-animation-name: bounce;

  animation-duration: 1.6s;
  -webkit-animation-duration: 1.6s;

  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;

  transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -webkit-transform-origin: 50% 100%;
}

@keyframes bounce {
  0% {
    transform: translateY(0%) scaleY(0.6);
  }
  60%{
    transform: translateY(-100%) scaleY(1.1);
  }
  70%{
    transform: translateY(0%) scaleY(0.95) scaleX(1.05);
  }
  80%{
    transform: translateY(0%) scaleY(1.05) scaleX(1);
  }
  90%{
    transform: translateY(0%) scaleY(0.95) scaleX(1);
  }
  100%{
    transform: translateY(0%) scaleY(1) scaleX(1);
  }
}

@-webkit-keyframes bounce {
  0% {
    -webkit-transform: translateY(0%) scaleY(0.6);
  }
  60%{
    -webkit-transform: translateY(-100%) scaleY(1.1);
  }
  70%{
    -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05);
  }
  80%{
    -webkit-transform: translateY(0%) scaleY(1.05) scaleX(1);
  }
  90%{
    -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1);
  }
  100%{
    -webkit-transform: translateY(0%) scaleY(1) scaleX(1);
  }
}


/*
==============================================
pulse
==============================================
*/

.pulse{
  animation-name: pulse;
  -webkit-animation-name: pulse;

  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;

  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.9);
    opacity: 0.7;
  }
  50% {
    ransform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.9);
    opacity: 0.7;
  }
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(0.95);
    opacity: 0.7;
  }
  50% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0.95);
    opacity: 0.7;
  }
}

/*
==============================================
floating
==============================================
*/

.floating{
  animation-name: floating;
  -webkit-animation-name: floating;

  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;

  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@keyframes floating {
  0% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(8%);
  }
  100% {
    transform: translateY(0%);
  }
}

@-webkit-keyframes floating {
  0% {
    -webkit-transform: translateY(0%);
  }
  50% {
    -webkit-transform: translateY(8%);
  }
  100% {
    -webkit-transform: translateY(0%);
  }
}

/*
==============================================
tossing
==============================================
*/

.tossing{
  animation-name: tossing;
  -webkit-animation-name: tossing;

  animation-duration: 2.5s;
  -webkit-animation-duration: 2.5s;

  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@keyframes tossing {
  0% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(4deg);
  }
  100% {
    transform: rotate(-4deg);
  }
}

@-webkit-keyframes tossing {
  0% {
    -webkit-transform: rotate(-4deg);
  }
  50% {
    -webkit-transform: rotate(4deg);
  }
  100% {
    -webkit-transform: rotate(-4deg);
  }
}

/*
==============================================
pullUp
==============================================
*/

.pullUp{
  animation-name: pullUp;
  -webkit-animation-name: pullUp;

  animation-duration: 1.1s;
  -webkit-animation-duration: 1.1s;

  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;

  transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -webkit-transform-origin: 50% 100%;
}

@keyframes pullUp {
  0% {
    transform: scaleY(0.1);
  }
  40% {
    transform: scaleY(1.02);
  }
  60% {
    transform: scaleY(0.98);
  }
  80% {
    transform: scaleY(1.01);
  }
  100% {
    transform: scaleY(0.98);
  }
  80% {
    transform: scaleY(1.01);
  }
  100% {
    transform: scaleY(1);
  }
}

@-webkit-keyframes pullUp {
  0% {
    -webkit-transform: scaleY(0.1);
  }
  40% {
    -webkit-transform: scaleY(1.02);
  }
  60% {
    -webkit-transform: scaleY(0.98);
  }
  80% {
    -webkit-transform: scaleY(1.01);
  }
  100% {
    -webkit-transform: scaleY(0.98);
  }
  80% {
    -webkit-transform: scaleY(1.01);
  }
  100% {
    -webkit-transform: scaleY(1);
  }
}

/*
==============================================
pullDown
==============================================
*/

.pullDown{
  animation-name: pullDown;
  -webkit-animation-name: pullDown;

  animation-duration: 1.1s;
  -webkit-animation-duration: 1.1s;

  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;

  transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  -webkit-transform-origin: 50% 0%;
}

@keyframes pullDown {
  0% {
    transform: scaleY(0.1);
  }
  40% {
    transform: scaleY(1.02);
  }
  60% {
    transform: scaleY(0.98);
  }
  80% {
    transform: scaleY(1.01);
  }
  100% {
    transform: scaleY(0.98);
  }
  80% {
    transform: scaleY(1.01);
  }
  100% {
    transform: scaleY(1);
  }
}

@-webkit-keyframes pullDown {
  0% {
    -webkit-transform: scaleY(0.1);
  }
  40% {
    -webkit-transform: scaleY(1.02);
  }
  60% {
    -webkit-transform: scaleY(0.98);
  }
  80% {
    -webkit-transform: scaleY(1.01);
  }
  100% {
    -webkit-transform: scaleY(0.98);
  }
  80% {
    -webkit-transform: scaleY(1.01);
  }
  100% {
    -webkit-transform: scaleY(1);
  }
}

/*
==============================================
stretchLeft
==============================================
*/

.stretchLeft{
  animation-name: stretchLeft;
  -webkit-animation-name: stretchLeft;

  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;

  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;

  transform-origin: 100% 0%;
  -ms-transform-origin: 100% 0%;
  -webkit-transform-origin: 100% 0%;
}

@keyframes stretchLeft {
  0% {
    transform: scaleX(0.3);
  }
  40% {
    transform: scaleX(1.02);
  }
  60% {
    transform: scaleX(0.98);
  }
  80% {
    transform: scaleX(1.01);
  }
  100% {
    transform: scaleX(0.98);
  }
  80% {
    transform: scaleX(1.01);
  }
  100% {
    transform: scaleX(1);
  }
}

@-webkit-keyframes stretchLeft {
  0% {
    -webkit-transform: scaleX(0.3);
  }
  40% {
    -webkit-transform: scaleX(1.02);
  }
  60% {
    -webkit-transform: scaleX(0.98);
  }
  80% {
    -webkit-transform: scaleX(1.01);
  }
  100% {
    -webkit-transform: scaleX(0.98);
  }
  80% {
    -webkit-transform: scaleX(1.01);
  }
  100% {
    -webkit-transform: scaleX(1);
  }
}

/*
==============================================
stretchRight
==============================================
*/

.stretchRight{
  animation-name: stretchRight;
  -webkit-animation-name: stretchRight;

  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;

  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;

  transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  -webkit-transform-origin: 0% 0%;
}

@keyframes stretchRight {
  0% {
    transform: scaleX(0.3);
  }
  40% {
    transform: scaleX(1.02);
  }
  60% {
    transform: scaleX(0.98);
  }
  80% {
    transform: scaleX(1.01);
  }
  100% {
    transform: scaleX(0.98);
  }
  80% {
    transform: scaleX(1.01);
  }
  100% {
    transform: scaleX(1);
  }
}

@-webkit-keyframes stretchRight {
  0% {
    -webkit-transform: scaleX(0.3);
  }
  40% {
    -webkit-transform: scaleX(1.02);
  }
  60% {
    -webkit-transform: scaleX(0.98);
  }
  80% {
    -webkit-transform: scaleX(1.01);
  }
  100% {
    -webkit-transform: scaleX(0.98);
  }
  80% {
    -webkit-transform: scaleX(1.01);
  }
  100% {
    -webkit-transform: scaleX(1);
  }
}

================================================
FILE: server/raw/draft/sitemap.less
================================================
/*
 * # Sitemap
 *
 *
 * Copyright 2013 Contributors
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 * Released: April 17 2013
 */

/*******************************
           Sitemap
*******************************/

.ui.sitemap {
  margin: 0 -3rem;
  font-size: 0rem;
  text-align: left;
}


/*--------------
     Elements
---------------*/

.ui.sitemap > .section {
  display: inline-block;
  vertical-align: top;

  margin: 0em 3rem;

  font-size: 1rem;
}

.ui.sitemap > .section > .header {
  font-size: 1.125em;
  color: rgba(0, 0, 0, 0.8);
  padding-bottom: 0.5em;
}

.ui.sitemap > .section > a {
  display: block;
  padding: 0.25em 0em;
}



================================================
FILE: server/raw/humans.txt
================================================
# humanstxt.org/
# The humans responsible & technology colophon

# TEAM

    jack Lukic - Developer

# THANKS

   Quirky Inc

# TECHNOLOGY COLOPHON

    HTML5, CSS3
    jQuery


================================================
FILE: server/raw/robots.txt
================================================
# robotstxt.org/

User-agent: *