[ { "path": ".gitignore", "content": "node_modules\nout/\npackage-lock.json\n\n# Numerous always-ignore extensions\n*.diff\n*.err\n*.orig\n*.log\n*.rej\n*.swo\n\n*.swp\n*.zip\n*.vi\n*~\n*.sass-cache\n*.ruby-version\n\n# OS or Editor folders\n.DS_Store\n._*\nThumbs.db\n.cache\n.project\n.settings\n.tmproj\n.docpad.db\n*.esproj\nnbproject\n*.sublime-project\n*.sublime-workspace\n.brofile\n" }, { "path": ".jshintrc", "content": "{\n\n \"globals\": {\n \"$\" : true,\n \"afterEach\" : true,\n \"beforeEach\" : true,\n \"console\" : true,\n \"describe\" : true,\n \"expect\" : true,\n \"it\" : true,\n \"jQuery\" : true,\n \"loadFixtures\" : true,\n \"module\" : true,\n \"requestAnimationFrame\" : true,\n \"require\" : true,\n \"semantic\" : true\n },\n\n \"debug\" : false,\n \"devel\" : true,\n\n \"browser\" : true,\n \"curly\" : true,\n \"immed\" : true,\n \"latedef\" : true,\n \"loopfunc\" : true,\n \"noarg\" : true,\n \"undef\" : true,\n \"sub\" : true,\n \"loopfunc\" : true,\n\n \"laxbreak\" : true,\n \"evil\" : true,\n \"indent\" : false,\n \"trailing\" : false\n\n}" }, { "path": "README.md", "content": "# Semantic Docs\n\nThis folder contains the templates used to generate the static website for [semantic-ui.com](http://www.semantic-ui.com). \n\nThis repo can be used to create a fork of the UI documents to serve as styleguide for your project.\n\n### Installing Dependencies\n\n\nYou 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.\n\nSUI 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.\n\n```\nnvm install 8\nnvm use 8\n```\n\nTo run docpad after cloning this repo\n\n```\nnpm install -g docpad@6.79.4\ndocpad install;\n```\n\nThen finally to start the server\n```\ndocpad run\n```\n\n### Generating Semantic UI for Docs\n\nAssuming two sibling folders:\n\n1. UI folder ./ui\n2. Docs folder ./docs\n\n* Clone both repos to respective folders\n* npm install in both directories\n* Go through Semantic UI installer steps (auto)\n* In `./ui` folder `gulp build-docs` (builds files to ./docs)\n* In `./docs` folder `docpad install` then `docpad run`\n* Go to http://localhost:9778/ docs should be there\n* Optionally run `gulp serve-docs` in ./ui to serve any changes from ./ui/src to ./docs\n\n### Running the Server\n\nStart the docs server (and generate docs):\n\n```\n# run from inside docs folder that will now contain the compiled docs\n# windows users can then navigate to http://localhost:9778\ndocpad run\n```\n\n\nWatch for changes from your UI folder, and serve to the docs instance:\n\n```\ngulp serve-docs\n```\n\n### Publishing to GitHub Pages\n\nYou can publish your docs to GitHub Pages from the command line automatically\n```\ndocpad deploy-ghpages --env static\n```\n\n\n## Help Fix Typos and Errors\n\nIf you find any typos or mistakes, submitting a fix is easy!\n\n- [Open the `documents/` folder](https://github.com/Semantic-Org/Semantic-UI-Docs/tree/master/server/documents) on GitHub\n- Click the “Edit” button on the appropriate page\n- Click to submit a pull request\n\n" }, { "path": "docpad.coffee", "content": "# The DocPad Configuration File\n# It is simply a CoffeeScript Object which is parsed by CSON\ndocpadConfig = {\n\n\tsrcPath : './server'\n\toutPath: './out'\n\n\t# test production env\n\t# env: 'production'\n\n\tplugins:\n ghpages:\n deployRemote: 'origin'\n deployBranch: 'gh-pages'\n\n\t# =================================\n\t# Template Data\n\t# These are variables that will be accessible via our templates\n\t# To access one of these within our templates, refer to the FAQ: https://github.com/bevry/docpad/wiki/FAQ\n\n\ttemplateData:\n\n\t\t# Specify some site properties\n\t\tsite:\n\n\t\t\t# The production url of our website\n\t\t\turl: \"http://www.semantic-ui.com\"\n\n\t\t\t# Here are some old site urls that you would like to redirect from\n\t\t\toldUrls: [],\n\n\t\t\tversion: \"2.5.0\",\n\n\t\t\tbranch: \"master\",\n\n\t\t\t# The default title of our website\n\t\t\ttitle: \"Semantic UI\"\n\n\t\t\t# The website description (for SEO)\n\t\t\tdescription: \"\"\"\n\t\t\t\tSemantic empowers designers and developers by creating a shared vocabulary for UI.\n\t\t\t\t\"\"\"\n\n\t\t\t# The website keywords (for SEO) separated by commas\n\t\t\tkeywords: \"\"\"\n\t\t\t\thtml5, ui, library, framework, javascript\n\t\t\t\t\"\"\"\n\n\n\t\t# -----------------------------\n\t\t# Helper Functions\n\n\t\t# Get the prepared site/document title\n\t\t# Often we would like to specify particular formatting to our page's title\n\t\t# we can apply that formatting here\n\n\t\tgetDirPath: ->\n\t\t\t@document.dirPath\n\n\t\tgetVersion: ->\n\t\t\t@site.version\n\n\t\tgetBranch: ->\n\t\t\t@site.branch\n\n\t\tgetZip: ->\n\t\t\tif @site.version\n\t\t\t\t\"https://github.com/Semantic-Org/Semantic-UI/archive/\" + @site.version + \".zip\"\n\t\t\telse\n\t\t\t\t\"https://github.com/Semantic-Org/Semantic-UI/archive/master.zip\"\n\n\t\tgetPreparedTitle: ->\n\t\t\t# if we have a document title, then we should use that and suffix the site's title onto it\n\t\t\tif @document.title\n\t\t\t\t\"#{@document.title} | #{@site.title}\"\n\t\t\t# if our document does not have it's own title, then we should just use the site's title\n\t\t\telse\n\t\t\t\t@site.title\n\n\t\tgetPage: (collection, id) ->\n\t\t\tfor item, index in collection\n\t\t\t\tselectedIndex = (index + 1) if item.id is id\n\t\t\tselectedIndex\n\n\t\tpageCount: (collection) ->\n\t\t\tfor item, index in collection\n\t\t\t\titemCount = index + 1\n\t\t\titemCount\n\n\t\tgetPageCollection: (collection, id, delta = 2) ->\n\t\t\tfor item, index in collection\n\t\t\t\tselectedIndex = index if item.id is id\n\t\t\t\tlastIndex = index\n\n\t\t\t# determine page count before and after\n\t\t\tbottomCount = if (selectedIndex - delta >= 0) then delta else (selectedIndex)\n\t\t\ttopCount = if (selectedIndex + delta <= lastIndex) then delta else (lastIndex - selectedIndex)\n\n\t\t\tbottomDelta = (delta * 2 - topCount)\n\t\t\ttopDelta = (delta * 2 - bottomCount)\n\n\t\t\tbottomIndex = if (selectedIndex - bottomDelta >= 0) then (selectedIndex - bottomDelta) else 0\n\t\t\ttopIndex = if (selectedIndex + topDelta <= lastIndex) then (selectedIndex + topDelta) else lastIndex\n\t\t\tresult = collection[bottomIndex..topIndex]\n\t\t\tresult\n\n\t\t# Get the prepared site/document description\n\t\tgetPreparedDescription: ->\n\t\t\t# if we have a document description, then we should use that, otherwise use the site's description\n\t\t\t@document.description or @site.description\n\n\t\t# Get the prepared site/document keywords\n\t\tgetPreparedKeywords: ->\n\t\t\t# Merge the document keywords with the site keywords\n\t\t\t@site.keywords.concat(@document.keywords or []).join(', ')\n\n\n\t# =================================\n\t# Custom Collections\n\n\tcollections:\n\t\tuiElements: ->\n\t\t\t@getCollection(\"documents\").findAllLive({type: $in: ['UI Element']}, [{title: 1}])\n\n\t\tuiCollections: ->\n\t\t\t@getCollection(\"documents\").findAllLive({type: $in: ['UI Collection']}, [{title: 1}])\n\n\t\tuiViews: ->\n\t\t\t@getCollection(\"documents\").findAllLive({type: $in: ['UI View']}, [{title: 1}])\n\n\t\tuiModules: ->\n\t\t\t@getCollection(\"documents\").findAllLive({type: $in: ['UI Module', 'UI Behavior']}, [{title: 1}])\n\n\t# =================================\n\t# DocPad Events\n\n\t# Here we can define handlers for events that DocPad fires\n\t# You can find a full listing of events on the DocPad Wiki\n\t# events:\n\tevents:\n extendCollections: (opts) ->\n @docpad.getCollection('files').on('add', (document) ->\n document.setMetaDefaults(standalone:true))\n\n\n}\n\n# Export our DocPad Configuration\nmodule.exports = docpadConfig\n" }, { "path": "package.json", "content": "{\n \"name\": \"semantic-ui-docs\",\n \"title\": \"Semantic UI Docs\",\n \"description\": \"Semantic empowers designers and developers by creating a shared vocabulary for UI.\",\n \"homepage\": \"http://www.semantic-ui.com\",\n \"author\": \"Jack Lukic \",\n \"license\": \"MIT\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git://github.com/Semantic-Org/Semantic-UI-Docs.git\"\n },\n \"dependencies\": {\n \"docpad\": \"~6.79.4\",\n \"docpad-plugin-babel\": \"~2.2.1\",\n \"docpad-plugin-copy\": \"~2.1.3\",\n \"docpad-plugin-eco\": \"~2.2.1\",\n \"docpad-plugin-partials\": \"~2.12.0\"\n },\n \"devDependencies\": {\n \"docpad-plugin-ghpages\": \"~2.6.1\"\n }\n}\n" }, { "path": "server/documents/404.html.eco", "content": "---\nlayout : 'default'\ntitle : 'Page Not Found'\ntype : '404'\n---\n<%- @partial('header') %>\n\n
\n\n
" }, { "path": "server/documents/behaviors/api.html.eco", "content": "---\nlayout : 'default'\ncss : 'api'\nstandalone : true\n\nelement : 'API'\nelementType : 'behavior'\n\ntitle : 'API'\ndescription : 'API allows elements to trigger actions on a server'\ntype : 'UI Behavior'\n---\n\n\n\n\n<%- @partial('header', { tabs: { overview: 'Overview', usage: 'Usage', behaviors: 'Behaviors', settings: 'Settings' } }) %>\n\n
\n
\n\n
\n

Integrates Seamlessly with UI

\n

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

\n

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

\n
\n \n \n
\n \n
Click Me
\n
Disabled
\n
\n\n
\n

Preserve Templated URLs

\n

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.

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

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.

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

HTTP 200 is Not Success

\n

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

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

Translate APIs on the Fly

\n

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.

\n
\n\n
\n

Tools for Third-Party Integrations & Mocking

\n

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

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

API Example

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

Creating an API

\n\n
\n

API Actions

\n

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.

\n

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

\n

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

\n
\n
\n

Required Parameters

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

Optional Parameters

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

Creating your API

\n

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

\n

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

\n

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.

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

Using URLs

\n

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

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

Querying API Actions

\n\n
\n
\n

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

\n
\n

Attaching API Events

\n\n

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.

\n\n

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.

\n\n

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

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

API actions and data can also be specified in metadata:

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

Specifying DOM Events

\n

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

\n
\n 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.\n
\n
\n $('.follow.button')\n .api({\n action: 'follow user',\n on: 'mouseenter'\n })\n ;\n
\n
\n\n
\n

Calling Immediately

\n

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.

\n

\n

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

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.

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

Setting-up Requests

\n\n
\n

Routing Data to URLs

\n

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

\n

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.\n

\n\n
\n

1. Automatically Routed URL Variables

\n

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

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
VariableDescriptionAvailable for
textcurrent text value of elementAll elements
valuecurrent input value of elementInput elements
\n
\n
\n \n \n
\n
\n
\n $.fn.api.settings.api.search = '/search/?query={value}';\n\n $('.routed.example .search input')\n .api({\n action : 'search',\n stateContext : '.ui.input'\n })\n ;\n
\n
\n\n
\n

2. URL Variables Specified in Data Attributes

\n

You can include URL values as HTML5 metadata attributes.

\n

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.

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

3. Settings Specified in Javascript

\n

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

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

4. Settings Returned from beforeSend

\n

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

\n
\n 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.\n
\n
\n $('.follow.button')\n .api({\n action: 'follow user',\n beforeSend: function(settings) {\n settings.urlData = {\n id: 22\n };\n return settings;\n }\n beforeXHR: function(xhr) {\n // adjust XHR with additional headers\n xhr.setRequestHeader ('Authorization', 'Basic XXXXXX');\n return xhr;\n }\n })\n ;\n
\n
\n\n

Adjusting Requests

\n\n
\n

Modifying XHR

\n

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.

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

Disabling Requests

\n

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

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

Cancelling Requests

\n

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.

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

Passing Data

\n\n
\n

1. Routed Form Data

\n

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.

\n

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

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

Structured Data Example

\n

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

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

2. Data Routed in Javascript

\n

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

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

3. Data Added in beforeSend

\n

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

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

Server Responses

\n\n
\n

Response Callbacks

\n

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

\n

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

\n

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

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

Determining JSON Success

\n

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.

\n

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

\n

\n 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.\n
\n
\n {\n \"success\": true,\n \"message\": \"We've retrieved your data from the server\"\n \"data\": {\n // payload here\n }\n }\n
\n

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

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

Modifying Response JSON

\n

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.

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

Controlling State

\n\n
\n

UI State

\n\n

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

\n\n

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.

\n

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

\n\n
States Included in API Module
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
StateDescriptionAPI event
loadingIndicates a user needs to waitXHR has initialized
errorIndicates an error has occurredXHR Request returns error (does not trigger onAbort caused by page change, or if successTest fails). Stays visible for settings.errorDuration
disabledprevents API actionnone
\n
\n\n
\n

Text State

\n

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:

\n\n \n\n
\n $('.follow.button')\n .api({\n action: 'follow user'\n })\n .state({\n onActivate: function() {\n $(this).state('flash text');\n },\n text: {\n inactive : 'Follow',\n active : 'Followed',\n deactivate : 'Unfollow',\n flash : 'Added follower!'\n }\n })\n ;\n
\n
States Included in State Module
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
StateDescriptionOccurs on
inactiveDefault state
activeSelected stateToggled on succesful API request
activateExplains activating actionOn hover if inactive
deactivateExplains deactivating actionOn hover if active
hoverExplains interactionOn hover in all states, overrides activate/deactivate
disabledIndicates element cannot be interactedTriggered programatically. Blocks API requests.
flashText-only state used to display a temporary messageTriggered programatically
successIndicates user action was a successTriggered programatically
warningIndicates there was an issue with a user actionTriggered programatically
\n
\n\n

Advanced Use

\n\n
\n

Fulfilling Responses

\n

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.)

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

Using Custom Backends

\n

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.

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

Behavior

\n\n

All the following behaviors can be called using the syntax:

\n
\n $('.your.element')\n .api('behavior name', argumentOne, argumentTwo)\n ;\n
\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
BehaviorDescription
queryExecute query using existing API settings
add url data(url, data)Adds data to existing templated url and returns full url string
get requestGets promise for current API request
abortAborts current API request
resetRemoves loading and error state from element
was cancelledReturns whether last request was cancelled
was failureReturns whether last request was failure
was successfulReturns whether last request was successful
was completeReturns whether last request was completed
is disabledReturns whether element is disabled
is mockedReturns whether element response is mocked
is loadingReturns whether element is loading
set loadingSets loading state to element
set errorSets error state to element
remove loadingRemoves loading state to element
remove errorRemoves error state to element
get eventGets event that API request will occur on
get url encoded value(value)Returns encodeURIComponent value only if value passsed is not already encoded\n
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 cacheCreates new cache, removing all locally cached URLs
destroyRemoves API settings from the page and all events
\n\n\n
\n\n\n
\n

\n API\n

\n\n

\n AJAX\n

\n
\n 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.\n
\n\n

\n API\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
DefaultDescription
onautoWhen API event should occur
cachetrueCan 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.
stateContextthisUI state will be applied to this element, defaults to triggering element.
encodeParameterstrueWhether to encode parameters with encodeURIComponent before adding into url string
defaultDatatrueWhether to automatically include default data like {value} and {text}
serializeFormfalseWhether to serialize closest form and include in request
throttle\n 0\n How long to wait when a request is made before triggering request, useful for rate limiting oninput
throttleFirstRequest\n true\n When set to false will not delay the first request made, when no others are queued
interruptRequests\n false\n Whether an API request can occur while another request is still pending
loadingDuration0Minimum duration to show loading indication
hideErrorautoThe default auto will automatically remove error state after error duration, unless the element is a form
errorDuration2000Setting to true, will not remove error. Setting to a duration in milliseconds to show error state after request error.
\n\n

\n Request Settings\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
DefaultDescriptionPossible Values
actionfalseNamed API action for query, originally specified in $.fn.settings.apiString or false
urlfalseTemplated URL for query, will override specified actionString or false
urlDatafalseVariables to use for replacement
responsefalseCan be set to a Javascript object which will be returned automatically instead of requesting JSON from server {} or false
responseAsync(settings, callback)falseWhen 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
mockResponsefalseAlias of response
mockResponseAsyncfalseAlias of responseAsync
methodgetMethod for transmitting request to serverAny valid http method
dataTypeJSONExpected data type of response xml, json, jsonp, script, html, text
data{}POST/GET Data to Send with Request
\n\n

\n Callbacks\n

\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
ContextDescription
beforeSend(settings)initialized elementAllows modifying settings before request, or cancelling request
beforeXHR(xhrObject)Allows modifying XHR object for request
onRequest(promise, xhr)state contextCallback that occurs when request is made. Receives both the API success promise and the XHR request promise.
onResponse(response)state contextAllows 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\n
onSuccess(response, element, xhr)state contextCallback after successful response, JSON response must pass successTest
onComplete(response, element, xhr)state contextCallback on request complete regardless of conditions
onFailure(response, element)state contextCallback on failed response, or JSON response that fails successTest
onError(errorMessage, element, xhr)state contextCallback on server error from returned status code, or XHR failure.
onAbort(errorMessage, element, xhr)state contextCallback on abort caused by user clicking a link or manually cancelling request.
\n\n

\n Module\n

\n\n

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

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

Usage

\n\n
\n

Specifying Validation Rules

\n

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

\n
\n A validation object includes a list of form elements, and rules to validate each 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.\n
\n
\n $('.ui.form')\n .form({\n fields: {\n name : 'empty',\n gender : 'empty',\n username : 'empty',\n password : ['minLength[6]', 'empty'],\n skills : ['minCount[2]', 'empty'],\n terms : 'checked'\n }\n })\n ;\n
\n
or
\n
\n $('.ui.form')\n .form({\n fields: {\n name: {\n identifier: 'name',\n rules: [\n {\n type : 'empty',\n prompt : 'Please enter your name'\n }\n ]\n },\n skills: {\n identifier: 'skills',\n rules: [\n {\n type : 'minCount[2]',\n prompt : 'Please select at least two skills'\n }\n ]\n },\n gender: {\n identifier: 'gender',\n rules: [\n {\n type : 'empty',\n prompt : 'Please select a gender'\n }\n ]\n },\n username: {\n identifier: 'username',\n rules: [\n {\n type : 'empty',\n prompt : 'Please enter a username'\n }\n ]\n },\n password: {\n identifier: 'password',\n rules: [\n {\n type : 'empty',\n prompt : 'Please enter a password'\n },\n {\n type : 'minLength[6]',\n prompt : 'Your password must be at least {ruleValue} characters'\n }\n ]\n },\n terms: {\n identifier: 'terms',\n rules: [\n {\n type : 'checked',\n prompt : 'You must agree to the terms and conditions'\n }\n ]\n }\n }\n })\n ;\n
\n
\n

Tell Us About Yourself

\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n
Submit
\n
\n
\n \n
\n

Passing Parameters to Rules
New in 2.2.3

\n

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

\n

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.

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

Customizing Prompts

\n

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.

\n
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.
\n
You can set default messages for each validation rule type by modifying $fn.form.settings.prompt
\n

Prompt also supports custom templating with the following values replaced

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
{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
\n
\n $('.ui.form')\n .form({\n fields: {\n field1: {\n rules: [\n {\n type : 'empty'\n }\n ]\n },\n field2: {\n rules: [\n {\n type : 'exactly[dog]',\n prompt : '{name} is set to \"{value}\" that is totally wrong. It should be {ruleValue}'\n }\n ]\n },\n field3: {\n rules: [\n {\n type : 'exactly[cat]',\n prompt : function(value) {\n if(value == 'dog') {\n return 'I told you to put cat, not dog!';\n }\n return 'That is not cat';\n }\n }\n ]\n },\n }\n })\n ;\n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n
Submit
\n
\n
\n
\n
\n\n
\n

Matching Fields

\n

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.

\n

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

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

\n Validating Programmatically\n
Updated in 2.2.8
\n

\n

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.

\n

Please see the behaviors section for an explanation on syntax.

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
validate formValidates entire form and displays errors if necessary
is validReturns 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
\n
\n $('.ui.form')\n .form({\n fields: {\n email: 'empty',\n name: 'empty'\n }\n })\n ;\n if( $('.ui.form').form('is valid', 'email')) {\n // email is valid\n }\n if( $('.ui.form').form('is valid')) {\n // form is valid (both email and name)\n }\n
\n
\n\n

Rules

\n\n
\n

\n Validation Rules\n

\n

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

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

Empty

\n \n \n \n \n \n \n \n \n \n \n \n
emptyA field is empty
checkedA checkbox field is checked
\n\n

Content Type

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

Payment

\n \n \n \n \n \n \n \n \n \n \n \n \n \n
creditCardA field is a valid credit cardcreditCard
creditCard[types]A field matches a specified array of card typescreditCard[visa,mastercard,unionpay]
\n\n

Specified Content

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
containsA field contains text (case insensitive)contains[foo]
containsExactlyA field contains text (case sensitive)containsExactly[foo]
doesntContainA field doesn't contain text (case insensitive)doesntContain[foo]
doesntContainExactlyA field doesn't contain text (case sensitive)doesntContainExactly[foo]
isA field is a value (case insensitive)is[foo]
isExactlyA field is a value (case-sensitive)isExactly[foo]
notA field is not a value (case insensitive)not[foo]
notExactlyA field is not a value (case sensitive)notExactly[foo]
\n\n

Length

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
minLengthA field is less than a min lengthminLength[5]
exactLengthA field is exactly lengthexactLength[16]
maxLengthA field is less than a max lengthmaxLength[50]
\n\n

Matching Fields

\n \n \n \n \n \n \n \n \n \n \n \n \n \n
matchA field should match the value of another validation field, for example to confirm passwordsmatch[password]
differentA field should be different than another specified fielddifferent[choice]
\n\n

Selection Count

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
minCountA multiple select field contains at minimum (count) selectionsminCount[count]
exactCountA multiple select field contains exactly (count) selectionsexactCount[count]
maxCountA multiple select field contains at maximum (count) selectionsmaxCount[count]
\n
\n\n
\n

Adding Custom Rules

\n

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

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

Let's go ahead and get you signed up.

\n
\n \n \n
\n
\n \n Add Dog\n
\n
\n
\n
\n\n
\n

Built-in Events

\n

\n Form will automatically attach events to specially labeled form fields\n

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

Manipulating Forms

\n\n
\n

Reset / Clear Fields

\n

\n 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.\n

\n

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

\n
\n 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.\n
\n
\n Reset and clear will modify all form fields, not just those which have validation rules\n
\n
\n
\n
\n \n \n
\n
\n \n
\n \n
Gender
\n \n
\n
Male
\n
Female
\n
\n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n
Submit
\n
Reset
\n
Clear
\n
\n
\n\n
\n

Writing Values

\n

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

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

Getting Values

\n

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

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

Rule Examples

\n\n
\n

Empty

\n

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

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

Content Type

\n

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

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

Payment

\n

Inputs can validate credit cards and other payment types.

\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Card NameValidation NameTest Card Number
Visavisa4565340519181845
American Expressamex378282246310005
Mastercardmastercard5200828282828210
Discoverdiscover6011111111111117
Unionpayunionpay6240008631401148
JCBjcb3530111333300000
Diner's ClubdinersClub38520000023237
Maestromaestro6799990100000000019
Laserlaser630490017740292441
Visa ElectronvisaElectron4917300800000000
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
Submit
\n
\n
\n
\n $('.payment.example form')\n .form({\n on: 'blur',\n fields: {\n card: {\n identifier : 'card',\n rules: [\n {\n type : 'creditCard',\n prompt : 'Please enter a valid credit card'\n }\n ]\n },\n exactCard: {\n identifier : 'exact-card',\n rules: [\n {\n type : 'creditCard[visa,amex]',\n prompt : 'Please enter a visa or amex card'\n }\n ]\n }\n }\n })\n ;\n
\n
\n
\n

Matching Fields

\n

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

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

Length

\n

Inputs can match against length of content

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

Specified Content

\n

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

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

Selection Count

\n

Multiple selects can specify how many options should be allowed.

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

Form Examples

\n\n
\n

\n Adding Rules Programmatically
New in 2.2.11
\n

\n

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

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

Validating Dropdowns

\n

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

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

Using Server Name Attributes

\n

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.

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

\n Dependent Fields\n
New in 2.2
\n

\n

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.

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

Optional Fields

\n

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

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

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

\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n
Submit
\n
\n
\n
\n\n
\n

Setting Site Defaults

\n

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.\n

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

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

\n
\n \n \n
\n
Submit
\n
\n
\n
\n\n\n
\n

Displaying Error Messages

\n

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

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

Let's go ahead and get you signed up.

\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n
Submit
\n
\n
\n
\n\n
\n

Validating on Blur and other Events

\n

Validation messages can also appear inline. UI Forms automatically format labels with the class name prompt. These validation prompts are also set to appear on input change instead of form submission.

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

Let's go ahead and get you signed up.

\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n
Submit
\n
\n
\n\n
\n

Creating Custom Validation

\n

You can use multiple arbitrary rules to validate a form

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

Let's go ahead and get you signed up.

\n
\n \n \n
\n
\n \n Add Dog\n
\n
\n
\n
\n\n
\n\n
\n

Behaviors

\n\n All the following behaviors can be called using the syntax\n\n
\n $('.foo').form('behavior name', argumentOne, argumentTwo)\n
\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
submitSubmits selected form
is validReturns 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 formValidates 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
\n\n

Settings

\n\n
\n

\n Form Settings\n

\n

Form settings modify the form validation behavior

\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
SettingDefaultDescription
keyboardShortcutstrueAdds keyboard shortcuts for enter and escape keys to submit form and blur fields respectively
onsubmitEvent used to trigger validation. Can be either submit, blur or change.
revalidatetrueIf set to true will revalidate fields with errors on input change
delaytrueDelay from last typed letter to validate a field when using on: change or when revalidating a field.
inlinefalseAdds inline error on field validation error
transition\n scale\n Named transition to use when animating validation errors. Fade and slide down are available without including ui transitions
duration150Animation speed for inline prompt
\n
\n\n
\n

\n Form Prompts\n

\n

Settings to modify default form prompts

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

\n Callbacks\n

\n

Callbacks specify a function to occur after a specific behavior.

\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
SettingContextDescription
onValidfieldCallback on each valid field
onInvalidfieldCallback on each invalid field
onSuccess(event, fields)formCallback if a form is all valid
onFailure(formErrors, fields)formCallback if any form field is invalid
\n
\n
\n

\n Templates\n

\n

Templates are used to construct elements

\n
Templates are found in settings.template, to modify templates across all forms, modify $.fn.form.settings.templates to include your function. They must return HTML.
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
TemplateArgumentsDescription
errorErrors (Array)Constructs the contents of an error message
promptErrors (Array)Constructs an element to prompt the user to an invalid field
\n
\n\n
\n

\n DOM Settings\n

\n

DOM settings specify how this module should interface with the DOM

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

\n Debug Settings\n

\n

Debug settings controls debug output to the console

\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
SettingDefaultDescription
nameFormName used in debug logs
debugFalseProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseFalseProvides ancillary debug output to console
errors\n
\n errors : {\n method : 'The method you called is not defined.'\n }\n
\n
\n
\n
\n\n
\n" }, { "path": "server/documents/behaviors/state.html.eco", "content": "---\nlayout : 'default'\ncss : 'state'\nstandalone : true\n\nelement : 'State'\nelementType : 'draft'\n\ntitle : 'State'\ndescription : 'State allows elements to trigger actions on a server'\ntype : 'Draft'\n---\n\n\n\n\n<%- @partial('header', { tabs: { overview: 'Overview', usage: 'Usage', behaviors: 'Behaviors', settings: 'Settings' } }) %>\n\n
\n
\n\n
\n

Activate Elements Programmatically

\n

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

\n

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

\n
\n \n \n
\n \n
Click Me
\n
Disabled
\n
\n\n\n
\n\n
\n\n
\n\n
\n\n

Behavior

\n\n

All the following behaviors can be called using the syntax:

\n
\n $('.your.element')\n .state('behavior name', argumentOne, argumentTwo)\n ;\n
\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
BehaviorDescription
queryExecute query using existing State settings
add url data(url, data)Adds data to existing templated url and returns full url string
get requestGets promise for current State request
abortAborts current State request
resetRemoves loading and error state from element
was cancelledReturns whether last request was cancelled
was failureReturns whether last request was failure
was successfulReturns whether last request was successful
was completeReturns whether last request was completed
is disabledReturns whether element is disabled
is mockedReturns whether element response is mocked
is loadingReturns whether element is loading
set loadingSets loading state to element
set errorSets error state to element
remove loadingRemoves loading state to element
remove errorRemoves error state to element
get eventGets event that State request will occur on
get url encoded value(value)Returns encodeURIComponent value only if value passsed is not already encoded\n
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 cacheCreates new cache, removing all locally cached URLs
destroyRemoves State settings from the page and all events
\n\n\n
\n\n\n
\n

\n State\n

\n\n

\n Behavior\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
DefaultDescription
automatictrueWhether possible states should be determined automatically based on type of UI
syncfalseWhen set to true and state is used on multiple elements, state will be synced across all bound elements.
flashDuration1000Default duration to show text when using flash text.
contextfalseWhen set to a selector, will use a delegated pattern to bind events from this element.
\n\n

\n Request Settings\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
DefaultDescriptionPossible Values
actionfalseNamed State action for query, originally specified in $.fn.settings.stateString or false
urlfalseTemplated URL for query, will override specified actionString or false
urlDatafalseVariables to use for replacement
mockResponsefalseCan be set to a javascript object which will be returned automatically instead of requesting JSON from server {} or false
mockResponseAsync(settings, callback)falseWhen 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
methodgetMethod for transmitting request to serverpost, get
dataTypeJSONExpected data type of response xml, json, jsonp, script, html, text
data{}POST/GET Data to Send with Request
\n\n

\n Callbacks\n

\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
ContextDescription
beforeSend(settings)initialized elementAllows modifying settings before request, or cancelling request
beforeXHR(xhrObject)Allows modifying XHR object for request
onRequest(promise, xhr)state contextCallback that occurs when request is made. Receives both the state success promise and the xhr request promise.
onResponse(response)state contextAllows 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\n
onSuccess(response, element, xhr)state contextCallback after successful response, JSON response must pass successTest
onComplete(response, element, xhr)state contextCallback on request complete regardless of conditions
onFailure(response, element)state contextCallback on failed response, or JSON response that fails successTest
onError(errorMessage, element, xhr)state contextCallback on server error from returned status code, or XHR failure.
onAbort(errorMessage, element, xhr)state contextCallback on abort caused by user clicking a link or manually cancelling request.
\n\n

\n Module\n

\n\n

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

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

Introduction

\n\n

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

\n\n

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

\n\n
\n
\n
Infinite Scroll
\n
You want to start loading more content into a container when a user is partially finished scrolling through the content
\n
\n
\n
Lazy Loading Images
\n
You want to start loading an image just before it is visible to a user
\n
\n
\n
Reactive Content
\n
You want an element to change based on how far a user has scrolled
\n
\n
\n
Sticky Headers
\n
You want an element to fix itself to the viewport when it is passed, and return to its original static position afterwards
\n
\n
\n
Event Tracking
\n
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.
\n
\n
\n\n
\n\n
\n\n\n
\n\n

Usage

\n\n
\n

How To Use

\n

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

\n\n

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

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

Changing Callback Frequency

\n\n

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.

\n\n

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.

\n\n

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

\n\n
\n
\n
\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n
\n
\n
\n
\n
\n Clear\n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n
\n Event Log\n
\n
\n 
\n              
\n            
\n          
\n        
\n      
\n    
\n\n    
Callbacks
\n\n    
Callbacks are separated into two categories. Standard events will occur the first animation frame where the conditions evaluated to true.
\n\n    
\n      
Standard Events
\n      \n        \n          \n            \n            \n            \n          \n        \n        \n          \n            \n            \n            \n          \n          \n            \n            \n            \n          \n          \n            \n            \n            \n          \n          \n            \n            \n            \n          \n          \n            \n            \n            \n          \n          \n            \n            \n            \n          \n          \n            \n            \n            \n          \n        \n      
EventOccursPseudocode
\n              onOnScreen\n            \n              Any part of element is in current scroll viewport\n            \n              
screen.bottom >= element.top && screen.bottom <= element.bottom
\n            
\n              onOffScreen\n            \n              No part of element is in current scroll viewport\n            \n              
screen.bottom <= element.top || screen.top >= element.bottom
\n            
\n              onTopVisible\n            \n              Element's top edge has passed bottom of screen\n            \n              
screen.bottom >= element.top
\n            
\n              onTopPassed\n            \n              Element's top edge has passed top of the screen\n            \n              
screen.top >= element.top
\n            
\n              onBottomVisible\n            \n              Element's bottom edge has passed bottom of screen\n            \n              
screen.bottom >= element.top
\n            
\n              onPassing\n            \n              Any part of an element is visible on screen\n            \n              
screen.bottom >= element.top && screen.top < element.bottom
\n            
\n              onBottomPassed\n            \n              Element's bottom edge has passed top of screen\n            \n              
screen.top >= element.bottom
\n            
\n    
\n    
\n      
Grouped Events
\n      
onPassed allows you to specify a collection of callbacks that occur after different percentages or pixels of an element are passed
\n      \n        \n          \n            \n            \n            \n          \n        \n        \n          \n            \n            \n            \n          \n        \n      
EventOccursExample
\n              onPassed {}\n            \n              A distance from the top of an element's content has been passed, either as a percentage or in pixels\n            \n              
\n              onPassed: {\n                40: function() {\n                  // do something when having passed 40 pixels.\n                },\n                '80%': function() {\n                  // do something at 80%\n                }\n              }\n              
\n            
\n    
\n\n    
\n\n      
Reverse Events
\n      
Reverse events will occur under the same conditions but as a user scrolls back up the page.
\n      \n        \n          \n            \n            \n            \n          \n        \n        \n          \n            \n            \n            \n          \n          \n            \n            \n            \n          \n          \n            \n            \n            \n          \n          \n            \n            \n            \n          \n          \n            \n            \n            \n          \n        \n      
EventOccursPseudocode
\n              onTopVisibleReverse\n            \n              Element's top edge has not passed bottom of screen\n            \n              
screen.bottom >= element.top
\n            
\n              onTopPassedReverse\n            \n              Element's top edge has not passed top of the screen\n            \n              
screen.top >= element.top
\n            
\n              onBottomVisibleReverse\n            \n              Element's bottom edge has not passed bottom of screen\n            \n              
screen.bottom >= element.top
\n            
\n              onPassingReverse\n            \n              Element's top has not passed top of screen but bottom has\n            \n              
screen.bottom >= element.top && screen.top < element.bottom
\n            
\n              onBottomPassedReverse\n            \n              Element's bottom edge has not passed top of screen\n            \n              
screen.top >= element.bottom
\n            
\n    
\n\n    
Behaviors
\n\n    
\n\n      
Visibility includes several useful behaviors for interacting with the component
\n      \n        \n          \n            \n            \n          \n        \n        \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n        \n      
BehaviorUsage
\n              disable callbacks\n            \n              Disable callbacks temporarily. This is useful if you need to adjust scroll position and do not want to trigger callbacks during the position change.\n            
\n              enable callbacks\n            \n              Re-enable callbacks\n            
\n              is on screen\n            \n              Returns whether element is on screen\n            
\n              is off screen\n            \n              Returns whether element is off screen\n            
\n              get pixels passed\n            \n              Returns number of pixels passed in current element from top of element\n            
\n              get element calculations\n            \n              Returns element calculations as object\n            
\n              get screen calculations\n            \n              Returns screen calculations as object\n            
\n              get screen size\n            \n              Returns screen size as object\n            
\n    
\n\n\n  
\n\n  
\n\n    
Examples
\n\n    
\n      
Infinite Scroll
\n      
As an alternative to pagination you can use onBottomVisible to load content automatically when the bottom of a container is reached.
\n\n      
\n        $('.infinite.example .demo.segment')\n          .visibility({\n            once: false,\n            // update size when new content loads\n            observeChanges: true,\n            // load content on bottom edge visible\n            onBottomVisible: function() {\n              // loads a max of 5 times\n              window.loadFakeContent();\n            }\n          })\n        ;\n      
\n\n      
\n        
Infinite Scroll Example
\n        \n        
\n        \n        
\n        \n        
\n        \n        
\n        
\n          Adding more content...\n        
\n      
\n    
\n\n    
\n      
Lazy Loading Images
\n      
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.
\n\n      
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.
\n\n      
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
\n\n      
\n        $('.demo.items .image img')\n          .visibility({\n            type       : 'image',\n            transition : 'fade in',\n            duration   : 1000\n          })\n        ;\n      
\n      
\n        
\n          
\n            \n          
\n          
\n            
Elliot Fu
\n            \n            
Add Friend
\n            
View 
\n          
\n        
\n        
\n          
\n            \n          
\n          
\n            
Helen Troy
\n            \n            
Add Friend
\n            
View 
\n          
\n        
\n        
\n          
\n            \n          
\n          
\n            
Jenny Hess
\n            \n            
Add Friend
\n            
View 
\n          
\n        
\n        
\n          
\n            \n          
\n          
\n            
Veronika Ossi
\n            \n            
Add Friend
\n            
View 
\n          
\n        
\n        
\n          
\n            \n          
\n          
\n            
Stevie
\n            \n            
Add Friend
\n            
View 
\n          
\n        
\n        
\n          
\n            \n          
\n          
\n            
Steve Jobes
\n            \n            
Add Friend
\n            
View 
\n          
\n        
\n        
\n          
\n            \n          
\n          
\n            
Ade
\n            \n            
Add Friend
\n            
View 
\n          
\n        
\n        
\n          
\n            \n          
\n          
\n            
Chris
\n            \n            
Add Friend
\n            
View 
\n          
\n        
\n        
\n          
\n            \n          
\n          
\n            
Joe Henderson
\n            \n            
Add Friend
\n            
View 
\n          
\n        
\n        
\n          
\n            \n          
\n          
\n            
Laura
\n            \n            
Add Friend
\n            
View 
\n          
\n        
\n      
\n    
\n    
\n      
Gradual Changes
\n      
Each callback receives all calculated values as its first parameter, allowing you to adjust an element using 
\n\n      
\n        $('.changing.example .demo.segment')\n          .visibility({\n            once       : false,\n            continuous : true,\n            onPassing  : function(calculations) {\n              var newColor = 'rgba(0, 0, 0, ' + calculations.percentagePassed +')';\n              $(this)\n                .css('background-color', newColor)\n              ;\n            }\n          })\n        ;\n      
\n      
\n    
\n\n\n    
\n      
Fixing Content To Viewport
\n      
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.
\n      
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.
\n      
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
\n      
\n        You may need to adjust your fixed content's z-index to ensure it appears above other page content.\n      
\n      
\n        $('.overlay.example .overlay')\n          .visibility({\n            type   : 'fixed',\n            offset : 15 // give some space from top of screen\n          })\n        ;\n      
\n      
\n      .visibility.example .overlay {\n        background-color: #FFFFFF;\n        padding: 0em;\n        box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);\n        transition: all 0.5s ease;\n        background: transparent;\n      }\n      /* change style */\n      .visibility.example .fixed.overlay {\n        position: fixed;\n        padding: 1em;\n        box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);\n      }\n      
\n      
\n        
\n          \n             Menu\n          \n          Option 1\n          Option 2\n          Option 3\n        
\n      
\n      
\n      \n      
\n      \n      
\n      \n      
\n      \n      
\n      \n      
\n      \n      
\n      \n      
\n      \n      
\n      \n    
\n  
\n\n\n  
\n\n    
Settings
\n\n    
\n\n      
\n        Functionality\n        
Settings to configure visibility behavior
\n      
\n      \n        \n          \n          \n          \n        \n        \n          \n            \n            \n            \n          \n          \n            \n            \n            \n          \n          \n            \n            \n            \n          \n          \n            \n            \n            \n          \n          \n            \n            \n            \n          \n          \n            \n            \n            \n          \n          \n            \n            \n            \n          \n          \n            \n            \n            \n          \n          \n            \n            \n            \n          \n          \n            \n            \n            \n          \n          \n            \n            \n            \n          \n          \n            \n            \n            \n          \n          \n            \n            \n            \n          \n          \n            \n            \n            \n          \n          \n            \n            \n            \n          \n        \n      
SettingDefaultDescription
oncetrueWhen set to false a callback will occur each time an element passes the threshold for a condition.
continuousfalseWhen set to true a callback will occur anytime an element passes a condition  not just immediately after the threshold is met.
typefalseSet to image to load images when on screen. Set to fixed to add class name fixed when passed.
initialChecktrueWhether visibility conditions should be checked immediately on init
contextwindowThe scroll context visibility should use.
refreshOnLoadtrueWhether visibility conditions should be checked on window load. This ensures that after images load content positions will be updated correctly.
refreshOnResizetrueWhether visibility conditions should be checked on window resize. Useful when content resizes causes continuous changes in position
checkOnRefreshtrueWhether visibility conditions should be checked on calls to refresh. These calls can be triggered from either resize, load or manually calling $('.foo').visibility('refresh')
zIndex1Specify a z-index when using type: 'fixed'. 
New in 2.2
offset0Value that context scrollTop should be adjusted in pixels. Useful for making content appear below content fixed to the page.
includeMarginfalseWhether element calculations should include its margin
throttlefalseWhen set to an integer, scroll position will be debounced using this ms value. false will debounce with requestAnimationFrame.
observeChangestrueWhether to automatically refresh content when changes are made to the element's DOM subtree 
transitionfalseWhen using type: image allows you to specify transition when showing a loaded image
duration1000When using type: image allows you to specify transition duration
\n    
\n\n\n    
\n\n      
Visibility Callbacks
\n      
Callbacks that occur on named visibility events
\n\n      \n        \n          \n            \n            \n            \n          \n        \n        \n          \n            \n            \n            \n          \n          \n            \n            \n            \n          \n          \n            \n            \n            \n          \n          \n            \n            \n            \n            \n          \n          \n            \n            \n            \n          \n          \n            \n            \n            \n          \n          \n            \n            \n            \n          \n          \n            \n            \n            \n          \n          \n            \n            \n            \n            \n          \n          \n            \n            \n            \n          \n        \n      
ContextDescription
onTopVisible$elementElement's top edge has passed bottom of screen
onTopPassed$elementElement's top edge has passed top of the screen
onBottomVisible$elementElement's bottom edge has passed bottom of screen
onPassing$elementAny part of an element is visible on screen
onBottomPassed$elementElement's bottom edge has passed top of screen
onTopVisibleReverse$elementElement's top edge has not passed bottom of screen
onTopPassedReverse$elementElement's top edge has not passed top of the screen
onBottomVisibleReverse$elementElement's bottom edge has not passed bottom of screen
onPassingReverse$elementElement's top has not passed top of screen but bottom has
onBottomPassedReverse$elementElement's bottom edge has not passed top of screen
\n    
\n\n    
\n      
\n        Image Callbacks\n        
New in 2.2
\n      
\n      
Callbacks that occur only when using type: 'fixed'
\n\n      \n        \n          \n            \n            \n            \n          \n        \n        \n          \n            \n            \n            \n          \n          \n            \n            \n            \n          \n        \n      
ContextDescription
onLoadimgOccurs after an image has completed loading
onAllLoadedlast loaded imgOccurs after all img initialized at the same time have loaded.
\n    
\n    
\n\n      
\n        Fixed Callbacks\n        
New in 2.2
\n      
\n      
Callbacks that occur only when using type: 'fixed'
\n\n      \n        \n          \n            \n            \n            \n          \n        \n        \n          \n            \n            \n            \n          \n          \n            \n            \n            \n          \n        \n      
ContextDescription
onFixed$elementOccurs after element has been assigned position fixed
onUnfixed$elementOccurs after element has been removed from fixed position
\n    
\n\n    
\n\n      
Utility Callbacks
\n      
Callbacks that occur on named visibility events
\n\n      \n        \n          \n            \n            \n            \n          \n        \n        \n          \n            \n            \n            \n          \n          \n            \n            \n            \n          \n        \n      
ContextDescription
onUpdate(calculations)$elementOccurs each time an elements calculations are updated
onRefresh$elementOccurs whenever element's visibility is refreshed
\n    
\n\n    
\n      
\n        DOM Settings\n        
DOM settings specify how this module should interface with the DOM
\n      
\n      \n        \n          \n          \n          \n        \n        \n          \n            \n            \n            \n          \n          \n            \n            \n            \n          \n        \n      
SettingDefaultDescription
namespacevisibilityEvent namespace. Makes sure module teardown does not effect other events attached to an element.
className\n              
\n              className : {\n                fixed     : 'fixed',\n              }\n              
\n            		Class names used to attach style to state
\n    
\n\n    
\n\n      
\n        Debug Settings\n        
Debug settings controls debug output to the console
\n      
\n\n      \n        \n          \n          \n          \n        \n        \n          \n            \n            \n            \n          \n          \n            \n            \n            \n          \n          \n            \n            \n            \n          \n          \n            \n            \n            \n          \n          \n            \n            \n            \n          \n          \n            \n            \n          \n        \n      
SettingDefaultDescription
nameVisibilityName used in debug logs
silentFalseSilences all console output including error messages, regardless of other debug settings.
debugFalseProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
errors\n              
\n              error : {\n                method : 'The method you called is not defined.',\n              }\n              
\n            
\n    
\n\n  
\n\n\n
\n"
  },
  {
    "path": "server/documents/cla.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'cla'\ntitle       : \"Contributor License Agreement\"\ndescription : 'Contribute to Semantic UI responsibly'\ntype        : 'Legal'\n---\n\n<%- @partial('header', { tabs: {  individual: 'Individual', entity: 'Entity' } }) %>\n\n
\n  
\n    \n    
\n      
What's in a Contributor License Agreement (CLA)?
\n      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.\n    
\n  
\n  
\n    
Semantic UI Individual Contributor License Agreement
\n\n    
Thank you for your interest in contributing to Semantic UI (\"We\" or \"Us\").
\n\n    
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.
\n\n    
1. Definitions
\n\n    
\"You\" means the individual who Submits a Contribution to Us.
\n\n    
\"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 .
\n\n    
\"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.
\n\n    
\"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.
\n\n    
\"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.\"
\n\n    
\"Submission Date\" means the date on which You Submit a Contribution to Us.
\n\n    
\"Effective Date\" means the date You execute this Agreement or the date You first Submit a Contribution to Us, whichever is earlier.
\n\n    
\"Media\" means any portion of a Contribution which is not software.
\n\n    
2. Grant of Rights
\n\n    
2.1 Copyright License
\n\n    
(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.
\n\n    
(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.
\n\n\n    
2.2 Patent License
\n\n    
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.
\n\n    
2.3 Outbound License
\n\n    
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).
\n\n\n    
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).
\n\n    
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.
\n\n    
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.
\n\n    
2.6 Reservation of Rights. Any rights not expressly  licensed under this section are expressly reserved by You.
\n\n    
3. Agreement
\n\n    
You confirm that:
\n\n    
(a) You have the legal authority to enter into this Agreement.
\n\n    
(b) You  own the Copyright and patent claims covering the Contribution which are required to grant the rights under Section 2.
\n\n    
(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.
\n\n    
(d) You have followed the instructions in , if You do not own the Copyright in the entire work of authorship Submitted.
\n\n    
4. Disclaimer
\n\n    
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.
\n\n    
5. Consequential Damage Waiver
\n\n    
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.
\n\n    
6. Miscellaneous
\n\n    
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.
\n\n    
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.
\n\n    
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.
\n\n    
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.
\n\n    
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.
\n  
\n  
\n    
Semantic UI Entity Contributor License Agreement
\n    
Thank you for your interest in contributing to Semantic UI (\"We\" or \"Us\").
\n\n    
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.
\n\n    
1. Definitions
\n\n    
\"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.
\n\n    
\"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 .
\n\n    
\"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.
\n\n    
\"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.
\n\n    
\"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.\"
\n\n    
\"Submission Date\" means the date on which You Submit a Contribution to Us.
\n\n    
\"Effective Date\" means the date You execute this Agreement or the date You first Submit a Contribution to Us, whichever is earlier.
\n\n    
\"Media\" means any portion of a Contribution which is not software.
\n\n    
2. Grant of Rights
\n\n    
2.1 Copyright License
\n\n    
(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.
\n\n    
(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.
\n\n\n    
2.2 Patent License
\n\n    
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.
\n\n    
2.3 Outbound License
\n\n    
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).
\n\n\n    
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).
\n\n    
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.
\n\n    
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.
\n\n    
2.6 Reservation of Rights. Any rights not expressly  licensed under this section are expressly reserved by You.
\n\n    
3. Agreement
\n\n    
You confirm that:
\n\n    
(a) You have the legal authority to enter into this Agreement.
\n\n    
(b) You or Your Affiliates own the Copyright and patent claims covering the Contribution which are required to grant the rights under Section 2.
\n\n    
(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.
\n\n\n    
(d) You have followed the instructions in , if You do not own the Copyright in the entire work of authorship Submitted.
\n\n    
4. Disclaimer
\n\n    
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.
\n\n    
5. Consequential Damage Waiver
\n\n    
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.
\n\n    
6. Miscellaneous
\n\n    
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.
\n\n    
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.
\n\n    
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.
\n\n    
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.
\n\n    
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.
\n  
\n\n  \n\n
\n"
  },
  {
    "path": "server/documents/collections/breadcrumb.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'breadcrumb'\nstandalone  : true\n\nelement     : 'breadcrumb'\nelementType : 'collection'\n\ntitle       : 'Breadcrumb'\ndescription : 'A breadcrumb is used to show hierarchy between content'\ntype        : 'UI Collection'\n\nthemes      : ['Default']\n---\n\n<%- @partial('header') %>\n\n\n\n\n\n
\n\n  
Types
\n\n  
\n    
Breadcrumb
\n    
A standard breadcrumb
\n    
\n      Home\n      
 / 
\n      Store\n      
 / 
\n      
T-Shirt
\n    
\n  
\n\n  
\n    
\n      Home\n      \n      Store\n      \n      
T-Shirt
\n    
\n  
\n\n\n  
Content
\n\n  
\n    
Divider
\n    
A breadcrumb can contain a divider to show the relationship between sections, this can be formatted as an icon or text.
\n    
\n      Home\n      /\n      Registration\n      /\n      
Personal Information
\n    
\n  
\n\n  
\n    
\n      Home\n      \n      Registration\n      \n      
Personal Information
\n    
\n  
\n\n\n  
\n    
Section
\n    
A breadcrumb can contain sections that can either be formatted as a link or text
\n    
\n      
Home
\n      
 / 
\n      
Search
\n    
\n  
\n\n  
\n    
Link
\n    
A section may be linkable or contain a link
\n    
\n      Home\n      
 / 
\n      
Search for: paper towels
\n    
\n  
\n\n  
States
\n\n  
\n    
Active
\n    
A section can be active
\n    
\n      Products\n      
 / 
\n      
Paper Towels
\n    
\n  
\n\n\n  
Variations
\n\n  
\n    
Size
\n    
A breadcrumb can vary in size
\n    
\n      Home\n      \n      Registration\n      \n      
Personal Information
\n    
\n  
\n  
\n    
\n      Home\n      \n      Registration\n      \n      
Personal Information
\n    
\n  
\n  
\n    
\n      Home\n      \n      Registration\n      \n      
Personal Information
\n    
\n  
\n  
\n    
\n      Home\n      \n      Registration\n      \n      
Personal Information
\n    
\n  
\n  
\n    
\n      Home\n      \n      Registration\n      \n      
Personal Information
\n    
\n  
\n  
\n    
\n      Home\n      \n      Registration\n      \n      
Personal Information
\n    
\n  
\n  
\n    
\n      Home\n      \n      Registration\n      \n      
Personal Information
\n    
\n  
\n\n
\n"
  },
  {
    "path": "server/documents/collections/form.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'form'\nstandalone  : true\n\nelement     : 'form'\nelementType : 'collection'\n\ntitle       : 'Form'\ndescription : 'A form displays a set of related user input fields in a structured way'\ntype        : 'UI Collection'\n\nthemes      : ['Default', 'Flat', 'Chubby', 'GitHub']\n---\n\n\n\n<%- @partial('header') %>\n\n
\n\n  
Types
\n\n  
\n    
Form
\n    
A form
\n    
\n      
If you are looking for validation you should check out form behaviors.
\n    
\n    
\n      
\n        \n        \n      
\n      
\n        \n        \n      
\n      
\n        
\n          \n          \n        
\n      
\n      \n    
\n  
\n  
\n    \n    
\n      
Shipping Information
\n      
\n        \n        
\n          
\n            \n          
\n          
\n            \n          
\n        
\n      
\n      
\n        \n        
\n          
\n            \n          
\n          
\n            \n          
\n        
\n      
\n      
\n        
\n          \n          \n        
\n        
\n          \n          
\n            \n            \n            
Select Country
\n            <%- @partial('examples/single/flag-menu') %>\n          
\n        
\n      
\n      
Billing Information
\n      
\n        \n        
\n          \n          
Type
\n          \n          
\n            
\n              \n              Visa\n            
\n            
\n              \n              American Express\n            
\n            
\n              \n              Discover\n            
\n          
\n        
\n      
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n        
\n          \n          
\n            
\n              \n            
\n            
\n              \n            
\n          
\n        
\n      
\n\n      
Receipt
\n\n      
\n        \n        
\n          \n          \n          
Saved Contacts
\n          
\n            
\n              \n              Jenny Hess\n            
\n            
\n              \n              Elliot Fu\n            
\n            
\n              \n              Stevie Feliciano\n            
\n            
\n              \n              Christian\n            
\n            
\n              \n              Matt\n            
\n            
\n              \n              Justen Kitsune\n            
\n          
\n        
\n      
\n\n      
\n        
\n          
\n            \n            \n          
\n        
\n      
\n      
Submit Order
\n    
\n  \n\n  
Content
\n\n  
\n    
Field
\n    
A field is a form element containing a label and an input
\n    
\n      
\n        \n        \n      
\n    
\n  
\n\n  
\n    
Fields
\n    
A set of fields can appear grouped together
\n    
\n      Field groups automatically receive responsive styling, swapping to one field per row on mobile devices.\n    
\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n        
\n        
\n          \n        
\n      
\n    
\n  
\n\n  
\n    
Text Area
\n    
A textarea can be used to allow for extended user input.
\n    
\n      To specify an approximate text area size use the rows attribute.\n    
\n    
\n      
\n        \n        \n      
\n      
\n        \n        \n      
\n    
\n  
\n\n  
\n    
Checkbox
\n    
A form can contain a checkbox
\n    
\n      UI checkbox are special, styled versions of standard HTML checkboxes.\n    
\n    
\n    $('.ui.checkbox')\n      .checkbox()\n    ;\n    
\n    
\n      
\n        
\n          \n          \n        
\n      
\n      
\n        
\n          \n          \n        
\n        \n      
\n      
\n        
\n          \n          \n        
\n      
\n    
\n  
\n\n  
\n    
Radio Checkbox
\n    
A form can include a radio checkbox
\n    
\n    $('.ui.radio.checkbox')\n      .checkbox()\n    ;\n    
\n    
\n      
\n        \n        
\n          
\n            \n            \n          
\n        
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          
\n            \n            \n          
\n        
\n      
\n      
\n        \n        
\n          
\n            \n            \n          
\n        
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          
\n            \n            \n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Dropdown
\n    
A form can contain a dropdown
\n    
\n      Dropdown will automatically convert select elements initialized as dropdowns. For more details check out the dropdown docs\n    
\n    
\n    $('select.dropdown')\n      .dropdown()\n    ;\n    
\n    
\n      
\n          \n          
\n              \n              \n              
Gender
\n              
\n                  
Male
\n                  
Female
\n              
\n          
\n      
\n    
\n  
\n  
\n    
\n      
\n        \n        \n      
\n    
\n  
\n\n  
\n    
Multiple Select
\n    
A multiple select is used to include several choices with one form field
\n    
\n      
\n        \n        \n      
\n    
\n  
\n\n  
\n    
HTML Select
\n    
If Javascript or ui dropdown are not a viable option, forms also can provide basic styling for select elements
\n    
\n      
\n        \n      
\n    
\n  
\n\n  
\n    
Message
\n    
A form can contain a message
\n    
\n      Any info, error, success, or warning message blocks found inside a form are hidden by default.\n    
\n    
\n      
\n        
We had some issues
\n        
    \n          
  • Please enter your first name
    • \n          
  • Please enter your last name
    • \n        
\n      
\n    
\n  
\n\n  
States
\n\n  
\n    
Loading
\n    
If a form is in loading state, it will automatically show a loading indicator.
\n\n    
\n      
\n        \n        \n      
\n      
Submit
\n    
\n  
\n\n  
\n    
Success
\n    
If a form is in an success state, it will automatically show any success message blocks.
\n    
\n      
\n        \n        \n      
\n      
\n        
Form Completed
\n        
You're all signed up for the newsletter.
\n      
\n      
Submit
\n    
\n  
\n\n  
\n    
Error
\n    
If a form is in an error state, it will automatically show any error message blocks.
\n    
\n      
\n        \n        \n      
\n      
\n        
Action Forbidden
\n        
You can only sign up for an account once with a given e-mail address.
\n      
\n      
Submit
\n    
\n  
\n\n  
\n    
Warning
\n    
If a form is in warning state, it will automatically show any warning message block.
\n\n    
\n      
\n        \n        \n      
\n      
\n        
Could you check something!
\n        
    \n          
  • That e-mail has been subscribed, but you have not yet clicked the verification link in your e-mail.
    • \n        
\n      
\n      
Submit
\n    
\n  
\n\n\n  
\n    
Field Error
\n    
Individual fields may display an error state
\n\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
\n        \n        
\n          
Select
\n          \n          \n          
\n            
Male
\n            
Female
\n          
\n        
\n      
\n      
\n        
\n          \n          \n        
\n      
\n    
\n  
\n\n  
\n    
Disabled Field
\n    
Individual fields may be disabled
\n\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n    
\n  
\n  
\n    
Read-Only Field
\n    
Individual fields may be read only
\n\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n    
\n  
\n\n  
Form Variations
\n\n  
\n    
Size
\n    
A form can vary in size
\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n  
\n  
\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n  
\n  
\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n  
\n  
\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n  
\n  
\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n  
\n  
\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n  
\n  
\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n  
\n\n  
\n    
Equal Width Form
\n    
Forms can automatically divide fields to be equal width
\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n    
\n  
\n\n  
\n    
Inverted
\n    
A form on a dark background may have to invert its color scheme
\n\n    
\n      
\n        
\n          
\n            \n            \n          
\n          
\n            \n            \n          
\n        
\n        
\n          
\n            \n            \n          
\n        
\n        
Submit
\n      
\n    
\n  
\n\n\n  
Field Variations
\n\n  
\n    
Inline Field
\n    
A field can have its label next to instead of above it.
\n    
\n      
\n        \n        \n      
\n    
\n  
\n\n  
\n    
Width
\n    
A field can specify its width in grid columns
\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
\n        
\n          \n        
\n        
\n          \n        
\n        
\n          \n        
\n      
\n      
\n        
\n          \n        
\n        
\n          \n        
\n        
\n          \n        
\n      
\n    
\n  
\n\n  
\n    
Required
\n    
A field can show that input is mandatory
\n    
\n        
\n          \n          \n        
\n        
\n          
\n            \n            \n          
\n        
\n    
\n  
\n\n  
Group Variations
\n\n  
\n    
Evenly Divided
\n    
Fields can have their widths divided evenly
\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n    
\n  
\n\n  
\n    
Grouped Fields
\n    
Fields can show related choices
\n    
\n      
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          
\n            \n            \n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Equal Width Fields
\n    
Fields can automatically divide fields to be equal width
\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n    
\n  
\n\n\n  
\n    
Inline Fields
\n    
Multiple fields may be inline in a row
\n    
\n      
\n        \n        
\n          \n        
\n        
\n          \n        
\n        
\n          \n        
\n      
\n    
\n  
\n\n  
\n    
\n      
\n        \n        
\n          
\n            \n            \n          
\n        
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          
\n            \n            \n          
\n        
\n      
\n    
\n  
\n\n\n
\n"
  },
  {
    "path": "server/documents/collections/grid.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'Grid'\nstandalone  : true\n\nelement     : 'grid'\nelementType : 'collection'\n\ntitle       : 'Grid'\ndescription : 'A grid is used to harmonize negative space in a layout'\ntype        : 'UI Collection'\n\nthemes      : ['Default']\n---\n\n\n\n<%- @partial('header', { tabs: { overview: 'Overview', definition: 'Definition' } }) %>\n\n
\n\n  
\n\n    
Introduction
\n\n    
\n      
Grids
\n      
A grid is a structure with a long history used to align negative space in designs.
\n      
Using a grid makes content appear to flow more naturally on your page.
\n      
\n        \n        \n      
\n      \n      
\n        
\n        
\n        
\n        
\n      
\n    
\n\n    
\n      
Columns
\n      
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.
\n      
All grid systems choose an arbitrary column count to allow per row. Semantic's default theme uses 16 columns.
\n\n      
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
\n\n      
The default column count, and other arbitrary features of grids can be changed by adjusting Semantic UI's underlying theming variables.
\n\n      
\n        
\n        
\n        
\n        
\n        
\n        
\n        
\n      
\n    
\n    
\n      
Rows
\n      
Rows are groups of columns which are aligned horizontally.
\n      
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.\n      
\n      
After each group of columns vertical spacing is added to separate each group of columns, creating vertical rhythm.\n      
\n        
\n          
\n          
\n          
\n        
\n        
\n        
\n        
\n        
\n      
\n    
\n\n    
\n      
Gutters
\n      
Grid columns are separated by areas of white space referred to as \"gutters\". Gutters improve legibility by providing, negative space between page elements.
\n      
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.
\n      
\n        
\n          
\n          
\n          
\n        
\n        
\n          
\n          
\n          
\n          
\n          
\n          
\n          
\n          
\n        
\n      
\n      
\n        
\n          
\n          
\n          
\n        
\n        
\n          
\n          
\n          
\n          
\n          
\n          
\n          
\n          
\n        
\n      
\n    
\n\n    
\n      
Negative Margins
\n      
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.
\n      
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.
\n      
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.
\n       
Button before grid
\n       
\n        
\n        
\n        
\n      
\n      
\n        
\n      
\n      
Button after grid
\n    
\n\n\n    
\n      
Page Grids
\n      
Grids are fluid and will automatically flow in size to take the maximum available width.
\n      
Containers are elements designed to limit page content to a reasonable maximum width for display based on the size of the user's screen.
\n      
Using a ui grid container is the best way to include top-level page content inside a grid.
\n      
\n        
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.
\n      
\n    
\n\n\n    
Columns
\n\n    
\n      
Automatic Flow
\n      
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.
\n\n      
\n        
\n        
\n        
\n        
\n        
\n        
\n        
\n        
\n      
\n    
\n    
\n      
Column Content
\n      
Since columns use padding to create gutters, content stylings should not be applied directly to columns, but to elements inside of columns.
\n      
\n        
\n          
\n            \n          
\n        
\n        
\n          
\n            \n          
\n        
\n        
\n          
\n            \n          
\n        
\n      
\n    
\n\n    
\n      
Column Widths
\n      
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
\n      
\n        
\n        
\n        
\n        
\n        
\n        
\n        
\n        
\n        
\n      
\n    
\n\n    
Rows
\n\n    
\n      
Grouping
\n      
Row wrappers allow you to apply variations to a group of columns.
\n      
\n        
\n          
\n        
\n        
\n        
\n        
\n        
\n      
\n    
\n    
\n      
Clearing Content
\n      
Row wrappers will automatically clear previous columns, making them useful when using floated variations.
\n      
\n        
\n          
\n          
\n        
\n        
\n          
\n          
\n          
\n        
\n      
\n    
\n\n    
\n      
Special Grids
\n      
Additionally, some types of grids, like divided or celled require row wrappers to apply formatting correctly.
\n\n      
\n        
\n          
\n            \n          
\n          
\n            \n          
\n          
\n            \n          
\n        
\n        
\n          
\n            \n          
\n          
\n            \n          
\n          
\n            \n          
\n        
\n      
\n    
\n\n    
Varying Grids
\n\n\n    
\n      
Nesting Grids
\n      
Grids can be placed inside of other grids, letting you sub-divide columns.
\n\n      
\n        
\n          
\n            
\n            
\n            
\n          
\n        
\n        
\n        
\n        
\n          
\n            
\n            
\n          
\n        
\n      
\n    
\n\n    
\n      
Colored
\n      
Grids can use named colors variations to add background colors, but only with padded grid that do not include negative margins.
\n      
To include a color that is not available in the default palette its perfectly fine to use CSS
\n      
\n        
\n          
\n            Olive\n          
\n          
\n            Black\n          
\n        
\n        
\n          
Custom Row
\n        
\n        
\n          
\n            Black\n          
\n          
\n            Olive\n          
\n        
\n      
\n    
\n\n\n    
\n      
Automatic Column Count
\n      
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.
\n      
\n        
\n        
\n        
\n        
\n          
\n          
\n        
\n      
\n    
\n    
\n      
Centering Content
\n      
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.\n      
\n      
\n        
\n        
\n          
\n          
\n        
\n      
\n    
\n\n    
\n      
Significant Word Order
\n      
Grids include many variations for adjusting things like vertical or horizontal alignment, text alignment, or default gutter sizes.
\n      
Some multi-word variations, like left floated or right aligned are word-order dependent and require you to use adjacent class names.
\n\n      
\n        
\n          
\n            Left floated right aligned column\n          
\n        
\n        
\n          
\n            Right floated left aligned column\n          
\n        
\n        
\n          
\n            
\n            Center aligned row\n            
\n          
\n          
\n            
\n            Center aligned row\n            
\n          
\n        
\n        
\n          
\n            Right Aligned Grid\n          
\n        
\n      
\n    
\n\n    
Responsive Grids
\n\n    
\n      
Containers
\n      
A container can be used alongside a grid to provide a responsive, fixed width container for wrapping the contents of a page.
\n      
\n        
\n        
\n        
\n        
\n        
\n        
\n        
\n        
\n      
\n    
\n\n    
\n      
Stackable
\n      
A stackable grid will automatically stack rows to a single columns on mobile devices
\n      
\n        
\n        
\n        
\n        
\n      
\n    
\n    
\n      
Reverse Order
\n      
Semantic includes special reversed variations that allow you to reverse the order of columns or rows by device
\n      
\n        
\n          First\n        
\n        
\n          Second\n        
\n        
\n          Third\n        
\n      
\n    
\n\n    
\n      
Doubling
\n      
A doubling grid will double column widths for each device jump.
\n      
\n        
\n          
\n          
\n          
\n          
\n          
\n          
\n          
\n          
\n        
\n        
\n          
\n          
\n          
\n          
\n          
\n          
\n        
\n        
\n          
\n          
\n          
\n          
\n        
\n      
\n    
\n    
\n      
Manual Tweaks
\n      
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.\n      
\n        
\n          
\n        
\n        
\n        
\n        
\n        
\n        
\n      
\n    
\n\n  
\n\n  
\n\n    
Types
\n\n    
\n      
\n        Grid\n        Flexbox\n      
\n      
A basic grid
\n      
\n        
\n        
\n        
\n        
\n        
\n        
\n        
\n        
\n        
\n        
\n        
\n        
\n        
\n        
\n        
\n        
\n      
\n    
\n\n    
\n      
\n        Divided\n        Requires Rows\n      
\n      
A grid can have dividers between its columns
\n      
\n        
\n          
\n            \n          
\n          
\n            \n          
\n          
\n            \n          
\n        
\n        
\n          
\n            \n          
\n          
\n            \n          
\n          
\n            \n          
\n        
\n      
\n    
\n\n    
\n      
\n        Vertically Divided\n        Requires Rows\n      
\n      
A grid can have dividers between rows
\n      
\n        
\n          
\n            \n          
\n          
\n            \n          
\n        
\n        
\n          
\n            \n          
\n          
\n            \n          
\n          
\n            \n          
\n        
\n      
\n    
\n\n\n    
\n      
\n        Celled\n        Requires Rows\n      
\n      
A grid can have rows divided into cells
\n      
\n        
\n          
\n            \n          
\n          
\n            \n          
\n        
\n        
\n          
\n            \n          
\n          
\n            \n          
\n          
\n            \n          
\n        
\n      
\n    
\n    
\n      
\n        Internally Celled\n        Requires Rows\n      
\n      
A grid can have rows divisions only between internal rows
\n      
\n        
\n          
\n            \n          
\n          
\n            \n          
\n          
\n            \n          
\n        
\n        
\n          
\n            \n          
\n          
\n            \n          
\n          
\n            \n          
\n        
\n      
\n    
\n\n    
Content
\n\n    
\n      
Rows
\n      
A row is a horizontal grouping of columns
\n      
\n        
\n          
\n            \n          
\n          
\n            \n          
\n        
\n        
\n          
\n            \n          
\n          
\n            \n          
\n          
\n            \n          
\n        
\n      
\n    
\n    
\n      
Columns
\n      
Columns each contain gutters giving them equal spacing from other columns.
\n      
\n        
\n          \n        
\n        
\n          \n        
\n        
\n          \n        
\n        
\n          \n        
\n      
\n    
\n\n    
Variations
\n\n\n    
\n      
Floated
\n      
A column can sit flush against the left or right edge of a row
\n      
\n        
\n          \n        
\n        
\n          \n        
\n      
\n    
\n\n    
\n      
Column Width
\n      
A column can vary in width taking up more than a single grid column.
\n      
\n        
\n          \n        
\n        
\n          \n        
\n        
\n          \n        
\n      
\n    
\n\n    
\n      
Column Count
\n      
A grid can have a different number of columns per row
\n      
\n        
\n          
\n            \n          
\n          
\n            \n          
\n          
\n            \n          
\n        
\n        
\n          
\n            \n          
\n          
\n            \n          
\n          
\n            \n          
\n          
\n            \n          
\n        
\n        
\n          
\n            \n          
\n          
\n            \n          
\n          
\n            \n          
\n          
\n            \n          
\n          
\n            \n          
\n        
\n      
\n    
\n\n    
\n      
\n        Equal Width\n      
\n      
A grid can automatically resize all elements to split the available width evenly
\n      
\n        
\n          
\n            1\n          
\n        
\n        
\n          
\n            2\n          
\n        
\n        
\n          
\n            3\n          
\n        
\n      
\n    
\n    
\n      
\n        
\n          
\n            
1
\n          
\n          
\n            
2
\n          
\n          
\n            
3
\n          
\n          
\n            
4
\n          
\n        
\n        
\n          
\n            
1
\n          
\n          
\n            
2
\n          
\n          
\n            
3
\n          
\n        
\n        
\n          
\n            
1
\n          
\n          
\n            
2
\n          
\n        
\n      
\n    
\n\n    
\n      
\n        Stretched\n      
\n      
A row can stretch its contents to take up the entire column height
\n      
\n        
\n          
\n            
\n              1\n            
\n          
\n          
\n            
\n              1\n            
\n            
\n              2\n            
\n          
\n          
\n            
\n              1\n            
\n            
\n              2\n            
\n            
\n              3\n            
\n          
\n        
\n      
\n    
\n    
\n      
\n        
\n          
\n            
\n              1\n            
\n            
\n              2\n            
\n          
\n          
\n            
\n              \n            
\n          
\n          
\n            
\n              1\n            
\n            
\n              2\n            
\n          
\n        
\n        
\n          
\n            
\n              1\n            
\n            
\n              2\n            
\n          
\n          
\n            
\n              \n            
\n          
\n          
\n            
\n              1\n            
\n            
\n              2\n            
\n          
\n        
\n      
\n    
\n\n\n    
\n      
Padded
\n      
A grid can preserve its vertical and horizontal gutters on first and last columns
\n\n      
The following grid has vertical and horizontal gutters
\n      
\n      
\n        
\n          \n        
\n        
\n          \n        
\n      
\n    
\n    
\n      
The following grid has vertical gutters.
\n      
\n      
\n        
\n          \n        
\n        
\n          \n        
\n      
\n    
\n    
\n      
The following grid has horizontal gutters
\n      
\n      
\n        
\n          \n        
\n        
\n          \n        
\n      
\n    
\n\n    
\n      
Relaxed
\n      
A grid can increase its gutters to allow for more negative space
\n      
\n        
\n          \n        
\n        
\n          \n        
\n        
\n          \n        
\n        
\n          \n        
\n      
\n    
\n    
\n      
\n        
\n          \n        
\n        
\n          \n        
\n        
\n          \n        
\n        
\n          \n        
\n      
\n    
\n\n    
\n      
Colored
\n      
A row or column can be colored
\n      
\n        
Red
\n        
Orange
\n        
Yellow
\n        
Olive
\n        
Green
\n        
Teal
\n        
Blue
\n        
Violet
\n        
Purple
\n        
Pink
\n        
Brown
\n        
Grey
\n        
Black
\n      
\n    
\n    
\n      
\n        
\n          
Red
\n        
\n        
\n          
Orange
\n        
\n        
\n          
Yellow
\n        
\n        
\n          
Olive
\n        
\n        
\n          
Green
\n        
\n        
\n          
Teal
\n        
\n        
\n          
Blue
\n        
\n        
\n          
Violet
\n        
\n        
\n          
Purple
\n        
\n        
\n          
Pink
\n        
\n        
\n          
Brown
\n        
\n        
\n          
Grey
\n        
\n        
\n          
Black
\n        
\n      
\n    
\n\n\n    
\n      
Centered
\n      
A grid can have its columns centered
\n      
\n        
\n          \n        
\n        
\n          
\n            \n          
\n          
\n            \n          
\n          
\n            \n          
\n        
\n        
\n          
\n            \n          
\n          
\n            \n          
\n          
\n            \n          
\n          
\n            \n          
\n        
\n      
\n    
\n\n    
\n      
Text Alignment
\n      
A grid, row, or column can specify its text alignment
\n      
\n        
\n          
\n            
\n              
\n                Cats\n              
\n            
\n          
\n          
\n            
\n              
\n                Dogs\n              
\n              
\n                Poodle\n              
\n              
\n                Cockerspaniel\n              
\n            
\n          
\n          
\n            
\n              
\n                Monkeys\n              
\n            
\n          
\n        
\n      
\n    
\n    
\n      
\n        
\n          
\n            
\n              
\n                Cats\n              
\n            
\n          
\n          
\n            
\n              
\n                Dogs\n              
\n              
\n                Poodle\n              
\n              
\n                Cockerspaniel\n              
\n            
\n          
\n          
\n            
\n              
\n                Monkeys\n              
\n            
\n          
\n        
\n        
\n          
\n            
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.
\n          
\n        
\n      
\n    
\n    
\n      
\n        
\n          
\n            
\n              
\n                Cats\n              
\n            
\n          
\n          
\n            
\n              
\n                Dogs\n              
\n              
\n                Poodle\n              
\n              
\n                Cockerspaniel\n              
\n            
\n          
\n          
\n            
\n              
\n                Monkeys\n              
\n            
\n          
\n        
\n      
\n    
\n\n\n    
\n      
Vertical Alignment
\n      
A grid, row, or column can specify its vertical alignment to have all its columns vertically centered.
\n      
\n        
\n          
\n            \n          
\n          
\n            \n            \n          
\n          
\n            \n          
\n        
\n      
\n    
\n    
\n      
\n        
\n          
\n            \n          
\n          
\n            \n            \n          
\n          
\n            \n          
\n        
\n        
\n          
\n            \n          
\n          
\n            \n            \n          
\n          
\n            \n          
\n        
\n        
\n          
\n            \n          
\n          
\n            \n            \n          
\n          
\n            \n          
\n        
\n      
\n    
\n\n    
Responsive Variations
\n\n\n    
\n      
Doubling
\n      
A grid can double its column width on tablet and mobile sizes
\n      
\n        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\n      
\n      
\n        
\n          \n        
\n        
\n          \n        
\n        
\n          \n        
\n        
\n          \n        
\n        
\n          \n        
\n      
\n    
\n\n    
\n      
Stackable
\n      
A grid can have its columns stack on-top of each other after reaching mobile breakpoints
\n      
\n        To see a grid stack, try resizing your browser to a small width\n      
\n      
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          
\n            \n            \n          
\n        
\n      
\n    
\n    
\n      
Reversed
\n      
A grid or row can specify that its columns should reverse order at different device sizes
\n      
Reversed grids are compatible with divided grids and other complex grid types.
\n      
\n        
\n          
\n            Computer A Fourth\n          
\n          
\n            Computer A Third\n          
\n          
\n            Computer A Second\n          
\n          
\n            Computer A First\n          
\n        
\n        
\n          
\n            Computer B Fourth\n          
\n          
\n            Computer B Third\n          
\n          
\n            Computer B Second\n          
\n          
\n            Computer B First\n          
\n        
\n      
\n      
\n        
\n          Tablet Fourth\n        
\n        
\n          Tablet Third\n        
\n        
\n          Tablet Second\n        
\n        
\n          Tablet First\n        
\n      
\n      
\n        
\n          Mobile Fourth\n        
\n        
\n          Mobile Third\n        
\n        
\n          Mobile Second\n        
\n        
\n          Mobile First\n        
\n      
\n    
\n    
\n      
\n        
\n          
Computer Row 4
\n        
\n        
\n          
Computer Row 3
\n        
\n        
\n          
Computer Row 2
\n        
\n        
\n          
Computer Row 1
\n        
\n      
\n    
\n    
\n      
\n        
\n          
Tablet Row 4
\n        
\n        
\n          
Tablet Row 3
\n        
\n        
\n          
Tablet Row 2
\n        
\n        
\n          
Tablet Row 1
\n        
\n      
\n    
\n    
\n      
\n        
\n          
Mobile Row 4
\n        
\n        
\n          
Mobile Row 3
\n        
\n        
\n          
Mobile Row 2
\n        
\n        
\n          
Mobile Row 1
\n        
\n      
\n    
\n\n    
\n      
Device Visibility
\n      
A columns or row can appear only for a specific device, or screen sizes
\n      
\n        See container documentation for information on breakpoint calculations\n      
\n      
\n        
\n          
\n            
\n              Large Screen\n            
\n          
\n          
\n            
\n              Large Screen\n            
\n          
\n        
\n        
\n          
\n            
\n              Widescreen\n            
\n          
\n          
\n            
\n              Widescreen\n            
\n          
\n        
\n        
\n          
\n            
\n              Mobile\n            
\n          
\n          
\n            
\n              Mobile\n            
\n          
\n        
\n        
\n          
\n            
\n              Computer\n            
\n          
\n          
\n            
\n              Tablet and Mobile\n            
\n          
\n          
\n            
\n              All Sizes\n            
\n          
\n          
\n            
\n              All Sizes\n            
\n          
\n        
\n        
\n          
\n            
\n              Computer\n            
\n          
\n          
\n            
\n              Computer\n            
\n          
\n          
\n            
\n              Computer\n            
\n          
\n          
\n            
\n              Computer\n            
\n          
\n        
\n        
\n          
\n            
\n              Tablet\n            
\n          
\n          
\n            
\n              Tablet\n            
\n          
\n          
\n            
\n              Tablet\n            
\n          
\n        
\n      
\n    
\n\n    
\n      
Responsive Width
\n      
A column can specify a width for a specific device
\n      
\n        
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.
\n      
\n      
\n        
\n          \n        
\n        
\n          \n        
\n        
\n          \n        
\n        
\n          \n        
\n        
\n          \n        
\n      
\n    
\n    
\n      
\n        
\n          \n        
\n        
\n          \n        
\n        
\n          \n        
\n        
\n          \n        
\n      
\n    
\n  
\n\n
\n"
  },
  {
    "path": "server/documents/collections/menu.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'menu'\nstandalone  : true\n\nelement     : 'menu'\nelementType : 'collection'\n\ntitle       : 'Menu'\ndescription : 'A menu displays grouped navigation actions'\ntype        : 'UI Collection'\n\nthemes      : ['Default', 'Chubby', 'GitHub', 'Material']\n---\n\n\n\n\n<%- @partial('header') %>\n\n
\n\n  
Types
\n  
\n    
\n      Menu\n    
\n    
A menu
\n    
\n      
Starting in 2.0 menus now use flexbox. This allows each menu item to automatically stretch to the size of the largest item.\n    
\n    
\n      Editorials\n      Reviews\n      Upcoming Events\n    
\n  
\n  
\n    
\n      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.\n    
\n    
\n      
\n        \n      
\n      \n        Browse Courses\n        \n      \n      
\n        More\n        \n        
\n          
Applications
\n          
International Students
\n          
Scholarships
\n        
\n      
\n    
\n    
\n      
\n        
\n          
Business
\n          
\n            Design & Urban Ecologies\n            Fashion Design\n            Fine Art\n            Strategic Design\n          
\n        
\n        
\n          
Liberal Arts
\n          
\n            Anthropology\n            Economics\n            Media Studies\n            Philosophy\n          
\n        
\n        
\n          
Social Sciences
\n          
\n            Food Studies\n            Journalism\n            Non Profit Management\n          
\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        \n        
\n          
\n            \n            New\n            
\n              
Document
\n              
Image
\n            
\n          
\n          
\n            Open...\n          
\n          
\n            Save...\n          
\n          
Edit Permissions
\n          
\n          
\n            Export\n          
\n          
\n            Share...\n          
\n        
\n      
\n      
\n        
\n          
\n            \n            \n          
\n          
\n        
\n      
\n    
\n    
\n      \n    
\n  
\n\n  
\n    
Secondary Menu
\n    
A menu can adjust its appearance to de-emphasize its contents
\n    
\n      \n        Home\n      \n      \n        Messages\n      \n      \n        Friends\n      \n      
\n        
\n          
\n            \n            \n          
\n        
\n        \n          Logout\n        \n      
\n    
\n  
\n\n  
\n    
Pointing
\n    
A menu can point to show its relationship to nearby content
\n    
\n      \n        Home\n      \n      \n        Messages\n      \n      \n        Friends\n      \n      
\n        
\n          
\n            \n            \n          
\n        
\n      
\n    
\n    
\n      \n    
\n  
\n  
\n    
\n      \n        Home\n      \n      \n        Messages\n      \n      \n        Friends\n      \n      
\n        \n          Logout\n        \n      
\n    
\n    
\n      \n    
\n  
\n\n  
\n    
Tabular
\n    
A menu can be formatted to show tabs of information
\n    
\n      Be sure to visit the tab documentation for information on how to set up dynamic tabs\n    
\n    
\n      \n        Bio\n      \n      \n        Photos\n      \n    
\n  
\n  
\n    
\n      \n        Bio\n      \n      \n        Photos\n      \n      
\n        
\n          
\n            \n            \n          
\n        
\n      
\n    
\n    
\n      \n    
\n  
\n  
\n    
\n      \n    
\n    
\n      \n        Active Project\n      \n      \n        Project #2\n      \n      \n        Project #3\n      \n      
\n        \n           New Tab\n        \n      
\n    
\n  
\n  
\n    
\n      
\n        
\n          \n            Bio\n          \n          \n            Pics\n          \n          \n            Companies\n          \n          \n            Links\n          \n        
\n      
\n      
\n        
\n          This is an stretched grid column. This segment will always match the tab height\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        
\n          This is an stretched grid column. This segment will always match the tab height\n        
\n      
\n      
\n        
\n          \n            Bio\n          \n          \n            Pics\n          \n          \n            Companies\n          \n          \n            Links\n          \n        
\n      
\n    
\n  
\n\n\n  
\n    
Text
\n    
A menu can be formatted for text content
\n    
\n      
Sort By
\n      \n        Closest\n      \n      \n        Most Comments\n      \n      \n        Most Popular\n      \n    
\n  
\n\n  
\n    
Vertical Menu
\n    
A vertical menu displays elements vertically..
\n    
A vertical menu's width defaults to an arbitrary size. To have it fit your content more precisely use the fluid variation in conjunction with ui grid.
\n\n    
\n      \n        Inbox\n        
1
\n      \n      \n        Spam\n        
51
\n      \n      \n        Updates\n        
1
\n      \n      
\n        
\n          \n          \n        
\n      
\n    
\n  
\n\n  
\n    
\n      \n        Account\n      \n      \n        Settings\n      \n      
\n        \n        Display Options\n        
\n          
Text Size
\n          Small\n          Medium\n          Large\n        
\n      
\n    
\n  
\n\n  
\n    
\n      
Sort By
\n      \n        Closest\n      \n      \n        Most Comments\n      \n      \n        Most Popular\n      \n    
\n  
\n\n  
\n    
\n      \n        Home\n      \n      \n        Messages\n      \n      \n        Friends\n      \n    
\n  
\n\n  
\n    
\n      \n        Home\n      \n      \n        Messages\n      \n      \n        Friends\n      \n    
\n  
\n\n  
\n    
Pagination
\n    
A pagination menu is specially formatted to present links to pages of content
\n    
\n      \n        1\n      \n      
\n        ...\n      
\n      \n        10\n      \n      \n        11\n      \n      \n        12\n      \n    
\n  
\n\n  
Content
\n\n  
\n    
Header
\n    
A menu item may include a header or may itself be a header
\n    
\n      
\n        Our Company\n      
\n      \n        About Us\n      \n      \n        Jobs\n      \n      \n        Locations\n      \n    
\n  
\n  
\n    
\n      
\n        
Products
\n        
\n          Enterprise\n          Consumer\n        
\n      
\n      
\n        
CMS Solutions
\n        
\n          Rails\n          Python\n          PHP\n        
\n      
\n      
\n        
Hosting
\n        
\n          Shared\n          Dedicated\n        
\n      
\n      
\n        
Support
\n        
\n          E-mail Support\n          FAQs\n        
\n      
\n    
\n  
\n\n  
\n    
Text
\n    
A vertical menu item can include any type of text content.
\n    
\n      \n        
Promotions
\n        
Check out our new promotions
\n      \n      \n        
Coupons
\n        
Check out our collection of coupons
\n      \n      \n        
Rebates
\n        
Visit our rebate forum for information on claiming rebates
\n      \n    
\n  
\n\n  
\n    
Input
\n    
A menu item can contain an input inside of it
\n    
\n      
\n        
\n          \n          \n        
\n      
\n      
\n        
\n          \n          
Go
\n        
\n      
\n    
\n  
\n\n\n  
\n    
Button
\n    
A menu item can contain a button inside of it
\n\n    
\n      
\n        
Sign up
\n      
\n      
\n        
Log-in
\n      
\n    
\n  
\n\n\n  
\n    
Link Item
\n    
A menu may contain a link item, or an item formatted as if it is a link.
\n    
\n      \n        Visit Google\n      \n      
\n        Javascript Link\n      
\n    
\n  
\n\n  
\n    
Dropdown Item
\n    
An item may contain a nested menu in a dropdown.
\n    
\n      
To have a dropdown open without Javascript, use the simple variation
\n    
\n    
\n      
\n        Categories\n        \n        
\n          Electronics\n          Automotive\n          Home\n        
\n      
\n    
\n  
\n\n  
\n    
Popup Menu
\n    
A menu item may show a large menu, or additional content using a popup
\n    
\n      \n        Browse\n        \n      \n    
\n    
\n      
\n        
\n          
Fabrics
\n          
\n            Cashmere\n            Linen\n            Cotton\n            Viscose\n          
\n        
\n        
\n          
Size
\n          
\n            Small\n            Medium\n            Large\n            Plus Sizes\n          
\n        
\n        
\n          
Colored
\n          
\n            Neutrals\n            Brights\n            Pastels\n          
\n        
\n        
\n          
Types
\n          
\n            Knitwear\n            Outerwear\n            Pants\n            Shoes\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Search
\n    
A menu can contain a search input
\n    
\n      
\n        
\n          \n          \n        
\n        
\n      
\n    
\n    
\n      \n    
\n  
\n\n  
\n    
Menu
\n    
A menu may contain another menu group in the same level as menu items.
\n    
\n      Browse\n      Submit\n      
\n        Sign Up\n        Help\n      
\n    
\n  
\n\n\n  
\n    
Sub Menu
\n    
A menu item may contain another menu nested inside that acts as a grouped sub-menu.
\n    
\n      
\n        
\n      
\n      
\n        Home\n        
\n          Search\n          Add\n          Remove\n        
\n      
\n      \n         Browse\n      \n      \n        Messages\n      \n      
\n        More\n        \n        
\n           Edit Profile\n           Choose Language\n           Account Settings\n        
\n      
\n    
\n  
\n\n  
States
\n\n  
\n    
Hover
\n    
A menu item can be hovered
\n    
Menu items are only hoverable if they are a links, or given the class name link
\n    
\n      \n        A link\n      \n      
\n        div Link\n      
\n    
\n  
\n\n\n  
\n    
Active
\n    
A menu item can be active
\n    
\n      
\n        Link\n      
\n    
\n  
\n\n\n  
Variations
\n\n  
\n    
Fixed
\n    
A menu can be fixed to a side of its context
\n    
These examples use a an iframe, to prevent content from sticking to the browser viewport.
\n    
For more advanced behaviors consider using a sticky menu or visibility APIs.
\n    \n    
\n      
\n        
\n          \n        
\n        Features\n        Testimonials\n        Sign-in\n      
\n      
\n        
\n          \n        
\n        Features\n        Testimonials\n        Sign-in\n      
\n      
\n      
\n    
\n  
\n  
\n    \n    
\n      
\n        
\n          \n        
\n        Features\n        Testimonials\n        Sign-in\n      
\n      
\n        
\n          \n        
\n        Features\n        Testimonials\n        Sign-in\n      
\n      
\n      
\n    
\n  
\n\n  
\n    
Stackable
\n    
A menu can stack at mobile resolutions
\n    
\n      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.\n    
\n    
\n      
\n        \n      
\n      Features\n      Testimonials\n      Sign-in\n    
\n  
\n\n  
\n    
Inverted
\n    
A menu may have its colors inverted to show greater contrast
\n    
\n      \n        Home\n      \n      \n        Messages\n      \n      \n        Friends\n      \n    
\n  
\n  
\n    
\n      \n        Home\n      \n      \n        Messages\n      \n      \n        Friends\n      \n    
\n  
\n  
\n    
\n      \n        Home\n      \n      \n        Messages\n      \n      \n        Friends\n      \n    
\n  
\n  
\n    
\n      
\n        \n          Home\n        \n        \n          Messages\n        \n        \n          Friends\n        \n      
\n    
\n  
\n  
\n    
\n      
\n        \n          Home\n        \n        \n          Messages\n        \n        \n          Friends\n        \n      
\n    
\n  
\n  
\n    
Colored
\n    
Additional colors can be specified.
\n    
\n      Red\n      Orange\n      Yellow\n      Olive\n      Green\n      Teal\n    
\n    
\n      Blue\n      Violet\n      Purple\n      Pink\n      Brown\n      Grey\n    
\n  
\n  
\n    
\n      \n        Home\n      \n      \n        Messages\n      \n      \n        Friends\n      \n    
\n    
\n      \n        Home\n      \n      \n        Messages\n      \n      \n        Friends\n      \n    
\n    
\n      \n        Home\n      \n      \n        Messages\n      \n      \n        Friends\n      \n    
\n    
\n      \n        Home\n      \n      \n        Messages\n      \n      \n        Friends\n      \n    
\n    
\n      \n        Home\n      \n      \n        Messages\n      \n      \n        Friends\n      \n    
\n    
\n      \n        Home\n      \n      \n        Messages\n      \n      \n        Friends\n      \n    
\n    
\n      \n        Home\n      \n      \n        Messages\n      \n      \n        Friends\n      \n    
\n    
\n      \n        Home\n      \n      \n        Messages\n      \n      \n        Friends\n      \n    
\n    
\n      \n        Home\n      \n      \n        Messages\n      \n      \n        Friends\n      \n    
\n    
\n      \n        Home\n      \n      \n        Messages\n      \n      \n        Friends\n      \n    
\n    
\n      \n        Home\n      \n      \n        Messages\n      \n      \n        Friends\n      \n    
\n    
\n      \n        Home\n      \n      \n        Messages\n      \n      \n        Friends\n      \n    
\n  
\n  
\n    
These colors can also be inverted
\n    
\n      Red\n      Orange\n      Yellow\n      Olive\n      Green\n      Teal\n    
\n    
\n      Blue\n      Violet\n      Purple\n      Pink\n      Brown\n      Grey\n    
\n  
\n  
\n    
\n      \n        Home\n      \n      \n        Messages\n      \n      \n        Friends\n      \n    
\n    
\n      \n        Home\n      \n      \n        Messages\n      \n      \n        Friends\n      \n    
\n    
\n      \n        Home\n      \n      \n        Messages\n      \n      \n        Friends\n      \n    
\n    
\n      \n        Home\n      \n      \n        Messages\n      \n      \n        Friends\n      \n    
\n    
\n      \n        Home\n      \n      \n        Messages\n      \n      \n        Friends\n      \n    
\n    
\n      \n        Home\n      \n      \n        Messages\n      \n      \n        Friends\n      \n    
\n    
\n      \n        Home\n      \n      \n        Messages\n      \n      \n        Friends\n      \n    
\n    
\n      \n        Home\n      \n      \n        Messages\n      \n      \n        Friends\n      \n    
\n    
\n      \n        Home\n      \n      \n        Messages\n      \n      \n        Friends\n      \n    
\n    
\n      \n        Home\n      \n      \n        Messages\n      \n      \n        Friends\n      \n    
\n    
\n      \n        Home\n      \n      \n        Messages\n      \n      \n        Friends\n      \n    
\n    
\n      \n        Home\n      \n      \n        Messages\n      \n      \n        Friends\n      \n    
\n  
\n\n\n  
\n    
Icons
\n    
A menu may have just icons
\n    
\n      \n        \n      \n      \n        \n      \n      \n        \n      \n    
\n    

\n    
\n      \n        \n      \n      \n        \n      \n      \n        \n      \n    
\n  
\n\n  
\n    
Labeled Icon
\n    
A menu may have labeled icons
\n    
\n      \n        \n        Games\n      \n      \n        \n        Channels\n      \n      \n        \n        Videos\n      \n    
\n    

\n    
\n      \n        \n        Games\n      \n      \n        \n        Channels\n      \n      \n        \n        Videos\n      \n    
\n  
\n\n\n  
\n    
Fluid
\n    
A vertical menu may take the size of its container. (A horizontal menu does this by default) 
\n    
\n      Run\n      Walk\n      Bike\n    
\n  
\n\n  
\n    
Compact
\n    
A menu can take up only the space necessary to fit its content
\n    
\n      \n        \n        Games\n      \n      \n        \n        Channels\n      \n      \n        \n        Videos\n      \n    
\n  
\n  
\n    
\n      \n        \n        Games\n      \n      \n        \n        Channels\n      \n      \n        \n        Videos\n      \n    
\n  
\n\n\n  
\n    
Evenly Divided
\n    
A menu may divide its items evenly
\n    
\n      Buy\n      Sell\n      Rent\n    
\n  
\n\n  
\n    
A vertical menu can point to content adjacent to itself to show ownership
\n    
\n      \n        Site Title\n      \n      
\n        Grouped Section\n        
\n          Subsection 1\n          Subsection 1\n          Subsection 1\n        
\n      
\n      
\n        Dropdown \n        
\n          
Choice 1
\n          
Choice 2
\n          
Choice 3
\n        
\n      
\n    
\n  
\n\n\n  
\n    
Attached
\n    
A menu may be attached to other content segments
\n    
\n      \n        Tab 1\n      \n      \n        Tab 2\n      \n    
\n    
\n      There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.\n    
\n  
\n  
\n    
\n      \n        Section 1\n      \n      \n        Section 2\n      \n    
\n    
\n      There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.\n    
\n    
\n      \n        Section 1\n      \n      \n        Section 2\n      \n    
\n  
\n\n  
\n    
Size
\n    
A menu can vary in size
\n    
\n      \n        Home\n      \n      \n        Messages\n      \n      
\n        
\n          Language \n          
\n            English\n            Russian\n            Spanish\n          
\n        
\n        
\n            
Sign Up
\n        
\n      
\n    
\n  
\n  
\n    
\n      \n        Home\n      \n      \n        Messages\n      \n      
\n        
\n          Language \n          
\n            English\n            Russian\n            Spanish\n          
\n        
\n        
\n            
Sign Up
\n        
\n      
\n    
\n  
\n  
\n    
\n      \n        Home\n      \n      \n        Messages\n      \n      
\n        
\n          Language \n          
\n            English\n            Russian\n            Spanish\n          
\n        
\n        
\n            
Sign Up
\n        
\n      
\n    
\n  
\n  
\n    
\n      \n        Home\n      \n      \n        Messages\n      \n      
\n        
\n          Language \n          
\n            English\n            Russian\n            Spanish\n          
\n        
\n        
\n            
Sign Up
\n        
\n      
\n    
\n  
\n  
\n    
\n      \n        Home\n      \n      \n        Messages\n      \n      
\n        
\n          Language \n          
\n            English\n            Russian\n            Spanish\n          
\n        
\n        
\n            
Sign Up
\n        
\n      
\n    
\n  
\n  
\n    
\n      \n        Home\n      \n      \n        Messages\n      \n      
\n        
\n          Language \n          
\n            English\n            Russian\n            Spanish\n          
\n        
\n        
\n            
Sign Up
\n        
\n      
\n    
\n  
\n  
\n    
A vertical menu can also vary in size
\n    
\n      \n        
1
\n        Inbox\n      \n      \n        
51
\n        Spam\n      \n      \n        
1
\n        Updates\n      \n      
\n        
\n          \n          \n        
\n      
\n    
\n  
\n  
\n    
\n      \n        
1
\n        Inbox\n      \n      \n        
51
\n        Spam\n      \n      \n        
1
\n        Updates\n      \n      
\n        
\n          \n          \n        
\n      
\n    
\n  
\n  
\n    
\n      \n        
1
\n        Inbox\n      \n      \n        
51
\n        Spam\n      \n      \n        
1
\n        Updates\n      \n      
\n        
\n          \n          \n        
\n      
\n    
\n  
\n  
\n    
\n      \n        
1
\n        Inbox\n      \n      \n        
51
\n        Spam\n      \n      \n        
1
\n        Updates\n      \n      
\n        
\n          \n          \n        
\n      
\n    
\n  
\n\n  
Items
\n\n  
\n    
Fitted
\n    
A menu item or menu can remove element padding, vertically or horizontally
\n    
\n      
\n        No padding whatsoever\n      
\n      
\n        No horizontal padding\n      
\n      
\n        No vertical padding\n      
\n    
\n  
\n\n\n  
\n    
Borderless
\n    
A menu item or menu can have no borders
\n    
\n      1\n      2\n      3\n      4\n      5\n      6\n    
\n  
\n\n\n
\n"
  },
  {
    "path": "server/documents/collections/message.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'message'\nstandalone  : true\n\nelement     : 'message'\nelementType : 'collection'\n\ntitle       : 'Message'\ndescription : 'A message displays information that explains nearby content'\ntype        : 'UI Collection'\n\nthemes      : ['Default', 'GitHub', 'Gmail']\n---\n\n\n\n<%- @partial('header') %>\n\n
\n\n  
Types
\n\n  
\n    
Message
\n    
A basic message
\n    
\n      
\n        Changes in Service\n      
\n      
We just updated our privacy policy here to better service our customers. We recommend reviewing the changes.
\n    
\n  
\n\n  
\n    
List Message
\n    
A message with a list
\n    
\n      
\n        New Site Features\n      
\n      
    \n        
  • You can now have cover images on blog pages
    • \n        
  • Drafts will now auto-save while writing
    • \n      
\n    
\n  
\n\n  
\n    
\n      Icon Message\n      Flexbox\n    
\n    
A message can contain an icon.
\n    
\n      \n      
\n        
\n          Have you heard about our mailing list?\n        
\n        
Get the best news in your e-mail every day.
\n      
\n    
\n  
\n  
\n    
\n      \n      
\n        
\n          Just one second\n        
\n        
We're fetching that content for you.
\n      
\n    
\n  
\n\n  
\n    
Dismissable Block
\n    
A message that the user can choose to hide
\n    
\n      \n      
\n        Welcome back!\n      
\n      
This is a special notification which you can dismiss if you're bored with it.
\n    
\n    
\n      
Dismissable blocks do not automatically close when using the close icon, this behavior must be defined using Javascript, for example:
\n      
\n      $('.message .close')\n        .on('click', function() {\n          $(this)\n            .closest('.message')\n            .transition('fade')\n          ;\n        })\n      ;\n      
\n    
\n  
\n\n\n  
States
\n\n  
\n    
Hidden
\n    
A message can be hidden
\n    
\n      \n    
\n  
\n\n  
\n    
Visible
\n    
A message can be set to visible to force itself to be shown.
\n    
\n      
You can always see me
\n    
\n  
\n\n  
Variations
\n\n  
\n    
Floating
\n    
A message can float above content that it is related to
\n    
\n      
Way to go!
\n    
\n  
\n\n  
\n    
Compact
\n    
A message can only take up the width of its content.
\n    
\n      
Get all the best inventions in your e-mail every day. Sign up now!
\n    
\n  
\n\n  
\n    
Attached
\n    
A message can be formatted to attach itself to other content
\n    
\n      
\n        Welcome to our site!\n      
\n      
Fill out the form below to sign-up for a new account
\n    
\n    
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n      
\n      
\n        \n        \n      
\n      
\n        \n        \n      
\n      
\n        
\n          \n          \n        
\n      
\n      
Submit
\n    
\n    
\n      \n      Already signed up? Login here instead.\n    
\n  
\n\n  
\n    
Warning
\n    
A message may be formatted to display warning messages.
\n    
\n      \n      
\n        You must register before you can do that!\n      
\n      Visit our registration page, then try again\n    
\n  
\n\n  
\n    
Info
\n    
A message may be formatted to display information.
\n    
\n      \n      
\n        Was this what you wanted?\n      
\n      
    \n        
  • It's good to see you again.
    • \n        
  • Did you know it's been a while?
    • \n      
\n    
\n  
\n\n  
\n    
Positive / Success
\n    
A message may be formatted to display a positive message.
\n    \n      \n      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.\n    \n    
\n      \n      
\n        You are eligible for a reward\n      
\n      
Go to your special offers page to see now.
\n    
\n  
\n  
\n    
\n      \n      
\n        Your user registration was successful.\n      
\n      
You may now log-in with the username you have chosen
\n    
\n  
\n\n  
\n    
Negative / Error 
\n    
A message may be formatted to display a negative message.
\n    
\n      \n      
\n        We're sorry we can't apply that discount\n      
\n      
That offer has expired\n    
\n  
\n  
\n    
\n      \n      
\n        There were some errors with your submission\n      
\n      
    \n        
  • You must include both a upper and lower case letters in your password.
    • \n        
  • You need to select your home country.
    • \n      
\n    
\n  
\n\n  
\n    
Colored
\n    
A message can be formatted to be different colors
\n    
Red
\n    
Orange
\n    
Yellow
\n    
Olive
\n    
Green
\n    
Teal
\n    
Blue
\n    
Violet
\n    
Purple
\n    
Pink
\n    
Brown
\n    
Black
\n  
\n\n\n  
\n    
Size
\n    
A message can have different sizes
\n    
\n      This is a mini message.\n    
\n    
\n      This is a tiny message.\n    
\n    
\n      This is a small message.\n    
\n    
\n      This is large\n    
\n    
\n      This is big\n    
\n    
\n      This is huge\n    
\n    
\n      This is massive\n    
\n  
\n\n
\n\n"
  },
  {
    "path": "server/documents/collections/table.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'table'\nstandalone  : true\n\nelement     : 'table'\nelementType : 'collection'\n\ntitle       : 'Table'\ndescription : 'A table displays a collections of data grouped into rows'\ntype        : 'UI Collection'\n\nthemes      : ['Default', 'Basic', 'Classic', 'GitHub']\n---\n\n\n\n\n<%- @partial('header') %>\n\n
\n\n  
Types
\n\n  
\n    
Table
\n    
A standard table
\n    
\n      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.\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameAgeJob
James24Engineer
Jill26Engineer
Elyse24Designer
\n  
\n\n  
\n\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n          \n        \n      \n      \n        \n      \n    
Evidence RatingEffectEfficacyConsensusComments
\n            
A
\n          		\n            Power Output\n          \n            
\n          		\n            80% 
\n            18 studies\n          		Creatine supplementation is the reference compound for increasing muscular creatine levels; there is variability in this increase, however, with some nonresponders.
\n            
A
\n          		\n            Weight\n          \n            
\n          		\n            100% 
\n            65 studies\n          		Creatine is the reference compound for power improvement, with numbers from one meta-analysis to assess potency
\n          
\n            \n              \n            \n            1\n            2\n            3\n            4\n            \n              \n            \n          
\n        
\n  
\n  
\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
EmployeeCorrect Guesses
\n            
\n              \n              
\n                Lena\n                
Human Resources\n              
\n            
\n          
\n            22\n          
\n            
\n              \n              
\n                Matthew\n                
Fabric Design\n              
\n            
\n          
\n            15\n          
\n            
\n              \n              
\n                Lindsay\n                
Entertainment\n              
\n            
\n          
\n            12\n          
\n            
\n              \n              
\n                Mark\n                
Executive\n              
\n            
\n          
\n            11\n          
\n  
\n  
\n    \n      \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
\n          Git Repository\n        
\n             node_modules\n          Initial commit10 hours ago
\n             test\n          Initial commit10 hours ago
\n             build\n          Initial commit10 hours ago
\n             package.json\n          Initial commit10 hours ago
\n             Gruntfile.js\n          Initial commit10 hours ago
\n  
\n\n  
\n    
Definition
\n    
A table may be formatted to emphasize a first column that defines a rows content
\n    
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
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n    
ArgumentsDescription
reset ratingNoneResets rating to default value
set ratingrating (integer)Sets the current star rating to specified value
\n  
\n  
\n    \n      \n        \n          \n          \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n          \n        \n      \n      \n        \n          \n          \n        \n      \n    
NameRegistration DateE-mail addressPremium Plan
\n            
\n               \n            
\n          		John LilkiSeptember 14, 2013jhlilk22@yahoo.comNo
\n            
\n               \n            
\n          		Jamie HaringtonJanuary 11, 2014jamieharingonton@yahoo.comYes
\n            
\n               \n            
\n          		Jill LewisMay 11, 2014jilsewris22@yahoo.comYes
\n            
\n               Add User\n            
\n            
\n              Approve\n            
\n            
\n              Approve All\n            
\n          
\n  
\n\n  
\n    
Structured
\n    
A table can be formatted to display complex structured data
\n\n    
\n      
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.
\n      
ui structured table does not support some style features, but can correctly display all valid HTML table content.
\n    
\n\n    \n      \n        \n          \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n          \n        \n      \n    
NameTypeFilesLanguages
RubyJavaScriptPython
Alpha TeamProject 12\n            \n          
Beta TeamProject 152\n            \n          
Project 212\n            \n          
Project 321\n            \n          
\n  
\n\n\n  
States
\n\n  
\n    
Positive / Negative
\n    
A cell or row may let a user know whether a value is good or bad
\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
No Name SpecifiedUnknownNone
Jimmy ApprovedNone
JamieUnknown Requires call
JillUnknownNone
\n  
\n\n  
Cells
\n  
\n    
Error
\n    
A cell or row may call attention to an error or a negative value
\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
No Name SpecifiedApprovedNone
JimmyCannot pull dataNone
JamieApproved Classified
JillApprovedNone
\n  
\n\n  
\n    
Warning
\n    
A cell or row may warn a user
\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
No Name SpecifiedUnknownNone
Jimmy Requires ActionNone
JamieUnknown Hostile
JillUnknownNone
\n  
\n\n  
\n    
Active
\n    
A cell or row can be active or selected by a user
\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
JamieApprovedRequires call
JohnSelectedNone
JamieApprovedRequires call
JillApprovedNone
\n  
\n  
\n    
Disabled
\n    
A cell can be disabled
\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
JamieApprovedRequires call
JohnSelectedNone
JamieApprovedRequires call
JillApprovedNone
\n\n  
\n\n  
Variations
\n\n\n  
\n    
Single Line
\n    
A table can specify that its cell contents should remain on a single line, and not wrap.
\n    \n      \n        \n          \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n        \n      \n    
NameRegistration DateE-mail addressPremium Plan
John LilkiSeptember 14, 2013jhlilk22@yahoo.comNo
Jamie HaringtonJanuary 11, 2014jamieharingonton@yahoo.comYes
Jill LewisMay 11, 2014jilsewris22@yahoo.comYes
\n  
\n\n\n\n  
\n    
\n      Fixed\n    
\n    
A table can use table-layout: fixed a special faster form of table rendering that does not resize table cells based on content.
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusDescription
JohnApprovedJohn is an interesting boy but sometimes you don't really have enough room to describe everything you'd like
JamieApprovedJamie is a kind girl but sometimes you don't really have enough room to describe everything you'd like
JillDeniedJill is an alright girl but sometimes you don't really have enough room to describe everything you'd like
\n  
\n  
\n    
\n      Fixed single line tables will automatically ensure content that does not fit in a single line will receive \"...\" ellipsis\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusDescription
JohnApprovedThis is much too long to fit I'm sorry about that
JamieApprovedShorter description
JillDeniedShorter description
\n  
\n\n  
\n    
Stacking
\n    
A table can specify how it stacks table content responsively
\n\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
\n\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
\n\n  
\n\n\n  
\n    
Selectable Row
\n    
A table can have its rows appear selectable
\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
JohnNo ActionNone
JamieApprovedRequires call
JillDeniedNone
JohnNo ActionNone
JamieApprovedRequires call
JillDeniedNone
\n  
\n  
\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
\n\n  
\n  
\n    
Selectable Cell
\n    
A table cell can be selectable
\n    
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.
\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusEdit
JohnNo Action\n            Edit\n          
JamieApproved\n            Edit\n          
JillDenied\n            Edit\n          
JohnNo Action\n            Requires change\n          
JamieApproved\n            Approve\n          
JillDenied\n            Remove\n          
\n  
\n\n  
\n    
Vertical Alignment
\n    
A table header, row, or cell can adjust its vertical alignment
\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
JohnApproved\n            Notes
\n            1
\n            2
\n          
JamieApproved\n            Notes
\n            1
\n            2
\n          
\n  
\n\n  
\n    
Text Alignment
\n    
A table header, row, or cell can adjust its text alignment
\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
\n  
\n\n  
\n    
Striped
\n    
A table can stripe alternate rows of content with a darker color to increase contrast
\n    \n      \n        \n          \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n        \n      \n    
NameDate JoinedE-mailCalled
John LilkiSeptember 14, 2013jhlilk22@yahoo.comNo
Jamie HaringtonJanuary 11, 2014jamieharingonton@yahoo.comYes
Jill LewisMay 11, 2014jilsewris22@yahoo.comYes
John LilkiSeptember 14, 2013jhlilk22@yahoo.comNo
John LilkiSeptember 14, 2013jhlilk22@yahoo.comNo
Jamie HaringtonJanuary 11, 2014jamieharingonton@yahoo.comYes
Jill LewisMay 11, 2014jilsewris22@yahoo.comYes
John LilkiSeptember 14, 2013jhlilk22@yahoo.comNo
\n  
\n\n  
\n    
Celled
\n    
A table may be divided each row into separate cells
\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n        \n        \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
\n  
\n\n  
\n    
Basic
\n    
A table can reduce its complexity to increase readability.
\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
\n  
\n  
\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
\n  
\n\n  
\n    
Collapsing Cell
\n    
A cell can be collapsing so that it only uses as much space as required
\n    
\n      \n      
\n        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\n      
\n    
\n\n    \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
\n             node_modules\n          Initial commit10 hours ago
\n             test\n          Initial commit10 hours ago
\n             build\n          Initial commit10 hours ago
\n  
\n\n  
\n    
Column Count
\n    
A table can specify its column count to divide its content evenly
\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n          \n        \n      \n      \n        \n        \n        \n        \n        \n      \n    
NameStatusAgeGenderNotes
JohnApproved22MaleNone
JamieApproved32MaleRequires call
JillDenied22FemaleNone
3 People2 Approved
\n  
\n\n  
\n    
Column Width
\n    
A table can specify the width of individual columns independently.
\n    
Tables use a 16 column grid similar to ui grid
\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n      \n        \n        \n      \n    
NameStatus
JohnApproved
JamieApproved
JillDenied
3 People2 Approved
\n  
\n\n  
\n    
Collapsing
\n    
A table can be collapsing, taking up only as much space as its rows.
\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n        \n        \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
\n  
\n\n  
\n    
Colored
\n    
A table can be given a color to distinguish it from other tables.
\n    \n      \n        \n        \n        \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
FoodCaloriesProtein
Apples2000g
Orange3100g
\n    \n      \n        \n        \n        \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
FoodCaloriesProtein
Apples2000g
Orange3100g
\n    \n      \n        \n        \n        \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n  
FoodCaloriesProtein
Apples2000g
Orange3100g
\n    \n      \n        \n        \n        \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
FoodCaloriesProtein
Apples2000g
Orange3100g
\n    \n      \n        \n        \n        \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
FoodCaloriesProtein
Apples2000g
Orange3100g
\n    \n      \n        \n        \n        \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
FoodCaloriesProtein
Apples2000g
Orange3100g
\n    \n      \n        \n        \n        \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
FoodCaloriesProtein
Apples2000g
Orange3100g
\n    \n      \n        \n        \n        \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
FoodCaloriesProtein
Apples2000g
Orange3100g
\n    \n      \n        \n        \n        \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
FoodCaloriesProtein
Apples2000g
Orange3100g
\n    \n      \n        \n        \n        \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
FoodCaloriesProtein
Apples2000g
Orange3100g
\n    \n      \n        \n        \n        \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
FoodCaloriesProtein
Apples2000g
Orange3100g
\n    \n      \n        \n        \n        \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
FoodCaloriesProtein
Apples2000g
Orange3100g
\n  
\n\n  
\n    
Inverted
\n    
A table's colors can be inverted
\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n        \n        \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
\n  
\n  
\n    \n      \n        \n        \n        \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
FoodCaloriesProtein
Apples2000g
Orange3100g
\n    \n      \n        \n        \n        \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
FoodCaloriesProtein
Apples2000g
Orange3100g
\n    \n      \n        \n        \n        \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
FoodCaloriesProtein
Apples2000g
Orange3100g
\n    \n      \n        \n        \n        \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
FoodCaloriesProtein
Apples2000g
Orange3100g
\n    \n      \n        \n        \n        \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
FoodCaloriesProtein
Apples2000g
Orange3100g
\n    \n      \n        \n        \n        \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
FoodCaloriesProtein
Apples2000g
Orange3100g
\n    \n      \n        \n        \n        \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
FoodCaloriesProtein
Apples2000g
Orange3100g
\n    \n      \n        \n        \n        \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
FoodCaloriesProtein
Apples2000g
Orange3100g
\n    \n      \n        \n        \n        \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
FoodCaloriesProtein
Apples2000g
Orange3100g
\n    \n      \n        \n        \n        \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
FoodCaloriesProtein
Apples2000g
Orange3100g
\n    \n      \n        \n        \n        \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
FoodCaloriesProtein
Apples2000g
Orange3100g
\n    \n      \n        \n        \n        \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
FoodCaloriesProtein
Apples2000g
Orange3100g
\n  
\n\n  
\n    
Sortable
\n    
A table may allow a user to sort contents by clicking on a table header.
\n\n    
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.\n    
\n\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n        \n        \n        \n      \n    
NameStatusNotes
JohnNo ActionNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
\n  
\n  
\n    
Full-Width Header / Footer 
\n    
A definition table can have a full width header or footer, filling in the gap left by the first column
\n    \n      \n        \n          \n          \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n          \n        \n      \n      \n        \n          \n          \n        \n      \n    
NameRegistration DateE-mail addressPremium Plan
\n            
\n               \n            
\n          		John LilkiSeptember 14, 2013jhlilk22@yahoo.comNo
\n            
\n               \n            
\n          		Jamie HaringtonJanuary 11, 2014jamieharingonton@yahoo.comYes
\n            
\n               \n            
\n          		Jill LewisMay 11, 2014jilsewris22@yahoo.comYes
\n            
\n               Add User\n            
\n            
\n              Approve\n            
\n            
\n              Approve All\n            
\n          
\n  
\n  
\n    
Padded
\n    
A table may sometimes need to be more padded for legibility
\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
JohnApprovedHe is a very nice guy and I enjoyed talking to him on the telephone. I hope we get to talk again.
JamieApprovedJamie was not interested in purchasing our product.
\n  
\n  
\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
JohnApprovedHe is a very nice guy and I enjoyed talking to him on the telephone. I hope we get to talk again.
JamieApprovedJamie was not interested in purchasing our product.
\n  
\n  
\n    
Compact
\n    
A table may sometimes need to be more compact to make more rows visible at a time
\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JohnApprovedNone
JamieApprovedRequires call
JohnApprovedNone
JamieApprovedRequires call
JohnApprovedNone
JamieApprovedRequires call
\n  
\n  
\n    \n      \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n        \n      \n    
NameStatusAnother StatusNotes
JohnApprovedApprovedNone
JamieApprovedApprovedRequires call
JohnApprovedApprovedNone
JamieApprovedApprovedRequires call
JohnApprovedApprovedNone
JamieApprovedApprovedRequires call
JohnApprovedApprovedNone
JamieApprovedApprovedRequires call
\n  
\n\n  
\n    
Size
\n    
A table can also be small or large
\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n        \n        \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
\n  
\n  
\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n      \n        \n        \n        \n      \n    
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
\n  
\n
\n"
  },
  {
    "path": "server/documents/elements/button.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'button-page'\nelement     : 'button'\nelementType : 'element'\nstandalone  : true\n\ntitle       : 'Button'\ndescription : 'A button indicates a possible user action'\ntype        : 'UI Element'\n\nthemes      : ['Default', 'Classic', 'Basic', 'Bootstrap3', 'Twitter', 'Raised', 'Chubby', 'Round', 'Amazon', 'Material', 'GitHub']\n---\n\n\n\n\n<%- @partial('header') %>\n\n
\n\n  
Types
\n\n  
\n    
Button
\n    
A standard button
\n    \n  
\n  
\n    
\n      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.
\n    
\n    \n    
\n      Focusable\n    
\n  
\n\n  
\n    
Emphasis
\n    
A button can be formatted to show different levels of emphasis
\n    
Setting your brand colors to primary and secondary color variables in site.variables will allow you to use your color theming for UI elements
\n    \n    \n  
\n  
\n    \n    \n  
\n\n  
\n    
Animated
\n    
A button can animate to show hidden content
\n    
The button will be automatically sized according to the visible content size. Make sure there is enough room for the hidden content to show
\n    
\n      
Next
\n      
\n        \n      
\n    
\n    
\n      
Shop
\n      
\n        \n      
\n    
\n    
\n      
Sign-up for a Pro account
\n      
\n        $12.99 a month\n      
\n    
\n  
\n\n  
\n    
Labeled
\n    
A button can appear alongside a label
\n    
\n      
\n         Like\n      
\n      \n        2,048\n      \n    
\n    
\n      \n        2,048\n      \n      
\n         Like\n      
\n    
\n    
\n      \n        1,048\n      \n      
\n        \n      
\n    
\n  
\n  
\n    
\n      
\n         Like\n      
\n      \n        1,048\n      \n    
\n    
\n      
\n         Forks\n      
\n      \n        1,048\n      \n    
\n  
\n\n  
\n    
Icon
\n    
A button can have only an icon
\n    \n  
\n\n  
\n    
Labeled Icon
\n    
A button can use an icon as a label
\n    \n    \n    \n  
\n\n  
\n    
Basic
\n    
A basic button is less pronounced
\n    \n  
\n  
\n    \n    \n    \n    \n  
\n  
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n  
\n\n  
\n    
Inverted
\n    
A button can be formatted to appear on dark backgrounds
\n    
\n      \n      \n      \n      \n      \n      \n      \n      \n      \n      \n      \n      \n      \n      \n      \n      \n    
\n  
\n  
\n    
\n      \n      \n      \n      \n      \n      \n      \n      \n      \n      \n      \n      \n      \n      \n      \n      \n    
\n  
\n\n\n  
Groups
\n\n  
\n    
Buttons
\n    
Buttons can exist together as a group
\n    
\n      \n      \n      \n    
\n  
\n\n  
\n    
Icon Buttons
\n    
Button groups can show groups of icons
\n    
\n      \n      \n      \n      \n    
\n    
\n      \n      \n      \n    
\n  
\n\n  
Content
\n\n  
\n    
Conditionals
\n    
Button groups can contain conditionals
\n    
\n      \n      
\n      \n    
\n  
\n  
\n    
\n      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\n    
\n    
\n      \n      
\n      \n    
\n  
\n\n  
States
\n\n  
\n    
Active
\n    
A button can show it is currently the active user selection
\n    \n  
\n\n  
\n    
Disabled
\n    
A button can show it is currently unable to be interacted with
\n    \n  
\n\n  
\n    
Loading
\n    
A button can show a loading indicator
\n    \n    \n    \n    \n  
\n\n  
Variations
\n\n  
\n    
Social
\n    
A button can be formatted to link to a social website
\n    \n    \n    \n    \n    \n    \n    \n  
\n\n\n  
\n    
Size
\n    
A button can have different sizes
\n    \n    \n    \n    \n    \n    \n    \n    \n  
\n\n  
\n    
Floated
\n    
A button can be aligned to the left or right of its container
\n    \n    \n  
\n\n\n  
\n    
Colored
\n    
A button can have different colors
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n  
\n\n  
\n    
Compact
\n    
A button can reduce its padding to fit into tighter spaces
\n    \n    \n    \n  
\n\n  
\n    
Toggle
\n    
A button can be formatted to toggle on and off
\n    \n  
\n\n  
\n    
Positive
\n    
A button can hint towards a positive consequence
\n    \n  
\n\n  
\n    
Negative
\n    
A button can hint towards a negative consequence
\n    \n  
\n\n  
\n    
Fluid
\n    
A button can take the width of its container
\n    \n  
\n\n  
\n    
Circular
\n    
A button can be circular
\n    \n  
\n  
\n    \n    \n    \n    \n  
\n\n  
\n    
Vertically Attached
\n    
A button can be attached to the top or bottom of other content
\n    
Top
\n    
\n      \n    
\n    
Bottom
\n  
\n\n  
\n    
\n        
One
\n        
Two
\n    
\n    
\n      \n    
\n    
\n        
One
\n        
Two
\n    
\n  
\n\n  
\n    
Horizontally Attached
\n    
A button can be attached to the left or right of other content
\n    \n    \n  
\n\n\n  
Group Variations
\n\n  
\n    
Vertical Buttons
\n    
Groups can be formatted to appear vertically
\n    
\n      \n      \n      \n      \n    
\n  
\n\n  
\n    
Icon Buttons
\n    
Groups can be formatted as icons
\n    
\n      \n      \n      \n    
\n  
\n\n  
\n    
Labeled Icon Buttons
\n    
Groups can be formatted as labeled icons
\n    
\n      \n      \n      \n    
\n  
\n  
\n    
Mixed Group
\n    
Groups can be formatted to use multiple button types together
\n    
\n      \n      \n      \n    
\n  
\n\n\n  
\n    
Equal Width
\n    
Groups can have their widths divided evenly
\n    
\n      \n      \n      \n      \n      \n    
\n    
\n    
\n      \n      \n      \n    
\n  
\n\n\n  
\n    
Colored Buttons
\n    
Groups can have a shared color
\n    
\n      \n      \n      \n    
\n  
\n\n  
\n    
Basic Buttons
\n    
A button group can be less pronounced
\n    
\n      
One
\n      
Two
\n      
Three
\n    
\n    
\n    
\n      \n      \n      \n    
\n  
\n  
\n    
\n      \n      \n      \n    
\n  
\n\n  
\n    
Group Sizes
\n    
Groups can have a shared size
\n    
\n      \n      \n      \n    
\n  
\n  
\n    
\n      \n      \n      \n      \n    
\n  
\n  
\n    
\n      \n      
\n      \n    
\n  
\n\n
\n"
  },
  {
    "path": "server/documents/elements/container.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'basic minimal'\nelement     : 'container'\nelementType : 'element'\nstandalone  : true\n\ntitle       : 'Container'\ndescription : 'A container limits content to a maximum width'\ntype        : 'UI Element'\n\nthemes      : ['Default']\n---\n\n\n\n\n<%- @partial('header', { tabs: {  introduction: 'Introduction', definition: 'Definition', examples: 'Examples' } }) %>\n\n
\n\n  
\n\n    
Introduction
\n\n    
\n\n      
When To Use
\n\n      
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.
\n\n\n      
Container Sizes
\n\n      
Containers are designed to responsively adjust their maximum width based on the size of the screen on which they are appearing.
\n\n      \n        \n          \n            \n            \n            \n            \n        \n        \n          \n            \n            \n            \n            \n            \n          \n          \n            \n            \n            \n            \n            \n          \n          \n            \n            \n            \n            \n            \n          \n          \n            \n            \n            \n            \n            \n          \n        \n      
MobileTabletSmall MonitorLarge Monitor
Width100%\n              723px\n              1em gutters and a 17px scrollbar width. 
 768 - (14 * (1 * 2)) - 17\">\n            		\n              933px\n              1.5em gutters and a 17px scrollbar width. 
 992 - (14 * (1.5 * 2)) - 17\">\n            		\n              1127px\n              2em gutters and a 17px scrollbar width. 
 1200 - (14 * (2 * 2)) - 17\">\n            
Gutter Size1emFluidFluidFluid
Variable$largestMobileScreen$mobileBreakpoint$smallMonitorBreakpoint$largeMonitorBreakpoint
Device Widthbelow 768px768px - 991px992px - 1200pxabove 1200px
\n      
Responsive Visibility
\n      
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.
\n\n      See grid responsive variations \n\n      
Determining Maximum Widths
\n\n      
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.
\n\n      
For example to determine tablet container size the following formula is used:
\n\n      
\n      /* In site.variables */\n      @tabletBreakpoint : 768px;\n      @scrollbarWidth : 17px; /* This is a constant */\n\n      /* In container.variables */\n      @tabletMinimumGutter : (@emSize  * 1); /* require 1em gutter */\n      @tabletWidth : @tabletBreakpoint - (@tabletMinimumGutter * 2) - @scrollbarWidth;\n      
\n\n      
This is the same as 768px - (14px * 2) - 17px or 723px
\n\n      
Adjusting site breakpoints in site.variables to use custom values will automatically adjust container widths.
\n\n\n    
\n  
\n
\n\n\n
\n\n  
\n\n    
Types
\n\n    
\n      
Container
\n      
A standard container
\n    
\n\n    
\n      
\n        
\n      
\n    
\n\n  
\n\n  
\n    
Lorem ipsum dolor sit amet, consectetuer adipiscing\n    elit. Aenean commodo ligula eget dolor. Aenean massa\n    strong. Cum sociis natoque penatibus\n    et magnis dis parturient montes, nascetur ridiculus\n    mus. Donec quam felis, ultricies nec, pellentesque\n    eu, pretium quis, sem. Nulla consequat massa quis\n    enim. Donec pede justo, fringilla vel, aliquet nec,\n    vulputate eget, arcu. In enim justo, rhoncus ut,\n    imperdiet a, venenatis vitae, justo. Nullam dictum\n    felis eu pede link\n    mollis pretium. Integer tincidunt. Cras dapibus.\n    Vivamus elementum semper nisi. Aenean vulputate\n    eleifend tellus. Aenean leo ligula, porttitor eu,\n    consequat vitae, eleifend ac, enim. Aliquam lorem ante,\n    dapibus in, viverra quis, feugiat a, tellus. Phasellus\n    viverra nulla ut metus varius laoreet. Quisque rutrum.\n    Aenean imperdiet. Etiam ultricies nisi vel augue.\n    Curabitur ullamcorper ultricies nisi.
\n  
\n\n  
\n\n    
\n      
Text Container
\n      
A container can reduce its maximum width to more naturally accomodate a single column of text
\n      
\n        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\n      
\n    
\n\n    
\n      
\n      
\n    
\n  
\n\n  
\n    
Header
\n    
Lorem ipsum dolor sit amet, consectetuer adipiscing\n    elit. Aenean commodo ligula eget dolor. Aenean massa\n    strong. Cum sociis natoque penatibus\n    et magnis dis parturient montes, nascetur ridiculus\n    mus. Donec quam felis, ultricies nec, pellentesque\n    eu, pretium quis, sem. Nulla consequat massa quis\n    enim. Donec pede justo, fringilla vel, aliquet nec,\n    vulputate eget, arcu. In enim justo, rhoncus ut,\n    imperdiet a, venenatis vitae, justo. Nullam dictum\n    felis eu pede link\n    mollis pretium. Integer tincidunt. Cras dapibus.\n    Vivamus elementum semper nisi. Aenean vulputate\n    eleifend tellus. Aenean leo ligula, porttitor eu,\n    consequat vitae, eleifend ac, enim. Aliquam lorem ante,\n    dapibus in, viverra quis, feugiat a, tellus. Phasellus\n    viverra nulla ut metus varius laoreet. Quisque rutrum.\n    Aenean imperdiet. Etiam ultricies nisi vel augue.\n    Curabitur ullamcorper ultricies nisi.
\n    
Lorem ipsum dolor sit amet, consectetuer adipiscing\n    elit. Aenean commodo ligula eget dolor. Aenean massa\n    strong. Cum sociis natoque penatibus\n    et magnis dis parturient montes, nascetur ridiculus\n    mus. Donec quam felis, ultricies nec, pellentesque\n    eu, pretium quis, sem. Nulla consequat massa quis\n    enim. Donec pede justo, fringilla vel, aliquet nec,\n    vulputate eget, arcu. In enim justo, rhoncus ut,\n    imperdiet a, venenatis vitae, justo. Nullam dictum\n    felis eu pede link\n    mollis pretium. Integer tincidunt. Cras dapibus.\n    Vivamus elementum semper nisi. Aenean vulputate\n    eleifend tellus. Aenean leo ligula, porttitor eu,\n    consequat vitae, eleifend ac, enim. Aliquam lorem ante,\n    dapibus in, viverra quis, feugiat a, tellus. Phasellus\n    viverra nulla ut metus varius laoreet. Quisque rutrum.\n    Aenean imperdiet. Etiam ultricies nisi vel augue.\n    Curabitur ullamcorper ultricies nisi.
\n  
\n\n  
\n\n\n    
Variations
\n\n    
\n      
Text Alignment
\n      
A container can specify its text alignment
\n\n    
\n\n    
\n      
\n        
\n      
\n      
\n        
\n      
\n      
\n        
\n      
\n      
\n        
\n      
\n    
\n\n    
\n      Left Aligned\n    
\n    
\n      Center Aligned\n    
\n    
\n      Right Aligned\n    
\n    
\n      Justified\n      
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing\n      elit. Aenean commodo ligula eget dolor. Aenean massa\n      strong. Cum sociis natoque penatibus\n      et magnis dis parturient montes, nascetur ridiculus\n      mus. Donec quam felis, ultricies nec, pellentesque\n      eu, pretium quis, sem. Nulla consequat massa quis\n      enim. Donec pede justo, fringilla vel, aliquet nec,\n      vulputate eget, arcu. In enim justo, rhoncus ut,\n      imperdiet a, venenatis vitae, justo. Nullam dictum\n      felis eu pede link\n      mollis pretium. Integer tincidunt. Cras dapibus.\n      Vivamus elementum semper nisi. Aenean vulputate\n      eleifend tellus. Aenean leo ligula, porttitor eu,\n      consequat vitae, eleifend ac, enim. Aliquam lorem ante,\n      dapibus in, viverra quis, feugiat a, tellus. Phasellus\n      viverra nulla ut metus varius laoreet. Quisque rutrum.\n      Aenean imperdiet. Etiam ultricies nisi vel augue.\n      Curabitur ullamcorper ultricies nisi.
\n      
Lorem ipsum dolor sit amet, consectetuer adipiscing\n      elit. Aenean commodo ligula eget dolor. Aenean massa\n      strong. Cum sociis natoque penatibus\n      et magnis dis parturient montes, nascetur ridiculus\n      mus. Donec quam felis, ultricies nec, pellentesque\n      eu, pretium quis, sem. Nulla consequat massa quis\n      enim. Donec pede justo, fringilla vel, aliquet nec,\n      vulputate eget, arcu. In enim justo, rhoncus ut,\n      imperdiet a, venenatis vitae, justo. Nullam dictum\n      felis eu pede link\n      mollis pretium. Integer tincidunt. Cras dapibus.\n      Vivamus elementum semper nisi. Aenean vulputate\n      eleifend tellus. Aenean leo ligula, porttitor eu,\n      consequat vitae, eleifend ac, enim. Aliquam lorem ante,\n      dapibus in, viverra quis, feugiat a, tellus. Phasellus\n      viverra nulla ut metus varius laoreet. Quisque rutrum.\n      Aenean imperdiet. Etiam ultricies nisi vel augue.\n      Curabitur ullamcorper ultricies nisi.
\n    
\n\n    
\n      
Fluid
\n      
A fluid container has no maximum width
\n      
Fluid containers are useful for setting text alignment, or other variations on unstyled content
\n\n      
\n        
\n          Fluid\n        
\n      
\n    
\n\n  
\n\n  
\n    
Dogs Roles with Humans
\n    
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.
\n    
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.
\n  
\n\n  
\n\n
\n\n
\n\n\n  
\n\n    
Examples
\n\n    
\n      
Containers Using Grids
\n      
A container can be combined with a grid allowing you to use all of the layout and alignment available for grids including responsive patterns.
\n    
\n\n    
\n      
\n        
\n          
\n          
\n        
\n        
\n          
\n          
\n        
\n        
\n          
\n          
\n        
\n        
\n          
\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
\n      \n      \n      \n      \n      \n    
\n    
\n      \n      \n      \n      \n      \n    
\n    
\n      \n      \n      \n      \n      \n    
\n    
\n      \n      \n      \n      \n      \n    
\n  
\n\n  
\n    
\n      
Centered Menu
\n      
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.
\n    
\n\n    
\n      
\n        
\n          \n             Home\n          \n          \n             Browse\n          \n          \n             Messages\n          \n          
\n            More\n            \n            
\n               Edit Profile\n               Choose Language\n               Account Settings\n            
\n          
\n          
\n            
\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
\n      \n         Home\n      \n      \n         Browse\n      \n      \n         Messages\n      \n      
\n        More\n        \n        
\n           Edit Profile\n           Choose Language\n           Account Settings\n        
\n      
\n      
\n        
\n      
\n    
\n  
\n\n  
\n\n    
\n      
Container Segment
\n      
A container can be used with a segment
\n    
\n\n    
\n      
\n        
Dogs Roles with Humans
\n        
\n        
\n      
\n    
\n  
\n\n  
\n    
Dogs Roles with Humans
\n    
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.
\n    
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.
\n  
\n\n\n  
\n
\n"
  },
  {
    "path": "server/documents/elements/divider.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'divider'\nstandalone  : true\n\nelement     : 'divider'\nelementType : 'element'\n\ntitle       : 'Divider'\ndescription : 'A divider visually segments content into groups'\ntype        : 'UI Element'\n\nthemes      : ['default']\n---\n\n<%- @partial('header') %>\n\n\n
\n\n  
Types
\n  
\n    
Divider
\n    
A standard divider
\n    
To add a divider between parts of a grid use a divided grid variation.
\n    \n    
\n    \n  
\n\n  
\n    
Vertical Divider
\n    
A divider can segment content vertically
\n    
\n      Vertical dividers requires position: relative on the element that you would like to contain the divider\n    
\n    
\n      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).\n    
\n    
\n      
\n        
\n          \n          \n          \n          \n        
\n        
\n          \n          \n          \n          \n        
\n      
\n      
\n        and\n      
\n    
\n  
\n  
\n    
\n      A vertical divider will automatically swap to a horizontal divider at mobile resolutions when used inside a stackable grid\n    
\n    
\n      
\n        
\n          
\n            
\n              \n              
\n                \n                \n              
\n            
\n            
\n              \n              
\n                \n                \n              
\n            
\n            
Login
\n          
\n        
\n        
\n          
\n            \n            Sign Up\n          
\n        
\n      
\n      
\n        Or\n      
\n    
\n  
\n\n  
\n    
Horizontal Divider
\n    
A divider can segment content horizontally
\n    
Horizontal dividers can also be used in combination with headers and icons to create different styles of dividers.\n    
\n    
Dividers will automatically vary the size of their dividing rules to match the length of your text
\n    
\n      
\n        \n        \n        
Search
\n      
\n      
\n        Or\n      
\n      
\n        Create New Order\n        \n      
\n    
\n  
\n  
\n    
\n      \n      Description\n    
\n    
Doggie treats are good for all times of the year. Proven to be eaten by 99.9% of all dogs worldwide.
\n    
\n      \n      Specifications\n    
\n    \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
Size1\" x 2\"
Weight6 ounces
ColorYellowish
OdorNot Much Usually
\n  
\n\n  
Variations
\n\n  
\n    
Inverted
\n    
A divider can have its colors inverted
\n    
\n      \n      
\n      \n      
\n        Horizontal\n      
\n    
\n  
\n\n  
\n    
Fitted
\n    
A divider can be fitted, without any space above or below it.
\n    
\n      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.\n      
\n      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.\n    
\n  
\n\n  
\n    
Hidden
\n    
A hidden divider divides content without creating a dividing line
\n    
Section One
\n    \n    \n    
Section Two
\n    \n  
\n\n  
\n    
Section
\n    
A divider can provide greater margins to divide sections of content
\n    
Section One
\n    \n    
\n    
Section Two
\n    \n  
\n\n  
\n    
Clearing
\n    
A divider can clear the contents above it
\n    
\n      
Floated Content
\n      
\n      \n    
\n  
\n\n
\n"
  },
  {
    "path": "server/documents/elements/flag.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'flag-page'\nelement     : 'flag'\nelementType : 'element'\nstandalone  : true\n\ntitle       : 'Flag'\ndescription : 'A flag is used to represent a political state'\ntype        : 'UI Element'\n\n---\n\n\n<%- @partial('header') %>\n\n
\n\n  
\n\n    
Definition
\n\n    
\n      
Flag
\n      
A flag can use the two digit country code, the full name, or a common alias
\n      
\n        \n        \n        \n      
\n    
\n\n    
Types
\n    
\n      
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
\n    
\n    \n      \n        \n        \n        \n        \n      \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n        \n        \n        \n        \n      \n      \n    
FlagNameISO 3166-2 Code ?Additional Aliases
Andorraad
U.A.EaeUnited Arab Emirates
Afghanistanaf
Antiguaag
Anguillaai
Albaniaal
Armeniaam
Netherlands Antillesan
Angolaao
Argentinaar
American Samoaas
Austriaat
Australiaau
Arubaaw
Aland Islandsax
Azerbaijanaz
Bosniaba
Barbadosbb
Bangladeshbd
Belgiumbe
Burkina Fasobf
Bulgariabg
Bahrainbh
Burundibi
Beninbj
Bermudabm
Bruneibn
Boliviabo
Brazilbr
Bahamasbs
Bhutanbt
Bouvet Islandbv
Botswanabw
Belarusby
Belizebz
Canadaca
Cocos Islandscc
Congocd
Central African Republiccf
Congo Brazzavillecg
Switzerlandch
Cote Divoireci
Cook Islandsck
Chilecl
Camerooncm
Chinacn
Colombiaco
Costa Ricacr
Serbiacs
Cubacu
Cape Verdecv
Christmas Islandcx
Cypruscy
Czech Republiccz
Germanyde
Djiboutidj
Denmarkdk
Dominicadm
Dominican Republicdo
Algeriadz
Ecuadorec
Estoniaee
Egypteg
Western Saharaeh
Eritreaer
Spaines
Ethiopiaet
European Unioneu
Finlandfi
Fijifj
Falkland Islandsfk
Micronesiafm
Faroe Islandsfo
Francefr
Gabonga
United Kingdomgb uk
Englandgb eng
Scotlandgb sct
Walesgb wls
Grenadagd
Georgiage
French Guianagf
Ghanagh
Gibraltargi
Greenlandgl
Gambiagm
Guineagn
Guadeloupegp
Equatorial Guineagq
Greecegr
Sandwich Islandsgs
Guatemalagt
Guamgu
Guinea-bissaugw
Guyanagy
Hong Konghk
Heard Islandhm
Hondurashn
Croatiahr
Haitiht
Hungaryhu
Indonesiaid
Irelandie
Israelil
Indiain
Indian Ocean Territoryio
Iraqiq
Iranir
Icelandis
Italyit
Jamaicajm
Jordanjo
Japanjp
Kenyake
Kyrgyzstankg
Cambodiakh
Kiribatiki
Comoroskm
Saint Kitts And Neviskn
North Koreakp
South Koreakr
Kuwaitkw
Cayman Islandsky
Kazakhstankz
Laosla
Lebanonlb
Saint Lucialc
Liechtensteinli
Sri Lankalk
Liberialr
Lesothols
Lithuanialt
Luxembourglu
Latvialv
Libyaly
Moroccoma
Monacomc
Moldovamd
Montenegrome
Madagascarmg
Marshall Islandsmh
Macedoniamk
Maliml
BurmammMyanmar
Mongoliamn
Macaumo
Northern Mariana Islandsmp
Martiniquemq
Mauritaniamr
Montserratms
Maltamt
Mauritiusmu
Maldivesmv
Malawimw
Mexicomx
Malaysiamy
Mozambiquemz
Namibiana
New Caledonianc
Nigerne
Norfolk Islandnf
Nigeriang
Nicaraguani
Netherlandsnl
Norwayno
Nepalnp
Naurunr
Niuenu
New Zealandnz
Omanom
Panamapa
Perupe
French Polynesiapf
New Guineapg
Philippinesph
Pakistanpk
Polandpl
Saint Pierrepm
Pitcairn Islandspn
Puerto Ricopr
Palestineps
Portugalpt
Palaupw
Paraguaypy
Qatarqa
Reunionre
Romaniaro
Serbiars
Russiaru
Rwandarw
Saudi Arabiasa
Solomon Islandssb
Seychellessc
Sudansd
Swedense
Singaporesg
Saint Helenash
Sloveniasi
Jan MayensjSvalbard
Slovakiask
Sierra Leonesl
San Marinosm
Senegalsn
Somaliaso
Surinamesr
Sao Tomest
El Salvadorsv
Syriasy
Swazilandsz
Caicos Islandstc
Chadtd
French Territoriestf
Togotg
Thailandth
Tajikistantj
Tokelautk
Timorlestetl
Turkmenistantm
Tunisiatn
Tongato
Turkeytr
Trinidadtt
Tuvalutv
Taiwantw
Tanzaniatz
Ukraineua
Ugandaug
Us Minor Islandsum
United StatesusAmerica
Uruguayuy
Uzbekistanuz
Vatican Cityva
Saint Vincentvc
Venezuelave
British Virgin Islandsvg
Us Virgin Islandsvi
Vietnamvn
Vanuatuvu
Wallis And Futunawf
Samoaws
Yemenye
Mayotteyt
South Africaza
Zambiazm
Zimbabwezw
\n\n  
\n
\n"
  },
  {
    "path": "server/documents/elements/header.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'header'\nstandalone  : true\n\nelement     : 'header'\nelementType : 'element'\n\ntitle       : 'Header'\ndescription : 'A header provides a short summary of content'\ntype        : 'UI Element'\n\nthemes      : ['Default', 'Classic', 'Bookish', 'Chubby', 'Material']\n---\n\n<%- @partial('header') %>\n\n\n\n
\n\n  
Types
\n\n  
\n    
Page Headers
\n    
Headers may be oriented to give the hierarchy of a section in the context of the page
\n    
Page headings are sized using rem and are not affected by surrounding content size.
\n    
First header
\n    \n    
Second header
\n    \n    
Third header
\n    \n    
Fourth header
\n    \n    
Fifth header
\n    \n  
\n\n  
\n    
Content Headers
\n    
Headers may be oriented to give the importance of a section in the context of the content that surrounds it
\n    
Content headings are sized with em and are based on the font-size of their container.
\n    
\n       \n       \n    
\n    
\n      
Huge Header
\n      \n      
Large Header
\n      \n      
Medium Header
\n      \n      
Small Header
\n      \n      
Tiny Header
\n      \n    
\n  
\n\n  
\n    
Icon Headers
\n    
A header can be formatted to emphasize an icon
\n    
\n      \n      
\n        Account Settings\n        
Manage your account settings and set e-mail preferences.
\n      
\n    
\n  
\n\n  
\n    
\n      \n      Friends\n    
\n    \n  
\n\n  
\n    
Sub Headers
\n    
Headers may be formatted to label smaller or de-emphasized content.
\n    
\n      Price\n    
\n    $10.99\n  
\n\n  
\n    
\n      
\n        \n        
\n          
Molly
\n          Coordinator\n        
\n      
\n      
\n        \n        
\n          
Elyse
\n          Developer\n        
\n      
\n      
\n        \n        
\n          
Eve
\n          Project Manager\n        
\n      
\n    
\n  
\n\n  
Content
\n\n\n  
\n    
Image
\n    
A header may contain an image
\n    
\n      \n      
\n        Learn More\n      
\n    
\n    \n  
\n  
\n    
\n      \n      Patrick\n    
\n    \n  
\n  
\n    
\n      \n      
\n        Plug-ins\n        
Check out our plug-in marketplace
\n      
\n    
\n    \n  
\n\n\n  
\n    
Icon
\n    
A header may contain an icon
\n    
\n      \n      
\n        Uptime Guarantee\n      
\n    
\n    \n  
\n  
\n    
\n      \n      
\n        Account Settings\n        
Manage your preferences
\n      
\n    
\n    \n  
\n\n  
\n    
Subheader
\n    
Headers may contain subheaders
\n    
\n      Account Settings\n      
Manage your account settings and set e-mail preferences.
\n    
\n    \n  
\n  
\n    
\n      H1\n      
Sub Header
\n    
\n    
\n      H2\n      
Sub Header
\n    
\n    
\n      H3\n      
Sub Header
\n    
\n    
\n      H4\n      
Sub Header
\n    
\n    
\n      H5\n      
Sub Header
\n    
\n  
\n\n  
States
\n\n  
\n    
Disabled
\n    
A header can show that it is inactive
\n    
\n      Disabled Header\n    
\n    \n  
\n\n  
Variations
\n\n\n  
\n    
Dividing
\n    
A header can be formatted to divide itself from the content below it
\n    \n    
\n      Dividing Header\n    
\n    \n  
\n\n\n  
\n    
Block
\n    
A header can be formatted to appear inside a content block
\n    
\n      Block Header\n    
\n    \n\n  
\n\n  
\n    
Attached
\n    
A header can be attached to other content, like a segment
\n    
\n      Top Attached\n    
\n    
\n      \n    
\n    
\n      Attached\n    
\n    
\n      \n    
\n    
\n      Bottom Attached\n    
\n  
\n\n  
\n    
Floating
\n    
A header can sit to the left or right of other content
\n    
\n      
\n        Go Forward\n      
\n      
\n        Go Back\n      
\n    
\n  
\n  
\n    
Text Alignment
\n    
A header can have its text aligned to a side
\n    
\n      
\n        Right\n      
\n      
\n        Left\n      
\n      
\n        This should take up the full width even if only one line\n      
\n      
\n        Center\n      
\n    
\n  
\n\n  
\n    
Colored
\n    
A header can be formatted with different colors
\n    
Red
\n    
Orange
\n    
Yellow
\n    
Olive
\n    
Green
\n    
Teal
\n    
Blue
\n    
Purple
\n    
Violet
\n    
Pink
\n    
Brown
\n    
Grey
\n  
\n\n\n  
\n    
Inverted
\n    
A header can have its colors inverted for contrast
\n    
\n      Inverted headers use modified light versions of your site's color scheme that are adapted to have more contrast on dark background\n    
\n    
\n      
Red
\n      
Orange
\n      
Yellow
\n      
Olive
\n      
Green
\n      
Teal
\n      
Blue
\n      
Purple
\n      
Violet
\n      
Pink
\n      
Brown
\n      
Grey
\n    
\n  
\n\n
\n"
  },
  {
    "path": "server/documents/elements/icon.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'icon'\nstandalone  : true\n\nelement     : 'icon'\nelementType : 'element'\n\ntitle       : 'Icon'\ndescription : 'An icon is a glyph used to represent something else'\ntype        : 'UI Element'\n\nthemes      : ['Default']\n---\n\n<%- @partial('header', { tabs: { icon: 'Icons', definition: 'Definition' } }) %>\n\n\n\n
\n\n  
\n\n    \n      
\n        \n        \n      
\n      
\n    \n\n    
Icon Set
\n    
An icon set contains an arbitrary number of glyphs
\n    
\n      Icons serve a very similar function to text in a page. In Semantic icons receive a special tag <i> which allow for an abbreviated markup when sitting along-side text.\n    
\n\n    
Semantic includes a complete port of Font Awesome 5.0.8 designed by the FontAwesome team for its standard icon set.
\n\n    
\n      
Accessibility
\n      
Icons can represent accessibility standards
\n      
\n        
american sign language interpreting
\n        
assistive listening systems
\n        
audio description
\n        
blind
\n        
braille
\n        
closed captioning
\n        
closed captioning outline
\n        
deaf
\n        
low vision
\n        
phone volume
\n        
question circle
\n        
question circle outline
\n        
sign language
\n        
tty
\n        
universal access
\n        
wheelchair
\n      
\n      
\n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Arrows
\n      
Icons can be used to indicate a direction
\n      
\n        
angle double down
\n        
angle double left
\n        
angle double right
\n        
angle double up
\n        
angle down
\n        
angle left
\n        
angle right
\n        
angle up
\n        
arrow alternate circle down
\n        
arrow alternate circle down outline
\n        
arrow alternate circle left
\n        
arrow alternate circle left outline
\n        
arrow alternate circle right
\n        
arrow alternate circle right outline
\n        
arrow alternate circle up
\n        
arrow alternate circle up outline
\n        
arrow circle down
\n        
arrow circle left
\n        
arrow circle right
\n        
arrow circle up
\n        
arrow down
\n        
arrow left
\n        
arrow right
\n        
arrow up
\n        
arrows alternate
\n        
arrows alternate horizontal
\n        
arrows alternate vertical
\n        
caret down
\n        
caret left
\n        
caret right
\n        
caret square down
\n        
caret square down outline
\n        
caret square left
\n        
caret square left outline
\n        
caret square right
\n        
caret square right outline
\n        
caret square up
\n        
caret square up outline
\n        
caret up
\n        
cart arrow down
\n        
chart line
\n        
chevron circle down
\n        
chevron circle left
\n        
chevron circle right
\n        
chevron circle up
\n        
chevron down
\n        
chevron left
\n        
chevron right
\n        
chevron up
\n        
cloud download
\n        
cloud upload
\n        
download
\n        
exchange
\n        
expand arrows alternate
\n        
external alternate
\n        
external square alternate
\n        
hand point down
\n        
hand point down outline
\n        
hand point left
\n        
hand point left outline
\n        
hand point right
\n        
hand point right outline
\n        
hand point up
\n        
hand point up outline
\n        
hand pointer
\n        
hand pointer outline
\n        
history
\n        
level down alternate
\n        
level up alternate
\n        
location arrow
\n        
long arrow alternate down
\n        
long arrow alternate left
\n        
long arrow alternate right
\n        
long arrow alternate up
\n        
mouse pointer
\n        
play
\n        
random
\n        
recycle
\n        
redo
\n        
redo alternate
\n        
reply
\n        
reply all
\n        
retweet
\n        
share
\n        
share square
\n        
share square outline
\n        
sign-in
\n        
sign-out
\n        
sign-in alternate
\n        
sign-out alternate
\n        
sort
\n        
sort alphabet down
\n        
sort alphabet up
\n        
sort amount down
\n        
sort amount up
\n        
sort down
\n        
sort numeric down
\n        
sort numeric up
\n        
sort up
\n        
sync
\n        
sync alternate
\n        
text height
\n        
text width
\n        
undo
\n        
undo alternate
\n        
upload
\n        
zoom-in
\n        
zoom-out
\n      
\n      
\n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Audio & Video
\n      
Icons can be used to represent common ways to interact with audio and video
\n      
\n        
audio description
\n        
backward
\n        
circle
\n        
circle outline
\n        
closed captioning
\n        
closed captioning outline
\n        
compress
\n        
eject
\n        
expand
\n        
expand arrows alternate
\n        
fast backward
\n        
fast forward
\n        
file audio
\n        
file audio outline
\n        
file video
\n        
file video outline
\n        
film
\n        
forward
\n        
headphones
\n        
microphone
\n        
microphone slash
\n        
music
\n        
pause
\n        
pause circle
\n        
pause circle outline
\n        
phone volume
\n        
play
\n        
play circle
\n        
play circle outline
\n        
podcast
\n        
random
\n        
redo
\n        
redo alternate
\n        
rss
\n        
rss square
\n        
step backward
\n        
step forward
\n        
stop
\n        
stop circle
\n        
stop circle outline
\n        
sync
\n        
sync alternate
\n        
undo
\n        
undo alternate
\n        
video
\n        
volume down
\n        
volume off
\n        
volume up
\n      
\n      
\n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Business
\n      
Icons can be used to represent business and common business actions
\n      
\n        
address book
\n        
address book outline
\n        
address card
\n        
address card outline
\n        
archive
\n        
balance scale
\n        
birthday cake
\n        
book
\n        
briefcase
\n        
building
\n        
building outline
\n        
bullhorn
\n        
bullseye
\n        
calculator
\n        
calendar
\n        
calendar outline
\n        
calendar alternate
\n        
calendar alternate outline
\n        
certificate
\n        
chart area
\n        
chart bar
\n        
chart bar outline
\n        
chart line
\n        
chart pie
\n        
clipboard
\n        
clipboard outline
\n        
coffee
\n        
columns
\n        
compass
\n        
compass outline
\n        
copy
\n        
copy outline
\n        
copyright
\n        
copyright outline
\n        
cut
\n        
edit
\n        
edit outline
\n        
envelope
\n        
envelope outline
\n        
envelope open
\n        
envelope open outline
\n        
envelope square
\n        
eraser
\n        
fax
\n        
file
\n        
file outline
\n        
file alternate
\n        
file alternate outline
\n        
folder
\n        
folder outline
\n        
folder open
\n        
folder open outline
\n        
globe
\n        
industry
\n        
paperclip
\n        
paste
\n        
pen square
\n        
pencil alternate
\n        
percent
\n        
phone
\n        
phone square
\n        
phone volume
\n        
registered
\n        
registered outline
\n        
save
\n        
save outline
\n        
sitemap
\n        
sticky note
\n        
sticky note outline
\n        
suitcase
\n        
table
\n        
tag
\n        
tags
\n        
tasks
\n        
thumbtack
\n        
trademark
\n      
\n      
\n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Chess
\n      
Icons which represent the game chess
\n      
\n        
chess
\n        
chess bishop
\n        
chess board
\n        
chess king
\n        
chess knight
\n        
chess pawn
\n        
chess queen
\n        
chess rook
\n        
square full
\n      
\n      
\n        \n        \n        \n        \n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Code
\n      
Icons can represent programming and programming tools
\n      
\n        
archive
\n        
barcode
\n        
bath
\n        
bug
\n        
code
\n        
code branch
\n        
coffee
\n        
file
\n        
file outline
\n        
file alternate
\n        
file alternate outline
\n        
file code
\n        
file code outline
\n        
filter
\n        
fire extinguisher
\n        
folder
\n        
folder outline
\n        
folder open
\n        
folder open outline
\n        
keyboard
\n        
keyboard outline
\n        
microchip
\n        
qrcode
\n        
shield alternate
\n        
sitemap
\n        
terminal
\n        
user secret
\n        
window close
\n        
window close outline
\n        
window maximize
\n        
window maximize outline
\n        
window minimize
\n        
window minimize outline
\n        
window restore
\n        
window restore outline
\n      
\n      
\n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Communication
\n      
Icons which represent common ways of communication
\n      
\n        
address book
\n        
address book outline
\n        
address card
\n        
address card outline
\n        
american sign language interpreting
\n        
assistive listening systems
\n        
at
\n        
bell
\n        
bell outline
\n        
bell slash
\n        
bell slash outline
\n        
bullhorn
\n        
comment
\n        
comment outline
\n        
comment alternate
\n        
comment alternate outline
\n        
comments
\n        
comments outline
\n        
envelope
\n        
envelope outline
\n        
envelope open
\n        
envelope open outline
\n        
envelope square
\n        
fax
\n        
inbox
\n        
language
\n        
microphone
\n        
microphone slash
\n        
mobile
\n        
mobile alternate
\n        
paper plane
\n        
paper plane outline
\n        
phone
\n        
phone square
\n        
phone volume
\n        
rss
\n        
rss square
\n        
tty
\n        
wifi
\n      
\n      
\n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Computers
\n      
Icons can represent computing devices, or types of content found on a computer
\n      
\n        
desktop
\n        
download
\n        
hdd
\n        
hdd outline
\n        
headphones
\n        
keyboard
\n        
keyboard outline
\n        
laptop
\n        
microchip
\n        
mobile
\n        
mobile alternate
\n        
plug
\n        
power off
\n        
print
\n        
save
\n        
save outline
\n        
server
\n        
tablet
\n        
tablet alternate
\n        
tv
\n        
upload
\n      
\n      
\n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Currency
\n      
Icons can represent units of currency
\n      
\n        
dollar sign
\n        
euro sign
\n        
lira sign
\n        
money bill alternate
\n        
money bill alternate outline
\n        
pound sign
\n        
ruble sign
\n        
rupee sign
\n        
shekel sign
\n        
won sign
\n        
yen sign
\n      
\n      
\n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Date & Time
\n      
Icons that represent common ways of showing date and time
\n      
\n        
bell
\n        
bell outline
\n        
bell slash
\n        
bell slash outline
\n        
calendar
\n        
calendar outline
\n        
calendar alternate
\n        
calendar alternate outline
\n        
calendar check
\n        
calendar check outline
\n        
calendar minus
\n        
calendar minus outline
\n        
calendar plus
\n        
calendar plus outline
\n        
calendar times
\n        
calendar times outline
\n        
clock
\n        
clock outline
\n        
hourglass
\n        
hourglass outline
\n        
hourglass end
\n        
hourglass half
\n        
hourglass start
\n        
stopwatch
\n      
\n      
\n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Design
\n      
Icons can represent common design related symbols or techniques
\n      
\n        
adjust
\n        
clone
\n        
clone outline
\n        
copy
\n        
copy outline
\n        
crop
\n        
crosshairs
\n        
cut
\n        
edit
\n        
edit outline
\n        
eraser
\n        
eye
\n        
eye dropper
\n        
eye slash
\n        
eye slash outline
\n        
object group
\n        
object group outline
\n        
object ungroup
\n        
object ungroup outline
\n        
paint brush
\n        
paste
\n        
pencil alternate
\n        
save
\n        
save outline
\n        
tint
\n      
\n      
\n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Editors
\n      
Icons can represent text editors and common editor actions
\n      
\n        
align center
\n        
align justify
\n        
align left
\n        
align right
\n        
bold
\n        
clipboard
\n        
clipboard outline
\n        
clone
\n        
clone outline
\n        
columns
\n        
copy
\n        
copy outline
\n        
cut
\n        
edit
\n        
edit outline
\n        
eraser
\n        
file
\n        
file outline
\n        
file alternate
\n        
file alternate outline
\n        
font
\n        
heading
\n        
i cursor
\n        
indent
\n        
italic
\n        
linkify
\n        
list
\n        
list alternate
\n        
list alternate outline
\n        
list ol
\n        
list ul
\n        
outdent
\n        
paper plane
\n        
paper plane outline
\n        
paperclip
\n        
paragraph
\n        
paste
\n        
pencil alternate
\n        
print
\n        
quote left
\n        
quote right
\n        
redo
\n        
redo alternate
\n        
reply
\n        
reply all
\n        
share
\n        
strikethrough
\n        
subscript
\n        
superscript
\n        
sync
\n        
sync alternate
\n        
table
\n        
tasks
\n        
text height
\n        
text width
\n        
th
\n        
th large
\n        
th list
\n        
trash
\n        
trash alternate
\n        
trash alternate outline
\n        
underline
\n        
undo
\n        
undo alternate
\n        
unlink
\n      
\n      
\n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Files
\n      
Icons can represent elements of a computer and its file system
\n      
\n        
archive
\n        
clone
\n        
clone outline
\n        
copy
\n        
copy outline
\n        
cut
\n        
file
\n        
file outline
\n        
file alternate
\n        
file alternate outline
\n        
file archive
\n        
file archive outline
\n        
file audio
\n        
file audio outline
\n        
file code
\n        
file code outline
\n        
file excel
\n        
file excel outline
\n        
file image
\n        
file image outline
\n        
file pdf
\n        
file pdf outline
\n        
file powerpoint
\n        
file powerpoint outline
\n        
file video
\n        
file video outline
\n        
file word
\n        
file word outline
\n        
folder
\n        
folder outline
\n        
folder open
\n        
folder open outline
\n        
paste
\n        
save
\n        
save outline
\n        
sticky note
\n        
sticky note outline
\n      
\n      
\n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Genders
\n      
Icons can represent genders or types of sexuality
\n      
\n        
genderless
\n        
mars
\n        
mars double
\n        
mars stroke
\n        
mars stroke horizontal
\n        
mars stroke vertical
\n        
mercury
\n        
neuter
\n        
transgender
\n        
transgender alternate
\n        
venus
\n        
venus double
\n        
venus mars
\n      
\n      
\n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Hands & Gestures
\n      
Icons can represent hand signals and gestures
\n      
\n        
hand lizard
\n        
hand lizard outline
\n        
hand paper
\n        
hand paper outline
\n        
hand peace
\n        
hand peace outline
\n        
hand point down
\n        
hand point down outline
\n        
hand point left
\n        
hand point left outline
\n        
hand point right
\n        
hand point right outline
\n        
hand point up
\n        
hand point up outline
\n        
hand pointer
\n        
hand pointer outline
\n        
hand rock
\n        
hand rock outline
\n        
hand scissors
\n        
hand scissors outline
\n        
hand spock
\n        
hand spock outline
\n        
handshake
\n        
handshake outline
\n        
thumbs down
\n        
thumbs down outline
\n        
thumbs up
\n        
thumbs up outline
\n      
\n      
\n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Health
\n      
Icons which represent common health symbols
\n      
\n        
ambulance
\n        
h square
\n        
heart
\n        
heart outline
\n        
heartbeat
\n        
hospital
\n        
hospital outline
\n        
medkit
\n        
plus square
\n        
plus square outline
\n        
stethoscope
\n        
user md
\n        
wheelchair
\n      
\n      
\n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Images
\n      
Icons that represent common image symbols and actions
\n      
\n        
adjust
\n        
bolt
\n        
camera
\n        
camera retro
\n        
clone
\n        
clone outline
\n        
compress
\n        
expand
\n        
eye
\n        
eye dropper
\n        
eye slash
\n        
eye slash outline
\n        
file image
\n        
file image outline
\n        
film
\n        
id badge
\n        
id badge outline
\n        
id card
\n        
id card outline
\n        
image
\n        
image outline
\n        
images
\n        
images outline
\n        
sliders horizontal
\n        
tint
\n      
\n      
\n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Interfaces
\n      
Icons can represent common actions a user can take or use
\n      
\n        
ban
\n        
barcode
\n        
bars
\n        
beer
\n        
bell
\n        
bell outline
\n        
bell slash
\n        
bell slash outline
\n        
bug
\n        
bullhorn
\n        
bullseye
\n        
calculator
\n        
calendar
\n        
calendar outline
\n        
calendar alternate
\n        
calendar alternate outline
\n        
calendar check
\n        
calendar check outline
\n        
calendar minus
\n        
calendar minus outline
\n        
calendar plus
\n        
calendar plus outline
\n        
calendar times
\n        
calendar times outline
\n        
certificate
\n        
check
\n        
check circle
\n        
check circle outline
\n        
check square
\n        
check square outline
\n        
circle
\n        
circle outline
\n        
clipboard
\n        
clipboard outline
\n        
clone
\n        
clone outline
\n        
cloud
\n        
cloud download
\n        
cloud upload
\n        
close icon
\n        
coffee
\n        
cog
\n        
cogs
\n        
copy
\n        
copy outline
\n        
cut
\n        
database
\n        
dot circle
\n        
dot circle outline
\n        
download
\n        
edit
\n        
edit outline
\n        
ellipsis horizontal
\n        
ellipsis vertical
\n        
envelope
\n        
envelope outline
\n        
envelope open
\n        
envelope open outline
\n        
eraser
\n        
exclamation
\n        
exclamation circle
\n        
exclamation triangle
\n        
external alternate
\n        
external square alternate
\n        
eye
\n        
eye slash
\n        
eye slash outline
\n        
file
\n        
file outline
\n        
file alternate
\n        
file alternate outline
\n        
filter
\n        
flag
\n        
flag outline
\n        
flag checkered
\n        
folder
\n        
folder outline
\n        
folder open
\n        
folder open outline
\n        
frown
\n        
frown outline
\n        
hashtag
\n        
heart
\n        
heart outline
\n        
history
\n        
home
\n        
i cursor
\n        
info
\n        
info circle
\n        
language
\n        
magic
\n        
meh
\n        
meh outline
\n        
microphone
\n        
microphone slash
\n        
minus
\n        
minus circle
\n        
minus square
\n        
minus square outline
\n        
paste
\n        
pencil alternate
\n        
plus
\n        
plus circle
\n        
plus square
\n        
plus square outline
\n        
qrcode
\n        
question
\n        
question circle
\n        
question circle outline
\n        
quote left
\n        
quote right
\n        
redo
\n        
redo alternate
\n        
reply
\n        
reply all
\n        
rss
\n        
rss square
\n        
save
\n        
save outline
\n        
search
\n        
search minus
\n        
search plus
\n        
share
\n        
share alternate
\n        
share alternate square
\n        
share square
\n        
share square outline
\n        
shield alternate
\n        
sign-in
\n        
sign-out
\n        
signal
\n        
sitemap
\n        
sliders horizontal
\n        
smile
\n        
smile outline
\n        
sort
\n        
sort alphabet down
\n        
sort alphabet up
\n        
sort amount down
\n        
sort amount up
\n        
sort down
\n        
sort numeric down
\n        
sort numeric up
\n        
sort up
\n        
star
\n        
star outline
\n        
star half
\n        
star half outline
\n        
sync
\n        
sync alternate
\n        
thumbs down
\n        
thumbs down outline
\n        
thumbs up
\n        
thumbs up outline
\n        
times
\n        
times circle
\n        
times circle outline
\n        
toggle off
\n        
toggle on
\n        
trash
\n        
trash alternate
\n        
trash alternate outline
\n        
trophy
\n        
undo
\n        
undo alternate
\n        
upload
\n        
user
\n        
user outline
\n        
user circle
\n        
user circle outline
\n        
wifi
\n        
x icon
\n      
\n      
\n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Logistics
\n      
Icons can represent common logistic activity
\n      
\n        
box
\n        
boxes
\n        
clipboard check
\n        
clipboard list
\n        
dolly
\n        
dolly flatbed
\n        
pallet
\n        
shipping fast
\n        
truck
\n        
warehouse
\n      
\n      
\n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Maps
\n      
Icons can be used to represent elements on a map
\n      
\n        
ambulance
\n        
anchor
\n        
balance scale
\n        
bath
\n        
bed
\n        
beer
\n        
bell
\n        
bell outline
\n        
bell slash
\n        
bell slash outline
\n        
bicycle
\n        
binoculars
\n        
birthday cake
\n        
blind
\n        
bomb
\n        
book
\n        
bookmark
\n        
bookmark outline
\n        
briefcase
\n        
building
\n        
building outline
\n        
car
\n        
coffee
\n        
crosshairs
\n        
dollar sign
\n        
eye
\n        
eye slash
\n        
eye slash outline
\n        
fighter jet
\n        
fire
\n        
fire extinguisher
\n        
flag
\n        
flag outline
\n        
flag checkered
\n        
flask
\n        
gamepad
\n        
gavel
\n        
gift
\n        
glass martini
\n        
globe
\n        
graduation cap
\n        
h square
\n        
heart
\n        
heart outline
\n        
heartbeat
\n        
home
\n        
hospital
\n        
hospital outline
\n        
image
\n        
image outline
\n        
images
\n        
images outline
\n        
industry
\n        
info
\n        
info circle
\n        
key
\n        
leaf
\n        
lemon
\n        
lemon outline
\n        
life ring
\n        
life ring outline
\n        
lightbulb
\n        
lightbulb outline
\n        
location arrow
\n        
low vision
\n        
magnet
\n        
male
\n        
map
\n        
map outline
\n        
map marker
\n        
map marker alternate
\n        
map pin
\n        
map signs
\n        
medkit
\n        
money bill alternate
\n        
money bill alternate outline
\n        
motorcycle
\n        
music
\n        
newspaper
\n        
newspaper outline
\n        
paw
\n        
phone
\n        
phone square
\n        
phone volume
\n        
plane
\n        
plug
\n        
plus
\n        
plus square
\n        
plus square outline
\n        
print
\n        
recycle
\n        
road
\n        
rocket
\n        
search
\n        
search minus
\n        
search plus
\n        
ship
\n        
shopping bag
\n        
shopping basket
\n        
shopping cart
\n        
shower
\n        
street view
\n        
subway
\n        
suitcase
\n        
tag
\n        
tags
\n        
taxi
\n        
thumbtack
\n        
ticket alternate
\n        
tint
\n        
train
\n        
tree
\n        
trophy
\n        
truck
\n        
tty
\n        
umbrella
\n        
university
\n        
utensil spoon
\n        
utensils
\n        
wheelchair
\n        
wifi
\n        
wrench
\n      
\n      
\n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Medical
\n      
Icons can represent common medical actions
\n      
\n        
ambulance
\n        
band aid
\n        
dna
\n        
first aid
\n        
heart
\n        
heart outline
\n        
heartbeat
\n        
hospital
\n        
hospital outline
\n        
hospital symbol
\n        
pills
\n        
plus
\n        
stethoscope
\n        
syringe
\n        
thermometer
\n        
user md
\n        
weight
\n      
\n      
\n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Objects
\n      
Icons can be used to represent common objects
\n      
\n        
ambulance
\n        
anchor
\n        
archive
\n        
balance scale
\n        
bath
\n        
bed
\n        
beer
\n        
bell
\n        
bell outline
\n        
bicycle
\n        
binoculars
\n        
birthday cake
\n        
bomb
\n        
book
\n        
bookmark
\n        
bookmark outline
\n        
briefcase
\n        
bug
\n        
building
\n        
building outline
\n        
bullhorn
\n        
bullseye
\n        
bus
\n        
calculator
\n        
calendar
\n        
calendar outline
\n        
calendar alternate
\n        
calendar alternate outline
\n        
camera
\n        
camera retro
\n        
car
\n        
clipboard
\n        
clipboard outline
\n        
cloud
\n        
coffee
\n        
cog
\n        
cogs
\n        
compass
\n        
compass outline
\n        
copy
\n        
copy outline
\n        
cube
\n        
cubes
\n        
cut
\n        
envelope
\n        
envelope outline
\n        
envelope open
\n        
envelope open outline
\n        
eraser
\n        
eye
\n        
eye dropper
\n        
fax
\n        
fighter jet
\n        
file
\n        
file outline
\n        
file alternate
\n        
file alternate outline
\n        
film
\n        
fire
\n        
fire extinguisher
\n        
flag
\n        
flag outline
\n        
flag checkered
\n        
flask
\n        
futbol
\n        
futbol outline
\n        
gamepad
\n        
gavel
\n        
gem
\n        
gem outline
\n        
gift
\n        
glass martini
\n        
globe
\n        
graduation cap
\n        
hdd
\n        
hdd outline
\n        
headphones
\n        
heart
\n        
heart outline
\n        
home
\n        
hospital
\n        
hospital outline
\n        
hourglass
\n        
hourglass outline
\n        
image
\n        
image outline
\n        
images
\n        
images outline
\n        
industry
\n        
key
\n        
keyboard
\n        
keyboard outline
\n        
laptop
\n        
leaf
\n        
lemon
\n        
lemon outline
\n        
life ring
\n        
life ring outline
\n        
lightbulb
\n        
lightbulb outline
\n        
lock
\n        
lock open
\n        
magic
\n        
magnet
\n        
map
\n        
map outline
\n        
map marker
\n        
map marker alternate
\n        
map pin
\n        
map signs
\n        
medkit
\n        
microchip
\n        
microphone
\n        
mobile
\n        
mobile alternate
\n        
money bill alternate
\n        
money bill alternate outline
\n        
moon
\n        
moon outline
\n        
motorcycle
\n        
newspaper
\n        
newspaper outline
\n        
paint brush
\n        
paper plane
\n        
paper plane outline
\n        
paperclip
\n        
paste
\n        
paw
\n        
pencil alternate
\n        
phone
\n        
plane
\n        
plug
\n        
print
\n        
puzzle piece
\n        
road
\n        
rocket
\n        
save
\n        
save outline
\n        
search
\n        
shield alternate
\n        
shopping bag
\n        
shopping basket
\n        
shopping cart
\n        
shower
\n        
snowflake
\n        
snowflake outline
\n        
space shuttle
\n        
star
\n        
star outline
\n        
sticky note
\n        
sticky note outline
\n        
stopwatch
\n        
subway
\n        
suitcase
\n        
sun
\n        
sun outline
\n        
tablet
\n        
tablet alternate
\n        
tachometer alternate
\n        
tag
\n        
tags
\n        
taxi
\n        
thumbtack
\n        
ticket alternate
\n        
train
\n        
trash
\n        
trash alternate
\n        
trash alternate outline
\n        
tree
\n        
trophy
\n        
truck
\n        
tv
\n        
umbrella
\n        
university
\n        
unlock
\n        
unlock alternate
\n        
utensil spoon
\n        
utensils
\n        
wheelchair
\n        
wrench
\n      
\n      
\n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Payments & Shopping
\n      
Icons can represent common forms of payment and shopping actions
\n      
\n        
bell
\n        
bell outline
\n        
bookmark
\n        
bookmark outline
\n        
bullhorn
\n        
camera
\n        
camera retro
\n        
cart arrow down
\n        
cart plus
\n        
certificate
\n        
credit card
\n        
credit card outline
\n        
gem
\n        
gem outline
\n        
gift
\n        
handshake
\n        
handshake outline
\n        
heart
\n        
heart outline
\n        
key
\n        
shopping bag
\n        
shopping basket
\n        
shopping cart
\n        
star
\n        
star outline
\n        
tag
\n        
tags
\n        
thumbs down
\n        
thumbs down outline
\n        
thumbs up
\n        
thumbs up outline
\n        
trophy
\n      
\n      
\n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Shapes
\n      
Icons can be used to create shapes
\n      
\n        
bookmark
\n        
bookmark outline
\n        
calendar
\n        
calendar outline
\n        
certificate
\n        
circle
\n        
circle outline
\n        
cloud
\n        
comment
\n        
comment outline
\n        
file
\n        
file outline
\n        
folder
\n        
folder outline
\n        
heart
\n        
heart outline
\n        
map marker
\n        
play
\n        
square
\n        
square outline
\n        
star
\n        
star outline
\n      
\n      
\n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Spinners
\n      
Icons can represent loading
\n      
\n        
asterisk
\n        
certificate
\n        
circle notch
\n        
cog
\n        
compass
\n        
compass outline
\n        
crosshairs
\n        
life ring
\n        
life ring outline
\n        
snowflake
\n        
snowflake outline
\n        
spinner
\n        
sun
\n        
sun outline
\n        
sync
\n      
\n      
\n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Sports
\n      
Icons which represent sports
\n      
\n        
baseball ball
\n        
basketball ball
\n        
bowling ball
\n        
football ball
\n        
futbol
\n        
futbol outline
\n        
golf ball
\n        
hockey puck
\n        
quidditch
\n        
table tennis
\n        
volleyball ball
\n      
\n      
\n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Status
\n      
Icons can represent different states
\n      
\n        
ban
\n        
battery empty
\n        
battery full
\n        
battery half
\n        
battery quarter
\n        
battery three quarters
\n        
bell
\n        
bell outline
\n        
bell slash
\n        
bell slash outline
\n        
calendar
\n        
calendar outline
\n        
calendar alternate
\n        
calendar alternate outline
\n        
calendar check
\n        
calendar check outline
\n        
calendar minus
\n        
calendar minus outline
\n        
calendar plus
\n        
calendar plus outline
\n        
calendar times
\n        
calendar times outline
\n        
cart arrow down
\n        
cart plus
\n        
exclamation
\n        
exclamation circle
\n        
exclamation triangle
\n        
eye
\n        
eye slash
\n        
eye slash outline
\n        
file
\n        
file outline
\n        
file alternate
\n        
file alternate outline
\n        
folder
\n        
folder outline
\n        
folder open
\n        
folder open outline
\n        
info
\n        
info circle
\n        
lock
\n        
lock open
\n        
minus
\n        
minus circle
\n        
minus square
\n        
minus square outline
\n        
plus
\n        
plus circle
\n        
plus square
\n        
plus square outline
\n        
question
\n        
question circle
\n        
question circle outline
\n        
shield alternate
\n        
shopping cart
\n        
sign in alternate
\n        
sign out alternate
\n        
thermometer empty
\n        
thermometer full
\n        
thermometer half
\n        
thermometer quarter
\n        
thermometer three quarters
\n        
thumbs down
\n        
thumbs down outline
\n        
thumbs up
\n        
thumbs up outline
\n        
toggle off
\n        
toggle on
\n        
unlock
\n        
unlock alternate
\n      
\n      
\n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Users & People
\n      
Icons can represent users or people
\n      
\n        
address book
\n        
address book outline
\n        
address card
\n        
address card outline
\n        
bed
\n        
blind
\n        
child
\n        
female
\n        
frown
\n        
frown outline
\n        
id badge
\n        
id badge outline
\n        
id card
\n        
id card outline
\n        
male
\n        
meh
\n        
meh outline
\n        
power off
\n        
smile
\n        
smile outline
\n        
street view
\n        
user
\n        
user outline
\n        
user circle
\n        
user circle outline
\n        
user md
\n        
user plus
\n        
user secret
\n        
user times
\n        
users
\n        
wheelchair
\n      
\n      
\n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Vehicles
\n      
Icons can represent vehicles or transport
\n      
\n        
ambulance
\n        
bicycle
\n        
bus
\n        
car
\n        
fighter jet
\n        
motorcycle
\n        
paper plane
\n        
paper plane outline
\n        
plane
\n        
rocket
\n        
ship
\n        
shopping cart
\n        
space shuttle
\n        
subway
\n        
taxi
\n        
train
\n        
truck
\n        
wheelchair
\n      
\n      
\n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Writing
\n      
Icons can represent writing and editing
\n      
\n        
archive
\n        
book
\n        
bookmark
\n        
bookmark outline
\n        
edit
\n        
edit outline
\n        
envelope
\n        
envelope outline
\n        
envelope open
\n        
envelope open outline
\n        
eraser
\n        
file
\n        
file outline
\n        
file alternate
\n        
file alternate outline
\n        
folder
\n        
folder outline
\n        
folder open
\n        
folder open outline
\n        
keyboard
\n        
keyboard outline
\n        
newspaper
\n        
newspaper outline
\n        
paper plane
\n        
paper plane outline
\n        
paperclip
\n        
paragraph
\n        
pen square
\n        
pencil alternate
\n        
quote left
\n        
quote right
\n        
sticky note
\n        
sticky note outline
\n        
thumbtack
\n      
\n      
\n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Brands
\n      
Icons can represent logos to common brands
\n      
\n        
500px
\n        
accessible icon
\n        
accusoft
\n        
adn
\n        
adversal
\n        
affiliatetheme
\n        
algolia
\n        
amazon
\n        
amazon pay
\n        
amilia
\n        
android
\n        
angellist
\n        
angrycreative
\n        
angular
\n        
app store
\n        
app store ios
\n        
apper
\n        
apple
\n        
apple pay
\n        
asymmetrik
\n        
audible
\n        
autoprefixer
\n        
avianex
\n        
aviato
\n        
aws
\n        
bandcamp
\n        
behance
\n        
behance square
\n        
bimobject
\n        
bitbucket
\n        
bitcoin
\n        
bity
\n        
black tie
\n        
blackberry
\n        
blogger
\n        
blogger b
\n        
bluetooth
\n        
bluetooth b
\n        
btc
\n        
buromobelexperte
\n        
buysellads
\n        
cc amazon pay
\n        
cc amex
\n        
cc apple pay
\n        
cc diners club
\n        
cc discover
\n        
cc jcb
\n        
cc mastercard
\n        
cc paypal
\n        
cc stripe
\n        
cc visa
\n        
centercode
\n        
chrome
\n        
cloudscale
\n        
cloudsmith
\n        
cloudversify
\n        
codepen
\n        
codiepie
\n        
connectdevelop
\n        
contao
\n        
cpanel
\n        
creative commons
\n        
css3
\n        
css3 alternate
\n        
cuttlefish
\n        
d and d
\n        
dashcube
\n        
delicious
\n        
deploydog
\n        
deskpro
\n        
deviantart
\n        
digg
\n        
digital ocean
\n        
discord
\n        
discourse
\n        
dochub
\n        
docker
\n        
draft2digital
\n        
dribbble
\n        
dribbble square
\n        
dropbox
\n        
drupal
\n        
dyalog
\n        
earlybirds
\n        
edge
\n        
elementor
\n        
ember
\n        
empire
\n        
envira
\n        
erlang
\n        
ethereum
\n        
etsy
\n        
expeditedssl
\n        
facebook
\n        
facebook f
\n        
facebook messenger
\n        
facebook square
\n        
firefox
\n        
first order
\n        
firstdraft
\n        
flickr
\n        
flipboard
\n        
fly
\n        
font awesome
\n        
font awesome alternate
\n        
font awesome flag
\n        
fonticons
\n        
fonticons fi
\n        
fort awesome
\n        
fort awesome alternate
\n        
forumbee
\n        
foursquare
\n        
free code camp
\n        
freebsd
\n        
get pocket
\n        
gg
\n        
gg circle
\n        
git
\n        
git square
\n        
github
\n        
github alternate
\n        
github square
\n        
gitkraken
\n        
gitlab
\n        
gitter
\n        
glide
\n        
glide g
\n        
gofore
\n        
goodreads
\n        
goodreads g
\n        
google
\n        
google drive
\n        
google play
\n        
google plus
\n        
google plus g
\n        
google plus square
\n        
google wallet
\n        
gratipay
\n        
grav
\n        
gripfire
\n        
grunt
\n        
gulp
\n        
hacker news
\n        
hacker news square
\n        
hips
\n        
hire a helper
\n        
hooli
\n        
hotjar
\n        
houzz
\n        
html5
\n        
hubspot
\n        
imdb
\n        
instagram
\n        
internet explorer
\n        
ioxhost
\n        
itunes
\n        
itunes note
\n        
jenkins
\n        
joget
\n        
joomla
\n        
js
\n        
js square
\n        
jsfiddle
\n        
keycdn
\n        
kickstarter
\n        
kickstarter k
\n        
korvue
\n        
laravel
\n        
lastfm
\n        
lastfm square
\n        
leanpub
\n        
less
\n        
linechat
\n        
linkedin
\n        
linkedin alternate
\n        
linode
\n        
linux
\n        
lyft
\n        
magento
\n        
maxcdn
\n        
medapps
\n        
medium
\n        
medium m
\n        
medrt
\n        
meetup
\n        
microsoft
\n        
mix
\n        
mixcloud
\n        
mizuni
\n        
modx
\n        
monero
\n        
napster
\n        
nintendo switch
\n        
node
\n        
node js
\n        
npm
\n        
ns8
\n        
nutritionix
\n        
odnoklassniki
\n        
odnoklassniki square
\n        
opencart
\n        
openid
\n        
opera
\n        
optin monster
\n        
osi
\n        
page4
\n        
pagelines
\n        
palfed
\n        
patreon
\n        
paypal
\n        
periscope
\n        
phabricator
\n        
phoenix framework
\n        
php
\n        
pied piper
\n        
pied piper alternate
\n        
pied piper pp
\n        
pinterest
\n        
pinterest p
\n        
pinterest square
\n        
playstation
\n        
product hunt
\n        
pushed
\n        
python
\n        
qq
\n        
quinscape
\n        
quora
\n        
ravelry
\n        
react
\n        
rebel
\n        
redriver
\n        
reddit
\n        
reddit alien
\n        
reddit square
\n        
rendact
\n        
renren
\n        
replyd
\n        
resolving
\n        
rocketchat
\n        
rockrms
\n        
safari
\n        
sass
\n        
schlix
\n        
scribd
\n        
searchengin
\n        
sellcast
\n        
sellsy
\n        
servicestack
\n        
shirtsinbulk
\n        
simplybuilt
\n        
sistrix
\n        
skyatlas
\n        
skype
\n        
slack
\n        
slack hash
\n        
slideshare
\n        
snapchat
\n        
snapchat ghost
\n        
snapchat square
\n        
soundcloud
\n        
speakap
\n        
spotify
\n        
stack exchange
\n        
stack overflow
\n        
staylinked
\n        
steam
\n        
steam square
\n        
steam symbol
\n        
sticker mule
\n        
strava
\n        
stripe
\n        
stripe s
\n        
studiovinari
\n        
stumbleupon
\n        
stumbleupon circle
\n        
superpowers
\n        
supple
\n        
telegram
\n        
telegram plane
\n        
tencent weibo
\n        
themeisle
\n        
trello
\n        
tripadvisor
\n        
tumblr
\n        
tumblr square
\n        
twitch
\n        
twitter
\n        
twitter square
\n        
typo3
\n        
uber
\n        
uikit
\n        
uniregistry
\n        
untappd
\n        
usb
\n        
ussunnah
\n        
vaadin
\n        
viacoin
\n        
viadeo
\n        
viadeo square
\n        
viber
\n        
vimeo
\n        
vimeo square
\n        
vimeo v
\n        
vine
\n        
vk
\n        
vnv
\n        
vuejs
\n        
wechat
\n        
weibo
\n        
weixin
\n        
whatsapp
\n        
whatsapp square
\n        
whmcs
\n        
wikipedia w
\n        
windows
\n        
wordpress
\n        
wordpress simple
\n        
wpbeginner
\n        
wpexplorer
\n        
wpforms
\n        
xbox
\n        
xing
\n        
xing square
\n        
y combinator
\n        
yahoo
\n        
yandex
\n        
yandex international
\n        
yelp
\n        
yoast
\n        
youtube
\n        
youtube square
\n      
\n      
\n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n      
\n    
\n  
\n\n  
\n\n    
States
\n\n    
\n      
Disabled
\n      
An icon can show that it is disabled
\n      \n    
\n\n    
\n      
Loading
\n      
An icon can be used as a simple loader
\n      \n      \n      \n    
\n\n\n    
Variations
\n\n    
\n      
Fitted
\n      
An icon can be fitted, without any space to the left or right of it.
\n      Tight spacing\n      \n      Tight spacing\n    
\n\n    
\n      
Size
\n      
An icon can vary in size
\n      \n      \n      \n      
\n      \n      
\n      \n      
\n      \n      
\n      \n      
\n      \n    
\n\n    
\n      
Link
\n      
An icon can be formatted as a link
\n      \n      \n    
\n\n    
\n      
Flipped
\n      
An icon can be flipped
\n      \n      \n    
\n\n    
\n      
Rotated
\n      
An icon can be rotated
\n      \n      \n    
\n\n\n    
\n      
Circular
\n      
An icon can be formatted to appear circular
\n      \n      \n      \n      \n    
\n\n    
\n      
Bordered
\n      
\n        In 0.x.x bordered was formally known as squared\n      
\n      
An icon can be formatted to appear bordered
\n      \n      \n      \n      \n    
\n\n    
\n      
Colored
\n      
An icon can be formatted with different colors
\n      \n      \n      \n      \n      \n      \n      \n      \n      \n      \n      \n      \n      \n    
\n\n    
\n      
Inverted
\n      
An icon can have its colors inverted for contrast
\n      
\n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n      
\n    
\n\n    
Groups
\n\n    
\n      
Icons
\n      
Several icons can be used together as a group
\n      \n        \n        \n      \n    
\n    
\n      \n        \n        \n      \n    
\n    
\n      
Corner Icon
\n      
A group of icons can display a smaller corner icon
\n      \n        \n        \n      \n    
\n    
\n      \n        \n        \n      \n      \n        \n        \n      \n      \n        \n        \n      \n      \n        \n        \n      \n    
\n    
\n      
\n        \n          \n          \n        \n        Add on Twitter\n      
\n    
\n\n  
\n\n
\n"
  },
  {
    "path": "server/documents/elements/image.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'image'\nstandalone  : true\n\nelement     : 'image'\nelementType : 'element'\n\ntitle       : 'Image'\ndescription : 'An image is a graphic representation of something'\ntype        : 'UI Element'\n\nthemes      : ['Default']\n---\n\n<%- @partial('header') %>\n\n
\n\n  
Types
\n\n  
\n    
Image
\n    
An image
\n    
\n       Unless a size is specified, images will use the original dimensions of the image up to the size of its container..\n    
\n    
\n      You can specify an img or svg as a ui image or use a child element.\n    
\n    \n  
\n  
\n    
\n      \n    
\n  
\n  
\n    
\n      \n        \n      \n    
\n  
\n\n  
\n    
Image Link
\n    
An image can be formatted to link to other content
\n    \n      \n    \n  
\n\n  
\n    States\n  
\n\n  
\n    
Hidden
\n    
An image can be hidden
\n    \n  
\n\n  
\n    
Disabled
\n    
An image can show that it is disabled and cannot be selected
\n    \n  
\n\n  
Variations
\n\n  
\n    
Avatar
\n    
An image may be formatted to appear inline with text as an avatar
\n    \n    Username\n  
\n\n  
\n    
Bordered
\n    
An image may include a border to emphasize the edges of white or transparent content
\n    \n  
\n\n\n  
\n    
Fluid
\n    
An image can take up the width of its container
\n    \n  
\n\n  
\n    
Rounded
\n    
An image may appear rounded
\n    \n  
\n\n  
\n    
Circular
\n    
An image may appear circular
\n    \n  
\n\n  
\n    
Vertically Aligned
\n    
An image can specify its vertical alignment
\n    \n    Top Aligned\n    
\n    \n    Middle Aligned\n    
\n    \n    Bottom Aligned\n  
\n\n  
\n    
Centered
\n    
An image can appear centered in a content block
\n    
\n      \n      
Te eum doming eirmod, nominati pertinacia argumentum ad his. Ex eam alia facete scriptorem, est autem aliquip detraxit at. Usu ocurreret referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei ex natum rebum iisque.
\n      
Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide phaedrum, vim vivendum maiestatis in.
\n      \n      
Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id. Mei ut facer dolores adolescens, no illum aperiri quo, usu odio brute at. Qui te porro electram, ea dico facete utroque quo. Populo quodsi te eam, wisi everti eos ex, eum elitr altera utamur at. Quodsi convenire mnesarchum eu per, quas minimum postulant per id.
\n    
\n  
\n\n  
\n    
Spaced
\n    
An image can specify that it needs an additional spacing to separate it from nearby content
\n\n    
\n      
Te eum doming eirmod, nominati pertinacia  argumentum ad his. Ex eam alia facete scriptorem, est autem aliquip detraxit at. Usu ocurreret referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei ex natum rebum iisque.
\n    
\n  
\n\n  
\n      
Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide phaedrum, vim vivendum maiestatis in.
\n\n      
Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id. Mei ut facer dolores adolescens, no illum aperiri quo, usu odio brute at. Qui te porro electram, ea dico facete utroque quo. Populo quodsi te eam, wisi everti eos ex, eum elitr altera utamur at. Quodsi convenire mnesarchum eu per, quas minimum postulant per id.
\n  
\n\n  
\n    
Floated
\n    
An image can sit to the left or right of other content
\n    
\n      \n      
Te eum doming eirmod, nominati pertinacia argumentum ad his. Ex eam alia facete scriptorem, est autem aliquip detraxit at. Usu ocurreret referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei ex natum rebum iisque.
\n      \n      
Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide phaedrum, vim vivendum maiestatis in.
\n\n      
Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id. Mei ut facer dolores adolescens, no illum aperiri quo, usu odio brute at. Qui te porro electram, ea dico facete utroque quo. Populo quodsi te eam, wisi everti eos ex, eum elitr altera utamur at. Quodsi convenire mnesarchum eu per, quas minimum postulant per id.
\n    
\n  
\n\n  
\n    
Size
\n    
An image may appear at different sizes
\n    
\n      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.\n    
\n    \n      \n        \n          \n          \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
Class NameSize
Mini35px
Tiny80px
Small150px
Medium300px
Large450px
Big600px
Huge800px
Massive960px
\n    \n    \n    \n    \n    \n    \n    \n\n    
\n      \n      \n      \n      \n      \n      \n      \n      \n    
\n\n  
\n\n\n\n  
Groups
\n\n  
\n    
Size
\n    
A group of images can be formatted to have the same size.
\n    
\n      \n      \n      \n      \n    
\n  
\n  
\n    
\n      \n      \n      \n      \n    
\n  
\n\n
\n"
  },
  {
    "path": "server/documents/elements/input.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'input'\nstandalone  : true\n\nelement     : 'input'\nelementType : 'element'\n\ntitle       : 'Input'\ndescription : 'An input is a field used to elicit a response from a user'\ntype        : 'UI Element'\n\nthemes      : ['Default', 'GitHub']\n---\n\n<%- @partial('header') %>\n\n\n\n
\n\n  
Types
\n\n  
\n    
\n      Input\n    
\n    
A standard input
\n    
\n      \n    
\n  
\n\n  
States
\n\n  
\n    
Focus
\n    
An input field can show a user is currently interacting with it
\n    
\n      \n    
\n  
\n\n  
\n    
Loading
\n    
An icon input field can show that it is currently loading data
\n    
Loading inputs automatically modify the input's icon on loading state to show loading indication
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n\n  
\n    
Disabled
\n    
An input field can show that it is disabled
\n    
\n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n    
\n  
\n\n  
\n    
Error
\n    
An input field can show the data contains errors
\n    
\n      \n    
\n  
\n\n  
Variations
\n\n  
\n    
Icon
\n    
An input can be formatted with an icon
\n    
\n      Input icons do not receive pointer-events unless a link icon is used.\n    
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n\n  
\n    
Labeled
\n    
An input can be formatted with a label
\n    
\n      
\n        http://\n      
\n      \n    
\n  
\n  
\n    
\n      \n      
\n        
.com
\n        \n        
\n          
.com
\n          
.net
\n          
.org
\n        
\n      
\n    
\n  
\n  
\n    
\n      \n      
\n        kg\n      
\n    
\n  
\n  
\n    
\n      \n      \n      
.00
\n    
\n  
\n  
\n    
\n      \n      \n      \n        Add Tag\n      \n    
\n  
\n  
\n    
\n      \n      
\n        \n      
\n    
\n  
\n  
\n    
\n      \n      
\n        \n      
\n    
\n  
\n\n  
\n    
Action
\n    
An input can be formatted to alert the user to an action they may perform
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n      
\n        
This Page
\n        \n        
\n          
This Organization
\n          
Entire Site
\n        
\n      
\n    
\n  
\n  
\n    
\n      \n      \n      
Search
\n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n\n  
\n    
Transparent
\n    
A transparent input has no background
\n    
\n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n\n  
\n    
Inverted
\n    
An input can be formatted to appear on dark backgrounds
\n    
\n      
\n        \n      
\n      
\n      
\n        \n        \n      
\n      
\n      
\n        \n        \n      
\n    
\n  
\n\n\n  
\n    
Fluid
\n    
An input can take the size of its container
\n    
\n      \n      \n    
\n    
\n    
\n      \n      
Search
\n    
\n  
\n\n  
\n    
Size
\n    
An input can vary in size
\n    
Inputs will automatically size themselves unless you manually declare a width
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n\n
\n"
  },
  {
    "path": "server/documents/elements/label.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'label'\nstandalone  : true\n\nelement     : 'label'\nelementType : 'element'\n\ntitle       : 'Label'\ndescription : 'A label displays content classification'\ntype        : 'UI Element'\n\nthemes      : ['Default', 'GitHub']\n---\n\n\n<%- @partial('header') %>\n\n
\n\n  
Types
\n\n  
\n    
Label
\n    
A label
\n    
\n       23\n    
\n  
\n\n  
\n    
Image
\n    
A label can be formatted to emphasize an image
\n    \n      \n      Joe\n    \n    \n      \n      Elliot\n    \n    \n      \n      Stevie\n    \n  
\n  
\n    \n      \n      Veronika\n      
Friend
\n    \n    \n      \n      Veronika\n      
Student
\n    \n    \n      \n      Helen\n      
Co-worker
\n    \n  
\n  
\n    
\n      \n      Adrienne\n      \n    
\n    
\n      \n      Zoe\n      \n    
\n    
\n      \n      Nan\n      \n    
\n  
\n\n  
\n    
Pointing
\n    
A label can point to content next to it
\n    
\n      
\n        \n        
\n          Please enter a value\n        
\n      
\n      
\n      
\n        
\n          Please enter a value\n        
\n        \n      
\n      
\n      
\n        \n        
\n          That name is taken!\n        
\n      
\n      
\n      
\n        
\n          Your password must be 6 characters or more\n        
\n        \n      
\n    
\n  
\n\n  
\n    
\n      
\n        \n        
\n          Please enter a value\n        
\n      
\n      
\n      
\n        
\n          Please enter a value\n        
\n        \n      
\n      
\n      
\n        \n        
\n          That name is taken!\n        
\n      
\n      
\n      
\n        
\n          Your password must be 6 characters or more\n        
\n        \n      
\n    
\n  
\n  
\n    
Corner
\n    
A label can position itself in the corner of an element
\n    
A corner label must be positioned inside a container with position: relative to display properly. If a container is rounded you will need to add overflow:hidden to the container to produce a rounded label.
\n    
\n      
\n        
\n          \n            \n          \n          \n        
\n      
\n      
\n        
\n          \n            \n          \n          \n        
\n      
\n    
\n  
\n\n  
\n    
Tag
\n    
A label can appear as a tag
\n    New\n    Upcoming\n    Featured\n  
\n\n  
\n    
Ribbon
\n    
A label can appear as a ribbon attaching itself to an element.
\n    
\n      
\n        
\n          Overview\n          Account Details\n          \n          Community User Reviews\n          \n        
\n      
\n      
\n        
\n          Specs\n          \n          Reviews\n          \n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        
\n          
\n             Hotel\n          
\n          \n        
\n      
\n      
\n        
\n          
\n             Food\n          
\n          \n        
\n      
\n    
\n  
\n\n  
\n    
Attached
\n    
A label can attach to a content segment
\n    
\n      
Attached labels attempt to intelligently pad other content to account for their position, but may not in all cases apply this padding correctly.
\n      
If this happens you may need to manually correct the padding of the other elements inside the container.\n    
\n    
\n      
\n        
\n          
\n            
HTML
\n            \n          
\n        
\n        
\n          
\n            
CSS
\n            \n          
\n        
\n        
\n          
\n            
Code
\n            \n          
\n        
\n      
\n      
\n        
\n          
\n            
View
\n            \n          
\n        
\n        
\n          
\n            
User View
\n            \n          
\n        
\n        
\n          
\n            
Admin View
\n            \n          
\n        
\n      
\n    
\n      
\n    
HTML
\n    
CSS
\n    
Code
\n    
View
\n    
User View
\n    
Admin View
\n      
\n  
\n\n\n  
\n    
Horizontal
\n    
A horizontal label is formatted to label content along-side it horizontally
\n    
\n      \n        
Fruit
\n        Kumquats\n      \n      \n        
Candy
\n        Ice Cream\n      \n      \n        
Fruit
\n        Orange\n      \n      \n        
Dog
\n        Poodle\n      \n    
\n  
\n\n  
\n    
Floating
\n    
A label can float above another element.
\n    
A floating label must be positioned inside a container with position: relative to display properly.
\n    
\n      \n         Messages\n        
22
\n      \n      \n         Friends\n        
22
\n      \n    
\n  
\n\n  
Content
\n\n  
\n    
Detail
\n    
A label can contain a detail
\n    
\n      Dogs\n      
214
\n    
\n  
\n\n  
\n    
Icon
\n    
A label can include an icon
\n    \n      \n      Mail\n    \n    \n      Tag\n      \n    \n  
\n\n  
\n    
Image
\n    
A label can include an image
\n    \n      \n      Elliot\n    \n    \n      \n      Stevie\n    \n  
\n\n  
\n    
Link
\n    
A label can be a link or contain an item that links
\n    \n       23\n    \n  
\n  
\n    
\n      \n      23\n      View Mail\n    
\n  
\n\n  
Variations
\n\n\n  
\n    
Circular
\n    
A label can be circular
\n    2\n    2\n    2\n    2\n    2\n    2\n    2\n    2\n    2\n    2\n    2\n    2\n    2\n  
\n  
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n  
\n\n  
\n    
Basic\n      
New in 2.1
\n    
\n    
A label can reduce its complexity
\n    Basic\n    Pointing\n    \n      \n      Elliot\n    Red Pointing\n    Blue\n    \n  
\n\n  
\n    
Colored
\n    
A label can have different colors
\n    Red\n    Orange\n    Yellow\n    Olive\n    Green\n    Teal\n    Blue\n    Violet\n    Purple\n    Pink\n    Brown\n    Grey\n    Black\n  
\n\n  
\n    
Size
\n    
A label can be small or large
\n    
\n      Mini\n    
\n    
\n      Tiny\n    
\n    
\n      Small\n    
\n    
\n      Medium\n    
\n    
\n      Large\n    
\n    
\n      Big\n    
\n    
\n      Huge\n    
\n    
\n      Massive\n    
\n  
\n\n  
Groups
\n\n  
\n    
Group Size
\n    
Labels can share sizes together
\n    
\n      
\n        Fun\n      
\n      
\n        Happy\n      
\n      
\n        Smart\n      
\n      
\n        Witty\n      
\n    
\n  
\n  
\n    
Colored Group
\n    
Labels can share colors together
\n    
\n      \n        Fun \n      \n      \n        Happy\n        
22
\n      \n      \n        Smart\n      \n      \n        Insane\n      \n      \n        Exciting\n      \n    
\n  
\n\n  
\n    
Tag Group
\n    
Labels can share tag formatting
\n    
\n      \n        $10.00\n      \n      \n        $19.99\n      \n      \n        $24.99\n      \n      \n        $30.99\n      \n      \n        $10.25\n      \n    
\n  
\n\n  
\n    
Circular Group
\n    
Labels can share shapes
\n    
\n      \n        11\n      \n      \n        22\n      \n      \n        33\n      \n      \n        44\n      \n      \n        141\n      \n    
\n  
\n\n
\n"
  },
  {
    "path": "server/documents/elements/list.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'list'\nstandalone  : true\n\nelement     : 'list'\nelementType : 'element'\n\ntitle       : 'List'\ndescription : 'A list is used to group related content'\ntype        : 'UI Element'\n\nthemes      : ['Default']\n---\n\n\n<%- @partial('header') %>\n
\n\n  
Types
\n  
\n    
List
\n    
A list groups related content
\n    
\n      
Apples
\n      
Pears
\n      
Oranges
\n    
\n  
\n  
\n    
\n      
\n        \n        
\n          Semantic UI\n        
\n      
\n      
\n        \n        
\n          New York, NY\n        
\n      
\n      
\n        \n        
\n          jack@semantic-ui.com\n        
\n      
\n      
\n        \n        
\n          semantic-ui.com\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        \n        
\n          Semantic-Org/Semantic-UI\n          
Updated 10 mins ago
\n        
\n      
\n      
\n        \n        
\n          Semantic-Org/Semantic-UI-Docs\n          
Updated 22 mins ago
\n        
\n      
\n      
\n        \n        
\n          Semantic-Org/Semantic-UI-Meteor\n          
Updated 34 mins ago
\n        
\n      
\n    
\n  
\n\n  
\n\n    
\n      
\n        \n        
\n          
src
\n          
Source files for project
\n          
\n            
\n              \n              
\n                
site
\n                
Your site's theme
\n              
\n            
\n            
\n              \n              
\n                
themes
\n                
Packaged theme files
\n                
\n                  
\n                    \n                    
\n                      
default
\n                      
Default packaged theme
\n                    
\n                  
\n                  
\n                    \n                    
\n                      
my_theme
\n                      
Packaged themes are also available in this folder
\n                    
\n                  
\n                
\n              
\n            
\n            
\n              \n              
\n                
theme.config
\n                
Config file for setting packaged themes
\n              
\n            
\n          
\n        
\n      
\n      
\n        \n        
\n          
dist
\n          
Compiled CSS and JS files
\n          
\n            
\n              \n              
\n                
components
\n                
Individual component CSS and JS
\n              
\n            
\n          
\n        
\n      
\n      
\n        \n        
\n          
semantic.json
\n          
Contains build settings for gulp
\n        
\n      
\n    
\n  
\n\n  
\n    
Bulleted
\n    
A list can mark items with a bullet
\n    
\n      
Gaining Access
\n      
Inviting Friends
\n      
\n        
Benefits
\n        
\n          Link to somewhere\n          
Rebates
\n          
Discounts
\n        
\n      
\n      
Warranty
\n    
\n  
\n  
\n    
For convenience, a simple bulleted list can also use ul tag.
\n    
    \n      
  • Gaining Access
    • \n      
  • Inviting Friends
    • \n      
  • Benefits\n        
      \n          
    • Use Anywhere
      • \n          
    • Rebates
      • \n          
    • Discounts
      • \n        
    \n      
    • \n      
  • Warranty
    • \n    
\n  
\n  
\n    
\n      \n        About Us\n      \n      \n        Sitemap\n      \n      \n        Contact\n      \n    
\n  
\n\n  
\n    
Ordered
\n    
A list can be ordered numerically
\n    
\n      Getting Started\n      Introduction\n      
\n        Languages\n        
\n          HTML\n          Javascript\n          CSS\n        
\n      
\n      Review\n    
\n  
\n  
\n    
An ordered list can also use the ol tag
\n    
    \n      
  1. Signing Up
    2. \n      
  2. User Benefits
    3. \n      
  3. User Types\n        
      \n          
    1. Admin
      2. \n          
    2. Power User
      3. \n          
    3. Regular User
      4. \n        
    \n      
    4. \n      
  4. Deleting Your Account
    5. \n    
\n  
\n\n  
\n    
You can also manually specify a value for an ordered list using data-value on a div, or value on an li\n    
\n    
    \n      
  1. Signing Up
    2. \n      
  2. User Benefits
    3. \n      
  3. User Types\n        
      \n          
    1. Admin
      2. \n          
    2. Power User
      3. \n          
    3. Regular User
      4. \n        
    \n      
    4. \n      
  4. Deleting Your Account
    5. \n    
\n  
\n\n\n  
\n    
Link
\n    
A list can be specially formatted for navigation links
\n    
\n      
Home
\n      About\n      Jobs\n      Team\n    
\n  
\n\n\n  
Content
\n\n  
\n    
Item
\n    
A list item can contain a set of items
\n    
\n      
\n        1\n      
\n      
\n        2\n      
\n      
\n        3\n      
\n    
\n  
\n\n  
\n    
Icon
\n    
A list item can contain an icon
\n    
\n      \n        \n        
\n          
Floated Icon
\n          
This text will always have a left margin to make sure it sits alongside your icon
\n        
\n      \n      \n        \n        
\n          
Icon Alignment
\n          
Floated icons are by default top aligned. To have an icon top aligned try this example.
\n        
\n      \n      
\n        \n        Inline Text\n      
\n    
\n  
\n\n  
\n    
Image
\n    
A list item can contain an image
\n\n    
\n      
\n        \n        
\n          Rachel\n          
Last seen watching Arrested Development just now.
\n        
\n      
\n      
\n        \n        
\n          Lindsay\n          
Last seen watching Bob's Burgers 10 hours ago.
\n        
\n      
\n      
\n        \n        
\n          Matthew\n          
Last seen watching The Godfather Part 2 yesterday.
\n        
\n      
\n      
\n        \n        
\n          Jenny Hess\n          
Last seen watching Twin Peaks 3 days ago.
\n        
\n      
\n      
\n        \n        
\n          Veronika Ossi\n          
Has not watched anything recently
\n        
\n      
\n    
\n  
\n\n  
\n    
Link
\n    
A list can contain links
\n    
\n      What is a FAQ?\n      Who is our user?\n      Where is our office located?\n    
\n  
\n  
\n    
\n      
\n        Header\n        
\n          Click a link in our description.\n        
\n      
\n      
\n        Learn More\n        
\n          Learn more about this site on our FAQ page.\n        
\n      
\n    
\n  
\n\n  
\n    
Header
\n    
A list item can contain a header
\n    
\n      
\n        
New York City
\n        A lovely city\n      
\n      
\n        
Chicago
\n        Also quite a lovely city\n      
\n      
\n        
Los Angeles
\n        Sometimes can be a lovely city\n      
\n      
\n        
San Francisco
\n        What a lovely city\n      
\n    
\n  
\n\n  
\n    
Description
\n    
A list item can contain a description
\n    
\n      
\n        \n        
\n          Krolewskie Jadlo\n          
An excellent polish restaurant, quick delivery and hearty, filling meals.
\n        
\n      
\n      
\n        \n        
\n          Xian Famous Foods\n          
A taste of Shaanxi's delicious culinary traditions, with delights like spicy cold noodles and lamb burgers.
\n        
\n      
\n      
\n        \n        
\n          Sapporo Haru\n          
Greenpoint's best choice for quick and delicious sushi.
\n        
\n      
\n      
\n        \n        
\n          Enid's\n          
At night a bar, during the day a delicious brunch spot.
\n        
\n      
\n    
\n  
\n\n  
Variations
\n\n\n  
\n    
Horizontal
\n    
A list can be formatted to have items appear horizontally
\n    
\n      
\n        \n        
\n          
Tom
\n          Top Contributor\n        
\n      
\n      
\n        \n        
\n          
Christian Rocha
\n          Admin\n        
\n      
\n      
\n        \n        
\n          
Matt
\n          Top Rated User\n        
\n      
\n    
\n  
\n\n  
\n    
\n      
\n        \n        
\n          
Steve Jobes
\n          50 Points\n        
\n      
\n      
\n        \n        
\n          
Stevie Feliciano
\n          44 Points\n        
\n      
\n      
\n        \n        
\n          
Jenny Hess
\n          11 Points\n        
\n      
\n    
\n  
\n  
\n    
\n      \n        Terms and Conditions\n      \n      \n        Privacy Policy\n      \n      \n        Contact Us\n      \n    
\n  
\n\n  
\n    
Inverted
\n    
A list can be inverted to appear on a dark background
\n    
\n      
\n        
\n          
\n            
Snickerdoodle
\n            An excellent companion\n          
\n        
\n        
\n          
\n            
Poodle
\n            A poodle, its pretty basic\n          
\n        
\n        
\n          
\n            
Paulo
\n            He's also a dog\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Selection
\n    
A selection list formats list items as possible choices
\n    
\n      
\n        \n        
\n          
Helen
\n        
\n      
\n      
\n        \n        
\n          
Christian
\n        
\n      
\n      
\n        \n        
\n          
Daniel
\n        
\n      
\n    
\n  
\n\n  
\n    
Animated
\n    
A list can animate to set the current item apart from the list
\n    
\n      Be sure content can fit on one line when using the animated variation, otherwise text content will reflow when hovered.\n    
\n    
\n      
\n        \n        
\n          
Helen
\n        
\n      
\n      
\n        \n        
\n          
Christian
\n        
\n      
\n      
\n        \n        
\n          
Daniel
\n        
\n      
\n    
\n  
\n\n  
\n    
Relaxed
\n    
A list can relax its padding to provide more negative space
\n\n    
\n      
\n        \n        
\n          Daniel Louise\n          
Last seen watching Arrested Development just now.
\n        
\n      
\n      
\n        \n        
\n          Stevie Feliciano\n          
Last seen watching Bob's Burgers 10 hours ago.
\n        
\n      
\n      
\n        \n        
\n          Elliot Fu\n          
Last seen watching The Godfather Part 2 yesterday.
\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        \n        
\n          Daniel Louise\n        
\n      
\n      
\n        \n        
\n          Stevie Feliciano\n        
\n      
\n      
\n        \n        
\n          Elliot Fu\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        \n        
\n          Daniel Louise\n          
Last seen watching Arrested Development just now.
\n        
\n      
\n      
\n        \n        
\n          Stevie Feliciano\n          
Last seen watching Bob's Burgers 10 hours ago.
\n        
\n      
\n      
\n        \n        
\n          Elliot Fu\n          
Last seen watching The Godfather Part 2 yesterday.
\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        \n        
\n          Daniel Louise\n        
\n      
\n      
\n        \n        
\n          Stevie Feliciano\n        
\n      
\n      
\n        \n        
\n          Elliot Fu\n        
\n      
\n    
\n  
\n\n  
\n    
Divided
\n    
A list can show divisions between content
\n    
\n      
\n        \n        
\n          Daniel Louise\n        
\n      
\n      
\n        \n        
\n          Stevie Feliciano\n        
\n      
\n      
\n        \n        
\n          Elliot Fu\n        
\n      
\n    
\n  
\n\n  
\n    
Celled
\n    
A list can divide its items into cells
\n    
\n      
\n        \n        
\n          
Snickerdoodle
\n          An excellent companion\n        
\n      
\n      
\n        \n        
\n          
Poodle
\n          A poodle, its pretty basic\n        
\n      
\n      
\n        \n        
\n          
Paulo
\n          He's also a dog\n        
\n      
\n    
\n  
\n  
\n    
\n      
Cats
\n      
Horses
\n      
Dogs\n        
\n          
Labradoodles
\n          
Shiba Inu
\n          
Mastiff
\n        
\n      
\n    
\n  
\n  
\n    
\n      
About Us
\n      
Contact
\n      
Support
\n    
\n  
\n\n  
\n    
Size
\n    
A list can vary in size
\n    
\n      
\n        \n        
\n          
Helen
\n        
\n      
\n      
\n        \n        
\n          
Christian
\n        
\n      
\n      
\n        \n        
\n          
Daniel
\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        \n        
\n          
Helen
\n        
\n      
\n      
\n        \n        
\n          
Christian
\n        
\n      
\n      
\n        \n        
\n          
Daniel
\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        \n        
\n          
Helen
\n        
\n      
\n      
\n        \n        
\n          
Christian
\n        
\n      
\n      
\n        \n        
\n          
Daniel
\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        \n        
\n          
Helen
\n        
\n      
\n      
\n        \n        
\n          
Christian
\n        
\n      
\n      
\n        \n        
\n          
Daniel
\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        \n        
\n          
Helen
\n        
\n      
\n      
\n        \n        
\n          
Christian
\n        
\n      
\n      
\n        \n        
\n          
Daniel
\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        \n        
\n          
Helen
\n        
\n      
\n      
\n        \n        
\n          
Christian
\n        
\n      
\n      
\n        \n        
\n          
Daniel
\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        \n        
\n          
Helen
\n        
\n      
\n      
\n        \n        
\n          
Christian
\n        
\n      
\n      
\n        \n        
\n          
Daniel
\n        
\n      
\n    
\n  
\n\n  
Content Variations
\n\n\n  
\n    
Vertically Aligned
\n    
An element inside a list can be vertically aligned
\n    
\n      
\n        \n        
\n          Top Aligned\n        
\n      
\n      
\n        \n        
\n          Middle\n        
\n      
\n      
\n        \n        
\n          Bottom\n        
\n      
\n    
\n  
\n\n\n  
\n    
Floated
\n    
An list, or an element inside a list can be floated left or right
\n    
\n      
\n        
\n          
Add
\n        
\n        \n        
\n          Lena\n        
\n      
\n      
\n        
\n          
Add
\n        
\n        \n        
\n          Lindsay\n        
\n      
\n      
\n        
\n          
Add
\n        
\n        \n        
\n          Mark\n        
\n      
\n      
\n        
\n          
Add
\n        
\n        \n        
\n          Molly\n        
\n      
\n    
\n  
\n  
\n    
\n      
© GitHub, Inc.
\n      Terms\n      Privacy\n      Contact\n    
\n    
\n      About Us\n      Jobs\n    
\n  
\n\n
\n\n\n"
  },
  {
    "path": "server/documents/elements/loader.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'loader'\nstandalone  : true\n\nelement     : 'loader'\nelementType : 'element'\n\ntitle       : 'Loader'\ndescription : 'A loader alerts a user to wait for an activity to complete'\ntype        : 'UI Element'\n\nthemes      : ['Default', 'Duo', 'Pulsar']\n---\n\n<%- @partial('header') %>\n\n\n\n
\n\n  
Types
\n  
\n    
Loader
\n    
A loader
\n    
Loaders are hidden unless active or inside an active dimmer.
\n    
\n      \n      
\n        
\n      
\n    
\n  
\n\n  
\n    
Text Loader
\n    
A loader can contain text
\n    
\n      
\n        
Loading
\n      
\n      \n    
\n  
\n  
\n    
\n      
\n        
Loading
\n      
\n      \n    
\n  
\n\n\n  
States
\n\n  
\n    
Indeterminate
\n    
A loader can show it's unsure of how long a task will take
\n    
\n      
\n        
Preparing Files
\n      
\n      \n    
\n  
\n\n  
\n    
Active
\n    
A loader can be active or visible
\n    
\n      An active loader may not be clearly visible without using a ui dimmer\n    
\n    
\n      
\n      \n\n    
\n  
\n\n  
\n    
Disabled
\n    
A loader can be disabled or hidden
\n    
\n      
\n      \n    
\n  
\n\n\n  
Variations
\n\n  
\n    
Inline
\n    
Loaders can appear inline with content 
\n    
\n  
\n\n  
\n    
Inline Center
\n    
Loaders can appear inline centered with content 
\n    
\n  
\n\n  
\n    
Size
\n    
Loaders can have different sizes
\n\n    
\n      
\n        
Loading
\n      
\n      \n    
\n    
\n      
\n        
Loading
\n      
\n      \n    
\n    
\n      
\n        
Loading
\n      
\n      \n    
\n    
\n      
\n        
Loading
\n      
\n      \n      \n    
\n    
\n      
\n        
Loading
\n      
\n      \n      \n      \n    
\n    
\n      
\n        
Loading
\n      
\n      \n      \n      \n    
\n    
\n      
\n        
Loading
\n      
\n      \n      \n      \n    
\n    
\n      
\n        
Loading
\n      
\n      \n      \n      \n    
\n  
\n\n  
\n    
Inverted
\n    
Loaders can have their colors inverted.
\n    
\n      
\n      
\n      
\n      
\n      
\n    
\n  
\n  
\n    
Loaders will automatically be inverted inside inverted dimmer
\n    
\n      
\n        
Loading
\n      
\n      \n    
\n    
\n      
\n        
Loading
\n      
\n      \n    
\n    
\n      
\n        
Loading
\n      
\n      \n      \n    
\n    
\n      
\n        
Loading
\n      
\n      \n      \n      \n    
\n  
\n\n
\n"
  },
  {
    "path": "server/documents/elements/placeholder.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'loader'\nstandalone  : true\n\nelement     : 'placeholder'\nelementType : 'element'\n\ntitle       : 'Placeholder'\ndescription : 'A placeholder is used to reserve splace for content that soon will appear in a layout'\ntype        : 'UI Element'\n\nthemes      : ['Default']\n---\n\n<%- @partial('header') %>\n\n\n\n
\n\n  
Types
\n\n  
\n    
\n      Placeholder\n      
New in 2.4.0
\n    
\n    
A placeholder is used to reserve space for content that soon will appear in a layout.
\n    
\n      Placeholders can include paragraph, header, image header and image to let you format the loaders to emulate the content being loaded.\n    
\n    
\n      
\n        
\n        
\n      
\n      
\n        
\n        
\n        
\n        
\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        
\n          
\n            
\n              
\n              
\n            
\n            
\n              
\n              
\n            
\n          
\n        
\n      
\n      
\n        
\n          
\n            
\n              
\n              
\n            
\n            
\n              
\n              
\n            
\n          
\n        
\n      
\n      
\n        
\n          
\n            
\n              
\n              
\n            
\n            
\n              
\n              
\n            
\n          
\n        
\n      
\n    
\n  
\n  
\n    <%- @partial('examples/content-loader') %>\n  
\n\n\n  
Content
\n  
\n    
Lines
\n    
A placeholder can contain lines of text
\n    
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
\n    
\n      
\n      
\n      
\n      
\n      
\n    
\n  
\n  
\n    
Headers
\n    
A placeholder can contain a header
\n    
\n      Header content will have a slightly larger block size from paragraph\n    
\n    
\n      
\n        
\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        
\n        
\n      
\n    
\n  
\n  
\n    
Paragraph
\n    
A placeholder can contain a paragraph
\n    
Paragraphs are used to group lines together.
\n    
\n      
\n        
\n        
\n        
\n        
\n        
\n      
\n      
\n        
\n        
\n        
\n      
\n    
\n  
\n  
\n    
Image
\n    
A placeholder can contain an image
\n    
\n      
\n    
\n  
\n  
\n    
\n      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.\n    
\n    
\n      
\n        
\n          
\n            
\n          
\n        
\n      
\n      
\n        
\n          
\n            
\n          
\n        
\n      
\n      
\n        
\n          
\n            
\n          
\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        
\n          
\n            
\n          
\n        
\n      
\n      
\n        
\n          
\n            
\n          
\n        
\n      
\n      
\n        
\n          
\n            
\n          
\n        
\n      
\n    
\n  
\n  
Variations
\n\n  
\n    
Line Length
\n    
A line can specify how long its contents should appear
\n    
\n      
\n      
\n      
\n      
\n      
\n      
\n    
\n  
\n  
\n\n    
\n      
\n        
\n        
\n      
\n      
\n        
\n        
\n      
\n    
\n  
\n\n  
\n    
Fluid
\n    
A fluid placeholder takes up the width of its container
\n    
\n      
\n        
\n        
\n      
\n      
\n        
\n        
\n        
\n      
\n    
\n  
\n  
\n    
Inverted
\n    
A placeholder can have their colors inverted.
\n    
\n      
\n        
\n          
\n          
\n        
\n        
\n          
\n          
\n          
\n        
\n      
\n    
\n  
\n
\n"
  },
  {
    "path": "server/documents/elements/rail.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'basic minimal'\nelement     : 'rail'\nelementType : 'element'\nstandalone  : true\n\ntitle       : 'Rail'\ndescription : 'A rail is used to show accompanying content outside the boundaries of the main view of a site'\ntype        : 'UI Element'\n\n---\n\n\n<%- @partial('header') %>\n\n
\n\n  
\n    
Introduction
\n\n    
When to Use
\n    
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.
\n    
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.
\n    
Adjusting Sizes
\n    
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.
\n    
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.
\n    
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.
\n    
\n      The following examples do not use any breakpoints, so some railed content may appear outside your browser's viewport on smaller screens.\n    
\n  
\n\n  
Types
\n\n  
\n    
Rail
\n    
A rail can be presented on the left or right side of a container
\n\n    
\n      
\n        
\n          Left Rail Content\n        
\n      
\n      
\n        
\n          Right Rail Content\n        
\n      
\n      \n      \n    
\n  
\n  
\n    
Internal
\n    
A rail can attach itself to the inside of a container
\n\n    
\n      
\n        
\n          Left Rail Content\n        
\n      
\n      
\n        
\n          Right Rail Content\n        
\n      
\n    
\n  
\n\n  
\n    
Dividing
\n    
A rail can create a division between itself and a container
\n    
\n      
\n        
\n          Left Rail Content\n        
\n      
\n      
\n        
\n          Right Rail Content\n        
\n      
\n      \n      \n    
\n  
\n\n  
Variations
\n\n  
\n    
Attached
\n    
A rail can appear attached to the main viewport
\n    
\n      
\n        
\n          Left Rail Content\n        
\n      
\n      
\n        
\n          Right Rail Content\n        
\n      
\n      \n      \n    
\n  
\n  
\n    
\n      
\n        
\n          Left Rail Content\n        
\n      
\n      
\n        
\n          Right Rail Content\n        
\n      
\n    
\n  
\n\n  
\n    
Close
\n    
A rail can appear closer to the main viewport
\n    
\n      
\n        
\n          Left Rail Content\n        
\n      
\n      
\n        
\n          Right Rail Content\n        
\n      
\n      \n      \n    
\n  
\n  
\n    
\n      
\n        
\n          Left Rail Content\n        
\n      
\n      
\n        
\n          Right Rail Content\n        
\n      
\n      \n      \n    
\n  
\n\n  
\n    
Size
\n    
A rail can have different sizes
\n    
\n      
\n        Mini\n      
\n      
\n        Tiny\n      
\n      \n      \n    
\n    
\n      
\n        Small\n      
\n      
\n        Large\n      
\n      \n      \n    
\n    
\n      
\n        Big\n      
\n      
\n        Huge\n      
\n      \n      \n    
\n    
\n      
\n        Massive\n      
\n      \n      \n    
\n  
\n\n\n
\n"
  },
  {
    "path": "server/documents/elements/reveal.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'reveal'\nstandalone  : true\n\nelement     : 'reveal'\nelementType : 'element'\n\ntitle       : 'Reveal'\ndescription : 'A reveal displays additional content in place of previous content when activated'\ntype        : 'UI Element'\n\nthemes      : ['Default']\n---\n\n<%- @partial('header') %>\n\n
\n\n  
Types
\n\n  
\n    
Fade
\n    
An element can disappear to reveal content below
\n    
\n      
\n        \n      
\n      
\n        \n      
\n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n\n  
\n    
Move
\n    
An element can move in a direction to reveal content
\n    
\n      
\n        \n      
\n      
\n        \n      
\n    
\n  
\n  
\n    
\n      
\n        \n      
\n      
\n        \n      
\n    
\n  
\n\n  
\n    
\n      
\n        \n      
\n      
\n        \n      
\n    
\n  
\n\n  
\n    
\n      
\n        \n      
\n      
\n        \n      
\n    
\n  
\n\n  
\n    
Rotate
\n    
An element can rotate to reveal content below
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n\n  
Content
\n\n  
\n    
Visible Content
\n    
A reveal may contain content that is visible before interaction
\n    
\n      Visible and hidden content should be the same aspect ratio\n    
\n    
\n      \n      \n    
\n  
\n\n  
\n    
Hidden Content
\n    
A reveal may contain content that is hidden before user interaction
\n    
\n      \n      \n    
\n  
\n\n  
States
\n\n  
\n    
Active
\n    
An active reveal displays its hidden content
\n    
\n      Adding the class active can allow you to show the hidden contents programatically\n    
\n    
\n      
\n        \n      
\n      
\n        \n      
\n    
\n  
\n\n  
Variations
\n\n\n  
\n    
Instant
\n    
An element can show its content without delay
\n    
\n      
\n        \n      
\n      
\n        \n      
\n    
\n  
\n\n\n  
States
\n\n  
\n    
Disabled
\n    
A disabled reveal will not animate when hovered
\n    
\n      
\n        \n      
\n      
\n        \n      
\n    
\n  
\n\n\n\n
\n"
  },
  {
    "path": "server/documents/elements/segment.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'segment'\nstandalone  : true\n\nelement     : 'segment'\nelementType : 'element'\n\ntitle       : 'Segment'\ndescription : 'A segment is used to create a grouping of related content'\ntype        : 'UI Element'\nthemes      : ['default', 'GitHub']\n---\n<%- @partial('header') %>\n\n\n\n
\n\n  
Types
\n\n  
\n    
Segment
\n    
A segment of content
\n    
\n      \n    
\n  
\n  
\n    
\n      Placeholder Segment\n      
New in 2.4.0
\n    
\n    
A segment can be used to reserve space for conditionally displayed content.
\n    
\n      
\n        \n        No documents are listed for this customer.\n      
\n      
Add Document
\n    
\n  
\n\n  
\n    
\n      To use inline-block content inside a placeholder, wrap the content in inline.\n    
\n    
\n      
\n        \n        We don't have any documents matching your query\n      
\n      
\n        
Clear Query
\n        
Add Document
\n      
\n    
\n  
\n\n\n  
\n    
\n      
\n        
Or
\n        
\n          
\n            
\n              \n              Find Country\n            
\n            
\n              
\n                
\n                  \n                  \n                
\n                
\n              
\n            
\n          
\n          
\n            
\n              \n              Add New Country\n            
\n            
\n              Create\n            
\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Raised
\n    
A segment may be formatted to raise above the page.
\n    
\n      
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
\n    
\n  
\n\n  
\n    
Stacked
\n    
A segment can be formatted to show it contains multiple pages
\n    
\n      
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
\n    
\n  
\n  
\n    
\n      
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
\n    
\n  
\n\n  
\n    
Piled
\n    
A segment can be formatted to look like a pile of pages
\n    
\n      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.\n    
\n    
\n      
A header
\n      
Te eum doming eirmod, nominati pertinacia argumentum ad his. Ex eam alia facete scriptorem, est autem aliquip detraxit at. Usu ocurreret referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei ex natum rebum iisque.
\n\n      
Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide phaedrum, vim vivendum maiestatis in.
\n\n      
Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id. Mei ut facer dolores adolescens, no illum aperiri quo, usu odio brute at. Qui te porro electram, ea dico facete utroque quo. Populo quodsi te eam, wisi everti eos ex, eum elitr altera utamur at. Quodsi convenire mnesarchum eu per, quas minimum postulant per id.
\n    
\n  
\n\n  
\n    
Vertical Segment
\n    
A vertical segment formats content to be aligned as part of a vertical group
\n    
\n      \n    
\n    
\n      \n    
\n    
\n      \n    
\n  
\n\n  
Groups
\n\n  
\n    
Segments
\n    
A group of segments can be formatted to appear together
\n\n    
\n      
\n        
Top
\n      
\n      
\n        
Middle
\n      
\n      
\n        
Middle
\n      
\n      
\n        
Middle
\n      
\n      
\n        
Bottom
\n      
\n    
\n  
\n  
\n    
\n      
\n        
Top
\n      
\n      
\n        
Middle
\n      
\n      
\n        
Middle
\n      
\n      
\n        
Middle
\n      
\n      
\n        
Bottom
\n      
\n    
\n  
\n  
\n    
\n      
\n        
Top
\n      
\n      
\n        
Secondary Content
\n      
\n    
\n  
\n  
\n    
Nested Segments
\n    
A group of segments can be nested in another group of segments
\n    
\n      
\n        
Top
\n      
\n      
\n        
\n          
Nested Top
\n        
\n        
\n          
Nested Middle
\n        
\n        
\n          
Nested Bottom
\n        
\n      
\n      
\n        
Middle
\n      
\n      
\n        
\n          
Top
\n        
\n        
\n          
Middle
\n        
\n        
\n          
Bottom
\n        
\n      
\n      
\n        
Bottom
\n      
\n    
\n  
\n\n  
\n    
Horizontal Segments
\n    
A segment group can appear horizontally
\n    
\n      
\n        \n      
\n      
\n        \n      
\n      
\n        \n      
\n    
\n  
\n\n\n  
\n    
Raised Segments
\n    
A group of segments can be raised
\n    
\n      
\n        
Top
\n      
\n      
\n        
Middle
\n      
\n      
\n        
Bottom
\n      
\n    
\n  
\n\n  
\n    
Stacked Segments
\n    
A group of segments can be stacked
\n    
\n      
\n        
Top
\n      
\n      
\n        
Middle
\n      
\n      
\n        
Bottom
\n      
\n    
\n  
\n\n  
\n    
Piled Segments
\n    
A group of segments can be piled
\n    
\n      
\n        
Top
\n      
\n      
\n        
Middle
\n      
\n      
\n        
Bottom
\n      
\n    
\n  
\n\n  
States
\n\n  
\n    
Disabled
\n    
A segment may show its content is disabled
\n    
\n      \n    
\n  
\n  
\n    
Loading
\n    
A segment may show its content is being loaded
\n    
\n      \n      \n    
\n  
\n\n  
Variations
\n\n  
\n    
Inverted
\n    
A segment can have its colors inverted for contrast
\n    
\n      
I'm here to tell you something, and you will probably read me first.
\n    
\n  
\n\n  
\n    
Attached
\n    
A segment can be attached to other content on a page
\n\n    
\n      
Attached segments are designed to be used with other attached variations like attached header or attached messages.
\n    
\n    
\n      
This segment is on top
\n    
\n    
\n      
This segment is attached on both sides
\n    
\n    
\n      
This segment is on bottom
\n    
\n  
\n  
\n    
\n      Dogs\n    
\n    
\n      
Dogs are one type of animal
\n    
\n    
\n      Cats\n    
\n    
\n      
Cats are thought of as being related to dogs, but only humans think this.
\n    
\n    
\n      Lions\n    
\n    
\n      
Humans don't think of lions as being like cats, but they are.
\n    
\n    
\n      \n      You've reached the end of this content segment!\n    
\n  
\n\n  
\n    
Padded
\n    
A segment can increase its padding
\n    
\n      \n    
\n  
\n  
\n    
\n      \n    
\n  
\n\n  
\n    
Compact
\n    
A segment may take up only as much space as is necessary
\n    
\n      
Pellentesque habitant morbi
\n    
\n  
\n  
\n    
\n      
\n        
Pellentesque habitant morbi
\n      
\n      
\n        
Pellentesque habitant morbi
\n      
\n    
\n  
\n\n  
\n    
Colored
\n    
A segment can be colored
\n    
Red
\n    
Orange
\n    
Yellow
\n    
Olive
\n    
Green
\n    
Teal
\n    
Blue
\n    
Violet
\n    
Purple
\n    
Pink
\n    
Brown
\n    
Grey
\n    
Black
\n  
\n  
\n    
These colors can be inverted
\n    
Red
\n    
Orange
\n    
Yellow
\n    
Olive
\n    
Green
\n    
Teal
\n    
Blue
\n    
Violet
\n    
Purple
\n    
Pink
\n    
Brown
\n    
Grey
\n    
Black
\n  
\n\n  
\n    
Emphasis
\n    
A segment can be formatted to appear more or less noticeable
\n    
\n      
I'm here to tell you something, and you will probably read me first.
\n    
\n    
\n      
I am pretty noticeable but you might check out other content before you look at me.
\n    
\n    
\n      
If you notice me you must be looking very hard.
\n    
\n  
\n  
\n    
Inverted colors may also be more or less noticeable
\n    
\n      
I'm here to tell you something, and you will probably read me first.
\n    
\n    
\n      
I am pretty noticeable but you might check out other content before you look at me.
\n    
\n    
\n      
If you notice me you must be looking very hard.
\n    
\n  
\n  
\n    
\n      
I'm here to tell you something, and you will probably read me first.
\n    
\n    
\n      
I am pretty noticeable but you might check out other content before you look at me.
\n    
\n    
\n      
If you notice me you must be looking very hard.
\n    
\n  
\n  
\n    
Circular
\n    
A segment can be circular
\n    
A circular segment will most likely have to have its content manually sized to be equal width and height, otherwise it will flow to the size of your content
\n    
\n      
\n        Buy Now\n        
$10.99
\n      
\n    
\n    
\n      
\n        Buy Now\n        
$10.99
\n      
\n    
\n  
\n\n\n  
\n    
\n      Clearing\n      New\n    
\n    
A segment can clear floated content
\n    
\n      
Floated
\n    
\n  
\n\n  
\n    
Floated
\n    
A segment can appear to the left or right of other content
\n    
\n      
This segment will appear to the right\n    
\n    
\n      This segment will appear to the left\n    
\n  
\n\n  
\n    
Text Alignment
\n    
A segment can have its text aligned to a side
\n    
\n      Right\n    
\n    
\n      Left\n    
\n    
\n      Center\n    
\n  
\n\n  
\n    
Basic
\n    
A basic segment has no special formatting
\n    
\n      
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
\n    
\n  
\n\n\n
\n"
  },
  {
    "path": "server/documents/elements/step.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'steps'\nstandalone  : true\n\nelement     : 'step'\nelementType : 'element'\n\ntitle       : 'Step'\ndescription : 'A step shows the completion status of an activity in a series of activities'\ntype        : 'UI Element'\n\nthemes      : ['Default', 'Basic', 'GitHub']\n---\n\n<%- @partial('header') %>\n\n\n
\n\n  
Types
\n\n  
\n    
Step
\n    
A single step
\n    
\n      
\n        Shipping\n      
\n    
\n  
\n\n  
Groups
\n\n  
\n    
\n      Steps\n    
\n    
A set of steps
\n    
\n      \n      
\n        
Responsive Element
\n        
Steps will automatically stack on mobile. To make steps automatically stack for tablet use the tablet stackable variation.
\n      
\n    
\n    
\n      
\n        \n        
\n          
Shipping
\n          
Choose your shipping options
\n        
\n      
\n      
\n        \n        
\n          
Billing
\n          
Enter billing information
\n        
\n      
\n      
\n        \n        
\n          
Confirm Order
\n        
\n      
\n    
\n  
\n\n  
\n    
Ordered
\n    
A step can show a ordered sequence of steps
\n    
\n      
\n        
\n          
Shipping
\n          
Choose your shipping options
\n        
\n      
\n      
\n        
\n          
Billing
\n          
Enter billing information
\n        
\n      
\n      
\n        
\n          
Confirm Order
\n          
Verify order details
\n        
\n      
\n    
\n  
\n\n  
\n    
Vertical
\n    
A step can be displayed stacked vertically
\n    
\n      
\n        \n        
\n          
Shipping
\n          
Choose your shipping options
\n        
\n      
\n      
\n        \n        
\n          
Billing
\n          
Enter billing information
\n        
\n      
\n      
\n        \n        
\n          
Confirm Order
\n          
Verify order details
\n        
\n      
\n    
\n  
\n\n\n  
Content
\n\n  
\n    
Description
\n    
A step can contain a description
\n    
\n      
\n        
Shipping
\n        
Choose your shipping options
\n      
\n    
\n  
\n  
\n    
Icon
\n    
A step can contain an icon
\n    
\n      
\n        \n        
\n          
Shipping
\n          
Choose your shipping options
\n        
\n      
\n    
\n  
\n  
\n    
Link
\n    
A step can link
\n    
\n      \n        \n        
\n          
Shipping
\n          
Choose your shipping options
\n        
\n      \n      \n        
\n          
Billing
\n          
Enter billing information
\n        
\n      \n    
\n  
\n  
\n    
\n      
\n        \n        
\n          
Shipping
\n          
Choose your shipping options
\n        
\n      
\n      
\n        
\n          
Billing
\n          
Enter billing information
\n        
\n      
\n    
\n  
\n\n\n  
States
\n\n  
\n    
Active
\n    
A step can be highlighted as active
\n    
\n      
\n        \n        
\n          
Billing
\n          
Enter billing information
\n        
\n      
\n    
\n  
\n  
\n    
Completed
\n    
A step can show that a user has completed it
\n    
\n      
\n        \n        
\n          
Billing
\n          
Enter billing information
\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        
\n          
Billing
\n          
Enter billing information
\n        
\n      
\n    
\n  
\n\n  
\n    
Disabled
\n    
A step can show that it cannot be selected
\n    
\n      
\n        Billing\n      
\n    
\n  
\n\n  
Variations
\n\n  
\n    
Stackable
\n    
A step can stack vertically only on smaller screens
\n    
\n      
\n        \n        
\n          
Shipping
\n          
Choose your shipping options
\n        
\n      
\n      
\n        \n        
\n          
Billing
\n          
Enter billing information
\n        
\n      
\n      
\n        \n        
\n          
Confirm Order
\n          
Verify order details
\n        
\n      
\n    
\n  
\n  
\n    
Fluid
\n    
A fluid step takes up the width of its container
\n    
\n      
\n        
\n          
\n            \n            
\n              
Shipping
\n              
Choose your shipping options
\n            
\n          
\n          
\n            \n            
\n              
Billing
\n              
Enter billing information
\n            
\n          
\n        
\n      
\n      
\n        
The steps take up the entire column width
\n      
\n    
\n  
\n\n  
\n    
\n      Unstackable\n      
New in 2.2.11
\n    
\n    
A step can prevent itself from stacking on mobile
\n    
\n      
\n        \n        
\n          
Shipping
\n          
Choose your shipping options
\n        
\n      
\n      
\n        \n        
\n          
Billing
\n          
Enter billing information
\n        
\n      
\n      
\n        \n        
\n          
Confirm Order
\n          
Verify order details
\n        
\n      
\n    
\n  
\n\n  
\n    
\n      Attached\n    
\n    
Steps can be attached to other elements
\n\n    
\n      
\n        \n        
\n          
Shipping
\n          
Choose your shipping options
\n        
\n      
\n      
\n        \n        
\n          
Billing
\n          
Enter billing information
\n        
\n      
\n      
\n        \n        
\n          
Confirm Order
\n          
Verify order details
\n        
\n      
\n    
\n    
\n      \n    
\n    
\n      
\n        \n        
\n          
Shipping
\n          
Choose your shipping options
\n        
\n      
\n      
\n        \n        
\n          
Billing
\n          
Enter billing information
\n        
\n      
\n      
\n        \n        
\n          
Confirm Order
\n          
Verify order details
\n        
\n      
\n    
\n  
\n\n\n\n  
\n    
Evenly Divided
\n    
Steps can be divided evenly inside their parent
\n    
\n      
\n        \n        
\n          
Shipping
\n        
\n      
\n      
\n        \n        
\n          
Billing
\n        
\n      
\n      
\n        \n        
\n          
Confirm Order
\n        
\n      
\n    
\n  
\n\n  
\n    
\n      
\n        \n        
\n          
Billing
\n        
\n      
\n      
\n        \n        
\n          
Confirm Order
\n        
\n      
\n    
\n  
\n\n  
\n    
Size
\n    
Steps can have different sizes
\n    
\n      
\n        \n        
\n          
Shipping
\n          
Choose your shipping options
\n        
\n      
\n      
\n        \n        
\n          
Billing
\n          
Enter billing information
\n        
\n      
\n      
\n        \n        
\n          
Confirm Order
\n          
Verify order details
\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        \n        
\n          
Shipping
\n          
Choose your shipping options
\n        
\n      
\n      
\n        \n        
\n          
Billing
\n          
Enter billing information
\n        
\n      
\n      
\n        \n        
\n          
Confirm Order
\n          
Verify order details
\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        \n        
\n          
Shipping
\n          
Choose your shipping options
\n        
\n      
\n      
\n        \n        
\n          
Billing
\n          
Enter billing information
\n        
\n      
\n      
\n        \n        
\n          
Confirm Order
\n          
Verify order details
\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        \n        
\n          
Shipping
\n        
\n      
\n      
\n        \n        
\n          
Billing
\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        \n        
\n          
Shipping
\n        
\n      
\n      
\n        \n        
\n          
Billing
\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        \n        
\n          
Shipping
\n        
\n      
\n      
\n        \n        
\n          
Billing
\n        
\n      
\n    
\n  
\n\n  
\n    
\n      
\n        \n        
\n          
Shipping
\n        
\n      
\n      
\n        \n        
\n          
Billing
\n        
\n      
\n    
\n  
\n\n\n\n
\n"
  },
  {
    "path": "server/documents/globals/reset.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'reset-page'\nelement     : 'reset'\nelementType : 'global'\n\ntitle       : 'Reset'\ndescription : 'A reset is a set of normalized values for CSS properties that correct for abberations in browser defaults'\ntype        : 'UI Global'\n\nthemes      : ['Default', 'Basic', 'Resetcss']\n\n---\n\n\n<%- @partial('header', { tabs: {  overview: 'Overview', test: 'Test' } }) %>\n\n
\n  
\n    
What's In Our Reset
\n    
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.
\n    
\n      The reset is required for Semantic UI components to function properly, and should also be included when using individual components.\n    
\n\n    
Reset Options
\n    
\n      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.\n    
\n  
\n  
\n    
Reset Test
\n      
\n        
html
\n        
should have sans-serif font family (opinionated)
\n        
\n          abcdefghijklmnopqrstuvwxyz\n        
\n\n        
body
\n        
should have no margin (opinionated)
\n        
\n          (there should be no red background visible on this page)\n        
\n\n        
article, aside, details, figure, figcaption, footer, header, hgroup, main, nav, section, summary
\n        
should render as block
\n        
\n          
article
\n          \n          
\n            summary\n            details\n          
\n          
\n            figure\n            
figcaption
\n          
\n          
footer
\n          
header
\n          
hgroup
\n          
main
\n          \n          
section
\n        
\n\n        
audio, canvas, progress, video
\n        
should render as inline-block and baseline-aligned
\n        
\n          \n          canvas\n          progress\n          \n        
\n\n        
audio:not([controls]), template, [hidden]
\n        
should not display
\n        
\n          \n          \n          \n        
\n\n        
a
\n        
should have a transparent background when active
\n        
\n          dummy anchor\n        
\n        
should not have a focus outline when both focused and hovered (opinionated)
\n        
\n          dummy anchor\n        
\n\n        
abbr[title]
\n        
should have a dotted bottom border
\n        
\n          abbr\n        
\n\n        
b, strong
\n        
should have bold font-weight
\n        
\n          b\n          strong\n        
\n\n        
dfn
\n        
should have italic font-style
\n        
\n          dfn\n        
\n\n        
h1
\n        
should not change size within an article
\n        
\n          
Heading (control)
\n          
\n            
Heading (in article)
\n          
\n        
\n        
should not change size within a section
\n        
\n          
Heading (control)
\n          
\n            
Heading (in section)
\n          
\n        
\n\n        
mark
\n        
should have a yellow background
\n        
\n          mark\n        
\n\n        
small
\n        
should render equally small in all browsers
\n        
\n          control. small.\n        
\n\n        
sub and sup
\n        
should not affect a line's visual line-height
\n        
\n          
control.
\n          
control. sub.
\n          
control. sup.
\n        
\n\n        
img
\n        
should not have a border when wrapped in an anchor
\n        
\n          \n            \n            \n          \n        
\n\n        
svg
\n        
should not overflow
\n        
\n          \n            \n          \n        
\n\n        
figure
\n        
should have margins
\n        
\n          
\n            \n          
\n        
\n\n        
hr
\n        
should have a content-box box model
\n        
\n          
\n        
\n\n        
pre
\n        
should trigger a scrollbar when too wide for its container
\n        
\n          
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et me.
\n        
\n\n        
code, kbd, pre, samp
\n        
should render em-unit preformatted text at the same absolute size as normal text
\n        
\n          span: abcdefghijklmnopqrstuvwxyz.
\n          code: abcdefghijklmnopqrstuvwxyz.
\n          kbd: abcdefghijklmnopqrstuvwxyz.
\n          samp: abcdefghijklmnopqrstuvwxyz.\n          
pre: abcdefghijklmnopqrstuvwxyz.
\n        
\n\n        
button, input, optgroup, select, textarea
\n        
should inherit color from ancestor
\n        
\n          
\n          
\n          
\n          \n        
\n        
should inherit font from ancestor
\n        
\n          
\n          
\n          
\n          \n        
\n        
should not have margins
\n        
\n          \n          \n          \n          \n          \n        
\n\n        
button
\n        
should have visible overflow
\n        
\n          \n          \n        
\n\n        
button, select
\n        
should not inherit text-transform
\n        
\n          \n          \n        
\n\n        
button and button-style input
\n        
should have pointer cursor style
\n        
\n          
\n          
\n          
\n          
\n          
\n        
\n        
should be styleable
\n        
\n          \n          
\n          
\n          
\n          
\n          
\n        
\n\n        
disabled button and input
\n        
should have default cursor style
\n        
\n          
\n          
\n          
\n          
\n          
\n        
\n\n        
button, input
\n        
should not have extra inner padding in Firefox
\n        
\n          \n          
\n          
\n          
\n          
\n          
\n        
\n\n        
input
\n        
should not inherit line-height
\n        
\n          \n        
\n\n        
input[type=\"checkbox\"], input[type=\"radio\"]
\n        
should have a border-box box model
\n        
\n          \n          \n          \n        
\n        
should not have padding
\n        
\n          \n          \n        
\n\n        
input[type=\"number\"]
\n        
should display a default cursor for the decrement button's click target in Chrome
\n        
\n          \n        
\n\n        
input[type=\"search\"]
\n        
should be styleable
\n        
\n          \n        
\n        
should have a content-box box model
\n        
\n          
\n            \n          
\n        
\n        
should not have a cancel button in Safari or Chrome
\n        
\n          \n        
\n\n        
fieldset
\n        
should have consistent border, padding, and margin
\n        
\n          
\n            
\n          
\n        
\n\n        
legend
\n        
should inherit color
\n        
\n          
\n            legend\n          
\n        
\n        
should not have padding
\n        
\n          
\n            legend\n          
\n        
\n\n        
textarea
\n        
should not have a scrollbar unless overflowing
\n        
\n          \n        
\n\n        
table
\n        
should not have spaces between cells
\n        
\n          \n            \n            \n              \n                \n                \n                \n              \n            \n            \n              \n                \n                \n                \n              \n            \n            \n              \n                \n                \n                \n              \n              \n                \n                \n                \n              \n              \n                \n                \n                \n              \n              \n                \n                \n                \n              \n            \n          
Jimi Hendrix - albums
AlbumYearPrice
AlbumYearPrice
Are You Experienced1967$10.00
Axis: Bold as Love1967$12.00
Electric Ladyland1968$10.00
Band of Gypsies1970$12.00
\n        
\n\n      
\n\n  
\n
\n\n\n"
  },
  {
    "path": "server/documents/globals/site.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'site'\nelement     : 'site'\nelementType : 'global'\nstandalone  : true\n\ntitle       : 'Site'\ndescription : 'A site is a set of global constraints that define the basic parameters of all UI elements'\ntype        : 'UI Global'\nthemes      : ['Default', 'GitHub', 'Material']\n\n---\n\n\n\n\n\n\n\n<%- @partial('header') %>\n\n
\n\n  
Introduction
\n\n  
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.
\n\n  
Theming
\n\n  
Customizing site variables is an important part of using Semantic UI, to learn more about global site variables visit our theming guide.
\n\n  
Content
\n\n  
\n\n    
Headers
\n    
A site can define styles for headers
\n\n    
First Header
\n    
Second Header
\n    
Third Header
\n    
Fourth Header
\n    
Fifth Header
\n  
\n\n  
\n    
Page Font
\n    
A site can specify styles for page content.
\n\n    
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.
\n\n    
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.
\n    
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.
\n\n  
\n\n  
\n    
Text Selection
\n    
A site can specify text selection styles.
\n    
Highlight the text below with your cursor to see a demonstration
\n\n    
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.
\n\n  
\n  
\n    
Spacing
\n    
A site can define default spacing for headers and paragraphs
\n\n    
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.
\n\n    
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.
\n\n    
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.
\n  
\n\n  
\n    
Links
\n    
A site can define link font formatting.
\n    
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.
\n    
\n      List Link\n      List Link\n      List Link\n    
\n    
\n      \n        \n      \n      
\n        Steve Jobes\n        
\n          Last Seen 2 days ago\n        
\n      
\n    
\n    
\n      
\n        
\n          \n        
\n        
\n          Link Header\n          
\n            
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.
\n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          Link Header\n          
\n            
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.
\n          
\n        
\n      
\n    
\n  
\n\n  
Variables
\n\n  
\n    
Brand Colors
\n    
A site can specify a primary and secondary brand color.
\n    Primary Brand Color\n    Secondary Brand Color\n  
\n\n  
\n    
Colors
\n    
A site can define a set of hex values for common named colors
\n    
\n      
Red
\n      
Orange
\n      
Yellow
\n      
Olive
\n      
Green
\n      
Teal
\n      
Blue
\n      
Violet
\n      
Purple
\n      
Pink
\n      
Brown
\n      
Grey
\n      
Black
\n    
\n  
\n\n  
\n    
Border Styles
\n    
A site can specify default border styles and radius.
\n\n    
Examples of UI that inherit border styles
\n    
Segment
\n    
Button
\n    
\n      
One
\n      
Two
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
Header 1Header 2
Definition1A1B
Definition2A2B
\n  
\n\n  
\n    
Size
\n    
A site can define a root em size, used for providing relative sizes for the rest of a site's content
\n    
\n      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.
\n    
\n\n    
Examples of Absolutely Sized UI
\n    
\n      Button\n    
\n    
\n      \n    
\n\n    
Examples of Relative Sized UI
\n    
\n      
Larger content container
\n      
\n        List Item\n        List Item\n        List Item\n        List Item\n        List Item\n      
\n      
\n        
Message
\n      
\n    
\n  
\n\n
\n"
  },
  {
    "path": "server/documents/hotfix.html",
    "content": "---\nlayout     : 'blank'\ncss        : 'hotfix'\nstandalone : true\n\ntitle      : 'Test Page'\ntype       : 'Library'\n---\n\n
\n  
\n  \n  \n  
Template
\n  
\n    
Item1
\n    
Item2
\n
\n
\n\n\n\n\n\n"
  },
  {
    "path": "server/documents/iframe/fixed-menu.html",
    "content": "---\nlayout     : 'blank'\nstandalone : true\n---\n
\n  
\n    \n  
\n  Features\n  Testimonials\n  Sign-in\n
\n
\n  
\n    \n  
\n  Features\n  Testimonials\n  Sign-in\n
\n\n\n"
  },
  {
    "path": "server/documents/iframe/fixed-vertical-menu.html",
    "content": "---\nlayout     : 'blank'\nstandalone : true\n---\n
\n  
\n    \n  
\n  Features\n  Testimonials\n  Sign-in\n
\n
\n  
\n    \n  
\n  Features\n  Testimonials\n  Sign-in\n
\n\n\n"
  },
  {
    "path": "server/documents/index.html.eco",
    "content": "---\nlayout     : 'homepage'\ncss        : 'index'\nstandalone : false\n---\n
\n  
\n    
\n      
\n        
\n          
\n            
\n              \n            
\n          
\n        
\n      
\n      \n         Menu\n      \n      
\n        
\n          <% if 'development' in @getEnvironments(): %>\n          <% else: %>\n          \n          \n          \n          \n          <% end %>\n        
\n        
\n          \n          
English
\n          
\n            
Search Languages
\n            
\n              \n              \n            
\n            <%- @partial('languages') %>\n          
\n        
\n      
\n    
\n  
\n
\n
\n  
\n    
\n      /RELEASE-NOTES.md\">\n        <%= @getVersion() %>\n      \n      
\n        \n          Semantic UI\n        \n        \n          User Interface is the language of the web\n        \n      
\n      \n\n      \n        Get Started\n      \n      New in 2.4\n    
\n    
\n      <% unless 'development' in @getEnvironments(): %>\n      
\n        
\n          
\n          \n        
\n      
\n      <% end %>\n    
\n  
\n
\n
\n  
\n    
\n      
\n        \n        
Design Beautiful Websites Quickly
\n        
Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML.
\n      
\n    
\n  
\n  
\n    
\n      
\n        
Concise HTML
\n        
Semantic UI treats words and classes as exchangeable concepts.
\n        
Classes use syntax from natural languages like noun/modifier relationships, word order, and plurality to link concepts intuitively.
\n        
Get the same benefits as BEM or SMACSS, but without the tedium.
\n        
\n      
\n      
\n        
\n          
\n            \n            \n            \n          
\n        
\n        
\n          
One
\n          
Two
\n          
Three
\n        
\n      
\n    
\n    
\n    
\n      
\n        
Intuitive Javascript
\n        
Semantic uses simple phrases called behaviors that trigger functionality.
\n        
Any arbitrary decision in a component is included as a setting that developers can modify.
\n      
\n      
\n        
\n          $('select.dropdown')\n            .dropdown('set selected', ['meteor', 'ember'])\n          ;\n        
\n        
\n          \n        
\n        \n      
\n    
\n    
\n    
\n      
\n        
Simplified Debugging
\n        
Performance logging lets you track down bottlenecks without digging through stack traces.
\n        
Don't have access to development tools right now? Check out this short clip.\n        
\n      
\n      
\n        
\n        $('.sequenced.images .image')\n          .transition({\n            debug     : true,\n            animation : 'jiggle',\n            duration  : 500,\n            interval  : 200\n          })\n        ;\n        
\n        
\n          \n          \n          \n        
\n      
\n    
\n  
\n
\n
\n  
\n    
\n      
\n        Semantic is growing fast. Want to see just how much? Sign up and we'll let you know\n      
\n      
\n        \n        \n        
\n          
\n            \n          
\n          \n        
\n      
\n    
\n  
\n
\n
\n  
\n    
\n      
\n        \n        Unbelievable Theming\n      
\n      
Semantic comes equipped with an intuitive inheritance system and high level theming variables that let you have complete design freedom.
\n      
Develop your UI once, then deploy with the same code everywhere.
\n      
\n         View Source\n      
\n    
\n    
\n      
\n        Select Theme\n        \n        
\n          
Semantic UI
\n          
Amazon
\n          
Google Material
\n          
GitHub
\n          
Bootstrap
\n          
Twitter
\n          
\n          
Raised
\n          
Chubby
\n          
Classic
\n        
\n      
\n      
\n      
\n        View\n      
\n      
\n         Add to Cart\n      
\n      
\n         Save for Later\n      
\n      
\n        \n        Rate\n      
\n      
\n        
1
\n        
2
\n        
3
\n      
\n    
\n  
\n  
\n    
\n      
Variable File
\n      
\n      
\n    
\n    
\n      
Override File
\n      
\n      
\n    
\n  
\n
\n
\n  
\n    
\n      
\n        
\n          \n          3000+ Theming Variables\n        
\n        
The only dogma from this framework: everything arbitrary is mutable.
\n        Theming Guide\n      
\n      
\n        
\n          \n          50+ UI Components\n        
\n        
Build your entire site with one UI stack. Share your UI between multiple projects.
\n        
Browse UI
\n      
\n      
\n        
\n          \n          5000+ Commits\n        
\n        
\n          Semantic UI is a free open source project already used in multiple large scale production environments.\n        
\n        Visit GitHub\n      
\n    
\n  
\n
\n
\n  
\n    
\n      
\n        \n        Unbelievable Breadth\n      
\n      
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.
\n      \n        See Layout Examples\n        \n      \n    
\n    
\n      
\n        
\n          
\n            Menu\n          
\n          
\n            \n              Inbox\n              
1
\n            \n            \n              Trash\n              
1
\n            \n            
\n              
\n                \n                \n              
\n            
\n          
\n          
\n            \n              Tab\n            \n            \n              Tab\n            \n          
\n          
\n            \n              Inbox\n            \n            \n              Starred\n            \n            \n              Trash\n            \n          
\n          
\n            \n              Inbox\n            \n            \n              Starred\n            \n            \n              Trash\n            \n          
\n        
\n        
\n          
\n            Divider\n          
\n          
\n            
\n              
A
\n            
\n            
or
\n            
\n              
B
\n            
\n          
\n        
\n        
\n          
\n            Accordion\n          
\n          
\n            
\n              \n                \n                Size\n              \n              
\n                
\n                  
\n                    
\n                      
\n                        \n                        \n                      
\n                    
\n                    
\n                      
\n                        \n                        \n                      
\n                    
\n                    
\n                      
\n                        \n                        \n                      
\n                    
\n                    
\n                      
\n                        \n                        \n                      
\n                    
\n                  
\n                
\n              
\n            
\n            
\n              \n                \n                Colors\n              \n              
\n                
\n                  
\n                    
\n                      
\n                        \n                        \n                      
\n                    
\n                    
\n                      
\n                        \n                        \n                      
\n                    
\n                    
\n                      
\n                        \n                        \n                      
\n                    
\n                    
\n                      
\n                        \n                        \n                      
\n                    
\n                  
\n                
\n              
\n            
\n          
\n        
\n        
\n          
\n            Message\n          
\n          
\n            \n            This site uses cookies\n          
\n          
\n            
\n              
Looking for help? 
\n              \n            
\n          
\n          
\n            
We're creating your profile page
\n            
It will be ready in just a second.
\n          
\n        
\n      
\n      
\n        
\n          
\n            Card\n          
\n          
\n            
\n              
\n                
\n                  
\n                    
Add Friend
\n                  
\n                
\n              
\n              \n            
\n            
\n              
Rachel Maddaw
\n              
\n                Pundit\n              
\n            
\n            
\n              \n                Joined in 1998\n              \n              \n                \n                22 Friends\n              \n            
\n          
\n        
\n        
\n          
\n            Feed\n          
\n          
\n            
\n              
\n                \n              
\n              
\n                
\n                  \n                    Mark\n                   added you as a friend\n                
\n              
\n            
\n            
\n              
\n                \n              
\n              
\n                You added Lena to the group Close Friends\n              
\n            
\n            
\n              
\n                \n              
\n              
\n                Eve just posted on your page\n              
\n            
\n          
\n        
\n        
\n          
\n            Label\n          
\n          
\n            \n            molly@thebears.com\n            \n          
\n          \n             23 New\n          \n          Dresses\n        
\n        
\n          
\n            Step\n          
\n          
\n            \n              \n              
\n                
Shipping
\n                
Choose your shipping options
\n              
\n            \n            \n              \n              
\n                
Billing
\n                
Enter billing information
\n              
\n            \n            \n              \n              
\n                
Confirm Order
\n                
Verify order details
\n              
\n            \n          
\n        
\n      
\n      
\n        
\n          
\n            Dropdown\n          
\n          
\n            \n            \n            
Select Country
\n            
\n              
Andorra
\n              
United Arab Emirates
\n              
Afghanistan
\n              
Antigua
\n              
Anguilla
\n              
Albania
\n              
Armenia
\n              
Netherlands Antilles
\n              
Angola
\n              
Argentina
\n              
American Samoa
\n              
Austria
\n              
Australia
\n              
Aruba
\n              
Aland Islands
\n              
Azerbaijan
\n              
Bosnia
\n              
Barbados
\n              
Bangladesh
\n              
Belgium
\n              
Burkina Faso
\n              
Bulgaria
\n              
Bahrain
\n              
Burundi
\n              
Benin
\n              
Bermuda
\n              
Brunei
\n              
Bolivia
\n              
Brazil
\n              
Bahamas
\n              
Bhutan
\n              
Bouvet Island
\n              
Botswana
\n              
Belarus
\n              
Belize
\n              
Canada
\n              
Cocos Islands
\n              
Congo
\n              
Central African Republic
\n              
Congo Brazzaville
\n              
Switzerland
\n              
Cote Divoire
\n              
Cook Islands
\n              
Chile
\n              
Cameroon
\n              
China
\n              
Colombia
\n              
Costa Rica
\n              
Serbia
\n              
Cuba
\n              
Cape Verde
\n              
Christmas Island
\n              
Cyprus
\n              
Czech Republic
\n              
Germany
\n              
Djibouti
\n              
Denmark
\n              
Dominica
\n              
Dominican Republic
\n              
Algeria
\n              
Ecuador
\n              
Estonia
\n              
Egypt
\n              
Western Sahara
\n              
Eritrea
\n              
Spain
\n              
Ethiopia
\n              
European Union
\n              
Finland
\n              
Fiji
\n              
Falkland Islands
\n              
Micronesia
\n              
Faroe Islands
\n              
France
\n              
Gabon
\n              
England
\n              
Grenada
\n              
Georgia
\n              
French Guiana
\n              
Ghana
\n              
Gibraltar
\n              
Greenland
\n              
Gambia
\n              
Guinea
\n              
Guadeloupe
\n              
Equatorial Guinea
\n              
Greece
\n              
Sandwich Islands
\n              
Guatemala
\n              
Guam
\n              
Guinea-Bissau
\n              
Guyana
\n              
Hong Kong
\n              
Heard Island
\n              
Honduras
\n              
Croatia
\n              
Haiti
\n              
Hungary
\n              
Indonesia
\n              
Ireland
\n              
Israel
\n              
India
\n              
Indian Ocean Territory
\n              
Iraq
\n              
Iran
\n              
Iceland
\n              
Italy
\n              
Jamaica
\n              
Jordan
\n              
Japan
\n              
Kenya
\n              
Kyrgyzstan
\n              
Cambodia
\n              
Kiribati
\n              
Comoros
\n              
Saint Kitts and Nevis
\n              
North Korea
\n              
South Korea
\n              
Kuwait
\n              
Cayman Islands
\n              
Kazakhstan
\n              
Laos
\n              
Lebanon
\n              
Saint Lucia
\n              
Liechtenstein
\n              
Sri Lanka
\n              
Liberia
\n              
Lesotho
\n              
Lithuania
\n              
Luxembourg
\n              
Latvia
\n              
Libya
\n              
Morocco
\n              
Monaco
\n              
Moldova
\n              
Montenegro
\n              
Madagascar
\n              
Marshall Islands
\n              
MacEdonia
\n              
Mali
\n              
Burma
\n              
Mongolia
\n              
MacAu
\n              
Northern Mariana Islands
\n              
Martinique
\n              
Mauritania
\n              
Montserrat
\n              
Malta
\n              
Mauritius
\n              
Maldives
\n              
Malawi
\n              
Mexico
\n              
Malaysia
\n              
Mozambique
\n              
Namibia
\n              
New Caledonia
\n              
Niger
\n              
Norfolk Island
\n              
Nigeria
\n              
Nicaragua
\n              
Netherlands
\n              
Norway
\n              
Nepal
\n              
Nauru
\n              
Niue
\n              
New Zealand
\n              
Oman
\n              
Panama
\n              
Peru
\n              
French Polynesia
\n              
New Guinea
\n              
Philippines
\n              
Pakistan
\n              
Poland
\n              
Saint Pierre
\n              
Pitcairn Islands
\n              
Puerto Rico
\n              
Palestine
\n              
Portugal
\n              
Palau
\n              
Paraguay
\n              
Qatar
\n              
Reunion
\n              
Romania
\n              
Serbia
\n              
Russia
\n              
Rwanda
\n              
Saudi Arabia
\n              
Solomon Islands
\n              
Seychelles
\n              
Sudan
\n              
Sweden
\n              
Singapore
\n              
Saint Helena
\n              
Slovenia
\n              
Svalbard, I Flag Jan Mayen
\n              
Slovakia
\n              
Sierra Leone
\n              
San Marino
\n              
Senegal
\n              
Somalia
\n              
Suriname
\n              
Sao Tome
\n              
El Salvador
\n              
Syria
\n              
Swaziland
\n              
Caicos Islands
\n              
Chad
\n              
French Territories
\n              
Togo
\n              
Thailand
\n              
Tajikistan
\n              
Tokelau
\n              
Timorleste
\n              
Turkmenistan
\n              
Tunisia
\n              
Tonga
\n              
Turkey
\n              
Trinidad
\n              
Tuvalu
\n              
Taiwan
\n              
Tanzania
\n              
Ukraine
\n              
Uganda
\n              
Us Minor Islands
\n              
United States
\n              
Uruguay
\n              
Uzbekistan
\n              
Vatican City
\n              
Saint Vincent
\n              
Venezuela
\n              
British Virgin Islands
\n              
Us Virgin Islands
\n              
Vietnam
\n              
Vanuatu
\n              
Wallis and Futuna
\n              
Samoa
\n              
Yemen
\n              
Mayotte
\n              
South Africa
\n              
Zambia
\n              
Zimbabwe
\n            
\n          
\n\n          
\n          
\n            \n            Filter Posts\n            
\n              
\n                \n                \n              
\n              
\n                \n                Tag Label\n              
\n              
\n                
\n                  
\n                  Important\n                
\n                
\n                  
\n                  Announcement\n                
\n                
\n                  
\n                  Cannot Fix\n                
\n                
\n                  
\n                  News\n                
\n                
\n                  
\n                  Enhancement\n                
\n                
\n                  
\n                  Change Declined\n                
\n                
\n                  
\n                  Off Topic\n                
\n                
\n                  
\n                  Interesting\n                
\n                
\n                  
\n                  Discussion\n                
\n              
\n            
\n          
\n      
\n        
\n          
\n            Segment\n          
\n          
\n          
\n          
\n          
\n\n          
\n          
\n          
\n        
\n        
\n          
\n            Input\n          
\n          
\n            \n            \n            
Search
\n          
\n          \n          
\n            
\n              http://\n            
\n            \n            \n          
\n\n          \n          
\n            \n            \n              Add Tags\n            \n          
\n        
\n        
\n          
\n            Checkbox\n          
\n          
\n            \n            \n          
\n\n          \n          
\n            \n            \n          
\n\n          \n          
\n            \n            \n          
\n        
\n      
\n    
\n  
\n
\n
\n  
\n    
\n      
\n        
\n          \n          Responsively Designed\n        
\n        
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.
\n        Responsive Examples\n      
\n      
\n        
\n          \n          Partners with Libraries You Love\n        
\n        
Semantic has integrations with React, Angular, Meteor, Ember and many other frameworks to help organize your UI layer alongside your application logic.
\n        See Integrations\n      
\n    
\n  
\n
\n
\n  
\n    
\n      
\n        \n        Liberate your Development\n      
\n      
\n        
\n          
Enterprise Ready
\n          
Build tools, performance logging, support for custom definitions, multiple-levels of theme inheritance—a developer's dream.
\n          \n            \n            Get Started Now\n          \n        
\n      
\n    
\n  
\n
\n"
  },
  {
    "path": "server/documents/introduction/advanced-usage.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'started'\nstandalone  : true\norder       : 4\n\ntitle       : 'Recipes'\ndescription : 'Additional integration paths for advanced users'\ntype        : 'Introduction'\n---\n<%- @partial('header') %>\n\n
\n\n\n  
Custom Pipelines
\n  
\n    
Importing Gulp Tasks
\n    
You don't have to use our gulp pipeline, just import the task into your own gulpfile
\n    
You can fork this example project to see an example of how to import Semantic UI tasks into your project.
\n    
\n    var\n      gulp  = require('gulp'),\n      watch = require('./semantic/tasks/watch'),\n      build = require('./semantic/tasks/build')\n    ;\n    // import task with a custom task name\n    gulp.task('watch ui', watch);\n    gulp.task('build ui', build);\n    
\n  
\n\n  
Semantic.json Settings
\n\n  
\n    
Auto-Install
\n    
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.
\n    
\n     {\n      // install will now automatically build your project files without user interaction\n      \"autoInstall\": true,\n\n      // these settings may be different\n      \"base\": \"\",\n      \"paths\": {\n        \"source\": {\n          \"config\": \"src/theme.config\",\n          \"definitions\": \"src/definitions/\",\n          \"site\": \"src/site/\",\n          \"themes\": \"src/themes/\"\n        },\n        \"output\": {\n          \"packaged\": \"dist/\",\n          \"uncompressed\": \"dist/components/\",\n          \"compressed\": \"dist/components/\",\n          \"themes\": \"dist/themes/\"\n        },\n        \"clean\": \"dist/\"\n      },\n      \"permission\": false,\n      \"rtl\": false,\n    }\n    
\n  
\n\n    
\n      
Right-to-left (RTL) Languages
\n      
Including the flag rtl:true will build Semantic UI using RTLCSS.
\n      
To build both LTR and RTL versions use the flag rtl: 'both'
\n      
\n       {\n        // builds both LTR and RTL version\n        \"rtl\": \"both\",\n\n        // these settings may be different\n        \"base\": \"\",\n        \"paths\": {\n          \"source\": {\n            \"config\": \"src/theme.config\",\n            \"definitions\": \"src/definitions/\",\n            \"site\": \"src/site/\",\n            \"themes\": \"src/themes/\"\n          },\n          \"output\": {\n            \"packaged\": \"dist/\",\n            \"uncompressed\": \"dist/components/\",\n            \"compressed\": \"dist/components/\",\n            \"themes\": \"dist/themes/\"\n          },\n          \"clean\": \"dist/\"\n        },\n        \"permission\": false,\n      }\n      
\n  
\n\n  
Prototyping with Semantic UI
\n  
\n    
Sketch Files
\n    
If you are looking to prototype layouts using Sketch with Semantic UI check out Semantic UI Sketch Files
\n    \n  
\n\n  
Single Components
\n\n  
\n    
CDN Releases
\n    
Individual components are available on jsDelivr
\n    
\n    /dist/semantic.min.css\">\n    
\n    
\n    \n    
\n    View All CDN Files\n  
\n\n  
\n    
Tagged Releases
\n    
Component repos are released on NPM and as tagged releases on GitHub.
\n    
Check the list of repos available under Semantic Org on GitHub
\n    
Each component's release notes will automatically update with the relevant notes for that component from the main release.
\n    
\n     npm install semantic-ui-component\n    
\n  
\n\n  
\n    
Server-Side Rendering
\n    
Individual components repos include an auto-generated index.js file to simplify require use with NodeJS, for server-side rendering or with Browserify.
\n    
\n     npm install semantic-ui-dropdown\n    
\n    
\n      var\n        dropdown = require('semantic-ui-dropdown')\n      ;\n      foo.dropdown();\n    
\n  
\n\n  
Importing LESS
\n\n  
\n    
LESS Only Distribution
\n    
A special distribution Semantic-UI-LESS is available for projects that use custom integrations and do not require our build tools.
\n    
LESS source files are not prefixed, and will need to be run through autoprefixer before being used
\n  
\n\n  
\n    
Importing Semantic
\n    
semantic.less is available in all releases as an entry point for importing multiple components from other LESS files.
\n    
\n      /* Import all components */\n      @import 'src/semantic';\n    
\n  
\n\n  
\n    
Importing Components
\n    
If you need to import individual components, you should scope each import to avoid inheritance issues.
\n    
\n      /* Import specific components with scope */\n      & { @import 'src/definitions/elements/button'; }\n      & { @import 'src/definitions/elements/list'; }\n    
\n  
\n\n  
Running Docs Locally
\n\n  
\n    
Download Docs Server
\n    
The easiest way to get Semantic UI docs is to clone the repo
\n    
\n      git clone https://github.com/Semantic-Org/Semantic-UI-Docs.git\n    
\n  
\n  
\n    
Install Dependencies
\n    
Semantic UI's documentation is written in Docpad an amazing static site generator built in NodeJS
\n    
\n      cd docs/\n      npm install\n    
\n  
\n\n  
\n    
A Note About Paths
\n    
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.
\n    
These gulp tasks expect two sibling folders
\n    
\n      
\n        \n        
\n          
ui/
\n          
Files from semantic ui repo
\n        
\n      
\n      
\n        \n        
\n          
docs/
\n          
Files from docs repo
\n        
\n      
\n    
\n  
\n  
\n    
Build UI
\n    
The first time you run docs you will need to build the whole project once
\n    
\n      cd ui/\n      gulp build-docs\n    
\n  
\n  
\n    
Run Docpad Server
\n    
Docpad
\n    
\n      cd docs/\n      # initial build may take several minutes\n      docpad run\n    
\n  
\n  
\n    
Serve UI to Docs
\n    
You can then continue to make modifications to UI and \"serve\" these files to a live docs instance to see your changes immediately
\n    
\n      cd ui/\n      gulp serve-docs\n    
\n  
\n  
\n    
Hosted Docs
\n    
If you are managing your documentation you can automatically deploy to GitHub Pages using a built in docpad gh-pages plugin
\n    
For more information about GitHub Pages, check out the docs on GitHub
\n    
\n      docpad deploy-ghpages --env static\n    
\n  
\n  
\n    
Custom Docs Paths
\n    
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.
\n  
\n\n
\n"
  },
  {
    "path": "server/documents/introduction/build-tools.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'started'\nstandalone  : true\norder       : 3\n\ntitle       : 'Build Tools'\ndescription : 'Using Gulp with Semantic UI'\ntype        : 'Introduction'\n---\n<%- @partial('header') %>\n\n
\n\n  
Overview
\n\n  
\n    
30 Second Explanation
\n    
Download Semantic UI navigate to the install folder then run a gulp command.
\n\n    
To build all files:
\n    
\n      gulp build\n    
\n\n    
To watch for changes
\n    
\n      gulp watch\n    
\n  
\n  
\n    
Why Build Tools?
\n    
Semantic UI uses Gulp for several reasons:
\n    
\n      
Process LESS files with theming variables
\n      
Add vendor prefixes for supported browsers with autoprefixer
\n      
Watch file changes and rebuild the necessary files when adjusting themes
\n      
Automatically process asset paths, so that minified and concatenated releases can exist in different directories
\n      
Allow custom builds with only the required components for your site
\n      
Allow advanced usage like Right-To-Left (RTL) languages using RTLCSS
\n    
\n  
\n  
\n    
Folder Structure
\n    
A Semantic UI project includes the following folder structure.
\n    
\n      
\n        \n        
\n          
src
\n          
\n            
\n              \n              
\n                site\n                
Your site's theme
\n              
\n            
\n            
\n              \n              
\n                
themes
\n                
\n                  
\n                    \n                    
\n                      default\n                      
Default theme
\n                    
\n                  
\n                  
\n                    \n                    
\n                      packaged-theme\n                      
Additional themes
\n                    
\n                  
\n                
\n              
\n            
\n            
\n              \n              
\n                theme.config\n                
Config file for setting packaged themes
\n              
\n            
\n          
\n        
\n      
\n      
\n        \n        
\n          
dist
\n          
Compiled CSS and JS files
\n          
\n            
\n              \n              
\n                
components
\n                
Individual component CSS and JS
\n              
\n            
\n            
\n              \n              
\n                
semantic.css
\n                
concatenated release
\n              
\n            
\n            
\n              \n              
\n                
semantic.js
\n                
concatenated release
\n              
\n            
\n          
\n        
\n      
\n      
\n        \n        
\n          semantic.json\n          
Contains build settings for gulp
\n        
\n      
\n    
\n  
\n  
\n    
Gulp Commands
\n    
Below is a list of all available gulp commands
\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
CommandDescription
installAsks install questions to setup semantic.json
watch (default)Watches for changes in source files, and builds file on change
buildBuild all files
cleanCleans dist/ folder
versionOutputs current version
build-javascriptBuild JS files
build-cssBuild CSS files
build-assetsBuild assets files
serve-docsServes files to local docs instance
build-docsBuilds files to docs folder
\n  
\n\n\n  
Configuration Files
\n\n  
\n    
semantic.json
\n    
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.
\n    
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.
\n    
\n    {\n      // base path added to all other paths specified in \"paths\"\n      \"base\": \"\",\n\n      // current version of Semantic UI\n      \"version\": \"<%= @getVersion() %>\",\n\n      \"paths\": {\n\n        \"source\": {\n\n          // source theme.config\n          \"config\"      : \"src/theme.config\",\n\n          // source definition folder\n          \"definitions\" : \"src/definitions/\",\n\n          // source site theme\n          \"site\"        : \"src/site/\",\n\n          // source themes folder\n          \"themes\"      : \"src/themes/\"\n        },\n\n        \"output\": {\n          // packaged source (both compressed/uncompressed)\n          \"packaged\"     : \"dist/\",\n\n          // uncompressed source\n          \"uncompressed\" : \"dist/components/\",\n\n          // compressed source\n          \"compressed\"   : \"dist/components/\",\n\n          // output directory for theme assets\n          \"themes\"       : \"dist/themes/\"\n        },\n\n        // directory for gulp clean task\n        \"clean\"        : \"dist/\"\n      },\n\n      // when set to an integer permission, will set dist files with this file permission\n      \"permission\" : false,\n\n      // whether gulp watch/build should run RTLCSS\n      \"rtl\": false,\n\n      // will only include components with these names\n      \"components\": [\n        \"reset\",\n        \"site\",\n        \"button\",\n        \"container\",\n        \"divider\",\n        \"flag\",\n        \"header\",\n        \"icon\",\n        \"image\",\n        \"input\",\n        \"label\",\n        \"list\",\n        \"loader\",\n        \"rail\",\n        \"reveal\",\n        \"segment\",\n        \"step\",\n        \"breadcrumb\",\n        \"form\",\n        \"grid\",\n        \"menu\",\n        \"message\",\n        \"table\",\n        \"ad\",\n        \"card\",\n        \"comment\",\n        \"feed\",\n        \"item\",\n        \"statistic\",\n        \"accordion\",\n        \"checkbox\",\n        \"dimmer\",\n        \"dropdown\",\n        \"embed\",\n        \"modal\",\n        \"nag\",\n        \"popup\",\n        \"progress\",\n        \"rating\",\n        \"search\",\n        \"shape\",\n        \"sidebar\",\n        \"sticky\",\n        \"tab\",\n        \"transition\",\n        \"api\",        \n        \"state\",\n        \"visibility\"\n      ],\n      // whether to include special project maintainer tasks\n      \"admin\": false\n    }\n\n    
\n  
\n\n  
\n    
theme.config
\n    
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
\n    
You can learn more about theme.config by checking out the theming guide
\n  
\n\n  
\n    
Importing Gulp Tasks
\n    
See our recipes section for examples on how to import individual gulp tasks into your custom Gulpfile.
\n  
\n  
\n    
\n      Auto-Install & Continuous Integration\n      
New in 2.2
\n    
\n    
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.
\n    
Specifying autoInstall: true in an environments semantic.json configuration will prevent any user prompting when running npm install allowing for automated deployment.
\n  
\n\n
\n"
  },
  {
    "path": "server/documents/introduction/getting-started.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'started'\nstandalone  : true\norder       : 1\n\ntitle       : 'Getting Started'\ndescription : 'Getting up and running with Semantic UI'\ntype        : 'Main'\n---\n\n\n<%- @partial('header') %>\n\n
\n\n  
Preface
\n\n  
\n\n    
Using Build Tools
\n\n    
Semantic UI packaged Gulp build tools so your project can preserve its own theme changes.
\n    
The easiest way to install Semantic UI is our NPM package which contains special install scripts to make setup interactive and updates seamless.
\n\n    
For installing with specific integrations like Ember, React, or Meteor, see our integration guide
\n    
For integrating Semantic UI tasks into your own build tools, or using a CDN see our recipes section.
\n\n  
\n  
\n    
Simpler Setup
\n    
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.
\n    Download Zip\n    View all Semantic-Org Repos \n  
\n\n  
Installing
\n\n\n  
\n    
Install NodeJS
\n    
If you are unfamiliar with setting up NodeJS you can follow the steps below, or check out the download page on nodejs.org
\n\n    
\n      Mac\n      Linux\n      Windows\n    
\n    
\n      
Option 1: Homebrew
\n      
After installing homebrew
\n      
\n        brew install node\n      
\n      
Option 2: Git
\n      
\n      git clone git://github.com/nodejs/node.git\n      cd node\n      ./configure\n      make\n      sudo make install\n      
\n    
\n    
\n      
Install via PPA
\n      
Although Chris Lea's PPA was once the best way to install node, it is now somewhat out of date.
\n      
The recommended path to install Semantic UI is using Joyent's package manager guide.
\n      
Ubuntu
\n      
\n        curl --silent --location https://deb.nodesource.com/setup_6.x | sudo bash -\n        sudo apt-get install --yes nodejs\n      
\n      
Debian
\n      
\n        apt-get install curl\n        curl --silent --location https://deb.nodesource.com/setup_6.x | bash -\n        apt-get install --yes nodejs\n      
\n      
Red Hat
\n      
\n      curl --silent --location https://rpm.nodesource.com/setup | bash -\n      yum -y install nodejs\n      
\n    
\n    
\n      
Install the exe
\n      
Download the NodeJS executable.
\n    
\n  
\n\n  
\n    
Install Gulp
\n    
Semantic UI uses Gulp to provide command line tools for building themed versions of the library with just the components you need.
\n    
Gulp is an NPM module and must be installed globally
\n    
\n    npm install -g gulp\n    
\n  
\n\n  
\n    
Install Semantic UI
\n    
Semantic UI is available in an eponymous package on NPM
\n    
\n      \n        Video\n      \n      \n        Code\n      \n    
\n    
\n      \n    
\n    
\n      
\n        npm install semantic-ui --save\n        cd semantic/\n        gulp build\n      
\n    
\n  
\n\n  
\n    
Include in Your HTML
\n    
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.
\n    
\n      <link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">\n      <script\n  src=\"https://code.jquery.com/jquery-3.1.1.min.js\"\n  integrity=\"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=\"\n  crossorigin=\"anonymous\"></script>\n      <script src="semantic/dist/semantic.min.js"></script>\n    
\n  
\n  
Updating
\n\n  
\n    
Updating via NPM
\n    
Semantic's NPM install script will automatically update Semantic UI to the latest version while preserving your site and packaged themes.
\n    
\n      npm update\n    
\n  
\n\n  
Next Steps
\n\n  
\n    
All Set!
\n    
Well done! Semantic UI is now ready to be used.
\n\n    
\n      
\n        
\n          \n          See how to use gulp commands and build tools\n        
\n      
\n      
\n        
\n          \n          Learn about changing themes\n        
\n      
\n      
\n        
\n          \n          See recipes for using Semantic UI in your project\n        
\n      
\n    
\n  
\n\n
\n"
  },
  {
    "path": "server/documents/introduction/glossary.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'started'\nstandalone  : true\norder       : 5\n\ntitle       : 'Glossary'\ndescription : 'Jargon specific to Semantic UI'\ntype        : 'Introduction'\n---\n<%- @partial('header') %>\n\n
\n\n
Terminology
\n\n
\n  
Types of Components
\n  
Semantic UI classifies components into different definition types depending on its qualities. Each of these five types uses a unique definition format.
\n  \n    \n      \n        \n        \n      \n      \n      \n        \n        \n      \n      \n        \n        \n      \n      \n        \n        \n      \n      \n        \n        \n      \n      \n        \n        \n      \n    \n  
Globals\n          Globals are styles that are applied across a site. These include things like CSS resets, and sitewide font, link and sizing defaults.
\n          
Most importantly, globals include site-wide theming variables that other components can inherit and modify.
Element\n          UI elements are page elements with a single function. They can exist alone or in a plural form with elements sharing qualities.
\n          
For example, a group of buttons may use ui red buttons as a grouping with individual ui button children.
Collection\n          
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.
\n        
Views\n          
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.
\n        
Modules\n          
Modules are components that include both a definition of how they appear and how they behave. These include components like, accordions, dropdowns, and popups.
\n        
Behaviors\n          
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.
\n        
\n
\n\n
\n  
Project Terminology
\n  
Semantic UI classifies components into separate definition groupings.
\n\n  \n    \n      \n        \n        \n      \n      \n        \n        \n      \n      \n        \n        \n      \n    \n  
Component\n          A component is a general term used to refer to any user interface element packaged for distribution.\n        
Definition\n          
A definition is a set of CSS and Javascript which describe a component's essential qualities.
\n          
Definition use variables to express arbitrary parts of a component's appearance so that they can be changed with themes.
\n        
ui\n          
ui is a special class name used to distinguish parts of components from components.
\n          
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.
\n          
The ui class name helps encapsulate CSS rules by making sure all 'parts of a component' are defined in context to a 'whole' component.
\n          
It also helps make scanning unknown code simpler. If you see ui you know you are looking at a component.
\n        
\n
\n\n
\n  
Definition Terminology
\n  
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.
\n\n  \n    \n      \n        \n        \n      \n      \n        \n        \n      \n      \n        \n        \n      \n      \n        \n        \n      \n      \n        \n        \n      \n      \n        \n        \n      \n      \n        \n        \n      \n    \n  
Component\n          A component is a general term used to refer to any user interface element packaged for distribution.\n        
Definition\n          
A definition is a set of CSS and Javascript which describe a component's essential qualities.
\n          
Definition use variables to express arbitrary parts of a component's appearance so that they can be changed with themes.
\n        
Types\n          
Types are versions of an element that modify the element's standard appearance.
\n          
Types cannot be used simultaneously on the same element. For example, \"cats\" and \"dogs\" are types of animals, but are mutually exclusive.
\n        
Variations\n          
Variations modify qualities of an element like size, or color.
\n          
Variations are mutually inclusive, and can be used together to modify an element.
\n        
Content\n          
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.
\n          
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.\n        
States\n          
States are modifications to an element that help indicate a change in affordances. Common states include loading, disabled, and active.
\n        
Behaviors\n          
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.
\n        
\n
\n\n
\n  
General Terms
\n\n  
These terms are general programming terms that may be used without explanation in other documentation pages.
\n\n  \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n  
NamespaceA name given to an element for the explicit purpose of containing the application of properties.
\n      
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.
GulpGulp is a tool for automating command line tasks Gulpjs.com
NPMNPM is a package manager used for downloading Node JS packages.
Node JSNode is a event driven programming language frequently used to run command line tools for front end development. nodejs.org
\n\n
\n\n
\n"
  },
  {
    "path": "server/documents/introduction/integrations.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'started'\nstandalone  : true\norder       : 2\n\ntitle       : 'Integrations'\ndescription : 'Using Semantic UI with Other Libraries'\ntype        : 'Introduction'\n---\n<%- @partial('header') %>\n\n
\n\n  
\n    React\n  
\n\n  
\n    
Contribute to React Development
\n    
Semantic UI React bindings are still in development, but are available for most components.
\n    Visit React Repo\n  
\n\n  
\n    Meteor\n  
\n\n  
\n    
Install via Atmosphere
\n    
Install the Semantic UI package from atmosphere.
\n    
\n      meteor add semantic:ui\n    
\n    
The next step will differ depending on what version of Meteor you are running. Continue to the section relevant to your version of Meteor.
\n    
(Meteor <1.3) Install less-autoprefixer package
\n    
You will need a special package less-autoprefixer, to add vendor prefixes to your LESS pipeline.
\n    
\n      Since flemay:less-autoprefixer compiles LESS files you don't need any other less package.\n    
\n    
\n      meteor add flemay:less-autoprefixer\n    
\n    
Continue to the \"Create a custom.semantic.json file\" section
\n    
(Meteor 1.3+) Install less and postcss packages
\n    
Remove the standard-minifier-css package.
\n    
\n      meteor remove standard-minifier-css\n    
\n    
Install the less and postcss packages.
\n    
\n      meteor add less juliancwirko:postcss\n    
\n    
To configure the postcss package, add the following to your package.json file and save it.
\n    
\n      {\n        \"devDependencies\": {\n          \"autoprefixer\": \"^6.3.1\"\n        },\n        \"postcss\": {\n          \"plugins\": {\n            \"autoprefixer\": {\"browsers\": [\"last 2 versions\"]}\n          }\n        }\n      }\n    
\n    
To finish setting up the postcss package, install the new autoprefixer NPM package.
\n    
\n      meteor npm install\n    
\n  
\n  
\n    
Create a custom.semantic.json file
\n    
With meteor stopped:\n    
\n      touch client/lib/semantic-ui/custom.semantic.json\n    
\n    
custom.semantic.json is a special file used to determine which themes and components to include in your project's build.
\n    
To remove a component from the pipeline, simply set the boolean value to false
\n    
\n      {\n      \"definitions\": {\n        \"accordion\" : true,\n        \"ad\"        : true,\n        \"api\"       : true,\n        /* etc */\n      },\n      \"themes\": {\n        \"amazon\"     : false,\n        \"basic\"      : false,\n        \"bookish\"    : false,\n        \"bootstrap3\" : false,\n        \"chubby\"     : false,\n        \"classic\"    : false,\n        \"default\"    : true,\n        /* etc */\n      }\n    
\n  
\n  
\n    
Start Meteor / Generate
\n\n    
Every time Meteor starts or refreshes it calls the package semantic:ui to generate Semantic UI.
\n\n    
The package has a uses the diff between custom.semantic.json and .custom.semantic.json to avoid regenerating files unnecessarily.
\n\n    
If the file .custom.semantic.json does not exist or it is different than custom.semantic.json then it will generate Semantic UI.
\n  
\n  
\n    
Customize Site Variables
\n    
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.
\n    
Visit our theming guide to learn more about theming.
\n  
\n  
\n    
Issues & Debugging
\n    
For help with Semantic UI Meteor, and for the latest updates, please visit the repository home on GitHub
\n     Visit Meteor Repo\n  
\n\n  
\n    Ember\n  
\n\n\n  
\n    
Installing via CLI
\n    
Include the library as an NPM dependency, from within an ember-cli app.
\n\n    
If you are using Ember CLI 1.13-2.X\n    
\n      ember install semantic-ui-ember\n    
\n    
If you are using an older version < 0.1.5\n    
\n    npm install --save-dev Semantic-Org/Semantic-UI-Ember\n    
\n  
\n\n  
\n    
Run the Library's Blueprint
\n    
\n      ember generate semantic-ui-ember\n    
\n  
\n  
\n    
Get Coding
\n    
For example of individual components check out the GitHub repository
\n     Visit Ember Repo\n  
\n\n  
\n    Angular\n  
\n\n  
\n    
Contribute to Angular Development
\n    
Semantic UI angular bindings are still in development, but are available for some components
\n    Visit Angular Repo\n  
\n
\n"
  },
  {
    "path": "server/documents/introduction/new.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'new'\nstandalone  : true\norder       : 1\n\ntitle       : 'New in 2.4'\ndescription : 'An introduction to new features found in the latest release'\ntype        : 'Main'\n---\n\n<%- @partial('header',  { tabs: { twoFour: 'New in 2.4', twothree: '2.3', twotwo: '2.2', twoone: '2.1', two: '2.0' } }) %>\n\n\n\n
\n  
\n    
\n      Solving Empty State\n    
\n    
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.
\n\n    
Additionally several important component updates are included in this release.\n    
\n      
Modals have been re-architected to use hybrid flex support, falling back to JS positioning for more complex use-cases (or older browsers). 
\n      
Dropdowns now include a clearable setting for letting users reset dropdowns to its empty state.
\n    
\n\n\n    
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.
\n\n    
\n      New UI Component\n    
\n    
\n      
\n        Placeholders\n      
\n      
Placeholders can be used to reduce the jarringness, and perceived load time when loading new content
\n      <%- @partial('examples/content-loader') %>\n    
\n    
\n      
\n        
\n          \n          
\n            Semantic-Org/Semantic-UI-Docs\n            
Updated 22 mins ago
\n          
\n        
\n        
\n          \n          
\n            
\n              
\n                
\n                
\n              
\n            
\n          
\n        
\n        
\n          \n          
\n            
\n              
\n                
\n                
\n              
\n            
\n          
\n        
\n        
\n          \n          
\n            
\n              
\n                
\n                
\n              
\n            
\n          
\n        
\n        
\n          \n          
\n            
\n              
\n                
\n                
\n              
\n            
\n          
\n        
\n      
\n    
\n    
\n      
\n        Placeholder Segment\n      
\n      
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.
\n      
\n        
\n          \n          No users have been added yet\n        
\n        
Add User
\n      
\n    
\n    
\n      
\n        
\n          
Or
\n          
\n            
\n              
\n                \n                Find Country\n              
\n              
\n                
\n                  
\n                    \n                    \n                  
\n                  
\n                
\n              
\n            
\n            
\n              
\n                \n                Add New Country\n              
\n              
\n                Create\n              
\n            
\n          
\n        
\n      
\n    
\n    
\n      New Features\n    
\n    
\n      
\n        Clearable Dropdowns\n      
\n      
Now dropdowns can specify that their content can be cleared with clearable: true.
\n\n      
\n        \n        
\n          South Korea\n        
\n        \n        <%- @partial('examples/single/flag-menu') %>\n      
\n      
\n      
\n        Show me\n        
\n          \n          
css
\n          \n          
\n            <%- @partial('examples/single/preset-menu') %>\n          
\n        
\n        classes currently available.\n      
\n    
\n    
\n      
\n        Improved Flexbox Modals\n      
\n      
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.
\n      
\n        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.\n      
\n    
\n  
\n\n  
\n    
A New Approach
\n\n    
After an extended period of patches, Semantic UI 2.3 marks the return to significant feature changes for the project.
\n    
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.
\n\n    
New Features
\n    
\n\n      
Font Awesome 5.0 & Better Icon Searching
\n      
In 2.3 icons now include a full port of Font Awesome 5.0.6, including 929 icons.
\n      
Icon categories now match icon categories in Font Awesome's documentation, making it easier to find icons between docs.
\n      
\n        
Smile
\n        
Smile Outline
\n        
Hand Rock 
\n        
Hand Paper 
\n        
Hand Scissors
\n      
\n      
Semantic UI icon docs now includes a global icon search with easy copy and paste access to html
\n    
\n\n\n    
\n      
Flexbox Modals and Dimmers
\n\n      
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.
\n\n      
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.
\n\n\n      
\n        
\n          Top Aligned Modal\n        
\n        
\n          \n          \n        
\n        
\n          
\n            Cancel\n          
\n          
\n            Submit\n            \n          
\n        
\n      
\n      \n        Open Top Aligned Modal\n      \n      
\n        $('.ui.special.modal')\n          .modal({\n            centered: false\n          })\n          .modal('attach events', '.modal.example .button')\n        ;\n      
\n    
\n\n    
\n      
New Transitions
\n      
\n        Transition now includes zoom and glow. Glow is useful for highlighting elements on page,\n      
\n      
\n        $('.autumn.leaf')\n          .transition('zoom')\n        ;\n      
\n      
\n        $('.autumn.leaf')\n          .transition('glow')\n        ;\n      
\n      \n    
\n\n    
\n      
Global Font Weight Variables
\n      
Theming now uses two no global variables @bold and @normal making it easier to modify font weights in a more complex font stack
\n      
\n        /* Use some custom font weights */\n        @bold: 600;\n        @normal: 400;\n      
\n\n    
\n    
\n      
Local Category Search
\n      
You can now use category search with the source option without having to add API callbacks
\n      
\n        
\n          \n          \n        
\n        
\n      
\n      
\n        var categoryContent = [\n          { category: 'South America', title: 'Brazil' },\n          { category: 'South America', title: 'Peru' },\n          { category: 'North America', title: 'Canada' },\n          { category: 'Asia', title: 'South Korea' },\n          { category: 'Asia', title: 'Japan' },\n          { category: 'Asia', title: 'China' },\n          { category: 'Europe', title: 'Denmark' },\n          { category: 'Europe', title: 'England' },\n          { category: 'Europe', title: 'France' },\n          { category: 'Europe', title: 'Germany' },\n          { category: 'Africa', title: 'Ethiopia' },\n          { category: 'Africa', title: 'Nigeria' },\n          { category: 'Africa', title: 'Zimbabwe' },\n        ];\n        $('.local-category.example .ui.search')\n          .search({\n            type: 'category',\n            source: categoryContent,\n            searchFields: [\n              'title',\n              'category'\n            ]\n          })\n        ;\n      
\n    
\n    
\n      
Arrow Aligment on Small Popups
\n      
Semantic popups now detects when horizontally aligning the popup on it's arrow is more reasonable than matching edges with a popup.
\n      
\n        To use this feature be sure to specify movePopup: false in your settings\n      
\n      \n\n      
\n      \n      
\n        $('.centering.example .avatar.image').popup();\n      
\n    
\n    
\n      
Popups Support Multiple Coordinate Systems
\n      
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.
\n      
\n        
Button is in here
\n        
Button
\n      
\n      
\n        
Popup is in here
\n        
\n          
\n            Test\n          
\n          
This popup now appears correct without having to move the popup to the same coordinate system by moving the DOM element.
\n        
\n      
\n      
\n        
\n          
Button is in here
\n          
Button
\n        
\n        
\n          
Popup is in here
\n          
\n            
\n              Test\n            
\n            
This popup now appears correct without having to move the popup to the same coordinate system by moving the DOM element.
\n          
\n        
\n      
\n      
\n        /* Activating element is inside #one with different positioning context */\n        #one {\n          display: block;\n          position: relative;\n          padding: 50px 100px;\n          background-color: #F0F0F0;\n        }\n        /* Popup is inside two with position relative (creating another positioning context) */\n        #two {\n          display: block;\n          background-color: #E2EAE4;\n          position: relative;\n          top: 10px;\n          padding: 50px 8px;\n        }\n      
\n      
\n        $('.complex-popup.example .ui.button')\n          .popup({\n            movePopup: false,\n            popup: $('.complex-popup.example .popup')\n          })\n        ;\n      
\n    
\n\n    
\n      
New Matching Options
\n      
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' 
\n      
\n        
Query matches the start of field exactly
\n        
\n          Query matches any part of field 
New
\n        
\n        
Query \"fuzzy\" matches field
\n      
\n      
\n        $('.ui.search')\n          .search({\n            fullTextSearch: 'exact' // only matches exact matches (no fuzzy matching)\n          })\n        ;\n      
\n    
\n\n  
\n\n  
\n    
By The Numbers
\n    
2.2 represents nearly a half year of updates, many new features, and bug patches.
\n    
\n      
124 closed issues
\n      
40 new features
\n      
70 bug fixes
\n    
\n\n    
For the complete list of bugs, their accompanying issue threads and the fixes please consult the release notes
\n    Release Notes\n\n    
Project Changes
\n\n    
\n      
Critical Bug Fixes
\n\n      
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
\n\n      
\n        
\n          \n          View Critical Bug List\n        
\n        
\n          
\n            
\n              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.\n            
\n            
\n              API - beforeSend would not correctly cancel request when return false; is used in callback.\n            
\n            
\n              API - cache: 'local' would not return the localstorage cached results in some cases\n            
\n            
\n              Divider - Descenders like \"g\" are cut off in horizontal divider\n            
\n            
\n              Dropdown - forceSelection will now automatically select values with multi dropdowns. When using userAdditions setting it will now automatically tokenize the current entered value\n            
\n            
\n              Dropdown - search selection would not let you move back in an entered search string with left arrow\n            
\n            
\n              Dropdown - Fixed issue where value set using javascript DOM metadata would be cleared when a message or user addition triggered refresh\n            
\n            
\n              Form Validation / Dropdown - Using \"enter\" key in a search dropdown could cause a form to be submitted\n            
\n            
\n              Form Validation - Fix issue with some foreign email addresses with extended charsets causing email validation to fail\n            
\n            
\n              Form Validation - Revalidating a field on: blur could cause fields not yet interacted with to be validated\n            
\n            
\n              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.\n            
\n            
\n              Popup - Fixed issue where clicking element inside popup removed from DOM (like clicking a multi select label) would cause popup to close\n            
\n            
\n              Rail - Fixed incorrect width for close rail and very close rail caused by variable addition with mixed units px + em\n            
\n            
\n              Search - Fixed bug where a previously XHR query could cause the next one to fail depending on the latency of the request.\n            
\n            
\n              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.\n            
\n            
\n              Sticky/Visibility -  Added mutation observer to teardown element with destroy if removed from DOM context, fixing a possible memory leak\n            
\n            
\n              Video - Fixed issue with .video('change') behavior not properly changing video.\n            
\n          
\n        
\n      
\n    
\n\n\n    
New Features
\n\n    
\n      
CSS-Only Tooltips
\n      
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.
\n      
\n        \n      
\n      
\n        \n      
\n      
\n        Top Left\n      
\n      
\n        Top Center\n      
\n      
\n        Top Right\n      
\n      
\n      
\n        Bottom Left\n      
\n      
\n        Bottom Center\n      
\n      
\n        Bottom Right\n      
\n      
\n      
\n        Right Center\n      
\n      
\n        Left Center\n      
\n    
\n    
\n      
\n        Top Left\n      
\n      
\n        Top Center\n      
\n      
\n        Top Right\n      
\n      
\n      
\n        Bottom Left\n      
\n      
\n        Bottom Center\n      
\n      
\n        Bottom Right\n      
\n      
\n      
\n        Right Center\n      
\n      
\n        Left Center\n      
\n    
\n    
\n      
New Icons
\n      
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.
\n      
\n        
Wheelchair
\n        
American Sign Language (ASL) Interpreting
\n        
Assistive Listening Systems
\n        
Audio Description
\n        
Blind
\n        
Braille
\n        
Deafness
\n        
Low Vision
\n        
Sign Language
\n        
Universal Access
\n        
Volume Control Phone
\n      
\n      
\n      View All Icons \n    
\n    
\n      
Rapid-Ready Progress
\n      
Progress bars in 2.2 have been recoded to handle rapid update events.
\n      
Now developers can trigger updates at fast intervals without causing animations to stutter, or easing tweens to occur unnaturally.
\n      
\n        
\n          
\n            
\n          
\n          
Waiting for you to press button
\n        
\n      
\n      \n        Rapidly Update\n      \n      
\n        $('.rapid.example .ui.button')\n          .on('click', function() {\n            var\n              $progress       = $('.rapid.example .ui.progress'),\n              $button         = $(this),\n              updateEvent\n            ;\n            clearInterval(window.fakeProgress)\n            $progress.progress('reset');\n\n            // updates every 10ms until complete\n            window.fakeProgress = setInterval(function() {\n              $progress.progress('increment');\n              $button.text( $progress.progress('get value') );\n              // stop incrementing when complete\n              if($progress.progress('is complete')) {\n                clearInterval(window.fakeProgress)\n              }\n            }, 10);\n          })\n        ;\n        $('.rapid.example .ui.progress')\n          .progress({\n            duration : 200,\n            total    : 200,\n            text     : {\n              active: '{value} of {total} done'\n            }\n          })\n        ;\n      
\n    
\n    
\n      
Reduced Memory Leaks
\n      
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.
\n      
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.
\n      
Simulate Memory Leak
\n      
\n        Not Active\n      
\n      
\n        
\n          This segment has visibility events attached to modify the button above to say \"active\" when it is on screen\n        
\n      
\n      
\n        $('.memory.example .demo.segment')\n          .visibility({\n            onOnScreen: function() {\n              // this will no longer fire even though element was removed indirectly\n              $('.memory.example .display.segment').html('This is active');\n            }\n          })\n        ;\n        // button will remove parent of visibility element and callback will stop firing automatically\n        $('.memory.example .ui.button')\n          .on('click', function() {\n            $('.memory.example .display.segment').html('De-activated');\n            $('.memory.example .wrapper')\n              .remove()\n            ;\n          })\n        ;\n      
\n    
\n    
\n      
Dependent Form Validation
\n      
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.
\n      
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          \n          \n        
\n        
\n        
Submit
\n        
\n      
\n      
\n      $('.depends.example .ui.form')\n        .form({\n          onSuccess: function() {\n            alert('No form problems');\n            return false;\n          },\n          fields: {\n            yearsPracticed: {\n              identifier : 'yearsPracticed',\n              depends    : 'isDoctor',\n              rules      : [\n                {\n                  type   : 'empty',\n                  prompt : 'Please enter the number of years you have been a doctor'\n                }\n              ]\n            }\n          }\n        })\n      ;\n      
\n    
\n    
\n      
Faster Dropdown Selection
\n      
We've updated dropdowns to make it simpler to breeze through forms with dropdowns, and provide more intuitive selection controls
\n      
\n        
\n          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.\n        
\n        
\n          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.\n        
\n        
\n          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.\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          \n        
\n      
\n    
\n\n    
\n      
More Basic Buttons
\n      
We've added primary, secondary, positive and negative basic buttons
\n      \n      \n      \n      \n    
\n\n    
\n      
Popup Boundaries and Scroll Context
\n      
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
\n      
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.
\n      
\n        $('.boundary.example .button')\n          .popup({\n            boundary: '.boundary.example .segment'\n          })\n        ;\n      
\n\n      
\n        
Hover Me
\n        
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
\n      
\n    
\n\n    
New Settings
\n\n    
We've added many new settings to components to help provide more granular control for some use-cases.
\n\n    
\n      
Dropdowns
\n      \n        \n          \n            \n            \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n        \n      
selectOnKeydownWhether 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)\n            
allowReselectionSetting to true will allow onChange to be triggered even when reselecting the same option
fullTextSearchSetting to true will allow search across any part of string, setting to exact will disable fuzzy matching for dropdowns.
hideAdditionsSetting to true will allow custom user additions without triggering a special dropdown message for \"Add custom choice\". This is now enabled by default
minCharactersMinimum characters required to begin showing filtered results
\n      Dropdown settings\n        \n      \n    
\n\n    
\n      
Popup
\n      \n        \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n        \n      
boundaryA selector, or DOM element that the popup should never escape when positioning itself\n            
scrollContextA selector or DOM element which should be used for determining if user has scrolled.
observeChangesWhether popup should automatically watch for its own removal from page to avoid memory leaks.
\n      Popup settings\n        \n      \n    
\n\n    
\n      
Search
\n      \n        \n          \n            \n            \n          \n          \n            \n            \n          \n        \n      
selectFirstResultWhether the first search result element should be selected after results appear.\n            
showNoResultsWhether a message should appear when no search results are returned\n            
\n      Search settings\n        \n      \n    
\n\n    
\n      
Rating
\n      \n        \n          \n            \n            \n          \n        \n      
fireOnInitWhether the rating component should fire callbacks on initialization.\n            
\n      Rating settings\n        \n      \n    
\n\n    
\n      
Visibility
\n      \n        \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n        \n      
zIndexAllows you to specify the z-index used with type: 'fixed'\n            
onFixedA callback used with type: 'fixed' to occur when content is fixed to the page.\n            
onUnfixedA callback used with type: 'fixed' to occur when content is fixed to the page.\n            
onLoadedA callback used with type: 'image' to occur when content is loaded.\n            
onAllLoadedA callback used with type: 'image' to occur when all images initialized together are loaded.\n            
\n      Visibility settings\n        \n      \n    
\n\n\n    
\n      
Tab
\n      \n        \n          \n            \n            \n          \n          \n            \n            \n          \n        \n      
cacheTypeWhen 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.\n            
deactivateWhen 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.\n            
\n      Tab settings\n        \n      \n    
\n\n    
\n      
Shape
\n      \n        \n          \n            \n            \n          \n          \n            \n            \n          \n        \n      
widthWhen 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.\n            
heightWhen 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.\n            
\n      Shape settings\n        \n      \n    
\n  
\n  
\n    
The Tally
\n    
2.1 sums up around two months of work, including many new features, and updates to help bulletproof existing UI.
\n    
\n      
72 closed issues
\n      
70 bug fixes
\n      
23 new UI updates
\n      
14 feature enhancements
\n    
\n\n    
To see the complete list of updates /RELEASE-NOTES.md#version-210---sep-01-2015\">review our release notes
\n\n    
\n      
Labeled Buttons
\n      
Labeled buttons are a useful design pattern for displaying a tally alongside a button.
\n      
Labeled buttons are compatible with any label type, but looks great alongside a basic label.
\n      
\n        
\n           Like\n        
\n        \n          2,048\n        \n      
\n      
\n        
\n           Forks\n        
\n        \n          1,048\n        \n      
\n      
\n        
\n           Hospitals\n        
\n        \n          2,048\n        \n      
\n      
\n      
\n        
\n           Star\n        
\n        \n          1,048\n        \n      
\n      
\n        \n          2,048\n        \n        
\n           Like\n        
\n      
\n      
\n        \n          1,048\n        \n        
\n          \n        
\n      
\n    
\n\n    
\n      
Basic Labels
\n      
We've added a new style basic label that is less intrusive, and compatible with all other label variations, reducing their complexity.
\n      Basic\n      Pointing\n      \n        \n        Elliot\n      Red Pointing\n      Blue\n      
\n      
\n        
\n          
\n            Pointing Look over here\n            \n          
\n        
\n        
\n          
\n            So Complex\n            So Simple\n            Much adjectives\n          
\n        
\n      
\n    
\n\n    
\n      
Multiple Input Labels
\n      
Labeled input now supports labels on both sides of content at the same time.
\n      
\n        
$
\n        \n        
.00
\n      
\n    
\n\n    
\n      
More Tabular Directions
\n      
Tabular menus now support right and bottom positioning.
\n      
\n        
\n          
\n            This is an stretched grid column. This segment will always match the tab height\n          
\n        
\n        
\n          
\n            \n              Bio\n            \n            \n              Pics\n            \n            \n              Companies\n            \n            \n              Links\n            \n          
\n        
\n      
\n    
\n    
\n      
\n        \n      
\n      
\n        \n          Active Project\n        \n        \n          Project #2\n        \n        \n          Project #3\n        \n      
\n    
\n    
\n      
\n        
\n          
\n            \n              Bio\n            \n            \n              Pics\n            \n            \n              Companies\n            \n            \n              Links\n            \n          
\n        
\n        
\n          
\n            This is an stretched grid column. This segment will always match the tab height\n          
\n        
\n      
\n    
\n\n    
\n      
Enhanced Vertical Dividers
\n      
Grids now support using multiple vertical dividers per column, in any specified arrangement.
\n      
\n        
\n          
\n            \n          
\n          
\n            \n          
\n          
and
\n          
\n            \n          
\n          
and
\n          
\n            \n          
\n        
\n        
\n          
\n            \n          
\n          
not
\n          
\n            \n          
\n          
nor
\n          
\n            \n          
\n          
\n            \n          
\n        
\n      
\n    
\n\n    
\n      
Inverted Colored Menu
\n      
Inverted menus now support individual item colors
\n\n      
\n        \n          \n          Games\n        \n        \n          \n          Channels\n        \n        \n          \n          Videos\n        \n      
\n    
\n\n    
\n      
\n        \n          Inbox\n        \n        \n          Spam\n        \n        \n          Updates\n        \n        
\n          
\n            \n            \n          
\n        
\n      
\n    
\n\n\n    
\n      
Reversable Grid Columns
\n      
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.
\n      
Reversing grids are also designed to be compatible with column-order specific variations like divided or celled
\n      
\n        
\n          Computer First 
\n          Tablet Fourth\n        
\n        
\n          Computer Second 
\n          Tablet Third\n        
\n        
\n          Computer Third 
\n          Tablet Second\n        
\n        
\n          Computer Fourth 
\n          Tablet First\n        
\n      
\n    
\n\n    
\n      
Stackable Cards
\n      
Cards have a stackable variation so that they appear full width on mobile.
\n      
\n        
\n          
\n            
14h
\n             Elliot\n          
\n          
\n            \n              \n              17 likes\n            \n            \n            3 comments\n          
\n          
\n            
\n              \n              \n            
\n          
\n        
\n        
\n          
\n            
14h
\n             Elliot\n          
\n          
\n            \n              \n              17 likes\n            \n            \n            3 comments\n          
\n          
\n            
\n              \n              \n            
\n          
\n        
\n        
\n          
\n            
14h
\n             Elliot\n          
\n          
\n            \n              \n              17 likes\n            \n            \n            3 comments\n          
\n          
\n            
\n              \n              \n            
\n          
\n        
\n        
\n          
\n            
14h
\n             Elliot\n          
\n          
\n            \n              \n              17 likes\n            \n            \n            3 comments\n          
\n          
\n            
\n              \n              \n            
\n          
\n        
\n      
\n    
\n\n  
\n    
\n      Fixed Tables\n    
\n    
Tables now include a variation for using table-layout: fixed, which does not adjust column widths based on size.
\n    
This can help present data more cleanly with content that is uniformly formatted.
\n    
Fixed tables also support content collapsing using text-overflow: ellipsis when used with single line.
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusGender
JohnApprovedMale
JamieApprovedMale
JillDeniedFemale
\n  
\n  
\n    
\n      Fixed Tables\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
NameStatusDescription
JohnApprovedThis is much too long to fit I'm sorry about that
JamieApprovedShorter description
JillDeniedShorter description
\n  
\n\n    
New Behaviors
\n\n    
\n      
Fully Customizable JSON
\n      
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.
\n      
\n      $('.ui.search')\n        .search({\n          apiSettings: {\n            url: '//api.github.com/search/repositories?q={query}'\n          },\n          fields: {\n            results : 'items',\n            title   : 'name',\n            url     : 'html_url'\n          }\n        })\n      ;\n      
\n      
\n        
\n          \n          \n        
\n      
\n    
\n\n    
\n      
Fields can also be used with local search to simplify working with unusual search sources.
\n      
\n      $('.ui.search')\n        .search({\n          searchFields: ['pickle'],\n          fields: {\n            title   : 'mustard'\n          },\n          source: [\n            {\n              mustard: 'Title #1',\n              pickle: 'thing'\n            },\n            {\n              mustard: 'Title #2',\n              pickle: 'another thing'\n            },\n            {\n              mustard: 'Title #3',\n              pickle: 'thing 100'\n            }\n          ]\n        })\n      ;\n      
\n      
\n        
\n          \n          \n        
\n      
\n    
\n\n    
\n      
Credit Card Validation
\n      
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.
\n      
\n        Try 4565340519181845 a test visa card number\n      
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n        
Submit
\n      
\n      
\n        $('.payment.example form')\n          .form({\n            on: 'blur',\n            inline: true,\n            fields: {\n              card: {\n                identifier  : 'card',\n                rules: [\n                  {\n                    type   : 'creditCard',\n                    prompt : 'Please enter a valid credit card'\n                  }\n                ]\n              },\n              exactCard: {\n                identifier  : 'exact-card',\n                rules: [\n                  {\n                    type   : 'creditCard[visa,amex]',\n                    prompt : 'Please enter a visa or amex card'\n                  }\n                ]\n              }\n            }\n          })\n        ;\n      
\n    
\n    
\n      
Cancellable Checkboxes
\n      
Checkboxes now include four new callbacks beforeChecked, beforeUnchecked, beforeDeterminate, and beforeIndeterminate, returning false from these callbacks will cancel the action from occuring.
\n      
\n        \n        \n      
\n      
\n        $('.cancel.example .ui.checkbox')\n          .checkbox({\n            beforeChecked: function() {\n              var\n                luckyPerson = (Math.random() < 0.5)\n              ;\n              return luckyPerson;\n            }\n          })\n        ;\n      
\n    
\n\n\n    
Theme Updates
\n\n    
\n      
Global Form Focus
\n      
Global variables have been added to modify form focus color across all components. The default theme now uses a light blue to signal selection.
\n      
\n        
\n          
\n            \n            \n          
\n          
\n            \n            \n          
\n        
\n        
\n          \n          \n        
\n        
\n          
\n            \n            \n          
\n        
\n        \n      
\n    
\n    
\n      
Updated Form Validation
\n      
Form validation now uses basic label for validation prompts.
\n      
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n        
\n          
\n            \n            \n          
\n        
\n        \n      
\n    
\n\n    
\n      
Colored Basic Buttons
\n      
Basic colored buttons now are colored without hover, making the style more similar to common usage on most sites.
\n      \n      \n      \n      \n      \n      \n      \n      \n      \n      \n      \n      \n      \n    
\n\n    
\n      
Labeled Icon Menu
\n      
Horizontal labeled icon menu now use stacked icons to appear more in-tune with common icon menu usage.
\n      
\n        \n          \n          Games\n        \n        \n          \n          Channels\n        \n        \n          \n          Videos\n        \n      
\n    
\n\n  
\n\n  
\n\n    
Introduction
\n\n    
\n\n      
The Devil is in the Details
\n      
2.0 brings a whopping set of changes to the project:\n      
\n        
129 enhancements
\n        
118 bug fixes
\n        
3 new components
\n        
Rewrites of many components including menu, and input
\n      
\n\n      
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
\n\n      
To see the full list of what's changed check out the project's release notes.
\n\n      /RELEASE-NOTES.md#version-200---june-30-2015\" target=\"_blank\" class=\"ui button\">View Release Notes\n    
\n\n\n    
Global Changes
\n\n    
\n      
Flexbox All The Things
\n      
Flexbox allows for elements to intuitively resize to fill available space, making many complex layouts much simpler.
\n      
13 components: Form, Grid, Menu, Message, Button, Segment, Step, Dropdown, Modal, Feed, Statistic, Card, Item now use flex for positioning.
\n\n    
\n\n    
\n      
Complete Spectrum
\n      
Semantic now includes twelve named colors, enough for most languages to distinguish between colors. New in 2.0 are: olive, violet, brown and grey.
\n      Grey\n      Red\n      Orange\n      Yellow\n      \n        \n        Olive\n      \n      Green\n      \n        Teal\n        
Detail
\n      \n      \n        \n        Blue\n      \n      \n        Violet\n      \n      \n        Purple\n        \n      \n      
\n        
\n          
Pink
\n          \n        
\n        
\n          
Brown
\n          \n        
\n      
\n    
\n    
\n      
New Default Theme
\n      
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.
\n    
\n    
\n      
More Precise EM Values
\n      
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.
\n      
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.
\n    
\n\n\n    
Grids
\n\n    
\n      
Flexbox Grid
\n      
Grids in 2.0 now use flexbox so columns are always equal height across rows.
\n      
\n        
\n          
\n            
\n              1\n            
\n          
\n          
\n            
\n              1\n            
\n            
\n              2\n            
\n          
\n          
\n            
\n              1\n            
\n            
\n              2\n            
\n            
\n              3\n            
\n          
\n        
\n      
\n    
\n    
\n      
Grids Create Themselves
\n      
The new equal width variation adjusts column widths automatically splitting available width between columns.
\n      
\n        
\n        
\n        
\n        
\n      
\n      
If a column has a specified width, other columns will adapt to take available space around it.
\n      
\n        
\n        
\n        
\n      
\n    
\n    
\n      
Containers
\n      
Containers have been added as a simple way to limit content width.
\n      
\n        
\n          
\n          
\n          
\n        
\n      
\n    
\n\n    
\n      
Stretched rows
\n      
The new stretched variation makes vertically aligning layouts much simpler. Columns will not only match heights, but stretch their contents to match heights.
\n      
\n        
\n          
\n            1\n          
\n          
\n            2\n          
\n        
\n        
\n          
\n            \n          
\n        
\n        
\n          
\n            1\n          
\n          
\n            2\n          
\n        
\n      
\n    
\n\n    
Dropdowns
\n\n    
\n      
Multiple Selection
\n      
Multiple select dropdowns are now available, and can generate automatically from standard HTML selects.  
\n      
Dropdowns now all support advanced keyboard shortcuts like pagedown, delete, shift+left ctrl+click, and selection using first letter of item.
\n      
Additionally dropdowns will now automatically open upward if there is not enough space available in the viewport below a dropdown.
\n      \n    
\n\n    
\n      
User Tagging
\n      
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.
\n      
\n      $('.ui.dropdown')\n        .dropdown({\n          allowAdditions: true\n        })\n      ;\n      
\n      
\n        
\n          
\n            \n            
\n              \n              \n              
Skills
\n              
\n                <%- @partial('examples/single/preset-menu') %>\n              
\n            
\n          
\n          
\n            \n            
\n              \n              \n              
Skills
\n              
\n                <%- @partial('examples/single/preset-menu') %>\n              
\n            
\n          
\n        
\n      
\n    
\n\n    
\n      
Remote Data
\n      
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.
\n      
\n        // somewhere in app\n        $.api.settings.api = {\n          queryTags: '//api.semantic-ui.com/tags/{query}'\n        };\n        $('.ui.dropdown')\n          .dropdown({\n            apiSettings: {\n              action: 'queryTags'\n            }\n          })\n        ;\n      
\n      
\n        
\n          
\n            \n            
\n              \n              \n              \n              
Select one...
\n            
\n          
\n          
\n            \n            
\n              \n              \n              \n              
Select...
\n            
\n          
\n        
\n      
\n    
\n\n    
\n      
Scrolling Menus
\n      
Scrolling menu and nested menus are now supported.
\n      
Listing choices in a nested menu will still give all the same keyboard shortcuts and filtering as regular menus.
\n      
\n        \n        Filter Posts\n        
\n          
\n            \n            \n          
\n          
\n          
\n            \n            Tag Label\n          
\n          
\n            
\n              
\n              Already Fixed\n            
\n            
\n              
\n              Announcement\n            
\n            
\n              
\n              Cannot Fix\n            
\n            
\n              
\n              Discussion\n            
\n            
\n              
\n              Enhancement\n            
\n            
\n              
\n              Important\n            
\n            
\n              
\n              Interesting\n            
\n            
\n              
\n              News\n            
\n            
\n              
\n              Off Topic\n            
\n            
\n              
\n              Up Next\n            
\n          
\n        
\n      
\n    
\n    
\n      
Advanced Shortcuts
\n      
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.
\n      \n    
\n\n    
\n      
Much More
\n      
Dropdowns support many, many new features, including:
\n      
    \n        
  • Maximum selection count is supported for multiple selects
    • \n        
  • Mutation observers will now watch for changes in menus or the elements they are generated from and will update choices automatically
    • \n        
  • Custom templated error messages are now supported with dropdowns
    • \n      
\n    
\n\n    
API
\n\n\n    
\n      
Local Caching
\n      
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.
\n      
Try refreshing the page and searching the same letter, results will appear instantly without a server roundtrip.
\n      
\n      $('.ui.dropdown')\n        .dropdown({\n          apiSettings: {\n            cache : 'local',\n            url: '//api.semantic-ui.com/tags/{query}'\n          }\n        })\n      ;\n      
\n      
\n        
\n          \n          
\n            \n            \n            \n            
Select one...
\n          
\n        
\n      
\n    
\n\n\n    
\n      
Translates Any API
\n      
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.
\n      
\n        
\n          \n          \n        
\n      
\n      
\n      $('.ui.search')\n        .search({\n          type          : 'category',\n          minCharacters : 3,\n          apiSettings   : {\n            onResponse: function(githubResponse) {\n              var\n                response = {\n                  results : {}\n                }\n              ;\n              // translate GitHub API response to work with search\n              $.each(githubResponse.items, function(index, item) {\n                var\n                  language   = item.language || 'Unknown',\n                  maxResults = 8\n                ;\n                if(index >= maxResults) {\n                  return false;\n                }\n                // create new language category\n                if(response.results[language] === undefined) {\n                  response.results[language] = {\n                    name    : language,\n                    results : []\n                  };\n                }\n                // add result to category\n                response.results[language].results.push({\n                  title       : item.name,\n                  description : item.description,\n                  url         : item.html_url\n                });\n              });\n              return response;\n            },\n            url: '//api.github.com/search/repositories?q={query}'\n          }\n        })\n      
\n    
\n\n    
\n      
Mocked Responses
\n      
API now supports mocked responses, letting you specify how responses are returned in advance.
\n      
\n        $('.toggle.button')\n          .api({\n\n            // lets pretend this took a while\n            loadingDuration: 500,\n\n            // lets treat this button as requesting this JSON\n            mockResponse: {\n              success: true\n            }\n          })\n          // successful responses will trigger a text state change\n          .state({\n            text: {\n              inactive   : 'Off',\n              active     : 'On'\n            }\n          })\n        ;\n      
\n      
\n        Off\n      
\n    
\n    
\n      
Custom Backends
\n      
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.
\n      
\n      $('.toggle.button')\n        .api({\n          // lets wait a half second then try your luck\n          mockResponseAsync: function(settings, callback) {\n            var\n              luckyPerson = (Math.random() < 0.5),\n              response    = (luckyPerson)\n                ? { success: true }\n                : { success: false, message: 'You are not lucky' }\n            ;\n            // simulate this is an async task\n            setTimeout(function() {\n              callback(response);\n            }, 500);\n          },\n          successTest: function(response) {\n            return response && response.success;\n          },\n          onFailure: function (response) {\n            alert(response.message);\n          }\n        })\n        .state({\n          text: {\n            inactive : 'Off',\n            active   : 'On'\n          }\n        })\n      ;\n      
\n      
\n        Off\n      
\n\n    
\n\n    
Form
\n\n    
\n      
Autocomplete
\n      
Form now include custom styling for browser autocompleted form fields. Autocompleted fields can also specify focused autocomplete, and errored autocomplete styles.
\n\n      
\n        
Shipping Information
\n        
\n          \n          
\n            
\n              \n            
\n            
\n              \n            
\n          
\n        
\n        
\n          \n          
\n            
\n              \n            
\n            
\n              \n            
\n            
\n              \n            
\n          
\n        
\n        
Submit
\n      
\n\n    
\n\n\n    
Dimmer
\n\n    
\n      
Blurring Dimmers
\n      
Dimmers now include blurring dimmer variations.
\n      
Other component can use blurring dimmers to add overlay content, modal also includes a blurring setting that affects its generated dimmer.
\n\n      
\n        
\n          
\n            
\n              
\n                
\n                  
Send Memo
\n                
\n              
\n            
\n            \n          
\n          
\n            Matthew\n          
\n          
\n            \n              Hired Jan 2014\n            \n            \n              Human Resources\n            \n          
\n        
\n        
\n          
\n            
\n              
\n                
\n                  
Send Memo
\n                
\n              
\n            
\n            \n          
\n          
\n            Rachel\n          
\n          
\n            \n              Hired Feb 2015\n            \n            \n              Accounting\n            \n          
\n        
\n      
\n\n    
\n\n    
Checkbox
\n\n  \n\n    
\n      
Indeterminate Checkbox
\n\n      
Checkboxes now support an indeterminate state. This is useful when a collection of checkboxes may be partially selected.
\n      
\n        
\n          
\n            \n            \n          
\n          
\n            
\n              
\n                \n                \n              
\n            
\n            
\n              
\n                \n                \n              
\n            
\n            
\n              
\n                \n                \n              
\n            
\n          
\n        
\n        
\n          
\n            \n            \n          
\n          
\n            
\n              
\n                \n                \n              
\n            
\n            
\n              
\n                \n                \n              
\n            
\n            
\n              
\n                \n                \n              
\n            
\n          
\n        
\n      
\n    
\n\n\n    
Segment
\n\n    
\n      
Horizontal Groups
\n      
Horizontal groups are now available for segment.
\n      
\n        
\n          
Left
\n        
\n        
\n          
Center
\n        
\n        
\n          
Right
\n        
\n      
\n    
\n\n    
\n      
Complex Layouts
\n      
Groups now use flexbox and fully support nesting.
\n      
\n        
\n          
Top
\n        
\n        
\n          
\n            
Nested Top
\n          
\n          
\n            
Nested Middle
\n          
\n          
\n            
Nested Bottom
\n          
\n        
\n        
\n          
Middle
\n        
\n        
\n          
\n            
Left
\n          
\n          
\n            
Center
\n          
\n          
\n            
Right
\n          
\n        
\n        
\n          
Bottom
\n        
\n      
\n    
\n    
\n      
Typed Groups
\n    
Groups now support types like raised, stacked, or piled
\n      
\n        
\n          
Top
\n        
\n        
\n          
\n            
Left
\n          
\n          
\n            
Center
\n          
\n          
\n            
Center
\n          
\n          
\n            
Center
\n          
\n          
\n            
Right
\n          
\n        
\n        
\n          
Bottom
\n        
\n      
\n    
\n\n    
Menus
\n\n    
\n      
Flexible Menus
\n      
Menus have been completely rewritten to use flexbox. Items inside a menu will automatically adjust to align with other menu items regardless of size.
\n      
\n        
\n          \n        
\n        \n          Bio\n        \n        \n          Photos\n        \n      
\n      
\n        \n      
\n    
\n    
\n      
Vertical Tabs
\n      
Menus now include a new vertical tabular menu type.
\n      
\n        
\n          
\n            \n              Bio\n            \n            \n              Pics\n            \n            \n              Companies\n            \n            \n              Links\n            \n          
\n        
\n        
\n          
\n            This is an stretched grid column. This segment will always match the tab height\n          
\n        
\n      
\n    
\n    
\n      
Better Coupling
\n      
Menus now have better coupling with other components like dropdown, search, button, and input.
\n\n      
\n        $('.ui.menu .browse.item')\n          .popup({\n            popup     : '.classes.popup',\n            hoverable : true,\n            position  : 'bottom left',\n            delay     : {\n              show: 300,\n              hide: 800\n            }\n          })\n        ;\n      
\n      
\n        $('.ui.search')\n          .search({\n            type: 'category',\n            apiSettings: {\n              action: 'categorySearch'\n            }\n          })\n        ;\n      
\n      
\n        
Browse
\n        
\n          
\n            \n            \n          
\n          
\n        
\n      
\n      
\n        
\n          
\n            
Business
\n            
\n              Design & Urban Ecologies\n              Fashion Design\n              Fine Art\n              Strategic Design\n            
\n          
\n          
\n            
Liberal Arts
\n            
\n              Anthropology\n              Economics\n              Media Studies\n              Philosophy\n            
\n          
\n          
\n            
Social Sciences
\n            
\n              Food Studies\n              Journalism\n              Non Profit Management\n            
\n          
\n        
\n      
\n    
\n\n    
Visibility
\n\n    
\n\n      
Simple Sticky
\n\n      
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.
\n\n      
Additionally visibility and sticky have been rewritten to use a pub/sub pattern which is much more performant than 1.0
\n\n      
\n        $('.overlay')\n          .visibility({\n            type   : 'fixed',\n            offset : 15 // give some space from top of screen\n          })\n        ;\n      
\n      
\n      .overlay {\n        background-color: #FFFFFF;\n        padding: 0.5em;\n        box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);\n        transition: all 0.5s ease;\n        background: transparent;\n      }\n      /* change style */\n      .fixed.overlay {\n        position: fixed;\n        padding: 1em;\n        box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);\n      }\n      
\n      
\n        
\n          
\n            \n               Menu\n            \n            Option 1\n            Option 2\n            Option 3\n          
\n        
\n        
\n        \n        \n        \n        \n        \n        \n      
\n    
\n  
\n
\n"
  },
  {
    "path": "server/documents/kitchen-sink.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'custom'\nstandalone  : true\n\ntitle       : 'All UI'\ntype        : 'UI Examples'\ndescription : 'Examples of all user interface elements'\n---\n\n<%- @partial('header', { tabs: {  elements: 'Elements', collections: 'Collections', views: 'Views', modules: 'Modules' } }) %>\n\n
\n\n  
\n    
\n      Elements\n    
\n    
\n      
\n        Button\n      
\n      <%- @partial('examples/button') %>\n    
\n    
\n      
\n        Divider\n      
\n      <%- @partial('examples/divider') %>\n    
\n    
\n      
\n        Flag\n      
\n      <%- @partial('examples/flag') %>\n    
\n    
\n      
\n        Header\n      
\n      <%- @partial('examples/header') %>\n    
\n    
\n      
\n        Icon\n      
\n      <%- @partial('examples/icon') %>\n    
\n    
\n      
\n        Image\n      
\n      <%- @partial('examples/image') %>\n    
\n    
\n      
\n        Input\n      
\n      <%- @partial('examples/input') %>\n    
\n    
\n      
\n        Label\n      
\n      <%- @partial('examples/label') %>\n    
\n    
\n      
\n        List\n      
\n      <%- @partial('examples/list') %>\n    
\n    
\n      
\n        Loader\n      
\n      <%- @partial('examples/loader') %>\n    
\n    
\n      
\n        Reveal\n      
\n      <%- @partial('examples/reveal') %>\n    
\n    
\n      
\n        Segment\n      
\n      <%- @partial('examples/segment') %>\n    
\n    
\n      
\n        Step\n      
\n      <%- @partial('examples/step') %>\n    
\n  
\n  
\n    
\n      Collections\n    
\n\n    
\n      
\n        Breadcrumb\n      
\n      <%- @partial('examples/breadcrumb') %>\n    
\n    
\n      
\n        Form\n      
\n      <%- @partial('examples/form') %>\n    
\n    
\n      
\n        Grid\n      
\n      <%- @partial('examples/grid') %>\n    
\n    
\n      
\n        Menu\n      
\n      <%- @partial('examples/menu') %>\n    
\n    
\n      
\n        Message\n      
\n      <%- @partial('examples/message') %>\n    
\n    
\n      
\n        Table\n      
\n      <%- @partial('examples/table') %>\n    
\n  
\n  
\n    
\n      Views\n    
\n    
\n      
\n        Card\n      
\n      <%- @partial('examples/card') %>\n    
\n    
\n      
\n        Feed\n      
\n      <%- @partial('examples/feed') %>\n    
\n    
\n      
\n        Item\n      
\n      <%- @partial('examples/item') %>\n    
\n    
\n      
\n        Statistic\n      
\n      <%- @partial('examples/statistic') %>\n    
\n  
\n  
\n    
\n      Modules\n    
\n    
\n      
\n        Accordion\n      
\n      <%- @partial('examples/accordion') %>\n    
\n    
\n      
\n        Checkbox\n      
\n      <%- @partial('examples/checkbox') %>\n    
\n    
\n      
\n        Dimmer\n      
\n      <%- @partial('examples/dimmer') %>\n    
\n    
\n      
\n        Dropdown\n      
\n      <%- @partial('examples/dropdown') %>\n    
\n    
\n      
\n        Modal\n      
\n      <%- @partial('examples/modal') %>\n    
\n    
\n      
\n        Popup\n      
\n      <%- @partial('examples/popup') %>\n    
\n    
\n      
\n        Progress\n      
\n      <%- @partial('examples/progress') %>\n    
\n    
\n      
\n        Rating\n      
\n      <%- @partial('examples/rating') %>\n    
\n    
\n      
\n        Search\n      
\n      <%- @partial('examples/search') %>\n    
\n\n    
\n      
\n        Shape\n      
\n      <%- @partial('examples/shape') %>\n    
\n\n    
\n      
\n        Sidebar\n      
\n      <%- @partial('examples/sidebar') %>\n    
\n    
\n      
\n        Tab\n      
\n      <%- @partial('examples/tab') %>\n    
\n    
\n      
\n        Transition\n      
\n      <%- @partial('examples/transition') %>\n    
\n  
\n
\n"
  },
  {
    "path": "server/documents/modules/accordion.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'accordion'\nelement     : 'accordion'\nelementType : 'module'\nstandalone  : true\n\ntitle       : 'Accordion'\ndescription : 'An accordion allows users to toggle the display of sections of content'\ntype        : 'UI Module'\n\nthemes      : ['Default', 'Chubby']\n---\n\n\n\n<%- @partial('header', { tabs: 'module' }) %>\n\n
\n\n  
\n\n    
Types
\n    
\n      
Accordion
\n      
A standard accordion
\n      
\n        
\n          \n          What is a dog?\n        
\n        
\n          
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
\n        
\n        
\n          \n          What kinds of dogs are there?\n        
\n        
\n          
There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.
\n        
\n        
\n          \n          How do you acquire a dog?\n        
\n        
\n          
Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.
\n          
A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.
\n        
\n      
\n    
\n\n    
\n      
Styled
\n      
A styled accordion adds basic formatting
\n      
\n        
\n          \n          What is a dog?\n        
\n        
\n          
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
\n        
\n        
\n          \n          What kinds of dogs are there?\n        
\n        
\n          
There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.
\n        
\n        
\n          \n          How do you acquire a dog?\n        
\n        
\n          
Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.
\n          
A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.
\n        
\n      
\n    
\n\n    
Variations
\n    
\n      
Fluid
\n      
An accordion can take up the width of its container
\n      
\n        
\n          \n          What is a dog?\n        
\n        
\n          
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
\n        
\n        
\n          \n          What kinds of dogs are there?\n        
\n        
\n          
There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.
\n        
\n        
\n          \n          How do you acquire a dog?\n        
\n        
\n          
Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.
\n          
A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.
\n        
\n      
\n    
\n\n    
\n      
Inverted
\n      
An accordion can be formatted to appear on dark backgrounds
\n      
\n        
\n          
\n            \n            What is a dog?\n          
\n          
\n            
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
\n          
\n          
\n            \n            What kinds of dogs are there?\n          
\n          
\n            
There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.
\n          
\n          
\n            \n            How do you acquire a dog?\n          
\n          
\n            
Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.
\n            
A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.
\n          
\n        
\n      
\n    
\n\n\n  
\n\n  
\n\n    
Examples
\n\n    
\n      
Nested Accordions
\n      
An accordion can have multiple levels of nested content. This content can either be in a nested accordion or simply another level of title and content
\n      
\n        
\n          \n          Level 1\n        
\n        
\n          Welcome to level 1\n          
\n            
\n                \n                Level 1A\n            
\n            
\n              
Level 1A Contents
\n              
\n                
\n                    \n                    Level 1A-A\n                
\n                
\n                    Level 1A-A Contents\n                
\n                
\n                    \n                    Level 1A-B\n                
\n                
\n                    Level 1A-B Contents\n                
\n              
\n            
\n            
\n                \n                Level 1B\n            
\n            
\n                Level 1B Contents\n            
\n            
\n                \n                Level 1C\n            
\n            
\n                Level 1C Contents\n            
\n          
\n        
\n        
\n          \n          Level 2\n        
\n        
\n          
Welcome to level 2
\n          
\n            
\n              \n              Level 2A\n            
\n            
\n              
Level 2A Contents
\n              
\n                
\n                    \n                    Level 2A-A\n                
\n                
\n                    Level 2A-A Contents\n                
\n                
\n                    \n                    Level 2A-B\n                
\n                
\n                    Level 2A-B Contents\n                
\n              
\n            
\n            
\n                \n                Level 2B\n            
\n            
\n                Level 2B Contents\n            
\n            
\n                \n                Level 2C\n            
\n            
\n                Level 2C Contents\n            
\n          
\n        
\n      
\n    
\n\n    
\n      
Changing Trigger
\n      
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
\n      
\n        $('.trigger.example .accordion')\n          .accordion({\n            selector: {\n              trigger: '.title .icon'\n            }\n          })\n        ;\n      
\n      
\n        
\n          \n          What is a dog?\n        
\n        
\n          
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
\n        
\n        
\n          \n          What kinds of dogs are there?\n        
\n        
\n          
There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.
\n        
\n        
\n          \n          How do you acquire a dog?\n        
\n        
\n          
Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.
\n          
A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.
\n        
\n      
\n    
\n\n    
\n      
Form Fields
\n      
An accordion can be used anywhere where content can be shown or hidden. For example, to show optional form fields.
\n      
\n        
\n          
\n            
\n              \n              \n            
\n            
\n              \n              \n            
\n          
\n          
\n            
\n              \n              Optional Details\n            
\n            
\n              \n              \n            
\n          
\n          
Sign Up
\n        
\n      
\n    
\n    
\n      
Accordion Menu
\n      
An accordion can be used to create content drawers inside a menu
\n      
\n        
\n          \n            \n            Size\n          \n          
\n            
\n              
\n                
\n                  
\n                    \n                    \n                  
\n                
\n                
\n                  
\n                    \n                    \n                  
\n                
\n                
\n                  
\n                    \n                    \n                  
\n                
\n                
\n                  
\n                    \n                    \n                  
\n                
\n              
\n            
\n          
\n        
\n        
\n          \n            \n            Colors\n          \n          
\n            
\n              
\n                
\n                  
\n                    \n                    \n                  
\n                
\n                
\n                  
\n                    \n                    \n                  
\n                
\n                
\n                  
\n                    \n                    \n                  
\n                
\n                
\n                  
\n                    \n                    \n                  
\n                
\n              
\n            
\n          
\n        
\n      
\n    
\n  
\n  
\n\n    
Initializing
\n\n    
\n      
Initializing an accordion
\n      
Accordion is initialized on pre-existing markup
\n      
\n      $('.ui.accordion')\n        .accordion()\n      ;\n      
\n    
\n\n    
\n      
AJAX Content
\n      
Accordions use DOM Mutation Observers and delegated events to allow for easy compatibility with AJAX content, or content added after initialization.
\n      
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.
\n      
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.\n      
\n        $('.ui.accordion').accordion('refresh');\n      
\n    
\n\n    
Behaviors
\n\n    
Behaviors are short english phrases used for accessing specific functionality in\n\n    
Behaviors are accessible with Javascript using the syntax:
\n    
\n    $('.ui.accordion').accordion('behavior', argumentOne, argumentTwo...);\n    
\n\n    \n      \n        \n        \n      \n      \n        \n        \n      \n      \n        \n        \n      \n      \n        \n        \n      \n      \n        \n        \n      \n    
refreshRefreshes all cached selectors and data
open (index)Opens accordion content at index
close othersCloses accordion content that are not active
close (index)Closes accordion content at index
toggle (index)Toggles accordion content at index
\n\n  
\n\n  
\n    
\n      Accordion\n    
\n\n    
\n      Behavior\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
DefaultDescription
exclusivetrueOnly allow one section open at a time
onclickEvent on title that will cause accordion to open
animateChildrentrueWhether child content opacity should be animated (may cause performance issues with many child elements)
closeNestedtrueClose open nested accordion content when an element closes
collapsibletrueAllow active sections to collapse
duration500Duration in ms of opening animation
easingeaseInOutQuintEasing of opening animation. EaseInOutQuint is included with accordion, for additional options you must include easing equations.
\n\n    
\n      Callbacks\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
ContextDescription
onOpeningactive contentCallback before element opens
onOpenactive contentCallback after element is open
onClosingactive contentCallback before element closes
onCloseactive contentCallback after element is closed
onChangingactive contentCallback before element opens or closes
onChangeactive contentCallback on element open or close
\n\n    
\n      Module\n    
\n\n    
These settings are native to all modules, and define how the component ties content to DOM attributes, and debugging settings for the module.
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
DefaultDescription
nameAccordionName used in log statements
namespaceaccordionEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n            
\n            selector    : {\n              accordion : '.accordion',\n              title     : '.title',\n              trigger   : '.title',\n              content   : '.content'\n            }\n            
\n          		Selectors used to find parts of a module
className\n            
\n            className   : {\n              active    : 'active',\n              animating : 'animating'\n            }\n            
\n          		Class names used to determine element state
silentFalseSilences all console output including error messages, regardless of other debug settings.
debugfalseDebug output to console
performancetrueShow console.table output with performance metrics
verbosefalseDebug output includes all internal behaviors
errors\n            
\n            error   : {\n              method   : 'The method you called is not defined.'\n            }\n            
\n          
\n  
\n
\n"
  },
  {
    "path": "server/documents/modules/checkbox.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'checkbox'\nelement     : 'checkbox'\nelementType : 'module'\nstandalone  : true\n\ntitle       : 'Checkbox'\ndescription : \"A checkbox allows a user to select a value from a small set of options, often binary\"\ntype        : 'UI Module'\n\nthemes      : ['Default', 'Colored']\n---\n\n\n\n<%- @partial('header', { tabs: 'module' }) %>\n\n
\n\n  
\n\n\n    
Types
\n\n    
\n      
Checkbox
\n      
A standard checkbox
\n      
\n        \n        \n      
\n    
\n\n    
\n      
Radio
\n      
A checkbox can be formatted as a radio element. This means it is an exclusive option.
\n\n      
\n        \n        \n      
\n    
\n    
\n      
\n        
\n          \n          
\n            
\n              \n              \n            
\n          
\n          
\n            
\n              \n              \n            
\n          
\n          
\n            
\n              \n              \n            
\n          
\n          
\n            
\n              \n              \n            
\n          
\n        
\n      
\n    
\n    
\n      
\n        
\n          \n          
\n            
\n              \n              \n            
\n          
\n          
\n            
\n              \n              \n            
\n          
\n          
\n            
\n              \n              \n            
\n          
\n          
\n            
\n              \n              \n            
\n          
\n        
\n      
\n    
\n\n    
\n      
Slider
\n      
A checkbox can be formatted to emphasize the current selection state
\n      
\n        \n        \n      
\n    
\n\n    
\n      
\n        
\n          \n          
\n            
\n              \n              \n            
\n          
\n          
\n            
\n              \n              \n            
\n          
\n          
\n            
\n              \n              \n            
\n          
\n          
\n            
\n              \n              \n            
\n          
\n        
\n      
\n    
\n\n    
\n      
Toggle
\n      
A checkbox can be formatted to show an on or off choice
\n      
\n        \n        \n      
\n    
\n\n    
States
\n\n    
\n      
Read-only
\n      
A checkbox can be read-only and unable to change states
\n      
\n        \n        \n      
\n    
\n\n    
\n      
Checked
\n      
A checkbox can be checked
\n      
\n        \n        \n      
\n    
\n\n    
\n      
Indeterminate
\n      
A checkbox can be indeterminate
\n      
\n        An indeterminate state can only be set in Javascript, see examples section\n      
\n      
\n        \n        \n      
\n    
\n\n    
\n      
Disabled
\n      
A checkbox can be read-only and unable to change states
\n      
\n        A checkbox can be disabled by either setting the disabled attribute on the hidden input, or class disabled on the ui checkbox\n      
\n      
\n        \n        \n      
\n      
\n      
\n      
\n        \n        \n      
\n    
\n\n    
Variations
\n\n    
\n      
Fitted
\n      
A fitted checkbox does not leave padding for a label
\n      
\n        
\n          \n          \n        
\n      
\n      
\n        
\n          \n          \n        
\n      
\n      
\n        
\n          \n          \n        
\n      
\n    
\n\n\n  
\n\n  
\n\n    
Examples
\n    
\n      
Using Callbacks
\n      
Checkbox has two versions of each state change behavior to let you determine whether the call should trigger checkbox callbacks.
\n      
Calling a behavior like check will trigger an elements callbacks, however using set checked will adjust the checkbox state without triggering callbacks
\n      
This differentiation is important to differentiate between programmatic changes, and user-invoked changes to state.
\n      
\n        
\n          
\n            
\n              Example\n            
\n            
\n              \n              \n            
\n            
\n            
\n              \n              \n            
\n          
\n        
\n        
\n          
\n            
\n              Console\n            
\n          
\n        
\n        
\n          
\n            
Toggle
\n            
Check
\n            
Uncheck
\n            
Indeterminate
\n            
Determinate
\n            
Enable
\n            
Disable
\n          
\n          
\n          
\n            
Set Checked
\n            
Set Unchecked
\n            
Set Indeterminate
\n            
Set Determinate
\n            
Set Enabled
\n            
Set Disabled
\n          
\n        
\n      
\n      
\n        var\n          $console = $('.callback .console')\n        ;\n        $('.callback.example .checkbox')\n          .checkbox()\n          .first().checkbox({\n            onChecked: function() {\n              $console.append('onChecked called
');\n            },\n            onUnchecked: function() {\n              $console.append('onUnchecked called
');\n            },\n            onEnable: function() {\n              $console.append('onEnable called
');\n            },\n            onDisable: function() {\n              $console.append('onDisable called
');\n            },\n            onDeterminate: function() {\n              $console.append('onDeterminate called
');\n            },\n            onIndeterminate: function() {\n              $console.append('onIndeterminate called
');\n            },\n            onChange: function() {\n              $console.append('onChange called
');\n            }\n          })\n        ;\n        // bind events to buttons\n        $('.callback.example .button')\n          .on('click', function() {\n            $('.callback .checkbox').checkbox( $(this).data('method') );\n          })\n        ;\n      
\n    
\n    
\n      
Grouped Checkboxes
\n      
The indeterminate state can be used to represent a value that is neither checked or unchecked.
\n      
This can be useful with groups where a \"master\" checkbox, should display the selections of several other checkboxes
\n\n      
\n        
\n          
\n            \n            \n          
\n          
\n            
\n              
\n                \n                \n              
\n            
\n            
\n              
\n                \n                \n              
\n            
\n            
\n              
\n                \n                \n              
\n            
\n          
\n        
\n        
\n          
\n            \n            \n          
\n          
\n            
\n              
\n                \n                \n              
\n            
\n            
\n              
\n                \n                \n              
\n            
\n            
\n              
\n                \n                \n              
\n            
\n          
\n        
\n      
\n      
\n        $('.list .master.checkbox')\n          .checkbox({\n            // check all children\n            onChecked: function() {\n              var\n                $childCheckbox  = $(this).closest('.checkbox').siblings('.list').find('.checkbox')\n              ;\n              $childCheckbox.checkbox('check');\n            },\n            // uncheck all children\n            onUnchecked: function() {\n              var\n                $childCheckbox  = $(this).closest('.checkbox').siblings('.list').find('.checkbox')\n              ;\n              $childCheckbox.checkbox('uncheck');\n            }\n          })\n        ;\n      
\n      
\n        $('.list .child.checkbox')\n          .checkbox({\n            // Fire on load to set parent value\n            fireOnInit : true,\n            // Change parent state on each child checkbox change\n            onChange   : function() {\n              var\n                $listGroup      = $(this).closest('.list'),\n                $parentCheckbox = $listGroup.closest('.item').children('.checkbox'),\n                $checkbox       = $listGroup.find('.checkbox'),\n                allChecked      = true,\n                allUnchecked    = true\n              ;\n              // check to see if all other siblings are checked or unchecked\n              $checkbox.each(function() {\n                if( $(this).checkbox('is checked') ) {\n                  allUnchecked = false;\n                }\n                else {\n                  allChecked = false;\n                }\n              });\n              // set parent checkbox state, but dont trigger its onChange callback\n              if(allChecked) {\n                $parentCheckbox.checkbox('set checked');\n              }\n              else if(allUnchecked) {\n                $parentCheckbox.checkbox('set unchecked');\n              }\n              else {\n                $parentCheckbox.checkbox('set indeterminate');\n              }\n            }\n          })\n        ;\n      
\n    
\n\n\n    
\n      
Checking Conditions
\n      
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.
\n      
\n        \n        \n      
\n      
\n        $('.cancel.example .ui.checkbox')\n          .checkbox({\n            beforeChecked: function() {\n              var\n                luckyPerson = (Math.random() < 0.5)\n              ;\n              return luckyPerson;\n            }\n          })\n        ;\n      
\n    
\n\n    
\n      
One-Way Choices
\n      
To make a user able to check a box, but unable to uncheck it, use the uncheckable setting.
\n      
To always disable a checkbox, add the property disabled to your input.
\n      
To make a checkbox read-only do not initialize it, or include the read-only class which will not allow events.
\n      
\n        $('.state.example .checkbox')\n          .last()\n          .checkbox({\n            uncheckable: false\n          })\n        ;\n      
\n      
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          
\n            \n            \n          
\n        
\n      
\n    
\n\n    
\n      
Attaching Events to other Elements
\n      
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.
\n      
\n        $('.test.checkbox').checkbox('attach events', '.toggle.button');\n        $('.test.checkbox').checkbox('attach events', '.check.button', 'check');\n        $('.test.checkbox').checkbox('attach events', '.uncheck.button', 'uncheck');\n      
\n      
Toggle
\n      
Check
\n      
Uncheck
\n      
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          
\n            \n            \n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Initializing
\n\n    
\n      
Checkbox
\n      
A checkbox does not require Javascript to function.
\n      
\n        \n        \n      
\n      
\n        
\n          \n          \n        
\n      
\n    
\n\n    
\n      
Full Featured Checkboxes
\n      
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.
\n      
\n        \n        \n      
\n      
\n        
\n          \n          \n        
\n      
\n    
\n\n\n    
\n      
Linked Labels
\n      
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.
\n      
\n        \n        \n      
\n      
\n        
\n          \n          \n        
\n      
\n    
\n\n    
Behavior\n    
Behaviors are accessible with Javascript using the syntax:
\n    
\n    $('.ui.checkbox').checkbox(behavior, argumentOne, argumentTwo...);\n    
\n\n    \n      \n        \n        \n      \n      \n        \n        \n      \n      \n        \n        \n      \n      \n        \n        \n      \n      \n        \n        \n      \n      \n        \n        \n      \n      \n        \n        \n      \n      \n        \n        \n      \n      \n        \n        \n      \n      \n        \n        \n      \n      \n        \n        \n      \n      \n        \n        \n      \n      \n        \n        \n      \n      \n        \n        \n      \n      \n        \n        \n      \n      \n        \n        \n      \n      \n        \n        \n      \n      \n        \n        \n      \n      \n        \n        \n      \n      \n        \n        \n      \n      \n        \n        \n      \n      \n        \n        \n      \n    
toggleSwitches a checkbox from current state
checkSet a checkbox state to checked
uncheckSet a checkbox state to unchecked
indeterminateSet as indeterminate checkbox
determinateSet as determinate checkbox
enableEnable interaction with a checkbox
set checkedSet a checkbox state to checked without callbacks
set uncheckedSet a checkbox state to unchecked without callbacks
set indeterminateSet as indeterminate checkbox without callbacks
set determinateSet as determinate checkbox without callbacks
set enabledEnable interaction with a checkbox without callbacks
set disabledDisable interaction with a checkbox without callbacks
attach events(selector, behavior)Attach checkbox events to another element
is radioReturns whether element is radio selection
is checkedReturns whether element is currently checked
is uncheckedReturns whether element is not checked
can changeReturns whether element is able to be changed
should allow checkReturns whether element can be checked (checking if already checked or `beforeChecked` would cancel)
should allow uncheckReturns whether element can be unchecked (checking if already unchecked or `beforeUnchecked` would cancel)
should allow determinateReturns whether element can be determinate (checking if already determinate or `beforeDeterminate` would cancel)
should allow indeterminateReturns whether element can be indeterminate (checking if already indeterminate or `beforeIndeterminate` would cancel)
can uncheckReturns whether element is able to be unchecked
\n  
\n\n\n  
\n    
Checkbox
\n\n    
These settings are specific to checkbox, and determine the parameters of its behavior
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
DefaultDescription
uncheckableautoSetting to true/false will determine whether an input will allow no selection. Auto will set disallow this behavior only for radio boxes
fireOnInitfalseWhether callbacks for checked status should be fired on init as well as change
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
ContextDescription
onChangeHTML input elementCallback after a checkbox is either checked or unchecked.
onCheckedHTML input elementCallback after a checkbox is checked.
onIndeterminateHTML input elementCallback after a checkbox is set to undeterminate.
onDeterminateHTML input elementCallback after a checkbox is set to determinate.
onUncheckedHTML input elementCallback after a checkbox is unchecked.
beforeCheckedHTML input elementCallback before a checkbox is checked. Can cancel change by returning false
beforeIndeterminateHTML input elementCallback before a checkbox is set to undeterminate. Can cancel change by returning false
beforeDeterminateHTML input elementCallback before a checkbox is set to determinate. Can cancel change by returning false
beforeUncheckedHTML input elementCallback before a checkbox is unchecked. Can cancel change by returning false
onEnableHTML input elementCallback after a checkbox is enabled.
onDisableHTML input elementCallback after a checkbox is disabled.
\n\n    
Module
\n\n    
These settings are native to all modules, and define how the component ties content to DOM attributes, and debugging settings for the module.
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
DefaultDescription
nameCheckboxName used in log statements
namespacecheckboxEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n            
\n            selector : {\n              input  : 'input[type=checkbox], input[type=radio]',\n              label  : 'label'\n            }\n            
\n          		Selectors used to find parts of a module
className\n            
\n            className   : {\n              checked  : 'checked',\n              disabled : 'disabled',\n              radio    : 'radio',\n              readOnly : 'read-only'\n            }\n            
\n          		Class names used to determine element state
silentFalseSilences all console output including error messages, regardless of other debug settings.
debugfalseDebug output to console
performancetrueShow console.table output with performance metrics
verbosefalseDebug output includes all internal behaviors
errors\n            
\n            error   : {\n              method   : 'The method you called is not defined.'\n            }\n            
\n          
\n  
\n\n
\n"
  },
  {
    "path": "server/documents/modules/dimmer.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'dim'\nstandalone  : true\n\nelement     : 'dimmer'\nelementType : 'module'\n\ntitle       : 'Dimmer'\ndescription : \"A dimmer hides distractions to focus attention on particular content\"\ntype        : 'UI Module'\n\nthemes      : ['Default']\n---\n\n\n\n\n<%- @partial('header', { tabs: 'module' }) %>\n\n
\n\n  
\n\n    
Types
\n\n    
\n      
Dimmer
\n      
A simple dimmer displays no content
\n      
\n        // left button\n        $('.segment').dimmer('show');\n        // right button\n        $('.segment').dimmer('hide');\n      
\n      
A dimmer will automatically be created when a dimming behavior is triggered on an element.\n      
\n      
\n        
\n          Overlayable Section\n        
\n        
\n          \n          \n          \n        
\n        \n      
\n      
\n        
\n          \n          
\n            Overlayable Section\n          
\n          
\n            \n            \n            \n          
\n          
\n        
\n      
\n      
\n        
\n        
\n      
\n    
\n\n    
\n      
Content Dimmer
\n      
A dimmer can display content
\n      
Since 
2.3
 dimmers with content now only need a single wrapping content container.
\n      
\n        
\n          Overlayable Section\n        
\n        
\n          \n          \n          \n        
\n        \n        
\n          
\n            
\n              \n              Dimmed Message!\n            
\n          
\n        
\n      
\n      
\n        
\n        
\n      
\n    
\n\n    
\n      
Page Dimmer
\n      
A dimmer can be formatted to be fixed to the page
\n      
\n        
\n          
\n            Hello\n          
\n        
\n      
\n      
\n        Show\n      
\n    
\n\n\n    
States
\n\n    
\n      
Active
\n      
An active dimmer will dim its parent container
\n      
\n        
\n        \n        \n      
\n    
\n\n    
\n      
Disabled
\n      
A disabled dimmer cannot be activated
\n      
\n        
\n        \n        \n      
\n    
\n\n    
Variations
\n\n    
Dimmable
\n    
\n      
\n        Blurring\n        New in 2.0\n      
\n      
A dimmable element can blur its contents
\n      
\n        
\n        \n        \n      
\n      
\n        
\n        
\n      
\n    
\n    
\n      
\n        
\n        \n        \n      
\n      
\n        
\n        
\n      
\n    
\n\n    
Alignment
\n    
\n      
\n        Vertical Alignment\n        New in 2.3\n      
\n      
A dimmer can have its content top or bottom aligned.
\n      
\n        
\n          
\n            
Title
\n            
Add
\n            
View
\n          
\n        
\n        \n        \n      
\n      
\n        
\n        
\n      
\n    
\n    
\n      
\n        
\n          
\n            
Title
\n            
Add
\n            
View
\n          
\n        
\n        \n        \n      
\n      
\n        
\n        
\n      
\n    
\n\n    
Dimmer
\n    
\n      
Simple Dimmer
\n      
A dimmer can be controlled without Javascript
\n      
Having any parent element receive the class ui dimmable dimmed will trigger the dimmer to display.
\n      
\n        
\n        \n        \n      
\n    
\n\n    
\n      
Inverted Dimmer
\n      
A dimmer can be formatted to have its colors inverted
\n      
\n        
\n        \n        \n      
\n      
\n        
\n        
\n      
\n    
\n  
\n  
\n\n    
Examples
\n\n    
\n      
Dimmer Events
\n      
A dimmer can trigger a visibility change on an event
\n      
\n      $('.event.example .image')\n        .dimmer({\n          on: 'hover'\n        })\n      ;\n      
\n      
\n        
\n          
\n            
Title
\n            
Add
\n            
View
\n          
\n        
\n        \n      
\n      
\n        
\n          
\n            
Add
\n            
View
\n          
\n        
\n        \n      
\n    
\n\n    
\n      
Loaders inside Dimmers
\n      
Any loader inside a dimmer will automatically use an appropriate color to match
\n      
\n        
\n          
Loading
\n        
\n        \n        \n      
\n      
\n        
\n        
\n      
\n    
\n\n  
\n\n  
\n\n    
Usage
\n\n    
\n      
Display
\n      
You can display a dimmer by either invoking .dimmer('show') on a section or a dimmer itself. If you choose to  dim a dimmable section, a dimmer will automatically be created.
\n      
\n      // these two are the same\n      $('.ui.dimmable')\n        .dimmer('show')\n      ;\n      $('.ui.dimmable .dimmer')\n        .dimmer('show')\n      ;\n      
\n    
\n\n    
\n      
Creating Dimmers
\n      
If a dimmer does not exist inside the element it will be created on first use.
\n      
\n        $('h4')\n          .dimmer('toggle')\n        ;\n      
\n    
\n\n    
\n      
Showing a Specific Dimmer
\n      
If a dimmer is already inside an element, you can call behavior on the dimmable section or the dimmer itself.
\n      
\n        // If a dimmer exists on a page, you can make it appear by calling it directly\n        $('.page.dimmer:first')\n          .dimmer('toggle')\n        ;\n      
\n    
\n\n    
Behavior
\n\n    
All the following behaviors can be called using the syntax:
\n\n    
\n      Behaviors must be called on the same content which you originally initialize the dimmer, whether it is the dimmable context, or the ui dimmer\n    
\n\n    
\n    $('.your.element')\n      .dimmer('behavior name', argumentOne, argumentTwo)\n    ;\n    
\n\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
BehaviorDescription
add content (element)Detaches a given element from DOM and reattaches element inside dimmer
showShows dimmer
hideHides dimmer
toggleToggles current dimmer visibility
set opacity(opacity)Changes dimmer opacity
createCreates a new dimmer in dimmable context
get durationReturns current duration for show or hide event depending on current visibility
get dimmerReturns DOM element for dimmer
has dimmerReturns whether current dimmable has a dimmer
is activeWhether section's dimmer is active
is animatingWhether dimmer is animating
is dimmerWhether current element is a dimmer
is dimmableWhether current element is a dimmable section
is disabledWhether dimmer is disabled
is enabledWhether dimmer is not disabled
is pageWhether dimmable section is body
is page dimmerWhether dimmer is a page dimmer
set activeSets page dimmer to active
set dimmableSets an element as a dimmable section
set dimmedSets a dimmable section as dimmed
set page dimmerSets current dimmer as a page dimmer
set disabledSets a dimmer as disabled
\n\n  
\n\n   
\n    
\n      Dimmer\n    
\n\n    
\n      Behavior\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
DefaultDescription
useFlextrueWhether dimmers should use flex or legacy positioning
variationfalseSpecify a variation to add when generating dimmer, like inverted
dimmerNamefalseIf initializing a dimmer on a dimmable context, you can use dimmerName to distinguish between multiple dimmers in that context.
closableautoWhether clicking on the dimmer should hide the dimmer (Defaults to auto, closable only when settings.on is not hover
onfalseCan be set to hover or click to show/hide dimmer on dimmable event
useCSStrueWhether to dim dimmers using CSS transitions.
duration\n            
\n            duration    : {\n              show : 500,\n              hide : 500\n            }\n            
\n          		Animation duration of dimming. If an integer is used, that value will apply to both show and hide animations.
transition\n            Fade\n          Named transition to use when animating menu in and out. Fade and slide down are available without including ui transitions
\n\n    
\n      Callbacks\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
ContextDescription
onShowdimmableCallback on element show
onHidedimmableCallback on element hide
onChangedimmableCallback on element show or hide
\n\n    
\n      Module\n    
\n\n    
These settings are native to all modules, and define how the component ties content to DOM attributes, and debugging settings for the module.
\n\n    \n      \n        \n        \n        \n      \n\n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
DefaultDescription
namespacedimmerEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n            
\n            selector: {\n              dimmable : '.dimmable',\n              dimmer   : '.ui.dimmer',\n              content  : '.ui.dimmer > .content, .ui.dimmer > .content > .center'\n            }\n            
\n          		Object containing selectors used by module.
template\n            
\n            template : {\n              dimmer: function() {\n               return $('
').attr('class', 'ui dimmer');\n              }\n            }\n            
\n          
Templates used to generate dimmer content
className\n            
\n            className : {\n              active     : 'active',\n              dimmable   : 'dimmable',\n              dimmed     : 'dimmed',\n              disabled   : 'disabled',\n              pageDimmer : 'page',\n              hide       : 'hide',\n              show       : 'show',\n              transition : 'transition'\n            }\n            
\n          		Class names used to attach style to state
nameDimmerName used in debug logs
silentFalseSilences all console output including error messages, regardless of other debug settings.
debugFalseProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
errors\n            
\n            error   : {\n              method   : 'The method you called is not defined.'\n            }\n            
\n          		Error messages displayed to console
\n  
\n\n
\n"
  },
  {
    "path": "server/documents/modules/dropdown.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'dropdown'\nstandalone  : true\n\ntitle       : 'Dropdown'\ndescription : 'A dropdown allows a user to select a value from a series of options'\ntype        : 'UI Module'\n\nelement     : 'dropdown'\nelementType : 'module'\n\nthemes      : ['Default', 'GitHub', 'Material']\n---\n\n\n\n\n\n<%- @partial('header', { tabs: 'module' }) %>\n\n
\n\n  
\n    
Types
\n\n    
\n      
Dropdown
\n      
A dropdown
\n      
\n        
File
\n        \n        
\n          
New
\n          
\n            ctrl + o\n            Open...\n          
\n          
\n            ctrl + s\n            Save as...\n          
\n          
\n            ctrl + r\n            Rename\n          
\n          
Make a copy
\n          
\n            \n            Move to folder\n          
\n          
\n            \n            Move to trash\n          
\n          
\n          
Download As...
\n          
\n            \n            Publish To Web\n            
\n              
Google Docs
\n              
Google Drive
\n              
Dropbox
\n              
Adobe Creative Cloud
\n              
Private FTP
\n              
Another Service...
\n            
\n          
\n          
E-mail Collaborators
\n        
\n      
\n    
\n\n    
\n      
Selection
\n      
A dropdown can be used to select between choices in a form
\n      
\n        Selection dropdowns can be initialized directly on a select or with the matching HTML and a hidden input.\n      
\n      
\n        \n        \n        
Gender
\n        
\n          
Male
\n          
Female
\n        
\n      
\n    
\n    
\n      \n    
\n    
\n      
\n        \n        \n        
Select Friend
\n        
\n          
\n            \n            Jenny Hess\n          
\n          
\n            \n            Elliot Fu\n          
\n          
\n            \n            Stevie Feliciano\n          
\n          
\n            \n            Christian\n          
\n          
\n            \n            Matt\n          
\n          
\n            \n            Justen Kitsune\n          
\n        
\n      
\n    
\n\n    
\n      
Search Selection
\n      
A selection dropdown can allow a user to search through a large list of choices.
\n      
\n        \n        \n        
Select Country
\n        <%- @partial('examples/single/flag-menu') %>\n      
\n    
\n    
\n      \n    
\n    
\n      
Multiple Selection
\n      
A selection dropdown can allow multiple selections
\n      \n    
\n    
\n      
Multiple Search Selection
\n      
A selection dropdown can allow multiple search selections
\n      \n    
\n    
\n      
\n        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\n      
\n      
\n        \n        \n        
Select Country
\n        <%- @partial('examples/single/flag-menu') %>\n\n      
\n    
\n\n\n    
\n      
Search Dropdown
\n      
A dropdown can be searchable
\n      
\n        \n        Select Language\n        
\n          
Arabic
\n          
Chinese
\n          
Danish
\n          
Dutch
\n          
English
\n          
French
\n          
German
\n          
Greek
\n          
Hungarian
\n          
Italian
\n          
Japanese
\n          
Korean
\n          
Lithuanian
\n          
Persian
\n          
Polish
\n          
Portuguese
\n          
Russian
\n          
Spanish
\n          
Swedish
\n          
Turkish
\n          
Vietnamese
\n        
\n      
\n    
\n\n    
\n      
Search In-Menu
\n      
A dropdown can include a search prompt inside its menu
\n      
\n        \n        Filter Posts\n        
\n          
\n            \n            \n          
\n          
\n          
\n            \n            Tag Label\n          
\n          
\n            
\n              
\n              Important\n            
\n            
\n              
\n              Announcement\n            
\n            
\n              
\n              Cannot Fix\n            
\n            
\n              
\n              News\n            
\n            
\n              
\n              Enhancement\n            
\n            
\n              
\n              Change Declined\n            
\n            
\n              
\n              Off Topic\n            
\n            
\n              
\n              Interesting\n            
\n            
\n              
\n              Discussion\n            
\n          
\n        
\n      
\n    
\n\n    
\n      
\n        \n        \n        Filter Posts\n        
\n          
\n            \n            \n          
\n          
\n          
\n            \n            Tag Label\n          
\n          
\n            
\n              
\n              Important\n            
\n            
\n              
\n              Announcement\n            
\n            
\n              
\n              Cannot Fix\n            
\n            
\n              
\n              News\n            
\n            
\n              
\n              Enhancement\n            
\n            
\n              
\n              Off Topic\n            
\n            
\n              
\n              Interesting\n            
\n            
\n              
\n              Discussion\n            
\n          
\n        
\n      
\n    
\n\n    
\n      
Inline
\n      
A dropdown can be formatted to appear inline in other content
\n      \n        Show me posts by\n        
\n          
\n            \n            Jenny Hess\n          
\n          \n          
\n            
\n              \n              Jenny Hess\n            
\n            
\n              \n              Elliot Fu\n            
\n            
\n              \n              Stevie Feliciano\n            
\n            
\n              \n              Christian\n            
\n            
\n              \n              Matt\n            
\n            
\n              \n              Justen Kitsune\n            
\n          
\n        
\n      \n    
\n\n    
\n      
\n        \n        
\n          Trending repos\n          
\n            
today
\n            \n            
\n              
Adjust time span
\n              
Today
\n              
This Week
\n              
This Month
\n            
\n          
\n        
\n      
\n    
\n\n    
\n    
Pointing
\n    
A dropdown can be formatted so that its menu is pointing
\n      
\n        \n          Home\n        \n        
\n          Shopping\n          \n          
\n            
Categories
\n            
\n              \n              Clothing\n              
\n                
Mens
\n                
Shirts
\n                
Pants
\n                
Jeans
\n                
Shoes
\n                
\n                
Womens
\n                
Dresses
\n                
Shoes
\n                
Bags
\n              
\n            
\n            
Home Goods
\n            
Bedroom
\n            
\n            
Order
\n            
Status
\n            
Cancellations
\n          
\n        
\n        \n          Forums\n        \n        \n          Contact Us\n        \n      
\n    
\n    
\n      
\n        \n          Home\n        \n        
\n          \n          Messages\n          
\n            
Inbox
\n            
Starred
\n            
Sent Mail
\n            
Drafts (143)
\n            
\n            
Spam (1009)
\n            
Trash
\n          
\n        
\n        \n          Browse\n        \n        \n          Help\n        \n      
\n    
\n    
\n      
\n        \n        
\n          
Display Density
\n          
Comfortable
\n          
Cozy
\n          
Compact
\n          
\n          
Settings
\n          
\n            \n            Upload Settings\n            
\n              
\n                \n                Convert Uploaded Files to PDF\n              
\n              
\n                \n                Digitize Text from Uploaded Files\n              
\n            
\n          
\n          
Manage Apps
\n          
Keyboard Shortcuts
\n          
Help
\n        
\n      
\n    
\n    
\n      
Bottom pointing dropdown menus have sub-menus open upwards
\n      
\n        \n        
\n          
\n            \n            New\n            
\n              
Document
\n              
Image
\n            
\n          
\n          
Save As...
\n          
Edit
\n        
\n      
\n      
\n        \n        
\n          
\n            \n            New\n            
\n              
Document
\n              
Image
\n            
\n          
\n          
Save As...
\n          
Edit
\n        
\n      
\n    
\n    
\n      
\n        \n        Filter Posts\n        
\n          
\n            \n            \n          
\n          
\n          
\n            \n            Filter by tag\n          
\n          
\n            
\n            Important\n          
\n          
\n            
\n            Announcement\n          
\n          
\n            
\n            Discussion\n          
\n          
\n          
\n            \n            Filter by date\n          
\n          
\n            \n            This Week\n          
\n          
\n            \n            This Month\n          
\n          
\n            \n            This Year\n          
\n        
\n      
\n    
\n    
\n      
\n        \n        
\n          
\n            \n            \n          
\n          
\n          
\n            \n            Filter by tag\n          
\n          
\n            
\n            Important\n          
\n          
\n            
\n            Announcement\n          
\n          
\n            
\n            Discussion\n          
\n        
\n      
\n      
\n        \n        
\n          
\n            \n            \n          
\n          
\n            \n            Tag Label\n          
\n          
\n            
\n            Important\n          
\n          
\n            
\n            Announcement\n          
\n          
\n            
\n            Discussion\n          
\n        
\n      
\n    
\n\n    
\n      
Floating
\n      
A dropdown menu can appear to be floating below an element.
\n      
\n        
Save
\n        
\n          \n          
\n            
 Edit Post
\n            
 Remove Post
\n            
 Hide Post
\n          
\n        
\n      
\n    
\n\n    
\n      
Simple
\n      
A simple dropdown can open without Javascript
\n      
\n        
\n          Dropdown\n          \n          
\n            
Choice 1
\n            
Choice 2
\n            
Choice 3
\n          
\n        
\n      
\n    
\n\n    
Content
\n\n    
\n      
Header
\n      
A dropdown menu can contain a header
\n      
\n        \n        Filter\n        
\n          
\n            \n            Filter by tag\n          
\n          
\n            Important\n          
\n          
\n            Announcement\n          
\n          
\n            Discussion\n          
\n        
\n      
\n    
\n    
\n      
Divider
\n      
A dropdown menu can contain dividers to separate related content
\n      
\n        \n        Filter\n        
\n          
\n            \n            Filter by tag\n          
\n          
\n          
\n            Important\n          
\n          
\n            Announcement\n          
\n          
\n            Discussion\n          
\n        
\n      
\n    
\n\n    
\n      
Icon
\n      
A dropdown menu can contain an icon.
\n      
\n        \n        Filter\n        
\n          
\n            \n            Filter by tag\n          
\n          
\n          
\n            \n            Important\n          
\n          
\n            \n            Announcement\n          
\n          
\n            \n            Discussion\n          
\n        
\n      
\n    
\n\n    
\n      
Description
\n      
A dropdown menu can contain a description.
\n      
\n        Using a description may require setting a minimum width on menu to prevent content overlap\n      
\n      
\n        \n        Filter Tags\n        
\n          
\n            Filter by tag\n          
\n          
\n          
\n            2 new\n            Important\n          
\n          
\n            10 new\n            Hopper\n          
\n          
\n            5 new\n            Discussion\n          
\n        
\n      
\n    
\n\n    
\n      
Label
\n      
A dropdown menu can contain a label.
\n      
\n        \n        Filter\n        
\n          
\n            Search Issues\n          
\n          
\n            \n            \n          
\n          
\n            \n            Filter by tag\n          
\n          
\n            
\n            Important\n          
\n          
\n            
\n            Announcement\n          
\n          
\n            
\n            Discussion\n          
\n        
\n      
\n    
\n\n    
\n      
Message
\n      
A dropdown menu can contain a message.
\n      
\n        \n        Login\n        
\n          
\n            
Error
\n            
You must log-in to see all categories
\n          
\n        
\n      
\n    
\n\n    
\n      
Floated Content
\n      
A dropdown menu can contain floated content.
\n      
Floated content may stack to two lines without manually setting a width when or using a fluid dropdown\n      
\n      
\n        \n        Select Type\n        
\n          
\n            \n            Important\n          
\n          
\n            \n            Announcement\n          
\n          
\n            \n            Discussion\n          
\n        
\n      
\n    
\n\n\n    
\n      
Input
\n      
A dropdown menu can contain an input
\n      
\n        \n        Filter\n        
\n          
\n            Search Issues\n          
\n          
\n            \n            \n          
\n          
\n            \n            Filter by tag\n          
\n          
\n          
\n            
\n            Important\n          
\n          
\n            
\n            Announcement\n          
\n          
\n            
\n            Discussion\n          
\n        
\n      
\n    
\n\n    
\n      
Image
\n      
A dropdown menu can contain an image
\n      
\n        \n        Add User\n        
\n          
\n            People You Might Know\n          
\n          
\n            \n            Jenny Hess\n          
\n          
\n            \n            Elliot Fu\n          
\n          
\n            \n            Stevie Feliciano\n          
\n          
\n            Your Friends' Friends\n          
\n          
\n            \n            Christian\n          
\n          
\n            \n            Matt\n          
\n          
\n            \n            Justen Kitsune\n          
\n        
\n      
\n    
\n\n    
States
\n\n    
\n      
Loading
\n      
A dropdown can show that it is currently loading data
\n      
\n        Dropdown \n        
\n          
Choice 1
\n          
Choice 2
\n          
Choice 3
\n        
\n      
\n    
\n    
\n      
\n        \n        \n        \n        
Search...
\n        
\n          
Choice 1
\n          
Choice 2
\n          
Choice 3
\n        
\n      
\n    
\n    
\n      
\n        Dropdown \n        
\n          
Choice 1
\n          
Choice 2
\n          
Choice 3
\n        
\n      
\n    
\n    
\n      
Error
\n      
An errored dropdown can alert a user to a problem
\n      
\n        Dropdown \n        
\n          
Choice 1
\n          
Choice 2
\n          
Choice 3
\n        
\n      
\n    
\n    
\n      
\n        Dropdown \n        
\n          
Choice 1
\n          
Choice 2
\n          
Choice 3
\n        
\n      
\n    
\n\n    
\n      
Active
\n      
An active dropdown has its menu open
\n      
An active state will only automatically open a ui simple dropdown. To activate a normal dropdown use $('.ui.dropdown').dropdown('show');
\n      
\n        Dropdown \n        
\n          
Choice 1
\n          
Choice 2
\n        
\n      
\n    
\n\n    
\n      
Disabled
\n      
A disabled dropdown menu or item does not allow user interaction
\n      
\n        Dropdown \n        
\n          
Choice 1
\n          
Choice 2
\n          
Choice 3
\n        
\n      
\n    
\n    
\n      
\n        Disabled Item \n        
\n          
Choice 1
\n          
Disabled
\n          
Choice 3
\n        
\n      
\n    
\n\n\n    
Variations
\n\n    
\n      
Scrolling
\n      
A dropdown can have its menu scroll
\n      
\n        Scrolling dropdowns are incompatible with the usage of sub menu.\n      
\n      
\n        \n        
Select choice
\n        \n        
\n          
Choice 1
\n          
Choice 2
\n          
Choice 3
\n          
Choice 4
\n          
Choice 5
\n          
Choice 6
\n          
Choice 7
\n          
Choice 8
\n          
Choice 9
\n          
Choice 10
\n          
Choice 11
\n          
Choice 12
\n          
Choice 13
\n          
Choice 14
\n          
Choice 15
\n        
\n      
\n    
\n    
\n      
\n        \n        Filter Posts\n        
\n          
\n            \n            \n          
\n          
\n          
\n            \n            Tag Label\n          
\n          
\n            
\n              
\n              Important\n            
\n            
\n              
\n              Announcement\n            
\n            
\n              
\n              Cannot Fix\n            
\n            
\n              
\n              News\n            
\n            
\n              
\n              Enhancement\n            
\n            
\n              
\n              Change Declined\n            
\n            
\n              
\n              Off Topic\n            
\n            
\n              
\n              Interesting\n            
\n            
\n              
\n              Discussion\n            
\n          
\n        
\n      
\n\n    
\n\n    
\n      
Compact
\n      
A compact dropdown has no minimum width
\n      
\n        \n        
Compact
\n        
\n          
A
\n          
B
\n          
C
\n        
\n      
\n    
\n\n    
\n      
Fluid
\n      
A dropdown can take the full width of its parent
\n      
\n        Link 1\n        Link 2\n        
All Sections
\n        
\n          
\n            
More
\n            \n            
\n              
Choice 1
\n              
Choice 2
\n              
Choice 3
\n            
\n          
\n        
\n      
\n    
\n\n    
\n      
Menu Direction
\n      
A dropdown menu or sub-menu can specify the direction it should open
\n      
\n        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\n      
\n      
\n        \n        Menu\n        
\n          
\n            \n            Left\n            
\n              
1
\n              
2
\n              
3
\n            
\n          
\n          
\n            \n            Right\n            
\n              
1
\n              
2
\n              
3
\n            
\n          
\n        
\n      
\n    
\n\n    
\n      
\n        \n        Menu\n        
\n          
\n            \n            Left\n            
\n              
\n                \n                Still Left\n                
\n                  
1
\n                  
2
\n                  
3
\n                
\n              
\n              
2
\n              
3
\n            
\n          
\n          
\n            \n            Left 2\n            
\n              
1
\n              
2
\n              
3
\n            
\n          
\n        
\n      
\n    
\n\n  
\n\n\n  
\n\n\n    
Selection Dropdowns
\n\n    
\n      
\n        Clearable\n        
\n          New in 2.4.0\n        
\n      
\n      
Using the clearable setting will let users remove their selection from a dropdown.
\n\n      
\n        \n        
Select Country
\n        \n        <%- @partial('examples/single/flag-menu') %>\n      
\n      
\n      
\n        Show me\n        
\n          \n          
css
\n          \n          
\n            <%- @partial('examples/single/preset-menu') %>\n          
\n        
\n        classes currently available.\n      
\n\n      
\n        $('.clearable.example .ui.selection.dropdown')\n          .dropdown({\n            clearable: true\n          })\n        ;\n        $('.clearable.example .ui.inline.dropdown')\n          .dropdown({\n            clearable: true,\n            placeholder: 'any'\n          })\n        ;\n      
\n    
\n\n    
\n      
Maximum Selections
\n      
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.
\n\n      
Selection
\n      \n\n      
Search Selection
\n      
\n        \n        \n        
Select Country
\n        <%- @partial('examples/single/flag-menu') %>\n      
\n\n      
Without Labels
\n      
\n        \n        \n        
Select Country
\n        <%- @partial('examples/single/flag-menu') %>\n      
\n\n      
\n        $('.max.example .ui.normal.dropdown')\n          .dropdown({\n            maxSelections: 3\n          })\n        ;\n        $('.max.example .ui.special.dropdown')\n          .dropdown({\n            useLabels: false,\n            maxSelections: 3\n          })\n        ;\n      
\n    
\n\n    
\n      
Tagging and User Additions
\n      
Using allowAdditions: true gives users the ability to add their own options. This can work with either single or multiple search select dropdowns
\n\n      
\n        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.\n      
\n\n      
Single
\n      \n\n      
Multiple
\n      
\n        \n        \n        
Skills
\n        
\n          <%- @partial('examples/single/preset-menu') %>\n        
\n      
\n\n      
\n        $('.tag.example .ui.dropdown')\n          .dropdown({\n            allowAdditions: true\n          })\n        ;\n      
\n    
\n\n    
\n      
Text Labels
\n      
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.
\n      
\n        You can customize any of the messages displayed by adjusting templates in settings.message\n      
\n      \n\n      
or
\n\n      
\n        \n        \n        
Select Country
\n        <%- @partial('examples/single/flag-menu') %>\n      
\n\n      
\n        $('.no.label.example .ui.dropdown')\n          .dropdown({\n            useLabels: false\n          })\n        ;\n      
\n    
\n\n    
\n      
Clearing Dropdown
\n      
You can reset a form field to its placeholder value
\n      
\n        \n        \n        
Default
\n        
\n            
Value
\n            
Another Value
\n        
\n       
\n      
\n        \n        
Select a value
\n        \n        
\n            
Value
\n            
Another Value
\n        
\n       
\n\n      
\n        Clear\n      
\n      
\n        $('.clear.example .button')\n          .on('click', function() {\n            $('.clear.example .ui.dropdown')\n              .dropdown('clear')\n            ;\n          })\n        ;\n      
\n    
\n\n    
\n      
Restoring Defaults
\n      
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
\n      
\n        \n        \n        
Default
\n        
\n            
Value
\n            
Another Value
\n            
Default Value
\n            
Second Default
\n        
\n      
\n      
\n      
\n        \n        \n        
Select a value
\n        
\n            
Value
\n            
Another Value
\n        
\n       
\n      
\n      
\n        \n        \n        
Default Value
\n        
\n            
Value
\n            
Another Value
\n            
Default Value
\n        
\n       
\n      
\n      
\n          Restore All Dropdowns\n      
\n      
\n        $('.restore.example .button')\n          .on('click', function() {\n            $('.restore.example .ui.dropdown')\n              .dropdown('restore defaults')\n            ;\n          })\n        ;\n      
\n    
\n\n\n    
\n      
Upward
\n      
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.
\n      
\n        $('.upward.example .dropdown')\n          .dropdown({\n            direction: 'upward'\n          })\n        ;\n      
\n      
\n        \n      
\n      
\n        
\n          \n          
\n            
\n              \n              New\n              
\n                
Document
\n                
Image
\n              
\n            
\n            
Save As...
\n            
Edit
\n          
\n        
\n      
\n    
\n\n\n    
Remote Content
\n\n    
\n      
Match Search Query on Server
\n      
Search selection dropdowns can specify API settings for retrieving values remotely, this can use either a named API action or url.
\n      
Using API can allow users to select choices from large datasets that would be too large to include directly in page markups.
\n      
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.
\n      
Requests for the same API endpoints will automatically cached locally, to avoid server roundtrips. You can disable this by adjusting the cache API setting.
\n      
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
\n\n\n      
\n        
\n          
\n            \n            
\n              \n              \n              \n              
Select one...
\n            
\n          
\n          
\n            \n            
\n              \n              \n              \n              
Select...
\n            
\n          
\n        
\n      
\n\n      
\n        $('.remote.filter.example .ui.dropdown')\n          .dropdown({\n            apiSettings: {\n              // this url parses query server side and returns filtered results\n              url: '//api.semantic-ui.com/tags/{query}'\n            },\n          })\n        ;\n      
\n      
\n      // Expected server response\n      {\n          \"success\": true,\n          \"results\": [\n            {\n              // name displayed in dropdown\n              \"name\"  : \"Choice 1\",\n\n              // selected value\n              \"value\" : \"value1\",\n\n              // name displayed after selection (optional)\n              \"text\"  : \"Choice 1\"\n\n              // whether field should be displayed as disabled (optional)\n              \"disabled\"  : false\n\n            },\n            {\n              \"name\"  : \"Choice 2\",\n              \"value\" : \"value2\",\n              \"text\"  : \"Choice 2\"\n            },\n            {\n              \"name\"  : \"Choice 3\",\n              \"value\" : \"value3\",\n              \"text\"  : \"Choice 3\"\n            },\n            {\n              \"name\"  : \"Choice 4\",\n              \"value\" : \"value4\",\n              \"text\"  : \"Choice 4\"\n            },\n            {\n              \"name\"  : \"Choice 5\",\n              \"value\" : \"value5\",\n              \"text\"  : \"Choice 5\"\n            }\n          ]\n      }\n      
\n    
\n\n    
\n      
Return All Choices Remotely
\n      
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.
\n      
\n        
\n          
\n            \n            
\n              \n              \n              
Select one...
\n            
\n          
\n          
\n            \n            
\n              \n              \n              \n              
Select one...
\n            
\n          
\n          
\n            \n            
\n              \n              \n              \n              
Select...
\n            
\n          
\n        
\n      
\n\n      
\n        $('.remote.choices.example .ui.dropdown')\n          .dropdown({\n            apiSettings: {\n              // this url just returns a list of tags (with API response expected above)\n              url: '//api.semantic-ui.com/tags/'\n            },\n            filterRemoteData: true\n          })\n        ;\n      
\n    
\n\n    
Menus
\n\n    
\n      
Changing Transitions
\n      
A dropdown can specify a different transition.
\n\n      
\n      $('.dropdown')\n        .dropdown({\n          // you can use any ui transition\n          transition: 'drop'\n        })\n      ;\n      
\n\n      
\n        
Toggle
\n        
\n          \n          
\n            
Drop
\n            
Horizontal Flip
\n            
Fade Up
\n            
Scale
\n          
\n        
\n      
\n    
\n\n    
\n      
Multiple Levels
\n      
A dropdown menu can also contain sub menus inside of it
\n      My favorite animal breed is\n      
\n        \n        
Shiba Inu
\n        \n        
\n          
\n            \n            Dogs\n            
\n              
Shiba Inu
\n              
\n                \n                Poodle\n                
\n                  
Toy
\n                  
Standard
\n                
\n              
\n              
Labrador
\n            
\n          
\n          
\n            \n            Cats\n            
\n              
Aegean
\n              
Balinese
\n              
Persian
\n            
\n          
\n        
\n      
\n    
\n\n    
\n      
Category Selection
\n      
Using a multi-level menu with allowCategorySelection: true will allow items with sub-menus to be selected.
\n      
\n        $('.category.example .ui.dropdown')\n          .dropdown({\n            allowCategorySelection: true\n          })\n        ;\n      
\n      
\n        Choose Category\n        \n        
\n          
\n            Category 1\n          
\n          
\n            \n            Category 2\n            
\n              
Item 2A
\n              
Item 2B
\n              
Item 2C
\n            
\n          
\n          
\n            \n            Category 3\n            
\n              
Item 3A
\n              
Item 3B
\n              
Item 3C
\n            
\n          
\n        
\n      
\n    
\n\n\n    
\n      
Preserving User Selections
\n      
This example uses a preset text value to preserve the menu item on page navigation
\n      
\n        \n        
\n          
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.
\n          
This is used to preserve a user's selection on page navigation and will automatically remove and default text placeholder formatting.
\n        
\n      
\n\n\n      Current action: 
\n        
Hide
\n        \n        
\n          
Edit
\n          
Remove
\n          
Hide
\n        
\n      
\n\n    
\n\n\n    
Adjusting Actions
\n\n    
\n      
Combo Dropdowns
\n      
\n        
A button can be formatted with a dropdown.
\n        
Using the combo action will change the preceding element to the selected value.
\n      
\n      
\n      $('.combo.dropdown')\n        .dropdown({\n          action: 'combo'\n        })\n      ;\n      
\n\n      
\n        
Save
\n        
\n          \n          
\n            
 Edit
\n            
 Delete
\n            
 Hide
\n          
\n        
\n      
\n    
\n\n    
\n      
Link Dropdowns
\n      
\n        
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.
\n        
\n        $('.link.example .dropdown')\n          .dropdown({\n            action: 'hide'\n          })\n        ;\n        
\n      
\n      \n      
\n        
Go to
\n        \n        
\n           Home\n           Browse\n           Search\n        
\n      
\n    
\n\n    
Coupling
\n\n    
\n    
Button Group
\n      
A button group can be formatted to show additional content as a dropdown
\n      
\n        
\n          \n          
\n            
Edit User
\n            
Remove User
\n            
Make Invisible
\n          
\n        
\n        
\n          \n          
\n            
Edit Group
\n            
Remove Group
\n            
Hide from Group
\n          
\n        
\n        
\n          \n          
\n            
 Edit
\n            
 Remove
\n            
 Hide
\n          
\n        
\n      
\n    
\n\n    
\n      
Menu
\n      
A menu element can contain a dropdown
\n        
\n          \n            Home\n          \n          \n            Messages\n            \n            
\n              
\n                \n                Categories\n                
\n                  
Unread
\n                  
Promotions
\n                  
Updates
\n                
\n              
\n              
Archive
\n            
\n          \n          \n            Browse\n          \n        
\n    
\n\n    
\n      
Form
\n      
A dropdown can be formatted to allow selection inside a form
\n      
\n        
\n          
\n            \n            \n          
\n          
\n            \n            \n          
\n        
\n        
\n          \n          
\n            \n            
Select Gender
\n            \n            
\n              
Male
\n              
Female
\n            
\n          
\n        
\n      
\n    
\n\n  
\n\n  
\n    
Initializing
\n\n    
\n      
Initializing Existing HTML
\n      
Initializing a dropdown with pre-existing HTML allows for greater performance than initializing a dropdown directly on a select element.
\n      
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.
\n      
\n        
\n          \n          \n          
Gender
\n          
\n            
Male
\n            
Female
\n          
\n        
\n      
\n      
\n        $('.ui.dropdown')\n          .dropdown()\n        ;\n      
\n    
\n    
\n      
\n        Initializing with Javascript Only\n        
New in 2.2.12
\n      
\n      
You can specify a list of values in the settings object to avoid having to stub the html yourself.
\n      
Adding selected: true to an item will have that item selected by default.
\n      
You can also use the placeholder setting to specify placeholder text before an option is selected.
\n      
\n        
\n          
\n          \n        
\n      
\n      
\n        $('.ui.dropdown')\n          .dropdown({\n            values: [\n              {\n                name: 'Male',\n                value: 'male'\n              },\n              {\n                name     : 'Female',\n                value    : 'female',\n                selected : true\n              }\n            ]\n          })\n        ;\n      
\n    
\n    
\n      
Specifying Different Text & Hidden Input Values
\n      
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.
\n      
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.
\n\n      
\n        
\n          \n          \n          
Gender
\n          
\n            
\n              \n              Male\n            
\n            
\n              \n              Female\n            
\n          
\n        
\n      
\n      
\n        \n        \n        
Gender
\n        
\n          
\n            \n            Male\n          
\n          
\n            \n            Female\n          
\n        
\n      
\n    
\n    
\n      
Converting Form Elements
\n      
For convenience, select elements can automatically be converted to selection dropdown. A select options with blank string values will be converted to prompt text.
\n      
\n        \n      
\n      
\n        $('#select')\n          .dropdown()\n        ;\n      
\n      \n    
\n    
\n      
Hybrid Form Initialization
\n      
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.
\n      
\n        
\n          
\n            \n            Colors\n            \n          
\n          
\n            \n            Sizes\n            \n          
\n        
\n      
\n      
\n        $('#hybrid select')\n          .dropdown({\n            on: 'hover'\n          })\n        ;\n      
\n      
\n          
\n            \n            Colors\n            \n          
\n          
\n            \n            Sizes\n            \n          
\n        
\n    
\n\n    
\n      
Searching Dropdowns
\n      
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.
\n      
\n        $('#search-select')\n          .dropdown()\n        ;\n      
\n      \n      \n      
\n        \n      
\n    
\n    
\n      
Multiple Selections
\n      
You can allow multiple selections by the multiple property on a select element, or by including the class multiple on a dropdown.
\n      
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.
\n      
\n        $('#multi-select')\n          .dropdown()\n        ;\n      
\n\n      \n\n      \n\n      
Dropdown
\n      
\n        
\n          \n          \n          \n          
States
\n          
\n            
Alabama
\n            
Alaska
\n            
Arizona
\n            
Arkansas
\n            
California
\n            \n            
Ohio
\n            
Oklahoma
\n            
Oregon
\n            
Pennsylvania
\n            
Rhode Island
\n            
South Carolina
\n            
South Dakota
\n            
Tennessee
\n            
Texas
\n            
Utah
\n            
Vermont
\n            
Virginia
\n            
Washington
\n            
West Virginia
\n            
Wisconsin
\n            
Wyoming
\n          
\n        
\n      
\n\n      
Select
\n      
\n        \n      
\n    
\n\n\n    
\n      
Specifying Select Action
\n      
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.
\n\n      \n        \n          \n            \n            \n          \n        \n        \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n        \n      
ActionDescription
activate (Default)Selects current item, adjusts dropdown value and changes dropdown text
comboSame as activate, but updates previous elements text instead of self
selectSelects current item from menu and stores value, but does not change dropdown text
hideHides the dropdown menu and stores value, but does not change text
function(text, value){}Custom action
nothingDoes nothing
\n\n      
To specify a different built in action, simply specify the name.
\n      
\n        $('.dropdown')\n          .dropdown({\n            action: 'combo'\n          })\n        ;\n      
\n      
To trigger only your custom action and no default action, specify your own function for settings.action.
\n      
\n        $('.dropdown')\n          .dropdown({\n            action: function(text, value) {\n              // nothing built in occurs\n            }\n          })\n        ;\n      
\n\n      
If you want to have both a built in action occur, and your own custom action use onChange in combination with action
\n\n      
\n        $('.dropdown')\n          .dropdown({\n            action: 'hide',\n            onChange: function(value, text, $selectedItem) {\n              // custom action\n            }\n          })\n        ;\n      
\n\n\n    
\n\n\n\n    
Behavior
\n\n    
All the following behaviors can be called using the syntax:
\n    
\n    $('.your.element')\n      .dropdown('behavior name', argumentOne, argumentTwo)\n    ;\n    
\n\n    \n      \n        \n          \n          \n        \n      \n      \n        \n          \n          \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n        \n          \n        \n        \n          \n          \n        \n        \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
BehaviorDescription
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
refreshRefreshes all cached selectors and data
toggleToggles current visibility of dropdown
showShows dropdown
hideHides dropdown
clearClears dropdown of selection
hide othersHides all other dropdowns that is not current dropdown
restore defaultsRestores dropdown text and value to its value on page load
restore default textRestores dropdown text to its value on page load
restore placeholder textRestores dropdown text to its prompt, placeholder text
restore default valueRestores dropdown value to its value on page load
save defaultsSaves 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 textReturns current dropdown text
get valueReturns current dropdown input value
get item(value)Returns DOM element that matches a given input value
bind touch eventsAdds touch events to element
bind mouse eventsAdds mouse events to element
bind intentBinds a click to document to determine if you click away from a dropdown
unbind intentUnbinds document intent click
determine intentReturns whether event occurred inside dropdown
determine select action(text, value)Triggers preset item selection action based on settings passing text/value
set activeSets dropdown to active state\n        
set visibleSets dropdown to visible state
remove activeRemoves dropdown active state\n        
remove visibleRemoves dropdown visible state
is selectionReturns whether dropdown is a selection dropdown
is animatedReturns whether dropdown is animated
is visibleReturns whether dropdown is visible
is hiddenReturns whether dropdown is hidden
get default textReturns dropdown value as set on page load
get placeholder textReturns placeholder text
\n  
\n\n  
\n\n    
\n      Dropdown\n    
\n\n    
\n\n    
\n      Frequently Used Settings\n    
\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
valuesfalseWhen specified allows you to initialize dropdown with specific values. See usage guide for details.
onclickEvent used to trigger dropdown (Hover, Click, Custom Event)
clearablefalseWhether the dropdown value can be cleared by the user after being selected. 
ignoreCasefalse
New in 2.2.13
Whether values with matching cases should be treated as identical when adding them to a dropdown.
allowReselectionfalseWhen set to true will fire onChange even when the value a user select matches the currently selected value.
allowAdditionsfalseWhether search selection should allow users to add their own selections, works for single or multiselect.
hideAdditionstrueIf disabled user additions will appear in the dropdown's menu using a specially formatted selection item formatted by templates.addition.
actionauto\n          
Sets a default action to occur. (See usage guide)
\n          
\n            
\n              
activate (default)
\n              
Updates dropdown text with selected value, sets element state to active, updates any hidden fields if available
\n            
\n            
\n              
select
\n              
activates menu and updates input fields, but does not change current text
\n            
\n            
\n              
combo
\n              
changes text of previous sibling element
\n            
\n            
\n              
nothing
\n              
no action occurs
\n            
\n            
\n              
hide
\n              
Dropdown menu is hidden
\n            
\n            
\n              
function(text, value, element){}
\n              
custom function is executed with values specified in callback
\n            
\n          
\n        
minCharacters1The minimum characters for a search to begin showing results
matchbothWhen using search selection specifies how to match values.\n          
\n            
\n              
both
\n              
Matches against text and value
\n            
\n            
\n              
value
\n              
matches against value only
\n            
\n            
\n              
text
\n              
matches against text only
\n            
\n          
\n        
selectOnKeydowntrueWhether dropdown should select new option when using keyboard shortcuts. Setting to false will require enter or left click to confirm a choice.
forceSelectiontrueWhether search selection will force currently selected choice when element is blurred.
allowCategorySelectionfalseWhether menu items with sub-menus (categories) should be selectable
placeholderauto\n            
\n              
\n                
auto
\n                
Convert option with \"\" (blank string) value to placeholder text
\n              
\n              
\n                
value
\n                
Sets string value to placeholder text, leaves \"\" value
\n              
\n              
\n                
false
\n                
Leaves \"\" value as a selectable option
\n              
\n            
\n          
\n    
\n\n    
\n\n    
\n      Remote Settings\n    
\n\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
apiSettingsfalseCan be set to an object to specify API settings for retrieving remote selection menu content from an API endpoint
fields\n            
\n            fields: {\n              remoteValues : 'results', // grouping for api results\n              values       : 'values', // grouping for all dropdown values\n              name         : 'name',   // displayed dropdown text\n              value        : 'value'   // actual dropdown value\n            }\n            
\n          		List mapping dropdown content to JSON Property when using API
filterRemoteDatafalseWhether results returned from API should be filtered by query before being displayed
saveRemoteDatatrueWhen 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.
\n    
\n\n    
\n\n    
\n      Multiple Select Settings\n    
\n\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
useLabels\n           true\n          Whether multiselect should use labels. Must be set to true when allowAdditions is true
maxSelections\n           false\n          When set to a number, sets the maximum number of selections
glyphWidth\n           1.0714\n          Maximum glyph width, used to calculate search size. This is usually size of a \"W\" in your font in em
label\n            
\n            label: {\n              transition : 'horizontal flip',\n              duration   : 200,\n              variation  : false\n            }\n            
\n          		Allows customization of multi-select labels
\n    
\n\n    
\n    
\n      Additional Settings\n    
\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
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.
keepOnScreentrueWhether dropdown should try to keep itself on screen by checking whether menus display position in its context (Default context is page).
contextwindowElement context to use when checking whether can show when keepOnScreen: true
fullTextSearchfalseSpecifying 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.
preserveHTMLtrueWhether HTML included in dropdown values should be preserved. (Allows icons to show up in selected value)
sortSelectfalseWhether to sort values when creating a dropdown automatically from a select element.
showOnFocustrueWhether to show dropdown menu automatically on element focus.
allowTabtrueWhether to allow the element to be navigable by keyboard, by automatically creating a tabindex
transition\n            auto (slide down / slide up)\n          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\n            200\n          Duration of animation events
keys\n          
\n          keys : {\n            backspace  : 8,\n            delimiter  : 188, // comma\n            deleteKey  : 46,\n            enter      : 13,\n            escape     : 27,\n            pageUp     : 33,\n            pageDown   : 34,\n            leftArrow  : 37,\n            upArrow    : 38,\n            rightArrow : 39,\n            downArrow  : 40\n          }\n          
\n          		\n            The keycode used to represent keyboard shortcuts. To avoid issues with some foreign languages, you can pass false for comma delimiter's value\n          
delay\n          
\n          delay : {\n            hide   : 300,\n            show   : 200,\n            search : 50,\n            touch  : 50\n          }\n          
\n          		Time in milliseconds to debounce show or hide behavior when on: hover is used, or when touch is used.
\n\n    
\n\n    
\n      Callbacks\n    
\n\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
ContextDescription
onChange(value, text, $choice)DropdownIs called after a dropdown value changes. Receives the name and value of selection and the active menu element
onAdd(addedValue, addedText, $addedChoice)DropdownIs called after a dropdown selection is added using a multiple select dropdown, only receives the added value
onRemove(removedValue, removedText, $removedChoice)DropdownIs 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)DropdownIs called after a label is selected by a user
onNoResults(searchValue)DropdownIs called after a dropdown is searched with no matching values
onShowDropdownIs called before a dropdown is shown. If false is returned, dropdown will not be shown.
onHideDropdownIs called before a dropdown is hidden. If false is returned, dropdown will not be hidden.
\n\n    
\n      Module Settings\n    
\n\n    
\n      DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
DefaultDescription
namespacedropdownEvent namespace. Makes sure module teardown does not effect other events attached to an element.
message\n            
\n              You can specify site wide messages by modifying $.fn.dropdown.settings.message\n              that will apply on any dropdown if it appears in the page.\n            
\n            
\n            message: {\n              addResult     : 'Add {term}',\n              count         : '{count} selected',\n              maxSelections : 'Max {maxCount} selections',\n              noResults     : 'No results found.'\n            }\n            
\n          
selector\n            
\n            selector : {\n              addition     : '.addition',\n              dropdown     : '.ui.dropdown',\n              icon         : '> .dropdown.icon',\n              input        : '> input[type=\"hidden\"], > select',\n              item         : '.item',\n              label        : '> .label',\n              remove       : '> .label > .delete.icon',\n              siblingLabel : '.label',\n              menu         : '.menu',\n              message      : '.message',\n              menuIcon     : '.dropdown.icon',\n              search       : 'input.search, .menu > .search > input',\n              text         : '> .text:not(.icon)'\n            }\n            
\n          
regExp\n            
\n            regExp : {\n              escape   : /[-[\\]{}()*+?.,\\\\^$|#\\s]/g,\n            }\n            
\n          
metadata\n            
\n            metadata : {\n              defaultText     : 'defaultText',\n              defaultValue    : 'defaultValue',\n              placeholderText : 'placeholderText',\n              text            : 'text',\n              value           : 'value'\n            }\n            
\n          
className\n            
\n            className : {\n              active      : 'active',\n              addition    : 'addition',\n              animating   : 'animating',\n              disabled    : 'disabled',\n              dropdown    : 'ui dropdown',\n              filtered    : 'filtered',\n              hidden      : 'hidden transition',\n              item        : 'item',\n              label       : 'ui label',\n              loading     : 'loading',\n              menu        : 'menu',\n              message     : 'message',\n              multiple    : 'multiple',\n              placeholder : 'default',\n              search      : 'search',\n              selected    : 'selected',\n              selection   : 'selection',\n              upward      : 'upward',\n              visible     : 'visible'\n            }\n            
\n          
nameDropdownName used in debug logs
silentFalseSilences all console output including error messages, regardless of other debug settings.
debugFalseProvides standard debug output to console
performanceTrueProvides performance stats in console, and suppresses other debug output.
verboseTrueProvides ancillary debug output to console
error\n            
\n            error   : {\n              action       : 'You called a dropdown action that was not defined',\n              alreadySetup : 'Once a select has been initialized behaviors must be called on the created ui dropdown',\n              labels       : 'Allowing user additions currently requires the use of labels.',\n              method       : 'The method you called is not defined.',\n              noTransition : 'This module requires ui transitions '\n            }\n            
\n          
\n\n  
\n\n
\n"
  },
  {
    "path": "server/documents/modules/embed.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : ''\nstandalone  : true\n\nelement     : 'Embed'\nelementType : 'module'\n\ntitle       : 'Embed'\ndescription : 'An embed displays content from other websites like YouTube videos or Google Maps'\ntype        : 'UI Module'\n\n---\n\n\n<%- @partial('header',  { tabs: { overview: 'Overview', definition: 'Definition', usage: 'Usage', settings: 'Settings' } }) %>\n\n
\n  
\n\n    
When to Use
\n\n    
\n      
Responsive Aspect Ratio
\n      
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.
\n    
\n    
\n      
Only Load After Interaction
\n      
Including an iframe embed directly will automatically load all iframe contents on page load which can drastically reduce the responsiveness of a page.
\n      
Semantic's embed combats this by not  loading iframe content until a user has interacted with your embed's placeholder content.
\n      
To give you an idea of how much file size including an embed will add to your page load see the chart below
\n      
The following are download estimates taken from firebug and a single sample embed. Individual results may vary.
\n      \n        \n          \n          \n        \n        \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n        \n      
NetworkEmbed Size
\n              Google Maps\n            \n              237kb\n            
\n              YouTube\n            \n              380kb\n            
\n              Vimeo\n            \n              81kb\n            
\n    
\n  
\n\n  
\n\n    
Types
\n\n    
\n      
YouTube
\n      
An embed can be used to display YouTube Content
\n\n      
\n      
\n\n    
\n\n    
\n      
Vimeo
\n      
An embed can be used to display Vimeo content.
\n\n      
\n      
\n\n    
\n\n    
\n      
Custom Content
\n      
An embed can display any web content
\n      
Embeds use an intrinsic aspect ratios to embed content responsively. Content will preserve their intrinsic aspect ratio for all browser sizes responsively
\n      
\n      
\n    
\n\n\n    
Variations
\n\n    
\n      
Aspect Ratio
\n      
An embed can specify an alternative aspect ratio
\n      
\n      
\n\n    
\n\n  
\n\n  
\n\n    
Initializing
\n\n    
\n      
Specifying a URL
\n      
Specifying a url will automatically match to an embed source using the domain of the url.
\n      
\n        $('.url.example .ui.embed').embed();\n      
\n      
\n        
\n      
\n    
\n\n    
\n      
Using Content IDs
\n      
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.
\n      
\n        $('.content.example .ui.embed').embed();\n      
\n      
\n        
\n      
\n    
\n\n    
\n      
Specifying Metadata
\n      
Other settings like icons and placeholder images can be specified in metadata overriding presets for a site.
\n      
\n        $('.metadata.example .ui.embed').embed();\n      
\n      
\n        
\n      
\n    
\n\n    
\n      
Specifying Programmatically
\n      
You can also specify embed settings at run-time in the settings object.
\n      
\n        $('.custom.example .ui.embed').embed({\n          source      : 'youtube',\n          id          : 'O6Xo21L0ybE',\n          placeholder : '/images/bear-waving.jpg'\n        });\n      
\n      
\n        
\n      
\n\n    
\n\n    
\n      
Specifying New Sources
\n      
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
\n      
Extending $.fn.embed.settings.sources allows you to use other proprietary embeds.
\n      
\n        // built in\n        $.fn.embed.settings.sources = {\n          youtube: {\n            name   : 'youtube',\n            type   : 'video',\n            icon   : 'video play',\n            domain : 'youtube.com',\n            url    : '//www.youtube.com/embed/{id}',\n            parameters: function(settings) {\n              return {\n                autohide       : !settings.showUI,\n                autoplay       : settings.autoplay,\n                color          : settings.colors || undefined,\n                hq             : settings.hd,\n                jsapi          : settings.api,\n                modestbranding : 1\n              };\n            }\n          },\n          vimeo: {\n            name   : 'vimeo',\n            type   : 'video',\n            icon   : 'video play',\n            domain : 'vimeo.com',\n            url    : '//www.youtube.com/embed/{id}',\n            parameters: function(settings) {\n              return {\n                api      : settings.api,\n                autoplay : settings.autoplay,\n                byline   : settings.showUI,\n                color    : settings.colors || undefined,\n                portrait : settings.showUI,\n                title    : settings.showUI\n              };\n            }\n          }\n        };\n      
\n    
\n\n    
Behaviors
\n    
All the following behaviors can be called using the syntax:
\n    
\n    $('.your.element')\n      .embed('behavior name', argumentOne, argumentTwo)\n    ;\n    
\n\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
BehaviorDescription
change(source, id, url)Changes iframe to a new content source
resetRemoves embed and shows placeholder content if available
showShows embed content
hideHides embed content and shows placeholder content
get idReturns current content id
get placeholderReturns placeholder image url
get sourcesReturns source name
get typeReturns source type
get urlReturns URL with all parameters added
has placeholderReturns whether embed content has placeholder
destroyDestroys instance and removes all events
\n\n\n  
\n\n  
\n\n    
\n      Embed Settings\n      
Settings to configure video behavior
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
iconfalseSpecifies an icon to use with placeholder content
sourcefalseSpecifies a source to use, if no source is provided it will be determined from the domain of a specified url.
urlfalseSpecifies a url to use for embed
idfalseSpecifies an id value to replace with the {id} value found in templated urls
parametersfalseSpecify an object containing key/value pairs to add to the iframes GET parameters
\n\n\n    
\n      Video Settings\n      
Settings to configure video behavior
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
autoplayautoDefault setting auto will only autoplay content when a placeholder is specified. Setting to true or false will force autoplay.
color#444444Specifies a default chrome color with Vimeo or YouTube.
urlfalseSpecifies a url to use for embed
hdtrueWhether to prefer HD content
brandedUIfalseWhether to show networks branded UI like title cards, or after video calls to action.
\n\n     
Callbacks
\n    
Callbacks specify a function to occur after a specific behavior.
\n\n    \n      \n        \n          \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n        \n      \n    
ParametersContextDescription
onCreateurl$moduleCallback when iframe is generated
onDisplay$moduleWhenever an iframe contents is shown
onPlaceholderDisplay$moduleCallback immediately before Embed is removed from DOM
onEmbedparameters$moduleCallback when module parameters are determined. Allows you to adjust parameters at run time by returning a new parameters object.
\n\n\n    
\n      DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
namespaceembedEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n            
\n            selector : {\n              embed       : '.embed',\n              placeholder : '.placeholder',\n              play        : '.play'\n            }\n            
\n          		DOM Selectors used internally
metadata\n            
\n            metadata    : {\n              id          : 'id',\n              icon        : 'icon',\n              placeholder : 'placeholder',\n              source      : 'source',\n              url         : 'url'\n            }\n            
\n          		HTML Data attributes used to store data
className\n            
\n            className : {\n              active : 'active',\n              embed  : 'embed'\n            }\n            
\n          		Class names used to attach style to state
templates\n            
\n            $.fn.embed.settings.templates = {\n              iframe: function(url, parameters) {\n                // returns html for iframe\n              },\n              placeholder: function(image, icon) {\n               // returns html for placeholder element\n              }\n            }\n            
\n          
metadata\n            
\n            metadata    : {\n              id          : 'id',\n              icon        : 'icon',\n              placeholder : 'placeholder',\n              source      : 'source',\n              url         : 'url'\n            }\n            
\n          
errors\n            
\n            error : {\n              noURL  : 'No URL specified',\n              method : 'The method you called is not defined'\n            }\n            
\n          
\n\n    
\n\n    
\n      Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
nameEmbedName used in debug logs
silentFalseSilences all console output including error messages, regardless of other debug settings.
debugFalseProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
\n\n\n  
\n\n
\n"
  },
  {
    "path": "server/documents/modules/modal.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'modal-page'\nstandalone  : true\n\nelement     : 'modal'\nelementType : 'module'\n\ntitle       : 'Modal'\ndescription : 'A modal displays content that temporarily blocks interactions with the main view of a site'\ntype        : 'UI Module'\n\nthemes      : ['Default', 'Material']\n---\n\n\n\n\n<%- @partial('header', { tabs: 'module' }) %>\n\n
\n\n  
\n    
Header
\n    
\n      Content\n      
Button
\n    
\n  
\n\n  
\n    
\n      Modal #1\n    
\n    
\n      
\n        \n      
\n      
\n        
We have more to share with you. Follow us along to modal 2
\n      
\n    
\n    
\n      
Proceed
\n    
\n  
\n  
\n    
\n      Modal #2\n    
\n    
\n      
\n        
That's everything!
\n      
\n    
\n    
\n      
\n        \n        All Done\n      
\n    
\n  
\n\n  
\n    
\n      \n      Archive Old Messages\n    
\n    
\n      
Your inbox is getting full, would you like us to enable automatic archiving of old messages?
\n    
\n    
\n      
\n        \n        No\n      
\n      
\n        \n        Yes\n      
\n    
\n  
\n  
\n    
\n      Delete Your Account\n    
\n    
\n      
Are you sure you want to delete your account
\n    
\n    
\n      
\n        No\n      
\n      
\n        Yes\n        \n      
\n    
\n  
\n\n  
\n    
\n      Delete Your Account\n    
\n    
\n      \n      \n    
\n    
\n      
\n        No\n      
\n      
\n        Yes\n        \n      
\n    
\n  
\n\n  
\n    
\n      Delete Your Account\n    
\n    
\n      
Are you sure you want to delete your account
\n    
\n    
\n      
\n        No\n      
\n      
\n        Yes\n        \n      
\n    
\n  
\n\n  
\n    
\n      Delete Your Account\n    
\n    
\n      
Are you sure you want to delete your account
\n    
\n    
\n      
\n        No\n      
\n      
\n        Yes\n        \n      
\n    
\n  
\n\n  
\n    \n    
\n      Update Your Settings\n    
\n    
\n      
\n        
Give us your feedback
\n        
\n          \n          \n        
\n        
\n          
\n            \n            \n          
\n        
\n      
\n    
\n    
\n      
Cancel
\n      
Send
\n    
\n  
\n\n  
\n    
\n      Changing Your Thing\n    
\n    
\n      
Do you want to change that thing to something else?
\n    
\n    
\n      
\n        No\n      
\n      
\n        Yes\n        \n      
\n    
\n  
\n\n  
\n    
\n      Profile Picture\n    
\n    
\n      
\n        \n      
\n      
\n        
Modal Header
\n        
This is an example of expanded content that will cause the modal's dimmer to scroll
\n        \n        
\n        \n        
\n        \n        
\n        \n        
\n        \n        
\n        \n        
\n        \n      
\n    
\n    
\n      
\n        Proceed\n        \n      
\n    
\n  
\n\n  
\n    
\n      Profile Picture\n    
\n    
\n      
\n        \n      
\n      
\n        
Modal Header
\n        
This is an example of expanded content that will cause the modal's dimmer to scroll
\n        \n        
\n        \n        
\n        \n        
\n        \n        
\n        \n        
\n        \n        
\n        \n        
\n        \n      
\n    
\n    
\n      
\n        Proceed\n        \n      
\n    
\n  
\n\n  
\n    
\n      Select a Photo\n    
\n    
\n      
\n        \n      
\n      
\n        
Default Profile Image
\n        
We've found the following gravatar image associated with your e-mail address.
\n        
Is it okay to use this photo?
\n      
\n    
\n    
\n      
\n        Nope\n      
\n      
\n        Yep, that's me\n        \n      
\n    
\n  
\n  
\n    
\n      Select a Photo\n    
\n    
\n      
\n        \n      
\n      
\n        
Default Profile Image
\n        
We've found the following gravatar image associated with your e-mail address.
\n        
Is it okay to use this photo?
\n      
\n    
\n    
\n      
\n        Nope\n      
\n      
\n        Yep, that's me\n        \n      
\n    
\n  
\n\n  
\n\n    
Types
\n\n    
\n      
Modal
\n      
A standard modal
\n      
\n      $('.ui.modal')\n        .modal('show')\n      ;\n      
\n      
\n        
\n          \n          
\n            Profile Picture\n          
\n          
\n            
\n              \n            
\n            
\n              
We've auto-chosen a profile image for you.
\n              
We've grabbed the following image from the gravatar image associated with your registered e-mail address.
\n              
Is it okay to use this photo?
\n            
\n          
\n          
\n            
\n              Nope\n            
\n            
\n              Yep, that's me\n              \n            
\n          
\n        
\n      
\n    
\n\n    
\n      
Basic
\n      
A modal can reduce its complexity
\n      
\n      $('.ui.basic.modal')\n        .modal('show')\n      ;\n      
\n      
\n        
\n          
\n            \n            Archive Old Messages\n          
\n          
\n            
Your inbox is getting full, would you like us to enable automatic archiving of old messages?
\n          
\n          
\n            
\n              \n              No\n            
\n            
\n              \n              Yes\n            
\n          
\n        
\n      
\n    
\n\n    
Content
\n\n    
\n      
\n        Header\n      
\n      
A modal can have a header
\n      
\n        
\n          
Header
\n        
\n      
\n    
\n\n    
\n      
\n        Content\n      
\n      
A modal can contain content
\n      
\n        
\n          
Header
\n          
\n            
\n            
\n            
\n          
\n        
\n      
\n    
\n\n    
\n      
\n        Image Content\n        \n          New in 2.0\n        \n      
\n      
A modal can contain image content
\n      
\n        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.\n      
\n      
\n        
\n          
Header
\n          
\n            \n            
\n              
\n            
\n          
\n        
\n      
\n    
\n\n    
\n      
\n        Actions\n      
\n      
A modal can contain a row of actions
\n      
\n        
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.
\n        
\n          approve  : '.positive, .approve, .ok',\n          deny     : '.negative, .deny, .cancel'\n        
\n      
\n      
\n        
To prevent a modal action from causing the modal to close, you can return false; from either callback.
\n      
\n      
\n        
\n          
Header
\n          
\n            
\n          
\n          
\n            
Approve
\n            
Neutral
\n            
Cancel
\n          
\n        
\n      
\n    
\n\n    
Variations
\n\n    
\n      
Full Screen
\n      
A modal can use the entire size of the screen
\n      
\n      $('.fullscreen.modal')\n        .modal('show')\n      ;\n      
\n    
\n    
\n      
Size
\n      
A modal can vary in size
\n      
\n      $('.mini.modal')\n        .modal('show')\n      ;\n      
\n      
\n      $('.tiny.modal')\n        .modal('show')\n      ;\n      
\n      
\n      $('.small.modal')\n        .modal('show')\n      ;\n      
\n      
\n      $('.large.modal')\n        .modal('show')\n      ;\n      
\n    
\n\n    
\n      
\n        Scrolling Content\n        
New in 2.2.11
\n      
\n      
A modal can use the entire size of the screen
\n      
\n        
\n          
Header
\n          
\n            
Very long content goes here
\n          
\n        
\n      
\n      
\n      $('.ui.longer.modal')\n        .modal('show')\n      ;\n      
\n    
\n\n    
States
\n\n    
\n      
Active
\n      
An active modal is visible on the page
\n      
\n        
\n      
\n    
\n  
\n\n  
\n\n    
Examples
\n\n    
\n      
\n        Disabling Vertical Centering\n        
New in 2.3
\n      
\n      
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.
\n      
\n      $('.special.modal')\n        .modal({\n          centered: false\n        })\n        .modal('show')\n      ;\n      
\n    
\n\n    
\n      
Scrolling Modal
\n      
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.
\n      
\n      $('.long.modal')\n        .modal('show')\n      ;\n      
\n    
\n\n    
\n      
Internally Scrolling Content
\n      
You may prefer to have the content of your modal scroll itself, you can do this by using the scrolling content variation.
\n      
\n      $('.longer.modal')\n        .modal('show')\n      ;\n      
\n    
\n\n    
\n      
Multiple Modals
\n      
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.
\n      
\n      // initialize all modals\n      $('.coupled.modal')\n        .modal({\n          allowMultiple: true\n        })\n      ;\n      // open second modal on first modal buttons\n      $('.second.modal')\n        .modal('attach events', '.first.modal .button')\n      ;\n      // show first immediately\n      $('.first.modal')\n        .modal('show')\n      ;\n      
\n      
\n      $('.coupled.modal')\n        .modal({\n          allowMultiple: false\n        })\n      ;\n      // attach events to buttons\n      $('.second.modal')\n        .modal('attach events', '.first.modal .button')\n      ;\n      // show first now\n      $('.first.modal')\n        .modal('show')\n      ;\n      
\n    
\n\n    
\n      
Forcing a Choice
\n      
You can disable a modal's dimmer from being closed by click to force a user to make a choice
\n      
\n      $('.basic.test.modal')\n        .modal('setting', 'closable', false)\n        .modal('show')\n      ;\n      
\n    
\n\n    
\n      
Approve / Deny Callbacks
\n      
Modals will automatically tie approve deny callbacks to any positive/approve, negative/deny or ok/cancel buttons.\n      
\n        If onDeny, onApprove or onHide returns false it will prevent the modal from closing\n      
\n      
\n      $('.ui.basic.test.modal')\n        .modal({\n          closable  : false,\n          onDeny    : function(){\n            window.alert('Wait not yet!');\n            return false;\n          },\n          onApprove : function() {\n            window.alert('Approved!');\n          }\n        })\n        .modal('show')\n      ;\n      
\n    
\n\n    
\n      
Attach events
\n      
A modal can attach events to another element
\n      
\n      $('.test.modal')\n        .modal('attach events', '.test.button', 'show')\n      ;\n      
\n      
Launch modal
\n    
\n\n    
\n      
Transitions
\n      
A modal can use any named ui transition.
\n      
\n        \n        
Choose transition
\n        \n        
\n          
Horizontal Flip
\n          
Vertical Flip
\n          
Fade Up
\n          
Fade
\n          
Scale
\n        
\n      
\n      
\n      
\n      $('.selection.dropdown')\n        .dropdown({\n          onChange: function(value) {\n            $('.test.modal')\n              .modal('setting', 'transition', value)\n              .modal('show')\n            ;\n          }\n        })\n      ;\n      
\n    
\n\n    
\n      
Dimmer Variations
\n      
Modals can specify additional variations like blurring or inverted which adjust how the dimmer displays.
\n      
Full screen blurring modals are not performant for current-gen computers at widescreen resolutions with integrated graphics.
\n      
\n      $('.ui.modal')\n        .modal({\n          inverted: true\n        })\n        .modal('show')\n      ;\n      
\n      
\n      $('.ui.modal')\n        .modal({\n          blurring: true\n        })\n        .modal('show')\n      ;\n      
\n    
\n\n  
\n\n  
\n\n    
Usage
\n\n    
Initializing a modal
\n    
A modal can be included anywhere on the page. On initialization a modal's current size will be cached, and the element will be detached from the DOM and moved inside a dimmer.
\n    
\n      
Why move modal content?
\n      
Having a modal inside the page dimmer allows for 3D animations without having the 3D perspective settings alter the rest of the page content. Additionally, content outside the dimmer can be blurred or altered without affecting the modal's content.
\n      
If you need to have your modal stay in its current location you can preserve its position using the setting detachable: false
\n    
\n    
\n      $('.ui.modal')\n        .modal()\n      ;\n    
\n    
\n      
\n        \n        
\n          Modal Title\n        
\n        
\n          
\n            An image can appear on left or an icon\n          
\n          
\n            A description can appear on the right\n          
\n        
\n        
\n          
Cancel
\n          
OK
\n        
\n      
\n    
\n\n    
Behavior
\n\n    
All the following behaviors can be called using the syntax:
\n    
\n    $('.ui.modal')\n      .modal('behavior name', argumentOne, argumentTwo)\n    ;\n    
\n\n    \n      \n        \n          \n          \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
BehaviorDescription
showShows the modal
hideHides the modal
toggleToggles the modal
refreshRefreshes centering of modal on page
show dimmerShows associated page dimmer
hide dimmerHides associated page dimmer
hide othersHides all modals not selected modal in a dimmer
hide allHides all visible modals in the same dimmer
cache sizesCaches current modal size
can fitReturns whether the modal can fit on the page
is activeReturns whether the modal is active
set activeSets modal to active
\n  
\n\n  
\n\n    
Settings
\n\n    
Modal Settings\n      
Modal settings modify the modal's behavior
\n    
\n\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
detachabletrueIf 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.
autofocustrueWhen true, the first form input inside the modal will receive focus when shown.  Set this to false to prevent this behavior.
observeChangesfalseWhether any change in modal DOM should automatically refresh cached positions
allowMultiplefalseIf set to true will not close other visible modals when opening a new one
keyboardShortcutstrueWhether to automatically bind keyboard shortcuts
offset0A vertical offset to allow for content outside of modal, for example a close button, to be centered.
context\n          body\n          Selector or jquery object specifying the area to dim
closable\n          true\n          Setting to false will not allow you to close the modal by clicking on the dimmer
dimmerSettings\n          
\n          {\n            closable : false,\n            useCSS   : true\n          }\n          
\n          		You can specify custom settings to extend UI dimmer
transition\n            scale\n          Named transition to use when animating menu in and out, full list can be found in ui transitions docs.
duration\n            400\n          Duration of animation
queue\n            false\n          Whether additional animations should queue
\n\n    
\n    
Callbacks\n      
Callbacks specify a function to occur after a specific behavior.
\n    
\n\n\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingContextDescription
onShowModalIs called when a modal starts to show.
onVisibleModalIs called after a modal has finished showing animating.
onHide($element)ModalIs called after a modal starts to hide. If the function returns false, the modal will not hide.
onHiddenModalIs called after a modal has finished hiding animation.
onApprove($element)ClickIs called after a positive, approve or ok button is pressed. If the function returns false, the modal will not hide.
onDeny($element)ModalIs called after a negative, deny or cancel button is pressed. If the function returns false the modal will not hide.
\n\n    
DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n\n    \n      \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
namespacemodalEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n            
\n      selector    : {\n        close    : '.close, .actions .button',\n        approve  : '.actions .positive, .actions .approve, .actions .ok',\n        deny     : '.actions .negative, .actions .deny, .actions .cancel'\n      },\n            
\n          
className\n            
\n      className : {\n        active    : 'active',\n        scrolling : 'scrolling'\n      }\n            
\n          
\n\n    
Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
nameModalName used in debug logs
debugFalseProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
error\n            
\n      error   : {\n        method    : 'The method you called is not defined.'\n      }\n            
\n          
\n  
\n\n
\n"
  },
  {
    "path": "server/documents/modules/nag.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : ''\nelement     : 'nag'\nelementType : 'module'\nstandalone  : true\n\ntitle       : 'Nag'\ndescription : 'A nag is an important message that persists until dismissed by a user'\ntype        : 'Future Module'\n\n---\n\n<%- @partial('header') %>\n\n
\n\n  
\n\n    
Current Progress
\n    
\n      
\n        
60%
\n      
\n      
Needs Documentation / Re-coding
\n    
\n\n    
Usage
\n    
\n      
\n      
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.
\n      
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.
\n    
\n\n    
Example
\n\n    
\n    // Wont re-appear unless cleared\n    $('.cookie.nag')\n      .nag('show')\n    ;\n    
\n    
\n    // Clears cookie so nag shows again\n    $('.cookie.nag')\n      .nag('clear')\n    ;\n    
\n    
\n      
\n        \n          We use cookies to ensure you get the best experience on our website\n        \n        \n      
\n    
\n    
\n    // Automatically shows on init if cookie isnt set\n    $('.cookie.nag')\n      .nag({\n        key      : 'accepts-cookies',\n        value    : true\n      })\n    ;\n    
\n\n    
Support Development
\n    
\n\n      
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.
\n\n      
Please be sure to leave a note in the comments to indicate that you are interested in the development of this particular component.
\n\n    
\n\n  
\n\n
\n"
  },
  {
    "path": "server/documents/modules/popup.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'popup'\nstandalone  : true\n\nelement     : 'popup'\nelementType : 'module'\n\ntitle       : 'Popup'\ndescription : 'A popup displays additional information on top of a page'\ntype        : 'UI Module'\n\nthemes      : ['Default']\n---\n\n\n\n<%- @partial('header', { tabs: 'module' }) %>\n
\n\n  
\n\n    
\n      Types\n    
\n\n    
Javascript
\n\n    
\n      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.\n    
\n\n    
\n      
Popup
\n      
An element can specify popup content to appear
\n      
\n        \n      
\n    
\n\n    
\n      
Titled
\n      
An element can specify popup content with a title
\n      \n      \n      \n    
\n\n    
\n      
HTML
\n      
An element can specify HTML for a popup
\n\n      
User Rating
\">\n        
\n          \n        
\n        
\n          
My Neighbor Totoro
\n          
\n            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.\n          
\n        
\n        
\n          
\n            \n            Queue\n          
\n          
\n            \n            Watch\n          
\n        
\n      
\n    
\n\n    
\n      
Pre-Existing
\n      
An element can display a popup that is already included in the page
\n\n      
\n        
\n          \n        
\n        
\n          
Watchmen
\n          
\n            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.\n          
\n        
\n        
\n          
\n            \n            Queue\n          
\n          
\n            \n            Watch\n          
\n        
\n      
\n      
\n        
User Rating
\n        
\n      
\n    
\n\n    
No Javascript
\n\n    
\n      
Tooltip\n        
New in 2.2
\n      
\n      
An element can specify a simple tooltip that can appear without javascript
\n      
\n        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.\n      
\n      
\n        \n      
\n      
\n        \n      
\n    
\n    
\n      
\n        Top Left\n      
\n      
\n        Top Center\n      
\n      
\n        Top Right\n      
\n      
\n      
\n        Bottom Left\n      
\n      
\n        Bottom Center\n      
\n      
\n        Bottom Right\n      
\n      
\n      
\n        Right Center\n      
\n      
\n        Left Center\n      
\n    
\n    
\n      
\n        Top Left\n      
\n      
\n        Top Center\n      
\n      
\n        Top Right\n      
\n      
\n      
\n        Bottom Left\n      
\n      
\n        Bottom Center\n      
\n      
\n        Bottom Right\n      
\n      
\n      
\n        Right Center\n      
\n      
\n        Left Center\n      
\n    
\n\n\n    
Variations
\n\n    
\n      
Basic
\n      
A popup can provide more basic formatting
\n      
\n        \n      
\n    
\n\n    
\n      
Width
\n      
A popup can be extra wide to allow for longer content
\n      \n      \n    
\n\n    
\n      
Fluid
\n      
A fluid popup will take up the entire width of its offset container
\n      
Show fluid popup
\n      
\n        
\n          
1
\n          
2
\n          
3
\n          
4
\n        
\n      
\n    
\n\n    
\n      
Size
\n      
A popup can vary in size
\n      \n      \n      \n      \n      \n    
\n\n    
\n      
Flowing
\n      
A popup can have no maximum width and continue to flow to fit its content
\n      
Show flowing popup
\n      
\n        
\n          
\n            
Basic Plan
\n            
2 projects, $10 a month
\n            
Choose
\n          
\n          
\n            
Business Plan
\n            
5 projects, $20 a month
\n            
Choose
\n          
\n          
\n            
Premium Plan
\n            
8 projects, $25 a month
\n            
Choose
\n          
\n        
\n      
\n    
\n\n    
\n      
Inverted
\n      
A popup can have its colors inverted
\n      \n      
\n        \n      
\n    
\n  
\n\n  
\n\n    
Usage
\n\n    
\n      
Initializing A Popup
\n      
A popup is initialized on an activating element
\n      
\n      $('.activating.element')\n        .popup()\n      ;\n      
\n    
\n\n    
\n      
Using a Pre-existing Popup
\n      
Using a pre-existing popup allows for you to include complex HTML inside your popup.
\n      
If you include your popup on page load as an adjacent sibling element to your activating element it can be found automatically.
\n      
To instruct popup to look inline for your popup element you can initialize it with the inline parameter
\n      
\n        $('.button')\n          .popup({\n            inline: true\n          })\n        ;\n      
\n      
\n        
Activator
\n        
\n          
Custom Header
\n          
Click Me
\n        
\n      
\n    
\n    
\n      
Using a Pre-existing Popup Anywhere
\n      
If you cannot include your popup element as a sibling element, you can specify a custom selector to retrieve your popup
\n      
\n        $('.button')\n          .popup({\n            popup: '.special.popup'\n          })\n        ;\n      
\n    
\n\n    
\n      
Specifying Content In Metadata
\n      
Frequently used settings like, title, content, HTML, or offset or variation, can be included in HTML metadata
\n      
\n        \n        
\n          
Specifying Content
\n          
Popups can specify content in three ways:
\n          
    \n            
  • Using HTML title attribute
    • \n            
  • Using data-content attribute
    • \n            
  • Using data-html for specific HTML
    • \n            
  • Using the content property in the initialization of the popup
    • \n          
\n          
Popups can also specify some other frequently used settings using metadata
\n          
    \n            
  • data-variation: the popup variation to use 
    • \n            
  • data-offset: a pixel offset correction for popup
    • \n            
  • data-position: the side to position popup on
    • \n          
\n        
\n      
\n      
\n        \n      
\n    
\n    
\n      
Specifying Content In Javascript
\n      
\n      $('.ui.popup')\n        .popup({\n          title   : 'Popup Title',\n          content : 'Hello I am a popup'\n        })\n      ;\n      
\n    
\n\n    
Behavior
\n\n    
All the following behaviors can be called using the syntax:
\n    
\n    $('.your.element')\n      .popup('behavior name', argumentOne, argumentTwo)\n    ;\n    
\n\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
BehaviorDescription
showShows popup
hideHides popup
hide allHides all visible pop ups on the page
get popupReturns current popup dom element
change content(html)Changes current popup content
toggleToggles visibility of popup
is visibleReturns whether popup is visible
is hiddenReturns whether popup is hidden
existsReturns whether popup is created and inserted into the page
repositionAdjusts popup when content size changes (only necessary for centered popups)
set position(position)Repositions a popup
destroyRemoves popup from the page and removes all events
remove popupRemoves popup from the page
\n\n  
\n\n\n  
\n\n    
Examples
\n\n    
\n      
Specifying Popup Boundaries\n        
New in 2.2
\n      
\n      
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
\n      
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.
\n      
\n        $('.boundary.example .button')\n          .popup({\n            boundary: '.boundary.example .segment'\n          })\n        ;\n      
\n\n      
\n        
Hover Me
\n        
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
\n      
\n    
\n\n    
\n      
Wide Popup Menu
\n      
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.
\n      
Using the setting inline: true will let Semantic know to display the next sibling ui  popup element after the activator.
\n\n      
Tweaking settings like the delay for show, and hide, and making the menu hoverable will help it function   more like a dropdown menu
\n\n      
\n      $('.example .menu .browse')\n        .popup({\n          inline     : true,\n          hoverable  : true,\n          position   : 'bottom left',\n          delay: {\n            show: 300,\n            hide: 800\n          }\n        })\n      ;\n      
\n      
\n        \n          Browse\n          \n        \n        
\n          
\n            
\n              
Fabrics
\n              
\n                Cashmere\n                Linen\n                Cotton\n                Viscose\n              
\n            
\n            
\n              
Size
\n              
\n                Small\n                Medium\n                Large\n                Plus Sizes\n              
\n            
\n            
\n              
Colors
\n              
\n                Neutrals\n                Brights\n                Pastels\n              
\n            
\n            
\n              
Types
\n              
\n                Knitwear\n                Outerwear\n                Pants\n                Shoes\n              
\n            
\n          
\n        
\n        \n          \n          Checkout\n        \n      
\n\n    
\n\n    
\n      
Specifying a selector for a popup
\n      
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.
\n      
\n        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.\n      
\n      
\n      $('.example .custom.button')\n        .popup({\n          popup : $('.custom.popup'),\n          on    : 'click'\n        })\n      ;\n      
\n      
\n        
Show custom popup
\n      
\n      
\n        I'm not on the same level as the button, but i can still be found.\n      
\n    
\n\n\n    
\n      
Specifying a trigger event
\n      
A popup trigger event can be specified
\n      
\n    $('.example .teal.button')\n      .popup({\n        on: 'click'\n      })\n    ;\n    $('.example input')\n      .popup({\n        on: 'focus'\n      })\n    ;\n      
\n      
Click Me
\n      
\n        \n        \n      
\n    
\n\n    
\n      
Target Element
\n      
A popup can specify a different target element than itself to show a popup
\n      
\n      $('.test.button')\n        .popup({\n          position : 'right center',\n          target   : '.test.image',\n          title    : 'My favorite dog',\n          content  : 'My favorite dog would like other dogs as much as themselves'\n        })\n      ;\n      
\n      
Hover Me
\n      
\n      \n    
\n    
\n      
Inline or relative to page
\n      
A popup can either be inserted directly after an element, or added as a child element to the page's body.
\n      
\n        Using inline will allow your popups to go places other popups can't go, like inside fixed or absolutely positioned elements\n      
\n      
\n        If you want to style each popup individually it makes sense to keep popup inline: true. If you are worried that your pop up might mistakingly inherit styles that it shouldn't, you should set inline: false.\n      
\n      
\n      /* this will only style the popup if inline is true */\n      .example .popup {\n        color: #FF0000;\n      }\n      
\n      
\n      $('.inline.icon')\n        .popup({\n          inline: true\n        })\n      ;\n      
\n      \n      \n\n    
\n    
\n      
Positioning
\n      
A popup can be positioned to any side of an element. If space is not available, it will automatically search for a similar alternative position to use.
\n      
\n        \n        \n        \n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Specifying an offset
\n      
A popup position can be adjusted manually by specifying an offset property using data-offset=\"value\"
\n\n      \n    
\n\n\n    
\n      
Transitions
\n      
A popup can use any named ui transition.
\n       Home\n\n      
\n\n      
\n        \n        \n        
Choose a transition
\n        
\n          
Horizontal Flip
\n          
Vertical Flip
\n          
Fade Up
\n          
Fade
\n          
Scale
\n        
\n      
\n      
\n      
\n    $('.selection')\n      .dropdown({\n        onChange: function(value) {\n          $('.demo.icon')\n            .popup({\n              transition: value\n            })\n            .popup('toggle')\n          ;\n        }\n      })\n    ;\n      
\n    
\n  
\n\n  
\n\n    
\n      Popup Settings\n      
Settings to configure popup behavior
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
popupfalseCan specify a DOM element that should be used as the popup. This is useful for including a pre-formatted popup.
exclusivefalseWhether all other popups should be hidden when this popup is opened
movePopuptrueWhether 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
observeChangestrueWhether popup should attach mutationObservers to automatically run destroy when the element is removed from the page's DOM.
boundarywindowWhen the popup surpasses the boundary of this element, it will attempt to find another display position.
contextbodySelector or jquery object specifying where the popup should be created.
scrollContextwindowWill automatically hide a popup on scroll event in this context
jitter2Number 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.
positiontop leftPosition that the popup should appear
inlinefalseIf a popup is inline it will be created next to current element, allowing for local css rules to apply. It will not be removed from the DOM after being hidden. Otherwise popups will appended to body and removed after being hidden.
preservefalseWhether popup contents should be preserved in the page after being hidden, allowing it to re-appear slightly faster on subsequent loads.
preferadjacentCan be set to adjacent or opposite to prefer adjacent or opposite position if popup cannot fit on screen
lastResortfalseWhen 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.
onhoverEvent used to trigger popup. Can be either focus, click, hover, or manual. Manual popups must be triggered with $('.element').popup('show');
delay\n            
\n    delay: {\n      show: 50,\n      hide: 0\n    }\n            
\n          		Delay in milliseconds before showing or hiding a popup on hover or focus
transition\n            slide down\n          Named transition to use when animating menu in and out.
duration\n            200\n          Duration of animation events
arrowPixelsFromEdge 
New in 2.3
20When 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.
setFluidWidthtrueWhether popup should set fluid popup variation width on load to avoid width: 100% including padding
hoverablefalseWhether popup should not close on hover (useful for popup navigation menus)
closabletrueWhen using on: 'click' specifies whether clicking the page should close the popup
addTouchEventstrueWhen using on: 'hover' whether touchstart events should be added to allow the popup to be triggered
hideOnScrollautoWhether popup should hide on scroll or touchmove, auto only hides for popups without on: 'click'.
\n          Set this to false to prevent mobile browsers from closing popups when you tap inside input fields.
targetfalseIf a selector or jQuery object is specified this allows the popup to be positioned relative to that element.
distanceAway0Offset for distance of popup from element
offset0Offset in pixels from calculated position
maxSearchDepth10Number of iterations before giving up search for popup position when a popup cannot fit on screen
\n\n     
Callbacks
\n    
Callbacks specify a function to occur after a specific behavior.
\n\n    \n      \n        \n          \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n        \n      \n    
ParametersContextDescription
onCreate$module$popupCallback on popup element creation, with created popup
onRemove$module$popupCallback immediately before Popup is removed from DOM
onShow$module$popupCallback before popup is shown. Returning false from this callback will cancel the popup from showing.
onVisible$module$popupCallback after popup is shown
onHide$module$popupCallback before popup is hidden. Returning false from this callback will cancel the popup from hiding.
onHidden$module$popupCallback after popup is hidden
onUnplaceable$module$popupCallback after popup cannot be placed on screen
\n\n    
\n      Content Settings\n      
Settings to specify popup contents
\n    
\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDescription
variationPopup variation to use, can use multiple variations with a space delimiter
contentContent to display
titleTitle to display alongside content
htmlHTML content to display instead of preformatted title and content
\n\n    
\n      DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
namespacepopupEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n            
\n    selector    : {\n      popup    : '.ui.popup'\n    }\n            
\n          		DOM Selectors used internally
metadata\n            
\n    metadata: {\n      content   : 'content',\n      html      : 'html',\n      offset    : 'offset',\n      position  : 'position',\n      title     : 'title',\n      variation : 'variation'\n    }\n            
\n          		HTML Data attributes used to store data
className\n            
\n    className   : {\n      loading     : 'loading',\n      popup       : 'ui popup',\n      position    : 'top left center bottom right',\n      visible     : 'visible'\n    }\n            
\n          		Class names used to attach style to state
\n\n    
\n\n    
\n      Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
namePopupName used in debug logs
silentfalseSilences all console output including error messages, regardless of other debug settings.
debugfalseProvides standard debug output to console
performancetrueProvides standard debug output to console
verbosetrueProvides ancillary debug output to console
errors\n            
\n            error: {\n              invalidPosition : 'The position you specified is not a valid position',\n              cannotPlace     : 'Popup does not fit within the boundaries of the viewport',\n              method          : 'The method you called is not defined.',\n              noTransition    : 'This module requires ui transitions ',\n              notFound        : 'The target or popup you specified does not exist on the page'\n            }\n            
\n          
\n\n  
\n\n
\n"
  },
  {
    "path": "server/documents/modules/progress.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'progress'\nstandalone  : true\n\nelement     : 'progress'\nelementType : 'module'\n\ntitle       : 'Progress'\ndescription : 'A progress bar shows the progression of a task'\ntype        : 'UI Module'\n\nthemes      : ['Default', 'Classic', 'Basic', 'Striped']\n---\n\n\n\n<%- @partial('header', { tabs: 'module' }) %>\n\n
\n\n  
\n\n    
Types
\n\n    
\n      
Standard
\n      
A standard progress bar
\n      
\n        
\n          
\n        
\n        
Uploading Files
\n      
\n      
\n        
\n          
\n          
\n        
\n      
\n    
\n    
\n      
Indicating
\n      
An indicating progress bar visually indicates the current level of progress of a task
\n      
\n        
\n        
Funding
\n      
\n      
\n        
\n          
\n          
\n        
\n      
\n    
\n\n    
Content
\n\n    
\n      
Bar
\n      
A progress element can contain a bar visually indicating progress
\n      
\n        
\n      
\n    
\n\n    
\n      
Progress
\n      
A progress bar can contain a text value indicating current progress
\n      
\n        
\n          
\n        
\n      
\n    
\n\n    
\n      
Label
\n      
A progress element can contain a label
\n      
\n        
\n          
\n        
\n        
Uploading Files
\n      
\n    
\n\n    
States
\n\n    
\n      
Active
\n      
A progress bar can show activity
\n      
\n        
\n          
\n        
\n        
Uploading Files
\n      
\n    
\n\n\n    
\n    
Success
\n    
A progress bar can show a success state
\n      
\n        
\n          
\n        
\n        
Everything worked, your file is all ready.
\n      
\n    
\n\n    
\n    
Warning
\n    
A progress bar can show a warning state
\n      
\n        
\n          
\n        
\n        
Your file didn't meet the minimum resolution requirements.
\n      
\n    
\n\n    
\n    
Error
\n    
A progress bar can show an error state
\n      
\n        
\n          
\n        
\n        
There was an error.
\n      
\n    
\n\n    
\n    
Disabled
\n    
A progress bar can be disabled
\n      
\n        
\n      
\n    
\n\n    
Variations
\n\n    
\n      
Inverted
\n      
A progress bar can have its colors inverted
\n      
\n        
\n          
\n            
\n          
\n          
Uploading Files
\n        
\n        
\n          
\n            
\n          
\n          
Success
\n        
\n        
\n          
\n            
\n          
\n          
Warning
\n        
\n        
\n          
\n            
\n          
\n          
Error
\n        
\n      
\n      
\n        
\n          
\n        
\n      
\n    
\n\n    
\n      
Attached
\n      
A progress bar can show progress of an element
\n      
\n        
\n          
\n        
\n        
La la la la
\n        
\n          
\n        
\n      
\n      
\n        
\n          
\n          
\n        
\n      
\n    
\n\n    
\n      
\n        
\n          \n        
\n        
\n          Project\n          
\n            Started in 2014\n          
\n        
\n        
\n          \n            \n            22 Friends\n          \n        
\n        
\n          
\n        
\n      
\n      
\n        
\n          
\n          
\n        
\n      
\n    
\n\n    
\n      
Size
\n      
A progress bar can vary in size
\n      
\n        Some small sizes may not be able to fit an inlined label\n      
\n      
\n        
\n        
Tiny
\n      
\n      
\n        
\n        
Small
\n      
\n      
\n        
\n        
Standard
\n      
\n      
\n        
\n        
Large
\n      
\n      
\n        
\n        
Big
\n      
\n      
\n        
\n          
\n          
\n        
\n      
\n    
\n\n    
\n      
Color
\n      
Can have different colors:
\n      
\n        
\n      
\n      
\n        
\n      
\n      
\n        
\n      
\n      
\n        
\n      
\n      
\n        
\n      
\n      
\n        
\n      
\n      
\n        
\n      
\n      
\n        
\n      
\n      
\n        
\n      
\n      
\n        
\n      
\n      
\n        
\n      
\n      
\n        
\n      
\n      
\n        
\n      
\n      
\n        
\n          
\n          
\n        
\n      
\n    
\n    
\n      
Inverted Color
\n      
These colors can also be inverted for improved contrast on dark backgrounds
\n      
\n        
\n          
\n            
\n          
\n        
\n        
\n          
\n            
\n          
\n        
\n        
\n          
\n            
\n          
\n        
\n        
\n          
\n            
\n          
\n        
\n        
\n          
\n            
\n          
\n        
\n        
\n          
\n            
\n          
\n        
\n        
\n          
\n            
\n          
\n        
\n        
\n          
\n            
\n          
\n        
\n        
\n          
\n            
\n          
\n        
\n        
\n          
\n            
\n          
\n        
\n        
\n          
\n            
\n          
\n        
\n        
\n          
\n            
\n          
\n        
\n        
\n          
\n            
\n          
\n        
\n        
\n          
\n            
\n            
\n          
\n        
\n      
\n    
\n\n  
\n\n  
\n\n    
Initializing a progress bar
\n\n    
\n      
With metadata
\n      
A progress bar can be initialized with metadata
\n      
\n        $('#example1').progress();\n      
\n      
\n        
\n          
\n          
74% Funded
\n        
\n      
\n    
\n    
\n      
With Javascript
\n      
A progress bar can be initialized with a Javascript settings object
\n      
\n        $('#example2').progress({\n          percent: 22\n        });\n      
\n      
\n        
\n          
\n          
22% Earned
\n        
\n      
\n    
\n\n    
Task Completion Percent
\n\n    
\n      
Adding a Total Value
\n      
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.
\n      
Each call to increment will increase the value by 1, or the value specified as the second parameter
\n      
\n        $('#example3')\n          .progress('increment')\n        ;\n      
\n      
\n        
\n          
\n            
\n          
\n          
Adding Photos
\n        
\n      
\n      
\n        $('#example3')\n          .progress({\n            total: 3\n          })\n        ;\n      
\n    
\n\n    
\n      
Initializing with Metadata
\n      
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.
\n      
Each call to increment will increase the value by 1, or the value specified as the second parameter
\n      
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
\n      
\n        $('#example4')\n          .progress('increment')\n        ;\n      
\n      
\n        
\n          
\n            
\n          
\n          
Adding Photos
\n        
\n      
\n    
\n\n    
\n      
Adding Custom Labels
\n      
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
\n      
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
\n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      
{percent}Current percentage
{value}Current value
{total}Total value
{left}Distance to total, or % progress left
\n      
\n        $('#example5')\n          .progress('increment')\n        ;\n      
\n      
\n        
\n          
\n          
Adding Photos
\n        
\n      
\n      
\n        $('#example5')\n          .progress({\n            text: {\n              active  : 'Adding {value} of {total} photos',\n              success : '{total} Photos Uploaded!'\n            }\n          })\n        ;\n      
\n    
\n\n    
\n      
Translation
\n      
You can also adjust text labels to help strings appear translated
\n      
\n        $('#example6')\n          .progress('increment')\n        ;\n      
\n      
\n        
\n          
\n            
\n          
\n          
Carga de archivos
\n        
\n      
\n      
\n        $('#example6')\n          .progress({\n            label: 'ratio',\n            text: {\n              ratio: '{value} de {total}'\n            }\n          })\n        ;\n      
\n    
\n\n\n    
Behavior
\n\n    
All the following behaviors can be called using the syntax:
\n    
\n    $('.your.element')\n      .progress('behavior name', argumentOne, argumentTwo)\n    ;\n    
\n\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
BehaviorDescription
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
completeFinishes progress and sets loaded to 100%
resetResets 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 percentReturns percent as last specified
get valueReturns current progress value
get totalReturns total
is completeReturns whether progress is completed
is successReturns whether progress was a success
is warningReturns whether progress is in warning state
is errorReturns whether progress is in error state
is activeReturns whether progress is in active state
set activeSets progress to active state
set warningSets progress to warning state
set successSets progress to success state
set errorSets 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 activeRemoves progress to active state
remove warningRemoves progress to warning state
remove successRemoves progress to success state
remove errorRemoves progress to error state
\n\n\n  
\n  
\n\n    
Examples
\n\n    
\n      
Frequently Updated Progress
\n      
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.
\n      \n        Rapidly Update\n      \n      
\n        
\n          
\n            
\n          
\n          
Waiting for you to press button
\n        
\n      
\n      
\n        $('.rapid.example .ui.button')\n          .on('click', function() {\n            var\n              $progress       = $('.rapid.example .ui.progress'),\n              $button         = $(this),\n              updateEvent\n            ;\n            // restart to zero\n            clearInterval(window.fakeProgress)\n            $progress.progress('reset');\n\n            // updates every 10ms until complete\n            window.fakeProgress = setInterval(function() {\n              $progress.progress('increment');\n              $button.text( $progress.progress('get value') );\n              // stop incrementing when complete\n              if($progress.progress('is complete')) {\n                clearInterval(window.fakeProgress)\n              }\n            }, 10);\n          })\n        ;\n        $('.rapid.example .ui.progress')\n          .progress({\n            duration : 200,\n            total    : 200,\n            text     : {\n              active: '{value} of {total} done'\n            }\n          })\n        ;\n      
\n    
\n\n\n  
\n\n  
\n\n    
\n      Progress Settings\n      
Form settings modify the tab behavior
\n    
\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
autoSuccesstrueWhether success state should automatically trigger when progress completes
showActivitytrueWhether progress should automatically show activity when incremented
limitValuestrueWhen 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.
labelpercentCan be set to either to display progress as percent or ratio. Matches up to corresponding text template with the same name.
random\n          
\n            className : {\n              active  : 'active',\n              error   : 'error',\n              success : 'success',\n              warning : 'warning'\n            }\n          
\n          		When incrementing without value, sets range for random increment value
precision1Decimal point precision for calculated progress
totalfalseSetting a total value will make each call to increment get closer to this total (i.e. 1/20, 2/20 etc)
valuefalseSets current value, when total is specified, this is used to calculate a ratio of the total, with percent this should be the overall percent
\n\n    
\n    
Callbacks
\n    
Callbacks specify a function to occur after a specific behavior.
\n\n    \n      \n        \n          \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n        \n      \n    
ParametersContextDescription
onChangepercent, value, totalProgressCallback on percentage change
onSuccesstotalProgressCallback on success state
onActivevalue, totalProgressCallback on active state
onErrorvalue, totalProgressCallback on error state
onWarningvalue, totalProgressCallback on warning state
\n\n    
\n\n    
\n      DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
namespaceprogressEvent namespace. Makes sure module teardown does not effect other events attached to an element.
text\n            
\n            text : {\n              active  : false,\n              error   : false,\n              success : false,\n              warning : false,\n              percent : '{percent}%',\n              ratio   : '{value} of {total}'\n            }\n            
\n          		Text content for each state, uses simple templating with {percent}, {value}, {total}
regExp\n            
\n            regExp: {\n              variable: /\\{\\$*[A-z0-9]+\\}/g\n            }\n            
\n          		Regular expressions used by module
selector\n            
\n            selector : {\n              bar      : '> .bar',\n              label    : '> .label',\n              progress : '.bar > .progress'\n            }\n            
\n          		Selectors used by module
metadata\n            
\n            metadata: {\n              percent : 'percent',\n              total   : 'total',\n              value   : 'value'\n            }\n            
\n          		DOM metadata used by module
className\n            
\n            className : {\n              active  : 'active',\n              error   : 'error',\n              success : 'success',\n              warning : 'warning'\n            }\n            
\n          		Class names used to attach style to state
\n\n    
\n\n    
\n      Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
nameProgressName used in debug logs
silentFalseSilences all console output including error messages, regardless of other debug settings.
debugFalseProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
errors\n            
\n            error    : {\n              method     : 'The method you called is not defined.',\n              nonNumeric : 'Progress value is non numeric'\n            }\n            
\n          
\n  
\n\n
\n"
  },
  {
    "path": "server/documents/modules/rating.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'rating'\nstandalone  : true\n\nelement     : 'rating'\nelementType : 'module'\n\ntitle       : 'Rating'\ndescription : 'A rating indicates user interest in content'\ntype        : 'UI Module'\n\nthemes      : ['Default']\n---\n\n<%- @partial('header', { tabs: 'module' }) %>\n\n\n\n\n
\n\n  
\n\n    
Types
\n\n    
\n      
Rating\n        Flexbox\n      
\n      
A basic rating 
\n      
\n    
\n\n    
\n      
Star
\n      
A rating can use a set of star icons
\n\n      Rating\n      
\n    
\n\n    
\n      
Heart
\n      
A rating can use a set of heart icons
\n      
\n    
\n\n    
Variations
\n\n    
\n      
Size
\n      
A rating can vary in size
\n      
\n      

\n      
\n      

\n      
\n      

\n      
\n      

\n      
\n      

\n      
\n      

\n      
\n    
\n  
\n\n  
\n\n    
Examples
\n\n    
\n      
Setting existing values
\n      
The starting rating can be set either using metadata value data-rating or the setting initialRating.\n      
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. 
\n      
If a metadata rating is specified it will automatically override the default value specified in Javascript.
\n      
\n      $('.toggle.example .rating')\n        .rating({\n          initialRating: 2,\n          maxRating: 4\n        })\n      ;\n      
\n      
\n        
\n          \n          
\n            
\n              New York Dog Fair\n              
\n            
\n            A fun day at the fair\n          
\n        
\n        
\n          \n          
\n            
\n              Dog Appreciation Day\n              
\n            
\n            I'd like to tell your dog he's great\n          
\n        
\n      
\n    
\n\n    
\n      
Read-Only Ratings
\n      
You can disable or enable interactive rating
\n      
\n      $('.toggle.example .rating')\n        .rating('disable')\n      ;\n      
\n      
\n      $('.toggle.example .rating')\n        .rating('enable')\n      ;\n      
\n      
\n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Clearing Ratings
\n      
When clearable is set to true you can clear the rating by clicking on the current start rating.
\n      
\n      $('.clearing.example .rating')\n        .rating('setting', 'clearable', true)\n      ;\n      
\n      
\n        \n        \n        \n        \n        \n      
\n    
\n  
\n\n  
\n\n    
Initializing
\n\n    
\n      
Metadata
\n      
You can specify the starting rating, and max rating in metadata.\n      
\n        $('.ui.rating')\n          .rating()\n        ;\n      
\n      
\n        
\n      
\n    
\n\n    
\n      
Javascript
\n      
You can specify the rating values in Javascript
\n      
\n        $('.ui.rating')\n          .rating({\n            initialRating: 3,\n            maxRating: 5\n          })\n        ;\n      
\n      
\n        
\n      
\n    
\n\n    
Behaviors
\n\n    
All the following behaviors can be called using the syntax:
\n    
\n    $('.ui.rating')\n      .rating('behavior name', argumentOne, argumentTwo)\n    ;\n    
\n\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
BehaviorDescription
set rating(rating)Sets rating programmatically
get ratingGets current rating
disableDisables interactive rating mode
enableEnables interactive rating mode
clear ratingClears current rating
\n  
\n\n  
\n    
\n      Rating Settings\n      
Rating settings modify the rating's behavior
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
initialRating0A number representing the default rating to apply
fireOnInitfalseWhether callbacks like onRate should fire immediately after initializing with the current value.
clearableautoBy 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
interactivetrueWhether to enable user's ability to rate
\n\n    
\n      Callbacks\n      
Callbacks specify a function to occur after a specific behavior.
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n      \n    
SettingContextDescription
onRate(value)RatingIs called after user selects a new rating
\n\n    
\n      DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
namespaceratingEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n            
\n      selector  : {\n        icon : '.icon'\n      }\n            
\n          
className\n            
\n      className : {\n        active     : 'active',\n        hover      : 'hover',\n        loading    : 'loading'\n      },\n            
\n          
\n\n\n    
\n      Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
nameRatingName used in debug logs
silentFalseSilences all console output including error messages, regardless of other debug settings.
debugFalseProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
error\n            
\n      error   : {\n        action    : 'You called a rating action that was not defined'\n      }\n            
\n          
\n  
\n\n
\n"
  },
  {
    "path": "server/documents/modules/search.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : ''\nelement     : 'search'\nelementType : 'module'\nstandalone  : true\n\ntitle       : 'Search'\ndescription : 'A search module allows a user to query for results from a selection of data'\ntype        : 'UI Module'\n---\n\n\n\n\n<%- @partial('header', { tabs: { definition: 'Definition', examples: 'Examples', usage: 'Usage', settings: 'Settings'} }) %>\n\n
\n\n  
\n\n    
Types
\n\n    
\n      
Standard
\n      
A search can display a set of results
\n      
\n        \n        
\n      
\n    
\n\n    
\n      
\n        Using a ui input allows you to use additional input types, like this icon input\n      
\n      
\n        
\n          \n          \n        
\n        
\n      
\n    
\n\n\n    
\n      
Category
\n      
A search can display results from remote content ordered by categories
\n      
\n        
\n          \n          \n        
\n        
\n      
\n    
\n\n\n    
\n      
Local Search
\n      
A search can look for results inside a static local source.
\n      
\n        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.\n      
\n      
\n        
\n          \n          \n        
\n        
\n      
\n      
\n        $('.ui.search')\n          .search({\n            source: content\n          })\n        ;\n      
\n      
\n      var content = [\n        { title: 'Andorra' },\n        { title: 'United Arab Emirates' },\n        { title: 'Afghanistan' },\n        { title: 'Antigua' },\n        { title: 'Anguilla' },\n        { title: 'Albania' },\n        { title: 'Armenia' },\n        { title: 'Netherlands Antilles' },\n        { title: 'Angola' },\n        { title: 'Argentina' },\n        { title: 'American Samoa' },\n        { title: 'Austria' },\n        { title: 'Australia' },\n        { title: 'Aruba' },\n        { title: 'Aland Islands' },\n        { title: 'Azerbaijan' },\n        { title: 'Bosnia' },\n        { title: 'Barbados' },\n        { title: 'Bangladesh' },\n        { title: 'Belgium' },\n        { title: 'Burkina Faso' },\n        { title: 'Bulgaria' },\n        { title: 'Bahrain' },\n        { title: 'Burundi' }\n        // etc\n      ];\n      
\n    
\n\n\n    
\n      
\n        Local Category Search\n        
New in 2.3
\n      
\n      
A search can look for category results inside a static local source.
\n      
\n        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.\n      
\n      
\n        
\n          \n          \n        
\n        
\n      
\n      
\n        $('.ui.search')\n          .search({\n            type: 'category',\n            source: categoryContent\n          })\n        ;\n      
\n      
\n      var categoryContent = [\n        { category: 'South America', title: 'Brazil' },\n        { category: 'South America', title: 'Peru' },\n        { category: 'North America', title: 'Canada' },\n        { category: 'Asia', title: 'South Korea' },\n        { category: 'Asia', title: 'Japan' },\n        { category: 'Asia', title: 'China' },\n        { category: 'Europe', title: 'Denmark' },\n        { category: 'Europe', title: 'England' },\n        { category: 'Europe', title: 'France' },\n        { category: 'Europe', title: 'Germany' },\n        { category: 'Africa', title: 'Ethiopia' },\n        { category: 'Africa', title: 'Nigeria' },\n        { category: 'Africa', title: 'Zimbabwe' },\n      ];\n      
\n    
\n\n    \n\n    
States
\n    
\n      
Loading
\n      
A search can show a loading indicator
\n      
\n        
\n          \n          \n        
\n        
\n      
\n    
\n\n    
Variations
\n\n    
\n      
\n        Disabled\n        
New in 2.3.1
\n      
\n      
A search can show it is currently unable to be interacted with
\n      
\n        
\n          \n          \n        
\n        
\n      
\n    
\n\n    
\n      
Fluid
\n      
A search can have its results take up the width of its container
\n      
\n        
\n          \n          \n        
\n        
\n      
\n    
\n\n    
\n      
Aligned
\n      
A search can have its results aligned to its left or right container edge
\n      
\n        
\n          \n          \n        
\n        
\n      
\n    
\n\n  
\n\n  
\n\n    
Initializing
\n\n    
\n      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.\n    
\n\n    
Automatic Routing
\n    
By default search will automatically route to the named API endpoint 'search'
\n    
\n      // initializes with default endpoint /search/{query}\n      $('.ui.search')\n        .search({\n          type: 'category'\n        })\n      ;\n    
\n\n    
Named URL
\n    
You can specify custom API settings to adjust the url, callback settings, or specify a different API action.
\n    
\n\n      $('.ui.search')\n        .search({\n          // change search endpoint to a custom endpoint by manipulating apiSettings\n          apiSettings: {\n            url: 'custom-search/?q={query}'\n          },\n          type: 'category'\n        })\n      ;\n    
\n\n    
Local Object
\n    
Local search results allow you to search across specified properties of a javacript object literal looking for matching values
\n    
\n      You can set which fields are searchable using the searchFields setting. Local object search can only display standard search results (not categories).\n    
\n    
\n      // searches across any array/object of searchable objects\n      var\n        content = [\n          {\n            title: 'Horse',\n            description: 'An Animal',\n          },\n          {\n            title: 'Cow',\n            description: 'Another Animal',\n          }\n        ]\n      ;\n      $('.ui.search')\n        .search({\n          source : content,\n          searchFields   : [\n            'title'\n          ],\n          fullTextSearch: false\n        })\n      ;\n    
\n\n    
Server Responses
\n\n    
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
\n\n    
Standard
\n    
\n      {\n        \"results\": [\n          {\n            \"title\": \"Result Title\",\n            \"url\": \"/optional/url/on/click\",\n            \"image\": \"optional-image.jpg\",\n            \"price\": \"Optional Price\",\n            \"description\": \"Optional Description\"\n          },\n          {\n            \"title\": \"Result Title\",\n            \"description\": \"Result Description\"\n          }\n        ],\n        // optional action below results\n        \"action\": {\n          \"url\": '/path/to/results',\n          \"text\": \"View all 202 results\"\n        }\n      }\n    
\n\n\n    
Category
\n    
\n      {\n        \"results\": {\n          \"category1\": {\n            \"name\": \"Category 1\",\n            \"results\": [\n              {\n                \"title\": \"Result Title\",\n                \"url\": \"/optional/url/on/click\",\n                \"image\": \"optional-image.jpg\",\n                \"price\": \"Optional Price\",\n                \"description\": \"Optional Description\"\n              },\n              {\n                \"title\": \"Result Title\",\n                \"url\": \"/optional/url/on/click\",\n                \"image\": \"optional-image.jpg\",\n                \"price\": \"Optional Price\",\n                \"description\": \"Optional Description\"\n              }\n            ]\n          },\n          \"category2\": {\n            \"name\": \"Category 2\",\n            \"results\": [\n              {\n                \"title\": \"Result Title\",\n                \"url\": \"/optional/url/on/click\",\n                \"image\": \"optional-image.jpg\",\n                \"price\": \"Optional Price\",\n                \"description\": \"Optional Description\"\n              }\n            ]\n          }\n        },\n        // optional action below results\n        \"action\": {\n          \"url\": '/path/to/results',\n          \"text\": \"View all 202 results\"\n        }\n      }\n    
\n\n\n    
Retreiving Results
\n\n    
Unique IDs
\n    
If no id property is included on a result, a key will automatically be generated when your results are returned for each result.
\n    
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.
\n    
An id or search result title can then be used with get result(value) to return the result object.\n    
\n    
\n      // get result from current query results with the title cat\n      $('.ui.search')\n        .search('get result', 'cat')\n      ;\n      // get first result from first category with category search\n      $('.ui.search')\n        .search('get result', 'a1')\n      ;\n      // get first result from standard search\n      $('.ui.search')\n        .search('get result', '1')\n      ;\n    
\n\n\n    
Behaviors
\n\n    
All the following behaviors can be called using the syntax:
\n    
\n    $('.your.element')\n      .search('behavior name', argumentOne, argumentTwo)\n    ;\n    
\n\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
BehaviorDescription
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 queryCancels current remote search query
search local(query)Search local object for specified query and display results
has minimum charactersWhether 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 queryCancels current remote search request
is focusedWhether search is currently focused
is visibleWhether search results are visible
is emptyWhether search results are empty
get valueReturns 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
destroyRemoves all events
\n\n\n  
\n\n  
\n\n    
Examples
\n\n    
\n      
Using Different Response Fields
\n      
Search expects a very specific API response, however you can easily modify the mapping of server response to displayed field using the fields parameter.\n      
\n      $('.ui.search')\n        .search({\n          apiSettings: {\n            url: '//api.github.com/search/repositories?q={query}'\n          },\n          fields: {\n            results : 'items',\n            title   : 'name',\n            url     : 'html_url'\n          },\n          minCharacters : 3\n        })\n      ;\n      
\n      
\n        
\n          \n          \n        
\n      
\n    
\n\n    
\n      
Using API Settings
\n      
API provides a callback onResponse that can be used to restructure third party APIs to match the expected server response for search.
\n      
You can also use mockResponseAsync to use a custom backend for fullfilling searches.
\n      
\n        
\n          \n          \n        
\n      
\n      
\n      $('.ui.search')\n        .search({\n          type          : 'category',\n          minCharacters : 3,\n          apiSettings   : {\n            onResponse: function(githubResponse) {\n              var\n                response = {\n                  results : {}\n                }\n              ;\n              // translate GitHub API response to work with search\n              $.each(githubResponse.items, function(index, item) {\n                var\n                  language   = item.language || 'Unknown',\n                  maxResults = 8\n                ;\n                if(index >= maxResults) {\n                  return false;\n                }\n                // create new language category\n                if(response.results[language] === undefined) {\n                  response.results[language] = {\n                    name    : language,\n                    results : []\n                  };\n                }\n                // add result to category\n                response.results[language].results.push({\n                  title       : item.name,\n                  description : item.description,\n                  url         : item.html_url\n                });\n              });\n              return response;\n            },\n            url: '//api.github.com/search/repositories?q={query}'\n          }\n        })\n      ;\n      
\n    
\n  
\n\n  
\n    
\n      Search\n    
\n\n    
\n      Behavior\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
DefaultDescription
apiSettings\n          
\n          {\n            action: 'search'\n          }\n          
\n          		Settings for API call.
minCharacters1Minimum characters to query for results
searchOnFocustrueWhether search should show results on focus (must also match min character length)
transition\n            fade\n          Named transition to use when animating menu in and out. Fade and slide down are available without including ui transitions
duration\n            300\n          Duration of animation events
maxResults7Maximum results to display when using local and simple search, maximum category count for category search
cachetrueCaches results locally to avoid requerying server
sourcefalseSpecify a Javascript object which will be searched locally
selectFirstResultfalseWhether the search should automatically select the first search result after searching
showNoResultsfalseWhether 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\n            
\n            fields: {\n              categories      : 'results',     // array of categories (category view)\n              categoryName    : 'name',        // name of category (category view)\n              categoryResults : 'results',     // array of results (category view)\n              description     : 'description', // result description\n              image           : 'image',       // result image\n              price           : 'price',       // result price\n              results         : 'results',     // array of results (standard)\n              title           : 'title',       // result title\n              action          : 'action',      // \"view more\" object name\n              actionText      : 'text',        // \"view more\" text\n              actionURL       : 'url'          // \"view more\" url\n            }\n            
\n          		List mapping display content to JSON property, either with API or source.
searchFields\n            
\n              [\n                'title',\n                'description'\n              ]\n            
\n          		Specify object properties inside local source object which will be searched
hideDelay0Delay before hiding results after search blur
searchDelay100Delay before querying results on inputchange
easing\n            easeOutExpo\n          Easing equation when using fallback Javascript animation
\n\n    
\n      Callbacks\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
ContextDescription
onSelect(result, response)moduleCallback 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)moduleCallback after processing element template to add HTML to results. Function should return false to prevent default actions.
onSearchQuery(query)moduleCallback on search query
onResults(response)moduleCallback on server response
onResultsOpenresults elementCallback when results are opened
onResultsCloseresults elementCallback when results are closed
\n\n    
\n      Templates\n    
\n\n    
These templates are used to generate the HTML structures for search results
\n\n    
\n      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\n    
\n     \n      \n        \n        \n      \n        \n          \n          \n        \n      \n    
Functions
templates\n            
\n            $.fn.search.settings.templates : {\n              escape: function(string) {\n                // returns escaped string for injected results\n              },\n              message: function(message, type) {\n               // returns html for message with given message and type\n              },\n              category: function(response) {\n               // returns results html for category results\n              },\n              standard: function(response) {\n               // returns results html for standard results\n              }\n            }\n            
\n          
\n\n    
\n      Module\n    
\n\n    
These settings are native to all modules, and define how the component ties content to DOM attributes, and debugging settings for the module.
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
DefaultDescription
nameSearchName used in log statements
namespacesearchEvent namespace. Makes sure module teardown does not effect other events attached to an element.
regExp\n            
\n            regExp: {\n              escape     : /[\\-\\[\\]\\/\\{\\}\\(\\)\\*\\+\\?\\.\\\\\\^\\$\\|]/g,\n              beginsWith : '(?:\\s|^)'\n            }\n            
\n          		Regular expressions used for matching
selector\n            
\n            selector : {\n              prompt       : '.prompt',\n              searchButton : '.search.button',\n              results      : '.results',\n              category     : '.category',\n              result       : '.result'\n            }\n            
\n          		Selectors used to find parts of a module
metadata\n            
\n            metadata: {\n              cache   : 'cache',\n              results : 'results'\n            }\n            
\n          		HTML5 metadata attributes used internally
className\n            
\n            className: {\n              active  : 'active',\n              empty   : 'empty',\n              focus   : 'focus',\n              loading : 'loading',\n              pressed : 'down'\n            }\n            
\n          		Class names used to determine element state
silentFalseSilences all console output including error messages, regardless of other debug settings.
debugfalseDebug output to console
performancetrueShow console.table output with performance metrics
verbosefalseDebug output includes all internal behaviors
errors\n            
\n            error : {\n              source      : 'Cannot search. No source used, and Semantic API module was not included',\n              noResults   : 'Your search returned no results',\n              logging     : 'Error in debug logging, exiting.',\n              noTemplate  : 'A valid template name was not specified.',\n              serverError : 'There was an issue with querying the server.',\n              maxResults  : 'Results must be an array to use maxResults setting',\n              method      : 'The method you called is not defined.'\n            },\n            
\n          
\n  
\n
\n"
  },
  {
    "path": "server/documents/modules/shape.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'shape'\nstandalone  : true\n\nelement     : 'shape'\nelementType : 'module'\n\ntitle       : 'Shape'\ndescription : 'A shape is a three dimensional object displayed on a two dimensional plane'\ntype        : 'UI Module'\n\nthemes      : ['default']\n---\n\n\n\n\n\n<%- @partial('header', { tabs: 'module' }) %>\n\n
\n\n  
\n\n    
Types
\n\n    
\n      
Shape
\n      
A shape is a three dimensional object including any flat content as a side.
\n\n      
\n        
\n          
\n            
\n              
\n                \n              
\n              
\n                
Steve Jobes
\n                
\n                  Acquaintances\n                
\n                
\n                  Steve Jobes is a fictional character designed to resemble someone familiar to readers.\n                
\n              
\n              
\n                \n                  Joined in 2014\n                \n                \n                  \n                  151 Friends\n                \n              
\n            
\n          
\n          
\n            
\n              
\n                \n              
\n              
\n                Stevie Feliciano\n                
\n                  Joined in 2014\n                
\n                
\n                  Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing.\n                
\n              
\n              
\n                \n                  \n                  22 Friends\n                \n              
\n            
\n          
\n        
\n      
\n      
\n      
\n        
\n        
\n        
\n        
\n      
\n      
\n        
\n        
\n      
\n    
\n\n    
\n      
Cube
\n      
A cube shape is formatted so that each side is the face of a cube
\n      
\n        
\n          
\n            
\n              
\n                1\n              
\n            
\n          
\n          
\n            
\n              
\n                2\n              
\n            
\n          
\n          
\n            
\n              
\n                3\n              
\n            
\n          
\n          
\n            
\n              
\n                4\n              
\n            
\n          
\n          
\n            
\n              
\n                5\n              
\n            
\n          
\n          
\n            
\n              
\n                6\n              
\n            
\n          
\n        
\n      
\n\n      
\n      
\n        
\n        
\n        
\n        
\n      
\n      
\n        
\n        
\n      
\n\n    
\n\n    
\n      
Text
\n      
A text shape is formatted to allow for sides of text to be displayed
\n\n      
\n        \n        
\n          
Using Shapes
\n          
    \n            
  • A shape must have defined width and heights for each side or else text flow may change during animation
    • \n            
  • The module uses 3D transformations which are currently only supported in modern versions of Chrome, Safari, and Firefox.
    • \n          
\n        
\n      
\n\n      
\n        
\n          
Did you know? This side starts visible.
\n          
Help, its another side!
\n          
This is the last side
\n        
\n      
\n\n      
\n      
\n        
\n        
\n        
\n        
\n      
\n      
\n        
\n        
\n      
\n    
\n  
\n\n  
\n\n    
Examples
\n\n    
\n      
Shape Types
\n      
Shapes do not have to be regular or have its sides match up in length and width to animate correctly.
\n\n      
Shape
\n      
\n        
Auto
\n        
Square
\n        
Irregular
\n      
\n      
\n      
\n        
\n          
\n            \n          
\n          
\n            \n          
\n          
\n            \n          
\n        
\n      
\n\n      
\n      
\n        
\n        
\n        
\n        
\n      
\n      
\n        
\n        
\n      
\n    
\n  
\n\n  
\n\n    
Getting Started
\n\n    
\n      
Required Markup
\n      
Shapes can have any arbitrary content, just wrap each side in side
\n      
\n        
\n          
\n            
This side starts visible.
\n            
This is yet another side
\n            
This is the last side
\n          
\n        
\n      
\n    
\n\n    
\n\n      
Animating with Javascript
\n      
Animations use CSS3 transitions and Javascript to set-up the correct conditions.
\n\n      
Initializing a shape
\n      
\n        $('.shape').shape();\n      
\n\n      
Transitions automatically assume next side is the next sibling (or first if last element)
\n      
\n        $('.shape').shape('flip up');\n      
\n\n      
To manually set the next side to appear use a selector or jQuery object
\n      
\n      $('.shape')\n        .shape('set next side', '.second.side')\n        .shape('flip up')\n      ;\n      
\n\n      
Any internal method can be invoked programmatically
\n      
\n        $('.shape').shape('repaint');\n      
\n\n    
\n\n    
Behavior
\n\n    
\n      
All the following behaviors can be called using the syntax:
\n      
\n      $('.your.element')\n        .shape('behavior name', argumentOne, argumentTwo)\n      ;\n      
\n    
\n\n    \n      \n        \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
BehaviorDescription
flip upFlips the shape upward
flip downFlips the shape downward
flip rightFlips the shape right
flip leftFlips the shape left
flip overFlips the shape over clock-wise
flip backFlips the shape over counter-clockwise
set next side(selector)Set the next side to a specific selector
is animatingReturns whether shape is currently animating
resetRemoves all inline styles
queue(animation)Queues an animationtill after current animation
repaintForces a reflow on element
set default sideSet the next side to next sibling to active element
set stage sizeSets shape to the content size of the next side
refreshRefreshes the selector cache for element sides
get transform downReturns translation for next side staged below
get transform leftReturns translation for next side staged left
get transform rightReturns translation for next side staged right
get transform upReturns translation for next side staged up
get transform downReturns translation for next side staged down
\n\n  
\n\n  
\n\n    
\n      Shape Settings\n      
Shape settings modify the shape's behavior
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
duration700msDuration of side change animation
width 
2.2
initial\n            
\n              
When set to next will use the width of the next side during the shape's animation.
\n              
When set to initial it will use the width of the shape at initialization.
\n              
When set to a specifix pixel height, will force the width to that height.
\n            
\n          
height 
2.2
initial\n            
\n              
When set to next will use the height of the next side during the shape's animation.
\n              
When set to initial it will use the height of the shape at initialization.
\n              
When set to a specifix pixel height, will force the height to that height.
\n            
\n          
\n\n    
\n\n    
\n      Callbacks\n      
Callbacks specify a function to occur after a specific behavior.
\n    
\n\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingContextDescription
beforeChangeNext SideIs called before side change
onChangeActive SideIs called after visible side change
\n\n    
\n\n    
\n      DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
namespaceshapeEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector\n            
\n            selector    : {\n              sides : '.sides',\n              side  : '.side'\n            }\n            
\n          
className\n            
\n            className   : {\n              animating : 'animating',\n              hidden    : 'hidden',\n              loading   : 'loading',\n              active    : 'active'\n            }\n            
\n          
\n\n    
\n\n    
\n      Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
nameShapeName used in debug logs
silentFalseSilences all console output including error messages, regardless of other debug settings.
debugFalseProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
error\n            
\n            error: {\n              side   : 'You tried to switch to a side that does not exist.',\n              method : 'The method you called is not defined'\n            }\n            
\n          
\n\n  
\n\n
\n"
  },
  {
    "path": "server/documents/modules/sidebar.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'minimal'\nstandalone  : true\n\nelement     : 'sidebar'\nelementType : 'element'\n\ntitle       : 'Sidebar'\ndescription : 'A sidebar hides additional content beside a page.'\ntype        : 'UI Module'\n\nthemes      : ['Default']\n---\n\n\n\n<%- @partial('header', { tabs: 'module' }) %>\n\n
\n\n  
\n\n    
Types
\n\n    
\n      
Sidebar
\n      
A sidebar
\n      
\n        
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.
\n      
\n      
\n        <body>\n          <div class="ui sidebar inverted vertical menu">\n            <a class="item">\n              1\n            </a>\n            <a class="item">\n              2\n            </a>\n            <a class="item">\n              3\n            </a>\n          </div>\n          <div class="pusher">\n            <!-- Site content !-->\n          </div>\n        </body>\n      
\n      
\n      $('.ui.sidebar')\n        .sidebar('toggle')\n      ;\n      
\n    
\n    
\n      
\n        <div class="ui left demo vertical inverted sidebar labeled icon menu">\n          <a class="item">\n            <i class="home icon"></i>\n            Home\n          </a>\n          <a class="item">\n            <i class="block layout icon"></i>\n            Topics\n          </a>\n          <a class="item">\n            <i class="smile icon"></i>\n            Friends\n          </a>\n        </div>\n      
\n      
\n      $('.ui.labeled.icon.sidebar')\n        .sidebar('toggle')\n      ;\n      
\n    
\n\n    
States
\n\n    
Sidebar
\n\n    
\n      
Visible
\n      
A sidebar can be visible on the page
\n      
\n        To have a sidebar appear on page load simply add the class visible to the sidebar.\n      
\n      
\n        
\n      
\n    
\n\n    
Pusher
\n\n    
\n      
Dimmed
\n      
A pusher can be dimmed
\n      
\n        
\n      
\n    
\n\n    
Variations
\n\n    
\n      
Direction
\n      
A sidebar can appear on different sides of the page
\n\n      
\n        
\n        
\n        
\n        
\n      
\n\n    
\n\n    
\n      
Width
\n      
A sidebar can specify its width
\n      
\n        A sidebar will automatically adjust its animations to match any custom size specified in CSS\n      
\n      
\n        
\n        
\n        
\n        
\n        
\n      
\n\n    
\n\n  
\n\n  
\n\n    
Set-up
\n\n    
\n      
Page Structure
\n      
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.
\n      
\n        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.\n      
\n      
\n        <body>\n          <div class="ui sidebar">\n            ...\n          </div>\n          <div class="pusher">\n            Your site's actual content\n          </div>\n        </body>\n      
\n    
\n    
\n      
Using with Menu
\n      
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.
\n      
\n        <body>\n          <div class="ui left vertical menu sidebar">\n            <a class="item">\n              Item 1\n            </a>\n            <a class="item">\n              Item 2\n            </a>\n            <a class="item">\n              Item 3\n            </a>\n          </div>\n          <div class="pusher">\n            <!-- Site content !-->\n          </div>\n        </body>\n      
\n    
\n\n    
\n      
Using Fixed Content
\n      
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.\n      
\n        Fixed content that is not included adjacent to your pusher will lose its positioning when a sidebar is shown.\n      
\n      
\n        <body>\n          <div class="ui sidebar">\n            ...\n          </div>\n          <div class="ui top fixed menu">\n            ...\n          </div>\n          <div class="pusher">\n            Your site's actual content\n          </div>\n        </body>\n      
\n    
\n\n    
\n      
iOS Sidebars
\n      
Sidebars use a special fix for iOS that are added using userAgent detection.
\n      
This should have no meaningful affect on your code, but will prevent the canvas from incorrectly autoresizing when a sidebar opens.
\n      
\n      html.ios {\n        overflow-x: hidden;\n        -webkit-overflow-scrolling: touch;\n      }\n      html.ios,\n      html.ios body {\n        height: initial !important;\n      }\n      
\n    
\n\n    
Behavior
\n\n    
All the following behaviors can be called using the syntax:
\n    
\n    $('.your.element')\n      .sidebar('behavior name', argumentOne, argumentTwo)\n    ;\n    
\n\n    \n      \n        \n          \n          \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
BehaviorDescription
attach events(selector, event)Attaches sidebar action to given selector. Default event if none specified is toggle
showShows sidebar
hideHides sidebar
toggleToggles visibility of sidebar
is visibleReturns whether sidebar is visible
is hiddenReturns whether sidebar is hidden
push pagePushes page content to be visible alongside sidebar
get directionReturns direction of current sidebar
pull pageReturns page content to original position
add body CSSAdds stylesheet to page head to trigger sidebar animations
remove body CSSRemoves any inline stylesheets for sidebar animation
get transition eventReturns vendor prefixed transition end event
\n\n\n  
\n\n  
\n\n    
Examples
\n\n    
\n      
Transitions
\n      
Not all sidebar transitions are available for every sidebar direction, or when multiple sidebars are visible at a time.
\n      \n        \n          \n            \n            \n            \n            \n          \n        \n        \n          \n            \n            \n            \n            \n          \n          \n            \n            \n            \n            \n          \n          \n            \n            \n            \n            \n          \n          \n            \n            \n            \n            \n          \n          \n            \n            \n            \n            \n          \n          \n            \n            \n            \n            \n          \n        \n      
Multiple Visible Supports Vertical SidebarsSupports Horizontal Sidebars
Overlay
Push
Scale Down
Uncover
Slide Along
Slide Out
\n\n      
\n        \n        \n      
\n\n      \n\n      
Direction
\n      
\n        
\n          Left\n        
\n        
\n          Right\n        
\n        
\n          Top\n        
\n        
\n          Bottom\n        
\n      
\n\n      \n\n      
All Direction Animations
\n      
\n        Overlay\n      
\n      
\n        Push\n      
\n      
\n        Scale Down\n      
\n\n      
Vertical-Only Animations
\n      
\n        Uncover\n      
\n      
\n        Slide Along\n      
\n      
\n        Slide Out\n      
\n\n    
\n\n    
\n      
Displaying Multiple
\n      
Multiple sidebars can be displayed at the same time only when using a supported animation like push or overlay.
\n      
You may need to manually set the z-index on elements to ensure the intended sidebar element appears on top.
\n\n      
\n        If you are triggering multiple sidebars at the same time, its recommended to set the transition to overlay.\n      
\n\n      
\n      // showing multiple\n      $('.demo.sidebar')\n        .sidebar('setting', 'transition', 'overlay')\n        .sidebar('toggle')\n      ;\n      
\n    
\n    
\n      
Using a custom context
\n      
A sidebar can be initialized inside any element, not just a page's body.
\n      
\n        A sidebar's context cannot have any padding. You can solve this by padding its inner content, or using an additional containing element\n      
\n      
\n        \n          \n          Menu\n        \n      
\n      
\n        
\n          \n            \n            Home\n          \n          \n            \n            Topics\n          \n          \n            \n            Friends\n          \n          \n            \n            History\n          \n        
\n        
\n          
\n            
Application Content
\n            \n            \n            \n            \n          
\n        
\n      
\n      
\n      // using context\n      $('.context.example .ui.sidebar')\n        .sidebar({\n          context: $('.context.example .bottom.segment')\n        })\n        .sidebar('attach events', '.context.example .menu .item')\n      ;\n      
\n    
\n\n    
\n      
Triggering show/hide with other content
\n      
For convenience calling attach events will allow you to bind events. By default this will toggle the sidebar in and out of view on click
\n      
\n      $('.left.demo.sidebar').first()\n        .sidebar('attach events', '.toggle.button')\n      ;\n      $('.toggle.button')\n        .removeClass('disabled')\n      ;\n      
\n      
\n        \n        Trigger Sidebar\n      
\n    
\n\n    
\n      
Triggering custom behavior with other content
\n      
You can also specify what behavior should occur when the element is clicked
\n      
\n      $('.left.demo.sidebar').first()\n        .sidebar('attach events', '.open.button', 'show')\n      ;\n      $('.open.button')\n        .removeClass('disabled')\n      ;\n      
\n      
\n        \n        Open Sidebar\n      
\n    
\n\n    
\n      
Starting Visible
\n      
A sidebar can start visible by adding the class name visible
\n      
\n        You must include the class pushable on a sidebars containing element for it to appear correctly before Javascript initializes the element\n      
\n      
\n        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.\n      
\n      
\n        
\n          \n            \n            Home\n          \n          \n            \n            Topics\n          \n          \n            \n            Friends\n          \n          \n            \n            History\n          \n        
\n        
\n          
\n            
Application Content
\n            \n            \n            \n            \n          
\n        
\n      
\n      
\n      // showing multiple\n      $('.visible.example .ui.sidebar')\n        .sidebar({\n          context: '.visible.example .bottom.segment'\n        })\n        .sidebar('hide')\n      ;\n      
\n    
\n\n  
\n\n  
\n\n    
\n      Sidebar\n    
\n\n    
\n      Behavior\n    
\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
contextbodyContext which sidebar will appear inside
exclusivefalseWhether multiple sidebars can be open at once
closabletrueWhether sidebar can be closed by clicking on page
dimPagetrueWhether to dim page contents when sidebar is visible
scrollLockfalseWhether to lock page scroll when sidebar is visible
returnScrollfalseWhether to return to original scroll position when sidebar is hidden, automatically occurs with transition: scale
delaySetupfalseWhen sidebar is initialized without the proper HTML, using this option will defer creation of DOM to use requestAnimationFrame.
\n\n    
\n\n    
\n      Animation\n    
\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
transitionautoNamed transition to use when animating sidebar. Defaults to 'auto' which selects transition from defaultTransition based on direction.
mobileTransitionautoNamed transition to use when animating when detecting mobile device. Defaults to 'auto' which selects transition from defaultTransition based on direction.
defaultTransition\n            
\n            {\n              computer: {\n                left   : 'uncover',\n                right  : 'uncover',\n                top    : 'overlay',\n                bottom : 'overlay'\n              },\n              mobile: {\n                left   : 'uncover',\n                right  : 'uncover',\n                top    : 'overlay',\n                bottom : 'overlay'\n              }\n            }\n            
\n          		Default transitions for each direction and screen size, used with transition: auto
useLegacyfalseWhether Javascript animations should be used. Defaults to false. Setting to auto will use legacy animations only for browsers that do not support CSS transforms
duration500Duration of sidebar animation when using legacy Javascript animation
easingeaseInOutQuintEasing to use when using legacy Javascript animation
\n\n    
\n\n    
Callbacks
\n\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingContextDescription
onVisibleSidebarIs called when a sidebar begins animating in.
onShowSidebarIs called when a sidebar has finished animating in.
onChangeSidebarIs called when a sidebar begins to hide or show
onHideSidebarIs called before a sidebar begins to animate out.
onHiddenSidebarIs called after a sidebar has finished animating out.
\n\n    
\n      Module\n    
\n\n    
\n      DOM Settings\n    
\n    \n      \n        \n          \n          \n        \n      \n      \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefault
namespacesidebar
className\n            
\n            className         : {\n              active    : 'active',\n              animating : 'animating',\n              dimmed    : 'dimmed',\n              ios       : 'ios',\n              pushable  : 'pushable',\n              pushed    : 'pushed',\n              right     : 'right',\n              top       : 'top',\n              left      : 'left',\n              bottom    : 'bottom',\n              visible   : 'visible'\n            }\n            
\n          
regExp\n            
\n            regExp: {\n              ios    : /(iPad|iPhone|iPod)/g,\n              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\n            }\n            
\n          
selector\n            
\n            selector: {\n              fixed   : '.fixed',\n              omitted : 'script, link, style, .ui.modal, .ui.dimmer, .ui.nag, .ui.fixed',\n              pusher  : '.pusher',\n              sidebar : '.ui.sidebar'\n            }\n            
\n          
\n\n    
\n\n    
\n      Debug\n    
\n\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
nameSidebarName used in debug logs
silentFalseSilences all console output including error messages, regardless of other debug settings.
debugFalseProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
errors\n            
\n            error   : {\n              method       : 'The method you called is not defined.',\n              pusher       : 'Had to add pusher element. For optimal performance make sure body content is inside a pusher element',\n              movedSidebar : 'Had to move sidebar. For optimal performance make sure sidebar and pusher are direct children of your body tag',\n              overlay      : 'The overlay setting is no longer supported, use animation: overlay',\n              notFound     : 'There were no elements that matched the specified selector'\n            }\n            
\n          
\n  
\n\n
\n"
  },
  {
    "path": "server/documents/modules/sticky.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'basic minimal'\nelement     : 'sticky'\nelementType : 'module'\nstandalone  : true\n\ntitle       : 'Sticky'\ndescription : 'Sticky content fixes itself to the browser viewport as content is scrolled'\ntype        : 'UI Module'\n\n---\n\n\n\n<%- @partial('header', { tabs: {  examples: 'Examples', usage: 'Usage', settings: 'Settings' } }) %>\n\n
\n\n  
\n\n    
Introduction
\n    
\n\n      
Sticky content stays fixed to the browser viewport while another column of content is visible on the page.
\n      
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.
\n\n      
\n        The following examples may be hidden on small screen sizes. For the best experience, view these examples on a large resolution display.\n      
\n    
\n\n    
Examples
\n\n    
\n      
Sticking to Adjacent Context
\n      
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.
\n\n      
\n      $('.ui.sticky')\n        .sticky({\n          context: '#example1'\n        })\n      ;\n      
\n      
\n        
\n          \n          \n          \n          
\n            
Stuck Content
\n            \n          
\n        
\n        
\n          
\n            
Stuck Content
\n            \n          
\n        
\n        \n        \n        \n        \n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Pushing
\n      
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.
\n      
\n      $('.ui.sticky')\n        .sticky({\n          context: '#example2',\n          pushing: true\n        })\n      ;\n      
\n      
\n        
\n          
\n            
Stuck Content
\n            \n          
\n        
\n        
\n          \n          \n          \n          
\n            
Stuck Content
\n            \n          
\n        
\n        \n        \n        \n        \n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n      
Oversized Content
\n\n      
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.
\n\n      
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.
\n\n      
\n      $('.ui.sticky')\n        .sticky({\n          context: '#example3'\n        })\n      ;\n      
\n      
\n        
\n          
\n            
Long Stuck Content
\n            
\n              
\n                
\n                  \n                
\n                
\n                  Followup Article\n                  
\n                    By Author\n                  
\n                
\n              
\n              
\n                
\n                  \n                
\n                
\n                  Followup Article\n                  
\n                    By Author\n                  
\n                
\n              
\n              
\n                
\n                  \n                
\n                
\n                  Followup Article\n                  
\n                    By Author\n                  
\n                
\n              
\n              
\n                
\n                  \n                
\n                
\n                  Followup Article\n                  
\n                    By Author\n                  
\n                
\n              
\n              
\n                
\n                  \n                
\n                
\n                  Followup Article\n                  
\n                    By Author\n                  
\n                
\n              
\n              
\n                
\n                  \n                
\n                
\n                  Followup Article\n                  
\n                    By Author\n                  
\n                
\n              
\n              
\n                
\n                  \n                
\n                
\n                  Followup Article\n                  
\n                    By Author\n                  
\n                
\n              
\n              
\n                
\n                  \n                
\n                
\n                  Followup Article\n                  
\n                    By Author\n                  
\n                
\n              
\n              
\n                
\n                  \n                
\n                
\n                  Followup Article\n                  
\n                    By Author\n                  
\n                
\n              
\n              
\n                
\n                  \n                
\n                
\n                  Followup Article\n                  
\n                    By Author\n                  
\n                
\n              
\n              
\n                
\n                  \n                
\n                
\n                  Followup Article\n                  
\n                    By Author\n                  
\n                
\n              
\n              
\n                
\n                  \n                
\n                
\n                  Followup Article\n                  
\n                    By Author\n                  
\n                
\n              
\n              
\n                
\n                  \n                
\n                
\n                  Followup Article\n                  
\n                    By Author\n                  
\n                
\n              
\n              
\n                
\n                  \n                
\n                
\n                  Followup Article\n                  
\n                    By Author\n                  
\n                
\n              
\n              
\n                
\n                  \n                
\n                
\n                  Followup Article\n                  
\n                    By Author\n                  
\n                
\n              
\n              
\n                
\n                  \n                
\n                
\n                  Followup Article\n                  
\n                    By Author\n                  
\n                
\n              
\n              
\n                
\n                  \n                
\n                
\n                  Followup Article\n                  
\n                    By Author\n                  
\n                
\n              
\n              
\n                
\n                  \n                
\n                
\n                  Followup Article\n                  
\n                    By Author\n                  
\n                
\n              
\n              
\n                
\n                  \n                
\n                
\n                  Followup Article\n                  
\n                    By Author\n                  
\n                
\n              
\n            
\n          
\n        
\n        
\n          
\n            
Short Stuck Content
\n            \n          
\n        
\n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n      
\n    
\n\n    
\n\n      
Sticking to Own Context
\n\n      
Sticky content without a specified context can also stick itself to its current context, although this may cause overlap issues with content.
\n\n      
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\n\n      
\n        .ui.fixed.sticky + p {\n          margin-top: 39px;\n        }\n      
\n\n      
\n      $('.ui.sticky')\n        .sticky()\n      ;\n      
\n      
\n        
\n          
\n            Tab 1\n            Tab 2\n            Tab 3\n          
\n        
\n        
\n          \n          \n          \n          \n          \n          \n          \n          \n          \n        
\n      
\n    
\n\n  
\n\n  
\n\n    
Usage
\n\n    
\n      
Initializing
\n      
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.
\n\n      
\n        Sticky does not work in tables without using table-layout: fixed to prevent automatic resizing with content\n      
\n      
\n        
\n          
\n            \n          
\n        
\n        
\n          \n        
\n      
\n      
\n      $('.ui.sticky')\n        .sticky({\n          context: '#context'\n        })\n      ;\n      
\n    
\n    
\n      
Refreshing Cached Values
\n      
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.
\n      
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
\n      
Examples of changes that might affect sticky elements are:
\n      
\n        
Loading images without specified size
\n        
Setting CSS which adjusts the layout of the page
\n        
Hiding elements using Javascript
\n      
\n      
Refreshing cached values just requires calling the refresh behavior.
\n      
\n        // recalculates offsets\n        $('.ui.sticky')\n          .sticky('refresh')\n        ;\n      
\n    
\n\n    
\n      
Sticky Conditions
\n      
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.
\n      
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
\n      
Sticky elements swap between being bound to the edges of their container, or fixed to the edges of the browser viewport
\n      \n        \n          \n            \n            \n            \n          \n        \n        \n          \n            \n            \n            \n          \n          \n            \n            \n            \n          \n          \n            \n            \n            \n          \n          \n            \n            \n            \n          \n        \n      
ClassDescription
Fixed Topui fixed top stickyElement is fixed to top of viewport
Fixed Bottomui fixed bottom stickyElement is fixed to bottom of viewport
Bound Topui bound top stickyElement is bound to the top of its containing element (usually rail or column)
Bound Bottomui bound bottom stickyElement is bound to the bottom of its containing element (usually rail or column)
\n    
\n    
\n      
Adjusting Offset and Padding
\n      
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.
\n      
\n      $('.ui.sticky')\n        .sticky({\n          offset       : 50,\n          bottomOffset : 50,\n          context      : '#element-to-follow'\n        })\n      ;\n      
\n    
\n\n  
\n\n  
\n\n    
\n      Sticky Settings\n      
Settings to configure sticky behavior
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
pushingfalseWhether element should be \"pushed\" by the viewport, attaching to the bottom of the screen when scrolling up
setSizetrue 
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.
jitter5Sticky container height will only be set if the difference between heights of container and context is larger than this jitter value.
observeChangesfalseWhether any change in context DOM should automatically refresh cached sticky positions
contextfalseContext which sticky element should stick to
scrollContextwindowContext which sticky should attach onscroll events.
offset0Offset in pixels from the top of the screen when fixing element to viewport
bottomOffset0Offset in pixels from the bottom of the screen when fixing element to viewport
\n\n     
Callbacks
\n    
Callbacks specify a function to occur after a specific behavior.
\n\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
ContextDescription
onReposition$moduleCallback when element is repositioned from layout change
onScroll$moduleCallback when requestAnimationFrame fires from scroll handler.
onStick$moduleCallback when element is fixed to page
onUnstick$moduleCallback when element is unfixed from page
onTop$moduleCallback when element is bound to top of parent container
onBottom$moduleCallback when element is bound to bottom of parent container
\n\n    
\n      DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
namespacestickyEvent namespace. Makes sure module teardown does not effect other events attached to an element.
className\n            
\n            className : {\n              bound     : 'bound',\n              fixed     : 'fixed',\n              supported : 'native',\n              top       : 'top',\n              bottom    : 'bottom'\n            }\n            
\n          		Class names used to attach style to state
\n\n    
\n\n    
\n      Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n\n    \n      \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
nameStickyName used in debug logs
silentFalseSilences all console output including error messages, regardless of other debug settings.
debugFalseProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
errors\n            
\n            error         : {\n              container      : 'Sticky element must be inside a relative container',\n              visible        : 'Element is hidden, you must call refresh after element becomes visible',\n              method         : 'The method you called is not defined.',\n              invalidContext : 'Context specified does not exist',\n              elementSize    : 'Sticky element is larger than its container, cannot create sticky.'\n            }\n            
\n          
\n\n  
\n\n\n
\n"
  },
  {
    "path": "server/documents/modules/tab.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : ''\nelement     : 'tab'\nelementType : 'module'\nstandalone  : true\n\ntitle       : 'Tab'\ndescription : 'A tab is a hidden section of content activated by a menu'\ntype        : 'UI Module'\n\nthemes      : ['Default']\n---\n\n\n\n\n<%- @partial('header', { tabs: { definition: 'Definition', examples: 'Examples',  usage: 'Usage',  settings: 'Settings' } }) %>\n\n
\n\n  
\n\n    
\n      Type\n    
\n\n    
\n      
\n        Tab\n      
\n      
A basic tab
\n      
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.
\n      
\n        
Tab
\n      
\n      
\n        \n        \n      
\n    
\n\n    
\n      States\n    
\n\n    
\n      
\n        Active\n      
\n      
A tab can be activated, and visible on the page
\n      
\n        
Tab
\n      
\n      
\n        \n        \n      
\n    
\n\n    
\n      
\n        Loading\n      
\n      
A tab can display a loading indicator
\n      
\n        
Tab
\n      
\n      
\n        \n        \n      
\n    
\n\n  
\n\n  
\n\n    
Basic Examples
\n\n    
\n      
Basic Tabs
\n      
Tabs are connecting using paths specified in the data-tab attribute. Tab is then initialized in Javascript on the activating elements.
\n      
\n        To have a tab visible on page load, add the class active to both the initializing menu and the tab.\n      
\n      
\n        First\n        Second\n        Third\n      
\n      
\n        First\n      
\n      
\n        Second\n      
\n      
\n        Third\n      
\n      
\n      $('.menu .item')\n        .tab()\n      ;\n      
\n    
\n\n    
\n      
Multiple Tab Groups
\n      
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.
\n      
\n        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.\n      
\n      
\n        $('#context1 .menu .item')\n          .tab({\n            context: $('#context1')\n          })\n        ;\n        $('#context2 .menu .item')\n          .tab({\n            // special keyword works same as above\n            context: 'parent'\n          })\n        ;\n      
\n      
\n        
\n          First\n          Second\n          Third\n        
\n        
\n          
\n            1A\n            1B\n            1C\n          
\n          
1A
\n          
1B
\n          
1C
\n        
\n        
\n          
\n            2A\n            2B\n            2C\n          
\n          
2A
\n          
2B
\n          
2C
\n        
\n        
\n          
\n            3A\n            3B\n            3C\n          
\n          
3A
\n          
3B
\n          
3C
\n        
\n      
\n      
\n      
\n        
\n          Fourth\n          Fifth\n          Sixth\n        
\n        
\n          4\n        
\n        
\n          5\n        
\n        
\n          6\n        
\n      
\n      
\n        
\n          
\n            First\n            Second\n            Third\n          
\n          
\n            
\n              1A\n              1B\n              1C\n            
\n            
1A
\n            
1B
\n            
1C
\n          
\n          
\n            
\n              2A\n              2B\n              2C\n            
\n            
2A
\n            
2B
\n            
2C
\n          
\n          
\n            
\n              3A\n              3B\n              3C\n            
\n            
3A
\n            
3B
\n            
3C
\n          
\n        
\n        
\n        
\n          
\n            Fourth\n            Fifth\n            Sixth\n          
\n          
\n            4\n          
\n          
\n            5\n          
\n          
\n            6\n          
\n        
\n      
\n    
\n\n    
\n\n      
Default Paths
\n      
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.
\n      
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.
\n      
\n      $('.paths.example .menu .item')\n        .tab({\n          context: '.paths.example'\n        })\n      ;\n      
\n\n      
\n        First\n        Second\n        Third\n      
\n      
\n        
\n          1A\n          1B\n          1C\n        
\n        
1A
\n        
1B
\n        
1C
\n      
\n      
\n        
\n          2A\n          2B\n          2C\n        
\n        
2A
\n        
2B
\n        
2C
\n      
\n      
\n        
\n          3A\n          3B\n          3C\n        
\n        
3A
\n        
3B
\n        
3C
\n      
\n    
\n\n    
Remote Examples
\n\n\n    
\n      
Retreiving Remote Content
\n      
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.
\n      
\n        API requests for the following example have been faked using mockResponse API setting to avoid network overhead.\n      
\n      
\n      $('.dynamic.example .menu .item')\n        .tab({\n          cache: false,\n          // faking API request\n          apiSettings: {\n            loadingDuration : 300,\n            mockResponse    : function(settings) {\n              var response = {\n                first  : 'AJAX Tab One',\n                second : 'AJAX Tab Two',\n                third  : 'AJAX Tab Three'\n              };\n              return response[settings.urlData.tab];\n            }\n          },\n          context : 'parent',\n          auto    : true,\n          path    : '/'\n        })\n      ;\n      
\n      
\n        First\n        Second\n        Third\n      
\n      
\n        
AJAX Tab One
\n        \n        \n        \n      
\n      
\n      
\n      
\n      
\n    
\n\n    
\n      
Evaluating Scripts in HTML
\n      
By default, script tags included in HTML will only be evaluated on first load. To change this behavior you can adjust the  evaluateScripts setting.
\n      
\n      $('.eval.example .menu .item')\n        .tab({\n          evaluateScripts : 'once',\n          context         : 'parent',\n          auto            : true,\n          path            : '/'\n        })\n      ;\n      
\n      
\n        First\n        Second\n        Third\n      
\n      
\n        
AJAX Tab One
\n        \n        \n        \n      
\n      
\n      
\n      
\n      
\n    
\n\n\n    
History Examples
\n\n    
\n      
Using Hash History
\n      
For static sites, or sites that only require simple history, in-page links can be used to trigger different local tab states
\n      
\n        $('.history.example .menu .item')\n          .tab({\n            context : '.history.example',\n            history : true\n          })\n        ;\n      
\n\n      
\n        First\n        Second\n        Third\n      
\n      
\n        
\n          1A\n          1B\n          1C\n        
\n        
1A
\n        
1B
\n        
1C
\n      
\n      
\n        
\n          2A\n          2B\n          2C\n        
\n        
2A
\n        
2B
\n        
2C
\n      
\n      
\n        
\n          3A\n          3B\n          3C\n        
\n        
3A
\n        
3B
\n        
3C
\n      
\n    
\n\n    
\n      
Using HTML5 State
\n      
For sites that are able to replicate change on the server, tab can automatically map changes in tab navigation to html5 state.\n      
\n      
\n        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.\n      
\n      
\n        $('.ui.menu .item')\n          .tab({\n            history : true,\n            historyType : 'state',\n            // base url for all other path changes\n            path        : '/my/base/url'\n          })\n        ;\n      
\n    
\n\n  
\n\n\n  
\n\n    
Initializing Tabs
\n\n    
\n      
...with Menus
\n      
Tabs are usually used in concert with an element that activates the tab. Tabs are initialized on the activating item instead of the tab.
\n      
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.
\n\n      
\n        $('.tabular.menu .item').tab();\n      
\n      
\n        
\n          
Tab Name
\n          
Tab Name 2
\n        
\n        
\n          \n        
\n        
\n          \n        
\n      
\n\n    
\n\n    
\n      
...without Menus
\n      
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);
\n\n      
\n        $('.ui.button')\n          .on('click', function() {\n            // programmatically activating tab\n            $.tab('change tab', 'tab-name');\n          })\n        ;\n      
\n      
\n        
Activate Tab
\n        
\n          \n        
\n      
\n    
\n\n\n    
\n      
\n        
Default Tabs
\n        
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\".
\n        
This will happen recursively for every tab open, allowing as many levels of tabs as you like.
\n      
\n    
\n\n\n    
Managing State
\n\n    
\n      
...with Hash Tags
\n\n      
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.
\n\n      
\n        
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.
\n      
\n\n      
\n        $('.ui.menu .item')\n          .tab({\n            history: true,\n            historyType: 'hash'\n          })\n        ;\n      
\n    
\n\n    
\n      
...with HTML5 State
\n      
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.
\n      
\n      $('.ui.menu .item')\n        .tab({\n          history: true,\n          historyType: 'state',\n          path: '/modules/tab.html'\n        })\n      ;\n      
\n    
\n\n    
\n      
Setting Paths
\n      
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.
\n      
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.
\n      
\n      $('.ui.menu .item')\n        .tab({\n          history: true,\n          historyType: 'state'\n          path: '/modules/tab.html'\n        })\n      ;\n      
\n    
\n\n    
Using an incorrect base path is a common error when using HTML5 state, and can cause unusual behaviors.
\n\n    
AJAX Content
\n\n    
\n      
...with automatic routing
\n\n      
Specifying the setting auto: true, will automatically retrieve content at a remote url matching the url set in the browser.
\n      
So for example the tab inbox will retrieve content from the URL base-url/inbox/
\n      
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.
\n      
Queries with 'X-Remote': true should refresh only the tabbed content, while queries without are normal resources and should refresh the entire page contents
\n      
This uses a similar technique to pJax or Rail's turbolinks.
\n      
There are a variety of settings for configuring dynamic content behavior. Visit the tab settings section for more information
\n      
\n      $('.dynamic.example .menu .item')\n        .tab({\n          context : '.dynamic.example',\n          auto    : true,\n          path    : '/modules/tab.html'\n        })\n      ;\n      
\n    
\n\n    
\n      
...with an API Behavior
\n      
Tabs provide an optional coupling with API which allow you to specify a templated API endpoint that a tab can query
\n      
Tabs will automatically pass the url variable {$tab} which can be replaced for RESTful API links.
\n      
To learn more about API behaviors built into semantic check out the API docs
\n      View API Docs \n    
\n\n    
Behavior
\n\n    All the following behaviors can be called using the syntax $('.foo').tab('behavior name', argumentOne, argumentTwo)\n\n    \n      \n        \n        \n      \n      \n        \n        \n      \n      \n        \n        \n      \n      \n        \n        \n      \n      \n        \n        \n      \n      \n        \n        \n      \n      \n        \n        \n      \n      \n        \n        \n      \n    
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 pathReturns current path
is tabReturns 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
\n  
\n\n\n  
\n\n    
\n      Tab Settings\n      
Form settings modify the tab behavior
\n    
\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
autofalseWhether 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.
historyfalseWhether to record history events for tab changes
ignoreFirstLoadfalseDo not load content remotely on first tab load. Useful when open tab is rendered on server.
evaluateScriptsonceWhether 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.
alwaysRefreshfalseTab should reload content every time it is opened
deactivate 
2.2
siblingsCan 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
responseCan 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.
cachetrueTab should cache content after loading locally to avoid server trip on second load
apiSettingsfalseSettings object for $.api call
historyTypehashCan 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.
pathfalseWhen using historyType state you must specify the base URL for all internal links.
contextfalseTabs are limited to those found inside this context
childrenOnlyfalseIf enabled limits tabs to children of passed context
maxDepth25Maximum amount of nested tabs allowed (avoids recursion)
\n\n    
\n    
Callbacks
\n    
Callbacks specify a function to occur after a specific behavior.
\n\n    \n      \n        \n          \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n        \n        \n          \n          \n          \n          \n        \n      \n    
ParametersContextDescription
onFirstLoadtabPath, parameterArray, historyEventTabCallback only the first time a tab is loaded
onLoadtabPath, parameterArray, historyEventTabCallback every time a tab is loaded
onRequesttabPathTabCalled when a tab begins loading remote content
onVisibletabPathTabCalled after a tab becomes visible
\n\n    
\n\n    
\n      DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
namespacetabEvent namespace. Makes sure module teardown does not effect other events attached to an element.
templates\n            
\n            templates    : {\n              // returns page title\n              determineTitle: function(tabArray) {}\n            }\n            
\n          		Functions used to return content
selector\n            
\n            selector    : {\n              tabs : '.ui.tab',\n              parent : '.ui:not(.menu)'\n            }\n            
\n          		Selectors used by module
metadata\n            
\n            metadata : {\n              tab    : 'tab',\n              loaded : 'loaded',\n              promise: 'promise'\n            }\n            
\n          		DOM metadata used by module
className\n            
\n            className   : {\n              loading : 'loading',\n              active  : 'active'\n            }\n            
\n          		Class names used to attach style to state
\n\n    
\n\n    
\n      Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n\n    \n      \n        \n          \n          \n          \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
nameTabName used in debug logs
silentFalseSilences all console output including error messages, regardless of other debug settings.
debugFalseProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
errors\n            
\n      error: {\n        api        : 'You attempted to load content without API module',\n        method     : 'The method you called is not defined',\n        missingTab : 'Activated tab cannot be found for this context.',\n        noContent  : 'The tab you specified is missing a content url.',\n        path       : 'History enabled, but no path was specified',\n        recursion  : 'Max recursive depth reached',\n        state      : 'The state library has not been initialized'\n      }\n            
\n          
\n  
\n\n
\n"
  },
  {
    "path": "server/documents/modules/transition.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'transition'\nelement     : 'transition'\nelementType : 'module'\nstandalone  : true\n\ntitle       : 'Transition'\ndescription : 'A transition is an animation usually used to move content in or out of view'\ntype        : 'UI Module'\n---\n\n<%- @partial('header', { tabs: 'module' }) %>\n\n\n
\n\n  
\n    
\n      
\n        \n      
\n    
\n    
\n\n      
Transitions
\n\n      
\n        
Scale
\n        
An element can scale into or out of view
\n        
\n        $('.autumn.leaf')\n          .transition('scale')\n        ;\n        
\n      
\n\n      
\n        
\n          Zoom\n          
New in 2.3
\n        
\n        
An element can zoom into view from far away
\n        
\n        $('.autumn.leaf')\n          .transition('zoom')\n        ;\n        
\n      
\n\n      
\n        
Fade
\n        
An element can fade into or out of view descending and ascending
\n        
\n        $('.autumn.leaf')\n          .transition('fade')\n        ;\n        
\n        
\n        $('.autumn.leaf')\n          .transition('fade up')\n        ;\n        
\n        
\n        $('.autumn.leaf')\n          .transition('fade down')\n        ;\n        
\n        
\n        $('.autumn.leaf')\n          .transition('fade left')\n        ;\n        
\n        
\n        $('.autumn.leaf')\n          .transition('fade right')\n        ;\n        
\n      
\n\n      
\n        
Flip
\n        
An element can flip into or out of view vertically or horizontally
\n        
\n        $('.autumn.leaf')\n          .transition('horizontal flip')\n        ;\n        
\n        
\n        $('.autumn.leaf')\n          .transition('vertical flip')\n        ;\n        
\n      
\n\n      
\n        
Drop
\n        
An element can drop into view from above 
\n        
\n        $('.autumn.leaf')\n          .transition('drop')\n        ;\n        
\n      
\n\n      
\n        
Fly
\n        
An element can fly in from off canvas
\n        
\n        $('.autumn.leaf')\n          .transition('fly left')\n        ;\n        
\n        
\n        $('.autumn.leaf')\n          .transition('fly right')\n        ;\n        
\n        
\n        $('.autumn.leaf')\n          .transition('fly up')\n        ;\n        
\n        
\n        $('.autumn.leaf')\n          .transition('fly down')\n        ;\n        
\n      
\n\n      
\n        
Swing
\n        
An element can swing into view
\n        
\n        $('.autumn.leaf')\n          .transition('swing left')\n        ;\n        
\n        
\n        $('.autumn.leaf')\n          .transition('swing right')\n        ;\n        
\n        
\n        $('.autumn.leaf')\n          .transition('swing up')\n        ;\n        
\n        
\n        $('.autumn.leaf')\n          .transition('swing down')\n        ;\n        
\n      
\n\n\n      
\n        
Browse
\n\n        
An element can appear and disappear as part of a series
\n        
\n        $('.autumn.leaf')\n          .transition('browse')\n        ;\n        
\n        
\n        $('.autumn.leaf')\n          .transition('browse right')\n        ;\n        
\n      
\n\n      
\n        
Slide
\n        
An element can appear to slide in from above or below\n        
\n        $('.autumn.leaf')\n          .transition('slide down')\n        ;\n        
\n        
\n        $('.autumn.leaf')\n          .transition('slide up')\n        ;\n        
\n        
\n        $('.autumn.leaf')\n          .transition('slide left')\n        ;\n        
\n        
\n        $('.autumn.leaf')\n          .transition('slide right')\n        ;\n        
\n      
\n\n      
Static Animations
\n\n      
\n        
Jiggle
\n        
An element can jiggle to draw attention to its shape
\n        
\n        $('.autumn.leaf')\n          .transition('jiggle')\n        ;\n        
\n      
\n      
\n        
Flash
\n        
An element can flash to draw attention to itself
\n        
\n        $('.autumn.leaf')\n          .transition('flash')\n        ;\n        
\n      
\n      
\n        
Shake
\n        
An element can shake to draw attention to its position
\n        
\n        $('.autumn.leaf')\n          .transition('shake')\n        ;\n        
\n      
\n      
\n        
Pulse
\n        
An element can pulse to draw attention to its visibility
\n        
\n        $('.autumn.leaf')\n          .transition('pulse')\n        ;\n        
\n      
\n      
\n        
Tada
\n        
An element can give user positive feedback for an action
\n        
\n        $('.autumn.leaf')\n          .transition('tada')\n        ;\n        
\n      
\n      
\n        
Bounce
\n        
An element can bounce to politely remind you of itself
\n        
\n        $('.autumn.leaf')\n          .transition('bounce')\n        ;\n        
\n      
\n      
\n        
\n          Glow\n          
New in 2.3
\n        
\n        
An element can glow to show its position in a page.
\n        
\n        $('.autumn.leaf')\n          .transition('glow')\n        ;\n        
\n      
\n\n    
\n  
\n  
\n    
\n      
\n        \n      
\n    
\n    
\n      
Visibility
\n      
After the animation queue finishes for an element, its final visibility state is determined. If an animation is an outward transition, the final visibility status will be hidden. If an animation is inward the element will be visible after the animation finishes.
\n      
\n      $('.long.leaf.image')\n        .transition('scale')\n      ;\n      
\n\n      
Specifying a direction
\n      
To force an animation direction, add either in or out to the animation name.
\n      
\n      $('.long.leaf.image')\n        // if a direction if specified it will be obeyed\n        .transition('horizontal flip in')\n        .transition('vertical flip in')\n      ;\n      
\n\n      
Automatic Direction
\n\n      
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\".
\n\n      
\n      $('.long.leaf.image')\n        // fade up out is used if available\n        .transition('fade up')\n        // this is now fade up in\n        .transition('fade up')\n      ;\n      
\n\n      
Grouped Transitions
\n\n      
Animation Intervals
\n      
When animating several different items in a group you may want to use an interval so that each item appears consecutively
\n      
\n      $('.jiggle.images .image')\n        .transition({\n          animation : 'jiggle',\n          duration  : 800,\n          interval  : 200\n        })\n      ;\n      
\n      
\n        \n        \n        \n      
\n      
Animation Order
\n      
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.
\n      
\n      $('.sequenced.images .image')\n        .transition({\n          animation : 'scale',\n          reverse   : 'auto', // default setting\n          interval  : 200\n        })\n      ;\n      
\n      
\n        \n        \n        \n        \n        \n        \n      
\n\n      
Forcing Order
\n      
If you need to manually force reverse animations regardless of the animation direction, you can use reverse: true.
\n      
\n      $('.reverse.images .image')\n        .transition({\n          animation : 'pulse',\n          reverse   : true,\n          interval  : 200\n        })\n      ;\n      
\n      
\n        \n        \n        \n      
\n\n      
Static Animations
\n      
Animations that do not have an in or out animation defined, will maintain their current visibility after running
\n      
\n      $('.long.leaf.image')\n        .transition('pulse')\n      ;\n      
\n\n      
Looping
\n      
Animation loops can be controlled by setting looping. Callbacks will occur after each loop cycle
\n      
\n      $('.long.leaf.image')\n        .transition('set looping')\n        .transition('bounce', '2000ms')\n      ;\n      
\n      
\n      $('.long.leaf.image')\n        .transition('remove looping')\n      ;\n      
\n    
\n  
\n\n\n  
\n    
\n      
\n        \n      
\n    
\n    
\n      
Introduction
\n\n      
UI Transitions provide a wrapper for using CSS transitions in Javascript providing cross-browser callbacks, advanced queuing, and feature detection.
\n      
Transitions are loosely coupled with other ui modules like dropdowns and modals to provide element transitions
\n\n      
Types
\n      
Transitions are separated into three categories. Inward transitions, outward transitions, and static transitions. These three categories determine the visibility of the element after the animation completes.
\n\n      
Usage
\n\n      
Initializing
\n\n      
If a transition is called without any arguments all default settings will be used.
\n\n      
\n      $('.green.leaf')\n        // default everything\n        .transition()\n      ;\n      
\n\n      
Passing in settings
\n      
Transitions use similar argument shorthand as animate. You can specify callback functions, animation duration, and other settings using the same arguments. Durations can be specified as strings with CSS shorthand, or with numbers.
\n      
\n      $('.green.leaf')\n        .transition({\n          animation  : 'scale',\n          duration   : '2s',\n          onComplete : function() {\n            alert('done');\n          }\n        })\n      ;\n      
\n\n      
Display Type
\n\n      
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.
\n      
\n      $('.test.button')\n        .transition('horizontal flip', '500ms')\n      ;\n      
\n      
\n      
\n         Sign-up\n      
\n\n      
Queuing animations
\n\n      
Animations called in sequence will be queued. Any queued animation will automatically determine the transition direction if none is specified.
\n      
\n      $('.green.leaf')\n        .transition('horizontal flip', '500ms')\n        .transition('horizontal flip', 500, function() {\n          alert('done!');\n        })\n      ;\n      
\n\n\n      
Stopping Animations
\n\n      
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.
\n\n      
\n      // only first horizontal flip cancelled\n      $('.green.leaf')\n        .transition('horizontal flip')\n        .transition('horizontal flip')\n        .transition('horizontal flip')\n        .transition('stop')\n        .transition('vertical flip')\n      ;\n      
\n      
\n      // all horizontal flip cancelled\n      $('.green.leaf')\n        .transition('horizontal flip')\n        .transition('horizontal flip')\n        .transition('horizontal flip')\n        .transition('stop all')\n        .transition('vertical flip')\n      ;\n      
\n      
\n      // all queued animations cancelled\n      $('.green.leaf')\n        .transition('horizontal flip')\n        .transition('horizontal flip')\n        .transition('vertical flip')\n        .transition('clear queue')\n      ;\n      
\n\n      
Hide/Show Without Transition
\n\n      
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.
\n\n      
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.
\n\n      
\n      $('.demo.table tr:last-child')\n        .transition('toggle')\n      ;\n      
\n      
\n      $('.demo.table td:last-child')\n        .transition('hide')\n      ;\n      
\n\n      \n        \n          \n            \n            \n            \n          \n          \n            \n            \n            \n          \n          \n            \n            \n            \n          \n        \n      
John Lilkijhlilk22@yahoo.comNo
Jamie Haringtonjamieharingonton@yahoo.comYes
Jill Lewisjilsewris22@yahoo.comYes
\n\n      
Behavior
\n\n      
All the following behaviors can be called using the syntax:
\n      
\n      $('.your.element')\n        .transition('behavior name', argumentOne, argumentTwo)\n      ;\n      
\n\n      \n        \n          \n          \n          \n          \n        \n        \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n          \n            \n            \n          \n        \n      
BehaviorDescription
stopStop current animation and preserve queue
stop allStop current animation and queued animations
clear queueClears all queued animations
showStop current animation and show element
hideStop current animation and hide element
toggleToggles between hide and show
force repaintForces reflow using a more expensive but stable method
repaintTriggers reflow on element
resetResets all conditions changes during transition
loopingEnables animation looping
remove loopingRemoves looping state from element
disableAdds disabled state (stops ability to animate)
enableRemoves disabled state
set duration(duration)Modifies element animation duration
save conditionsSaves all class names and styles to cache to be retrieved after animation
restore conditionsAdds back cached names and styles to element
get animation nameReturns vendor prefixed animation property for animationname
get animation eventReturns vendor prefixed animation property for animationend
is visibleReturns whether element is currently visible
is animatingReturns whether transition is currently occurring
is loopingReturns whether animation looping is set
is supportedReturns whether animations are supported
\n    
\n  
\n\n  
\n\n    
\n      Transition Settings\n      
Form settings modify the transition behavior
\n    
\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
animationfadeNamed animation event to used. Must be defined in CSS.
interval0Interval in MS between each elements transition
reverseautoWhen an interval is specified, sets order of animations. auto reverses only animations that are hiding.
displayTypefalseSpecify the final display type (block, inline-block etc) so that it doesn't have to be calculated.
duration500msDuration of the CSS transition animation
useFailSafetrueIf enabled a timeout will be added to ensure animationend callback occurs even if element is hidden
allowRepeatsfalseIf enabled will allow same animation to be queued while it is already occurring
queuetrueWhether to automatically queue animation if another is occurring
\n\n    
\n\n    
\n      Callbacks\n      
Callbacks specify a function to occur after a specific behavior.
\n    
\n\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingContextDescription
onShowtransitioned elementCallback on each transition that changes visibility to shown
onHidetransitioned elementCallback on each transition that changes visibility to hidden
onStarttransitioned elementCallback on animation start, useful for queued animations
onCompletetransitioned elementCallback on each transition complete
\n\n    
\n\n    
\n      DOM Settings\n      
DOM settings specify how this module should interface with the DOM
\n    
\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n      \n    
SettingDefaultDescription
namespacetransitionEvent namespace. Makes sure module teardown does not effect other events attached to an element.
className\n            
\n  className   : {\n    animating  : 'animating',\n    disabled   : 'disabled',\n    hidden     : 'hidden',\n    inward     : 'in',\n    loading    : 'loading',\n    looping    : 'looping',\n    outward    : 'out',\n    transition : 'transition',\n    visible    : 'visible'\n  }\n            
\n          		Class names used to attach style to state
\n\n    
\n\n    
\n      Debug Settings\n      
Debug settings controls debug output to the console
\n    
\n\n    \n      \n        \n        \n        \n        \n        \n      \n      \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n          \n        \n        \n          \n          \n        \n      \n    
SettingDefaultDescription
nameTransitionName used in debug logs
silentFalseSilences all console output including error messages, regardless of other debug settings.
debugFalseProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
errors\n            
\n  errors   : {\n    noAnimation : 'There is no CSS animation matching the one you specified.',\n    method      : 'The method you called is not defined'\n  }\n            
\n          
\n  
\n\n
\n"
  },
  {
    "path": "server/documents/test.html.eco",
    "content": "---\nlayout     : 'blank'\ncss        : 'hotfix'\nstandalone : true\n\ntitle      : 'Layout Page'\ndescription: 'This page can be used to help make adjustments to the global docs layout partials'\ntype       : 'Library'\n---\n\n\n\n\n  <%- @partial('meta') %>\n  <%- @partial('javascript') %>\n  <%- @partial('css') %>\n  <%- @partial('tracking') %>\n  <%- @partial('transifex') %>\n\n\" ontouchstart=\"\">\n  <% if @document.element is 'sidebar': %>\n  <%- @partial('demo-sidebar') %>\n  <% end %>\n  <%- @partial('sidebar') %>\n  <%- @partial('fixed-menu') %>\n  
\n    
\n      
\n<% uiGlobals         = @getCollection(\"documents\").findAll({type: $in: ['UI Global']},[{title: 1}]).toJSON() %>\n<% uiElements        = @getCollection(\"documents\").findAll({type: $in: ['UI Element']},[{title: 1}]).toJSON() %>\n<% uiCollections     = @getCollection(\"documents\").findAll({type: $in: ['UI Collection']},[{title: 1}]).toJSON() %>\n<% uiViews           = @getCollection(\"documents\").findAll({type: $in: ['UI View']},[{title: 1}]).toJSON() %>\n<% uiModules         = @getCollection(\"documents\").findAll({type: $in: ['UI Module']},[{title: 1}]).toJSON() %>\n<% uiBehavior        = @getCollection(\"documents\").findAll({type: $in: ['UI Behavior']},[{title: 1}]).toJSON() %>\n\n
\n  \">\n    \n    Getting Started\n  \n  
\n    
Examples
\n    
\n      \n        Layouts\n      \n      \n        UI\n      \n    
\n  
\n  
\n    
 header\">Globals
\n    
\n      <% for element in uiGlobals: %>\n        item\" href=\"<%= element.url %>\">\n          <%= element.title %>\n          <% if element.status?: %>\n          \n          <% end %>\n        \n      <% end %>\n    
\n  
\n  
\n    
 header\">Elements
\n    
\n      <% for element in uiElements: %>\n        item\" href=\"<%= element.url %>\">\n          <%= element.title %>\n          <% if element.status?: %>\n          \n          <% end %>\n        \n      <% end %>\n    
\n  
\n  
\n    
 header\">Collections
\n    
\n      <% for element in uiCollections: %>\n        item\" href=\"<%= element.url %>\">\n          <%= element.title %>\n          <% if element.status?: %>\n          \n          <% end %>\n        \n      <% end %>\n    
\n  
\n  
\n    
 header\">Views
\n    
\n      <% for element in uiViews: %>\n        item\" href=\"<%= element.url %>\">\n          <%= element.title %>\n          <% if element.status?: %>\n          \n          <% end %>\n        \n      <% end %>\n    
\n  
\n  
\n    
 header\">Modules
\n    
\n      <% for element in uiModules: %>\n        item\" href=\"<%= element.url %>\">\n          <%= element.title %>\n          <% if element.status?: %>\n          \n          <% end %>\n        \n    <% end %>\n    
\n  
\n  
\n    
 header\">Behaviors
\n    
\n      <% for element in uiBehavior: %>\n        item\" href=\"<%= element.url %>\">\n          <%= element.title %>\n          <% if element.status?: %>\n          \n          <% end %>\n        \n      <% end %>\n    
\n  
\n
\n      
\n      
\n        <% @tabs = {  definition: 'Definition', examples: 'Examples', usage: 'Usage', settings: 'Settings' } if @tabs == 'module' %>\n        <% @tabs = {  overview: 'Overview', usage: 'Usage', examples: 'Examples', settings: 'Settings' } if @tabs == 'behavior' %>\n        
 tab<% end %> segment\">\n          
\n            
\n\n              
\n                <%=@document.title %>\n                <% if @document.status?: %><%= @document.status %><% end %>\n                
\n                  <% if 'developments' in @getEnvironments(): %>\n                  <% else: %>\n                  \n                  <% end %>\n                  <%=@document.description %>\n                
\n              
\n\n              \n\n              
\n                <% if @document.type is 'UI Element' or @document.type is 'UI View' or @document.type is 'UI Collection' or @document.type is 'UI Module': %>\n                s/<%= @document.element %>.html.eco\">\n                  \n                \n                ] - Bug Name\">\n                  \n                \n                <% end %>\n                \n                  \n                \n              
\n              
\n                \n                  \n                \n                
\n                  \n                  
\n                    
Select Language
\n                    
\n                      \n                      \n                    
\n                    <%- @partial('languages') %>\n                  
\n                
\n              
\n\n              <% if @document.type is 'UI Module': %>\n        \n              <% end %>\n              <% if @document.themes? && @document.themes.length > 1: %>\n              
 4: %>scrolling <% end %>dropdown theme basic button\" data-element=\"<%= @document.element %>\" data-type=\"<%= @document.elementType %>\">\n                <%= @document.themes.length %> Themes\n                
\n                  <% for id, name of @document.themes: %>\n                    
\" data-text=\"<%= name %> Theme\"><%= (name.charAt(0).toUpperCase() + name.slice(1)) %>
\n                  <% end %>\n                
\n              
\n              <% end %>\n              <% if @document.type is 'UI Element' or @document.type is 'UI View' or @document.type is 'UI Collection' or @document.type is 'UI Module': %>\n              
\n                Download\n              
\n              
\n                
\n                  
\n                    
UI Framework
\n                    
\n                      
 Themable
\n                      
 Build Tools
\n                    
\n                    
Choose
\n                  
\n                  
\n                    
Standalone
\n                    
\n                      
Default Theme
\n                      
Precompiled
\n                    
\n                    
Choose
\n                  
\n                
\n                
\n                  
\n                    
Semantic UI
\n                    \n                      Download ZIP\n                    \n                    Getting Started\n                    
Package Managers
\n                    
\n                      
\n                        \n                        
\n                          \n                        
\n                      
\n                      
\n                        \n                        
\n                          \n                        
\n                      
\n                    
\n                  
\n                
\n                
\n                  
\n                    
Standalone <%=@document.title %>
\n                    /archive/master.zip\">\n                      Download ZIP\n                    \n                    /\">\n                      View GitHub\n                    \n                    
Package Managers
\n                    
\n                      
\n                        \n                        
\n                          \">\n                        
\n                      
\n                      
\n                        \n                        
\n                          \">\n                        
\n                      
\n                      
\n                        \n                        
\n                          .git\">\n                        
\n                      
\n                    
\n                  
\n                
\n              
\n              <% end %>\n            
\n            
\n              <% unless 'developments' in @getEnvironments(): %>\n              \n              <% end %>\n            
\n            <% if @tabs?: %>\n            <% index = 0 %>\n            <% tabCount = 0 %>\n            <% numbers = ['', '', 'two item', 'three item', 'four item', 'five item', 'six item'] %>\n            <% colors = ['red', 'teal', 'blue', 'purple', 'black', 'orange'] %>\n              <% for id, name of @tabs: %>\n                <% tabCount++ %>\n              <% end %>\n              
 ui menu\">\n                <% for id, name of @tabs: %>\n                  item\" data-tab=\"<%= id %>\"><%= name %>\n                  <% index++ %>\n                <% end %>\n              
\n              <% index = 0 %>\n              
\n                <% for id, name of @tabs: %>\n                  item\" data-tab=\"<%= id %>\"><%= name %>\n                  <% index++ %>\n                <% end %>\n              
\n            <% end %>\n          
\n        
\n        
\n\n          
Types
\n\n          
\n            
Button
\n            
A standard button
\n            \n          
\n          
\n            
\n              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\".\n            
\n            \n            
\n              Focusable\n            
\n          
\n\n          
\n            
Ordinality
\n            
A button can be formatted to show different levels of emphasis
\n            
Setting your brand colors to primary and secondary color variables in site.variables will allow you to use your color theming for UI elements
\n            \n            \n          
\n          
\n            \n            \n          
\n\n          
\n            
Animated
\n            
A button can animate to show hidden content
\n            
The button will be automatically sized according to the visible content size. Make sure there is enough room for the hidden content to show
\n            
\n              
Next
\n              
\n                \n              
\n            
\n            
\n              
Shop
\n              
\n                \n              
\n            
\n            
\n              
Sign-up for a Pro account
\n              
\n                $12.99 a month\n              
\n            
\n\n          
\n\n\n          
\n            
Icon
\n            
A button can have only an icon
\n            \n          
\n\n          
\n            
Labeled Icon
\n            
A button can have an icon and a label
\n            \n            \n          
\n\n          
\n            
Basic
\n            
A basic button is less pronounced
\n            \n          
\n          
\n            \n            \n            \n            \n            \n            \n            \n            \n            \n            \n            \n            \n            \n          
\n        
\n      
\n    
\n    <%- @partial('footer') %>\n  
\n\n  <%- @partial('language-modal') %>\n  <%- @partial('dimmer-demo') %>\n  <%- @partial('less') %>\n\n\n\n"
  },
  {
    "path": "server/documents/usage/layout.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'layouts'\nstandalone  : true\norder       : 3\n\ntitle       : 'Layouts'\ndescription : 'Examples of using Semantic UI'\ntype        : 'Usage'\n---\n\n<%- @partial('header') %>\n
\n  
Starter
\n  
Examples to introduce components and their function
\n  
\n    \n      
\n        \n      
\n      
\n        
Theming
\n        
\n          Examples of many common UI components, useful for testing custom themes.\n        
\n      
\n    \n    \n      
\n        \n      
\n      
\n        
Responsive
\n        
\n          Patterns for adjusting display for different devices.\n        
\n      
\n    \n    \n      
\n        \n      
\n      
\n        
Grid
\n        
\n          An introduction to using Semantic UI grids.\n        
\n      
\n    \n    \n      
\n        \n      
\n      
\n        
Attached Content
\n        
\n          Examples of content that can attach to other content.\n        
\n      
\n    \n    \n      
\n        \n      
\n      
\n        
Bootstrap Migration
\n        
\n          Examples of replacements for components found in Bootstrap.\n        
\n      
\n    \n  
\n\n  
Pages
\n  
Starter page templates
\n  
\n    \n      
\n        \n      
\n      
\n        
Homepage
\n        
\n          A simple, responsive homepage design with sidebar.\n        
\n      
\n    \n    \n      
\n        \n      
\n      
\n        
Sticky Menus
\n        
\n         Using visibility APIs to fix content after passing position in page.\n        
\n      
\n    \n    \n      
\n        \n      
\n      
\n        
Fixed Menu
\n        
\n          Using a fixed menu with page content.\n        
\n      
\n    \n    \n      
\n        \n      
\n      
\n        
Login Form
\n        
\n          A full-screen login form.\n        
\n      
\n    \n  
\n\n
\n"
  },
  {
    "path": "server/documents/usage/theming.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'theming'\nstandalone  : true\norder       : 2\n\ntitle       : 'Theming'\ndescription : 'An introduction to theming'\ntype        : 'Usage'\n---\n\n<%- @partial('header') %>\n\n\n\n\n\n\n\n
\n\n  
\n    Preface\n  
\n\n  
\n    
Progressive Truthfulness
\n    
\n      
[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
\n      
...Starting with exemplars that themselves have consistency of style ensures that such consistency is the designer's to lose.
\n      Frederick Brooks - The Design of Design\n    
\n    
Components in Semantic UI are designed to help developers adhere to progressive truthfulness in their development.
\n    
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.
\n    
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.
\n\n  
\n\n\n  
\n    Lead By Example\n  
\n  
\n    
Recreating GitHub
\n    
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.
\n\n    
To get started click the paint can icon next to the notification button in the top right
\n\n    
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.
\n\n    
Some special things to note:
\n\n    
\n      
Using site.variables to modify page container sizes, default fonts, and colors
\n      
Using overrides with variables to add GitHub's specially formatted tab style
\n      
Combining multiple individual component themes together in one theme.config
\n      
Using a custom icon font, and modifying paths to assets.
\n    
\n    \n      \n      View Theming Demo\n    \n  
\n\n  
\n    Using Themes\n  
\n  
\n    
Sitewide Defaults
\n\n    
Semantic UI includes twelve named colors. Components with color variations inherit these global variables when defining how colors should appear.
\n\n    
Each level of inheritance includes a special file site.variables which defines theme-wide defaults that each component can extend.
\n\n    
Global variables use higher level abstractions, to avoid tedium in having to modify multiple properties to change the appearance of an element.
\n    
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.\n\n    
\n    @primaryColor   : @pink;\n    @secondaryColor : @grey;\n    @red            : #B03060;\n    @orange         : #FE9A76;\n    @yellow         : #FFD700;\n    @olive          : #32CD32;\n    @green          : #016936;\n    @teal           : #008080;\n    @blue           : #0E6EB8;\n    @violet         : #EE82EE;\n    @purple         : #B413EC;\n    @pink           : #FF1493;\n    @brown          : #A52A2A;\n    @grey           : #A0A0A0;\n    @black          : #000000;\n    
\n\n    \n    \n    
All Colors
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n  
\n  
\n    
Component Defaults
\n    
Components inherit default values from site.variables which they may redefine specifically for their component
\n    
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.
\n    
\n      /* Checkbox */\n      @checkboxActiveBackground: @primaryColor;\n      @checkboxActiveBorderColor: @primaryColor;\n      @checkboxActiveCheckColor: @white;\n      /* Focused Checkbox */\n      @checkboxActiveFocusBackground: @primaryColorFocus;\n      @checkboxActiveFocusBorderColor: @primaryColorFocus;\n      @checkboxActiveFocusCheckColor: @white;\n      @checkboxTransition: none;\n      /* Radio */\n      @radioActiveBackground: @white;\n      @radioActiveBorderColor: @primaryColor;\n      @radioActiveBulletColor: @primaryColor;\n      /* Focused Radio */\n      @radioActiveFocusBackground: @white;\n      @radioActiveFocusBorderColor: @primaryColorFocus;\n      @radioActiveFocusBulletColor: @primaryColorFocus;\n      /* Slider */\n      @sliderOnLineColor: @primaryColor;\n      /* Focused Slider */\n      @sliderOnFocusLineColor: @primaryColorFocus;\n    
\n    
\n      \n      \n    
\n\n    \n    
\n      
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          
\n            \n            \n          
\n        
\n        
\n          
\n            \n            \n          
\n        
\n      
\n    
\n\n    \n    
\n      \n      \n    
\n  
\n  
\n    
Using Packaged Themes
\n    
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.
\n    
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.
\n    
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.
\n\n    
For example: 
\n    
\n    /*******************************\n            Theme Selection\n    *******************************/\n\n    /* Global */\n    @site       : 'material';  /* Loads material site defaults */\n    @reset      : 'default';\n\n    /* Elements */\n    @button     : 'github'; /* But uses them with GitHub Buttons */\n    @container  : 'default';\n    @divider    : 'default';\n    @flag       : 'default';\n    @header     : 'default';\n    @icon       : 'default';\n    @image      : 'default';\n    @input      : 'default';\n    @label      : 'default';\n    @list       : 'default';\n    @loader     : 'default';\n    @rail       : 'default';\n    @reveal     : 'default';\n    @segment    : 'default';\n    @step       : 'default';\n\n    /* Collections */\n    @breadcrumb : 'default';\n    @form       : 'default';\n    @grid       : 'default';\n    @menu       : 'chubby'; /* Other UI can use different themes as well */\n    @message    : 'default';\n    @table      : 'default';\n\n    /* Modules */\n    @accordion  : 'default';\n    @checkbox   : 'default';\n    @dimmer     : 'default';\n    @dropdown   : 'default';\n    @embed      : 'default';\n    @modal      : 'default';\n    @nag        : 'default';\n    @popup      : 'default';\n    @progress   : 'default';\n    @rating     : 'default';\n    @search     : 'default';\n    @shape      : 'default';\n    @sidebar    : 'default';\n    @sticky     : 'default';\n    @tab        : 'default';\n    @transition : 'default';\n\n    /* Views */\n    @ad         : 'default';\n    @card       : 'default';\n    @comment    : 'default';\n    @feed       : 'default';\n    @item       : 'default';\n    @statistic  : 'default';\n    
\n  
\n\n  
\n    
Browsing for Themes
\n    
Each UI definitions include a dropdown at the top of the page to preview themes included with the project.
\n    
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.
\n  
\n\n  
\n    Composing a Component\n  
\n\n\n  
\n    
Definition File
\n    
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.
\n    
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.
\n\n    
Here's an abridged version of button with an explanation of each section of the file.
\n\n    
\n\n/*******************************\n                Theme\n*******************************/\n\n/* Define type and element to help locate theme files */\n@type    : 'element';\n@element : 'button';\n\n/* Processes Variable Inheritance */\n@import (multiple) '../../theme.config';\n\n/* Create scope */\n& {\n\n/*******************************\n               Button\n*******************************/\n\n/* Define Component */\n.ui.button {\n  cursor: pointer;\n  display: inline-block;\n\n  min-height: 1em;\n\n  outline: none;\n  border: none;\n  vertical-align: @verticalAlign;\n  background: @background;\n  color: @textColor;\n\n  font-family: @fontFamily;\n\n  margin: 0em @horizontalMargin @verticalMargin 0em;\n  padding: @verticalPadding @horizontalPadding (@verticalPadding + @shadowOffset);\n\n  text-transform: @textTransform;\n  text-shadow: @textShadow;\n  font-weight: @fontWeight;\n  line-height: @lineHeight;\n  font-style: normal;\n  text-align: center;\n  text-decoration: none;\n\n  border-radius: @borderRadius;\n  box-shadow: @boxShadow;\n\n  user-select: none;\n  transition: @transition;\n  will-change: @willChange;\n\n  -webkit-tap-highlight-color: @tapColor;\n}\n\n/* Additional CSS removed for brevity */\n\n/* Load CSS Overrides and Inline */\n.loadUIOverrides();\n\n}\n\n    
\n  
\n\n  
\n    
Theme Files
\n    
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.
\n  
\n  
\n    
Variables Files
\n    
A .variables file specifies variables which should be adjusted for a theme.
\n    
A theme's variable file only needs to include variables which are different for a theme.
\n  
\n  
\n    
Override Files
\n    
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.
\n  
\n\n  
\n    Cascading Inheritance\n  
\n\n  
\n    
Theme Inheritance
\n    
Themes contain three separate levels of variable inheritance.
\n    
Each level of inheritance corresponds to a different level of permanence for a variable.
\n    
\n      
\n        \n        
\n          
Defaults
\n          
UI Defaults
\n        
\n      
\n      
\n        \n        
\n          
Packaged Theme
\n          
Distributable Packages
\n        
\n      
\n    
\n        \n        
\n          
Site Theme
\n          
Site Specific Changes
\n        
\n      
\n    
\n  
\n\n  
\n    
Default Theme
\n    
\n      
\n        \n        src\n      
\n      \n      
\n        \n        themes\n      
\n      \n      
\n        \n        default\n      
\n    
\n    
The default theme provides baseline variables for a component.
\n    
The best way to understand what variables are available for inclusion in a theme is to examine a component's default .variables file.
\n  
\n\n  
\n    
Packaged Theme
\n    
\n      
\n        \n        src\n      
\n      \n      
\n        \n        themes\n      
\n      \n      
\n        \n        theme-name\n      
\n    
\n    
Packaged themes are themes bundled together in a folder for distribution. These can be downloaded from the internet, or carried between projects.
\n    
Packaged themes can be used by modifying values in your theme.config file.
\n  
\n\n  
\n    
Site Theme
\n    
\n      
\n        \n        src\n      
\n      \n      
\n        \n        site\n      
\n    
\n    
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.
\n    
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.
\n    
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.
\n  
\n
\n"
  },
  {
    "path": "server/documents/views/advertisement.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'ad'\n\nelement     : 'advertisement'\nelementType : 'view'\n\ntitle       : 'Advertisement'\ndescription : 'An ad displays third-party promotional content'\ntype        : 'UI View'\n\n---\n\n<%- @partial('header') %>\n\n\n
\n\n  
Types
\n\n  
\n    
Ad
\n    
A standard ad
\n    
The following example uses a basic AdSense implementation. Your code will vary depending on your ad network.
\n    
\n      \n      \n      \n    
\n    
\n      \n      \n      \n      \n    
\n    
\n      \n      \n      \n      \n    
\n    
\n      
\n        \n      
\n      
\n      \n      
\n      
\n      \n      
\n    
\n  
\n\n  
\n    
Common Units
\n    
An advertisement can appear in common ad unit sizes
\n    
\n      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.\n    
\n    
\n    
\n    
\n    
\n    
\n  
\n\n  
\n    
Mobile
\n    
An ad can use common mobile ad sizes
\n    
Mobile ads will automatically only appear on mobile browser viewports
\n    
\n    
\n  
\n\n\n  
\n    
Rectangle
\n    
An ad can use a common rectangle ad unit size
\n    
\n    
\n  
\n\n  
\n    
Button
\n    
An ad can use button ad unit size
\n    
\n    
\n    
\n  
\n\n  
\n    
Skyscraper
\n    
An ad can use skyscraper ad unit size
\n    
\n    
\n  
\n\n  
\n    
Banner
\n    
An ad can use banner ad unit size
\n    
\n    
\n    
\n    
\n  
\n\n  
\n    
Leaderboards
\n    
An ad can use leaderboard ad unit size
\n    
\n    
\n    
\n  
\n\n  
\n    
Panorama
\n    
An ad can use panorama ad unit size
\n    
\n  
\n\n  
\n    
Netboard
\n    
An ad can use netboard ad unit size
\n    
\n  
\n\n\n\n  
Variations
\n\n  
\n    
Centered
\n    
An advertisement can appear centered
\n    
\n  
\n\n  
\n    
Test
\n    
A advertisement can be formatted to help verify placement
\n    
You can adjust the text displayed for your test ad placement by changing the value of data-text\n    
\n    
\n    
\n  
\n\n
\n"
  },
  {
    "path": "server/documents/views/card.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'card'\nstandalone  : true\n\nelement     : 'card'\nelementType : 'view'\n\ntitle       : 'Card'\ndescription : 'A card displays site content in a manner similar to a playing card'\ntype        : 'UI View'\n\nthemes      : ['Default', 'Basic', 'Classic', 'Instagram']\n---\n\n<%- @partial('header') %>\n\n\n\n\n
\n\n  
Types
\n\n  
\n    
Card
\n    
A single card.
\n    
\n      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.\n    
\n    
\n      
\n        \n      
\n      
\n        Kristy\n        
\n          Joined in 2013\n        
\n        
\n          Kristy is an art director living in New York.\n        
\n      
\n      
\n        \n          \n          22 Friends\n        \n      
\n    
\n  
\n  
\n    
\n      
\n        
14h
\n         Elliot\n      
\n      
\n        \n      
\n      
\n        \n          \n          17 likes\n        \n        \n        3 comments\n      
\n      
\n        
\n          \n          \n        
\n      
\n    
\n  
\n\n  
\n    
Cards
\n    
A group of cards.
\n    
\n      
Cards are designed to be flexible to your content. content blocks can include any custom elements related to your content.
\n    
\n    
\n      
\n        
\n          \n          
\n            Elliot Fu\n          
\n          
\n            Friends of Veronika\n          
\n          
\n            Elliot requested permission to view your contact details\n          
\n        
\n        
\n          
\n            
Approve
\n            
Decline
\n          
\n        
\n      
\n      
\n        
\n          \n          
\n            Jenny Hess\n          
\n          
\n            New Member\n          
\n          
\n            Jenny wants to add you to the group best friends\n          
\n        
\n        
\n          
\n            
Approve
\n            
Decline
\n          
\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        
\n          \n        
\n        
\n          
Matt Giampietro
\n          
\n            Friends\n          
\n          
\n            Matthew is an interior designer living in New York.\n          
\n        
\n        
\n          \n            Joined in 2013\n          \n          \n            \n            75 Friends\n          \n        
\n      
\n      
\n        
\n          \n        
\n        
\n          
Molly
\n          
\n            Coworker\n          
\n          
\n            Molly is a personal assistant living in Paris.\n          
\n        
\n        
\n          \n            Joined in 2011\n          \n          \n            \n            35 Friends\n          \n        
\n      
\n      
\n        
\n          \n        
\n        
\n          
Elyse
\n          
\n            Coworker\n          
\n          
\n            Elyse is a copywriter working in New York.\n          
\n        
\n        
\n          \n            Joined in 2014\n          \n          \n            \n            151 Friends\n          \n        
\n      
\n    
\n  
\n\n  
Content
\n\n  
\n    
Content Block
\n    
A card can contain blocks of content
\n    
\n      
\n        
Project Timeline
\n      
\n      
\n        
Activity
\n        
\n          
\n            
\n              
\n                 Elliot Fu added Jenny Hess to the project\n              
\n            
\n          
\n          
\n            
\n              
\n                 Stevie Feliciano was added as an Administrator\n              
\n            
\n          
\n          
\n            
\n              
\n                 Helen Troy added two pictures\n              
\n            
\n          
\n        
\n      
\n      
\n        \n      
\n    
\n  
\n  
\n    
Image
\n    
A card can contain an image
\n    
Cards can use reveal or dimmers to easily show additional content, or options on hover
\n    
\n      
\n        \n        \n      
\n      
\n        Team Fu & Hess\n        
\n          Created in Sep 2014\n        
\n      
\n      
\n        \n          \n          2 Members\n        \n      
\n    
\n  
\n  
\n    
\n    $('.special.cards .image').dimmer({\n      on: 'hover'\n    });\n    
\n    
\n      
\n        
\n          
\n            
\n              
\n                
Add Friend
\n              
\n            
\n          
\n          \n        
\n        
\n          Team Fu\n          
\n            Created in Sep 2014\n          
\n        
\n        
\n          \n            \n            2 Members\n          \n        
\n      
\n      
\n        
\n          
\n            
\n              
\n                
Add Friend
\n              
\n            
\n          
\n          \n        
\n        
\n          Team Hess\n          
\n            Created in Aug 2014\n          
\n        
\n        
\n          \n            \n            2 Members\n          \n        
\n      
\n    
\n  
\n\n  
\n    
Header
\n    
A card can contain a header
\n    
\n      
\n        
\n          
Elliot Fu
\n          
Friend
\n          
\n            Elliot Fu is a film-maker from New York.\n          
\n        
\n      
\n      
\n        
\n          
Veronika Ossi
\n          
Friend
\n          
\n            Veronika Ossi is a set designer living in New York who enjoys kittens, music, and partying.\n          
\n        
\n      
\n      
\n        
\n          
Jenny Hess
\n          
Friend
\n          
\n            Jenny is a student studying Media Management at the New School\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Metadata
\n    
A card can contain content metadata
\n\n    
\n      \n      You can include an arbitrary amount of metadata using your own class conventions, all child elements will automatically be spaced\n    
\n    
\n      
\n        
Cute Dog
\n        
\n          2 days ago\n          Animals\n        
\n        \n      
\n    
\n  
\n\n  
\n    
Link
\n    
A card can contain contain links as images, headers, or inside content
\n    
To make the entire content of a card link, check out the link variation below\n    
\n    
\n      \n        \n      \n      
\n        Steve Jobes\n        
\n          Last Seen 2 days ago\n        
\n      
\n    
\n  
\n  
\n    
Buttons
\n    
A card can contain buttons
\n    
\n      
\n        
\n          
Elliot Fu
\n          
\n            Elliot Fu is a film-maker from New York.\n          
\n        
\n        
\n          \n          Add Friend\n        
\n      
\n      
\n        
\n          
Veronika Ossi
\n          
\n            Veronika Ossi is a set designer living in New York who enjoys kittens, music, and partying.\n          
\n        
\n        
\n          \n          Add Friend\n        
\n      
\n      
\n        
\n          
Jenny Hess
\n          
\n            Jenny is a student studying Media Management at the New School\n          
\n        
\n        
\n          \n          Add Friend\n        
\n      
\n    
\n  
\n\n  
\n    
Approval
\n    
A card can contain a like or star action.
\n    
\n      
\n        \n        \n        
Cute Dog
\n        
\n          \n        
\n      
\n      
\n        \n          \n          Like\n        \n        \n          \n          Favorite\n        \n      
\n    
\n  
\n\n  
\n    
Description
\n    
A card can contain a description with one or more paragraphs
\n    
\n      
\n        
Cute Dog
\n        
2 days ago
\n        
\n          
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.
\n          
Many people also have their own barometers for what makes a cute dog.
\n        
\n      
\n    
\n  
\n\n  
\n    
Extra Content
\n    
A card can contain extra content meant to be formatted separately from the main content
\n    
\n      
\n        
Cute Dog
\n        
2 days ago
\n        
\n          
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.
\n          
Many people also have their own barometers for what makes a cute dog.
\n        
\n      
\n      
\n        \n        121 Votes\n      
\n    
\n\n  
\n\n  
Variations
\n\n  
\n    
Fluid Card
\n    
A fluid card takes up the width of its container
\n    
\n      
\n        
\n          
\n            \n          
\n          
\n            Daniel Louise\n          
\n        
\n      
\n      
\n        
\n          
\n            \n          
\n          
\n            Helen Troy\n          
\n        
\n      
\n      
\n        
\n          
\n            \n          
\n          
\n            Elliot Fu\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Centered Card
\n    
A card can center itself inside its container
\n\n    
\n      
\n        \n      
\n      
\n        Elyse\n      
\n    
\n  
\n  
\n    
Raised Card
\n    
A card may be formatted to raise above the page.
\n    
\n      
\n        
Cute Dog
\n        
\n          Animals\n        
\n        
\n          \n        
\n      
\n      
\n        
\n           Matt\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        
Cute Dog
\n        
\n          Animals\n        
\n        
\n          \n        
\n      
\n      
\n        
\n           Matt\n        
\n      
\n    
\n  
\n\n  
\n    
Link Card
\n    
A card can be formatted so that the entire contents link to another page
\n    \n      
\n        
Cute Dog
\n        
\n          Animals\n        
\n        
\n          \n        
\n      
\n      
\n        
\n           Matt\n        
\n      
\n    \n  
\n  
\n    
\n      
\n        
Cute Dog
\n        
\n          Animals\n        
\n        
\n          \n        
\n      
\n      
\n        
\n           Matt\n        
\n      
\n    
\n  
\n\n  
\n    
Floated Content
\n    
Any content element can be floated left or right
\n    
\n      \n      You can include an arbitrary amount of metadata using your own class conventions, all child elements will automatically be spaced\n    
\n    
\n      
\n        
Cute Dog
\n        
\n          2 days ago\n          Animals\n        
\n        
\n          \n        
\n      
\n      
\n        
\n           Matt\n        
\n      
\n    
\n  
\n\n  
\n    
Text Alignment
\n    
Any element inside a card can have its text alignment specified
\n    
\n      \n      You can include an arbitrary amount of metadata using your own class conventions, all child elements will automatically be spaced\n    
\n    
\n      
\n        
Jenny Hess
\n        
\n          
Jenny is a student studying Media Management at the New School
\n        
\n      
\n      
\n        
\n           Jenny\n        
\n      
\n    
\n  
\n\n  
\n    
Colored
\n    
A card can specify a color
\n    
\n      \n        
\n          \n        
\n      \n      \n        
\n          \n        
\n      \n      \n        
\n          \n        
\n      \n      \n        
\n          \n        
\n      \n      \n        
\n          \n        
\n      \n      \n        
\n          \n        
\n      \n      \n        
\n          \n        
\n      \n      \n        
\n          \n        
\n      \n      \n        
\n          \n        
\n      \n      \n        
\n          \n        
\n      \n      \n        
\n          \n        
\n      \n      \n        
\n          \n        
\n      \n      \n        
\n          \n        
\n      \n    
\n  
\n  
\n    
Column Count
\n    
A group of cards can set how many cards should exist in a row
\n    
\n      
\n        
\n          \n        
\n        
\n          Rating:\n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          Rating:\n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          Rating:\n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          Rating:\n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          Rating:\n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          Rating:\n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          Rating:\n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          Rating:\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Stackable
\n    
A group of cards can automatically stack rows to a single columns on mobile devices
\n    
Resize your browser to a smaller size to see the cards stack after reaching mobile breakpoints
\n    
\n      
\n        
\n          \n        
\n      
\n      
\n        
\n          \n        
\n      
\n      
\n        
\n          \n        
\n      
\n      
\n        
\n          \n        
\n      
\n      
\n        
\n          \n        
\n      
\n      
\n        
\n          \n        
\n      
\n    
\n  
\n\n  
\n    
Doubling
\n    
A group of cards can double its column width for mobile
\n    
Resize your browser to a smaller size to see the cards stack after reaching mobile breakpoints
\n    
\n      
\n        
\n          \n        
\n      
\n      
\n        
\n          \n        
\n      
\n      
\n        
\n          \n        
\n      
\n      
\n        
\n          \n        
\n      
\n      
\n        
\n          \n        
\n      
\n      
\n        
\n          \n        
\n      
\n    
\n  
\n\n
\n"
  },
  {
    "path": "server/documents/views/comment.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'comment'\nelement     : 'comment'\nelementType : 'view'\nstandalone  : true\n\ntitle       : 'Comment'\ndescription : 'A comment displays user feedback to site content'\ntype        : 'UI View'\n\nthemes      : ['Default', 'Chubby']\n---\n\n<%- @partial('header') %>\n\n\n
\n\n  
Types
\n\n  
\n    
Comments
\n    
A basic list of comments
\n    
\n      
These examples uses ui segment to create content segments. This is not required.
\n    
\n    
\n      
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
\n    
\n    
\n      
Comments
\n      
\n        \n          \n        \n        
\n          Matt\n          
\n            Today at 5:42PM\n          
\n          
\n            How artistic!\n          
\n          
\n            Reply\n          
\n        
\n      
\n      
\n        \n          \n        \n        
\n          Elliot Fu\n          
\n            Yesterday at 12:30AM\n          
\n          
\n            
This has been very useful for my research. Thanks as well!
\n          
\n          
\n            Reply\n          
\n        
\n        
\n          
\n            \n              \n            \n            
\n              Jenny Hess\n              
\n                Just now\n              
\n              
\n                Elliot you are always so right :)\n              
\n              
\n                Reply\n              
\n            
\n          
\n        
\n      
\n      
\n        \n          \n        \n        
\n          Joe Henderson\n          
\n            5 days ago\n          
\n          
\n            Dude, this is awesome. Thanks so much\n          
\n          
\n            Reply\n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n           Add Reply\n        
\n      
\n    
\n  
\n  
Content
\n\n  
Comment
\n\n  
\n    
Avatar
\n    
A comment can contain an image or avatar
\n    
\n      
\n        \n          \n        \n        
\n          Elliot Fu\n        
\n      
\n    
\n  
\n\n  
\n    
Metadata
\n    
A comment can contain metadata about the comment, an arbitrary amount of metadata may be defined.
\n    
\n      
\n        \n          \n        \n        
\n          Stevie Feliciano\n          
\n            
2 days ago
\n            
\n              \n              5 Faves\n            
\n          
\n          
\n            Hey guys, I hope this example comment is helping you read this documentation.\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Actions
\n    
A comment can contain an list of actions a user may perform related to this comment.
\n    
\n      
\n        \n          \n        \n        
\n          Tom Lukic\n          
\n            This will be great for business reports. I will definitely download this.\n          
\n          
\n            Reply\n            Save\n            Hide\n            \n              \n              Full-screen\n            \n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Reply Form
\n    
A comment can contain a form to reply to a comment. This may have arbitrary content.
\n    
\n      
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.
\n    
\n    
\n      
\n        \n          \n        \n        
\n          Steve Jobes\n          
\n            
2 days ago
\n          
\n          
\n            Revolutionary!\n          
\n          
\n            Reply\n          
\n          
\n            
\n              \n            
\n            
\n               Add Reply\n            
\n          
\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        \n          \n        \n        
\n          Joe Henderson\n          
\n            
1 day ago
\n          
\n          
\n            
The hours, minutes and seconds stand as visible reminders that your effort put them all there. 
\n            
Preserve until your next run, when the watch lets you see how Impermanent your efforts are.
\n          
\n          
\n            Reply\n          
\n        
\n      
\n      
\n        \n          \n        \n        
\n          Christian Rocha\n          
\n            
2 days ago
\n          
\n          
\n            I re-tweeted this.\n          
\n          
\n            Reply\n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n           Add Comment\n        
\n      
\n    
\n  
\n\n  
States
\n\n  
\n    
Collapsed
\n    
Comments can be collapsed, or hidden from view
\n    
\n      
\n        \n          \n        \n        
\n          Christian Rocha\n          
\n            2 days ago\n          
\n          
\n            I'm very interested in this motherboard. Do you know if it'd work in a Intel LGA775 CPU socket?\n          
\n          
\n            Reply\n          
\n        
\n        
\n          
\n            \n              \n            \n            
\n              Elliot Fu\n              
\n                1 day ago\n              
\n              
\n                No, it wont\n              
\n              
\n                Reply\n              
\n            
\n            
\n              
\n                \n                  \n                \n                
\n                  Jenny Hess\n                  
\n                    20 minutes ago\n                  
\n                  
\n                    Maybe it would.\n                  
\n                  
\n                    Reply\n                  
\n                
\n              
\n            
\n          
\n        
\n      
\n    
\n  
\n\n\n  
Variations
\n\n  
\n    
Threaded
\n    
A comment list can be threaded to showing the relationship between conversations
\n    
\n      
Comments
\n      
\n        \n          \n        \n        
\n          Matt\n          
\n            Today at 5:42PM\n          
\n          
\n            How artistic!\n          
\n          
\n            Reply\n          
\n        
\n      
\n      
\n        \n          \n        \n        
\n          Elliot Fu\n          
\n            Yesterday at 12:30AM\n          
\n          
\n            
This has been very useful for my research. Thanks as well!
\n          
\n          
\n            Reply\n          
\n        
\n        
\n          
\n            \n              \n            \n            
\n              Jenny Hess\n              
\n                Just now\n              
\n              
\n                Elliot you are always so right :)\n              
\n              
\n                Reply\n              
\n            
\n          
\n        
\n      
\n      
\n        \n          \n        \n        
\n          Joe Henderson\n          
\n            5 days ago\n          
\n          
\n            Dude, this is awesome. Thanks so much\n          
\n          
\n            Reply\n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n           Add Reply\n        
\n      
\n    
\n  
\n\n  
\n    
Minimal
\n    
Comments can hide extra information unless a user shows intent to interact with a comment.
\n    
\n      
Comments
\n      
\n        \n          \n        \n        
\n          Matt\n          
\n            Today at 5:42PM\n          
\n          
\n            How artistic!\n          
\n          
\n            Reply\n          
\n        
\n      
\n      
\n        \n          \n        \n        
\n          Elliot Fu\n          
\n            Yesterday at 12:30AM\n          
\n          
\n            
This has been very useful for my research. Thanks as well!
\n          
\n          
\n            Reply\n          
\n        
\n        
\n          
\n            \n              \n            \n            
\n              Jenny Hess\n              
\n                Just now\n              
\n              
\n                Elliot you are always so right :)\n              
\n              
\n                Reply\n              
\n            
\n          
\n        
\n      
\n      
\n        \n          \n        \n        
\n          Joe Henderson\n          
\n            5 days ago\n          
\n          
\n            Dude, this is awesome. Thanks so much\n          
\n          
\n            Reply\n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n           Add Reply\n        
\n      
\n    
\n  
\n\n  
\n    
Size
\n    
Comments can have different sizes
\n    
\n      
Comments
\n      
\n        \n          \n        \n        
\n          Matt\n          
\n            Today at 5:42PM\n          
\n          
\n            How artistic!\n          
\n          
\n            Reply\n          
\n        
\n      
\n      
\n        \n          \n        \n        
\n          Elliot Fu\n          
\n            Yesterday at 12:30AM\n          
\n          
\n            
This has been very useful for my research. Thanks as well!
\n          
\n          
\n            Reply\n          
\n        
\n        
\n          
\n            \n              \n            \n            
\n              Jenny Hess\n              
\n                Just now\n              
\n              
\n                Elliot you are always so right :)\n              
\n              
\n                Reply\n              
\n            
\n          
\n        
\n      
\n      
\n        \n          \n        \n        
\n          Joe Henderson\n          
\n            5 days ago\n          
\n          
\n            Dude, this is awesome. Thanks so much\n          
\n          
\n            Reply\n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n           Add Reply\n        
\n      
\n    
\n  
\n  
\n    
\n      
Comments
\n      
\n        \n          \n        \n        
\n          Matt\n          
\n            Today at 5:42PM\n          
\n          
\n            How artistic!\n          
\n          
\n            Reply\n          
\n        
\n      
\n      
\n        \n          \n        \n        
\n          Elliot Fu\n          
\n            Yesterday at 12:30AM\n          
\n          
\n            
This has been very useful for my research. Thanks as well!
\n          
\n          
\n            Reply\n          
\n        
\n        
\n          
\n            \n              \n            \n            
\n              Jenny Hess\n              
\n                Just now\n              
\n              
\n                Elliot you are always so right :)\n              
\n              
\n                Reply\n              
\n            
\n          
\n        
\n      
\n      
\n        \n          \n        \n        
\n          Joe Henderson\n          
\n            5 days ago\n          
\n          
\n            Dude, this is awesome. Thanks so much\n          
\n          
\n            Reply\n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n           Add Reply\n        
\n      
\n    
\n  
\n\n\n\n
\n"
  },
  {
    "path": "server/documents/views/feed.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'feed'\nstandalone  : true\n\ntitle       : 'Feed'\ndescription : 'A feed presents user activity chronologically'\ntype        : 'UI View'\n\nelement     : 'feed'\nelementType : 'view'\n\nthemes      : ['Default', 'Timeline']\n---\n\n\n\n<%- @partial('header') %>\n
\n\n  
Types
\n\n  
\n    
Feed
\n    
A feed
\n    
\n      
\n        
\n          \n        
\n        
\n          
\n            \n              Elliot Fu\n             added you as a friend\n            
\n              1 Hour Ago\n            
\n          
\n          
\n            \n               4 Likes\n            \n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          
\n            Helen Troy added 2 new illustrations\n            
\n              4 days ago\n            
\n          
\n          
\n            \n            \n          
\n          
\n            \n               1 Like\n            \n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          
\n            \n              Jenny Hess\n             added you as a friend\n            
\n              2 Days Ago\n            
\n          
\n          
\n            \n               8 Likes\n            \n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          
\n            Joe Henderson posted on his page\n            
\n              3 days ago\n            
\n          
\n          
\n            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.\n          
\n          
\n            \n               5 Likes\n            \n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          
\n            Justen Kitsune added 2 new photos of you\n            
\n              4 days ago\n            
\n          
\n          
\n            \n            \n          
\n          
\n            \n               41 Likes\n            \n          
\n        
\n      
\n    
\n  
\n\n  
Content
\n\n  
\n    
Label
\n    
An event can contain an image or icon label
\n    
\n      
\n        
\n          \n        
\n        
\n          You added Elliot Fu to the group Coworkers\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        
\n          \n        
\n        
\n          
\n            You posted on your friend Stevie Feliciano's wall.\n            
Today
\n          
\n        
\n      
\n    
\n  
\n\n\n  
\n    
Date
\n    
An event or an event summary can contain a date
\n    
\n      
\n        
\n          \n        
\n        
\n          
\n            3 days ago\n          
\n          
\n             You added Jenny Hess to your coworker group.\n          
\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        
\n          \n        
\n        
\n          
\n            You added Jenny Hess to your coworker group.\n            
\n              3 days ago\n            
\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Additional information
\n    
An event can contain additional information like a set of images or text
\n    
\n      
\n        
\n          \n        
\n        
\n          
\n            3 days ago\n          
\n          
\n             Helen Troy added 2 photos\n          
\n          
\n            \n            \n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          
\n            3 days ago\n          
\n          
\n             Laura Faucet created a post\n          
\n          
\n            Have you seen what's going on in Israel? Can you believe it.\n          
\n        
\n      
\n    
\n  
\n\n\n  
Variations
\n  
\n    
Size
\n    
A feed can have different sizes
\n\n    
\n      
Followers Activity
\n      
\n        
\n          
\n             Elliot Fu added Jenny Hess as a friend\n          
\n        
\n      
\n      
\n        
\n          
\n             Stevie Feliciano added Elliot Fu as a friend\n          
\n        
\n      
\n      
\n        
\n          
\n             Helen Troy added Christian Rocha as a friend\n          
\n        
\n      
\n      
\n        
\n          
\n             Christian Rocha signed up for the  site.\n          
\n        
\n      
\n    \n  
\n  
\n    
\n      
\n        
\n          \n        
\n        
\n          
\n            \n              Elliot Fu\n             added you as a friend\n            
\n              1 Hour Ago\n            
\n          
\n          
\n            \n               4 Likes\n            \n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          
\n            You submitted a new post to the page\n            
\n              3 days ago\n            
\n          
\n          
\n            I'm having a BBQ this weekend. Come by around 4pm if you can.\n          
\n          
\n            \n               11 Likes\n            \n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          
\n            4 days ago\n          
\n          
\n            Helen Troy added 2 new illustrations\n          
\n          
\n            \n            \n          
\n          
\n            \n               1 Like\n            \n          
\n        
\n      
\n    
\n\n  
\n\n\n
"
  },
  {
    "path": "server/documents/views/item.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'item'\nstandalone  : true\n\nelement     : 'item'\nelementType : 'view'\n\ntitle       : 'Item'\ndescription : 'An item view presents large collections of site content for display'\ntype        : 'UI View'\n\nthemes      : ['Default']\n---\n\n<%- @partial('header') %>\n\n\n\n\n
\n\n  
Types
\n\n  
\n    
\n      Items\n      Flexbox\n    
\n    
A group of items.
\n    
\n      \n      
\n        
Responsive Element
\n        
Item views are designed to be responsive with images stacking at mobile resolutions.
\n      
\n    
\n    
\n      
\n        
\n          \n        
\n        
\n          Header\n          
\n            Description\n          
\n          
\n            \n          
\n          
\n            Additional Details\n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          Header\n          
\n            Description\n          
\n          
\n            \n          
\n          
\n            Additional Details\n          
\n        
\n      
\n    
\n  
\n\n  
Content
\n\n  
\n    
Image
\n    
An item can contain an image
\n    
\n      
\n        
\n          \n        
\n      
\n      
\n        
\n          \n        
\n      
\n      
\n        
\n          \n        
\n      
\n    
\n  
\n\n  
\n    
Content
\n    
An item can contain content
\n    
\n      
\n        
\n          \n        
\n        
\n          Content A\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          Content B\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          Content C\n        
\n      
\n    
\n  
\n\n  
\n    
Header
\n    
An item can contain a header
\n    
\n      
\n        
\n          \n        
\n        
\n          12 Years a Slave\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          My Neighbor Totoro\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          Watchmen\n        
\n      
\n    
\n  
\n\n  
\n    
Metadata
\n    
An item can contain content metadata
\n    
\n      \n      You can include an arbitrary amount of metadata using your own class conventions, all child elements will automatically be spaced\n    
\n    
\n      
\n        
\n          \n        
\n        
\n          
Arrowhead Valley Camp
\n          
\n            $1200\n            1 Month\n          
\n          
\n            \n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          
Buck's Homebrew Stayaway
\n          
\n            $1000\n            2 Weeks\n          
\n          
\n            \n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          
Astrology Camp
\n          
\n            $1600\n            6 Weeks\n          
\n          
\n            \n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Link
\n    
An item can contain links as images, headers, or inside content
\n    
\n      \n      To make the entire content of an item link, check out the link variation below\n    
\n    
\n      
\n        \n          \n        \n        
\n          Stevie Feliciano\n          
\n            
Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing.
\n          
\n        
\n      
\n      
\n        \n          \n        \n        
\n          Veronika Ossi\n          
\n            
Veronika Ossi is a set designer living in New York who enjoys kittens, music, and partying.
\n          
\n        
\n      
\n      
\n        \n          \n        \n        
\n          Jenny Hess\n          
\n            
Jenny is a student studying Media Management at the New School.
\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Description
\n    
An item can contain a description with a single or multiple paragraphs
\n    
\n      
\n        \n          \n        \n        
\n          Cute Dog\n          
\n            
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.
\n            
Many people also have their own barometers for what makes a cute dog.
\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Extra Content
\n    
An item can contain extra content meant to be formatted separately from the main content
\n    
\n      
\n        
\n          Cute Dog\n          
\n            \n            \n          
\n          
\n            \n            121 Votes\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Rating
\n    
An item can contain icons signifying a 'like' or 'favorite' action
\n    
\n      You can use the rating component to attach events to like and favorite icons\n    
\n    
\n      
\n        \n          \n        \n        
\n          
\n            \n            Veronika Ossi\n          
\n        
\n      
\n      
\n        \n          \n        \n        
\n          
\n            \n            Justen Kitsune\n          
\n        
\n      
\n    
\n  
\n\n\n  
Variations
\n\n  
\n    
Stacking
\n    
A table can specify how it stacks items responsively
\n    
\n      
\n        
\n          \n        
\n        
\n          Header\n          
\n            Description\n          
\n          
\n            \n          
\n          
\n            Additional Details\n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          Header\n          
\n            Description\n          
\n          
\n            \n          
\n          
\n            Additional Details\n          
\n        
\n      
\n    
\n  
\n\n\n  
\n    
Divided
\n    
Items can be divided to better distinguish between grouped content
\n    
\n      \n      The following example uses ui for legibility only. This is not necessary for using ui items\n    
\n\n    
\n      
\n        
\n          \n        
\n        
\n          12 Years a Slave\n          
\n            Union Square 14\n          
\n          
\n            \n          
\n          
\n            
IMAX
\n            
 Additional Languages
\n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          My Neighbor Totoro\n          
\n            IFC Cinema\n          
\n          
\n            \n          
\n          
\n            
\n              Buy tickets\n              \n            
\n            
Limited
\n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          Watchmen\n          
\n            IFC\n          
\n          
\n            \n          
\n          
\n            
\n              Buy tickets\n              \n            
\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Relaxed
\n    
A group of items can relax its padding to provide more negative space
\n    
\n      
\n        
\n          \n        
\n        
\n          12 Years a Slave\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          My Neighbor Totoro\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          Watchmen\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        
\n          \n        
\n        
\n          12 Years a Slave\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          My Neighbor Totoro\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          Watchmen\n        
\n      
\n    
\n  
\n\n\n  
\n    
Link Item
\n    
An item can be formatted so that the entire contents link to another page
\n    
\n      
\n        
\n          \n        
\n        
\n          
Stevie Feliciano
\n          
\n            \n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          
Veronika Ossi
\n          
\n            \n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          
Jenny Hess
\n          
\n            \n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Vertical Alignment
\n    
Content can specify its vertical alignment
\n    
\n      \n      You can include an arbitrary amount of metadata using your own class conventions, all child elements will automatically be spaced\n    
\n    
\n      
\n        
\n          \n        
\n        
\n          
\n            Top Aligned\n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          
\n            Middle Aligned\n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          
\n            Bottom Aligned\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
Floated Content
\n    
Any content element can be floated left or right
\n    
\n      \n      You can include an arbitrary amount of metadata using your own class conventions, all child elements will automatically be spaced\n    
\n    
\n      
\n        
\n          \n        
\n        
\n          
\n            Content A\n          
\n          
\n            \n          
\n          
\n            
\n              Action\n            
\n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          
\n            Content B\n          
\n          
\n            \n          
\n          
\n            
\n              Action\n            
\n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          
\n            Content C\n          
\n          
\n            \n          
\n          
\n            
\n              Action\n            
\n          
\n        
\n      
\n    
\n  
\n\n
\n"
  },
  {
    "path": "server/documents/views/statistic.html.eco",
    "content": "---\nlayout      : 'default'\ncss         : 'stat'\nstandalone  : true\n\nelement     : 'statistic'\nelementType : 'view'\n\ntitle       : 'Statistic'\ndescription : 'A statistic emphasizes the current value of an attribute'\ntype        : 'UI View'\n\nthemes      : ['Default']\n---\n\n<%- @partial('header') %>\n\n\n\n\n
\n\n  
Types
\n\n  
\n    
Statistic
\n    
A statistic can display a value with a label above or below it.
\n    
\n      
\n        5,550\n      
\n      
\n        Downloads\n      
\n    
\n  
\n  
\n    
\n      
\n        Views\n      
\n      
\n        40,509\n      
\n    
\n  
\n\n  
\n    
Statistic Group
\n    
A group of statistics
\n    
\n      
\n        
\n          22\n        
\n        
\n          Faves\n        
\n      
\n      
\n        
\n          31,200\n        
\n        
\n          Views\n        
\n      
\n      
\n        
\n          22\n        
\n        
\n          Members\n        
\n      
\n    
\n  
\n\n  
Content
\n\n  
\n    
Value
\n    
A statistic can contain a numeric, icon, image, or text value
\n    
\n      
\n        
\n          22\n        
\n        
\n          Saves\n        
\n      
\n      
\n        
\n          Three
\n          Thousand\n        
\n        
\n          Signups\n        
\n      
\n      
\n        
\n           5\n        
\n        
\n          Flights\n        
\n      
\n      
\n        
\n          \n          42\n        
\n        
\n          Team Members\n        
\n      
\n    
\n  
\n\n  
\n    
Label
\n    
A statistic can contain a label to help provide context for the presented value
\n    
\n      
\n        2,204\n      
\n      
\n        Views\n      
\n    
\n  
\n\n\n  
Variations
\n\n  
\n    
Horizontal Statistic
\n    
A statistic can present its measurement horizontally
\n    
\n      
\n        2,204\n      
\n      
\n        Views\n      
\n    
\n  
\n  
\n    
\n      
\n        
\n          2,204\n        
\n        
\n          Views\n        
\n      
\n      
\n        
\n          3,322\n        
\n        
\n          Downloads\n        
\n      
\n      
\n        
\n          22\n        
\n        
\n          Tasks\n        
\n      
\n    
\n  
\n\n  
\n    
Colored
\n    
A statistic can be formatted to be different colors
\n    
\n      
\n        
\n          27\n        
\n        
\n          Red\n        
\n      
\n      
\n        
\n          8\n        
\n        
\n          Orange\n        
\n      
\n      
\n        
\n          28\n        
\n        
\n          Yellow\n        
\n      
\n      
\n        
\n          7\n        
\n        
\n          Olive\n        
\n      
\n      
\n        
\n          14\n        
\n        
\n          Green\n        
\n      
\n      
\n        
\n          82\n        
\n        
\n          Teal\n        
\n      
\n      
\n        
\n          1\n        
\n        
\n          Blue\n        
\n      
\n      
\n        
\n          22\n        
\n        
\n          Violet\n        
\n      
\n      
\n        
\n          23\n        
\n        
\n          Purple\n        
\n      
\n      
\n        
\n          15\n        
\n        
\n          Pink\n        
\n      
\n      
\n        
\n          36\n        
\n        
\n          Brown\n        
\n      
\n      
\n        
\n          49\n        
\n        
\n          Grey\n        
\n      
\n    
\n  
\n  
\n    
Inverted
\n    
A statistic can be formatted to fit on a dark background
\n    
\n      
\n        
\n          54\n        
\n        
\n          Inverted\n        
\n      
\n      
\n        
\n          27\n        
\n        
\n          Red\n        
\n      
\n      
\n        
\n          8\n        
\n        
\n          Orange\n        
\n      
\n      
\n        
\n          28\n        
\n        
\n          Yellow\n        
\n      
\n      
\n        
\n          7\n        
\n        
\n          Olive\n        
\n      
\n        
\n        
\n          14\n        
\n        
\n          Green\n        
\n      
\n      
\n        
\n          82\n        
\n        
\n          Teal\n        
\n      
\n      
\n        
\n          1\n        
\n        
\n          Blue\n        
\n      
\n      
\n        
\n          22\n        
\n        
\n          Violet\n        
\n      
\n      
\n        
\n          23\n        
\n        
\n          Purple\n        
\n      
\n      
\n        
\n          15\n        
\n        
\n          Pink\n        
\n      
\n      
\n        
\n          36\n        
\n        
\n          Brown\n        
\n      
\n      
\n        
\n          49\n        
\n        
\n          Grey\n        
\n      
\n    
\n  
\n\n  
\n    
Evenly Divided
\n    
A statistic group can have its items divided evenly
\n    
\n      
\n        
\n          22\n        
\n        
\n          Saves\n        
\n      
\n      
\n        
\n          Three
\n          Thousand\n        
\n        
\n          Signups\n        
\n      
\n      
\n        
\n           5\n        
\n        
\n          Flights\n        
\n      
\n      
\n        
\n          \n          42\n        
\n        
\n          Team Members\n        
\n      
\n    
\n  
\n\n  
\n    
Floated
\n    
An statistic can sit to the left or right of other content
\n\n    
\n      
\n        
\n          2,204\n        
\n        
\n          Views\n        
\n      
\n      
Te eum doming eirmod, nominati pertinacia argumentum ad his. Ex eam alia facete scriptorem, est autem aliquip detraxit at. Usu ocurreret referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei ex natum rebum iisque.
\n\n      
Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide phaedrum, vim vivendum maiestatis in.
\n\n      
\n        
\n          2,204\n        
\n        
\n          Views\n        
\n      
\n      
Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id. Mei ut facer dolores adolescens, no illum aperiri quo, usu odio brute at. Qui te porro electram, ea dico facete utroque quo. Populo quodsi te eam, wisi everti eos ex, eum elitr altera utamur at. Quodsi convenire mnesarchum eu per, quas minimum postulant per id.
\n\n      
Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide phaedrum, vim vivendum maiestatis in.
\n\n    
\n  
\n\n  
\n    
Size
\n    
A statistic can vary in size
\n    
\n      
\n        2,204\n      
\n      
\n        Views\n      
\n    
\n    
\n      
\n        2,204\n      
\n      
\n        Views\n      
\n    
\n    
\n      
\n        2,204\n      
\n      
\n        Views\n      
\n    
\n    
\n      
\n        2,204\n      
\n      
\n        Views\n      
\n    
\n    
\n      
\n        2,204\n      
\n      
\n        Views\n      
\n    
\n    
\n      
\n        2,204\n      
\n      
\n        Views\n      
\n    
\n  
\n  
\n    
\n    
\n      
\n        2,204\n      
\n      
\n        Views\n      
\n    
\n    
\n    
\n      
\n        2,204\n      
\n      
\n        Views\n      
\n    
\n    
\n    
\n      
\n        2,204\n      
\n      
\n        Views\n      
\n    
\n    
\n    
\n      
\n        2,204\n      
\n      
\n        Views\n      
\n    
\n    
\n    
\n      
\n        2,204\n      
\n      
\n        Views\n      
\n    
\n    
\n    
\n      
\n        2,204\n      
\n      
\n        Views\n      
\n    
\n  
\n\n
\n"
  },
  {
    "path": "server/files/javascript/accordion.js",
    "content": "semantic.accordion = {};\n\n// ready event\nsemantic.accordion.ready = function() {\n\n  // selector cache\n  var\n    $accordion     = $('.ui.accordion'),\n    $menuAccordion = $('.ui.menu.accordion'),\n    $checkbox      = $('.ui.checkbox'),\n    // alias\n    handler\n  ;\n  $accordion\n    .accordion()\n  ;\n  $menuAccordion\n    .accordion({\n     exclusive: true\n    })\n  ;\n  $checkbox\n    .checkbox()\n  ;\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.accordion.ready)\n;"
  },
  {
    "path": "server/files/javascript/api.js",
    "content": "\n$.fn.api.settings.debug = true;\n\n/* Define API endpoints once globally */\n$.extend($.fn.api.settings.api, {\n  'get followers' : '/followers/{id}?results={count}',\n  'create user'   : '/create',\n  'follow user'   : '/follow/{id}',\n  'search'        : '/search/?query={value}'\n});\n\nsemantic.api = {};\n// ready event\nsemantic.api.ready = function() {\n\n  $.fn.api.settings.responseAsync = function(settings, callback) {\n    setTimeout(function() {\n      callback({\n        \"success\": \"true\"\n      });\n    }, 500);\n  };\n\n\n  $('.response.example .ui.search')\n    .search({\n      type          : 'category',\n      minCharacters : 3,\n      apiSettings   : {\n        responseAsync : false,\n        onFailure     : function() {\n          $(this).search('display message', 'Hold off a few minutes 
 GitHub rate limit exceeded for anonymous search.');\n        },\n        onResponse: function(githubResponse) {\n          var\n            response = {\n              results : {}\n            }\n          ;\n          if(githubResponse.items.length === 0) {\n            // no results\n            return response;\n          }\n          $.each(githubResponse.items, function(index, item) {\n            var\n              language  = item.language || 'Unknown',\n              maxLength = 200,\n              description\n            ;\n            if(index >= 8) {\n              // only show 8 results\n              return false;\n            }\n            // Create new language category\n            if(response.results[language] === undefined) {\n              response.results[language] = {\n                name    : language,\n                results : []\n              };\n            }\n            description = (item.description < maxLength)\n                ? item.description\n                : item.description.substr(0, maxLength) + '...'\n            ;\n            description = $.fn.search.settings.templates.escape(description);\n            // Add result to category\n            response.results[language].results.push({\n              title       : item.name,\n              description : description,\n              url         : item.html_url\n            });\n          });\n          return response;\n        },\n        url: '//api.github.com/search/repositories?q={query}'\n      }\n    })\n  ;\n\n\n  $('.test.example .ui.button')\n    .api()\n  ;\n  $('.test.example .ui.input input')\n    .api({\n      stateContext: '.test.example .ui.input'\n    })\n  ;\n\n  $('form .ui.dropdown')\n    .dropdown()\n  ;\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.api.ready)\n;\n"
  },
  {
    "path": "server/files/javascript/button.js",
    "content": "semantic.button = {};\n\n// ready event\nsemantic.button.ready = function() {\n\n  // selector cache\n  var\n    $buttons         = $('.main .ui.buttons .button'),\n    $invertedButtons = $('.main .inverted.button'),\n    $toggle          = $('.main .ui.toggle.button'),\n    $follow          = $('.follow.example .button'),\n    $button          = $('.ui.button').not($buttons).not($toggle),\n    // alias\n    handler = {\n\n      activate: function() {\n        $(this)\n          .addClass('active')\n          .siblings()\n          .removeClass('active')\n        ;\n      }\n\n    }\n  ;\n\n  $buttons\n    .on('click', handler.activate)\n  ;\n\n  $follow\n    .state({\n      text: {\n        inactive : 'Follow',\n        active   : 'Following'\n      }\n    })\n  ;\n\n  $toggle\n    .state({\n      text: {\n        inactive : 'Vote',\n        active   : 'Voted'\n      }\n    })\n  ;\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.button.ready)\n;\n"
  },
  {
    "path": "server/files/javascript/card.js",
    "content": "semantic.card = {};\n\n// ready event\nsemantic.card.ready = function() {\n\n  // selector cache\n  var\n    $icon = $('.card .corner.label'),\n    handler\n  ;\n\n  handler = {\n\n\n  };\n\n  $('.ui.rating')\n    .rating()\n  ;\n\n  $icon\n    .state()\n  ;\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.card.ready)\n;"
  },
  {
    "path": "server/files/javascript/checkbox.js",
    "content": "semantic.checkbox = {};\n\n// ready event\nsemantic.checkbox.ready = function() {\n\n  // selector cache\n  var\n    $indeterminate  = $('.indeterminate.example').find('.ui.checkbox'),\n    $simpleCheckbox = $('.simple.example').find('.ui.checkbox'),\n    $checkbox       = $('.example').not('.static').find('.ui.checkbox').not($simpleCheckbox),\n    // alias\n    handler\n  ;\n\n  // event handlers\n  handler = {\n\n  };\n\n  $checkbox\n    .checkbox()\n  ;\n\n  $indeterminate\n    .checkbox('indeterminate')\n  ;\n\n\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.checkbox.ready)\n;"
  },
  {
    "path": "server/files/javascript/container.js",
    "content": "semantic.container = {};\n\n// ready event\nsemantic.container.ready = function() {\n\n  var\n    $helpIcon = $('.main.container .help.icon'),\n    $pageTabs = $('.masthead.tab.segment .menu .item')\n  ;\n\n  $pageTabs\n    .tab({\n      history     : true,\n      onFirstLoad : function() {\n        semantic.handler.makeCode();\n      }\n    })\n  ;\n  semantic.handler.makeCode();\n\n  $helpIcon\n    .popup()\n  ;\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.container.ready)\n;"
  },
  {
    "path": "server/files/javascript/customize.js",
    "content": "semantic.customize = {};\n\n// ready event\nsemantic.customize.ready = function() {\n\n  var\n    $accordion = $('.main.container .ui.accordion'),\n    $choice    = $('.download .item'),\n    $popup     = $('.main.container [data-content]'),\n    $checkbox  = $('.download .item .checkbox'),\n    handler = {}\n  ;\n\n  $choice\n    .on('click', function() {\n      $(this)\n        .find($checkbox)\n          .checkbox('toggle')\n      ;\n    })\n  ;\n\n  $checkbox\n    .checkbox()\n  ;\n\n  $accordion\n    .accordion({\n      exclusive: false,\n      onChange: function() {\n        $('.ui.sticky').sticky('refresh');\n      }\n    })\n  ;\n\n\n  $popup\n    .popup()\n  ;\n\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.customize.ready)\n;"
  },
  {
    "path": "server/files/javascript/dimmer.js",
    "content": "semantic.dimmer = {};\n\n// ready event\nsemantic.dimmer.ready = function() {\n\n  // selector cache\n  var\n    $pageDimmer = $('.demo.page.dimmer'),\n    $examples   = $('.example'),\n    $showButton = $examples.find('.show.button'),\n    $pageButton = $examples.find('.page.button'),\n    $hideButton = $examples.find('.hide.button'),\n    // alias\n    handler\n  ;\n\n  // event handlers\n  handler = {\n    show: function() {\n      $(this)\n        .closest('.example')\n        .find('> .html > .segment, > .segment:not(.existing):not(.html)')\n        .dimmer('show')\n      ;\n    },\n    hide: function() {\n      $(this)\n        .closest('.example')\n        .find('> .html > .segment, > .segment:not(.existing):not(.html)')\n        .dimmer('hide')\n      ;\n    },\n    page: function() {\n      $('body > .demo.page.dimmer')\n        .dimmer('show')\n      ;\n    }\n  };\n\n  $pageDimmer\n    .dimmer()\n  ;\n\n  $pageButton\n    .on('click', handler.page)\n  ;\n  $showButton\n    .on('click', handler.show)\n  ;\n  $hideButton\n    .on('click', handler.hide)\n  ;\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.dimmer.ready)\n;"
  },
  {
    "path": "server/files/javascript/docs.js",
    "content": "\n// namespace\nwindow.semantic = {\n  handler: {}\n};\n\n// Allow for console.log to not break IE\nif (typeof window.console == \"undefined\" || typeof window.console.log == \"undefined\") {\n  window.console = {\n    log  : function() {},\n    info : function(){},\n    warn : function(){}\n  };\n}\nif(typeof window.console.group == 'undefined' || typeof window.console.groupEnd == 'undefined' || typeof window.console.groupCollapsed == 'undefined') {\n  window.console.group = function(){};\n  window.console.groupEnd = function(){};\n  window.console.groupCollapsed = function(){};\n}\nif(typeof window.console.markTimeline == 'undefined') {\n  window.console.markTimeline = function(){};\n}\nwindow.console.clear = function(){};\n\n// ready event\nsemantic.ready = function() {\n\n  // selector cache\n  var\n    $document            = $(document),\n    $sortableTables      = $('.sortable.table'),\n    $sticky              = $('.ui.sticky'),\n\n    $themeDropdown       = $('.theme.dropdown'),\n\n    $ui                  = $('.ui').not('.hover, .down'),\n    $swap                = $('.theme.menu .item'),\n    $menu                = $('#toc'),\n    $hideMenu            = $('#toc .hide.item'),\n    $search              = $('#search'),\n    $sortTable           = $('.sortable.table'),\n    $demo                = $('.demo'),\n    $begSegment          = $('.beg.segment'),\n\n    $fullHeightContainer = $('.pusher > .full.height'),\n    $container           = $('.main.container'),\n    $allHeaders          = $('.main.container > h2, .main.container > .tab > h2, .main.container > .tab > .examples h2'),\n    $sectionHeaders      = $container.children('h2'),\n    $followMenu          = $container.find('.following.menu'),\n    $sectionExample      = $container.find('.example'),\n    $exampleHeaders      = $sectionExample.children('h4'),\n    $footer              = $('.page > .footer'),\n\n    $menuMusic           = $('.ui.main.menu .music.item'),\n    $menuPopup           = $('.ui.main.menu .popup.item'),\n    $pageDropdown        = $('.ui.main.menu .page.dropdown'),\n    $pageTabs            = $('.masthead.tab.segment .tabs.menu .item'),\n\n    $languageDropdown    = $('.language.dropdown'),\n    $chineseModal        = $('.chinese.modal'),\n    $languageModal       = $('.language.modal'),\n\n    $downloadPopup       = $('.download.button'),\n    $downloads           = $('.download.popup'),\n    $downloadFramework   = $('.framework.column .button'),\n    $downloadInput       = $('.download.popup input'),\n    $downloadStandalone  = $('.standalone.column .button'),\n\n    $helpPopup           = $('.header .help'),\n\n    $example             = $('.example'),\n    $popupExample        = $example.not('.no'),\n    $shownExample        = $example.filter('.shown'),\n    $prerenderedExample  = $example.has('.ui.checkbox, .ui.dropdown, .ui.search, .ui.progress, .ui.rating, .ui.dimmer, .ui.embed, .ui.placeholder'),\n\n    $visibilityExample   = $example.filter('.visiblity').find('.overlay, .demo.segment, .items img'),\n\n\n    $sidebarButton       = $('.fixed.launch.button'),\n    $code                = $('div.code').not('.existing'),\n    $existingCode        = $('.existing.code'),\n\n    expertiseLevel       = ($.cookie !== undefined)\n      ? $.cookie('expertiseLevel') || 0\n      : 0,\n    languageDropdownUsed = false,\n\n    metadata,\n\n    requestAnimationFrame = window.requestAnimationFrame\n      || window.mozRequestAnimationFrame\n      || window.webkitRequestAnimationFrame\n      || window.msRequestAnimationFrame\n      || function(callback) { setTimeout(callback, 0); },\n\n    // alias\n    handler\n  ;\n\n\n  // event handlers\n  handler = {\n\n    getMetadata: function() {\n      $.api({\n        debug : false,\n        on    : 'now',\n        url   : '/metadata.json',\n        cache : 'local',\n        onSuccess: function(response) {\n          metadata = response;\n        }\n      });\n    },\n\n    scrollToHash: function() {\n      if(handler.scrollToSelector) {\n        var\n          location = handler.scrollToSelector,\n          $element = $(location)\n        ;\n        if($element.length) {\n          var\n            position = $element.offset().top + 10\n          ;\n          $element\n            .addClass('active')\n          ;\n          $('html, body')\n            .stop()\n            .animate({\n              scrollTop: position\n            }, 500)\n          ;\n          delete handler.scrollToSelector;\n        }\n      }\n    },\n\n    showBeg: function() {\n      if(window.localStorage !== undefined) {\n        $begSegment\n          .find('.delete.icon')\n            .on('click', handler.hideBeg)\n        ;\n        if(!window.localStorage.getItem('begDismissed')) {\n          $begSegment.transition('slide down');\n        }\n      }\n    },\n\n    hideBeg: function() {\n      $begSegment.transition('slide down');\n      if(window.localStorage !== undefined) {\n        window.localStorage.setItem('begDismissed', true);\n      }\n    },\n\n    createIcon: function() {\n      $example\n        .each(function(){\n          var\n            $insertPoint = $(this).is('.another')\n              ? $(this).children().eq(0)\n              : $(this).children().eq(1)\n          ;\n          $('')\n            .addClass('fitted icon code')\n            .insertBefore( $insertPoint )\n          ;\n        })\n        .find('i.code')\n          .on('click', handler.createCode)\n      ;\n    },\n\n    shortcut: {\n      modal: function() {\n        var\n          $modal = $('#shortcuts'),\n          shortcutModalExists,\n          shortcut,\n          index\n        ;\n        if(!shortcutModalExists) {\n          var\n            html = '
'\n          ;\n          html += '
Keyboard Shortcuts
';\n          html += '
';\n          html += '';\n          for (index = 0; index < shortcuts.length; index++) {\n            shortcut = shortcuts[index];\n            html     += '';\n          }\n          html += '
' + shortcut.aka + '' + shortcut.description + '
';\n          html += '
OK
';\n          html += '
';\n          $('body').append(html);\n          $modal = $('#shortcuts');\n        }\n        $('#shortcuts').modal('show');\n      }\n    },\n\n    createWaypoints: function() {\n      $sectionHeaders\n        .visibility({\n          observeChanges: false,\n          once: false,\n          offset: 50,\n          onTopPassed: handler.activate.section,\n          onTopPassedReverse: handler.activate.previous\n        })\n      ;\n\n      $sectionExample\n        .visibility({\n          observeChanges: false,\n          once: false,\n          offset: 50,\n          onTopPassed: handler.activate.example,\n          onBottomPassedReverse: handler.activate.example\n        })\n      ;\n      $footer\n        .visibility({\n          observeChanges: false,\n          once: false,\n          onBottomVisible: function(calculations) {\n            var\n              $title = $followMenu.find('> .item > .title').last()\n            ;\n            $followMenu\n              .accordion('open', $title)\n            ;\n          }\n        })\n      ;\n    },\n\n    activate: {\n      previous: function() {\n        var\n          $menuItems  = $followMenu.children('.item'),\n          $section    = $menuItems.filter('.active'),\n          index       = $menuItems.index($section)\n        ;\n        if($section.prev().length > 0) {\n          $section\n            .removeClass('active')\n            .prev('.item')\n            .addClass('active')\n          ;\n          $followMenu\n            .accordion('open', index - 1)\n          ;\n        }\n      },\n      accordion: function() {\n        var\n          $section       = $(this),\n          index          = $sectionHeaders.index($section),\n          $followSection = $followMenu.children('.item'),\n          $activeSection = $followSection.eq(index)\n        ;\n      },\n      section: function() {\n        var\n          $section       = $(this),\n          index          = $sectionHeaders.index($section),\n          $followSection = $followMenu.children('.item'),\n          $activeSection = $followSection.eq(index),\n          isActive       = $activeSection.hasClass('active')\n        ;\n        if(!isActive) {\n          $followSection.filter('.active')\n            .removeClass('active')\n          ;\n          $activeSection\n            .addClass('active')\n          ;\n          $followMenu\n            .accordion('open', index)\n          ;\n        }\n      },\n      example: function() {\n        var\n          $section       = $(this).children('h4').eq(0),\n          index          = $exampleHeaders.index($section),\n          $followSection = $followMenu.find('.menu > .item'),\n          $activeSection = $followSection.eq(index),\n          inClosedTab    = ($(this).closest('.tab:not(.active)').length > 0),\n          anotherExample = ($(this).filter('.another.example').length > 0),\n          isActive       = $activeSection.hasClass('active')\n        ;\n        if(index !== -1 && !inClosedTab && !anotherExample && !isActive) {\n          $followSection.filter('.active')\n            .removeClass('active')\n          ;\n          $activeSection\n            .addClass('active')\n          ;\n        }\n      }\n    },\n\n    translatePage: function(languageCode, text, $choice) {\n      languageDropdownUsed = true;\n      if(window.Transifex !== undefined) {\n        window.Transifex.live.translateTo(languageCode, true);\n      }\n    },\n\n    showLanguageModal: function(languageCode) {\n      var\n        $choice = $languageDropdown.find('[data-value=\"' + languageCode + '\"]').eq(0),\n        percent = $choice.data('percent') || 0,\n        text    = $choice.text()\n      ;\n      // dont trigger on translate event every page load\n      if(languageDropdownUsed) {\n        if(languageCode == 'zh' && window.location.host.replace('www.','') !== 'semantic-ui.cn') {\n          $chineseModal\n            .modal({\n              closable: false\n            })\n            .modal('show')\n          ;\n        }\n        else if(percent < 100) {\n          languageDropdownUsed = false;\n          $languageModal\n            .modal()\n            .find('.header .name')\n              .html(text)\n              .end()\n            .find('.complete')\n              .html(percent)\n              .end()\n          ;\n          $languageModal\n            .modal('show', function() {\n              $('.language.modal .progress .bar').css('width', percent + '%');\n            })\n          ;\n        }\n      }\n    },\n\n    tryCreateMenu: function(event) {\n      if($(window).width() > 640 && !$('body').hasClass('basic')) {\n        if($container.length > 0 && $container.find('.following.menu').length === 0) {\n          handler.createMenu();\n          handler.createWaypoints();\n          $(window).off('resize.menu');\n        }\n      }\n    },\n\n    createAnchors: function() {\n      $allHeaders\n        .each(function() {\n          var\n            $section = $(this),\n            text     = handler.getText($section),\n            safeName = handler.getSafeName(text),\n            id       = window.escape(safeName),\n            $anchor  = $('').addClass('anchor').attr('id', id)\n          ;\n          $section\n            .append($anchor)\n          ;\n        })\n      ;\n      $example\n        .each(function() {\n          var\n            $title   = $(this).children('h4').eq(0),\n            text     = handler.getText($title),\n            safeName = handler.getSafeName(text),\n            id       = window.escape(safeName),\n            $anchor  = $('').addClass('anchor').attr('id', id)\n          ;\n          if($title.length > 0) {\n            $title.after($anchor);\n          }\n        })\n      ;\n\n    },\n\n    getPageTitle: function() {\n      return $.trim($('h1').eq(0).contents().filter(function() { return this.nodeType == 3; }).text().toLowerCase());\n    },\n    getSafeName: function(text) {\n      return text.replace(/\\s+/g, '-').replace(/[^-,'A-Za-z0-9]+/g, '').toLowerCase();\n    },\n\n    getText: function($element) {\n      $element = ($element.find('a').not('.label, .anchor').length > 0)\n        ? $element.find('a')\n        : $element\n      ;\n      var\n        $text = $element.contents().filter(function(){\n          return this.nodeType == 3;\n        })\n      ;\n      return ($text.length > 0)\n        ? $text[0].nodeValue.trim()\n        : $element.find('a').text().trim()\n      ;\n    },\n\n    createMenu: function() {\n      // grab each h3\n      var\n        html      = '',\n        pageTitle = handler.getPageTitle(),\n        title     = pageTitle.charAt(0).toUpperCase() + pageTitle.slice(1),\n        $sticky,\n        $rail\n      ;\n      $sectionHeaders\n        .each(function(index) {\n          var\n            $currentHeader = $(this),\n            $nextElements  = $currentHeader.nextUntil('h2'),\n            $examples      = $nextElements.find('.example:not(.another)').addBack().filter('.example:not(.another)'),\n            activeClass    = (index === 0)\n              ? 'active '\n              : '',\n            text     = handler.getText($currentHeader),\n            safeName = handler.getSafeName(text),\n            id       = window.escape(safeName),\n            $anchor  = $('').addClass('anchor').attr('id', id)\n          ;\n          html += '
';\n          if($examples.length === 0) {\n            html += '' + $(this).text() + '';\n          }\n          else {\n            html += ' ' + $(this).text() + '';\n          }\n          if($examples.length > 0) {\n            html += '
';\n            $examples\n              .each(function() {\n                var\n                  $title   = $(this).children('h4').eq(0),\n                  text     = handler.getText($title),\n                  safeName = handler.getSafeName(text),\n                  id       = window.escape(safeName),\n                  $anchor  = $('').addClass('anchor').attr('id', id)\n                ;\n                if($title.length > 0) {\n                  html += '' + text + '';\n                }\n              })\n            ;\n            html += '
';\n          }\n          html += '
';\n        })\n      ;\n      $followMenu = $('
')\n        .addClass('ui vertical following fluid accordion text menu')\n        .html(html)\n      ;\n      /* Advert\n      var $advertisement = $('
')\n        .addClass('advertisement')\n        .html('')\n      ;\n      */\n      $sticky = $('
')\n        .addClass('ui sticky')\n        .html($followMenu)\n        //.prepend($advertisement)\n        .prepend('
' + title + '
')\n      ;\n      $rail = $('
')\n        .addClass('ui dividing right rail')\n        .html($sticky)\n        .prependTo($container)\n      ;\n      $sticky.sticky({\n        silent: true,\n        context: $container,\n        container: $('html'),\n        offset: 30\n      });\n      $followMenu\n        .accordion({\n          exclusive: false,\n          animateChildren: false,\n          onChange: function() {\n            $('.ui.sticky').sticky('refresh');\n          }\n        })\n        .find('.menu a[href], .title[href]')\n          .on('click', handler.scrollTo)\n      ;\n    },\n\n    scrollTo: function(event) {\n      var\n        id       = $(this).attr('href').replace('#', ''),\n        $element = $('#' + id),\n        position = $element.offset().top + 10\n      ;\n      $element\n        .addClass('active')\n      ;\n      $('html, body')\n        .stop()\n        .animate({\n          scrollTop: position\n        }, 500)\n      ;\n      location.hash = '#' + id;\n      event.stopImmediatePropagation();\n      event.preventDefault();\n      return false;\n    },\n\n    less: {\n\n      parseFile: function(content) {\n        var\n          variables = {},\n          lines = content.match(/^\\s*(@[\\s|\\S]+?;)/gm),\n          name,\n          value\n        ;\n        if(lines) {\n          $.each(lines, function(index, line) {\n            // clear whitespace\n            line = $.trim(line);\n            // match variables only\n            if(line[0] == '@') {\n              name = line.match(/^@(.+?):/);\n              value = line.match(/:\\s*([\\s|\\S]+?;)/);\n              if( ($.isArray(name) && name.length >= 2) && ($.isArray(value) && value.length >= 2) ) {\n                name = name[1];\n                value = value[1];\n                variables[name] = value;\n              }\n            }\n          });\n        }\n        console.log(variables);\n        return variables;\n      },\n\n      changeTheme: function(theme) {\n        var\n          $themeDropdown = $(this),\n          element        = $themeDropdown.data('element'),\n          urlData     = {\n            theme   : typeof(theme === 'string')\n              ? theme.toLowerCase()\n              : theme,\n            type    : $themeDropdown.data('type'),\n            element : $themeDropdown.data('element')\n          },\n          variables = {\n            theme: urlData.theme\n          }\n        ;\n        variables[element] = urlData.theme;\n        window.less.modifyVars(variables);\n\n        $themeDropdown\n          .api({\n            on       : 'now',\n            debug    : true,\n            action   : 'getVariables',\n            dataType : 'text',\n            urlData  : urlData,\n            onSuccess: function(content) {\n              window.less.modifyVars( handler.less.parseFile(content) );\n              $themeDropdown\n                .api({\n                  on       : 'now',\n                  action   : 'getOverrides',\n                  dataType : 'text',\n                  urlData  : urlData,\n                  onSuccess: function(content) {\n                    if( $('style.override').length > 0 ) {\n                      $('style.override').remove();\n                    }\n                    console.log(content);\n                    $('')\n                      .addClass('override')\n                      .appendTo('body')\n                    ;\n                    $sticky.sticky('refresh');\n                  }\n                })\n              ;\n            }\n          })\n        ;\n      }\n\n    },\n\n    create: {\n      examples: function(json) {\n        var\n          types      = json['Types'],\n          text       = json['Text'],\n          states     = json['States'],\n          variations = json['Variations'],\n\n          $element,\n          html\n        ;\n        $.each(types, function(name, type){\n          html += '
' + name + ' 0)\n          ? 6\n          : 4\n        ;\n      }\n      if(leadingSpaces !== 0) {\n        indent = leadingSpaces;\n      }\n      else {\n        // string has already been trimmed, get first indented line and subtract 2\n        $.each(lines, function(index, line) {\n          leadingSpaces = line.length - line.replace(/^\\s*/g, '').length;\n          if(leadingSpaces !== 0) {\n            indent = leadingSpaces - spacesPerIndent;\n            return false;\n          }\n        });\n      }\n      return indent || 4;\n    },\n\n    generateCode: function() {\n      var\n        $example    = $(this).closest('.example'),\n        $annotation = $example.find('.annotation'),\n        $code       = $annotation.find('.code'),\n        $intro      = $example.children().not('.ignored, h4:first-child').filter('.ui, i:not(.code)').eq(0).prevAll(),\n        $ignored    = $('i.code:last-child, .wireframe, .anchor, .code, .existing, .instructive, .language.label, .annotation, br, .ignore, .ignored'),\n        $demo       = $example.children().not($intro).not($ignored),\n        code        = ''\n      ;\n      if( $code.length === 0) {\n        $demo\n          .each(function() {\n            var\n              $this      = $(this).clone(false),\n              $wireframe = $this.find('.wireframe').add($this.filter('.wireframe'))\n            ;\n            $wireframe\n              .each(function() {\n                var\n                  src       = $(this).attr('src'),\n                  image     = (src.search('image') !== -1),\n                  paragraph = (src.search('paragraph') !== -1)\n                ;\n                if(paragraph) {\n                  $(this).replaceWith('
');\n                }\n                else if(image) {\n                  $(this).replaceWith('');\n                }\n              })\n            ;\n\n            // remove wireframe images\n            $this.find('.wireframe').remove();\n\n            if($this.not('br').not('.wireframe')) {\n              // allow inline styles only with this one class\n              if($this.is('.my-container')) {\n                code += $this.get(0).outerHTML + \"\\n\";\n              }\n              else {\n                code += $this.removeAttr('style').get(0).outerHTML + \"\\n\";\n              }\n            }\n          })\n        ;\n      }\n      $example.data('code', code);\n      return code;\n    },\n\n    copyCode: function() {\n      $(this)\n        .popup('change content', 'Copied to clipboard')\n      ;\n    },\n\n    createCode: function() {\n      var\n        $example        = $(this).closest('.example'),\n        $intro          = $example.children().not('.ignored, h4:first-child').filter('.ui, i:not(.code)').eq(0).prevAll(),\n        $annotation     = $example.find('.annotation'),\n        $code           = $annotation.find('.code'),\n        $html           = $example.children('.html'),\n        $ignoredContent = $('.ui.popup, i.code:last-child, .anchor, .code, .existing.segment, .instructive, .language.label, .annotation, .ignore, style, script, .ignored'),\n        $demo           = $example.children().not($intro).not($ignoredContent),\n        code            = $example.data('code') || $.proxy(handler.generateCode, this)(),\n        $copyCode,\n        $label\n      ;\n\n      // process existing code first\n      if( $code.hasClass('existing') ) {\n        $code.removeClass('existing');\n        $.proxy(handler.initializeCode, $code)(true);\n      }\n\n      // create annotation wrapper\n      if($annotation.length === 0) {\n        $annotation = $('
')\n          .addClass('annotation')\n          .hide()\n          .insertAfter($demo.last())\n        ;\n      }\n\n      if($html.length === 0) {\n        $html     = $('
').insertBefore($annotation);\n        $label    = $('
').html('Example ');\n        $copyCode = $label.find('i.copy');\n        $copyCode\n          .on('click', handler.copyCode)\n          .popup({\n            variation    : 'inverted',\n            distanceAway : 6\n          })\n        ;\n        $label\n          .prependTo($html)\n        ;\n        new Clipboard($copyCode.get(0), {\n          text: function() {\n            var\n              code = $copyCode.closest('.example').data('code') || ''\n            ;\n            return handler.formatCode(code);\n          }\n        });\n        if($demo.length === 0) {\n          $html.addClass('empty');\n        }\n        else {\n          $demo\n            .detach()\n            .prependTo($html)\n          ;\n        }\n      }\n\n      // create code inside annotation wrapper\n      if( $example.find('.instructive').length === 0) {\n        $code = $('
')\n          .data('type', 'html')\n          .addClass('code')\n          .html(code)\n          .hide()\n          .appendTo($annotation)\n        ;\n        $.proxy(handler.initializeCode, $code)(true);\n      }\n      if( $annotation.hasClass('visible') ) {\n        $annotation.transition('hide');\n        $html.removeClass('ui top attached segment');\n      }\n      else {\n        $html.addClass('ui top attached segment');\n        $intro.css('display', '');\n        $annotation.transition('show');\n      }\n      setTimeout(function() {\n        handler.refreshSticky();\n      }, 400);\n    },\n\n    refreshSticky: function() {\n      $sectionHeaders.visibility('refresh');\n      $sectionExample.visibility('refresh');\n      $('.ui.sticky').sticky('refresh');\n      $footer.visibility('refresh');\n      $visibilityExample.visibility('refresh');\n    },\n\n    createAnnotation: function() {\n      if(!$(this).data('type')) {\n        $(this).data('type', 'html');\n      }\n      $(this)\n        .wrap('
')\n        .parent()\n        .hide()\n      ;\n    },\n\n    makeCode: function() {\n      if(window.hljs !== undefined) {\n        $code\n          .filter(':visible')\n          .each(handler.initializeCode)\n        ;\n        $existingCode\n          .each(handler.createAnnotation)\n        ;\n      }\n      else {\n        console.log('Syntax highlighting not found');\n      }\n    },\n\n    highlightClasses: function($code) {\n      var\n        $closestExample = $code.closest('.example'),\n        $example        = ($closestExample.length === 0)\n          ? $code.closest('.segment').prevAll('.example').not('.another').eq(0)\n          : ($closestExample.hasClass('another'))\n            ? $closestExample.prevAll('.example').not('.another').eq(0)\n            : $closestExample,\n        $header     = $example.find('h4').eq(0),\n        $attributes = $code.find('.attribute, .class'),\n        $tags       = $code.find('.title'),\n        pageName    = handler.getPageTitle(),\n        name        = handler.getText($header).toLowerCase(),\n        classes     = $example.data('class') || '',\n        tags        = $example.data('tag')  || false,\n        useContent  = $example.data('use-content') || false\n      ;\n      // Add title\n      if(name) {\n        if(name == pageName) {\n          name = 'ui ' + name;\n        }\n        classes = (classes === '')\n          ? name\n          : classes + ',' + name\n        ;\n      }\n      // Add common variations\n      classes = classes.replace('text alignment', \"left aligned, right aligned, justified, center aligned\");\n      classes = classes.replace('floated', \"right floated,left floated,floated\");\n      classes = classes.replace('floating', \"right floated,left floated,floated\");\n      classes = classes.replace('horizontally aligned', \"left aligned, center aligned, right aligned, justified\");\n      classes = classes.replace('vertically aligned', \"top aligned, middle aligned, bottom aligned\");\n      classes = classes.replace('vertically attached', \"attached\");\n      classes = classes.replace('horizontally attached', \"attached\");\n      classes = classes.replace('padded', \"very padded, padded\");\n      classes = classes.replace('relaxed', \"very relaxed, relaxed\");\n      classes = classes.replace('attached', \"left attached,right attached,top attached,bottom attached,attached\");\n      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\");\n      classes = classes.replace('count', \"one,two,three,four,five,six,seven,eight,nine,ten,eleven,twelve,thirteen,fourteen,fifteen,sixteen\");\n      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\");\n      classes = classes.replace('evenly divided', \"one,two,three,four,five,six,seven,eight,nine,ten,eleven,twelve,thirteen,fourteen,fifteen,sixteen\");\n      classes = classes.replace('size', \"mini,tiny,small,medium,large,big,huge,massive\");\n      classes = classes.replace('emphasis', \"primary,secondary,tertiary\");\n      classes = classes.replace('colored', \"red,orange,yellow,olive,green,teal,blue,violet,purple,pink,brown,grey,black\");\n      classes = (classes !== '')\n        ? classes.split(',')\n        : []\n      ;\n      // highlight tags if asked\n      if(tags) {\n        tags = (tags !== '')\n          ? tags.split(',')\n          : []\n        ;\n        $tags.each(function() {\n          var\n            $tag    = $(this),\n            tagHTML = $tag.html(),\n            newHTML = false\n          ;\n          $.each(tags, function(index, tag) {\n            if(tagHTML == tag) {\n              newHTML = tagHTML.replace(tag, '' + tag + '');\n            }\n          });\n          if(newHTML) {\n            $tag\n              .addClass('class')\n              .html(newHTML)\n            ;\n          }\n        });\n      }\n      // highlight classes\n      $attributes.each(function() {\n        var\n          $attribute    = $(this),\n          attributeHTML = $attribute.html(),\n          $tag,\n          $value,\n          tagHTML,\n          isUI,\n          isPageElement,\n          isOtherUI,\n          isOtherIcon,\n          classNames,\n          classString,\n          html,\n          newHTML\n        ;\n        // only parse classes\n        if(attributeHTML.search('class') === -1) {\n          return true;\n        }\n        $value        = $attribute.next('.value, .string').eq(0);\n        $tag          = $attribute.prev('.title').eq(0);\n        tagHTML       = $tag.html();\n        html          = $value.html();\n        classNames    = html.replace(/\\\"/g, '').split(' ');\n\n        isUI          = (html.search('ui') !== -1);\n        isPageElement = (html.search(pageName) > 0);\n        isOtherUI     = (!isPageElement && isUI);\n        isOtherIcon   = (!isPageElement && tagHTML === 'i' && html.search('icon') !== -1);\n        // check if any class match\n        $.each(classes, function(index, string) {\n          var\n            className      = $.trim(string),\n            isClassMatch   = (html.search(className) !== -1)\n          ;\n          if(className === '') {\n            return true;\n          }\n          // class match on current page element (or content if allowed)\n          if(isClassMatch && (isPageElement || useContent) ) {\n            newHTML = html.replace(className, '' + className + '');\n            return false;\n          }\n        });\n\n        // generate links to other UI\n        if(isOtherUI || isOtherIcon) {\n          html           = newHTML || html;\n          classString    = /^\\\"(.*)\\\"/g.exec(html);\n          if(!classString || classString.length < 2) {\n            return true;\n          }\n          classString = classString[1];\n          $.each(classNames, function(index, string){\n            var\n              className = string.replace('\"', '')\n            ;\n            // yep..\n            if(className == 'item') {\n              return;\n            }\n            if(metadata && metadata[className] && metadata[className].url) {\n              // we found a match\n              newHTML = html.replace(classString, '' + classString + '');\n            }\n          });\n        }\n\n        if(newHTML) {\n          $value\n            .addClass('class')\n            .html(newHTML)\n          ;\n        }\n      });\n\n    },\n\n    formatCode: function(code) {\n      var\n        indent     = handler.getIndent(code) || 2,\n        whiteSpace = new RegExp('\\\\n\\\\s{' + indent + '}', 'g')\n      ;\n      return $.trim(code).replace(whiteSpace, '\\n');\n    },\n\n    initializeCode: function(codeSample) {\n      var\n        $code         = $(this).show(),\n        $codeTag      = $(''),\n        codeSample    = codeSample || false,\n        code          = $code.html(),\n        existingCode  = $code.hasClass('existing'),\n        evaluatedCode = $code.hasClass('evaluated'),\n        contentType   = $code.data('type')     || 'html',\n        title         = $code.data('title')    || false,\n        less          = $code.data('less')     || false,\n        demo          = $code.data('demo')     || false,\n        eval          = $code.data('eval')     || false,\n        preview       = $code.data('preview')  || false,\n        label         = $code.data('label')    || false,\n        preserve      = $code.data('preserve') || false,\n        escape        = $code.data('escape') || false,\n        displayType   = {\n          html       : 'HTML',\n          javascript : 'Javascript',\n          css        : 'CSS',\n          text       : 'Command Line',\n          sh         : 'Command Line'\n        },\n        padding    = 20,\n        name = (codeSample === true)\n          ? 'instructive bottom attached'\n          : 'existing',\n        formattedCode = code,\n        styledCode,\n        $example,\n        $label,\n        codeHeight\n      ;\n      var entityMap = {\n        \"&\"  : \"&\",\n        \"<\"   : \"<\",\n        \">\"   : \">\",\n        '"' : '\"',\n        '''  : \"'\",\n        '/' : \"/\"\n      };\n      contentType = contentType.toLowerCase();\n\n      function escapeHTML(string) {\n        return $('
').html(string).text();\n      }\n\n\n      // escape html entities\n      if(contentType != 'html' || escape) {\n        code = escapeHTML(code);\n      }\n\n      // evaluate if specified\n      if(evaluatedCode) {\n        window.eval(code);\n      }\n\n      // should trim whitespace\n      if(preserve) {\n        formattedCode = code;\n      }\n      else {\n        formattedCode = handler.formatCode(code);\n      }\n\n      // color code\n      formattedCode = window.hljs.highlightAuto(formattedCode);\n\n      // create  tag\n      $codeTag\n        .addClass($code.attr('class'))\n        .addClass(formattedCode.language)\n        .html(formattedCode.value)\n      ;\n      // replace 
 with \n      $code.replaceWith($codeTag);\n      $code = $codeTag;\n      $code\n        .wrap('
')\n        .wrap('
')\n      ;\n\n      if(contentType == 'html') {\n        // add class emphasis to used classes\n        handler.highlightClasses($code);\n      }\n\n      // add label\n      if(title) {\n        $('
')\n          .addClass('ui attached top label')\n          .html('' + title + '' + '' + (displayType[contentType] || contentType) + '')\n          .prependTo( $code.closest('.segment') )\n        ;\n      }\n      if(label) {\n        $('
')\n          .addClass('ui pointing below ignored language label')\n          .html(displayType[contentType] || contentType)\n          .insertBefore ( $code.closest('.segment') )\n        ;\n      }\n      // add apply less button\n      if(less) {\n        $('')\n          .addClass('ui black pointing below ignored label')\n          .html('Apply Theme')\n          .on('click', function() {\n            window.less.modifyVars( handler.less.parseFile( code ) );\n          })\n          .insertBefore ( $code.closest('.segment') )\n        ;\n      }\n      // add run code button\n      if(demo) {\n        $('')\n          .addClass('ui black pointing below ignored label')\n          .html('Run Code')\n          .on('click', function() {\n            if(eval) {\n              window.eval(eval);\n            }\n            else {\n              window.eval(code);\n            }\n          })\n          .insertBefore ( $code.closest('.segment') )\n        ;\n      }\n      // add preview if specified\n      if(preview) {\n        $(code)\n          .insertAfter( $code.closest('.segment') )\n        ;\n      }\n\n      $code.removeClass('hidden');\n\n    },\n\n    resetDownloads: function() {\n      $downloads\n        .find('.grid')\n        .hide()\n        .filter('.choice.grid')\n          .show()\n      ;\n    },\n\n    selectAll: function () {\n      this.setSelectionRange(0, this.value.length);\n    },\n\n    chooseStandalone: function() {\n      $downloads\n        .find('.grid')\n        .hide()\n        .filter('.standalone.grid')\n          .show()\n      ;\n      $downloadPopup.popup('reposition');\n    },\n\n    chooseFramework: function() {\n      $downloads\n        .find('.grid')\n        .hide()\n        .filter('.framework.grid')\n          .show()\n      ;\n      $downloadPopup.popup('reposition');\n    },\n\n    swapStyle: function() {\n      var\n        theme = $(this).data('theme')\n      ;\n      $(this)\n        .addClass('active')\n        .siblings()\n          .removeClass('active')\n      ;\n      $('head link.ui')\n        .each(function() {\n          var\n            href         = $(this).attr('href'),\n            subDirectory = href.split('/')[3],\n            newLink      = href.replace(subDirectory, theme)\n          ;\n          $(this)\n            .attr('href', newLink)\n          ;\n        })\n      ;\n    }\n  };\n\n  semantic.handler = handler;\n\n  // code highlighting languages\n  window.hljs.configure({\n    classPrefix : '',\n    languages   : [\n      'xml',\n      'bash',\n      'css',\n      'less',\n      'javascript'\n    ]\n  });\n\n  // add anchors to docs headers\n  handler.createAnchors();\n\n  // register less files\n  window.less.registerStylesheets();\n\n\n  // load page tabs\n  if( $pageTabs.length > 0 ) {\n    $pageTabs\n      .tab({\n        context      : '.main.container',\n        childrenOnly : true,\n        history      : true,\n        onFirstLoad  : function() {\n          handler.makeCode();\n\n          $container = ($('.fixed.column').length > 0 )\n            ? $(this).find('.examples')\n            : $(this)\n          ;\n          $(this).find('> .rail .ui.sticky, .fixed .ui.sticky')\n            .sticky({\n              context: $container,\n              container: $('html'),\n              silent: true,\n              offset: 30\n            })\n          ;\n          $sectionHeaders = $container.children('h2');\n          $sectionExample = $container.find('.example');\n          $exampleHeaders = $sectionExample.children('h4');\n          // create code\n          handler.tryCreateMenu();\n          $(window).on('resize.menu', function() {\n            handler.tryCreateMenu();\n          });\n          handler.scrollToHash();\n        },\n        onLoad : function() {\n          $(this).find('.ui.sticky')\n            .sticky('refresh')\n          ;\n        }\n      })\n    ;\n  }\n  else {\n    handler.makeCode();\n    handler.tryCreateMenu();\n    $(window).on('resize.menu', function() {\n      handler.tryCreateMenu();\n    });\n  }\n\n  $shownExample\n    .each(handler.createCode)\n  ;\n  $prerenderedExample\n    .each(handler.generateCode)\n  ;\n\n  // main sidebar\n  $menu\n    .sidebar({\n      dimPage          : true,\n      transition       : 'overlay',\n      mobileTransition : 'uncover'\n    })\n  ;\n\n  // launch buttons\n  $menu\n    .sidebar('attach events', '.launch.button, .view-ui, .launch.item')\n  ;\n\n  handler.createIcon();\n\n  if(expertiseLevel < 2 && $(window).width() > 640) {\n    $popupExample\n      .each(function() {\n        $(this)\n          .popup({\n            preserve: false,\n            on       : 'hover',\n            variation: 'inverted',\n            delay: {\n              show: 500,\n              hide: 100\n            },\n            position : 'top left',\n            content  : 'View Source',\n            target   : $(this).find('i.code')\n          })\n          .find('i.code')\n            .on('click', function() {\n              $.cookie('expertiseLevel', 2, {\n                expires: 365\n              });\n            })\n        ;\n      })\n    ;\n  }\n\n  $menuMusic\n    .on('click', handler.openMusic)\n  ;\n\n  $downloadPopup\n    .popup({\n      transition : 'horizontal flip',\n      duration   : 350,\n      position   : 'bottom center',\n      on         : 'click',\n      onHidden   : handler.resetDownloads\n    })\n  ;\n  $downloadInput\n    .on('mouseup', handler.selectAll)\n  ;\n  $downloadFramework\n    .on('click', handler.chooseFramework)\n  ;\n  $downloadStandalone\n    .on('click', handler.chooseStandalone)\n  ;\n\n  $themeDropdown\n    .dropdown({\n      allowTab: false,\n      onChange: handler.less.changeTheme\n    })\n  ;\n\n  if($.fn.tablesort !== undefined && $sortTable.length > 0) {\n    $sortTable\n      .tablesort()\n    ;\n  }\n\n  $helpPopup\n    .popup({\n      position: 'top left',\n      variation: 'inverted'\n    })\n  ;\n\n  $swap\n    .on('click', handler.swapStyle)\n  ;\n\n\n  $menuPopup\n    .add($languageDropdown)\n    .popup({\n      position  : 'bottom center',\n      delay: {\n        show: 100,\n        hide: 50\n      }\n    })\n  ;\n\n  $pageDropdown\n    .dropdown({\n      on       : 'hover',\n      action   : 'nothing',\n      allowTab : false\n    })\n  ;\n\n  $languageDropdown\n    .dropdown({\n      allowTab       : false,\n      on             : 'click',\n      fullTextSearch : 'exact',\n      match          : 'text',\n      onShow         : function() {\n        $(this).popup('hide');\n      },\n      onChange        : handler.translatePage\n    })\n  ;\n\n  //$.fn.api.settings.base = '//api.semantic-ui.com';\n  $.extend($.fn.api.settings.api, {\n    categorySearch     : '//api.semantic-ui.com/search/category/{query}',\n    getOverrides       : '/src/themes/{$theme}/{$type}s/{$element}.overrides',\n    getVariables       : '/src/themes/{$theme}/{$type}s/{$element}.variables',\n    search             : '//api.semantic-ui.com/search/{query}'\n  });\n\n  if(window.Transifex !== undefined) {\n    window.Transifex.live.onTranslatePage(handler.showLanguageModal);\n  }\n\n  if(typeof detectAdBlock === 'undefined') {\n    handler.showBeg();\n  }\n  else {\n    detectAdBlock.onDetected(handler.showBeg);\n  }\n\n  var\n    selector = (window.location.hash || '').replace(/^#\\//, '#')\n  ;\n  if(selector) {\n    handler.scrollToSelector = selector;\n  }\n\n  handler.getMetadata();\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.ready)\n;\n"
  },
  {
    "path": "server/files/javascript/dropdown.js",
    "content": "semantic.dropdown = {};\n\n// ready event\nsemantic.dropdown.ready = function() {\n\n  // selector cache\n  var\n    $examples         = $('.example'),\n    $hoverDropdown    = $examples.filter('.hover').find('.ui.dropdown'),\n    $clearingDropdown = $examples.filter('.clearing').find('.ui.dropdown'),\n    $buttonDropdown   = $examples.filter('.button.example').find('.ui.dropdown'),\n    $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'),\n    $transition       = $examples.filter('.transition').find('.ui.dropdown'),\n    $simpleDropdown   = $examples.filter('.simple').find('.ui.dropdown'),\n    $transitionButton = $examples.filter('.transition').find('.ui.button').first(),\n    $categoryDropdown = $examples.filter('.category').find('.ui.dropdown'),\n    // alias\n    handler\n  ;\n\n  // event handlers\n  handler = {\n\n  };\n\n  $transitionButton\n    .on('click', function(event) {\n      $transition.dropdown('toggle');\n      event.stopImmediatePropagation();\n    })\n  ;\n\n  $clearingDropdown\n    .dropdown({\n      clearable: true\n    })\n  ;\n\n  $transition\n    .dropdown({\n      onChange: function(value) {\n        $transition.dropdown('setting', 'transition', value);\n      }\n    })\n  ;\n\n  $categoryDropdown\n    .dropdown({\n      allowCategorySelection: true\n    })\n  ;\n\n  $dropdown\n    .dropdown()\n  ;\n  $hoverDropdown\n    .dropdown({\n      on: 'hover',\n      action: 'hide'\n    })\n  ;\n  $simpleDropdown\n    .dropdown({\n      action: 'hide'\n    })\n  ;\n  $buttonDropdown\n    .dropdown({\n      action: 'hide'\n    })\n  ;\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.dropdown.ready)\n;\n"
  },
  {
    "path": "server/files/javascript/embed.js",
    "content": "semantic.embed = {};\n\n// ready event\nsemantic.embed.ready = function() {\n\n  // selector cache\n  var\n    // alias\n    $myfavesEmbed = $('.example').eq(0).find('iframe'),\n    handler\n  ;\n\n  // event handlers\n  handler = {\n\n  };\n\n  $('.embed.example .ui.embed')\n    .embed()\n  ;\n  $('.existing.code .embed').removeClass('embed').addClass('ui embed');\n\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.embed.ready)\n;"
  },
  {
    "path": "server/files/javascript/form.js",
    "content": "semantic.validateForm = {};\n\n// ready event\nsemantic.validateForm.ready = function() {\n\n  // selector cache\n  var\n    $codeDropdown = $('.existing.code .dropdown'),\n    $dropdown     = $('.main.container .ui.dropdown').not($codeDropdown),\n    // alias\n    handler\n  ;\n\n  // event handlers\n  handler = {\n\n  };\n\n  $dropdown\n    .dropdown()\n  ;\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.validateForm.ready)\n;\n"
  },
  {
    "path": "server/files/javascript/grid.js",
    "content": "semantic.grid = {};\n\n// ready event\nsemantic.grid.ready = function() {\n\n  $('.animation.checkbox')\n    .checkbox({\n      onChecked: function() {\n        $('body').addClass('animated');\n      },\n      onUnchecked: function() {\n        $('body').removeClass('animated');\n      }\n    })\n  ;\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.grid.ready)\n;"
  },
  {
    "path": "server/files/javascript/header.js",
    "content": "semantic.header = {};\n\n// ready event\nsemantic.header.ready = function() {\n\n  // selector cache\n  var\n    $increaseFont     = $('.font .increase'),\n    $decreaseFont     = $('.font .decrease'),\n\n    // alias\n    handler\n  ;\n\n  // event handlers\n  handler = {\n    font: {\n\n      increase: function() {\n        var\n          $container = $(this).parent().next('.sizer'),\n          fontSize   = parseInt( $container.css('font-size'), 10)\n        ;\n        $container\n          .css('font-size', fontSize + 1)\n        ;\n      },\n      decrease: function() {\n        var\n          $container = $(this).parent().next('.sizer'),\n          fontSize   = parseInt( $container.css('font-size'), 10)\n        ;\n        $container\n          .css('font-size', fontSize - 1)\n        ;\n      }\n    }\n  };\n\n  $increaseFont\n    .on('click', handler.font.increase)\n  ;\n  $decreaseFont\n    .on('click', handler.font.decrease)\n  ;\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.header.ready)\n;"
  },
  {
    "path": "server/files/javascript/home.js",
    "content": "semantic.home = {};\n\n// ready event\nsemantic.home.ready = function() {\n\n  var\n    $themeDropdown = $('.theme.dropdown'),\n    $header        = $('.masthead'),\n    $ui            = $header.find('h1 b'),\n    $phrase        = $header.find('h1 span'),\n    $download      = $header.find('.download'),\n    $library       = $header.find('.library'),\n    $cursor        = $header.find('.typed-cursor'),\n    $version       = $header.find('.version'),\n    $themeButton   = $('.theming .source.button'),\n    $themeGrid     = $('.theming .source.grid'),\n\n    handler\n  ;\n\n  handler = {\n    getRandomInt: function(min, max) {\n      return Math.floor(Math.random() * (max - min + 1)) + min;\n    },\n    introduction: function() {\n      var\n        background = 'bg' + handler.getRandomInt(1, 14)\n      ;\n      // zoom out\n      $header\n        .addClass(background)\n        .removeClass('zoomed')\n      ;\n    },\n    changeLogo: function() {\n      var\n        $logo = $('.following .logo'),\n        $nextSide = $logo.find('.'+ $(this).data('site') +'.side'),\n        directions = [\n          'up',\n          'left',\n          'down',\n          'right'\n        ],\n        direction = directions[Math.floor(Math.random() * directions.length)]\n      ;\n      if($nextSide.length > 0) {\n        clearTimeout(handler.timer);\n        handler.timer = setTimeout(function() {\n          $logo\n            .shape('set next side', $nextSide)\n            .shape('flip ' +  direction)\n          ;\n        }, 50);\n      }\n    },\n    returnLogo: function() {\n      var\n        $logo = $('.following .logo'),\n        $nextSide = $logo.find('.ui.side')\n      ;\n      clearTimeout(handler.timer);\n      handler.timer = setTimeout(function() {\n        $logo\n          .shape('set next side', $nextSide)\n          .shape('flip over')\n        ;\n      }, 500);\n\n    },\n\n    less: {\n\n      parseFile: function(content) {\n        var\n          variables = {},\n          lines = content.match(/^\\s*(@[\\s|\\S]+?;)/gm),\n          name,\n          value\n        ;\n        if(lines) {\n          $.each(lines, function(index, line) {\n            // clear whitespace\n            line = $.trim(line);\n            // match variables only\n            if(line[0] == '@') {\n              name = line.match(/^@(.+?):/);\n              value = line.match(/:\\s*([\\s|\\S]+?;)/);\n              if( ($.isArray(name) && name.length >= 2) && ($.isArray(value) && value.length >= 2) ) {\n                name = name[1];\n                value = value[1];\n                variables[name] = value;\n              }\n            }\n          });\n        }\n        console.log(variables);\n        return variables;\n      },\n\n      changeTheme: function(theme) {\n        var\n          $themeDropdown     = $(this),\n          $variableCode      = $('.variable.code'),\n          $overrideCode      = $('.override.code'),\n          $existingVariables = $variableCode.closest('.existing'),\n          $existingOverrides  = $overrideCode.closest('.existing'),\n\n          variableURL = '/src/themes/{$theme}/{$type}s/{$element}.variables',\n          overrideURL = '/src/themes/{$theme}/{$type}s/{$element}.overrides',\n          urlData     = {\n            theme   : typeof(theme === 'string')\n              ? theme.toLowerCase()\n              : theme,\n            type    : $themeDropdown.data('type'),\n            element : $themeDropdown.data('element')\n          }\n        ;\n        if($existingVariables.length > 0) {\n          $variableCode = $('
');\n          $variableCode\n            .insertAfter($existingVariables)\n          ;\n          $existingVariables.remove();\n          console.log($variableCode);\n        }\n\n        if($existingOverrides.length > 0) {\n          $overrideCode = $('
');\n          $overrideCode\n            .insertAfter($existingOverrides)\n          ;\n          $existingOverrides.remove();\n          console.log($overrideCode);\n        }\n\n        $themeDropdown\n          .api({\n            on       : 'now',\n            url      : variableURL,\n            dataType : 'text',\n            urlData  : urlData,\n            onSuccess: function(content) {\n              window.less.modifyVars( handler.less.parseFile(content) );\n              $themeDropdown\n                .api({\n                  on       : 'now',\n                  url      : overrideURL,\n                  dataType : 'text',\n                  urlData  : urlData,\n                  onSuccess: function(content) {\n                    if( $('style.override').length > 0 ) {\n                      $('style.override').remove();\n                    }\n                    $('')\n                      .addClass('override')\n                      .appendTo('body')\n                    ;\n                    $('.sticky').sticky('refresh');\n\n                    $overrideCode.html(content);\n                    $.proxy(semantic.handler.initializeCode, $overrideCode[0])();\n                  }\n                })\n              ;\n              $variableCode.html(content);\n              $.proxy(semantic.handler.initializeCode, $variableCode[0])();\n            }\n          })\n        ;\n      }\n    },\n    showThemeButton: function(value, text) {\n      if(!$themeButton.transition('is visible')) {\n        $themeButton.transition('scale in');\n      }\n      $.proxy(handler.less.changeTheme, this)(value);\n    },\n    createDemos: function() {\n      $('.demo.menu .item, .demo.buttons .button')\n        .on('click', function() {\n          if(!$(this).hasClass('dropdown')) {\n            $(this)\n              .addClass('active')\n              .closest('.ui.menu, .ui.buttons')\n              .find('.item, .button')\n                .not($(this))\n                .removeClass('active')\n            ;\n          }\n        })\n      ;\n      $('.example .message .close')\n        .on('click', function() {\n          $(this).closest('.message').transition('scale out');\n        })\n      ;\n    },\n    toggleTheme: function() {\n      $(this).toggleClass('active');\n      $themeGrid.toggleClass('visible');\n    }\n  };\n\n  // intro\n  handler.introduction();\n\n  if($(window).width() > 600) {\n    $('body')\n      .visibility({\n        offset         : -10,\n        observeChanges : false,\n        once           : false,\n        continuous     : false,\n        onTopPassed: function() {\n          requestAnimationFrame(function() {\n            $('.following.bar')\n              .addClass('light fixed')\n              .find('.menu')\n                .removeClass('inverted')\n            ;\n            $('.following .additional.item')\n              .transition('scale in', 750)\n            ;\n          });\n        },\n        onTopPassedReverse: function() {\n          requestAnimationFrame(function() {\n            $('.following.bar')\n              .removeClass('light fixed')\n              .find('.menu')\n                .addClass('inverted')\n                .find('.additional.item')\n                  .transition('hide')\n            ;\n          });\n        }\n      })\n    ;\n  }\n  $('.additional.item')\n    .popup({\n      delay: {\n        show: 200,\n        hide: 50\n      },\n      position: 'bottom center'\n    })\n  ;\n\n  $('.email.stripe form')\n    .form({\n      fields: {\n        email: {\n          identifier : 'email',\n          rules: [\n            {\n              type   : 'empty',\n              prompt : 'Please enter an e-mail'\n            },\n            {\n              type   : 'email',\n              prompt : 'Please enter a valid e-mail address'\n            }\n          ]\n        }\n      }\n    })\n  ;\n\n\n\n  $themeDropdown\n    .dropdown('setting', 'transition', 'drop')\n    .dropdown('setting', 'duration', 350)\n    .dropdown('setting', 'action', 'activate')\n    .dropdown('setting', 'onChange', handler.showThemeButton)\n  ;\n\n  $themeButton\n    .on('click', handler.toggleTheme)\n  ;\n\n\n  // demos\n  $('.demo .checkbox')\n    .checkbox()\n  ;\n  $('.demo .accordion')\n    .accordion()\n  ;\n  $('.demo .dimmer')\n    .dimmer({\n      on: 'hover'\n    })\n  ;\n  $('.demo .ui.dropdown')\n    .dropdown()\n  ;\n\n  if(window.Transifex !== undefined) {\n    window.Transifex.live.onTranslatePage(function(countryCode){\n      var fullName = $('.language.dropdown .item[data-value=' + countryCode + ']').eq(0).text();\n      $('.language.dropdown > .text').html(fullName);\n    });\n  }\n\n  $('.ui.sidebar')\n    .sidebar('setting', {\n      transition: 'overlay'\n    })\n  ;\n\n  handler.createDemos();\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.home.ready)\n;\n"
  },
  {
    "path": "server/files/javascript/icon.js",
    "content": "semantic.icon = {};\n\n// ready event\nsemantic.icon.ready = function() {\n\n  // selector cache\n  var\n    $iconSearch = $('iconSearch.ui.search'),\n    $grid       = $('.ui.five.column.doubling.grid'),\n    // alias\n    handler = {\n      getIconList: function() {\n        var\n          $examples   = $('.icon .example')\n          icons       = []\n        ;\n        $examples.each(function() {\n          var\n            $header  = $(this).children('.ui.header'),\n            $icons   = $(this).find('.grid > .column'),\n            category = $header.text()\n          ;\n          $icons.each(function() {\n            var\n              $icon = $(this).find('.icon'),\n              icon  = $icon.attr('class').replace(' icon', '')\n              title = ' ' + icon\n            ;\n            if(!_.findWhere(icons, { icon: icon})) {\n              icons.push({\n                category : category,\n                title    : title,\n                icon     : icon\n              });\n            }\n          });\n        });\n        return icons;\n      }\n    }\n  ;\n\n  if($iconSearch.length > 0) {\n\n    $iconSearch\n      .search({\n        type          : 'category',\n        minCharacters : 1,\n        maxResults    : 10,\n        source        : handler.getIconList(),\n        onResults     : function(result) {\n          setTimeout(function() {\n            var\n              $results = $('iconSearch.ui.search .result')\n            ;\n            $results.each(function() {\n              var\n                $result = $(this)\n              ;\n              new Clipboard(this, {\n                text: function() {\n                  var\n                    iconHTML = $result.find('i').get(0).outerHTML\n                  ;\n                  return iconHTML;\n                }\n            });\n            });\n          }, 0);\n        },\n        onSelect: function() {\n          var\n            $search = $('iconSearch .input > input')\n          ;\n          $search.blur();\n          setTimeout(function() {\n            $('iconSearch input').transition('glow');\n            $search.val('Copied to clipboard!');\n          }, 50)\n          setTimeout(function() {\n            $search.val('');\n          }, 1500)\n          return false;\n        }\n      })\n    ;\n\n  }\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.icon.ready)\n;\n"
  },
  {
    "path": "server/files/javascript/input.js",
    "content": "semantic.input = {};\n\n// ready event\nsemantic.input.ready = function() {\n\n  $('.main.container .ui.dropdown').dropdown();\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.input.ready)\n;"
  },
  {
    "path": "server/files/javascript/item.js",
    "content": "semantic.item = {};\n\n// ready event\nsemantic.item.ready = function() {\n\n  // selector cache\n  $('.item .favorite.icon, .item .like.icon')\n    .state()\n  ;\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.item.ready)\n;"
  },
  {
    "path": "server/files/javascript/library/clipboard.js",
    "content": "/*!\n * clipboard.js v1.5.2\n * https://zenorocha.github.io/clipboard.js\n *\n * Licensed MIT © Zeno Rocha\n */\n(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)) {\n      options = $.extend({}, config.defaults, options);\n\n      if (typeof options.expires === 'number') {\n        var days = options.expires, t = options.expires = new Date();\n        t.setMilliseconds(t.getMilliseconds() + days * 864e+5);\n      }\n\n      return (document.cookie = [\n        encode(key), '=', stringifyCookieValue(value),\n        options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE\n        options.path    ? '; path=' + options.path : '',\n        options.domain  ? '; domain=' + options.domain : '',\n        options.secure  ? '; secure' : ''\n      ].join(''));\n    }\n\n    // Read\n\n    var result = key ? undefined : {},\n      // To prevent the for loop in the first place assign an empty array\n      // in case there are no cookies at all. Also prevents odd result when\n      // calling $.cookie().\n      cookies = document.cookie ? document.cookie.split('; ') : [],\n      i = 0,\n      l = cookies.length;\n\n    for (; i < l; i++) {\n      var parts = cookies[i].split('='),\n        name = decode(parts.shift()),\n        cookie = parts.join('=');\n\n      if (key === name) {\n        // If second argument (value) is a function it's a converter...\n        result = read(cookie, value);\n        break;\n      }\n\n      // Prevent storing a cookie that we couldn't decode.\n      if (!key && (cookie = read(cookie)) !== undefined) {\n        result[name] = cookie;\n      }\n    }\n\n    return result;\n  };\n\n  config.defaults = {};\n\n  $.removeCookie = function (key, options) {\n    // Must not alter options, thus extending a fresh object...\n    $.cookie(key, '', $.extend({}, options, { expires: -1 }));\n    return !$.cookie(key);\n  };\n\n}));"
  },
  {
    "path": "server/files/javascript/library/detect.js",
    "content": "/*\n * DetectAdBlock 3.2.1\n * Copyright (c) 2015 Valentin Allaire \n * Released under the MIT license\n * https://github.com/sitexw/DetectAdBlock\n */\n\n(function(window) {\n  var DetectAdBlock = function(options) {\n    this._options = {\n      checkOnLoad:    false,\n      resetOnEnd:     false,\n      loopCheckTime:    50,\n      loopMaxNumber:    5,\n      baitClass:      'pub_300x250 pub_300x250m pub_728x90 text-ad textAd text_ad text_ads text-ads text-ad-links',\n      baitStyle:      'width: 1px !important; height: 1px !important; position: absolute !important; left: -10000px !important; top: -1000px !important;',\n      debug:        false\n    };\n    this._var = {\n      version:      '3.2.1',\n      bait:       null,\n      checking:     false,\n      loop:       null,\n      loopNumber:     0,\n      event:        { detected: [], notDetected: [] }\n    };\n    if(options !== undefined) {\n      this.setOption(options);\n    }\n    var self = this;\n    var eventCallback = function() {\n      setTimeout(function() {\n        if(self._options.checkOnLoad === true) {\n          if(self._options.debug === true) {\n            self._log('onload->eventCallback', 'A check loading is launched');\n          }\n          if(self._var.bait === null) {\n            self._creatBait();\n          }\n          setTimeout(function() {\n            self.check();\n          }, 1);\n        }\n      }, 1);\n    };\n    if(window.addEventListener !== undefined) {\n      window.addEventListener('load', eventCallback, false);\n    } else {\n      window.attachEvent('onload', eventCallback);\n    }\n  };\n  DetectAdBlock.prototype._options = null;\n  DetectAdBlock.prototype._var = null;\n  DetectAdBlock.prototype._bait = null;\n\n  DetectAdBlock.prototype._log = function(method, message) {\n    console.log('[DetectAdBlock]['+method+'] '+message);\n  };\n\n  DetectAdBlock.prototype.setOption = function(options, value) {\n    if(value !== undefined) {\n      var key = options;\n      options = {};\n      options[key] = value;\n    }\n    for(var option in options) {\n      this._options[option] = options[option];\n      if(this._options.debug === true) {\n        this._log('setOption', 'The option \"'+option+'\" he was assigned to \"'+options[option]+'\"');\n      }\n    }\n    return this;\n  };\n\n  DetectAdBlock.prototype._creatBait = function() {\n    var bait = document.createElement('div');\n      bait.setAttribute('class', this._options.baitClass);\n      bait.setAttribute('style', this._options.baitStyle);\n    this._var.bait = window.document.body.appendChild(bait);\n\n    this._var.bait.offsetParent;\n    this._var.bait.offsetHeight;\n    this._var.bait.offsetLeft;\n    this._var.bait.offsetTop;\n    this._var.bait.offsetWidth;\n    this._var.bait.clientHeight;\n    this._var.bait.clientWidth;\n\n    if(this._options.debug === true) {\n      this._log('_creatBait', 'Bait has been created');\n    }\n  };\n  DetectAdBlock.prototype._destroyBait = function() {\n    window.document.body.removeChild(this._var.bait);\n    this._var.bait = null;\n\n    if(this._options.debug === true) {\n      this._log('_destroyBait', 'Bait has been removed');\n    }\n  };\n\n  DetectAdBlock.prototype.check = function(loop) {\n    if(loop === undefined) {\n      loop = true;\n    }\n\n    if(this._options.debug === true) {\n      this._log('check', 'An audit was requested '+(loop===true?'with a':'without')+' loop');\n    }\n\n    if(this._var.checking === true) {\n      if(this._options.debug === true) {\n        this._log('check', 'A check was canceled because there is already an ongoing');\n      }\n      return false;\n    }\n    this._var.checking = true;\n\n    if(this._var.bait === null) {\n      this._creatBait();\n    }\n\n    var self = this;\n    this._var.loopNumber = 0;\n    if(loop === true) {\n      this._var.loop = setInterval(function() {\n        self._checkBait(loop);\n      }, this._options.loopCheckTime);\n    }\n    setTimeout(function() {\n      self._checkBait(loop);\n    }, 1);\n    if(this._options.debug === true) {\n      this._log('check', 'A check is in progress ...');\n    }\n\n    return true;\n  };\n  DetectAdBlock.prototype._checkBait = function(loop) {\n    var detected = false;\n\n    if(this._var.bait === null) {\n      this._creatBait();\n    }\n\n    if(window.document.body.getAttribute('abp') !== null\n    || this._var.bait.offsetParent === null\n    || this._var.bait.offsetHeight == 0\n    || this._var.bait.offsetLeft == 0\n    || this._var.bait.offsetTop == 0\n    || this._var.bait.offsetWidth == 0\n    || this._var.bait.clientHeight == 0\n    || this._var.bait.clientWidth == 0) {\n      detected = true;\n    }\n    if(window.getComputedStyle !== undefined) {\n      var baitTemp = window.getComputedStyle(this._var.bait, null);\n      if(baitTemp && (baitTemp.getPropertyValue('display') == 'none' || baitTemp.getPropertyValue('visibility') == 'hidden')) {\n        detected = true;\n      }\n    }\n\n    if(this._options.debug === true) {\n      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'));\n    }\n\n    if(loop === true) {\n      this._var.loopNumber++;\n      if(this._var.loopNumber >= this._options.loopMaxNumber) {\n        this._stopLoop();\n      }\n    }\n\n    if(detected === true) {\n      this._stopLoop();\n      this._destroyBait();\n      this.emitEvent(true);\n      if(loop === true) {\n        this._var.checking = false;\n      }\n    } else if(this._var.loop === null || loop === false) {\n      this._destroyBait();\n      this.emitEvent(false);\n      if(loop === true) {\n        this._var.checking = false;\n      }\n    }\n  };\n  DetectAdBlock.prototype._stopLoop = function(detected) {\n    clearInterval(this._var.loop);\n    this._var.loop = null;\n    this._var.loopNumber = 0;\n\n    if(this._options.debug === true) {\n      this._log('_stopLoop', 'A loop has been stopped');\n    }\n  };\n\n  DetectAdBlock.prototype.emitEvent = function(detected) {\n    if(this._options.debug === true) {\n      this._log('emitEvent', 'An event with a '+(detected===true?'positive':'negative')+' detection was called');\n    }\n\n    var fns = this._var.event[(detected===true?'detected':'notDetected')];\n    for(var i in fns) {\n      if(this._options.debug === true) {\n        this._log('emitEvent', 'Call function '+(parseInt(i)+1)+'/'+fns.length);\n      }\n      if(fns.hasOwnProperty(i)) {\n        fns[i]();\n      }\n    }\n    if(this._options.resetOnEnd === true) {\n      this.clearEvent();\n    }\n    return this;\n  };\n  DetectAdBlock.prototype.clearEvent = function() {\n    this._var.event.detected = [];\n    this._var.event.notDetected = [];\n\n    if(this._options.debug === true) {\n      this._log('clearEvent', 'The event list has been cleared');\n    }\n  };\n\n  DetectAdBlock.prototype.on = function(detected, fn) {\n    this._var.event[(detected===true?'detected':'notDetected')].push(fn);\n    if(this._options.debug === true) {\n      this._log('on', 'A type of event \"'+(detected===true?'detected':'notDetected')+'\" was added');\n    }\n\n    return this;\n  };\n  DetectAdBlock.prototype.onDetected = function(fn) {\n    return this.on(true, fn);\n  };\n  DetectAdBlock.prototype.onNotDetected = function(fn) {\n    return this.on(false, fn);\n  };\n\n  window.DetectAdBlock = DetectAdBlock;\n\n  if(window.detectAdBlock === undefined) {\n    window.detectAdBlock = new DetectAdBlock({\n      checkOnLoad: true,\n      resetOnEnd: true\n    });\n  }\n})(window);\n"
  },
  {
    "path": "server/files/javascript/library/easing.js",
    "content": "/*\n * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/\n *\n * Open source under the BSD License.\n *\n * Copyright © 2001 Robert Penner\n * All rights reserved.\n *\n*/\njQuery.easing.jswing=jQuery.easing.swing;jQuery.extend(jQuery.easing,{def:\"easeOutQuad\",swing:function(e,f,a,h,g){return jQuery.easing[jQuery.easing.def](e,f,a,h,g)},easeInQuad:function(e,f,a,h,g){return h*(f/=g)*f+a},easeOutQuad:function(e,f,a,h,g){return -h*(f/=g)*(f-2)+a},easeInOutQuad:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f+a}return -h/2*((--f)*(f-2)-1)+a},easeInCubic:function(e,f,a,h,g){return h*(f/=g)*f*f+a},easeOutCubic:function(e,f,a,h,g){return h*((f=f/g-1)*f*f+1)+a},easeInOutCubic:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f+a}return h/2*((f-=2)*f*f+2)+a},easeInQuart:function(e,f,a,h,g){return h*(f/=g)*f*f*f+a},easeOutQuart:function(e,f,a,h,g){return -h*((f=f/g-1)*f*f*f-1)+a},easeInOutQuart:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f*f+a}return -h/2*((f-=2)*f*f*f-2)+a},easeInQuint:function(e,f,a,h,g){return h*(f/=g)*f*f*f*f+a},easeOutQuint:function(e,f,a,h,g){return h*((f=f/g-1)*f*f*f*f+1)+a},easeInOutQuint:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f*f*f+a}return h/2*((f-=2)*f*f*f*f+2)+a},easeInSine:function(e,f,a,h,g){return -h*Math.cos(f/g*(Math.PI/2))+h+a},easeOutSine:function(e,f,a,h,g){return h*Math.sin(f/g*(Math.PI/2))+a},easeInOutSine:function(e,f,a,h,g){return -h/2*(Math.cos(Math.PI*f/g)-1)+a},easeInExpo:function(e,f,a,h,g){return(f==0)?a:h*Math.pow(2,10*(f/g-1))+a},easeOutExpo:function(e,f,a,h,g){return(f==g)?a+h:h*(-Math.pow(2,-10*f/g)+1)+a},easeInOutExpo:function(e,f,a,h,g){if(f==0){return a}if(f==g){return a+h}if((f/=g/2)<1){return h/2*Math.pow(2,10*(f-1))+a}return h/2*(-Math.pow(2,-10*--f)+2)+a},easeInCirc:function(e,f,a,h,g){return -h*(Math.sqrt(1-(f/=g)*f)-1)+a},easeOutCirc:function(e,f,a,h,g){return h*Math.sqrt(1-(f=f/g-1)*f)+a},easeInOutCirc:function(e,f,a,h,g){if((f/=g/2)<1){return -h/2*(Math.sqrt(1-f*f)-1)+a}return h/2*(Math.sqrt(1-(f-=2)*f)+1)+a},easeInElastic:function(f,h,e,l,k){var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k)==1){return e+l}if(!j){j=k*0.3}if(g' +\n                    _d.title.replace(/\\'/g, '\\\\\\'') + 'AJAX Tab One',\n            second : 'AJAX Tab Two',\n            third  : 'AJAX Tab Three'\n          };\n          return response[settings.urlData.tab];\n        }\n      },\n      context : 'parent',\n      auto    : true,\n      path    : '/'\n    })\n  ;\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.dropdown.ready)\n;\n"
  },
  {
    "path": "server/files/javascript/table.js",
    "content": "semantic.table = {};\n\n// ready event\nsemantic.table.ready = function() {\n\n  // selector cache\n  var\n    // alias\n    handler\n  ;\n\n  $('.ui.checkbox').checkbox({\n    onChecked: function() {\n      $(this).closest('.table').find('.button').removeClass('disabled');\n    }\n  });\n\n  $('.ui.rating')\n    .rating({\n      interactive: false\n    })\n  ;\n\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.table.ready)\n;"
  },
  {
    "path": "server/files/javascript/theming.js",
    "content": "semantic.theming = {};\n\n// ready event\nsemantic.theming.ready = function() {\n\n  var\n    $defaultTheme = $('.variable.grid .code')\n  ;\n\n  // selector cache\n  var handler = {\n\n  };\n\n  $('.main .ui.checkbox')\n    .checkbox()\n  ;\n\n  $('.load.button')\n    .dropdown({\n      fireOnInit: true,\n      onChange: function(theme) {\n        $(this)\n          .api({\n            on        : 'now',\n            dataType  : 'text',\n            action    : 'getVariables',\n            urlData   : {\n              theme: theme\n            },\n            onSuccess : function(response) {\n              if(theme == 'default') {\n                $defaultTheme\n                  .html(response)\n                ;\n                $.proxy(semantic.handler.createCode, $defaultTheme);\n              }\n            }\n          })\n        ;\n      }\n    })\n  ;\n\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.theming.ready)\n;"
  },
  {
    "path": "server/files/javascript/transition.js",
    "content": "semantic.transition = {};\n\n// ready event\nsemantic.transition.ready = function() {\n\n  // selector cache\n  var\n    $tab = $('.main.container .secondary.menu .item'),\n    handler\n  ;\n\n  // event handlers\n  handler = {\n\n  };\n\n\n  $tab\n    .tab({\n      context: 'parent'\n    })\n  ;\n\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.transition.ready)\n;"
  },
  {
    "path": "server/files/javascript/validate-form.js",
    "content": "semantic.validateForm = {};\n\n// ready event\nsemantic.validateForm.ready = function() {\n\n  // selector cache\n  var\n    $dogForm      = $('.dog.example .ui.form'),\n    $matchingForm = $('.matching.example .ui.form'),\n    $autoForm     = $('.auto.example .ui.form'),\n    $colorForm    = $('.color.example .ui.form'),\n    $promptForm   = $('.prompt.example .ui.form'),\n    $ruleForm     = $('.custom.rule.example .ui.form'),\n    $dropdownForm = $('.dropdown.example .ui.form'),\n    $optionalForm = $('.optional.example .ui.form'),\n    $dependsForm  = $('.depends.example .ui.form'),\n    $inlineForm   = $('.inline.example .ui.form'),\n    $addForm      = $('.add.example .ui.form'),\n    $form         = $('.ui.form').not($dogForm).not($inlineForm).not($dropdownForm).not($optionalForm).not($promptForm),\n    $checkbox     = $('.main.container .ui.checkbox'),\n    $dropdown     = $('.main.container .ui.dropdown'),\n    // alias\n    handler\n  ;\n\n  // event handlers\n  handler = {\n\n  };\n  $checkbox\n    .checkbox()\n  ;\n  $dropdown\n    .dropdown()\n  ;\n\n  $.fn.form.settings.onSuccess = function() {\n    // alert('Valid form!');\n    return false;\n  };\n\n\n\n  $.fn.form.settings.defaults = {\n    firstName: {\n      identifier  : 'first-name',\n      rules: [\n        {\n          type   : 'empty',\n          prompt : 'Please enter your first name'\n        }\n      ]\n    },\n    skills: {\n      identifier  : 'skills',\n      rules: [\n        {\n          type   : 'minCount[2]',\n          prompt : 'Please select at least two skills'\n        }\n      ]\n    },\n    name: {\n      identifier  : 'name',\n      rules: [\n        {\n          type   : 'empty',\n          prompt : 'Please enter your name'\n        }\n      ]\n    },\n    gender: {\n      identifier  : 'gender',\n      rules: [\n        {\n          type   : 'empty',\n          prompt : 'Please select a gender'\n        }\n      ]\n    },\n    lastName: {\n      identifier  : 'last-name',\n      rules: [\n        {\n          type   : 'empty',\n          prompt : 'Please enter your last name'\n        }\n      ]\n    },\n    username: {\n      identifier : 'username',\n      rules: [\n        {\n          type   : 'empty',\n          prompt : 'Please enter a username'\n        },\n        {\n          type   : 'length[5]',\n          prompt : 'Your username must be at least 5 characters'\n        }\n      ]\n    },\n    email: {\n      identifier : 'email',\n      rules: [\n        {\n          type   : 'email',\n          prompt : 'Please enter a valid e-mail'\n        }\n      ]\n    },\n    password: {\n      identifier : 'password',\n      rules: [\n        {\n          type   : 'empty',\n          prompt : 'Please enter a password'\n        },\n        {\n          type   : 'length[6]',\n          prompt : 'Your password must be at least 6 characters'\n        }\n      ]\n    },\n    passwordConfirm: {\n      identifier : 'password-confirm',\n      rules: [\n        {\n          type   : 'empty',\n          prompt : 'Please confirm your password'\n        },\n        {\n          identifier : 'password-confirm',\n          type       : 'match[password]',\n          prompt     : 'Please verify password matches'\n        }\n      ]\n    },\n    terms: {\n      identifier : 'terms',\n      rules: [\n        {\n          type   : 'checked',\n          prompt : 'You must agree to the terms and conditions'\n        }\n      ]\n    }\n  };\n\n  $form\n    .form()\n  ;\n\n  $matchingForm\n    .form({\n      fields: {\n        name: {\n          identifier : 'special-name',\n          rules: [\n            {\n              type   : 'empty'\n            }\n          ]\n        }\n      }\n    })\n  ;\n\n  $inlineForm\n    .form({\n      inline : true,\n      on: 'blur'\n    })\n  ;\n\n  $dropdownForm\n    .form({\n      fields: {\n        gender: {\n          identifier  : 'gender',\n          rules: [\n            {\n              type   : 'empty',\n              prompt : 'Please enter a gender'\n            }\n          ]\n        },\n        name: {\n          identifier  : 'name',\n          rules: [\n            {\n              type   : 'empty',\n              prompt : 'Please enter your name'\n            }\n          ]\n        }\n      }\n    })\n    .find('.dropdown')\n      .dropdown()\n  ;\n\n/*  $autoForm\n    .form({\n      fields: {\n        name     : 'empty',\n        gender   : 'empty',\n        username : 'empty',\n        password : ['minLength[6]', 'empty'],\n        skills   : ['minCount[2]', 'empty'],\n        terms    : 'checked'\n      }\n    })\n  ;\n*/\n\n  $colorForm.form({\n    fields: {\n      color: {\n        identifier: 'color',\n        rules: [{\n          type: 'regExp',\n          value: /rgb\\((\\d{1,3}), (\\d{1,3}), (\\d{1,3})\\)/i,\n        }]\n      }\n    }\n  });\n\n\n  $promptForm\n    .form({\n      fields: {\n        field1: {\n          rules: [\n            {\n              type   : 'empty'\n            }\n          ]\n        },\n        field2: {\n          rules: [\n            {\n              type   : 'isExactly[dog]',\n              prompt : '{name} is set to \"{value}\" that is totally wrong. It should be {ruleValue}'\n            }\n          ]\n        },\n        field3: {\n          rules: [\n            {\n              type   : 'isExactly[cat]',\n              prompt : function(value) {\n                if(value == 'dog') {\n                  return 'I told you to put cat, not dog!';\n                }\n                return 'That is not cat';\n              }\n            }\n          ]\n        },\n      }\n    })\n  ;\n\n  $dependsForm\n    .form({\n      fields: {\n        yearsPracticed: {\n          identifier : 'yearsPracticed',\n          depends    : 'isDoctor',\n          rules      : [\n            {\n              type   : 'empty',\n              prompt : 'Please enter the number of years you have been a doctor'\n            }\n          ]\n        }\n      }\n    })\n  ;\n\n  $optionalForm\n    .form({\n      fields: {\n        email: {\n          identifier : 'email',\n          rules: [\n            {\n              type   : 'email',\n              prompt : 'Please enter a valid e-mail'\n            }\n          ]\n        },\n        ccEmail: {\n          identifier : 'cc-email',\n          optional   : true,\n          rules: [\n            {\n              type   : 'email',\n              prompt : 'Please enter a valid second e-mail'\n            }\n          ]\n        }\n      }\n    })\n  ;\n\n  // no need to actually do this\n  $.fn.form.settings.rules.adminLevel = function(value, adminLevel) {\n    window.user && window.user.adminLevel >= adminLevel;\n  };\n  $ruleForm\n    .form({\n      fields: {\n        dog: {\n          identifier: 'dog',\n          rules: [\n            {\n              type: 'adminLevel[2]',\n              prompt: 'You must be at least a level-2 admin to add a dog'\n            }\n          ]\n        }\n      }\n    })\n  ;\n\n  $dogForm\n    .form({\n      fields: {\n        dog: {\n          rules: [\n            {\n              type: 'empty',\n              prompt: 'You must have a dog to add'\n            },\n            {\n              type: 'contains[fluffy]',\n              prompt: 'I only want you to add fluffy dogs!'\n            },\n            {\n              type: 'not[mean]',\n              prompt: 'Why would you add a mean dog to the list?'\n            }\n          ]\n        }\n      }\n    })\n  ;\n\n  $addForm\n    .form('remove fields', ['password', 'gender'])\n  ;\n};\n\n\n// attach ready event\n$(document)\n  .ready(semantic.validateForm.ready)\n;\n"
  },
  {
    "path": "server/files/javascript/visibility.js",
    "content": "semantic.visiblity = {};\n\n// ready event\nsemantic.visiblity.ready = function() {\n\n  // selector cache\n  var\n    $pageTabs           = $('.masthead.tab.segment .stackable.menu .item'),\n    $firstColumn        = $('.first.example .main.column'),\n    $firstSegment       = $('.first.example .demo.segment'),\n    $firstSticky        = $('.first.example .grid .sticky'),\n\n    $secondColumn       = $('.second.example .main.column'),\n    $secondSegment      = $('.second.example .demo.segment'),\n    $secondSticky       = $('.second.example .grid .sticky'),\n    $settingsCheckboxes = $('.second.example .checkbox'),\n    $log                = $('.second.example .console'),\n    $clearButton        = $('.second.example .clear.button'),\n\n    handler\n  ;\n\n  // event handlers\n  handler = {\n    clearConsole: function() {\n      $log.empty();\n    },\n    updateTable: function(calculations) {\n      $.each(calculations, function(name, value) {\n        var\n          value = (typeof value == 'integer')\n            ? parseInt(value, 10)\n            : value.toString(),\n          $td\n        ;\n        if(name == 'pixelsPassed' || name == 'width' || name == 'height') {\n          value = parseInt(value, 10) + 'px';\n        }\n        else if(name == 'percentagePassed') {\n          value = parseInt(value * 100, 10) + '%';\n        }\n        $td = $('.first.example .grid .sticky tr.'+ name +' td:last-child');\n        if($td.html() !== value) {\n          if(value == 'true' || value == 'false') {\n            $td.removeClass('highlight').addClass('highlight');\n            setTimeout(function(){ $td.removeClass('highlight'); }, 2000);\n          }\n          $td.html(value);\n        }\n      });\n    }\n  };\n\n  $pageTabs.tab('setting', 'onLoad', function() {\n    $('.ui.sticky')\n      .sticky('refresh')\n    ;\n    $(this).find('.visibility.example .overlay, .visibility.example .demo.segment, .visibility.example .items img')\n      .visibility('refresh')\n    ;\n  });\n\n  $firstSticky\n    .sticky({\n      observeChanges : false,\n      pushing        : true,\n      context        : $firstColumn,\n      offset         : 60\n    })\n  ;\n\n  $clearButton\n    .on('click', handler.clearConsole)\n  ;\n\n  $firstSegment\n    .visibility({\n      once           : false,\n      continuous     : true,\n      observeChanges : false,\n      onUpdate       : handler.updateTable\n    })\n  ;\n\n  $secondSegment\n    .visibility({\n      onOnScreen: function() {\n        $log.append('
onOnScreen fired
');\n        $log.scrollTop(999999);\n      },\n      onOffScreen: function() {\n        $log.append('
onOffScreen fired
');\n        $log.scrollTop(999999);\n      },\n      onTopVisible: function() {\n        $log.append('
onTopVisible fired
');\n        $log.scrollTop(999999);\n      },\n      onBottomVisible: function() {\n        $log.append('
onBottomVisible fired
');\n        $log.scrollTop(999999);\n      },\n      onPassing: function() {\n        $log.append('
onPassing fired
');\n        $log.scrollTop(999999);\n      },\n      onTopPassed: function() {\n        $log.append('
onTopPassed fired
');\n        $log.scrollTop(999999);\n      },\n      onBottomPassed: function() {\n        $log.append('
onBottomPassed fired
');\n        $log.scrollTop(999999);\n      },\n      onTopVisibleReverse: function() {\n        $log.append('
onTopVisibleReverse fired
');\n        $log.scrollTop(999999);\n      },\n      onBottomVisibleReverse: function() {\n        $log.append('
onBottomVisibleReverse fired
');\n        $log.scrollTop(999999);\n      },\n      onPassingReverse: function() {\n        $log.append('
onPassingReverse fired
');\n        $log.scrollTop(999999);\n      },\n      onTopPassedReverse: function() {\n        $log.append('
onTopPassedReverse fired
');\n        $log.scrollTop(999999);\n      },\n      onBottomPassedReverse: function() {\n        $log.append('
onBottomPassedReverse fired
');\n        $log.scrollTop(999999);\n      }\n    })\n  ;\n\n  $settingsCheckboxes\n    .checkbox({\n      onChecked: function() {\n        var setting = $(this).attr('name');\n        $secondSegment.visibility('setting', setting, true);\n      },\n      onUnchecked: function() {\n        var setting = $(this).attr('name');\n        $secondSegment.visibility('setting', setting, false);\n      }\n    })\n  ;\n\n  $secondSticky\n    .sticky({\n      observeChanges : false,\n      pushing        : true,\n      context        : $secondColumn,\n      offset         : 60\n    })\n  ;\n\n};\n\nvar count = 1;\nwindow.loadFakeContent = function() {\n  // load fake content\n  var\n    $segment = $('.infinite .demo.segment'),\n    $loader  = $segment.find('.inline.loader'),\n    $content = $('
Loaded Content #' + count + '
')\n  ;\n  if(count <= 5) {\n    $loader.addClass('active');\n    setTimeout(function() {\n      $loader\n        .removeClass('active')\n        .before($content)\n      ;\n      $('.ui.sticky')\n        .sticky('refresh')\n      ;\n      $('.visibility.example > .overlay, .visibility.example > .demo.segment, .visibility.example .items img')\n        .visibility('refresh')\n      ;\n    }, 1000);\n  }\n  count++;\n}\n\n// attach ready event\n$(document)\n  .ready(semantic.visiblity.ready)\n;"
  },
  {
    "path": "server/files/stylesheets/customize.css",
    "content": "/*******************************\n          Customizer\n*******************************/\n\n#example.custom .accordion .title + .content {\n  padding: 0em;\n}\n#example.custom .download.list {\n  margin: 0em;\n}\n#example.custom .header {\n  position: relative;\n}\n#example.custom .header .all {\n  position: absolute;\n  right: 1em;\n}\n#example.custom .download.list .checkbox + .content {\n  opacity: 0.6;\n  transition: opacity 0.3s ease;\n}\n#example.custom .download.list .checkbox + .content .header {\n  transition: color 0.3s ease;\n  font-weight: normal;\n}\n#example.custom .download.list .content .description {\n  color: rgba(0, 0, 0, 0.6);\n  font-size: 0.9em;\n}\n\n#example.custom .main.container > h2:first-child {\n  margin-top: 0em;\n}\n#example.custom .download.list .checkbox.checked + .content {\n  opacity: 1;\n}\n#example.custom .download.list .checkbox.checked + .content .header {\n  color: #000000;\n  font-weight: bold;\n}\n\n/* Element Lists */\n#example.custom .download.list .item > .checkbox {\n  display: block;\n  float: left;\n  margin-top: 0.75em;\n  margin-left: 0.5em;\n}\n#example.custom .download.list .item > .content {\n  margin-left: 3em;\n}\n#example.custom .download.list .item .icon.button {\n  opacity: 0;\n  margin: 0.3em 0.3em 0em 0em;\n  transition: opacity 0.5s ease;\n}\n#example.custom .download.list .item:hover .icon.button {\n  opacity: 1;\n}"
  },
  {
    "path": "server/files/stylesheets/docs.css",
    "content": "\n/*******************************\n             Global\n*******************************/\n\n/* Regular */\n@font-face {\n  font-family: 'Lato';\n  src:\n    url(/fonts/lato/Lato-Regular.woff2) format('woff2')\n  ;\n  font-style: normal;\n  font-weight: normal;\n}\n@font-face {\n  font-family: 'Lato';\n  src:\n    url(/fonts/lato/Lato-Italic.woff2) format('woff2')\n  ;\n  font-style: italic;\n  font-weight: normal;\n}\n\n/* Bold */\n@font-face {\n  font-family: 'Lato';\n  src:\n    url(/fonts/lato/Lato-Bold.woff2) format('woff2')\n  ;\n  font-style: normal;\n  font-weight: 700;\n}\n@font-face {\n  font-family: 'Lato';\n  src:\n    url(/fonts/lato/Lato-BoldItalic.woff2) format('woff2')\n  ;\n  font-style: italic;\n  font-weight: 700;\n}\n\n\n/*--------------\n     Page\n---------------*/\n\nul.list {\n  list-style-type: disc;\n}\nul.list li {\n  list-style-position: outside;\n}\n\np {\n  margin: 1em 0em;\n}\np:first-child {\n  margin-top: 0em;\n}\np:last-child {\n  margin-bottom: 0em;\n}\n\n\n/*----------------\n      Footer\n-----------------*/\n\n#example > .pusher > .footer {\n  margin: 0em;\n  border-radius: 0em;\n  padding: 4em 0em 4em 0em;\n}\n\n/*--------------\n     Code\n---------------*/\n\n/* Inline Code */\npre {\n  white-space: pre-wrap;\n  white-space: -moz-pre-wrap;\n  white-space: -pre-wrap;\n  white-space: -o-pre-wrap;\n  word-wrap: break-word;\n}\npre {\n  background-color: #FFFFFF;\n  text-align: left;\n}\n\n\n/*rtl:ignore*/\npre.console {\n  background-color: transparent;\n  line-height: 1.6;\n  font-family:  'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;\n  height: 300px;\n  overflow: auto;\n  direction:ltr;\n}\ncode {\n  background-color: rgba(0, 0, 0, 0.08);\n  border-radius: 3px;\n  display: inline-block;\n  font-family: \"Monaco\",\"Menlo\",\"Ubuntu Mono\",\"Consolas\",\"source-code-pro\",monospace;\n  font-size: 0.875em;\n  font-weight: bold;\n  padding: 1px 6px;\n  vertical-align: baseline;\n}\npre code {\n  border: none;\n  padding: 0px;\n  font-size: 1em;\n}\n\nblockquote {\n  border-left: 4px solid #777777;\n  font-size: 16px;\n  line-height: 1.5;\n  padding: 0em 2em;\n  margin: 1em 0em 2em;\n}\nblockquote p {\n  line-height: inherit;\n}\nblockquote .author {\n  display: block;\n  margin: 1em 0em 0em;\n  font-weight: bold;\n}\n\n/* Code Inside Message */\n.ui.message > p > code,\n.ui.message > code {\n  background-color: rgba(0, 0, 0, 0.06);\n  line-height: 1;\n  padding: 3px 4px;\n}\n\n\n/*--------------\n    Docs Icon\n---------------*/\n\n\n/* Replace Code Icon */\n@font-face {\n  font-family: 'Docs Code';\n  src:\n    url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggi/LYAAAC8AAAAYGNtYXAaVcxXAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zl4DICgAAAFwAAAAeGhlYWQCOGXvAAAB6AAAADZoaGVhA6IB5gAAAiAAAAAkaG10eALAAAAAAAJEAAAAFGxvY2EAKABQAAACWAAAAAxtYXhwAAgAEAAAAmQAAAAgbmFtZVcZpu4AAAKEAAABRXBvc3QAAwAAAAADzAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADmAAHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIOYA//3//wAAAAAAIOYA//3//wAB/+MaBAADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAgAAAEABwAGAAAYADQAAAQcXBxc3JyMHFzcnNycBMDBwcDCQkKCQkDBwcDABgDBwcDCgoKCgMHBwMAAAAQAAAAEAAH1wL6hfDzz1AAsCAAAAAADQrRK5AAAAANCtErkAAAAAAcABgAAAAAgAAgAAAAAAAAABAAAB4P/gAAACAAAAAAABwAABAAAAAAAAAAAAAAAAAAAABQAAAAAAAAAAAAAAAAEAAAABwAAAAAAAAAAKABQAHgA8AAEAAAAFAA4AAgAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAOAAAAAQAAAAAAAgAOAEcAAQAAAAAAAwAOACQAAQAAAAAABAAOAFUAAQAAAAAABQAWAA4AAQAAAAAABgAHADIAAQAAAAAACgA0AGMAAwABBAkAAQAOAAAAAwABBAkAAgAOAEcAAwABBAkAAwAOACQAAwABBAkABAAOAFUAAwABBAkABQAWAA4AAwABBAkABgAOADkAAwABBAkACgA0AGMAaQBjAG8AbQBvAG8AbgBWAGUAcgBzAGkAbwBuACAAMQAuADAAaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AbgBSAGUAZwB1AGwAYQByAGkAYwBvAG0AbwBvAG4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=) format('truetype'),\n    url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAQ4AAsAAAAAA+wAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgCCL8tmNtYXAAAAFoAAAATAAAAEwaVcxXZ2FzcAAAAbQAAAAIAAAACAAAABBnbHlmAAABvAAAAHgAAAB4XgMgKGhlYWQAAAI0AAAANgAAADYCOGXvaGhlYQAAAmwAAAAkAAAAJAOiAeZobXR4AAACkAAAABQAAAAUAsAAAGxvY2EAAAKkAAAADAAAAAwAKABQbWF4cAAAArAAAAAgAAAAIAAIABBuYW1lAAAC0AAAAUUAAAFFVxmm7nBvc3QAAAQYAAAAIAAAACAAAwAAAAMCAAGQAAUAAAFMAWYAAABHAUwBZgAAAPUAGQCEAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA5gAB4P/g/+AB4AAgAAAAAQAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAA4AAAACgAIAAIAAgABACDmAP/9//8AAAAAACDmAP/9//8AAf/jGgQAAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAIAAABAAcABgAAGAA0AAAEHFwcXNycjBxc3JzcnATAwcHAwkJCgkJAwcHAwAYAwcHAwoKCgoDBwcDAAAAEAAAABAAB9cC+oXw889QALAgAAAAAA0K0SuQAAAADQrRK5AAAAAAHAAYAAAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAAcAAAQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAABAAAAAcAAAAAAAAAACgAUAB4APAABAAAABQAOAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoANABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoANABjAGkAYwBvAG0AbwBvAG4AVgBlAHIAcwBpAG8AbgAgADEALgAwAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG4AUgBlAGcAdQBsAGEAcgBpAGMAbwBtAG8AbwBuAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('woff');\n  font-weight: normal;\n  font-style: normal;\n}\n\n#example .example i.code.icon:before {\n  font-family: 'Docs Code';\n  content: \"\\e600\";\n  vertical-align: top;\n}\n\n\n/*--------------\n     Sidebar\n---------------*/\n\n\n#example .ui.sidebar.menu .item {\n  will-change: transform;\n}\n\n#example .sidebar.menu .logo.image,\n#example .ui.menu .logo.image {\n  width: 35px;\n  margin-right: 1em;\n}\n\n#example #toc > * {\n  will-change: transform;\n}\n#example #toc > :last-child {\n  padding-bottom: 2em;\n}\n\n\n#example #toc > .ui.menu {\n  max-height: 100%;\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n/* Incomplete Label */\n#example #toc .item .circular.label {\n  position: absolute;\n  top: 0.75rem;\n  right: 1em;\n  opacity: 0.2;\n  transition: background 0.3s ease;\n}\n#example #toc .item.active > .circular.label,\n#example #toc .item:hover > .circular.label {\n  opacity: 0.8;\n}\n\n/* Hidden Items */\n#example #toc .hide.item {\n  display: none;\n}\n\n/* Sidebar Header */\n#example #toc .inverted.header {\n  font-size: 1em;\n  font-weight: normal;\n  color: rgba(255, 255, 255, 0.8);\n  margin-bottom: 0.5em;\n}\n#example #toc a.inverted.header.active,\n#example #toc a.inverted.header:hover {\n  color: rgba(255, 255, 255, 1);\n}\n#example #toc .menu .active.item {\n  color: #FFF;\n}\n\n/*--------------\n   Page Headers\n---------------*/\n\n#example .masthead.segment {\n  position: relative;\n  z-index: 3;\n  margin: 0em;\n  min-height: 185px;\n  padding: 3em 0em;\n  background-color: #FFFFFF;\n  border-bottom: 1px solid #DDDDDD;\n  box-shadow: none;\n}\n\n#example .masthead .introduction {\n  display: block;\n}\n#example .masthead .introduction:after {\n  content: \".\";\n  display: block;\n  height: 0;\n  clear: both;\n  visibility: hidden;\n}\n\n#example .masthead.segment h1 {\n  margin: 0em;\n}\n\n#example .masthead iframe.github {\n  width: 101px !important;\n}\n#example .masthead iframe {\n  margin-left: 5px;\n  float: right;\n}\n\n/* Align with buttons */\n#example .masthead .main.menu {\n  margin-top: -2px;\n  min-height: 0em;\n}\n#example .masthead .main.menu > .item {\n  padding-top: 0.785714em;\n  padding-bottom: 0.785714em;\n}\n\n/*--------------\n    Languages\n---------------*/\n\n#example .language.dropdown.button {\n  margin-top: 0.3em;\n}\n#example .language.dropdown > .text .description {\n  color: rgba(255, 255, 255, 0.4);\n}\n#example .language.dropdown > .menu {\n  width: 280px;\n}\n\n/*--------------\n    Page Tabs\n---------------*/\n\n#example .tab.masthead.segment {\n  display: block;\n  padding-bottom: 0em;\n  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1) inset;\n}\n#example .tab.masthead.segment .vertical.menu {\n  display: none;\n  margin: 2rem 0em 1rem;\n}\n#example .tab.masthead.segment .tabular.menu {\n  margin: 3rem 0px 0em;\n  border-bottom: none;\n}\n#example .tab.masthead.segment .tabular.menu .active.item {\n  background-color: #F7F7F7;\n}\n\n/*--------------\n    Ad Beg\n---------------*/\n\n#example .beg.segment {\n  background-color: #F9F5F5;\n  padding: 2em 3em;\n}\n#example .beg.segment .delete.icon {\n  position: absolute;\n  top: 1.5em;\n  right: 1.5em;\n}\n#example .beg.segment .ui.header {\n  margin: 0 !important;\n}\n\n/*--------------\n    Download\n---------------*/\n\n/* Download Popup */\n#example .masthead.segment .download.popup {\n  width: 400px;\n}\n#example .masthead.segment .download.popup .check.icon {\n  margin-left: -1em;\n}\n#example .masthead.segment .download.popup .framework.grid,\n#example .masthead.segment .download.popup .standalone.grid,\n#example .masthead.segment .download.popup .integration.grid,\n#example .masthead.segment .download.popup .link.grid {\n  display: none;\n}\n\n\n/* lists */\n#example .features {\n  list-style-position: inside;\n  margin: 10px 0px 0px;\n  padding: 0px;\n}\n#example .features li {\n  list-style-type: disc;\n  margin: 0px 0px 10px;\n  font-weight: bold;\n}\n\n\n#example .main.container a.anchor {\n  height: 1px;\n  position: absolute;\n  right: 100%;\n  top: -2.5em;\n  width: 1px;\n}\n\n\n/*--------------\n  Fixed Columns\n---------------*/\n\n#example .fixed.column {\n  position: absolute;\n  right: -0.5em;\n  top: 0px;\n  width: 250px;\n  padding-top: 2em;\n}\n#example .fixed.column + .examples {\n  margin-right: 280px;\n}\n\n#example .tab.masthead .item.menu {\n  margin: 3rem 0rem 2rem;\n}\n\n#example .tab.masthead.segment .fixed .tabular.menu {\n  position: fixed;\n  top: 50px;\n}\n#example .fixed .launch {\n  display: none;\n}\n#example .fixed.column .sticky {\n  margin-top: 0em;\n}\n\n/*--------------\n   Fixed Menu\n---------------*/\n\n#example .main.menu .title.item b {\n  margin-right: 0.5em;\n}\n#example .fixed.main.menu .launch.item {\n  display: block;\n}\n#example .fixed.main.menu .search .icon {\n  opacity: 0.9;\n}\n\n\n/*--------------\n  Sidebar Button\n---------------*/\n\n#example .fixed.launch.button {\n  display: none;\n  position: fixed;\n  top: 2.5em;\n  left: 0px;\n\n  width: 55px;\n  height: auto;\n  white-space: nowrap;\n  overflow: hidden;\n  -webkit-transition:\n    0.3s width ease,\n    0.5s transform ease\n  ;\n  -moz-transition:\n    0.3s width ease,\n    0.5s transform ease\n  ;\n  -o-transition:\n    0.3s width ease,\n    0.5s transform ease\n  ;\n  -ms-transition:\n    0.3s width ease,\n    0.5s transform ease\n  ;\n  transition:\n    0.3s width ease,\n    0.5s transform ease\n  ;\n}\n#example .launch.button .icon {\n  margin-left: 0px;\n}\n\n\n#example .fixed.launch.button .text {\n  position: absolute;\n  white-space: nowrap;\n  top: auto;\n  left: 54px;\n  opacity: 0;\n  -webkit-transition:\n    0.3s opacity 0.3s\n  ;\n  -moz-transition:\n    0.3s opacity 0.3s\n  ;\n  -o-transition:\n    0.3s opacity 0.3s\n  ;\n  -ms-transition:\n    0.3s opacity 0.3s\n  ;\n  transition:\n    0.3s opacity 0.3s\n  ;\n}\n#example .fixed.launch.button:hover {\n  width: 130px;\n}\n#example .fixed.launch.button:hover .text {\n  opacity: 1;\n}\n\n/* Position Change */\n#example.pushable.left.overlay .fixed.launch.button {\n  transform: translate3d(0, 0, 0);\n}\n#example.pushable.overlay.left.pushed .fixed.launch.button {\n  transform: translate3d(260px, 0, 0);\n}\n\n\n/*******************************\n        Alternate Layouts\n*******************************/\n\n/*----------------\n   Wide Layout\n-----------------*/\n\n#example.wide .main.container {\n  max-width: 1200px !important;\n}\n\n/*----------------\n   Basic Layout\n-----------------*/\n\n#example.basic .fixed.menu > .container,\n#example.basic .main.container,\n#example.basic .masthead > .container {\n  position: relative;\n  width: 700px !important;\n  left: 0px;\n  margin-right: 4em !important;\n}\n\n#example.basic .main.container > .rail,\n#example.basic .main.container > .tab > .rail {\n  display: none !important;\n}\n#example .main.container .introduction p,\n#example .main.container .tab > p,\n#example .main.container .example > p,\n#example .main.container > p {\n  font-size: 16px;\n  line-height: 1.5;\n  color: rgba(0, 0, 0, 0.8);\n}\n\n/* Link Styles */\n#example .main.container > p a,\n#example .main.container > .tab > p a,\n#example .main.container .example > .ignored a,\n#example .main.container .example > p a  {\n  display: inline-block;\n  position: relative;\n  overflow: hidden;\n  vertical-align: top;\n  z-index: 0;\n  -webkit-transition: color 0.2s;\n  transition: color 0.2s;\n  outline: none;\n}\n#example .main.container > p a > code,\n#example .main.container > .tab > p a > code,\n#example .main.container .example > .ignored a > code,\n#example .main.container .example > p a > code {\n  background-color: rgba(0, 50, 100, 0.08);\n}\n#example .main.container > p a:before,\n#example .main.container > .tab > p a:before,\n#example .main.container .example > .ignored a:before,\n#example .main.container .example > p a:before,\n#example .main.container .code .value a:before {\n  position: absolute;\n  top: auto;\n  bottom: 1px;\n  left: 0;\n  width: 100%;\n  height: 1px;\n  background-color: #4183C4;\n  content: '';\n  -webkit-transition: all 0.2s;\n  -webkit-backface-visibility: hidden;\n  transition: all 0.2s;\n  backface-visibility: hidden;\n  -webkit-transform: scaleX(0);\n  transform: scaleX(0);\n}\n\n/* Not on UI */\n#example .main.container .example > .ignored a.ui:before {\n  display: none;\n}\n\n/* Hover */\n#example .main.container > p a:hover > code,\n#example .main.container > .tab > p a:hover > code,\n#example .main.container .example > .ignored a:hover > code,\n#example .main.container .example > p a:hover > code {\n  background-color: rgba(0, 50, 100, 0.12);\n}\n#example .main.container > p a:hover:before,\n#example .main.container > p a:focus:before,\n#example .main.container > .tab > p a:hover:before,\n#example .main.container > .tab > p a:focus:before,\n#example .main.container .example > .ignored a:hover:before,\n#example .main.container .example > .ignored a:focus:before,\n#example .main.container .example > p a:hover:before,\n#example .main.container .example > p a:focus:before,\n#example .main.container .code .value a:hover:before  {\n  background-color: #2C76BF;\n  -webkit-transform: scaleX(1);\n  transform: scaleX(1);\n}\n\n#example .ui.ad {\n  max-width: 100%;\n}\n\n/*----------------\n   Minimal Layout\n-----------------*/\n\n\n/* Always Hidden Sidebar */\n#example.minimal.basic > .launch.button {\n  display: block;\n}\n#example.minimal.basic .full.height > .toc {\n  display: none;\n}\n#example.minimal.basic .full.height > .article {\n  margin-left: 0px;\n}\n#example.minimal.basic .fixed.menu > .container,\n#example.minimal.basic .main.container,\n#example.minimal.basic .masthead > .container,\n#example.minimal.basic .footer > .container {\n  position: relative;\n  width: 700px !important;\n  left: 0px;\n  margin-left: auto !important;\n  margin-right: auto !important;\n}\n#example.minimal > .pusher > .footer {\n  padding-left: 0 !important;\n  padding-right: 0 !important;\n}\n\n@media only screen and (max-width: 820px) {\n\n  #example.minimal.basic .fixed.menu > .container,\n  #example.minimal.basic .main.container,\n  #example.minimal.basic .masthead > .container,\n  #example.minimal.basic .footer > .container {\n    width: auto !important;\n    margin-left: 1em !important;\n    margin-right: 1em !important;\n  }\n}\n\n\n\n/*----------------\n  Settings Table\n-----------------*/\n\n#example .settings.table {\n  margin-bottom: 20px;\n}\n#example .settings.table td:first-child {\n  font-weight: bold;\n}\n#example .settings.table td:nth-child(2n) {\n  width: 100px;\n}\n\n/*----------------\n   Code Samples\n-----------------*/\n\n#example .segment pre {\n  background-color: transparent;\n  margin: 0em;\n  padding: 0em;\n}\n#example .segment pre .code {\n  margin: 0em;\n  padding: 0em;\n  max-height: 610px;\n  font-weight: normal;\n  transform: rotateZ(0deg);\n  -ms-transform: none !important;\n  font-family:  'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;\n}\n\n#example table .instructive.segment {\n  background-color: transparent;\n  border: 0px;\n  box-shadow: none;\n  padding: 0em;\n}\n\n#example .ui.label + .instructive.segment {\n  margin-top: 0em;\n}\n#example .instructive.segment:after {\n  display: none;\n}\n#example .existing.segment em,\n#example .instructive.segment em {\n  font-style: normal;\n  color: rgba(0, 0, 0, 0.4);\n}\n#example .existing.segment .title + em,\n#example .instructive.segment .title + em {\n  position: absolute;\n  right: 1em;\n}\n#example .label + .code {\n  margin-top: 1.5em;\n}\n\n/*----------------\n     Examples\n-----------------*/\n\n#example .example {\n  margin: 2em 0em;\n  padding: 2em 0em;\n  position: relative;\n  -webkit-tap-highlight-color: transparent;\n}\n#example .example > .ignored.message,\n#example .example > .ignore.message,\n#example .example > p {\n  max-width: 700px;\n}\n\n#example .example:last-child {\n  margin-bottom: none;\n}\n\n/* Header */\n#example .example > h4:first-child {\n  font-size: 18px;\n  margin: 0em 0em 0em;\n}\n\n/* Wireframe Image */\n#example .example .wireframe.image {\n  opacity: 0.5;\n}\n#example .example .accordion .content > .wireframe.image {\n  opacity: 0.5 !important;\n}\n#example .example :not(.images) > .wireframe.image {\n  margin-top: 1rem;\n  margin-bottom: 1rem;\n}\n#example .example :not(.images) > .wireframe.image:first-child {\n  margin-top: 0em;\n}\n#example .example :not(.images) > .wireframe.image:last-child {\n  margin-bottom: 0em;\n}\n\n/* Description */\n#example .example .anchor + p {\n  margin-top: 0;\n  padding-bottom: 1em;\n}\n#example .no.example .anchor + p {\n  margin: 0em 0px 1em;\n  padding-bottom: 0em;\n}\n#example .example > p {\n  color: rgba(0, 0, 0, 0.8);\n}\n\n/* Message */\n#example .example .anchor + p + .ignored.message:not(.attached),\n#example .example .anchor + p + .ignored.message + .ignored.message:not(.attached) {\n  margin: 0em 0 2em;\n}\n\n#example .pushing.example .rail .sticky {\n  margin: 2em 0em;\n}\n\n#example .inline.example > .segment > .sticky.fixed {\n  background-color: #FFFFFF;\n}\n#example .inline.example > .segment > .sticky.fixed + * {\n  margin-top: 39px;\n}\n\n\n/* Another */\n#example .another.example {\n  margin-top: 0em;\n  padding-top: 2em;\n}\n\n/* Spaced */\n#example .spaced.example .buttons,\n#example .spaced.example .button {\n  margin-bottom: 0.75em;\n}\n#example .spaced.example .buttons .button {\n  margin-bottom: 0em;\n}\n#example .example .toggle.button {\n  min-width: 100px;\n}\n\n/* Examples Tab */\n#example .tab[data-tab*=\"examples\"] .example > p,\n#example .examples.tab .example > p {\n  margin: 1em 0em;\n}\n#example .tab[data-tab*=\"examples\"] .example .anchor + p,\n#example .examples.tab .example .anchor + p {\n  padding: 0em;\n}\n\n/* Intro Tab */\n#example .intro > h3.ui.header {\n  margin-top: 4em;\n}\n#example .intro .example .anchor + p {\n  margin-top: 0.5em;\n}\n#example .intro .example > p {\n  color: rgba(0, 0, 0, 0.8);\n}\n\n\n#example .existing.segment:after,\n#example .instructive.segment:after {\n  display: none;\n}\n\n/*----------------\n  Example Types\n-----------------*/\n\n/* No Example */\n#example .no.example i.code {\n  display: none;\n}\n\n#example .fixed.example iframe {\n  border: none;\n  width: 100%;\n  height: 350px;\n}\n/* Stretched Example */\n\n#example .stretched.example .column img {\n  /* This is only necessary for IE which doesnt respect img intrinsic aspect ratios */\n  max-height: 225px;\n}\n\n#example .clear.dropdown .dropdown {\n  vertical-align: middle;\n}\n\n\n/* Requires Clear */\n#example .clearing.example {\n  overflow: hidden;\n  clear: both;\n  padding-left: 1px;\n  padding-right: 1px;\n  padding-bottom: 1px;\n}\n#example .piled.example {\n  position: relative;\n  z-index: 1;\n}\n#example .main.container:after {\n  content: '';\n  display: block;\n  height: 0px;\n  clear: both;\n  visibility: hidden;\n}\n#example .example-group {\n  position: relative;\n}\n#example .main.container > .tab {\n  position: relative;\n}\n\n#example .main.container .examples > h2,\n#example .main.container > h2,\n#example .main.container > .tab > h2{\n  position: relative;\n  margin: 5rem 0rem 3rem;\n}\n#example .main.container .examples > h3,\n#example .main.container > h3,\n#example .main.container > .tab > h3{\n  position: relative;\n  margin: 3rem 0rem 2rem;\n}\n#example .main.container .examples > .rail + h2,\n#example .main.container > .rail + h2,\n#example .main.container > .tab > .rail + h2,\n#example .main.container .examples > h2:first-child,\n#example .main.container > h2:first-child,\n#example .main.container > .tab > h2:first-child {\n  margin-top: 0em;\n}\n\n/* After Section Header */\n#example .example:first-child,\n#example h2 + .example,\n#example h3 + .example,\n#example h4 + .example {\n  margin-top: 0px;\n}\n#example .example:first-child i.code,\n#example h2 + .example i.code,\n#example h3 + .example i.code,\n#example h4 + .example i.code {\n  top: 0.75em;\n}\n#example .another.example i.code {\n  top: -0.5em;\n}\n\n/* Spaced */\n#example .spaced.example .buttons,\n#example .spaced.example .button {\n  margin-bottom: 0.75em;\n}\n#example .spaced.example .buttons .button {\n  margin-bottom: 0em;\n}\n#example .example .toggle.button {\n  min-width: 200px;\n}\n\n/* Code Language */\n#example .example .language.label {\n  margin: 1em 0em 0.75em;\n}\n\n\n/*--------------\n   Code Button\n---------------*/\n\n#example .example i.code {\n  cursor: pointer;\n  position: absolute;\n\n  top: 2rem;\n  right: 0rem;\n  margin: 0;\n  opacity: 0.5;\n\n  font-size: 20px;\n  color: #000000;\n\n  -webkit-transition: opacity 0.3s ease-out;\n  -moz-transition: opacity 0.3s ease-out;\n  -o-transition: opacity 0.3s ease-out;\n  -ms-transition: opacity 0.3s ease-out;\n  transition: opacity 0.3s ease-out;\n}\n\n/*#example .example i.code:before {*/\n  /*font-family: 'Docs';*/\n  /*content: \"\\e600\";*/\n/*}*/\n#example .example:hover i.code {\n  opacity: 0.85;\n}\n#example .example:hover i.code:hover {\n  opacity: 1;\n}\n#example .example .grid i.code {\n  right: 25%;\n}\n\n#example .pointing.label + .existing.segment {\n  margin-top: 0em;\n}\n#example .existing.code {\n  display: none;\n}\n\n/* Code Annotation */\n#example .example .annotation {\n  margin: 0em;\n}\n#example .annotation pre code {\n  min-width: 500px;\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n\n#example .transition.example .ui.button {\n  margin-bottom: 0.5em;\n}\n\n/* HTML Wrapper */\n#example .example > .html {\n  padding: 0em;\n  transition:\n    box-shadow 0.2s ease,\n    padding 0.2s ease\n  ;\n  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);\n}\n#example .example > .html > .top.attached.label {\n  -moz-user-select: none;\n  -webkit-user-select: none;\n  user-select: none;\n  display: none;\n  background-color: #F8F8F8;\n  box-shadow: 0px 0px 0px 1px #DDDDDD;\n}\n#example .example > .html > .top.attached.label .copy {\n  position: absolute;\n  top: 9px;\n  right: 8px;\n  color: #AAAAAA;\n}\n#example .example > .html > .top.attached.label .copy:hover {\n  color: #666666;\n}\n#example .example > .empty.html.segment {\n  padding: 1.15em 1em 1em;\n}\n#example .example > .html.segment:after {\n  content: '';\n  display: block;\n  height: 0;\n  clear: both;\n  visibility: hidden;\n}\n#example .example > .html.segment > .attached.label {\n  display: block;\n}\n#example .example > .html.segment > .attached.label .copy {\n  float: right;\n}\n#example .example > .html.segment {\n  padding: 3.5em 1em 1em;\n}\n#example .example .instructive.segment {\n  margin-top: -1px;\n}\n\n/* Fixes for UI */\n#example .segment > .dimmer {\n  z-index: 800;\n}\n#example .code .active.ui.modal {\n  display: none !important;\n}\n#example .example .circular.segment {\n  width: 175px;\n  height: 175px;\n}\n#example .example .annotation.visible + .icon.buttons {\n  margin-top: 1rem;\n}\n\n\n/*******************************\n           UI Pages\n*******************************/\n\n\n/*----------------\n  Getting Started\n-----------------*/\n\n#example.started .tab.segment > .example:first-child {\n  margin-top: 0em;\n  padding-top: 0em;\n}\n#example.started .tab.segment > .example:last-child {\n  margin-bottom: 0em;\n  padding-bottom: 0em;\n}\n\n/*----------------\n     Theming\n-----------------*/\n\n#example.theming .main.container .button {\n  margin-bottom: 0.4em;\n}\n#example.theming .variable.grid .segment {\n  display: block;\n  width: 100%;\n  height: 500px;\n  overflow: auto;\n}\n\n/*--------------\n  Content Loader\n---------------*/\n#example .content.example .ignored.card {\n  display: none;\n}\n#example .content.example .card .image + .content {\n  min-height: 94px;\n}\n\n/*--------------\n    Colored\n---------------*/\n\n#example .colored.example .label,\n#example .colored.example .button,\n#example .colored.example .menu {\n  margin-bottom: 0.5em;\n}\n#example .colored.example .menu {\n  margin-right: 0.5em;\n}\n#example .colored.example .attached.label {\n  margin-bottom: 0em;\n}\n\n/*--------------\n    Callback\n---------------*/\n\n#example .callback.example .console {\n  height: 350px;\n  overflow: auto;\n}\n\n/*--------------\n    Fitted\n---------------*/\n\n#example .fitted.example .segment {\n  line-height: 1;\n}\n\n/*--------------\n      Grid\n---------------*/\n\n#example .highlighted.example .grid {\n  position: relative;\n}\n#example .highlighted.example .grid:before {\n  position: absolute;\n  top: 1rem;\n  left: 1rem;\n  background-color: #FAFAFA;\n  content: '';\n  width: calc(100% - 2rem);\n  height: calc(100% - 2rem);\n  box-shadow: 0px 0px 0px 1px #DDDDDD inset;\n}\n#example .highlighted.example .relaxed.grid:before {\n  width: calc(100% - 3rem);\n  left: 1.5em;\n}\n/* Consecutive */\n#example .highlighted.example > .grid + .grid {\n  margin-top: 1rem;\n}\n\n#example .highlighted.example .grid .grid:before {\n  background-color: #F0F0F0;\n}\n#example .highlighted.example .row {\n  position: relative;\n}\n\n#example .highlighted.example .grid > .column {\n  position: relative;\n  z-index: 11;\n}\n#example .highlighted.example .grid .column:not(.row):not(.grid):after {\n  background-color: rgba(86, 61, 124, .1);\n  -webkit-box-shadow: 0px 0px 0px 1px rgba(86, 61, 124, 0.2) inset;\n  box-shadow: 0px 0px 0px 1px rgba(86, 61, 124, 0.2) inset;\n  content: \"\";\n  display: block;\n  min-height: 50px;\n}\n#example .highlighted.example .grid .column:not(.grid):first-child,\n#example .ui.type.cards .image .grid .column:not(.grid):first-child {\n  box-shadow: none;\n}\n#example .highlighted.example .grid .column:not(.grid),\n#example .ui.type.cards .image .grid .column:not(.grid) {\n  min-height: 50px;\n}\n#example .highlighted.example .grid .segment,\n#example .ui.type.cards .image .grid .segment {\n  border-radius: 0px;\n  box-shadow: 0 0 0 1px #D4D4D4;\n}\n#example .negative.example > .button {\n  position: relative;\n  z-index: 100;\n  margin: 0px 1px;\n}\n\n/* Nested Grid Example */\n#example .highlighted.special.example .ui.grid > .column:first-child:after,\n#example .highlighted.special.example .ui.grid > .column:last-child:after {\n  display: none;\n}\n#example .highlighted.special.example .ui.grid .grid .column:not(.row):not(.grid):after {\n  display: block;\n  background-color: rgba(186, 61, 84, 0.1);\n  -webkit-box-shadow: 0 0 0 1px rgba(186, 61, 84, 0.2) inset;\n  box-shadow: 0 0 0 1px rgba(186, 61, 84, 0.2) inset;\n}\n\n\n#example.animated .negative.example > .grid {\n  margin: -1rem !important;\n  background-color: #FFEEEE;\n}\n\n#example .colored.example .column {\n  padding-top: 2em;\n  padding-bottom: 2em;\n}\n\n/* Animation */\n#example.animated .highlighted.example .html > .grid,\n#example.animated .animated.example .html > .grid,\n#example.animated .highlighted.example > .grid,\n#example.animated .animated.example > .grid {\n  margin: -1rem auto;\n  -webkit-animation: grid 7s ease infinite;\n  -moz-animation: grid 7s ease infinite;\n  animation: grid 7s ease infinite;\n}\n#example.animated .negative.example .html > .grid,\n#example.animated .negative.example > .grid {\n  -webkit-animation: none;\n  -moz-animation: none;\n  -ms-animation: none;\n  animation: none;\n}\n/* Grid Inside Grid */\n#example.animated .highlighted.example .grid .grid,\n#example.animated .animated.example .grid .grid {\n  -webkit-animation: none;\n  -moz-animation: none;\n  -ms-animation: none;\n  animation: none;\n}\n\n#example .ui.table .help.icon {\n  float: right;\n}\n\n#example.site .colors.example .column {\n  padding: 50px 0px;\n  text-align: center;\n  color: #FFFFFF;\n  font-weight: bold;\n}\n\n@-webkit-keyframes grid {\n  0% {\n    width: 100%;\n  }\n  45% {\n    width: 90%;\n  }\n  55% {\n    width: 90%;\n  }\n  100% {\n    width: 100%;\n  }\n}\n@-moz-keyframes grid {\n  0% {\n    width: 100%;\n  }\n  45% {\n    width: 90%;\n  }\n  55% {\n    width: 90%;\n  }\n  100% {\n    width: 100%;\n  }\n}\n@keyframes grid {\n  0% {\n    width: 100%;\n  }\n  45% {\n    width: 90%;\n  }\n  55% {\n    width: 90%;\n  }\n  100% {\n    width: 100%;\n  }\n}\n\n#example .layered.example {\n  z-index: 1;\n}\n\n/*--------------\n      Demo\n---------------*/\n\n#example .demo.container .button.demo > .buttons,\n#example .demo.container .button.demo > .button,\n#example .demo.container .button.demo > .segment > .button {\n  margin-bottom: 0.5em;\n}\n#example .demo.container h4:first-child {\n  font-weight: bold !important;\n  margin: 0em 0em 1em !important;\n  font-size: 18px;\n}\n#example .demo.container .example:first-child {\n  margin-top: 0;\n  padding-top: 0;\n}\n#example .demo.container .segment.example {\n  z-index: 1;\n}\n#example .demo.container > .ui.label:not(.empty) {\n  margin-bottom: 1em;\n}\n#example .demo.container .segment .ui.label {\n  margin-bottom: 0em;\n}\n\n/*--------------\n    New\n---------------*/\n\n.complex-popup.example #one {\n  display: block;\n  position: relative;\n  padding: 50px 100px;\n  background-color: #F0F0F0;\n}\n.complex-popup.example #two {\n  display: block;\n  background-color: #E2EAE4;\n  position: relative;\n  top: 10px;\n  padding: 50px 8px;\n}\n\n\n/*--------------\n   Visibility\n---------------*/\n\n/* static */\n.visibility.example .overlay {\n  padding: 0em;\n  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);\n  transition:\n    padding 0.5s ease\n  ;\n  background: transparent;\n}\n.visibility.example .overlay.fixed + .placeholder {\n  display: none;\n}\n/* fixed */\n.visibility.example .overlay.fixed {\n  position: fixed;\n  background-color: #FFFFFF;\n  padding: 1em;\n  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);\n  z-index: 10;\n}\n.visibility.example .overlay.fixed + .placeholder {\n  display: block;\n  height: 28px;\n}\n\n/* Flash Animation */\n.main.container .highlight {\n  -moz-animation: highlight 2s ease-out;\n    -moz-animation-iteration-count: 1;\n    -webkit-animation: highlight 2s ease-out;\n    -webkit-animation-iteration-count: 1;\n    -ms-animation: highlight 2s ease-out;\n    -ms-animation-iteration-count: 1;\n    animation: highlight 2s ease-out;\n    animation-iteration-count: 1;\n}\n\n@-webkit-keyframes highlight {\n    0% {\n      background-color: none;\n    }\n    30% {\n      background-color: #ffff00;\n    }\n    100% {\n      background-color: none;\n    }\n}\n\n@-moz-keyframes highlight {\n    0% {\n      background-color: none;\n    }\n    30% {\n      background-color: #ffff00;\n    }\n    100% {\n      background-color: none;\n    }\n}\n\n@-ms-keyframes highlight {\n    0% {\n      background-color: none;\n    }\n    30% {\n      background-color: #ffff00;\n    }\n    100% {\n      background-color: none;\n    }\n}\n\n\n/*--------------\n   Progress\n---------------*/\n\n\nbody.progress.animated .ui.progress .bar {\n  -webkit-animation: finish 10s ease-in-out infinite;\n  -moz-animation: finish 10s ease-in-out infinite;\n  -ms-animation: finish 10s ease-in-out infinite;\n  animation: finish 10s ease-in-out infinite;\n}\n\n/*--------------\n    Divider\n---------------*/\n\n#example.divider .ui.grid {\n  position: relative;\n}\n\n/*--------------\n      Header\n---------------*/\n\n#example.header .wireframe.image {\n  max-width: 500px;\n}\n\n/*--------------\n      Modal\n---------------*/\n\n#example.modal-page .main.container {\n  z-index: auto;\n}\n\n/*--------------\n      Popup\n---------------*/\n\n#example.popup .inline.example .popup {\n  color: #FF0000;\n}\n#example .position.example .icon {\n  position: absolute;\n  margin: 0em;\n  width: auto;\n  font-size: 1.5em;\n  height: auto;\n  padding: 0.5em !important;\n}\n#example .position.example .segment:not(.instructive) {\n  width: 250px;\n  height: 250px;\n}\n#example .position.example .segment .icon:nth-of-type(1) {\n  top: 0em;\n  left: 0em;\n}\n#example .position.example .segment .icon:nth-of-type(2) {\n  top: 0em;\n  left: 50%;\n  margin-left: -1em;\n}\n#example .position.example .segment .icon:nth-of-type(3) {\n  top: 0em;\n  right: 0em;\n}\n#example .position.example .segment .icon:nth-of-type(4) {\n  top: 50%;\n  margin-top: -1em;\n  right: 0em;\n}\n#example .position.example .segment .icon:nth-of-type(5) {\n  bottom: 0em;\n  right: 0em;\n}\n#example .position.example .segment .icon:nth-of-type(6) {\n  bottom: 0em;\n  left: 50%;\n  margin-left: -1em;\n}\n#example .position.example .segment .icon:nth-of-type(7) {\n  bottom: 0em;\n  left: 0em;\n}\n#example .position.example .segment .icon:nth-of-type(8) {\n  top: 50%;\n  margin-top: -1em;\n  left: 0em;\n}\n\n#example .main.ui.grid {\n  position: relative;\n}\n\n/*--------------\n      Icon\n---------------*/\n\n#example iconSearch.ui.search {\n  float: right;\n  position: relative;\n  z-index: 3;\n}\n#example iconSearch .result i.icon {\n  font-size: 20px;\n  float: right;\n  margin-top: -5px;\n  margin-left: 11px;\n  color: #000000;\n}\n\n\n#example .icon.example .grid {\n  text-align: left;\n}\n#example .icon.example .grid .code {\n  position: static;\n}\n#example .icon.example .grid > .column {\n  opacity: 0.8;\n  text-align: center;\n  color: transparent;\n\n  -moz-align-items: center;\n  -ms-align-items: center;\n  align-items: center;\n\n  -webkit-transition:\n    color 0.3s ease,\n    opacity 0.3s ease\n  ;\n  -moz-transition:\n    color 0.3s ease,\n    opacity 0.3s ease\n  ;\n  -o-transition:\n    color 0.3s ease,\n    opacity 0.3s ease\n  ;\n  -ms-transition:\n    color 0.3s ease,\n    opacity 0.3s ease\n  ;\n  transition:\n    color 0.3s ease,\n    opacity 0.3s ease\n  ;\n}\n#example .icon.example .attached.segment .grid > .row > .column  {\n  color: #555555;\n}\n#example .icon.example .column .icon {\n  opacity: 1;\n  height: 1em;\n  color: #333333;\n  display: block;\n  margin: 0em auto 0.25em;\n  font-size: 2em;\n\n  -webkit-transition:\n    color 0.6s ease,\n    transform 0.2s ease\n  ;\n  -moz-transition:\n    color 0.6s ease,\n    transform 0.2s ease\n  ;\n  -o-transition:\n    color 0.6s ease,\n    transform 0.2s ease\n  ;\n  -ms-transition:\n    color 0.6s ease,\n    transform 0.2s ease\n  ;\n  transition:\n    color 0.6s ease,\n    transform 0.2s ease\n  ;\n}\n#example .icon.example .html.segment .grid .column,\n#example .icon.example .grid:hover .column {\n  color: #777777;\n}\n#example .icon.example .grid:hover .column .icon {\n  color: #333333;\n}\n\n#example .icon.example .grid .column:hover .icon {\n  color: #000000;\n  -webkit-transform: scale(1.5);\n  -moz-transform: scale(1.5);\n  -o-transform: scale(1.5);\n  -ms-transform: scale(1.5);\n  transform: scale(1.5);\n}\n#example .icon.example .grid .column:hover {\n  opacity: 1;\n  color: #444444;\n}\n#example .another.icon.example {\n  border-top: 1px solid rgba(0, 0, 0, 0.1);\n}\n\n#example .another.example i.code ~ .ignored.message {\n  margin: 0em 0em 2em;\n}\n\n/*--------------\n    List Page\n---------------*/\n\n#example .element.cards .image {\n  overflow: hidden;\n  min-height: 100px;\n}\n#example .collection.cards {\n  min-height: 350px;\n}\n#example .ui.type.cards > .item {\n  min-height: 255px;\n}\n\n#example .ui.type.cards > .item > .image {\n  padding: 1em;\n  height: 165px;\n  vertical-align: middle;\n}\n/*--------------\n      Header\n---------------*/\n\n#example.header .sizer {\n  padding: 1rem 0em;\n}\n\n/*--------------\n      Flag\n---------------*/\n\n#example.flag .basic.table tbody td:first-child {\n  width: 20px;\n}\n\n/*--------------\n      Feed\n---------------*/\n\n#example.feed .example .segment {\n  max-width: 800px;\n}\n\n\n/*--------------\n      Search\n---------------*/\n\n.fixed.menu .right.searching.menu .borderless.item,\n.fixed.menu .right.searching.menu .popup.item,\n.fixed.menu .right.searching.menu .language.item {\n  display: none;\n}\n\n#search input {\n  color: white;\n  width: 146px;\n  text-align: right;\n}\n#search.hidden input {\n  padding: 0 0.8em 0 0 !important;\n  width: 0;\n}\n#search .results {\n  margin-top: 1em;\n  border-radius: 0px 0px 3px 3px;\n}\n#search.ui.input input::-webkit-input-placeholder {\n  color: rgba(255, 255, 255, 0.75);\n}\n#search.ui.input input::-moz-placeholder {\n  color: rgba(255, 255, 255, 0.75);\n}\n\n#shortcuts.ui.modal .actions {\n    padding: 0;\n    border: none;\n    background: none;\n}\n\n/*******************************\n         Code Samples\n*******************************/\n\n\ncode.code {\n  display: block;\n  overflow-x: auto;\n  padding: 0em;\n  color: #666;\n  background-color: transparent;\n  -webkit-text-size-adjust: none;\n}\n\n/*--------------\n   Hover Only\n---------------*/\n\ncode.code,\ncode.code span {\n  -moz-transition: 0.5s color ease;\n  -webkit-transition: 0.5s color ease;\n  -ms-transition: 0.5s color ease;\n  transition: 0.5s color ease;\n}\ncode.code {\n  color: #333333;\n}\n\ncode.code.xml {\n  color: #555555;\n}\ncode.code.xml:hover {\n  color: #333333;\n}\n\n/* Class Name */\ncode .string,\ncode .tag .value,\ncode .phpdoc,\ncode .dartdoc,\ncode .tex .formula {\n  color: #008C79;\n}\ncode:hover .string,\ncode:hover .tag .value,\ncode:hover .phpdoc,\ncode:hover .dartdoc,\ncode:hover .tex .formula {\n  color: #007b6b;\n}\n\n/* Comment */\ncode .comment,\ncode .template_comment,\ncode .diff .header,\ncode .javadoc {\n  color: #AAAAAA;\n  font-style: italic;\n}\n\n\n/* Properties */\ncode .tag,\ncode .rules .property,\ncode .django .tag .keyword {\n  color: #858188;\n  font-weight: normal;\n}\n\ncode:hover .tag,\ncode:hover .rules .property,\ncode:hover .django .tag .keyword {\n  color: #892A6F;\n  font-weight: normal;\n}\n\n/* HTML Tag */\ncode .tag .title {\n  color: #858188;\n  font-weight: normal;\n}\ncode:hover .tag .title {\n  color: #892A6F;\n}\n\n/* Attribute */\ncode .attribute,\ncode .variable,\ncode .lisp .body {\n  color: #8D8A8A;\n  transition: color 0.3s;\n}\ncode:hover .attribute,\ncode:hover .variable,\ncode:hover .lisp .body {\n  color: #934E4E;\n}\n\n/* CSS ID */\ncode .title,\ncode .id,\ncode .scss .preprocessor {\n  color: #9C989F;\n  font-weight: bold;\n}\n\n/* CSS Attribute */\ncode .rule .attribute {\n  color: #892A6F;\n}\ncode:hover .rule .attribute {\n  color: #892A6F;\n}\n\n/* CSS Value */\ncode .number,\ncode .hexcolor,\ncode .ruby .constant {\n  color: #666666;\n}\n\ncode:hover .number,\ncode:hover .hexcolor,\ncode:hover .ruby .constant {\n  color: #333333;\n}\n\n/* LESS */\ncode.less .number,\ncode.less .hexcolor,\ncode.less .ruby .constant {\n  color: #005FAA;\n}\ncode.less:hover .number,\ncode.less:hover .hexcolor,\ncode.less:hover .ruby .constant {\n  color: #005FAA;\n}\n/* LESS Variable */\ncode.less .attribute,\ncode.less .variable,\ncode.less .lisp .body {\n  color: #333333;\n  transition: color 0.3s;\n}\ncode.less:hover .attribute,\ncode.less:hover .variable,\ncode.less:hover .lisp .body {\n  color: #333333;\n}\n\n/* Emphasized Value */\ncode.code .class {\n  color: #008C79;\n}\ncode.code .class b {\n  font-weight: normal;\n  background-color: rgba(90, 90, 90, 0);\n  border-radius: 5px;\n  line-height: 1;\n  vertical-align: baseline;\n  display: inline-block;\n  -webkit-transition: all 0.3s ease;\n  transition: all 0.3s ease;\n  margin: 0px -4px;\n  padding: 1px 4px;\n}\ncode.code .class b {\n  background-color: rgba(218, 189, 40, 0.15);\n  color: #9E6C00;\n}\n\n/*\ncode.code:hover .class.string b,\ncode.code:hover .class.value b {\n  background-color: rgba(218, 189, 40, 0.1);\n  color: inherit;\n}\n*/\n\n\n/* Linked UI */\ncode .tag .value a {\n  position: relative;\n  border-radius: 5px;\n  line-height: 1;\n  color: inherit;\n  margin: 0px -2px;\n  padding: 1px 4px;\n  background-color: rgba(150, 150, 150, 0.1);\n  -webkit-transition: all 0.3s ease;\n  transition: all 0.3s ease;\n}\ncode .tag .value a b {\n  border-radius: 0px;\n}\ncode .tag .value a:hover {\n  background-color: rgba(40, 150, 218, 0.2);\n  color: #00689E;\n}\ncode .tag .value a:hover b {\n  background-color: transparent;\n  color: inherit;\n}\n\n\n\n/*--------------\n      Normal\n---------------*/\n\ncode .keyword,\ncode .css .rule .keyword,\ncode .winutils,\ncode .javascript .title,\ncode .nginx .title,\ncode .subst,\ncode .request,\ncode .status {\n  color: #333;\n  font-weight: bold;\n}\n\ncode .javascript .title,\ncode .list .keyword,\ncode .subst {\n  font-weight: normal;\n}\n\ncode .class .title,\ncode .type,\ncode .vhdl .literal,\ncode .tex .command {\n  color: #458;\n  font-weight: bold;\n}\n\n\ncode .regexp {\n  color: #009926;\n}\n\ncode .built_in {\n  color: #0086b3;\n}\n\ncode .preprocessor,\ncode .pragma,\ncode .pi,\ncode .doctype,\ncode .shebang,\ncode .cdata {\n  color: #999;\n  font-weight: bold;\n}\n\ncode .deletion {\n  background: #fdd;\n}\n\ncode .addition {\n  background: #dfd;\n}\n\ncode .diff .change {\n  background: #0086b3;\n}\n\ncode .chunk {\n  color: #aaa;\n}\n\n\n/*******************************\n         Sidebar Layout\n*******************************/\n\n#example > .pusher > .full.height {\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-flex-direction: row;\n      -ms-flex-direction: row;\n          flex-direction: row;\n}\n#example:not(.site) > .pusher > .full.height {\n  background-color: #FFFFFF;\n}\n\n/* page layout */\n#example .full.height > .toc {\n  position: fixed;\n  z-index: 1;\n  background-color: #1b1c1d;\n  width: 250px;\n  -webkit-box-flex: 0;\n  -webkit-flex: 0 0 auto;\n      -ms-flex: 0 0 auto;\n          flex: 0 0 auto;\n}\n#example .full.height > .toc .ui.menu {\n  border-radius: 0;\n  border-width: 0 1px 0 0;\n  box-shadow: none;\n  margin: 0;\n  width: inherit;\n  overflow: hidden;\n  will-change: transform;\n  max-height: 100vh;\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n}\n#example .article {\n  -webkit-box-flex: 1;\n  -webkit-flex: 1 1 auto;\n      -ms-flex: 1 1 auto;\n          flex: 1 1 auto;\n  min-width: 0px;\n  margin-left: 250px;\n}\n\n#example .full.height > .toc .ui.menu::-webkit-scrollbar {\n  -webkit-appearance: none;\n}\n#example .full.height > .toc .ui.menu::-webkit-scrollbar-track {\n  background-color: rgba(255, 255, 255, 0);\n}\n#example .full.height > .toc .ui.menu::-webkit-scrollbar-thumb {\n  background-color: rgba(255, 255, 255, 0);\n}\n\n#example .full.height > .toc .ui.menu:hover::-webkit-scrollbar-track {\n  background-color: rgba(255, 255, 255, 0.1);\n}\n#example .full.height > .toc .ui.menu:hover::-webkit-scrollbar-thumb {\n  background-color: rgba(255, 255, 255, 0.25);\n}\n\n#example > .pusher > .footer,\n#example .article > .footer {\n  border-top: 1px solid #DDDDDD;\n  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.08) inset;\n  background-color: #FAFAFA;\n  padding-top: 2em;\n}\n\n/*******************************\n      Definition Container\n*******************************/\n\n#example > .pusher > .footer {\n  clear: both;\n}\n\n#example .fixed.menu > .container,\n#example .main.container,\n#example .masthead > .container,\n#example .footer > .container {\n  position: relative;\n}\n\n#example .main.container {\n  padding: 2em 0em 7em;\n}\n#example .wide.main.container {\n  width: 80%;\n  margin: 0 auto;\n  max-width: 1140px;\n}\n\n#example .main.container > .right.rail .sticky,\n#example .main.container > .tab > .examples > .right.rail .sticky,\n#example .main.container > .tab > .right.rail .sticky {\n  padding-bottom: 2em;\n}\n\n#example .following.menu .menu .active.item {\n  font-weight: bold;\n}\n\n/*******************************\n           Advert\n*******************************/\n\n/*----------------\n  Style Overrides\n-----------------*/\n\n#example .masthead .advertisement {\n  width: 285px;\n  height: 130px;\n}\n#example .masthead .advertisement #carbonads {\n  width: 100%;\n  height: 130px;\n}\n#example .advertisement #carbonads {\n  position: relative;\n  display: block;\n  margin: 0 auto;\n  background-color: #F5F5F5;\n  border: 1px solid #CCCCCC;\n  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.08) inset;\n  padding: 1em;\n  font-family: \"Helvetica Neue\", Arial, sans-serif;\n  overflow: hidden;\n  -moz-border-radius: 5px;\n  -webkit-border-radius: 5px;\n  border-radius: 5px;\n}\n#example .advertisement #carbonads:hover {\n  background-color: #F0F8F9;\n  border: 1px solid #87C7D0;\n}\n#example .advertisement .carbon-wrap {\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: -ms-flexbox;\n  display: flex;\n}\n#example .advertisement .carbon-img {\n  width: 130px;\n  margin-right: 0.75em;\n  -webkit-box-flex: 1;\n  -webkit-flex: 1 0 auto;\n      -ms-flex: 1 0 auto;\n          flex: 1 0 auto;\n}\n#example .advertisement .carbon-img img {\n  display: block;\n  border: 1px solid #DDDDDD;\n}\n#example .advertisement .carbon-text {\n  font-size: 13px;\n  line-height: 16px;\n  padding-bottom: 1.5em;\n  height: auto;\n  min-width: 145px;\n  color: rgba(20, 50, 50, 0.8);\n}\n#example .advertisement .carbon-text:hover {\n  color: rgba(0, 30, 30, 0.8);\n}\n#example .carbon-poweredby {\n  position: absolute;\n  left: 130px;\n  margin-left: 2em;\n  bottom: 1em;\n  color: #bbb;\n  font-size: 11px;\n  color: rgba(0, 0, 0, 0.3);\n  text-align: left;\n}\n\n\n/*******************************\n        Advertisements\n*******************************/\n\n/* Rail Ad */\n#example .rail .advertisement {\n  display: block;\n  float: none;\n  margin: 1em 0;\n  padding-left: 0;\n}\n#example .rail .advertisement #carbonads {\n  display: block;\n  margin: 0 -1.5em;\n  width: auto;\n}\n\n#semantic-sponsor {\n  min-height: 40px;\n  border-bottom: solid 1px #dddddd;\n}\n\n\n.native-link {\n  display: block;\n  width: 100%;\n  background-color: #F5F5F5;\n  padding: 5px 3em;\n  color: #415a5a;\n}\n.native-link:hover {\n  color: #000000;\n  background-color: #F0F8F9;\n}\n\n.native-link,\n.native-ad {\n  text-decoration: none;\n}\n.native-ad {\n  position: absolute;\n  right: 1rem;\n}\n\n.native-inline,\n.native-link {\n  display: flex;\n  align-items: center;\n}\n\n.native-img {\n  margin-right: 10px;\n  display: block;\n  padding: 5px;\n  height: 30px;\n  flex: 0 0 auto;\n  width: 30px;\n  border-radius: 50%;\n}\n\n.native-text {\n  margin-right: 38px;\n}\n\n.native-ad {\n  padding: 4px 7px 4px;\n  line-height: 1;\n  border-radius: 3px;\n  background-color: #848484;\n  color: #fff;\n  font-size: 10px;\n}\n\n.native-ad:hover {\n  color: #fff;\n}\n\n\n/*******************************\n          Responsive\n*******************************/\n\n/* Defaults */\n#example .masthead > .container,\n#example .main.container,\n#example .fixed.menu > .container {\n  margin-left: 3em !important;\n  margin-right: 3em !important;\n  width: auto !important;\n  max-width: 960px !important;\n}\n#example .masthead > .container {\n  margin-right: 387px !important;\n}\n#example .main.container {\n  margin-right: 387px !important;\n}\n\n/* Rail Default */\n#example .main.container > .right.rail,\n#example .main.container > .tab > .examples > .right.rail,\n#example .main.container > .tab > .right.rail {\n  margin-left: 3em;\n  padding-top: 2em;\n  width: 319px;\n}\n\n#example .masthead .advertisement {\n  margin-left: 3em;\n  padding: 0em 1.25em;\n  width: 342px;\n}\n\n/* Absolute Ad */\n#example .masthead .introduction {\n  display: block;\n}\n#example .masthead .advertisement {\n  position: absolute;\n  left: 100%;\n  bottom: -2px;\n}\n\n/* Remove Overview from pages with Examples */\n@media only screen and (max-width: 1500px) {\n\n  #example .fixed.column {\n    right: auto;\n    left: 100%;\n    margin-left: 4.5em;\n    width: 300px;\n  }\n  #example .fixed.column + .examples {\n    margin-right: 0px;\n  }\n  #example .fixed.column + .examples .right.rail {\n    display: none;\n  }\n\n}\n\n\n/* Table Ad */\n@media only screen and (max-width: 1272px) {\n\n  #example .masthead > .container:first-child {\n    display: flex;\n    flex-direction: row;\n  }\n  #example .masthead > .container {\n    margin-right: 2em !important;\n    max-width: none !important;\n  }\n  #example .masthead .introduction {\n    vertical-align: top;\n    flex: 1 0 auto;\n  }\n  #example .masthead .advertisement {\n    position: static;\n    float: none;\n    flex: 0 1 auto;\n    vertical-align: bottom;\n    padding-left: 0em;\n    margin-left: 2rem;\n    margin-top: -0.5rem;\n    padding-right: 0em;\n  }\n  #example .bsa-cpc ._default_ {\n    margin-right: 0px;\n  }\n}\n\n/* Squish Content (Just For Small Computers) */\n@media only screen and (max-width: 1272px) {\n\n  /* Resize TOC  */\n  #example .full.height > .toc {\n    width: 200px;\n  }\n  #example .article {\n    margin-left: 200px;\n  }\n  #example .masthead > .container,\n  #example .main.container,\n  #example .fixed.menu > .container {\n    margin-left: 2rem !important;\n    margin-right: 2rem !important;\n  }\n  /* Resize Main Container */\n  #example .main.container {\n    margin-right: 318px !important;\n  }\n\n  .native-link {\n    padding-left: 2rem;\n    padding-right: 2rem;\n  }\n  .native-ad {\n    right: 2rem;\n  }\n\n  /* Resize Rail */\n  #example .main.container > .right.rail,\n  #example .main.container > .tab > .examples > .right.rail,\n  #example .main.container > .tab > .right.rail {\n    padding-left: 1.5em;\n    width: 260px;\n  }\n\n  #example .fixed.column {\n    width: 250px;\n    margin-left: 2.5em;\n  }\n\n}\n\n/* Hide Top Bar */\n@media only screen and (min-width: 1145px) {\n  #example .fixed.main.menu {\n    display: none;\n  }\n}\n\n/* Remove Fixed Sidebar /  Show Top Bar */\n@media only screen and (max-width: 1144px) {\n\n  /* Hide Fixed Sidebar */\n  #example .full.height > .toc {\n    display: none;\n  }\n  #example .full.height > .article {\n    margin-left: 0px;\n  }\n\n  /* Hide Fixed Launch Button */\n  #example .fixed.launch.button {\n    display: none !important;\n  }\n\n  /* Additional Padding for Fixed Menu */\n  #example .masthead.segment {\n    padding-top: 5em;\n  }\n\n  /* Hide GitHub Stars in Intro */\n  #example .masthead iframe {\n    display: none;\n  }\n\n  /* Less Left Padding */\n  #example .masthead > .container,\n  #example .main.container,\n  #example .fixed.menu > .container {\n    margin-left: 2em !important;\n  }\n\n  /* Padding Above Rail */\n  #example .main.container > .right.rail .sticky,\n  #example .main.container > .tab > .examples > .right.rail .sticky,\n  #example .main.container > .tab > .right.rail .sticky {\n    padding-top: 2.5em;\n  }\n\n  /* 100% Menu Width */\n  #example .fixed.menu > .container {\n    margin-left: 0em !important;\n    margin-right: 0em !important;\n    width: 100% !important;\n    max-width: none !important;\n  }\n\n  /* Remove Bug Reports */\n  #example .main.menu .bug.item {\n    display: none;\n  }\n\n  /* Hide Music *]/\n  #example .main.menu .music.item {\n    display: none;\n  }\n\n  /* Space For Header Over Examples */\n  #example .fixed.column .sticky {\n    padding-top: 2em;\n  }\n\n}\n\n/* Remove Rail */\n@media only screen and (max-width: 992px) {\n\n  /* Remove Rail */\n  #example .main.container > .right.rail,\n  #example .main.container > .tab > .examples > .right.rail,\n  #example .main.container > .tab > .right.rail {\n    display: none;\n  }\n\n  /* Fluid Containers */\n  #example .masthead > .container,\n  #example .main.container,\n  #example .fixed.menu > .container {\n    margin-left: 1em !important;\n    margin-right: 1em !important;\n    max-width: none !important;\n  }\n\n  /* Still 100% Fixed Menu */\n  #example .fixed.menu > .container {\n    margin-left: 0em !important;\n    margin-right: 0em !important;\n    width: 100% !important;\n    max-width: none !important;\n  }\n\n  /* Remove Padding on Ad */\n  #example .masthead .advertisement {\n    padding-right: 0em !important;\n  }\n\n\n}\n\n\n@media only screen and (max-width: 820px) {\n\n  /* Ad Takes Full Width */\n  #example .masthead .introduction {\n    display: block;\n  }\n  #example .masthead .advertisement {\n    display: block;\n    float: none;\n    margin: 2em 0em 0em;\n    padding-left: 0em;\n    width: auto;\n  }\n  #example .masthead .advertisement #carbonads > span {\n    position: relative;\n    display: block;\n    max-width: 300px;\n  }\n\n}\n\n@media only screen and (max-width: 768px) {\n\n  #example .masthead > .container:first-child {\n    flex-direction: column;\n  }\n  #example .masthead .advertisement #carbonads {\n    height: auto;\n  }\n  #example .masthead .advertisement {\n    height: auto;\n    margin: 1rem 0rem;\n  }\n  /* Hide Some Fixed Menu Content (Pagination, Search) */\n  #example .fixed.menu > .container > .section.item {\n    display: none;\n  }\n  #example .masthead.segment {\n    padding-bottom: 0em;\n  }\n\n  #example.button-page .example > .button,\n  #example.button-page .example .html > .button {\n    margin-bottom: 8px;\n  }\n  #example .stackable.grid .ui.vertical.divider {\n    display: none;\n  }\n\n  /* Add Sticky Footers */\n  body.pushable > .pusher {\n    display: -webkit-box;\n    display: -webkit-flex;\n    display: -ms-flexbox;\n    display: flex;\n  -webkit-flex-direction: column;\n      -ms-flex-direction: column;\n          flex-direction: column;\n  }\n  body.pushable > .pusher > .full.height {\n  -webkit-box-flex: 1;\n  -webkit-flex: 1 0 auto;\n      -ms-flex: 1 0 auto;\n          flex: 1 0 auto;\n  }\n\n  /* Ad Label */\n  #example .bsa-cpc ._default_ {\n    padding-left: 1em;\n    padding-right: 1em;\n  }\n\n  /* Let Buttons Vertically Stack */\n  #example .masthead .button {\n    margin-bottom: 0.75em;\n  }\n\n  #example .masthead .main.menu {\n    display: none;\n  }\n  #example .masthead .main.menu + .main.menu {\n    display: -webkit-box;\n    display: -webkit-flex;\n    display: -ms-flexbox;\n    display: flex;\n  }\n\n  /* No Download Button */\n  #example .masthead .download.button {\n    display: none;\n  }\n\n  /* Hide Sitemap */\n  #example .pusher > .footer .grid .three.column {\n    display: none !important;\n  }\n}\n\n/* Small Phone */\n@media only screen and (max-width: 500px) {\n\n  /* Stack Advert */\n  #example .masthead .advertisement #carbonads > span {\n    max-width: none;\n  }\n  #example .advertisement .carbon-wrap {\n  -webkit-flex-direction: column-reverse;\n      -ms-flex-direction: column-reverse;\n          flex-direction: column-reverse;\n\n    text-align: center;\n    align-items: center;\n  }\n  #example .carbon-poweredby {\n    display: none;\n  }\n\n}\n"
  },
  {
    "path": "server/files/stylesheets/home.css",
    "content": "/*******************************\n            Homepage\n*******************************/\n\n#example.index .pusher > .page {\n  background-color: #FFFFFF;\n}\n\n@media only screen and (max-width: 992px) {\n  html {\n    overflow-x: visible;\n    -webkit-overflow-scrolling: auto;\n  }\n}\n#example > .pusher {\n  display: block;\n  min-height: 0px;\n  flex-direction: initial;\n}\n#example > .pusher > .full.height {\n  display: block;\n  flex: none !important;\n}\n\n/*--------------\n    Masthead\n---------------*/\n\n#example.index .masthead.segment.zoomed h1 {\n  text-shadow: 0px 0px 4px rgba(0, 0, 0, 0);\n  color: rgba(255, 255, 255, 1);\n}\n#example.index .masthead.zoomed:after {\n  opacity: 0;\n}\n#example.index .masthead.zoomed {\n  background-color: #25282A;\n}\n\n#example.index .masthead {\n  position: relative;\n  overflow: hidden;\n  text-align: center;\n  padding: 0em;\n  color: rgba(255, 255, 255, 0.9);\n  margin-bottom: 0px;\n  border-bottom: none;\n\n  background-color: #000000;\n  background-position: 50% 50%;\n  -webkit-transform: translate3d(0, 0, 0);\n  transform: translate3d(0, 0, 0);\n}\n#example.index .masthead:after {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  z-index: -1;\n  width: 100%;\n  height: 100%;\n  content: '';\n  background-size: cover;\n\n  opacity: 0.45;\n}\n#example.index .masthead.bg1:after {\n  background-image: url(\"/images/backgrounds/1.jpg\");\n}\n#example.index .masthead.bg2:after {\n  background-image: url(\"/images/backgrounds/2.jpg\");\n}\n#example.index .masthead.bg3:after {\n  background-image: url(\"/images/backgrounds/3.jpg\");\n}\n#example.index .masthead.bg4:after {\n  background-image: url(\"/images/backgrounds/4.jpg\");\n}\n#example.index .masthead.bg5:after {\n  background-image: url(\"/images/backgrounds/5.jpg\");\n}\n#example.index .masthead.bg6:after {\n  background-image: url(\"/images/backgrounds/6.jpg\");\n}\n#example.index .masthead.bg7:after {\n  background-image: url(\"/images/backgrounds/7.jpg\");\n}\n#example.index .masthead.bg8:after {\n  background-image: url(\"/images/backgrounds/8.jpg\");\n}\n#example.index .masthead.bg9:after {\n  background-image: url(\"/images/backgrounds/9.jpg\");\n}\n#example.index .masthead.bg10:after {\n  background-image: url(\"/images/backgrounds/10.jpg\");\n}\n#example.index .masthead.bg11:after {\n  background-image: url(\"/images/backgrounds/11.jpg\");\n}\n#example.index .masthead.bg12:after {\n  background-image: url(\"/images/backgrounds/12.jpg\");\n}\n#example.index .masthead.bg13:after {\n  background-image: url(\"/images/backgrounds/13.jpg\");\n}\n#example.index .masthead.bg14:after {\n  background-image: url(\"/images/backgrounds/14.jpg\");\n}\n\n\n#example.index .masthead,\n#example.index .masthead:after {\n  -ms-transition:\n    background 6s cubic-bezier(0.680, -0.550, 0.265, 1.4) 0s,\n    opacity 6s cubic-bezier(0.680, -0.550, 0.265, 1.4) 0s\n  ;\n  -moz-transition:\n    background 6s cubic-bezier(0.680, -0.550, 0.265, 1.4) 0s,\n    opacity 6s cubic-bezier(0.680, -0.550, 0.265, 1.4) 0s\n  ;\n  -webkit-transition:\n    background 6s cubic-bezier(0.680, -0.550, 0.265, 1.4) 0s,\n    opacity 6s cubic-bezier(0.680, -0.550, 0.265, 1.4) 0s\n  ;\n  transition:\n    background 6s cubic-bezier(0.680, -0.550, 0.265, 1.4) 0s,\n    opacity 6s cubic-bezier(0.680, -0.550, 0.265, 1.4) 0s\n  ;\n}\n#example.index .masthead .container {\n  height: 55vh;\n  margin-left: auto !important;\n  margin-right: auto !important;\n  min-height: 600px;\n\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n  -ms-flex-align: center;\n  align-items: center;\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n  -ms-flex-pack: center;\n  justify-content: center;\n}\n#example .masthead .container {\n  padding: 15rem 0em;\n}\n#example.index .following.bar iframe.github {\n  margin-top: 0px;\n}\n#example.index .following.bar .menu .item {\n  display: block;\n}\n#example.index.pushed .masthead,\n#example.index.pushed .following.bar {\n  -webkit-transform: translate3d(0, 0, 0);\n  -moz-transform: translate3d(0, 0, 0);\n  transform: translate3d(0, 0, 0);\n}\n\n#example.index > .pusher > .footer {\n  padding-left: 0em;\n}\n\n#example.index .light.following.bar {\n  padding: 0em 0em;\n  background-color: #FFFFFF;\n  border-bottom: 1px solid #DDDDDD;\n  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.04);\n}\n\n#example.index .masthead.segment .typed-cursor {\n  position: relative;\n  top: -0.05em;\n  left: -0.25em;\n  visibility: hidden;\n  opacity: 1;\n  -webkit-animation: blink 0.7s infinite;\n  -moz-animation: blink 0.7s infinite;\n  animation: blink 0.7s infinite;\n  -webkit-transition: opacity 0.7s ease;\n  -moz-transition: opacity 0.7s ease;\n  transition: opacity 0.7s ease;\n}\n#example.index .masthead.segment .typed-cursor.stop {\n  opacity: 0;\n  -moz-animation-duration: 0s;\n  -webkit-animation-duration: 0s;\n  animation-duration: 0s;\n}\n@keyframes blink {\n  0% { opacity:1; }\n  50% { opacity:0; }\n  100% { opacity:1; }\n}\n@-webkit-keyframes blink {\n  0% { opacity:1; }\n  50% { opacity:0; }\n  100% { opacity:1; }\n}\n@-moz-keyframes blink {\n  0% { opacity:1; }\n  50% { opacity:0; }\n  100% { opacity:1; }\n}\n\n#example.index .vertical.segment {\n  box-shadow: none;\n}\n\n#example.index .masthead.segment h1 {\n  font-size: 3em;\n  color: rgba(255, 255, 255, 1);\n  line-height: 1.2;\n  margin: 0px 0px 0px;\n  padding-bottom: 0px;\n  -moz-perspective: 500px;\n  -webkit-perspective: 500px;\n  perspective: 500px;\n\n  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n\n  -moz-transform-style: preserve-3d;\n  -webkit-transform-style: preserve-3d;\n  transform-style: preserve-3d;\n}\n#example.index .masthead.segment h1 .tagline {\n  font-size: 0.75em;\n}\n#example.index .masthead.segment h1 > .library {\n  display: block;\n  font-size: 1.75em;\n  font-weight: bold;\n}\n#example.index .masthead.segment h1 b {\n  display: inline-block;\n  font-weight: 500;\n}\n#example.index .masthead.segment h1 .text {\n  display: inline-block;\n  font-weight: 300;\n  margin-left: -0.4em;\n}\n#example.index .masthead h2 {\n  font-weight: normal;\n  margin: 0px 0 16px 0px;\n  font-size: 1.75em;\n  border-bottom: none;\n  line-height: 1;\n}\n#example.index .masthead p {\n  font-size: 1.5em;\n  margin: 1em 0em 1.5em;\n  padding: 0px;\n}\n#example.index .ui.header {\n  font-weight: normal;\n}\n#example.index .footer .ui.header {\n  font-weight: bold;\n}\n\n#example.index .introduction {\n  position: relative;\n  clear: both;\n  display: block;\n  text-align: center;\n}\n#example.index .introduction .buttons {\n  margin-top: 3em;\n}\n\n\n#example.index .advertisement {\n  display: none !important;\n  padding-left: 0;\n  position: absolute;\n  left: auto;\n  right: 6em;\n  top: 50%;\n  transform: translateY(-50%);\n  vertical-align: top;\n}\n#example.index .fixed.launch.button {\n  display: none;\n  top: 100px;\n}\n#example.index .main.menu {\n  top: 0px;\n}\n#example.index pre.console {\n  height: 120px;\n}\n\n/*--------------\n    Intro\n---------------*/\n\n#example .intro.segment h1 + p {\n  font-size: 22px;\n}\n\n/*--------------\n    Demo\n---------------*/\n\n#example .demo.row .example > .ui.label:not(.empty) {\n  margin-bottom: 1em;\n}\n#example .demo.row .ui.progress {\n  margin-bottom: 2.5em;\n}\n#example .demo.row h4 {\n  font-weight: bold !important;\n  margin: 0em 0em 1em !important;\n}\n#example .demo.row .example {\n  clear: both;\n  padding-top: 3em;\n  margin-top: 3em;\n}\n#example .demo.row .ui.menu,\n#example .demo.row .ui.card {\n  width: 100%;\n}\n#example .demo.row .ui.card {\n  width: 100%;\n  max-width: 400px;\n}\n\n/*--------------\n    Features\n---------------*/\n\n#example.index .hidden.code {\n  visibility: hidden;\n}\n\n#example.index .demo.row .example {\n  clear: both;\n  padding-top: 1.5em;\n  margin-top: 1.5em;\n}\n#example.index .demo.row .example:first-child {\n  margin-top: 0;\n  padding-top: 0;\n}\n#example.index .demo.row .example:last-child {\n  margin-bottom: 0em;\n}\n\n/*--------------\n    Following\n---------------*/\n\n#example.index .following.bar {\n  position: fixed;\n  top: 0px;\n  z-index: 900;\n  left: 0%;\n  padding: 2em 0em;\n  width: 100%;\n  box-shadow: 0px 0px 0px 0px transparent;\n  border-bottom: 1px solid transparent;\n  transition:\n    padding 0.5s ease,\n    background 0.5s ease,\n    box-shadow 0.5s ease,\n    border 0.5s ease\n  ;\n}\n#example.index .following.bar > .menu .item {\n  transition: all 0.5s ease;\n}\n#example.index.pushed .following.bar .menu .item,\n#example.index.pushed .following.bar {\n  transition: none;\n}\n#example.index .following.bar .additional.item[data-site=\"learn\"]:hover {\n  color: #D9499A;\n}\n#example.index .following.bar span.additional.item {\n  cursor: default;\n  color: rgba(0, 0, 0, 0.2);\n}\n#example.index .following.bar .inverted span.additional.item {\n  color: rgba(255, 255, 255, 0.2);\n}\n#example.index .following.bar .column > .menu {\n  margin-top: 0px;\n  height: 35px;\n}\n#example.index .following.bar .network.menu .item {\n  font-weight: bold;\n}\n#example.index .following.bar .item iframe {\n  margin-left: 10px;\n}\n#example.index .following.bar .network.menu .view-ui {\n  margin-right: 1em;\n}\n#example.index .light.following.bar .network.menu .view-ui {\n  color: #00B5AD;\n}\n#example.index .light.following.bar .inverted.network.menu .view-ui {\n  color: #6DFFFF;\n}\n#example.index .following .logo {\n  float: left;\n  width: 35px;\n  margin-right: 1em;\n}\n#example.index .following .logo .side {\n  width: 35px;\n}\n#example .masthead .version.label:after {\n  background-color: #000000 !important;\n}\n#example.index .following .version.label {\n  margin: 0.25em 0px 0px 1em;\n}\n\n\n/*--------------\n     Stripes\n---------------*/\n\n#example.index .stripe .grid .row {\n  margin: 2rem 0rem;\n}\n#example.index .feature.stripe .grid .row {\n  margin: 0rem;\n}\n#example.index .feature.stripe .column {\n  display: flex;\n  -ms-flex-direction: column;\n  -webkit-flex-direction: column;\n  -moz-flex-direction: column;\n  flex-direction: column;\n}\n#example.index .feature.stripe p {\n  -webkit-flex: 1 0 auto;\n  -moz-flex: 1 0 auto;\n  -ms-flex: 1 0 auto;\n  flex: 1 0 auto;\n  margin: 0.5em 0em 2em;\n}\n#example .stripe .ui.vertical.divider {\n  font-size: 1rem;\n}\n#example.index .feature.stripe .icon.header .icon.image {\n  width: auto;\n  height: 65px;\n  margin-bottom: 20px;\n}\n#example.index .stripe .icon.header .icon.image {\n  height: 65px;\n  margin-bottom: 20px;\n}\n#example.index .community.stripe {\n  box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1);\n  padding: 4em 0;\n}\n#example.index .stripe .icon.header i.icon {\n  font-size: 2em;\n}\n\n\n/* Final */\n#example.index .final.stripe {\n  border-top: 1px solid #DDDDDD;\n  background-color: #F8F8F8;\n}\n\n/* Alternate */\n#example .alternate.stripe {\n  background-color: #F2F3F5;\n}\n\n/* Inverted */\n#example.index .inverted.stripe {\n  background-color: #1B1C1D;\n}\n#example.index .inverted.stripe p {\n  color: #FFFFFF;\n}\n\n\n/*--------------\n    Legacy?\n---------------*/\n\n/* content */\n#example .solid,\n#example .stripe {\n  background-color: #FFFFFF;\n  padding: 10em 0px;\n  border-radius: 0em;\n  margin: 0em;\n  -webkit-transform: translate3d(0, 0, 0);\n  transform: translate3d(0, 0, 0);\n}\n#example .theming.stripe {\n  -webkit-transform: none;\n  transform: none;\n}\n\n#example .stripe h1 {\n  font-size: 40px;\n}\n#example .stripe h2 {\n  font-size: 26px;\n}\n#example .stripe h3 {\n  font-size: 20px;\n}\n#example .feature.stripe {\n  padding: 3em 0em;\n}\n#example .theming.stripe .left.aligned.column {\n  padding-top: 8em;\n}\n#example .theming.stripe .hljs.code {\n  height: 483px;\n  max-height: 483px;\n}\n#example .theming .source.grid {\n  display: none !important;\n  margin: 2rem 2rem -4rem;\n}\n#example .theming .source.grid.visible {\n  display: block;\n  display: flex !important;\n}\n\n#example .theming.stripe .buttons {\n  vertical-align: top;\n}\n#example .theming.stripe .button {\n  margin-bottom: 0.5em;\n}\n#example .stripe .column > p {\n  font-size: 16px;\n  line-height: 1.6;\n  margin: 1em 0em;\n}\n\n#example .dark.stripe {\n  background-color: #333333;\n  background: url(/images/dark-bg.png) repeat;\n  color: #FFFFFF;\n}\n#example .stripe .column > .label {\n  margin-bottom: 1em;\n}\n\n#example .solid {\n  background-color: #FFFFFF;\n  -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.1);\n  -moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.1);\n  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.1);\n}\n#example .solid .column {\n  color: #555555;\n}\n#example .solid .column p b {\n  color: rgba(0, 0, 0, 0.9);\n}\n#example .solid .column p {\n  color: rgba(0, 0, 0, 0.5);\n}\n\n/*--------------\n    Promo\n---------------*/\n\n#example.index .promo.stripe {\n  padding: 3em 0em;\n}\n\n\n/*--------------\n    Newsletter\n---------------*/\n\n#example.index .email.stripe {\n  padding: 5em 0em;\n}\n#example.index .email.stripe p {\n  margin: -0.5em 0em 1em;\n}\n#example.index .email.stripe .input {\n  width: 450px;\n}\n#example.index .email.stripe .submit.button {\n  margin-left: 1em;\n}\n\n\n@media only screen and (max-width : 400px) {\n  #example.index .advertisement {\n    display: none;\n    margin-left: -130px !important;\n  }\n  #example.index .carbonad {\n    width: 260px !important;\n  }\n  #example.index .masthead.segment h1  {\n    font-size: 1.75em !important;\n  }\n  #example.index .feature.stripe {\n    padding: 1em;\n  }\n}\n\n\n\n@media only screen and (max-width : 600px) {\n  #example.index .solid,\n  #example.index .stripe {\n    padding: 4em 0em;\n  }\n  #example.index .masthead.segment h1 .text {\n    margin-left: 0em;\n  }\n  #example.index .following.bar {\n    display: none;\n  }\n  #example.index .masthead:before {\n    display: none;\n  }\n  #example.index .following.bar .column {\n    text-align: center;\n  }\n  #example.index .following .logo {\n    float: none;\n  }\n  #example.index .codebase.stripe {\n    display: none;\n  }\n  #example.index .following .version.label {\n    vertical-align: top;\n    margin-top: 0em;\n  }\n  #example .masthead .container {\n    padding: 6rem 0rem;\n  }\n  #example.index .masthead.segment h1 {\n    font-size: 2.25em;\n  }\n  #example.index .email.stripe .input {\n    width: 100%;\n  }\n  #example.index .following .secondary.menu {\n    display: none;\n  }\n  #example.index .email.stripe .submit.button {\n    margin-top: 0.5em;\n  }\n  #example.index .stripe .icon.header .icon.image {\n    height: 50px;\n  }\n  #example.index .stripe {\n    padding: 2em 0em !important;\n  }\n}\n\n@media only screen and (max-width : 650px) {\n  #example.index .fixed.launch.button {\n    display: none;\n  }\n  #example .stripe h1 {\n    font-size: 32px;\n  }\n}\n@media only screen and (min-width : 601px) {\n  #example .theming .source.button {\n    display: none;\n  }\n  #example.index .main.menu {\n    display: none;\n  }\n\n  #example.index .fixed.launch.button {\n    display: none;\n  }\n}\n\n\n\n/* Homepage */\n@media only screen and (max-width : 810px) {\n  #example.index .masthead.segment h1 > .library {\n    font-size: 1.75em;\n  }\n  #example.index .feature.stripe p {\n    height: auto;\n    min-height: 0px;\n  }\n  #example.index .container {\n    margin-left: 0em;\n    margin-right: 0em;\n  }\n  #example .solid, #example .stripe {\n    padding: 6em 0em;\n  }\n  #example.index .masthead .container {\n    margin-top: 50px;\n  }\n  #example.index .following.bar span.additional.item {\n    display: none;\n    visibility: hidden !important;\n  }\n  #example.index .following.bar .network.menu .view-ui {\n    margin-right: 0.75em;\n  }\n  #example.index .masthead .container {\n    min-height: 350px;\n    height: auto;\n  }\n}\n\n\n@media only screen and (max-width : 1040px) {\n  #example.index .following.bar .network.menu .view-ui {\n    margin-right: 0.5em;\n  }\n}\n\n\n@media only screen and (max-width: 1300px) {\n  #example.index .advertisement {\n    position: absolute;\n    top: auto;\n    left: 50%;\n    bottom: 2rem;\n    margin-left: -175px;\n    -webkit-transform: none;\n    -moz-transform: none;\n    -ms-transform: none;\n    transform: none;\n  }\n  #example.index .inverted.advertisement .carbonad-img {\n    margin-top: 0px;\n  }\n  #example.index #carbonads-container {\n    float: none;\n  }\n  #example.index .carbonad {\n    width: 340px;\n  }\n  #example.index .carbonad-text,\n  #example.index .carbonad-tag {\n    float: none;\n    display: block;\n    text-align: left;\n    margin-left: 160px;\n    width: 170px;\n  }\n}\n"
  },
  {
    "path": "server/files/stylesheets/library/basic.icon.css",
    "content": "/*\n * # Semantic - Icon\n * http://github.com/jlukic/semantic-ui/\n *\n *\n * Copyright 2013 Contributors\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n@font-face {\n  font-family: 'Basic Icons';\n  src: url(\"fonts/icons.eot\");\n  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');\n  font-style: normal;\n  font-weight: normal;\n  font-variant: normal;\n  text-decoration: inherit;\n  text-transform: none;\n}\n\ni.icon {\n  display: inline-block;\n  opacity: 0.75;\n  margin: 0em 0.25em 0em 0em;\n  width: 1.23em;\n  height: 1em;\n  font-family: 'Basic Icons';\n  font-style: normal;\n  line-height: 1;\n  font-weight: normal;\n  text-decoration: inherit;\n  text-align: center;\n  speak: none;\n  -webkit-box-sizing: border-box;\n  -moz-box-sizing: border-box;\n  box-sizing: border-box;\n  font-smoothing: antialiased;\n}\n\n/*******************************\n             Types\n*******************************/\n\n/*--------------\n    Loading\n---------------*/\n\ni.icon.loading {\n  -webkit-animation: icon-loading 2s linear infinite;\n  animation: icon-loading 2s linear infinite;\n}\n\n@-webkit-keyframes icon-loading {\n  from {\n    -webkit-transform: rotate(0deg);\n    transform: rotate(0deg);\n  }\n\n  to {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes icon-loading {\n  from {\n    -webkit-transform: rotate(0deg);\n    -ms-transform: rotate(0deg);\n    transform: rotate(0deg);\n  }\n\n  to {\n    -webkit-transform: rotate(360deg);\n    -ms-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n}\n\n/*******************************\n             States\n*******************************/\n\ni.icon.hover {\n  opacity: 1;\n}\n\ni.icon.active {\n  opacity: 1;\n}\n\ni.emphasized.icon {\n  opacity: 1;\n}\n\ni.icon.disabled {\n  opacity: 0.3;\n}\n\n/*******************************\n           Variations\n*******************************/\n\n/*-------------------\n         Link\n--------------------*/\n\ni.link.icon {\n  cursor: pointer;\n  opacity: 0.75;\n  -webkit-transition: opacity 0.25s ease;\n  transition: opacity 0.25s ease;\n}\n\ni.link.icon:hover {\n  opacity: 1 !important;\n}\n\n/*-------------------\n      Circular\n--------------------*/\n\ni.circular.icon {\n  border-radius: 500em !important;\n  padding: 0.5em 0.35em !important;\n  -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;\n  box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;\n  line-height: 1 !important;\n  width: 2em !important;\n  height: 2em !important;\n}\n\ni.circular.inverted.icon {\n  border: none;\n  -webkit-box-shadow: none;\n  box-shadow: none;\n}\n\n/*-------------------\n      Flipped\n--------------------*/\n\ni.flipped.icon,\ni.horizontally.flipped.icon {\n  -webkit-transform: scale(-1, 1);\n  -ms-transform: scale(-1, 1);\n  transform: scale(-1, 1);\n}\n\ni.vertically.flipped.icon {\n  -webkit-transform: scale(1, -1);\n  -ms-transform: scale(1, -1);\n  transform: scale(1, -1);\n}\n\n/*-------------------\n      Rotated\n--------------------*/\n\ni.rotated.icon,\ni.right.rotated.icon,\ni.clockwise.rotated.icon {\n  -webkit-transform: rotate(90deg);\n  -ms-transform: rotate(90deg);\n  transform: rotate(90deg);\n}\n\ni.left.rotated.icon,\ni.counterclockwise.rotated.icon {\n  -webkit-transform: rotate(-90deg);\n  -ms-transform: rotate(-90deg);\n  transform: rotate(-90deg);\n}\n\n/*-------------------\n        Square\n--------------------*/\n\ni.square.icon {\n  width: 2em;\n  height: 2em;\n  padding: 2em !important;\n  -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;\n  box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;\n  vertical-align: baseline;\n}\n\ni.square.inverted.icon {\n  border: none;\n  -webkit-box-shadow: none;\n  box-shadow: none;\n}\n\n/*-------------------\n      Inverted\n--------------------*/\n\ni.inverted.icon {\n  background-color: #222222;\n  color: #FFFFFF;\n}\n\n/*-------------------\n       Colors\n--------------------*/\n\ni.black.icon {\n  color: #555555 !important;\n}\n\ni.blue.icon {\n  color: #6ecff5 !important;\n}\n\ni.green.icon {\n  color: #5bbd72 !important;\n}\n\ni.orange.icon {\n  color: #e96633 !important;\n}\n\ni.pink.icon {\n  color: #d9499a !important;\n}\n\ni.purple.icon {\n  color: #564f8a !important;\n}\n\ni.red.icon {\n  color: #d95c5c !important;\n}\n\ni.teal.icon {\n  color: #00b5ad !important;\n}\n\ni.yellow.icon {\n  color: #ffcb08 !important;\n}\n\n/*-------------------\n   Inverted Colors\n--------------------*/\n\ni.inverted.black.icon {\n  background-color: #555555 !important;\n  color: #FFFFFF !important;\n}\n\ni.inverted.blue.icon {\n  background-color: #6ecff5 !important;\n  color: #FFFFFF !important;\n}\n\ni.inverted.green.icon {\n  background-color: #5bbd72 !important;\n  color: #FFFFFF !important;\n}\n\ni.inverted.orange.icon {\n  background-color: #e96633 !important;\n  color: #FFFFFF !important;\n}\n\ni.inverted.pink.icon {\n  background-color: #d9499a !important;\n  color: #FFFFFF !important;\n}\n\ni.inverted.purple.icon {\n  background-color: #564f8a !important;\n  color: #FFFFFF !important;\n}\n\ni.inverted.red.icon {\n  background-color: #d95c5c !important;\n  color: #FFFFFF !important;\n}\n\ni.inverted.teal.icon {\n  background-color: #00b5ad !important;\n  color: #FFFFFF !important;\n}\n\ni.inverted.yellow.icon {\n  background-color: #ffcb08 !important;\n  color: #FFFFFF !important;\n}\n\n/*-------------------\n        Sizes\n--------------------*/\n\ni.small.icon {\n  font-size: 0.875em;\n}\n\ni.icon {\n  font-size: 1em;\n}\n\ni.large.icon {\n  font-size: 1.5em;\n  vertical-align: middle;\n}\n\ni.big.icon {\n  font-size: 2em;\n  vertical-align: middle;\n}\n\ni.huge.icon {\n  font-size: 4em;\n  vertical-align: middle;\n}\n\ni.massive.icon {\n  font-size: 8em;\n  vertical-align: middle;\n}\n\n/* basic.icons available */\n\ni.basic.icon.circle.attention:before {\n  content: '\\2757';\n}\n\n/* '❗' */\n\ni.basic.icon.circle.help:before {\n  content: '\\e704';\n}\n\n/* '' */\n\ni.basic.icon.circle.info:before {\n  content: '\\e705';\n}\n\n/* '' */\n\ni.basic.icon.add:before {\n  content: '\\2795';\n}\n\n/* '➕' */\n\ni.basic.icon.chart:before {\n  content: '📈';\n}\n\n/* '\\1f4c8' */\n\ni.basic.icon.chart.bar:before {\n  content: '📊';\n}\n\n/* '\\1f4ca' */\n\ni.basic.icon.chart.pie:before {\n  content: '\\e7a2';\n}\n\n/* '' */\n\ni.basic.icon.resize.full:before {\n  content: '\\e744';\n}\n\n/* '' */\n\ni.basic.icon.resize.horizontal:before {\n  content: '\\2b0d';\n}\n\n/* '⬍' */\n\ni.basic.icon.resize.small:before {\n  content: '\\e746';\n}\n\n/* '' */\n\ni.basic.icon.resize.vertical:before {\n  content: '\\2b0c';\n}\n\n/* '⬌' */\n\ni.basic.icon.down:before {\n  content: '\\2193';\n}\n\n/* '↓' */\n\ni.basic.icon.down.triangle:before {\n  content: '\\25be';\n}\n\n/* '▾' */\n\ni.basic.icon.down.arrow:before {\n  content: '\\e75c';\n}\n\n/* '' */\n\ni.basic.icon.left:before {\n  content: '\\2190';\n}\n\n/* '←' */\n\ni.basic.icon.left.triangle:before {\n  content: '\\25c2';\n}\n\n/* '◂' */\n\ni.basic.icon.left.arrow:before {\n  content: '\\e75d';\n}\n\n/* '' */\n\ni.basic.icon.right:before {\n  content: '\\2192';\n}\n\n/* '→' */\n\ni.basic.icon.right.triangle:before {\n  content: '\\25b8';\n}\n\n/* '▸' */\n\ni.basic.icon.right.arrow:before {\n  content: '\\e75e';\n}\n\n/* '' */\n\ni.basic.icon.up:before {\n  content: '\\2191';\n}\n\n/* '↑' */\n\ni.basic.icon.up.triangle:before {\n  content: '\\25b4';\n}\n\n/* '▴' */\n\ni.basic.icon.up.arrow:before {\n  content: '\\e75f';\n}\n\n/* '' */\n\ni.basic.icon.folder:before {\n  content: '\\e810';\n}\n\n/* '' */\n\ni.basic.icon.open.folder:before {\n  content: '📂';\n}\n\n/* '\\1f4c2' */\n\ni.basic.icon.globe:before {\n  content: '𝌍';\n}\n\n/* '\\1d30d' */\n\ni.basic.icon.desk.globe:before {\n  content: '🌐';\n}\n\n/* '\\1f310' */\n\ni.basic.icon.star:before {\n  content: '\\e801';\n}\n\n/* '' */\n\ni.basic.icon.star.empty:before {\n  content: '\\e800';\n}\n\n/* '' */\n\ni.basic.icon.star.half:before {\n  content: '\\e701';\n}\n\n/* '' */\n\ni.basic.icon.lock:before {\n  content: '🔒';\n}\n\n/* '\\1f512' */\n\ni.basic.icon.unlock:before {\n  content: '🔓';\n}\n\n/* '\\1f513' */\n\ni.basic.icon.layout.grid:before {\n  content: '\\e80c';\n}\n\n/* '' */\n\ni.basic.icon.layout.block:before {\n  content: '\\e708';\n}\n\n/* '' */\n\ni.basic.icon.layout.list:before {\n  content: '\\e80b';\n}\n\n/* '' */\n\ni.basic.icon.heart.empty:before {\n  content: '\\2661';\n}\n\n/* '♡' */\n\ni.basic.icon.heart:before {\n  content: '\\2665';\n}\n\n/* '♥' */\n\ni.basic.icon.asterisk:before {\n  content: '\\2731';\n}\n\n/* '✱' */\n\ni.basic.icon.attachment:before {\n  content: '📎';\n}\n\n/* '\\1f4ce' */\n\ni.basic.icon.attention:before {\n  content: '\\26a0';\n}\n\n/* '⚠' */\n\ni.basic.icon.trophy:before {\n  content: '🏉';\n}\n\n/* '\\1f3c9' */\n\ni.basic.icon.barcode:before {\n  content: '\\e792';\n}\n\n/* '' */\n\ni.basic.icon.cart:before {\n  content: '\\e813';\n}\n\n/* '' */\n\ni.basic.icon.block:before {\n  content: '🚫';\n}\n\n/* '\\1f6ab' */\n\ni.basic.icon.book:before {\n  content: '📖';\n}\n\ni.basic.icon.bookmark:before {\n  content: '🔖';\n}\n\n/* '\\1f516' */\n\ni.basic.icon.calendar:before {\n  content: '📅';\n}\n\n/* '\\1f4c5' */\n\ni.basic.icon.cancel:before {\n  content: '\\2716';\n}\n\n/* '✖' */\n\ni.basic.icon.close:before {\n  content: '\\e80d';\n}\n\n/* '' */\n\ni.basic.icon.color:before {\n  content: '\\e794';\n}\n\n/* '' */\n\ni.basic.icon.chat:before {\n  content: '\\e720';\n}\n\n/* '' */\n\ni.basic.icon.check:before {\n  content: '\\2611';\n}\n\n/* '☑' */\n\ni.basic.icon.time:before {\n  content: '🕔';\n}\n\n/* '\\1f554' */\n\ni.basic.icon.cloud:before {\n  content: '\\2601';\n}\n\n/* '☁' */\n\ni.basic.icon.code:before {\n  content: '\\e714';\n}\n\n/* '' */\n\ni.basic.icon.email:before {\n  content: '\\40';\n}\n\n/* '@' */\n\ni.basic.icon.settings:before {\n  content: '\\26ef';\n}\n\n/* '⛯' */\n\ni.basic.icon.setting:before {\n  content: '\\2699';\n}\n\n/* '⚙' */\n\ni.basic.icon.comment:before {\n  content: '\\e802';\n}\n\n/* '' */\n\ni.basic.icon.clockwise.counter:before {\n  content: '\\27f2';\n}\n\n/* '⟲' */\n\ni.basic.icon.clockwise:before {\n  content: '\\27f3';\n}\n\n/* '⟳' */\n\ni.basic.icon.cube:before {\n  content: '\\e807';\n}\n\n/* '' */\n\ni.basic.icon.direction:before {\n  content: '\\27a2';\n}\n\n/* '➢' */\n\ni.basic.icon.doc:before {\n  content: '📄';\n}\n\n/* '\\1f4c4' */\n\ni.basic.icon.docs:before {\n  content: '\\e736';\n}\n\n/* '' */\n\ni.basic.icon.dollar:before {\n  content: '💵';\n}\n\n/* '\\1f4b5' */\n\ni.basic.icon.paint:before {\n  content: '\\e7b5';\n}\n\n/* '' */\n\ni.basic.icon.edit:before {\n  content: '\\270d';\n}\n\n/* '✍' */\n\ni.basic.icon.eject:before {\n  content: '\\2ecf';\n}\n\n/* '⻏' */\n\ni.basic.icon.export:before {\n  content: '\\e715';\n}\n\n/* '' */\n\ni.basic.icon.hide:before {\n  content: '\\e70b';\n}\n\n/* '' */\n\ni.basic.icon.unhide:before {\n  content: '\\e80f';\n}\n\n/* '' */\n\ni.basic.icon.facebook:before {\n  content: '\\f301';\n}\n\n/* '' */\n\ni.basic.icon.fast-forward:before {\n  content: '\\e804';\n}\n\n/* '' */\n\ni.basic.icon.fire:before {\n  content: '🔥';\n}\n\n/* '\\1f525' */\n\ni.basic.icon.flag:before {\n  content: '\\2691';\n}\n\n/* '⚑' */\n\ni.basic.icon.lightning:before {\n  content: '\\26a1';\n}\n\n/* '⚡' */\n\ni.basic.icon.lab:before {\n  content: '\\68';\n}\n\n/* 'h' */\n\ni.basic.icon.flight:before {\n  content: '\\2708';\n}\n\n/* '✈' */\n\ni.basic.icon.forward:before {\n  content: '\\27a6';\n}\n\n/* '➦' */\n\ni.basic.icon.gift:before {\n  content: '🎁';\n}\n\n/* '\\1f381' */\n\ni.basic.icon.github:before {\n  content: '\\f308';\n}\n\n/* '' */\n\ni.basic.icon.globe:before {\n  content: '\\e817';\n}\n\n/* '' */\n\ni.basic.icon.headphones:before {\n  content: '🎧';\n}\n\n/* '\\1f3a7' */\n\ni.basic.icon.question:before {\n  content: '\\2753';\n}\n\n/* '❓' */\n\ni.basic.icon.home:before {\n  content: '\\2302';\n}\n\n/* '⌂' */\n\ni.basic.icon.i:before {\n  content: '\\2139';\n}\n\n/* 'ℹ' */\n\ni.basic.icon.idea:before {\n  content: '💡';\n}\n\n/* '\\1f4a1' */\n\ni.basic.icon.open:before {\n  content: '🔗';\n}\n\n/* '\\1f517' */\n\ni.basic.icon.content:before {\n  content: '\\e782';\n}\n\n/* '' */\n\ni.basic.icon.location:before {\n  content: '\\e724';\n}\n\n/* '' */\n\ni.basic.icon.mail:before {\n  content: '\\2709';\n}\n\n/* '✉' */\n\ni.basic.icon.mic:before {\n  content: '🎤';\n}\n\n/* '\\1f3a4' */\n\ni.basic.icon.minus:before {\n  content: '\\2d';\n}\n\n/* '-' */\n\ni.basic.icon.money:before {\n  content: '💰';\n}\n\n/* '\\1f4b0' */\n\ni.basic.icon.off:before {\n  content: '\\e78e';\n}\n\n/* '' */\n\ni.basic.icon.pause:before {\n  content: '\\e808';\n}\n\n/* '' */\n\ni.basic.icon.photos:before {\n  content: '\\e812';\n}\n\n/* '' */\n\ni.basic.icon.photo:before {\n  content: '🌄';\n}\n\n/* '\\1f304' */\n\ni.basic.icon.pin:before {\n  content: '📌';\n}\n\n/* '\\1f4cc' */\n\ni.basic.icon.play:before {\n  content: '\\e809';\n}\n\n/* '' */\n\ni.basic.icon.plus:before {\n  content: '\\2b';\n}\n\n/* '+' */\n\ni.basic.icon.print:before {\n  content: '\\e716';\n}\n\n/* '' */\n\ni.basic.icon.rss:before {\n  content: '\\e73a';\n}\n\n/* '' */\n\ni.basic.icon.search:before {\n  content: '🔍';\n}\n\n/* '\\1f50d' */\n\ni.basic.icon.shuffle:before {\n  content: '\\e803';\n}\n\n/* '' */\n\ni.basic.icon.tag:before {\n  content: '\\e80a';\n}\n\n/* '' */\n\ni.basic.icon.tags:before {\n  content: '\\e70d';\n}\n\n/* '' */\n\ni.basic.icon.terminal:before {\n  content: '\\e7ac';\n}\n\n/* '' */\n\ni.basic.icon.thumbs.down:before {\n  content: '👎';\n}\n\n/* '\\1f44e' */\n\ni.basic.icon.thumbs.up:before {\n  content: '👍';\n}\n\n/* '\\1f44d' */\n\ni.basic.icon.to-end:before {\n  content: '\\e806';\n}\n\n/* '' */\n\ni.basic.icon.to-start:before {\n  content: '\\e805';\n}\n\n/* '' */\n\ni.basic.icon.top.list:before {\n  content: '🏆';\n}\n\n/* '\\1f3c6' */\n\ni.basic.icon.trash:before {\n  content: '\\e729';\n}\n\n/* '' */\n\ni.basic.icon.twitter:before {\n  content: '\\f303';\n}\n\n/* '' */\n\ni.basic.icon.upload:before {\n  content: '\\e711';\n}\n\n/* '' */\n\ni.basic.icon.user.add:before {\n  content: '\\e700';\n}\n\n/* '' */\n\ni.basic.icon.user:before {\n  content: '👤';\n}\n\n/* '\\1f464' */\n\ni.basic.icon.community:before {\n  content: '\\e814';\n}\n\n/* '' */\n\ni.basic.icon.users:before {\n  content: '👥';\n}\n\n/* '\\1f465' */\n\ni.basic.icon.id:before {\n  content: '\\e722';\n}\n\n/* '' */\n\ni.basic.icon.url:before {\n  content: '🔗';\n}\n\n/* '\\1f517' */\n\ni.basic.icon.zoom.in:before {\n  content: '\\e750';\n}\n\n/* '' */\n\ni.basic.icon.zoom.out:before {\n  content: '\\e751';\n}\n\n/* '' */\n\n/*--------------\n   Spacing Fix\n---------------*/\n\n/* dropdown arrows are to the right */\n\ni.dropdown.basic.icon {\n  margin: 0em 0em 0em 0.5em;\n}\n\n/* stars are usually consecutive */\n\ni.basic.icon.star {\n  width: auto;\n  margin: 0em;\n}\n\n/* left side basic.icons */\n\ni.basic.icon.left {\n  width: auto;\n  margin: 0em 0.5em 0em 0em;\n}\n\n/* right side basic.icons */\n\ni.basic.icon.search,\ni.basic.icon.up,\ni.basic.icon.down,\ni.basic.icon.right {\n  width: auto;\n  margin: 0em 0em 0em 0.5em;\n}\n\n/*--------------\n     Aliases\n---------------*/\n\n/* aliases for convenience */\n\ni.basic.icon.delete:before {\n  content: '\\e80d';\n}\n\n/* '' */\n\ni.basic.icon.dropdown:before {\n  content: '\\25be';\n}\n\n/* '▾' */\n\ni.basic.icon.help:before {\n  content: '\\e704';\n}\n\n/* '' */\n\ni.basic.icon.info:before {\n  content: '\\e705';\n}\n\n/* '' */\n\ni.basic.icon.error:before {\n  content: '\\e80d';\n}\n\n/* '' */\n\ni.basic.icon.dislike:before {\n  content: '\\2661';\n}\n\n/* '♡' */\n\ni.basic.icon.like:before {\n  content: '\\2665';\n}\n\n/* '♥' */\n\ni.basic.icon.eye:before {\n  content: '\\e80f';\n}\n\n/* '' */\n\ni.basic.icon.eye.hidden:before {\n  content: '\\e70b';\n}\n\n/* '' */\n\ni.basic.icon.date:before {\n  content: '📅';\n}\n\n/* '\\1f4c5' */\n\n/*******************************\n           Overrides\n*******************************/\n"
  },
  {
    "path": "server/files/stylesheets/library/docco.css",
    "content": "/*--------------------- Typography ----------------------------*/\n\n@font-face {\n  font-family: 'Neutraface';\n  src:\n    url(\"../fonts/neutraface-book.otf\") format('opentype')\n  ;\n  font-weight: normal;\n  font-style: normal;\n  font-size-adjust: 0.448;\n}\n@font-face {\n  font-family: 'Neutraface';\n  src:\n    url(\"../fonts/neutraface-bold.otf\") format('opentype')\n  ;\n  font-weight: bold;\n  font-style: normal;\n  font-size-adjust: 0.448;\n}\n\n\n/*--------------------- Layout ----------------------------*/\nhtml { height: 100%; }\nbody {\n  font-family: \"Neutraface\", \"Helvetica Neue\", \"Arial\", sans-serif;\n  font-size: 14px;\n  line-height: 18px;\n  color: #30404f;\n  margin: 0; padding: 0;\n  height:100%;\n}\n#container { min-height: 100%; }\n\na {\n  color: #000;\n}\n\nb, strong {\n  font-weight: normal;\n}\n\np, ul, ol {\n  margin: 15px 0 0px;\n}\n\nh1, h2, h3, h4, h5, h6 {\n  color: #112233;\n  font-family: \"Neutraface\", \"Helvetica Neue\", \"Arial\", sans-serif;\n  line-height: 1em;\n  text-transform: none;\n  margin: 30px 0 15px 0;\n}\nh1 {\n  margin: 0px 0px 20px;\n  font-size: 38px;\n  color: #00B4AC;\n}\nh2 {\n  margin: 0px 0px 20px;\n  font-size: 28px;\n  color: #6E4889;\n}\nh3 {\n  margin: 0px 0px 20px;\n  font-size: 22px;\n}\nh4 {\n  margin: 0px 0px 10px;\n  font-size: 18px;\n  color: #555555;\n}\nh5 {\n  margin: 0px 0px 10px;\n  font-size: 16px;\n  color: #555555;\n}\na {\n  font-weight: bold;\n  color: #009FDA;\n  text-decoration: none;\n}\na:hover {\n  color: #00BAFF;\n}\n\nhr {\n  border: 0;\n  background: 1px solid #ddd;\n  height: 1px;\n  margin: 20px 0;\n}\n\npre, tt, code {\n  font-size: 12px; line-height: 16px;\n  font-family: Menlo, Monaco, Consolas, \"Lucida Console\", monospace;\n  margin: 0; padding: 0;\n}\n  .annotation pre {\n    display: block;\n    margin: 0;\n    padding: 7px 10px;\n    background: #fcfcfc;\n    -moz-box-shadow:    inset 0 0 10px rgba(0,0,0,0.1);\n    -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.1);\n    box-shadow:         inset 0 0 10px rgba(0,0,0,0.1);\n    overflow-x: auto;\n  }\n    .annotation pre code {\n      border: 0;\n      padding: 0;\n      background: transparent;\n    }\n\n\nblockquote {\n  border-left: 5px solid #ccc;\n  margin: 0;\n  padding: 1px 0 1px 1em;\n}\n  .sections blockquote p {\n    font-family: Menlo, Consolas, Monaco, monospace;\n    font-size: 12px; line-height: 16px;\n    color: #999;\n    margin: 10px 0 0;\n    white-space: pre-wrap;\n  }\n\nul.sections {\n  list-style: none;\n  padding:0 0 5px 0;;\n  margin:0;\n}\n\n/*\n  Force border-box so that % widths fit the parent\n  container without overlap because of margin/padding.\n\n  More Info : http://www.quirksmode.org/css/box.html\n*/\nul.sections > li > div {\n  -moz-box-sizing: border-box;    /* firefox */\n  -ms-box-sizing: border-box;     /* ie */\n  -webkit-box-sizing: border-box; /* webkit */\n  -khtml-box-sizing: border-box;  /* konqueror */\n  box-sizing: border-box;         /* css3 */\n}\n\n\n/*---------------------- Jump Page -----------------------------*/\n#jump_to, #jump_page {\n  margin: 0;\n  background: white;\n  -webkit-box-shadow: 0 0 25px #777; -moz-box-shadow: 0 0 25px #777;\n  -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomleft: 5px;\n  font: 16px Arial;\n  cursor: pointer;\n  text-align: right;\n  list-style: none;\n}\n\n#jump_to a {\n  text-decoration: none;\n}\n\n#jump_to a.large {\n  display: none;\n}\n#jump_to a.small {\n  font-size: 22px;\n  font-weight: bold;\n  color: #676767;\n}\n\n#jump_to, #jump_wrapper {\n  position: fixed;\n  right: 0; top: 0;\n  padding: 10px 15px;\n  margin:0;\n}\n\n#jump_wrapper {\n  display: none;\n  padding:0;\n}\n\n#jump_to:hover #jump_wrapper {\n  display: block;\n}\n\n#jump_page {\n  padding: 5px 0 3px;\n  margin: 0 0 25px 25px;\n}\n\n#jump_page .source {\n  display: block;\n  padding: 15px;\n  text-decoration: none;\n  border-top: 1px solid #eee;\n}\n\n#jump_page .source:hover {\n  background: #f5f5ff;\n}\n\n#jump_page .source:first-child {\n}\n\n/*---------------------- Low resolutions (> 320px) ---------------------*/\n@media only screen and (min-width: 320px) {\n  .pilwrap { display: none; }\n\n  ul.sections > li > div {\n    display: block;\n    padding:5px 10px 0 10px;\n  }\n\n  ul.sections > li > div.annotation ul, ul.sections > li > div.annotation ol {\n    padding-left: 30px;\n  }\n\n  ul.sections > li > div.content {\n    background: #f5f5ff;\n    overflow-x:auto;\n    -webkit-box-shadow: inset 0 0 5px #e5e5ee;\n    box-shadow: inset 0 0 5px #e5e5ee;\n    border: 1px solid #dedede;\n    margin:5px 10px 5px 10px;\n    padding-bottom: 5px;\n  }\n\n  ul.sections > li > div.annotation pre {\n    margin: 7px 0 7px;\n    padding-left: 15px;\n  }\n\n  ul.sections > li > div.annotation p tt, .annotation code {\n    display: inline-block;\n    padding: 3px 10px;\n    font-size: 14px;\n    margin-top: 10px;\n    background: #f8f8ff;\n    border: 1px solid #dedede;\n  }\n}\n\n/*----------------------  (> 481px) ---------------------*/\n@media only screen and (min-width: 481px) {\n  #container {\n    position: relative;\n  }\n  body {\n    background-color: #F5F5FF;\n    font-size: 15px;\n    line-height: 21px;\n  }\n  pre, tt, code {\n    line-height: 18px;\n  }\n  p, ul, ol {\n    margin: 0 0 15px;\n  }\n\n\n  #jump_to {\n    padding: 5px 10px;\n  }\n  #jump_wrapper {\n    padding: 0;\n  }\n  #jump_to, #jump_page {\n    font: 10px Arial;\n    text-transform: uppercase;\n  }\n  #jump_page .source {\n    padding: 5px 10px;\n  }\n  #jump_to a.large {\n    display: inline-block;\n  }\n  #jump_to a.small {\n    display: none;\n  }\n\n\n  #background {\n    position: absolute;\n    top: 0; bottom: 0;\n    width: 350px;\n    border-right: 1px solid #e5e5ee;\n    z-index: -1;\n    background: #FCFCFC url(../images/bg.jpg) repeat;\n\n  }\n\n  ul.sections > li > div.annotation ul, ul.sections > li > div.annotation ol {\n    padding-left: 40px;\n  }\n\n  ul.sections > li {\n    white-space: nowrap;\n  }\n\n  ul.sections > li > div {\n    display: inline-block;\n  }\n\n  ul.sections > li > div.annotation {\n    max-width: 350px;\n    min-width: 350px;\n    min-height: 5px;\n    padding: 13px;\n    overflow-x: hidden;\n    white-space: normal;\n    vertical-align: top;\n    text-align: left;\n  }\n  ul.sections > li > div.annotation pre {\n    margin: 15px 0 15px;\n    padding-left: 15px;\n  }\n\n  ul.sections > li > div.content {\n    padding: 13px;\n    vertical-align: top;\n    background: #f5f5ff;\n    border: none;\n    -webkit-box-shadow: none;\n    box-shadow: none;\n  }\n\n  .pilwrap {\n    position: relative;\n    display: inline;\n  }\n\n  .pilcrow {\n    font: 12px Arial;\n    text-decoration: none;\n    color: #454545;\n    position: absolute;\n    top: 3px; left: -20px;\n    padding: 1px 2px;\n    opacity: 0;\n    -webkit-transition: opacity 0.2s linear;\n  }\n    .for-h1 .pilcrow {\n      top: 47px;\n    }\n    .for-h2 .pilcrow, .for-h3 .pilcrow, .for-h4 .pilcrow {\n      top: 35px;\n    }\n\n  ul.sections > li > div.annotation:hover .pilcrow {\n    opacity: 1;\n  }\n}\n\n/*---------------------- (> 1025px) ---------------------*/\n@media only screen and (min-width: 1025px) {\n\n  body {\n    font-size: 16px;\n    line-height: 24px;\n  }\n\n  #background {\n    width: 525px;\n  }\n  ul.sections {\n    padding-top: 50px;\n  }\n  ul.sections > li > div.annotation {\n    max-width: 525px;\n    min-width: 525px;\n    padding: 10px 25px 1px 50px;\n  }\n  ul.sections > li > div.content {\n    padding: 9px 15px 16px 25px;\n  }\n\n  ul.sections p {\n    font-size: 16px;\n    line-height: 1.33;\n  }\n}\n\n/*---------------------- Syntax Highlighting -----------------------------*/\n\ntd.linenos { background-color: #f0f0f0; padding-right: 10px; }\nspan.lineno { background-color: #f0f0f0; padding: 0 5px 0 5px; }\n/*\n\ngithub.com style (c) Vasily Polovnyov \n\n*/\n\npre code {\n  display: block; padding: 0.5em;\n  color: #000;\n  background: #f8f8ff\n}\n\npre .comment,\npre .template_comment,\npre .diff .header,\npre .javadoc {\n  color: #408080;\n  font-style: italic\n}\n\npre .keyword,\npre .assignment,\npre .literal,\npre .css .rule .keyword,\npre .winutils,\npre .javascript .title,\npre .lisp .title,\npre .subst {\n  color: #954121;\n  /*font-weight: bold*/\n}\n\npre .number,\npre .hexcolor {\n  color: #40a070\n}\n\npre .string,\npre .tag .value,\npre .phpdoc,\npre .tex .formula {\n  color: #219161;\n}\n\npre .title,\npre .id {\n  color: #19469D;\n}\npre .params {\n  color: #00F;\n}\n\npre .javascript .title,\npre .lisp .title,\npre .subst {\n  font-weight: normal\n}\n\npre .class .title,\npre .haskell .label,\npre .tex .command {\n  color: #458;\n  font-weight: bold\n}\n\npre .tag,\npre .tag .title,\npre .rules .property,\npre .django .tag .keyword {\n  color: #000080;\n  font-weight: normal\n}\n\npre .attribute,\npre .variable,\npre .instancevar,\npre .lisp .body {\n  color: #008080\n}\n\npre .regexp {\n  color: #B68\n}\n\npre .class {\n  color: #458;\n  font-weight: bold\n}\n\npre .symbol,\npre .ruby .symbol .string,\npre .ruby .symbol .keyword,\npre .ruby .symbol .keymethods,\npre .lisp .keyword,\npre .tex .special,\npre .input_number {\n  color: #990073\n}\n\npre .builtin,\npre .constructor,\npre .built_in,\npre .lisp .title {\n  color: #0086b3\n}\n\npre .preprocessor,\npre .pi,\npre .doctype,\npre .shebang,\npre .cdata {\n  color: #999;\n  font-weight: bold\n}\n\npre .deletion {\n  background: #fdd\n}\n\npre .addition {\n  background: #dfd\n}\n\npre .diff .change {\n  background: #0086b3\n}\n\npre .chunk {\n  color: #aaa\n}\n\npre .tex .formula {\n  opacity: 0.5;\n}\n"
  },
  {
    "path": "server/files/stylesheets/library/sidr.css",
    "content": ".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)}\n"
  },
  {
    "path": "server/files/stylesheets/library/snap.css",
    "content": "html, body {\n  font-family: sans-serif;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\nbody > .content > .page,\nbody > .content  {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  width: auto;\n  height: auto;\n  z-index: 2;\n  -webkit-overflow-scrolling: touch;\n\n  -webkit-transition:\n    all 0.2s ease\n  ;\n  -moz-transition:\n    all 0.2s ease\n  ;\n  -o-transition:\n    all 0.2s ease\n  ;\n  -ms-transition:\n    all 0.2s ease\n  ;\n  transition:\n    all 0.2s ease\n  ;\n\n  backface-visibility:hidden;\n  -webkit-backface-visibility:hidden; /* Chrome and Safari */\n  -moz-backface-visibility:hidden; /* Firefox */\n  -ms-backface-visibility:hidden; /* Internet Explorer 10+ */\n\n  -webkit-transform: translate3d(0, 0, 0);\n     -moz-transform: translate3d(0, 0, 0);\n      -ms-transform: translate3d(0, 0, 0);\n       -o-transform: translate3d(0, 0, 0);\n          transform: translate3d(0, 0, 0);\n}\nbody > .content > .page {\n  overflow: auto;\n}\n\nbody > .content.drag {\n  -webkit-transition: none;\n  -moz-transition: none;\n  -o-transition: none;\n  -ms-transition: none;\n  transition: none;\n}\n\n.drawers {\n  position: absolute;\n  background-color: #2D2D2D;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  width: auto;\n  height: auto;\n\n}\n\n.drawer {\n  position: absolute;\n  top: 0;\n  right: auto;\n  bottom: 0;\n  left: auto;\n  width: 275px;\n  height: auto;\n  overflow: auto;\n  \n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n\n  -webkit-overflow-scrolling: touch;\n  -webkit-transition: width 0.3s ease;\n     -moz-transition: width 0.3s ease;\n      -ms-transition: width 0.3s ease;\n       -o-transition: width 0.3s ease;\n          transition: width 0.3s ease;\n}\n\n.drawer.left {\n  left: 0;\n  z-index: 1;\n}\n\n.drawer.right {\n  right: 0;\n  z-index: 1;\n}\n"
  },
  {
    "path": "server/files/stylesheets/reset.css",
    "content": "/*! normalize.css v2.1.3 | MIT License | git.io/normalize */\n\n/* ==========================================================================\n   HTML5 display definitions\n   ========================================================================== */\n\n/**\n * Correct `block` display not defined in IE 8/9.\n */\n\narticle,\naside,\ndetails,\nfigcaption,\nfigure,\nfooter,\nheader,\nhgroup,\nmain,\nnav,\nsection,\nsummary {\n    display: block;\n}\n\n/**\n * Correct `inline-block` display not defined in IE 8/9.\n */\n\naudio,\ncanvas,\nvideo {\n    display: inline-block;\n}\n\n/**\n * Prevent modern browsers from displaying `audio` without controls.\n * Remove excess height in iOS 5 devices.\n */\n\naudio:not([controls]) {\n    display: none;\n    height: 0;\n}\n\n/**\n * Address `[hidden]` styling not present in IE 8/9.\n * Hide the `template` element in IE, Safari, and Firefox < 22.\n */\n\n[hidden],\ntemplate {\n    display: none;\n}\n\n/* ==========================================================================\n   Base\n   ========================================================================== */\n\n/**\n * 1. Set default font family to sans-serif.\n * 2. Prevent iOS text size adjust after orientation change, without disabling\n *    user zoom.\n */\n\nhtml {\n    font-family: sans-serif; /* 1 */\n    -ms-text-size-adjust: 100%; /* 2 */\n    -webkit-text-size-adjust: 100%; /* 2 */\n}\n\n/**\n * Remove default margin.\n */\n\nbody {\n    margin: 0;\n}\n\n/* ==========================================================================\n   Links\n   ========================================================================== */\n\n/**\n * Remove the gray background color from active links in IE 10.\n */\n\na {\n    background: transparent;\n}\n\n/**\n * Address `outline` inconsistency between Chrome and other browsers.\n */\n\na:focus {\n    outline: thin dotted;\n}\n\n/**\n * Improve readability when focused and also mouse hovered in all browsers.\n */\n\na:active,\na:hover {\n    outline: 0;\n}\n\n/* ==========================================================================\n   Typography\n   ========================================================================== */\n\n/**\n * Address variable `h1` font-size and margin within `section` and `article`\n * contexts in Firefox 4+, Safari 5, and Chrome.\n */\n\nh1 {\n    font-size: 2em;\n    margin: 0.67em 0;\n}\n\n/**\n * Address styling not present in IE 8/9, Safari 5, and Chrome.\n */\n\nabbr[title] {\n    border-bottom: 1px dotted;\n}\n\n/**\n * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.\n */\n\nb,\nstrong {\n    font-weight: bold;\n}\n\n/**\n * Address styling not present in Safari 5 and Chrome.\n */\n\ndfn {\n    font-style: italic;\n}\n\n/**\n * Address differences between Firefox and other browsers.\n */\n\nhr {\n    -moz-box-sizing: content-box;\n    box-sizing: content-box;\n    height: 0;\n}\n\n/**\n * Address styling not present in IE 8/9.\n */\n\nmark {\n    background: #ff0;\n    color: #000;\n}\n\n/**\n * Correct font family set oddly in Safari 5 and Chrome.\n */\n\ncode,\nkbd,\npre,\nsamp {\n    font-family: monospace, serif;\n    font-size: 1em;\n}\n\n/**\n * Improve readability of pre-formatted text in all browsers.\n */\n\npre {\n    white-space: pre-wrap;\n}\n\n/**\n * Set consistent quote types.\n */\n\nq {\n    quotes: \"\\201C\" \"\\201D\" \"\\2018\" \"\\2019\";\n}\n\n/**\n * Address inconsistent and variable font size in all browsers.\n */\n\nsmall {\n    font-size: 80%;\n}\n\n/**\n * Prevent `sub` and `sup` affecting `line-height` in all browsers.\n */\n\nsub,\nsup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n}\n\nsup {\n    top: -0.5em;\n}\n\nsub {\n    bottom: -0.25em;\n}\n\n/* ==========================================================================\n   Embedded content\n   ========================================================================== */\n\n/**\n * Remove border when inside `a` element in IE 8/9.\n */\n\nimg {\n    border: 0;\n}\n\n/**\n * Correct overflow displayed oddly in IE 9.\n */\n\nsvg:not(:root) {\n    overflow: hidden;\n}\n\n/* ==========================================================================\n   Figures\n   ========================================================================== */\n\n/**\n * Address margin not present in IE 8/9 and Safari 5.\n */\n\nfigure {\n    margin: 0;\n}\n\n/* ==========================================================================\n   Forms\n   ========================================================================== */\n\n/**\n * Define consistent border, margin, and padding.\n */\n\nfieldset {\n    border: 1px solid #c0c0c0;\n    margin: 0 2px;\n    padding: 0.35em 0.625em 0.75em;\n}\n\n/**\n * 1. Correct `color` not being inherited in IE 8/9.\n * 2. Remove padding so people aren't caught out if they zero out fieldsets.\n */\n\nlegend {\n    border: 0; /* 1 */\n    padding: 0; /* 2 */\n}\n\n/**\n * 1. Correct font family not being inherited in all browsers.\n * 2. Correct font size not being inherited in all browsers.\n * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.\n */\n\nbutton,\ninput,\nselect,\ntextarea {\n    font-family: inherit; /* 1 */\n    font-size: 100%; /* 2 */\n    margin: 0; /* 3 */\n}\n\n/**\n * Address Firefox 4+ setting `line-height` on `input` using `!important` in\n * the UA stylesheet.\n */\n\nbutton,\ninput {\n    line-height: normal;\n}\n\n/**\n * Address inconsistent `text-transform` inheritance for `button` and `select`.\n * All other form control elements do not inherit `text-transform` values.\n * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.\n * Correct `select` style inheritance in Firefox 4+ and Opera.\n */\n\nbutton,\nselect {\n    text-transform: none;\n}\n\n/**\n * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`\n *    and `video` controls.\n * 2. Correct inability to style clickable `input` types in iOS.\n * 3. Improve usability and consistency of cursor style between image-type\n *    `input` and others.\n */\n\nbutton,\nhtml input[type=\"button\"], /* 1 */\ninput[type=\"reset\"],\ninput[type=\"submit\"] {\n    -webkit-appearance: button; /* 2 */\n    cursor: pointer; /* 3 */\n}\n\n/**\n * Re-set default cursor for disabled elements.\n */\n\nbutton[disabled],\nhtml input[disabled] {\n    cursor: default;\n}\n\n/**\n * 1. Address box sizing set to `content-box` in IE 8/9/10.\n * 2. Remove excess padding in IE 8/9/10.\n */\n\ninput[type=\"checkbox\"],\ninput[type=\"radio\"] {\n    box-sizing: border-box; /* 1 */\n    padding: 0; /* 2 */\n}\n\n/**\n * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.\n * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome\n *    (include `-moz` to future-proof).\n */\n\ninput[type=\"search\"] {\n    -webkit-appearance: textfield; /* 1 */\n    -moz-box-sizing: content-box;\n    -webkit-box-sizing: content-box; /* 2 */\n    box-sizing: content-box;\n}\n\n/**\n * Remove inner padding and search cancel button in Safari 5 and Chrome\n * on OS X.\n */\n\ninput[type=\"search\"]::-webkit-search-cancel-button,\ninput[type=\"search\"]::-webkit-search-decoration {\n    -webkit-appearance: none;\n}\n\n/**\n * Remove inner padding and border in Firefox 4+.\n */\n\nbutton::-moz-focus-inner,\ninput::-moz-focus-inner {\n    border: 0;\n    padding: 0;\n}\n\n/**\n * 1. Remove default vertical scrollbar in IE 8/9.\n * 2. Improve readability and alignment in all browsers.\n */\n\ntextarea {\n    overflow: auto; /* 1 */\n    vertical-align: top; /* 2 */\n}\n\n/* ==========================================================================\n   Tables\n   ========================================================================== */\n\n/**\n * Remove most spacing between table cells.\n */\n\ntable {\n    border-collapse: collapse;\n    border-spacing: 0;\n}"
  },
  {
    "path": "server/files/stylesheets/rtl.css",
    "content": "/*******************************\n       Right-To-Left\n     (Arabic / Persian)\n*******************************/\n\n\nhtml[lang=\"fa\"],\nhtml[lang=\"ar\"] {\n  direction: rtl;\n}"
  },
  {
    "path": "server/files/stylesheets/shape.css",
    "content": "\n/*******************************\n        Shapes Example\n*******************************/\n\n\n#example.shape .ui.header {\n  clear: both;\n  margin-top: 1rem;\n}\n\n#example .dog.shape {\n  margin: 0em 0em 3em;\n}\n\n#example .dog.shape .side .item {\n  margin: 0em;\n  min-height: 400px;\n}\n#example .dog.two.shape .side {\n  width: 315px;\n}\n#example .dog.two.shape .side:nth-child(n+1),\n#example .dog.two.shape .side:nth-child(n+1) .item {\n  width: 315px;\n}\n#example .dog.two.shape .side:nth-child(n+2),\n#example .dog.two.shape .side:nth-child(n+2) .item {\n  width: 150px;\n}\n#example .dog.two.shape .side:nth-child(n+3),\n#example .dog.two.shape .side:nth-child(n+3) .item {\n  width: 200px;\n}\n\n#example .dog.three.shape .side:nth-child(n+1),\n#example .dog.three.shape .side:nth-child(n+1) .item {\n  width: 215px;\n}\n#example .dog.three.shape .side:nth-child(n+2),\n#example .dog.three.shape .side:nth-child(n+2) .item {\n  width: 350px;\n}\n#example .dog.three.shape .side:nth-child(n+3),\n#example .dog.three.shape .side:nth-child(n+3) .item {\n  width: 140px;\n}\n\n\n#example .demo.shape .side {\n  width: 250px;\n  height: 250px;\n}\n\n#example .demo.shape .side img {\n  display: block;\n  margin: 0px auto;\n  max-width: 100%;\n  max-height: 100%;\n}\n\n#example .demo.shape .first.side {\n  background-color: #EEE0D8;\n}\n#example .demo.shape .second.side {\n  background-color: #EEE6D8;\n}\n#example .demo.shape .third.side {\n  background-color: #D8EED8;\n}\n\n#example .demo.shape .side b {\n  display: block;\n  position: absolute;\n  top: 50%;\n  width: 100%;\n  font-size: 80px;\n  margin-top: -48px;\n  text-align: center;\n}\n\n#example .demo.auto.shape .side {\n  width: auto;\n  height: auto;\n}\n\n#example .irregular.shape .first.side {\n  width: 200px;\n  height: 200px;\n}\n#example .irregular.shape .second.side {\n  width: 300px;\n  height: 300px;\n}\n#example .irregular.shape .third.side {\n  width: 500px;\n  height: 300px;\n}"
  },
  {
    "path": "server/layouts/basic.html.eco",
    "content": "\n\n\n\n  \n  \n  \n  \n\n  \n\n  \n  <%- @getBlock('meta').toHTML() %>\n  <%= @getPreparedTitle() %>\n\n  \" />\n  \" />\n\n  <% if 'development' in @getEnvironments(): %>\n  \n  \n  \n\n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n  \n  \n  \n\n  \n  \n  \n  \n  \n\n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  <% else: %>\n  \n  <% end %>\n\n  \n  \n\n  <% if 'development' in @getEnvironments(): %>\n  \n  <% else: %>\n  \n  <% end %>\n  \n  \n  \n  \n  \n\n  <% if 'development' in @getEnvironments(): %>\n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  <% else: %>\n  \n  <% end %>\n\n  \n  \n  \n  \n\n\" ontouchstart=\"\">\n  <%- @content %>\n  \n\n\n"
  },
  {
    "path": "server/layouts/blank.html.eco",
    "content": "\n\n\n  <%- @partial('meta') %>\n  <%- @partial('library-javascript') %>\n  <%- @partial('ui-javascript') %>\n  <%- @partial('ui-css') %>\n\n\" ontouchstart=\"\">\n  <%- @content %>\n\n"
  },
  {
    "path": "server/layouts/default.html.eco",
    "content": "\n\n\n  <%- @partial('meta') %>\n  <%- @partial('javascript') %>\n  <%- @partial('css') %>\n  <%- @partial('tracking') %>\n  <%- @partial('site-ads') %>\n  <%- @partial('transifex') %>\n\n\" ontouchstart=\"\">\n  <% if @document.element is 'sidebar': %>\n  <%- @partial('demo-sidebar') %>\n  <% end %>\n  <%- @partial('sidebar') %>\n  <%- @partial('fixed-menu') %>\n  
\n    
\n      
\n        
\n          <%- @partial('site-menu') %>\n        
\n      
\n      
\n        <%- @content %>\n        <%- @partial('footer') %>\n      
\n    
\n  
\n  <%- @partial('language-modal') %>\n  <%- @partial('dimmer-demo') %>\n  <%- @partial('less') %>\n\n\n"
  },
  {
    "path": "server/layouts/homepage.html.eco",
    "content": "\n\n\n  <%- @partial('meta') %>\n  <%- @partial('css') %>\n\n  \n  \n\n  <%- @partial('tracking') %>\n\n\" ontouchstart=\"\">\n\n  <%- @partial('sidebar') %>\n  <%- @partial('fixed-menu') %>\n\n  
\n    
\n      <%- @content %>\n    
\n    <%- @partial('footer') %>\n  
\n\n  <%- @partial('language-modal') %>\n\n  <% if 'development' in @getEnvironments(): %>\n  \n  <% else: %>\n  \n  <% end %>\n\n  <%- @partial('transifex') %>\n  \n  \n  <%- @partial('ui-javascript') %>\n  \n  \n  <%- @partial('less') %>\n\n\n"
  },
  {
    "path": "server/layouts/none.html.eco",
    "content": "\n  <%- @content %>"
  },
  {
    "path": "server/partials/css.html.eco",
    "content": "<%- @partial('ui-css') %>\n<%- @partial('docs-css') %>\n\n"
  },
  {
    "path": "server/partials/demo-sidebar.html",
    "content": "
\n  \n    1\n  \n  \n    2\n  \n  \n    3\n  \n
\n\n
\n  \n    \n    Home\n  \n  \n    \n    Topics\n  \n  \n    \n    Friends\n  \n
\n\n
\n  File Permissions\n  Share on Social\n  Share by E-mail\n  Edit Permissions\n  Delete Permanently\n
\n\n
\n  
\n    
\n      
\n        
New Content Awaits
\n      
\n    
\n    
\n      
\n        \n      
\n      
\n        \n      
\n      
\n        \n      
\n    
\n  
\n
\n\n
\n  \n    \n    Home\n  \n  \n    \n    Topics\n  \n  \n    \n    Friends\n  \n  \n    \n    History\n  \n  \n    \n    Messages\n  \n  \n    \n    Discussions\n  \n  \n    \n    Achievements\n  \n  \n    \n    Store\n  \n  \n    \n    Settings\n  \n
\n"
  },
  {
    "path": "server/partials/dimmer-demo.html",
    "content": "
\n  
\n    
\n      
\n        \n        Dimmer Message\n        
Dimmer sub-header
\n      
\n    
\n  
\n
"
  },
  {
    "path": "server/partials/docs-css.html.eco",
    "content": "<% if 'development' in @getEnvironments(): %>\n\n\n\n\n<% else: %>\n\n\n\n\n<% end %>\n"
  },
  {
    "path": "server/partials/examples/accordion.html",
    "content": "
\n  
\n    \n      \n      Menu Item\n    \n    
\n      
\n        
\n          
\n            
\n              \n              \n            
\n          
\n          
\n            
\n              \n              \n            
\n          
\n          
\n            
\n              \n              \n            
\n          
\n          
\n            
\n              \n              \n            
\n          
\n        
\n      
\n    
\n  
\n  
\n    \n      \n      Menu Item\n    \n    
\n      
\n        
\n          
\n            
\n              \n              \n            
\n          
\n          
\n            
\n              \n              \n            
\n          
\n          
\n            
\n              \n              \n            
\n          
\n          
\n            
\n              \n              \n            
\n          
\n        
\n      
\n    
\n  
\n
\n\n
\n\n
\n  
\n    \n    FAQ Question 1?\n  
\n  
\n    \n  
\n  
\n    \n    FAQ Question 2?\n  
\n  
\n    \n  
\n  
\n    \n    FAQ Question 3?\n  
\n  
\n    \n  
\n
\n\n
\n\n
\n  
\n    \n    Title\n  
\n  
\n    \n  
\n  
\n    \n    Title\n  
\n  
\n    \n  
\n  
\n    \n    Title\n  
\n  
\n    \n  
\n
\n\n"
  },
  {
    "path": "server/partials/examples/breadcrumb.html",
    "content": "
\n  Home\n  
 / 
\n  Store\n  
 / 
\n  
T-Shirt
\n
\n\n
\n  Home\n  \n  Registration\n  \n  
Personal Information
\n
"
  },
  {
    "path": "server/partials/examples/button.html",
    "content": "
\n  
\n    View\n  
\n  
\n     Add to Cart\n  
\n  
\n     Save for Later\n  
\n  
\n    \n    Rate\n  
\n  
Basic
\n\n  \n\n  
\n    
Horizontal
\n    
\n      Hidden\n    
\n  
\n  
\n    
Vertical
\n    
\n      Hidden\n    
\n  
\n  
\n    
Fade In
\n    
\n      Hidden\n    
\n  
\n\n  \n\n  
\n    \n    Facebook\n  
\n  
\n    \n    Twitter\n  
\n  
\n    \n    Google Plus\n  
\n\n  \n  
\n    
1
\n    
2
\n    
3
\n  
\n\n\n  
\n    
Cancel
\n    
\n    
Save
\n  
\n\n  
\n    
\n    
\n    
\n    
\n  
\n  \n  
Blue
\n  
Red
\n  
Teal
\n  
Blue
\n  
Red
\n  
Teal
\n\n  
\n    
Inverted
\n    
Blue
\n    
Red
\n    
Basic
\n    
Blue
\n    
Red
\n  
\n\n  \n\n  
\n    
Feed
\n    
Messages
\n    
Events
\n    
Photos
\n  
\n\n  
\n    
1
\n    
2
\n    
3
\n  
\n\n  
\n    
\n    
\n    
\n    
\n  
\n\n
\n"
  },
  {
    "path": "server/partials/examples/card.html",
    "content": "
\n  
\n    
\n      
\n        
\n          
Add Friend
\n        
\n      
\n    
\n    \n  
\n  
\n    
Title
\n    
\n      Meta\n    
\n    
One or two sentence description that may go to several lines
\n  
\n  
\n    Arbitrary\n    \n      Arbitrary\n  
\n
\n
\n  
\n    
\n      \n      Abbreviated Header\n    
\n    
\n      Short Description\n    
\n  
\n  
\n    
\n      Action 1\n    
\n    
\n      Action 2\n    
\n  
\n
\n
\n  
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n
\n
\n  
\n    
\n      \n    
\n    
\n      
\n    
\n  
\n  
\n    
\n      \n    
\n    
\n      
\n    
\n  
\n  
\n    
\n      \n    
\n    
\n      
\n    
\n  
\n  
\n    
\n      \n    
\n    
\n      
\n    
\n  
\n
\n\n\n"
  },
  {
    "path": "server/partials/examples/checkbox.html",
    "content": "
\n  \n  \n
\n\n\n
\n  
\n    
\n      
\n        \n        \n      
\n    
\n    
\n      
\n        \n        \n      
\n    
\n    
\n      
\n        \n        \n      
\n    
\n    
\n      
\n        \n        \n      
\n    
\n  
\n
\n\n\n
\n  \n  \n
\n\n\n
\n  \n  \n
\n\n"
  },
  {
    "path": "server/partials/examples/content-loader.html",
    "content": "\n    
Simulate Loading
\n    
\n    
\n      
\n        
\n          
\n            
\n          
\n        
\n        
\n          
\n            
\n              
\n              
\n            
\n            
\n              
\n            
\n          
\n        
\n        
\n          
Add
\n          
Delete
\n        
\n      
\n    
\n    
\n      
\n        \n      
\n      
\n        Lindsay\n        
\n          Joined in 2013\n        
\n        
\n          Primary Contact\n        
\n      
\n      
\n        
Add
\n        
Delete
\n      
\n    
\n"
  },
  {
    "path": "server/partials/examples/dimmer.html",
    "content": "
\n  
\n    
\n      Dimmable Section\n    
\n    
\n      \n      \n      \n    
\n    \n    
\n  
\n  
\n    
\n    
\n  
\n
\n
\n  
\n    
\n      Inverted Dimmer\n    
\n    
\n      \n      \n      \n    
\n    \n    
\n  
\n  
\n    
\n    
\n  
\n
\n
\n  
\n    
\n      Dimmer With Content\n    
\n    
\n      \n      \n      \n    
\n    \n    
\n      
\n        
\n          
\n            \n            Dimmed Message!\n          
\n        
\n      
\n    
\n  
\n  
\n    
\n    
\n  
\n
\n
\n  
\n     Page Dimmer\n  
\n
\n\n\n"
  },
  {
    "path": "server/partials/examples/divider.html",
    "content": "
\n  
A
\n  
and
\n  
B
\n
\n\n
\n  
\n    
A
\n  
\n  
or
\n  
\n    
B
\n  
\n
\n\n
\n  \n
\n\n
\n  \n  Specifications\n
\n\n
\n  
A
\n  
\n  
B
\n
"
  },
  {
    "path": "server/partials/examples/dropdown.html",
    "content": "
\n  \n  Select Language\n  
\n    
Arabic
\n    
Chinese
\n    
Danish
\n    
Dutch
\n    
English
\n    
French
\n    
German
\n    
Greek
\n    
Hungarian
\n    
Italian
\n    
Japanese
\n    
Korean
\n    
Lithuanian
\n    
Persian
\n    
Polish
\n    
Portuguese
\n    
Russian
\n    
Spanish
\n    
Swedish
\n    
Turkish
\n    
Vietnamese
\n  
\n
\n
\n  \n  \n  
Select Country
\n  
\n    
Andorra
\n    
U.A.E
\n    
Afghanistan
\n    
Antigua
\n    
Anguilla
\n    
Albania
\n    
Armenia
\n    
Netherlands Antilles
\n    
Angola
\n    
Argentina
\n    
American Samoa
\n    
Austria
\n    
Australia
\n    
Aruba
\n    
Aland Islands
\n    
Azerbaijan
\n    
Bosnia
\n    
Barbados
\n    
Bangladesh
\n    
Belgium
\n    
Burkina Faso
\n    
Bulgaria
\n    
Bahrain
\n    
Burundi
\n    
Benin
\n    
Bermuda
\n    
Brunei
\n    
Bolivia
\n    
Brazil
\n    
Bahamas
\n    
Bhutan
\n    
Bouvet Island
\n    
Botswana
\n    
Belarus
\n    
Belize
\n    
Canada
\n    
Cocos Islands
\n    
Congo
\n    
Central African Republic
\n    
Congo Brazzaville
\n    
Switzerland
\n    
Cote Divoire
\n    
Cook Islands
\n    
Chile
\n    
Cameroon
\n    
China
\n    
Colombia
\n    
Costa Rica
\n    
Serbia
\n    
Cuba
\n    
Cape Verde
\n    
Christmas Island
\n    
Cyprus
\n    
Czech Republic
\n    
Germany
\n    
Djibouti
\n    
Denmark
\n    
Dominica
\n    
Dominican Republic
\n    
Algeria
\n    
Ecuador
\n    
Estonia
\n    
Egypt
\n    
Western Sahara
\n    
Eritrea
\n    
Spain
\n    
Ethiopia
\n    
European Union
\n    
Finland
\n    
Fiji
\n    
Falkland Islands
\n    
Micronesia
\n    
Faroe Islands
\n    
France
\n    
Gabon
\n    
United Kingdom
\n    
Grenada
\n    
Georgia
\n    
French Guiana
\n    
Ghana
\n    
Gibraltar
\n    
Greenland
\n    
Gambia
\n    
Guinea
\n    
Guadeloupe
\n    
Equatorial Guinea
\n    
Greece
\n    
Sandwich Islands
\n    
Guatemala
\n    
Guam
\n    
Guinea-Bissau
\n    
Guyana
\n    
Hong Kong
\n    
Heard Island
\n    
Honduras
\n    
Croatia
\n    
Haiti
\n    
Hungary
\n    
Indonesia
\n    
Ireland
\n    
Israel
\n    
India
\n    
Indian Ocean Territory
\n    
Iraq
\n    
Iran
\n    
Iceland
\n    
Italy
\n    
Jamaica
\n    
Jordan
\n    
Japan
\n    
Kenya
\n    
Kyrgyzstan
\n    
Cambodia
\n    
Kiribati
\n    
Comoros
\n    
Saint Kitts and Nevis
\n    
North Korea
\n    
South Korea
\n    
Kuwait
\n    
Cayman Islands
\n    
Kazakhstan
\n    
Laos
\n    
Lebanon
\n    
Saint Lucia
\n    
Liechtenstein
\n    
Sri Lanka
\n    
Liberia
\n    
Lesotho
\n    
Lithuania
\n    
Luxembourg
\n    
Latvia
\n    
Libya
\n    
Morocco
\n    
Monaco
\n    
Moldova
\n    
Montenegro
\n    
Madagascar
\n    
Marshall Islands
\n    
MacEdonia
\n    
Mali
\n    
Burma
\n    
Mongolia
\n    
MacAu
\n    
Northern Mariana Islands
\n    
Martinique
\n    
Mauritania
\n    
Montserrat
\n    
Malta
\n    
Mauritius
\n    
Maldives
\n    
Malawi
\n    
Mexico
\n    
Malaysia
\n    
Mozambique
\n    
Namibia
\n    
New Caledonia
\n    
Niger
\n    
Norfolk Island
\n    
Nigeria
\n    
Nicaragua
\n    
Netherlands
\n    
Norway
\n    
Nepal
\n    
Nauru
\n    
Niue
\n    
New Zealand
\n    
Oman
\n    
Panama
\n    
Peru
\n    
French Polynesia
\n    
New Guinea
\n    
Philippines
\n    
Pakistan
\n    
Poland
\n    
Saint Pierre
\n    
Pitcairn Islands
\n    
Puerto Rico
\n    
Palestine
\n    
Portugal
\n    
Palau
\n    
Paraguay
\n    
Qatar
\n    
Reunion
\n    
Romania
\n    
Serbia
\n    
Russia
\n    
Rwanda
\n    
Saudi Arabia
\n    
Solomon Islands
\n    
Seychelles
\n    
Sudan
\n    
Sweden
\n    
Singapore
\n    
Saint Helena
\n    
Slovenia
\n    
Svalbard, I Flag Jan Mayen
\n    
Slovakia
\n    
Sierra Leone
\n    
San Marino
\n    
Senegal
\n    
Somalia
\n    
Suriname
\n    
Sao Tome
\n    
El Salvador
\n    
Syria
\n    
Swaziland
\n    
Caicos Islands
\n    
Chad
\n    
French Territories
\n    
Togo
\n    
Thailand
\n    
Tajikistan
\n    
Tokelau
\n    
Timorleste
\n    
Turkmenistan
\n    
Tunisia
\n    
Tonga
\n    
Turkey
\n    
Trinidad
\n    
Tuvalu
\n    
Taiwan
\n    
Tanzania
\n    
Ukraine
\n    
Uganda
\n    
Us Minor Islands
\n    
United States
\n    
Uruguay
\n    
Uzbekistan
\n    
Vatican City
\n    
Saint Vincent
\n    
Venezuela
\n    
British Virgin Islands
\n    
Us Virgin Islands
\n    
Vietnam
\n    
Vanuatu
\n    
Wallis and Futuna
\n    
Samoa
\n    
Yemen
\n    
Mayotte
\n    
South Africa
\n    
Zambia
\n    
Zimbabwe
\n  
\n
\n\n\n\n
\n  \n  Filter Posts\n  
\n    
\n      Filter\n    
\n    
\n      
\n      Tag A\n    
\n    
\n      
\n      Tag B\n    
\n    
\n      
\n      Tag C\n    
\n    
\n      
\n      Tag D\n    
\n  
\n
\n\n\n\nShow me posts trending\n
\n    
today
\n    \n    
\n      
Today
\n      
This Week
\n      
This Month
\n    
\n
\n\n\n\n
\n  \n  
\n    
\n      \n      \n    
\n    
\n    
\n      \n      Filter by tag\n    
\n    
\n      
\n      Important\n    
\n    
\n      
\n      Announcement\n    
\n    
\n      
\n      Discussion\n    
\n  
\n
\n\n\n\n
\n  \n    Home\n  \n  
\n    Shopping\n    \n    
\n      
Categories
\n      
\n        \n        Clothing\n        
\n          
Mens
\n          
Shirts
\n          
Pants
\n          
Jeans
\n          
Shoes
\n          
\n          
Womens
\n          
Dresses
\n          
Shoes
\n          
Bags
\n        
\n      
\n      
Home Goods
\n      
Bedroom
\n      
\n      
Order
\n      
Status
\n      
Cancellations
\n    
\n  
\n  \n    Forums\n  \n  \n    Contact Us\n  \n
\n\n\n\n
\n  \n    Home\n  \n  
\n    \n    Messages\n    
\n      
Inbox
\n      
Starred
\n      
Sent Mail
\n      
Drafts (143)
\n      
\n      
Spam (1009)
\n      
Trash
\n    
\n  
\n  \n    Browse\n  \n  \n    Help\n  \n
\n\n\n\n
\n  
\n    \n    
\n      
Edit User
\n      
Remove User
\n      
Make Invisible
\n    
\n  
\n  
\n    \n    
\n      
Edit Group
\n      
Remove Group
\n      
Hide from Group
\n    
\n  
\n  
\n    \n    
\n      
 Edit
\n      
 Remove
\n      
 Hide
\n    
\n  
\n
\n\n\n"
  },
  {
    "path": "server/partials/examples/feed.html",
    "content": "
\n  
\n    
\n      
\n        
\n          \n        
\n        
\n          
\n            \n              Username\n             added you as a friend\n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          You added Username to the group Group Name\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          
\n            Time period ago\n          
\n          
\n            Username added new photos\n          
\n          
\n            \n          
\n          
\n            \n               1 Like\n            \n          
\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        
\n          \n        
\n        
\n          
\n            You wrote something\n            
\n              Time period ago\n            
\n          
\n          
\n            Blockquote\n          
\n          
\n            Metadata\n            Metadata\n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          
\n            You uploaded a photo\n            
\n              Time period ago\n            
\n          
\n          
\n            Metadata\n            Metadata\n          
\n        
\n      
\n    
\n    \n    
\n      
\n        
\n          
\n             Elliot Fu added Jenny Hess as a friend\n          
\n        
\n      
\n      
\n        
\n          
\n             Stevie Feliciano added Elliot Fu as a friend\n          
\n        
\n      
\n      
\n        
\n          
\n             Helen Troy added Christian Rocha as a friend\n          
\n        
\n      
\n      
\n        
\n          
\n             Christian Rocha signed up for the site.\n          
\n        
\n      
\n    
\n  
\n
"
  },
  {
    "path": "server/partials/examples/flag.html",
    "content": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"
  },
  {
    "path": "server/partials/examples/form.html",
    "content": "
\n  
\n    
\n      \n      
\n        
Select
\n        \n        \n        
\n          
Choice 1
\n          
Choice 2
\n        
\n      
\n    
\n    
\n      \n      \n    
\n  
\n  
\n    \n    \n  
\n  
\n    
\n      \n      \n    
\n    
\n      \n      \n    
\n    
\n      \n      \n    
\n  
\n  
\n    \n    
\n      
\n        \n        \n      
\n    
\n    
\n      
\n        \n        \n      
\n    
\n    
\n      
\n        \n        \n      
\n    
\n    
\n      
\n        \n        \n      
\n    
\n  
\n  
\n    \n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n  
\n    \n    
\n      
\n        \n        \n      
\n    
\n    
\n      
\n        \n        \n      
\n    
\n    
\n      
\n        \n        \n      
\n    
\n    
\n      
\n        \n        \n      
\n    
\n  
\n  
\n    
\n      \n      \n    
\n    
\n      \n    
\n    
\n      \n    
\n  
\n  
\n    \n    \n  
\n  
Sub-header
\n  
\n    
\n      \n      \n    
\n  
\n  
\n    
\n      \n      \n    
\n  
\n  
Submit
\n
\n\n
\n  
\n    
Warning Message
\n    
    \n      
  • Problem #1
    • \n      
  • Problem #2
    • \n    
\n  
\n  
\n    
\n      \n      \n    
\n    
\n      \n      \n    
\n  
\n  
Submit
\n
\n
\n  
\n    
Error Message
\n    
Error message long description
\n  
\n  
\n    
\n      \n      \n    
\n    
\n      \n      \n    
\n  
\n  
Submit
\n
"
  },
  {
    "path": "server/partials/examples/grid.html",
    "content": "\n
\n\n
\n  
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n  
\n  
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n  
\n  
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n  
\n  
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n  
\n  
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n  
\n  
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n  
\n  
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n  
\n  
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n  
\n  
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n  
\n  
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n  
\n  
\n    
\n    
\n    
\n    
\n    
\n    
\n  
\n  
\n    
\n    
\n    
\n    
\n    
\n  
\n  
\n    
\n    
\n    
\n    
\n  
\n  
\n    
\n    
\n    
\n  
\n  
\n    
\n    
\n  
\n  
\n    
\n  
\n
\n\n
\n  
\n    
\n    
\n  
\n  
\n    
\n    
\n  
\n  
\n    
\n    
\n  
\n  
\n    
\n    
\n  
\n  
\n    
\n    
\n  
\n  
\n    
\n    
\n  
\n  
\n    
\n    
\n  
\n  
\n    
\n    
\n  
\n  
\n    
\n    
\n  
\n  
\n    
\n    
\n  
\n  
\n    
\n    
\n  
\n  
\n    
\n    
\n  
\n  
\n    
\n    
\n  
\n  
\n    
\n    
\n  
\n  
\n    
\n    
\n  
\n
\n\n
\n  
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n  
\n  
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n  
\n  
\n    
\n    
\n    
\n    
\n    
\n    
\n  
\n  
\n    
\n    
\n    
\n    
\n    
\n  
\n  
\n    
\n    
\n    
\n    
\n  
\n  
\n    
\n    
\n    
\n  
\n  
\n    
\n    
\n  
\n  
\n    
\n  
\n
\n\n
\n  
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n  
\n  
\n    
\n    
\n    
\n    
\n    
\n    
\n    
\n  
\n  
\n    
\n    
\n    
\n    
\n    
\n    
\n  
\n  
\n    
\n    
\n    
\n    
\n    
\n  
\n  
\n    
\n    
\n    
\n    
\n  
\n  
\n    
\n    
\n    
\n  
\n  
\n    
\n    
\n  
\n  
\n    
\n  
\n
\n\n
\n\n
\n\n
\n\n
\n  
\n    
\n      
\n        
\n        
\n      
\n    
\n    
\n      
\n        
\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        
\n        
\n      
\n    
\n    
\n      
\n        
\n        
\n      
\n    
\n    
\n      
\n        
\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        
\n        
\n      
\n    
\n    
\n      
\n        
\n        
\n      
\n    
\n    
\n      
\n        
\n        
\n      
\n    
\n    
\n      
\n        
\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        
\n        
\n      
\n    
\n    
\n      
\n        
\n        
\n      
\n    
\n    
\n      
\n        
\n        
\n      
\n    
\n    
\n      
\n        
\n        
\n      
\n    
\n    
\n      
\n        
\n        
\n      
\n    
\n  
\n  
\n    
\n      
\n        
\n        
\n      
\n    
\n    
\n      
\n        
\n        
\n      
\n    
\n    
\n      
\n        
\n        
\n      
\n    
\n    
\n      
\n        
\n        
\n      
\n    
\n    
\n      
\n        
\n        
\n      
\n    
\n    
\n      
\n        
\n        
\n      
\n    
\n  
\n
\n\n
\n\n"
  },
  {
    "path": "server/partials/examples/header.html",
    "content": "
\n\n  
\n    
H1
\n    
H2
\n    
H3
\n    
H4
\n    
H5
\n\n    
\n      \n      
\n        Icon Header\n        
Sub-header
\n      
\n    
\n\n    
\n      \n      
\n        Header\n        
Sub-header
\n      
\n    
\n  
\n  
\n    
\n      \n      
\n        Block\n        
Sub-header
\n      
\n    
\n\n    
\n      \n      
\n        Dividing\n        
Sub-header
\n      
\n    
\n\n    
\n      \n      
\n        Color\n        
Sub-header
\n      
\n    
\n\n    
Attached
\n    
\n    
Attached
\n  
\n
"
  },
  {
    "path": "server/partials/examples/icon.html",
    "content": "
\n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n
\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"
  },
  {
    "path": "server/partials/examples/image.html",
    "content": " User Avatar\n\n
\n  \n  \n  \n  \n
\n\n"
  },
  {
    "path": "server/partials/examples/input.html",
    "content": "
\n  \n  \n  
Search
\n
\n\n\n
\n  \n  
\n    \n  
\n
\n\n\n
\n  
\n    http://\n  
\n  \n  \n
\n\n\n
\n  \n    Label\n  \n  \n
\n\n
\n  \n  \n    Label\n  \n
"
  },
  {
    "path": "server/partials/examples/item.html",
    "content": "
\n  
\n    
\n      \n    
\n    
\n      Content Header\n      
\n        Date\n        Category\n      
\n      
\n        A description which may flow for several lines and give context to the content.\n      
\n      
\n         Username\n      
\n    
\n  
\n  
\n    
\n      \n    
\n    
\n      Content Header\n      
\n        Date\n        Category\n      
\n      
\n        A description which may flow for several lines and give context to the content.\n      
\n      
\n        
\n          Primary\n          \n        
\n        
Limited
\n      
\n    
\n  
\n  
\n    
\n      \n    
\n    
\n      Content Header\n      
\n        Date\n        Category\n      
\n      
\n        A description which may flow for several lines and give context to the content.\n      
\n      
\n        
\n          Primary\n          \n        
\n      
\n    
\n  
\n
\n\n\n\n
\n  
\n    
\n      \n    
\n    
\n      Content Header\n      
\n        A description which may flow for several lines and give context to the content.\n      
\n    
\n  
\n  
\n    
\n      \n    
\n    
\n      Content Header\n      
\n        A description which may flow for several lines and give context to the content.\n      
\n    
\n  
\n  
\n    
\n      \n    
\n    
\n      Content Header\n      
\n        A description which may flow for several lines and give context to the content.\n      
\n    
\n  
\n
"
  },
  {
    "path": "server/partials/examples/label.html",
    "content": "
\n  \n  email@address.com\n  \n
\n\n  Some Name\n  Group\n\n\n   Icon\n\nTag\n
\n
\n
\n\n\n
\n  
\n    
\n      \n      
\n        Pointing Label\n      
\n    
\n    
\n      
\n        Pointing below label\n      
\n      \n    
\n  
\n
\n\n\n
\n  \n    Item\n  \n  \n    Item\n    
141
\n  \n
\n\n\n
\n  \n    \n  \n  \n
\n
\n  \n    \n  \n  \n
\n
\n  \n    \n  \n  \n
\n\n\n
\n  
Top Labeled
\n  
Bottom Labeled
\n
\n
\n  
Top Left
\n  
Top Right
\n  
Bottom Left
\n  
Bottom Right
\n
\n
\n  Ribbon\n
"
  },
  {
    "path": "server/partials/examples/list.html",
    "content": "
\n  
\n    
\n      
\n        
\n          \n        
\n        
\n          
Header
\n          Description\n          
\n            
\n              \n              
\n                Sub Header\n                
Sub Description
\n              
\n            
\n            
\n              \n              
\n                Sub Header\n                
Sub Description
\n              
\n            
\n          
\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          
Header
\n          Description\n          
\n            
\n              \n              
\n                Sub Header\n                
Sub Description
\n              
\n            
\n            
\n              \n              
\n                Sub Header\n                
Sub Description
\n              
\n            
\n          
\n        
\n      
\n    
\n\n    
\n      
\n        \n        
\n          
Header
\n          Description\n        
\n      
\n      
\n        \n        
\n          
Header
\n          Description\n        
\n      
\n      
\n        \n        
\n          
Header
\n          Description\n        
\n      
\n    
\n\n    
\n      
\n        
\n          \n        
\n        
\n          
Header
\n          Description\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          
Header
\n          Description\n        
\n      
\n      
\n        
\n          \n        
\n        
\n          
Header
\n          Description\n        
\n      
\n    
\n\n  
\n\n  
\n    
\n      Link\n      Link\n      Link\n      Link\n      Link\n    
\n\n    
\n      Selection\n      Selection\n      Selection\n      Selection\n      Selection\n    
\n\n    
\n      
\n        
\n          
Header
\n          Description\n        
\n        
\n          
\n            Sub-header\n          
\n          
\n            Sub-header\n          
\n          
\n            Sub-header\n          
\n        
\n      
\n      
\n        
\n          
Header
\n          Description\n        
\n      
\n      
\n        
\n          
Header
\n          Description\n        
\n      
\n    
\n\n    
\n      Getting Started\n      Introduction\n      
\n        Languages\n        
\n          HTML\n          Javascript\n          CSS\n        
\n      
\n      Review\n    
\n  
\n
\n\n\n\n
\n  
\n    
\n      \n    
\n    
\n      
Header
\n      Description\n    
\n  
\n  
\n    
\n      \n    
\n    
\n      
Header
\n      Description\n    
\n  
\n  
\n    
\n      \n    
\n    
\n      
Header
\n      Description\n    
\n  
\n
\n\n\n\n
\n  
\n    
\n      \n    
\n    
\n      
Header
\n      Description\n    
\n  
\n  
\n    
\n      \n    
\n    
\n      
Header
\n      Description\n    
\n  
\n  
\n    
\n      \n    
\n    
\n      
Header
\n      Description\n    
\n  
\n
\n\n\n\n
\n  
\n    \n    
\n      
Steve Jobes
\n      50 Points\n    
\n  
\n  
\n    \n    
\n      
Stevie Feliciano
\n      44 Points\n    
\n  
\n  
\n    \n    
\n      
Jenny Hess
\n      11 Points\n    
\n  
\n
"
  },
  {
    "path": "server/partials/examples/loader.html",
    "content": "
\n  
\n    
\n      
\n        
\n      
\n      

\n      

\n      

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

\n      

\n      

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

\n      

\n      

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

\n      

\n      

\n    
\n  
\n
\n
\n  
\n    
\n      
\n        
\n          Loading\n        
\n      
\n      

\n      

\n      

\n    
\n  
\n  
\n    
\n      
\n        
\n          Loading\n        
\n      
\n      

\n      

\n      

\n    
\n  
\n  
\n    
\n      
\n        
\n          Loading\n        
\n      
\n      

\n      

\n      

\n    
\n  
\n  
\n    
\n      
\n        
\n          Loading\n        
\n      
\n      

\n      

\n      

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

\n      

\n      

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

\n      

\n      

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

\n      

\n      

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

\n      

\n      

\n    
\n  
\n
\n
\n  
\n    
\n      
\n        
\n          Loading\n        
\n      
\n      

\n      

\n      

\n    
\n  
\n  
\n    
\n      
\n        
\n          Loading\n        
\n      
\n      

\n      

\n      

\n    
\n  
\n  
\n    
\n      
\n        
\n          Loading\n        
\n      
\n      

\n      

\n      

\n    
\n  
\n  
\n    
\n      
\n        
\n          Loading\n        
\n      
\n      

\n      

\n      

\n    
\n  
\n
\n\n\n\n
\n  
\n    
\n      Preparing...\n    
\n  
\n  

\n  

\n  

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

\n  

\n  

\n
\n"
  },
  {
    "path": "server/partials/examples/menu.html",
    "content": "
\n  \n    A\n  \n  \n    B\n  \n  \n    C\n  \n
\n
\n  \n    A\n  \n  \n    B\n    
1
\n  \n  
\n  
\n      \n      \n    
\n  
\n
\n
\n  \n    Tab\n  \n  \n    Tab\n  \n
\n
\n  \n    A\n  \n  \n    B\n  \n  \n    C\n  \n
\n
\n  \n    A\n  \n  \n    B\n  \n  \n    C\n  \n
\n
\n  \n    A\n  \n  \n    B\n  \n  \n    C\n  \n
\n
\n  \n    A\n  \n  \n    B\n  \n  \n    C\n  \n
\n
\n  \n    A\n  \n  \n    B\n  \n  \n    C\n  \n
\n\n"
  },
  {
    "path": "server/partials/examples/message.html",
    "content": "
\n  \n  Closable message\n
\n
\n  
\n  
Warning Message
\n    
    \n      
  • List item
    • \n      
  • List item
    • \n    
\n  
\n
\n
\n  
\n    List Message\n  
\n  
    \n    
  • List item 1
    • \n    
  • List item 2
    • \n    
  • List item 3
    • \n  
\n
\n
\n  
Info Message
\n  
Example description
\n
\n
\n  
\n    
Positive Message
\n    
Example description
\n  
\n
\n
\n  \n  
\n    
Negative Message
\n    
Example description
\n  
\n
\n
\n  Top attached\n
\n
\n  Bottom attached\n
\n\n"
  },
  {
    "path": "server/partials/examples/modal.html",
    "content": "
Standard Modal
\n
Basic Modal
\n
Full-Screen Modal
\n\n
\n  \n  
\n    Profile Picture\n  
\n  
\n    
\n      \n    
\n    
\n      
We've auto-chosen a profile image for you.
\n      
We've grabbed the following image from the gravatar image associated with your registered e-mail address.
\n      
Is it okay to use this photo?
\n    
\n  
\n  
\n    
\n      Nope\n    
\n    
\n      Yep, that's me\n      \n    
\n  
\n
\n\n
\n  
\n    Archive Old Messages\n  
\n  
\n    
\n      \n    
\n    
\n      
Your inbox is getting full, would you like us to enable automatic archiving of old messages?
\n    
\n  
\n  
\n    
\n      
\n        \n        No\n      
\n      
\n        \n        Yes\n      
\n    
\n  
\n
\n\n
\n  \n  
\n    Update Your Settings\n  
\n  
\n    
\n      
Give us your feedback
\n      
\n        \n        \n      
\n      
\n        
\n          \n          \n        
\n      
\n    
\n  
\n  
\n    
Cancel
\n    
Send
\n  
\n
\n\n\n"
  },
  {
    "path": "server/partials/examples/popup.html",
    "content": "
\n  \n  \n  \n\n  
Fluid Popup
\n  
\n    
\n      
1
\n      
2
\n      
3
\n      
4
\n    
\n  
\n\n  
User Rating
\">HTML Content
\n  
Basic Popup
\n  
\n    Basic pop-up\n  
\n  
Small
\n  
\n    Small pop-up\n  
\n  
Large
\n  
\n    Large pop-up\n  
\n  
\n    Inverted\n  
\n  
\n    \n      Link\n    \n    \n      \n      Popup Link\n    \n    
\n      
\n        
\n          
Fabrics
\n          
\n            Cashmere\n            Linen\n            Cotton\n            Viscose\n          
\n        
\n        
\n          
Sizes
\n          
\n            Small\n            Medium\n            Large\n            Plus Sizes\n          
\n        
\n        
\n          
Colors
\n          
\n            Neutrals\n            Brights\n            Pastels\n          
\n        
\n        
\n          
Types
\n          
\n            Knitwear\n            Outerwear\n            Pants\n            Shoes\n          
\n        
\n      
\n    
\n  
\n\n  
\n    
\n      \n      \n      \n      \n      \n      \n      \n      \n    
\n  
\n\n
\n\n"
  },
  {
    "path": "server/partials/examples/progress.html",
    "content": "
\n  
\n    
\n  
\n  
Uploading Files
\n
\n\n\n
\n  
\n  
Funding
\n
\n\n
\n  
\n    
\n  
\n  
\n
\n\n
\n  
\n
\n
\n
\n
\n  
\n
\n\n"
  },
  {
    "path": "server/partials/examples/rating.html",
    "content": "
\n  
\n    
\n      
\n        
\n        
\n          \n          Choice #1\n        
\n      
\n    
\n    
\n      
\n        
\n        
\n          \n          Choice #2\n        
\n      
\n    
\n    
\n      
\n        
\n        
\n          \n          Choice #3\n        
\n      
\n    
\n  
\n\n  
\n\n  
\n    
\n      
\n        \n      
\n      
\n        Content Header\n        
\n          A description which may flow for several lines and give context to the content.\n        
\n        
\n          11 
\n        
\n      
\n    
\n    
\n      
\n        \n      
\n      
\n        Content Header\n        
\n          A description which may flow for several lines and give context to the content.\n        
\n        
\n          42 
\n        
\n      
\n    
\n    
\n      
\n        \n      
\n      
\n        Content Header\n        
\n          A description which may flow for several lines and give context to the content.\n        
\n        
\n          16 
\n        
\n      
\n    
\n  
\n\n  \n\n  
\n    
\n      
\n    
\n    
\n      
\n    
\n    
\n      
\n    
\n    
\n      
\n    
\n    
\n      
\n    
\n    
\n      
\n    
\n    
\n      
\n    
\n    
\n      
\n    
\n    
\n      
\n    
\n  
\n
\n\n\n"
  },
  {
    "path": "server/partials/examples/reveal.html",
    "content": "\n
\n  
\n    \n  
\n  
\n    \n  
\n
\n
\n  
\n    \n  
\n  
\n    \n  
\n
\n
\n  
\n    \n  
\n  
\n    \n  
\n
\n
\n  
\n    \n  
\n  
\n    \n  
\n
\n\n
\n  
\n    \n  
\n  
\n    \n  
\n
\n
\n  
\n    \n  
\n  
\n    \n  
\n
\n
\n  
\n    \n  
\n  
\n    \n  
\n
\n
\n  
\n    \n  
\n  
\n    \n  
\n
\n\n
\n  
\n    \n  
\n  
\n    \n  
\n
\n
\n  
\n    \n  
\n  
\n    \n  
\n
\n"
  },
  {
    "path": "server/partials/examples/search.html",
    "content": "
\n\n  
\n    
\n      \n      \n    
\n    
\n  
\n\n  \n\n  
\n    
\n      \n      \n    
\n    
\n  
\n\n  \n\n  
\n    
\n      \n      \n    
\n    
\n  
\n\n
\n\n"
  },
  {
    "path": "server/partials/examples/segment.html",
    "content": "
\n
\n
\n
\n
\n
\n
\n
\n
"
  },
  {
    "path": "server/partials/examples/shape.html",
    "content": "
\n\n  
\n    
\n      
\n        
\n          
\n            \n          
\n          
\n            \n          
\n        
\n      
\n\n      \n\n      
\n        
\n        
\n        
\n        
\n      
\n\n      
\n        
\n        
\n      
\n    
\n    
\n      
\n        
\n          
\n            
\n              
\n                1\n              
\n            
\n          
\n          
\n            
\n              
\n                2\n              
\n            
\n          
\n          
\n            
\n              
\n                3\n              
\n            
\n          
\n          
\n            
\n              
\n                4\n              
\n            
\n          
\n          
\n            
\n              
\n                5\n              
\n            
\n          
\n          
\n            
\n              
\n                6\n              
\n            
\n          
\n        
\n      
\n\n      \n\n      
\n        
\n        
\n        
\n        
\n      
\n      
\n        
\n        
\n      
\n    
\n    
\n      
\n        
\n          
Did you know? This side starts visible.
\n          
Help, its another side!
\n          
This is the last side
\n        
\n      
\n\n      \n\n      
\n        
\n        
\n        
\n        
\n      
\n      
\n        
\n        
\n      
\n\n    
\n  
\n
\n\n\n"
  },
  {
    "path": "server/partials/examples/sidebar.html",
    "content": "
\n\n  
\n    \n    \n  
\n\n  \n\n  
\n    
\n      Left\n    
\n    
\n      Right\n    
\n    
\n      Top\n    
\n    
\n      Bottom\n    
\n  
\n\n  \n\n  
Animation
\n  
\n    Overlay\n  
\n  
\n    Push\n  
\n  
\n    Scale Down\n  
\n\n  
Horizontal-Only Animation
\n  
\n    Uncover\n  
\n  
\n    Slide Along\n  
\n  
\n    Slide Out\n  
\n
\n\n\n
\n  File Permissions\n  Share on Social\n  Share by E-mail\n  Edit Permissions\n  Delete Permanently\n
\n\n
\n  \n    \n    Home\n  \n  \n    \n    Topics\n  \n  \n    \n    Friends\n  \n  \n    \n    History\n  \n  \n    \n    Messages\n  \n  \n    \n    Discussions\n  \n  \n    \n    Achievements\n  \n  \n    \n    Store\n  \n  \n    \n    Settings\n  \n
\n\n
\n  
\n    
\n      
\n        
New Content Awaits
\n      
\n    
\n    
\n      
\n        \n      
\n      
\n        \n      
\n      
\n        \n      
\n    
\n  
\n
\n\n
\n  \n    \n    Home\n  \n  \n    \n    Topics\n  \n  \n    \n    Friends\n  \n  \n    \n    History\n  \n  \n    \n    Messages\n  \n  \n    \n    Discussions\n  \n  \n    \n    Achievements\n  \n  \n    \n    Store\n  \n  \n    \n    Settings\n  \n
\n\n\n\n"
  },
  {
    "path": "server/partials/examples/single/flag-menu.html",
    "content": "
\n        
Afghanistan
\n        
Aland Islands
\n        
Albania
\n        
Algeria
\n        
American Samoa
\n        
Andorra
\n        
Angola
\n        
Anguilla
\n        
Antigua
\n        
Argentina
\n        
Armenia
\n        
Aruba
\n        
Australia
\n        
Austria
\n        
Azerbaijan
\n        
Bahamas
\n        
Bahrain
\n        
Bangladesh
\n        
Barbados
\n        
Belarus
\n        
Belgium
\n        
Belize
\n        
Benin
\n        
Bermuda
\n        
Bhutan
\n        
Bolivia
\n        
Bosnia
\n        
Botswana
\n        
Bouvet Island
\n        
Brazil
\n        
British Virgin Islands
\n        
Brunei
\n        
Bulgaria
\n        
Burkina Faso
\n        
Burma
\n        
Burundi
\n        
Caicos Islands
\n        
Cambodia
\n        
Cameroon
\n        
Canada
\n        
Cape Verde
\n        
Cayman Islands
\n        
Central African Republic
\n        
Chad
\n        
Chile
\n        
China
\n        
Christmas Island
\n        
Cocos Islands
\n        
Colombia
\n        
Comoros
\n        
Congo Brazzaville
\n        
Congo
\n        
Cook Islands
\n        
Costa Rica
\n        
Cote Divoire
\n        
Croatia
\n        
Cuba
\n        
Cyprus
\n        
Czech Republic
\n        
Denmark
\n        
Djibouti
\n        
Dominica
\n        
Dominican Republic
\n        
Ecuador
\n        
Egypt
\n        
El Salvador
\n        
England
\n        
Equatorial Guinea
\n        
Eritrea
\n        
Estonia
\n        
Ethiopia
\n        
European Union
\n        
Falkland Islands
\n        
Faroe Islands
\n        
Fiji
\n        
Finland
\n        
France
\n        
French Guiana
\n        
French Polynesia
\n        
French Territories
\n        
Gabon
\n        
Gambia
\n        
Georgia
\n        
Germany
\n        
Ghana
\n        
Gibraltar
\n        
Greece
\n        
Greenland
\n        
Grenada
\n        
Guadeloupe
\n        
Guam
\n        
Guatemala
\n        
Guinea-Bissau
\n        
Guinea
\n        
Guyana
\n        
Haiti
\n        
Heard Island
\n        
Honduras
\n        
Hong Kong
\n        
Hungary
\n        
Iceland
\n        
India
\n        
Indian Ocean Territory
\n        
Indonesia
\n        
Iran
\n        
Iraq
\n        
Ireland
\n        
Israel
\n        
Italy
\n        
Jamaica
\n        
Japan
\n        
Jordan
\n        
Kazakhstan
\n        
Kenya
\n        
Kiribati
\n        
Kuwait
\n        
Kyrgyzstan
\n        
Laos
\n        
Latvia
\n        
Lebanon
\n        
Lesotho
\n        
Liberia
\n        
Libya
\n        
Liechtenstein
\n        
Lithuania
\n        
Luxembourg
\n        
Macau
\n        
Macedonia
\n        
Madagascar
\n        
Malawi
\n        
Malaysia
\n        
Maldives
\n        
Mali
\n        
Malta
\n        
Marshall Islands
\n        
Martinique
\n        
Mauritania
\n        
Mauritius
\n        
Mayotte
\n        
Mexico
\n        
Micronesia
\n        
Moldova
\n        
Monaco
\n        
Mongolia
\n        
Montenegro
\n        
Montserrat
\n        
Morocco
\n        
Mozambique
\n        
Namibia
\n        
Nauru
\n        
Nepal
\n        
Netherlands Antilles
\n        
Netherlands
\n        
New Caledonia
\n        
New Guinea
\n        
New Zealand
\n        
Nicaragua
\n        
Niger
\n        
Nigeria
\n        
Niue
\n        
Norfolk Island
\n        
North Korea
\n        
Northern Mariana Islands
\n        
Norway
\n        
Oman
\n        
Pakistan
\n        
Palau
\n        
Palestine
\n        
Panama
\n        
Paraguay
\n        
Peru
\n        
Philippines
\n        
Pitcairn Islands
\n        
Poland
\n        
Portugal
\n        
Puerto Rico
\n        
Qatar
\n        
Reunion
\n        
Romania
\n        
Russia
\n        
Rwanda
\n        
Saint Helena
\n        
Saint Kitts and Nevis
\n        
Saint Lucia
\n        
Saint Pierre
\n        
Saint Vincent
\n        
Samoa
\n        
San Marino
\n        
Sandwich Islands
\n        
Sao Tome
\n        
Saudi Arabia
\n        
Senegal
\n        
Serbia
\n        
Serbia
\n        
Seychelles
\n        
Sierra Leone
\n        
Singapore
\n        
Slovakia
\n        
Slovenia
\n        
Solomon Islands
\n        
Somalia
\n        
South Africa
\n        
South Korea
\n        
Spain
\n        
Sri Lanka
\n        
Sudan
\n        
Suriname
\n        
Svalbard
\n        
Swaziland
\n        
Sweden
\n        
Switzerland
\n        
Syria
\n        
Taiwan
\n        
Tajikistan
\n        
Tanzania
\n        
Thailand
\n        
Timorleste
\n        
Togo
\n        
Tokelau
\n        
Tonga
\n        
Trinidad
\n        
Tunisia
\n        
Turkey
\n        
Turkmenistan
\n        
Tuvalu
\n        
Uganda
\n        
Ukraine
\n        
United Arab Emirates
\n        
United States
\n        
Uruguay
\n        
Us Minor Islands
\n        
Us Virgin Islands
\n        
Uzbekistan
\n        
Vanuatu
\n        
Vatican City
\n        
Venezuela
\n        
Vietnam
\n        
Wallis and Futuna
\n        
Western Sahara
\n        
Yemen
\n        
Zambia
\n        
Zimbabwe
\n      
\n"
  },
  {
    "path": "server/partials/examples/single/preset-menu.html",
    "content": "
Angular
\n
CSS
\n
Graphic Design
\n
Ember
\n
HTML
\n
Information Architecture
\n
Javascript
\n
Mechanical Engineering
\n
Meteor
\n
NodeJS
\n
Plumbing
\n
Python
\n
Rails
\n
React
\n
Kitchen Repair
\n
Ruby
\n
UI Design
\n
User Experience
"
  },
  {
    "path": "server/partials/examples/single/skill-menu.html",
    "content": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"
  },
  {
    "path": "server/partials/examples/single/state-options.html",
    "content": "\n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        \n        "
  },
  {
    "path": "server/partials/examples/statistic.html",
    "content": "
\n  
\n    Top Label\n  
\n  
\n    4:05\n  
\n
\n\n
\n\n
\n  
\n    22\n  
\n  
\n    Bottom Label\n  
\n
\n\n
\n\n
\n  
\n    Eighty
\n    Two\n  
\n  
\n    Text\n  
\n
\n
\n  
\n     5\n  
\n  
\n    Labeled Icon\n  
\n
\n\n
\n\n
\n  
\n    
\n      \n      22\n    
\n    
\n      Horizontal Label\n    
\n  
\n  
\n    
\n      \n      51\n    
\n    
\n      Horizontal Label\n    
\n  
\n  
\n    
\n      \n      81\n    
\n    
\n      Horizontal Label\n    
\n  
\n
\n"
  },
  {
    "path": "server/partials/examples/step.html",
    "content": "
\n  \n    
\n      
Step
\n      
Description
\n    
\n  \n  \n    
\n      
Step
\n      
Description
\n    
\n  \n
\n\n
\n  \n    
\n      
Previous Step
\n      
Description
\n    
\n  \n  \n    
\n      
Active Step
\n      
Description
\n    
\n  \n  \n    
\n      
Disabled Step
\n      
Description
\n    
\n  \n
\n\n\n\n
\n  \n    \n    
\n      
Previous Step
\n      
Description
\n    
\n  \n  \n    \n    
\n      
Active Step
\n      
Description
\n    
\n  \n  \n    \n    
\n      
Disabled Step
\n      
Description
\n    
\n  \n
"
  },
  {
    "path": "server/partials/examples/tab.html",
    "content": "
\n  
\n    First\n    Second\n    Third\n  
\n  
\n    
\n      1A\n      1B\n      1C\n    
\n    
1A
\n    
1B
\n    
1C
\n  
\n  
\n    
\n      2A\n      2B\n      2C\n    
\n    
2A
\n    
2B
\n    
2C
\n  
\n  
\n    
\n      3A\n      3B\n      3C\n    
\n    
3A
\n    
3B
\n    
3C
\n  
\n
\n\n\n"
  },
  {
    "path": "server/partials/examples/table.html",
    "content": "\n  \n    \n  \n    \n      \n      \n      \n    \n    \n      \n      \n      \n    \n    \n      \n      \n      \n    \n    \n      \n      \n      \n    \n    \n      \n      \n      \n    \n  \n
\n      Files\n    
\n         folder\n      Comment10 hours ago
\n         folder2\n      Comment10 hours ago
\n         folder3\n      Comment10 hours ago
\n         package.json\n      Comment10 hours ago
\n         Gruntfile.js\n      Comment10 hours ago
\n\n\n  \n    \n    \n    \n  \n  \n    \n      \n      \n      \n    \n    \n      \n      \n      \n    \n  \n
Header 1Header 2
Definition1A1B
Definition2A2B
\n\n\n  \n    \n      \n      \n      \n      \n      \n    \n  \n  \n    \n      \n      \n      \n      \n      \n    \n    \n      \n      \n      \n      \n      \n    \n    \n      \n      \n      \n      \n      \n    \n  \n  \n    \n      \n      \n    \n  \n
NameRegistration DateE-mail addressPremium Plan
\n        
\n           \n        
\n      
\n        
\n           \n        
\n      
\n        
\n           \n        
\n      
\n        
\n           Primary\n        
\n        
\n          Button\n        
\n        
\n          Disabled\n        
\n      
\n\n\n  \n    \n      \n      \n      \n    \n  \n  \n    \n      \n      \n      \n    \n    \n      \n      \n      \n    \n    \n      \n      \n      \n    \n    \n      \n      \n      \n    \n    \n      \n      \n      \n    \n    \n      \n      \n      \n    \n    \n      \n      \n      \n    \n    \n      \n      \n      \n    \n    \n      \n      \n      \n    \n    \n      \n      \n      \n    \n  \n
NameStatusNotes
User 1ValueComment
User 1SelectedData
User 1ValueComment
User 2ValueData
User 1Value\n        \n        Warning\n      
User 3ValueData
User 1Value\n         Positive\n      
User 2\n        \n        Warning\n      Data
User 2 PositiveData
User 2ValueData
\n\n\n  \n    \n      \n      \n      \n    \n  \n  \n    \n      \n      \n      \n    \n    \n      \n      \n      \n    \n    \n      \n      \n      \n    \n  \n  \n    \n      \n      \n      \n    \n  \n
NameStatusNotes
User 1DataData
User 3DataData
User 2DeniedData
FooterFooter
"
  },
  {
    "path": "server/partials/examples/transition.html",
    "content": "
\n\n  
\n    \n    \n    \n    \n    \n  
\n\n  
Flash
\n  
Shake
\n  
Pulse
\n  
Tada
\n  
Bounce
\n  
Drop
\n  
Browse
\n  
Horizontal Flip
\n  
Vertical Flip
\n  
Fade
\n  
Fade Up
\n  
Fade Down
\n  
Scale
\n  
Slide Down
\n  
Slide Up
\n\n
\n\n"
  },
  {
    "path": "server/partials/fixed-menu.html.eco",
    "content": "<% currentCollection = @getCollection(\"documents\").findAll({type: $in: [@document.type]},[{title: 1}]).toJSON() %>\n<% pageCount         = @pageCount(currentCollection) %>\n<% pageNumber        = @getPage(currentCollection, @document.id) %>\n<% pageCollection    = @getPageCollection(currentCollection, @document.id) %>\n\n
\n  
\n    \n      \n    \n    <% if @document.title: %>\n      
\n        <%= @document.title %>\n      
\n    <% end %>\n    
\n      <% if 'development' in @getEnvironments(): %>\n      <% else: %>\n      
\n        \n      
\n      <% end %>\n      \n    
\n  
\n
\n"
  },
  {
    "path": "server/partials/footer.html",
    "content": "
\n  
\n    
\n      
\n        
Community
\n        
\n          Help Translate\n          Submit an Issue\n          Join our Chat\n          CLA\n        
\n      
\n      
\n        
Network
\n        
\n          GitHub Repo\n          User Forums\n          1.x Docs\n          0.x Docs\n        
\n      
\n      
\n        
Help Preserve This Project
\n        
 Support for the continued development of Semantic UI comes directly from the community.
\n        
\n          \n          \n          \n        
\n      
\n    
\n    
\n    \n    
\n      Free & Open Source (MIT)\n    
\n  
\n
\n"
  },
  {
    "path": "server/partials/header.html.eco",
    "content": "\n<% @tabs = {  definition: 'Definition', examples: 'Examples', usage: 'Usage', settings: 'Settings' } if @tabs == 'module' %>\n<% @tabs = {  overview: 'Overview', usage: 'Usage', examples: 'Examples', settings: 'Settings' } if @tabs == 'behavior' %>\n
 tab<% end %> segment\">\n  
\n    
\n\n      
\n        <%=@document.title %>\n        <% if @document.status?: %><%= @document.status %><% end %>\n        
\n          <% if 'development' in @getEnvironments(): %>\n          <% else: %>\n          \n          \n          \n          \n          <% end %>\n          <%=@document.description %>\n        
\n      
\n\n      \n\n      
\n        /server/documents/<%= @document.relativePath %>\">\n          \n        \n        <% if @document.type is 'UI Element' or @document.type is 'UI View' or @document.type is 'UI Collection' or @document.type is 'UI Module': %>\n        ] - Your Bug Name&body=**Steps to Reproduce**%0A1. Do something%0A2. Do something else.%0A3. Do one last thing.%0A%0A**Expected**%0AThe <%= @document.title %> should do this%0A%0A**Result**%0AThe <%= @document.title %> does not do this%0A%0A**Testcase**%0A(fork this to get started)%0Ahttp://jsfiddle.net/rduvhn8u/1/\">\n          \n        \n        <% end %>\n        \n          \n        \n      
\n      
\n        \n          \n        \n        
\n          \n          
\n            
Select Language
\n            
\n              \n              \n            
\n            <%- @partial('languages') %>\n          
\n        
\n      
\n\n      <% if @document.type is 'UI Module': %>\n\n      <% end %>\n      <% if @document.themes? && @document.themes.length > 1: %>\n      
 4: %>scrolling <% end %>dropdown theme basic button\" data-element=\"<%= @document.element %>\" data-type=\"<%= @document.elementType %>\">\n        <%= @document.themes.length %> Themes\n        
\n          <% for id, name of @document.themes: %>\n            
\" data-text=\"<%= name %> Theme\"><%= (name.charAt(0).toUpperCase() + name.slice(1)) %>
\n          <% end %>\n        
\n      
\n      <% end %>\n      <% if @document.type is 'UI Element' or @document.type is 'UI View' or @document.type is 'UI Collection' or @document.type is 'UI Module': %>\n      
\n        Download\n      
\n      
\n        
\n          
\n            
UI Framework
\n            
\n              
 Themable
\n              
 Build Tools
\n            
\n            
Choose
\n          
\n          
\n            
Standalone
\n            
\n              
Default Theme
\n              
Precompiled
\n            
\n            
Choose
\n          
\n        
\n        
\n          
\n            
Semantic UI
\n            \n              Download ZIP\n            \n            Getting Started\n            
Package Managers
\n            
\n              
\n                \n                
\n                  \n                
\n              
\n              
\n                \n                
\n                  \n                
\n              
\n            
\n          
\n        
\n        
\n          
\n            
Standalone <%=@document.title %>
\n            /archive/master.zip\">\n              Download ZIP\n            \n            /\">\n              View GitHub\n            \n            
Package Managers
\n            
\n              
\n                \n                
\n                  \">\n                
\n              
\n              
\n                \n                
\n                  \">\n                
\n              
\n              
\n                \n                
\n                  .git\">\n                
\n              
\n            
\n          
\n        
\n      
\n      <% end %>\n    
\n    
\n      <% unless 'development' in @getEnvironments(): %>\n      \n      <% end %>\n    
\n    <% if @tabs?: %>\n    <% index = 0 %>\n    <% tabCount = 0 %>\n    <% numbers = ['', '', 'two item', 'three item', 'four item', 'five item', 'six item'] %>\n    <% colors = ['red', 'teal', 'blue', 'purple', 'black', 'orange'] %>\n      <% for id, name of @tabs: %>\n        <% tabCount++ %>\n      <% end %>\n      
 stackable tabs menu\">\n        <% for id, name of @tabs: %>\n          item\" data-tab=\"<%= id %>\"><%= name %>\n          <% index++ %>\n        <% end %>\n      
\n    <% end %>\n  
\n
\n<% if 'development' in @getEnvironments(): %>\n<% else: %>\n  
\n  \n  \n<% end %>\n"
  },
  {
    "path": "server/partials/javascript.html.eco",
    "content": "<%- @partial('library-javascript') %>\n<%- @partial('ui-javascript') %>\n\n"
  },
  {
    "path": "server/partials/language-modal.html",
    "content": "
\n  \n  
The  Translation Needs Your Help
\n  
\n    
\n      \n    
\n    
\n      
This translation is only % complete!
\n      
\n        
\n      
\n      
We need your help to make Semantic available to  people who speak your language.
\n      
Our translation tools are easy to use and allow you to translate text without having to leave the site.\n      
\n    
\n  
\n  
\n    
No Thanks
\n    \n      \n      Help Translate\n    \n  
\n
\n\n
\n  \n  
Would you like to visit the mirror site?
\n  
\n    
\n      \n    
\n    
\n      
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.\n      
\n    
\n  
\n  
\n    
No Thanks
\n    \n      \n      Yes, take me to the mirror\n    \n  
\n
"
  },
  {
    "path": "server/partials/languages.html",
    "content": "
\n  
\n    English\n    English\n  
\n  
\n    dansk\n    Danish\n  
\n  
\n    Español\n    Spanish\n  
\n  
\n    简体中文\n    Chinese\n  
\n  
\n    中文 (臺灣)\n    Chinese (Taiwan)\n  
\n  
\n    پارسی\n    Persian\n  
\n  
\n    Français\n    French\n  
\n  
\n    ελληνικά\n    Greek\n  
\n  
\n    Русский\n    Russian\n  
\n  
\n    Deutsch\n    German\n  
\n  
\n    Italiano\n    Italian\n  
\n  
\n    Nederlands\n    Dutch\n  
\n  
\n    Português(BR)\n    Portuguese\n  
\n  
\n    Indonesian\n    Indonesian\n  
\n  
\n    Lietuvių\n    Lithuanian\n  
\n  
\n    Türkçe\n    Turkish\n  
\n  
\n    한국어\n    Korean\n  
\n  
\n    العربية\n    Arabic\n  
\n  
\n    Magyar\n    Hungarian\n  
\n  
\n    tiếng Việt\n    Vietnamese\n  
\n  
\n    svenska\n    Swedish\n  
\n  
\n    polski\n    Polish\n  
\n  
\n    日本語\n    Japanese\n  
\n  
\n    românește\n    Romanian\n  
\n
\n"
  },
  {
    "path": "server/partials/less.html.eco",
    "content": "\n<% if 'development' in @getEnvironments(): %>\n\n<% else: %>\n\n<% end %>\n"
  },
  {
    "path": "server/partials/library-javascript.html.eco",
    "content": "<% if 'development' in @getEnvironments(): %>\n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n<% else: %>\n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n<% end %>\n\n"
  },
  {
    "path": "server/partials/meta.html.eco",
    "content": "\n\n\n\n\n\n\n\n<%- @getBlock('meta').toHTML() %>\n<%= @getPreparedTitle() %>\n\n\" />\n\" />"
  },
  {
    "path": "server/partials/sidebar.html.eco",
    "content": "
\n  <%- @partial('site-menu') %>\n
\n\n
\n  \n  Menu\n
"
  },
  {
    "path": "server/partials/site-ads.html.eco",
    "content": "<% if ('development' in @getEnvironments()): %>\n<% else: %>\n  \n<% end %>\n"
  },
  {
    "path": "server/partials/site-menu.html.eco",
    "content": "<% introduction      = @getCollection(\"documents\").findAll({type: $in: ['Introduction']},[{order: 1}]).toJSON() %>\n<% usage             = @getCollection(\"documents\").findAll({type: $in: ['Usage']},[{order: 1}]).toJSON() %>\n<% uiGlobals         = @getCollection(\"documents\").findAll({type: $in: ['UI Global']},[{title: 1}]).toJSON() %>\n<% uiElements        = @getCollection(\"documents\").findAll({type: $in: ['UI Element']},[{title: 1}]).toJSON() %>\n<% uiCollections     = @getCollection(\"documents\").findAll({type: $in: ['UI Collection']},[{title: 1}]).toJSON() %>\n<% uiViews           = @getCollection(\"documents\").findAll({type: $in: ['UI View']},[{title: 1}]).toJSON() %>\n<% uiModules         = @getCollection(\"documents\").findAll({type: $in: ['UI Module']},[{title: 1}]).toJSON() %>\n<% uiBehavior        = @getCollection(\"documents\").findAll({type: $in: ['UI Behavior']},[{title: 1}]).toJSON() %>\n\n
\n  \n    \n  \n  UI Docs\n
\n\n  Getting Started\n\n\n  New in 2.4\n\n
\n  
header\">Introduction
\n  
\n    <% for element in introduction: %>\n      item\" href=\"<%= element.url %>\">\n        <%= element.title %>\n      \n    <% end %>\n  
\n
\n
\n  
header\">Usage
\n  
\n    <% for element in usage: %>\n      item\" href=\"<%= element.url %>\">\n        <%= element.title %>\n      \n    <% end %>\n  
\n
\n
\n  
 header\">Globals
\n  
\n    <% for element in uiGlobals: %>\n      item\" href=\"<%= element.url %>\">\n        <%= element.title %>\n        <% if element.status?: %>\n        \n        <% end %>\n      \n    <% end %>\n  
\n
\n
\n  
 header\">Elements
\n  
\n    <% for element in uiElements: %>\n      item\" href=\"<%= element.url %>\">\n        <%= element.title %>\n        <% if element.status?: %>\n        \n        <% end %>\n      \n    <% end %>\n  
\n
\n
\n  
 header\">Collections
\n  
\n    <% for element in uiCollections: %>\n      item\" href=\"<%= element.url %>\">\n        <%= element.title %>\n        <% if element.status?: %>\n        \n        <% end %>\n      \n    <% end %>\n  
\n
\n
\n  
 header\">Views
\n  
\n    <% for element in uiViews: %>\n      item\" href=\"<%= element.url %>\">\n        <%= element.title %>\n        <% if element.status?: %>\n        \n        <% end %>\n      \n    <% end %>\n  
\n
\n
\n  
 header\">Modules
\n  
\n    <% for element in uiModules: %>\n      item\" href=\"<%= element.url %>\">\n        <%= element.title %>\n        <% if element.status?: %>\n        \n        <% end %>\n      \n  <% end %>\n  
\n
\n
\n  
 header\">Behaviors
\n  
\n    <% for element in uiBehavior: %>\n      item\" href=\"<%= element.url %>\">\n        <%= element.title %>\n        <% if element.status?: %>\n        \n        <% end %>\n      \n    <% end %>\n  
\n
\n"
  },
  {
    "path": "server/partials/tab-header.html.eco",
    "content": "
\n  
\n    
\n      
\n        <%=@document.title %>\n        <% if @document.status?: %><%= @document.status %><% end %>\n      
\n      
<%=@document.description %>
\n      <% if @document.type is 'UI Element' or @document.type is 'UI View' or @document.type is 'UI Collection' or @document.type is 'UI Module': %>\n      
\n        Definition\n        \n      
\n      <% end %>\n    
\n    
\n      
\n    
\n  
\n
\n"
  },
  {
    "path": "server/partials/tracking.html.eco",
    "content": "<% if ('development' in @getEnvironments()): %>\n<% else: %>\n\n<% end %>"
  },
  {
    "path": "server/partials/transifex.html.eco",
    "content": "<% if ('development' in @getEnvironments()) or (@document.title? and @document.title is 'Page Not Found'): %>\n<% else: %>\n\n\n<% end %>\n"
  },
  {
    "path": "server/partials/ui-css.html.eco",
    "content": "<% if 'development' in @getEnvironments(): %>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<% else: %>\n\n<% end %>\n"
  },
  {
    "path": "server/partials/ui-javascript.html.eco",
    "content": "<% if 'development' in @getEnvironments(): %>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<% else: %>\n\n\n\n<% end %>\n"
  },
  {
    "path": "server/raw/.htaccess",
    "content": "# Apache configuration file\n# httpd.apache.org/docs/2.2/mod/quickreference.html\n\n# Note .htaccess files are an overhead, this logic should be in your Apache\n# config if possible: httpd.apache.org/docs/2.2/howto/htaccess.html\n\n# Techniques in here adapted from all over, including:\n#   Kroc Camen: camendesign.com/.htaccess\n#   perishablepress.com/press/2006/01/10/stupid-htaccess-tricks/\n#   Sample .htaccess file of CMS MODx: modxcms.com\n\n\n# ----------------------------------------------------------------------\n# Better website experience for IE users\n# ----------------------------------------------------------------------\n\n# Force the latest IE version, in various cases when it may fall back to IE7 mode\n#  github.com/rails/rails/commit/123eb25#commitcomment-118920\n# Use ChromeFrame if it's installed for a better experience for the poor IE folk\n\n\n  Header set X-UA-Compatible \"IE=Edge,chrome=1\"\n  # mod_headers can't match by content-type, but we don't want to send this header on *everything*...\n  \n    Header unset X-UA-Compatible\n  \n\n\n\n# ----------------------------------------------------------------------\n# Cross-domain AJAX requests\n# ----------------------------------------------------------------------\n\n# Serve cross-domain Ajax requests, disabled by default.\n# enable-cors.org\n# code.google.com/p/html5security/wiki/CrossOriginRequestSecurity\n\n#  \n#    Header set Access-Control-Allow-Origin \"*\"\n#  \n\n\n# ----------------------------------------------------------------------\n# CORS-enabled images (@crossorigin)\n# ----------------------------------------------------------------------\n\n# Send CORS headers if browsers request them; enabled by default for images.\n# developer.mozilla.org/en/CORS_Enabled_Image\n# blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html\n# hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/\n# wiki.mozilla.org/Security/Reviews/crossoriginAttribute\n\n\n  \n    # mod_headers, y u no match by Content-Type?!\n    \n      SetEnvIf Origin \":\" IS_CORS\n      Header set Access-Control-Allow-Origin \"*\" env=IS_CORS\n    \n  \n\n\n\n# ----------------------------------------------------------------------\n# Webfont access\n# ----------------------------------------------------------------------\n\n# Allow access from all domains for webfonts.\n# Alternatively you could only whitelist your\n# subdomains like \"subdomain.example.com\".\n\n\n  \n    Header set Access-Control-Allow-Origin \"*\"\n  \n\n\n\n# ----------------------------------------------------------------------\n# Proper MIME type for all files\n# ----------------------------------------------------------------------\n\n# JavaScript\n#   Normalize to standard type (it's sniffed in IE anyways)\n#   tools.ietf.org/html/rfc4329#section-7.2\nAddType application/javascript         js jsonp\nAddType application/json               json\n\n# Audio\nAddType audio/ogg                      oga ogg\nAddType audio/mp4                      m4a f4a f4b\n\n# Video\nAddType video/ogg                      ogv\nAddType video/mp4                      mp4 m4v f4v f4p\nAddType video/webm                     webm\nAddType video/x-flv                    flv\n\n# SVG\n#   Required for svg webfonts on iPad\n#   twitter.com/FontSquirrel/status/14855840545\nAddType     image/svg+xml              svg svgz\nAddEncoding gzip                       svgz\n\n# Webfonts\nAddType application/vnd.ms-fontobject  eot\nAddType application/x-font-ttf         ttf ttc\nAddType font/opentype                  otf\nAddType application/x-font-woff        woff\n\n# Assorted types\nAddType image/x-icon                        ico\nAddType image/webp                          webp\nAddType text/cache-manifest                 appcache manifest\nAddType text/x-component                    htc\nAddType application/xml                     rss atom xml rdf\nAddType application/x-chrome-extension      crx\nAddType application/x-opera-extension       oex\nAddType application/x-xpinstall             xpi\nAddType application/octet-stream            safariextz\nAddType application/x-web-app-manifest+json webapp\nAddType text/x-vcard                        vcf\nAddType application/x-shockwave-flash       swf\nAddType text/vtt                            vtt\n\n\n# ----------------------------------------------------------------------\n# Allow concatenation from within specific js and css files\n# ----------------------------------------------------------------------\n\n# e.g. Inside of script.combined.js you could have\n#   \n#   \n# and they would be included into this single file.\n\n# This is not in use in the boilerplate as it stands. You may\n# choose to use this technique if you do not have a build process.\n\n#\n#  Options +Includes\n#  AddOutputFilterByType INCLUDES application/javascript application/json\n#  SetOutputFilter INCLUDES\n#\n\n#\n#  Options +Includes\n#  AddOutputFilterByType INCLUDES text/css\n#  SetOutputFilter INCLUDES\n#\n\n\n# ----------------------------------------------------------------------\n# Gzip compression\n# ----------------------------------------------------------------------\n\n\n\n  # Force deflate for mangled headers developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping/\n  \n    \n      SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\\s*,?\\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding\n      RequestHeader append Accept-Encoding \"gzip,deflate\" env=HAVE_Accept-Encoding\n    \n  \n\n  # Compress all output labeled with one of the following MIME-types\n  \n    AddOutputFilterByType DEFLATE application/atom+xml \\\n                                  application/javascript \\\n                                  application/json \\\n                                  application/rss+xml \\\n                                  application/vnd.ms-fontobject \\\n                                  application/x-font-ttf \\\n                                  application/xhtml+xml \\\n                                  application/xml \\\n                                  font/opentype \\\n                                  image/svg+xml \\\n                                  image/x-icon \\\n                                  text/css \\\n                                  text/html \\\n                                  text/plain \\\n                                  text/x-component \\\n                                  text/xml\n  \n\n\n\n\n# ----------------------------------------------------------------------\n# Expires headers (for better cache control)\n# ----------------------------------------------------------------------\n\n# These are pretty far-future expires headers.\n# They assume you control versioning with filename-based cache busting\n# Additionally, consider that outdated proxies may miscache\n#   www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/\n\n# If you don't use filenames to version, lower the CSS and JS to something like\n# \"access plus 1 week\".\n\n\n  ExpiresActive on\n\n# Perhaps better to whitelist expires rules? Perhaps.\n  ExpiresDefault                          \"access plus 1 month\"\n\n# cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)\n  ExpiresByType text/cache-manifest       \"access plus 0 seconds\"\n\n# Your document html\n  ExpiresByType text/html                 \"access plus 0 seconds\"\n\n# Data\n  ExpiresByType text/xml                  \"access plus 0 seconds\"\n  ExpiresByType application/xml           \"access plus 0 seconds\"\n  ExpiresByType application/json          \"access plus 0 seconds\"\n\n# Feed\n  ExpiresByType application/rss+xml       \"access plus 1 hour\"\n  ExpiresByType application/atom+xml      \"access plus 1 hour\"\n\n# Favicon (cannot be renamed)\n  ExpiresByType image/x-icon              \"access plus 1 week\"\n\n# Media: images, video, audio\n  ExpiresByType image/gif                 \"access plus 1 month\"\n  ExpiresByType image/png                 \"access plus 1 month\"\n  ExpiresByType image/jpeg                \"access plus 1 month\"\n  ExpiresByType video/ogg                 \"access plus 1 month\"\n  ExpiresByType audio/ogg                 \"access plus 1 month\"\n  ExpiresByType video/mp4                 \"access plus 1 month\"\n  ExpiresByType video/webm                \"access plus 1 month\"\n\n# HTC files  (css3pie)\n  ExpiresByType text/x-component          \"access plus 1 month\"\n\n# Webfonts\n  ExpiresByType application/x-font-ttf    \"access plus 1 month\"\n  ExpiresByType font/opentype             \"access plus 1 month\"\n  ExpiresByType application/x-font-woff   \"access plus 1 month\"\n  ExpiresByType image/svg+xml             \"access plus 1 month\"\n  ExpiresByType application/vnd.ms-fontobject \"access plus 1 month\"\n\n# CSS and JavaScript\n  ExpiresByType text/css                  \"access plus 1 year\"\n  ExpiresByType application/javascript    \"access plus 1 year\"\n\n\n\n\n# ----------------------------------------------------------------------\n# Prevent mobile network providers from modifying your site\n# ----------------------------------------------------------------------\n\n# The following header prevents modification of your code over 3G on some\n# European providers.\n# This is the official 'bypass' suggested by O2 in the UK.\n\n# \n# Header set Cache-Control \"no-transform\"\n# \n\n\n# ----------------------------------------------------------------------\n# ETag removal\n# ----------------------------------------------------------------------\n\n# FileETag None is not enough for every server.\n\n  Header unset ETag\n\n\n# Since we're sending far-future expires, we don't need ETags for\n# static content.\n#   developer.yahoo.com/performance/rules.html#etags\nFileETag None\n\n\n# ----------------------------------------------------------------------\n# Stop screen flicker in IE on CSS rollovers\n# ----------------------------------------------------------------------\n\n# The following directives stop screen flicker in IE on CSS rollovers - in\n# combination with the \"ExpiresByType\" rules for images (see above).\n\n# BrowserMatch \"MSIE\" brokenvary=1\n# BrowserMatch \"Mozilla/4.[0-9]{2}\" brokenvary=1\n# BrowserMatch \"Opera\" !brokenvary\n# SetEnvIf brokenvary 1 force-no-vary\n\n\n# ----------------------------------------------------------------------\n# Set Keep-Alive Header\n# ----------------------------------------------------------------------\n\n# Keep-Alive allows the server to send multiple requests through one\n# TCP-connection. Be aware of possible disadvantages of this setting. Turn on\n# if you serve a lot of static content.\n\n# \n#   Header set Connection Keep-Alive\n# \n\n\n# ----------------------------------------------------------------------\n# Cookie setting from iframes\n# ----------------------------------------------------------------------\n\n# Allow cookies to be set from iframes (for IE only)\n# If needed, specify a path or regex in the Location directive.\n\n# \n#   Header set P3P \"policyref=\\\"/w3c/p3p.xml\\\", CP=\\\"IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT\\\"\"\n# \n\n\n# ----------------------------------------------------------------------\n# Start rewrite engine\n# ----------------------------------------------------------------------\n\n# Turning on the rewrite engine is necessary for the following rules and\n# features. FollowSymLinks must be enabled for this to work.\n\n# Some cloud hosting services require RewriteBase to be set: goo.gl/HOcPN\n# If using the h5bp in a subdirectory, use `RewriteBase /foo` instead where\n# 'foo' is your directory.\n\n# If your web host doesn't allow the FollowSymlinks option, you may need to\n# comment it out and use `Options +SymLinksOfOwnerMatch`, but be aware of the\n# performance impact: http://goo.gl/Mluzd\n\n\n  Options +FollowSymlinks\n# Options +SymLinksIfOwnerMatch\n  RewriteEngine On\n# RewriteBase /\n\n\n\n# ----------------------------------------------------------------------\n# Suppress or force the \"www.\" at the beginning of URLs\n# ----------------------------------------------------------------------\n\n# The same content should never be available under two different URLs -\n# especially not with and without \"www.\" at the beginning, since this can cause\n# SEO problems (duplicate content). That's why you should choose one of the\n# alternatives and redirect the other one.\n\n# By default option 1 (no \"www.\") is activated.\n# no-www.org/faq.php?q=class_b\n\n# If you'd prefer to use option 2, just comment out all option 1 lines\n# and uncomment option 2.\n\n# IMPORTANT: NEVER USE BOTH RULES AT THE SAME TIME!\n\n# ----------------------------------------------------------------------\n\n# Option 1:\n# Rewrite \"www.example.com -> example.com\".\n\n\n  RewriteCond %{HTTPS} !=on\n  RewriteCond %{HTTP_HOST} ^www\\.(.+)$ [NC]\n  RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L]\n\n\n# ----------------------------------------------------------------------\n\n# Option 2:\n# Rewrite \"example.com -> www.example.com\".\n# Be aware that the following rule might not be a good idea if you use \"real\"\n# subdomains for certain parts of your website.\n\n# \n#   RewriteCond %{HTTPS} !=on\n#   RewriteCond %{HTTP_HOST} !^www\\..+$ [NC]\n#   RewriteRule ^ http://www.%{HTTP_HOST}%{REQUEST_URI} [R=301,L]\n# \n\n\n# ----------------------------------------------------------------------\n# Built-in filename-based cache busting\n# ----------------------------------------------------------------------\n\n# If you're not using the build script to manage your filename version revving,\n# you might want to consider enabling this, which will route requests for\n# /css/style.20110203.css to /css/style.css\n\n# To understand why this is important and a better idea than all.css?v1231,\n# read: github.com/h5bp/html5-boilerplate/wiki/cachebusting\n\n# \n#   RewriteCond %{REQUEST_FILENAME} !-f\n#   RewriteCond %{REQUEST_FILENAME} !-d\n#   RewriteRule ^(.+)\\.(\\d+)\\.(js|css|png|jpg|gif)$ $1.$3 [L]\n# \n\n\n# ----------------------------------------------------------------------\n# Prevent SSL cert warnings\n# ----------------------------------------------------------------------\n\n# Rewrite secure requests properly to prevent SSL cert warnings, e.g. prevent\n# https://www.example.com when your cert only allows https://secure.example.com\n\n# \n#   RewriteCond %{SERVER_PORT} !^443\n#   RewriteRule ^ https://example-domain-please-change-me.com%{REQUEST_URI} [R=301,L]\n# \n\n\n# ----------------------------------------------------------------------\n# Prevent 404 errors for non-existing redirected folders\n# ----------------------------------------------------------------------\n\n# without -MultiViews, Apache will give a 404 for a rewrite if a folder of the\n# same name does not exist.\n# webmasterworld.com/apache/3808792.htm\n\nOptions -MultiViews\n\n\n# ----------------------------------------------------------------------\n# Custom 404 page\n# ----------------------------------------------------------------------\n\n# You can add custom pages to handle 500 or 403 pretty easily, if you like.\n# If you are hosting your site in subdirectory, adjust this accordingly\n#    e.g. ErrorDocument 404 /subdir/404.html\nErrorDocument 404 /404.html\n\n\n# ----------------------------------------------------------------------\n# UTF-8 encoding\n# ----------------------------------------------------------------------\n\n# Use UTF-8 encoding for anything served text/plain or text/html\nAddDefaultCharset utf-8\n\n# Force UTF-8 for a number of file formats\nAddCharset utf-8 .atom .css .js .json .rss .vtt .xml\n\n\n# ----------------------------------------------------------------------\n# A little more security\n# ----------------------------------------------------------------------\n\n# To avoid displaying the exact version number of Apache being used, add the\n# following to httpd.conf (it will not work in .htaccess):\n# ServerTokens Prod\n\n# \"-Indexes\" will have Apache block users from browsing folders without a\n# default document Usually you should leave this activated, because you\n# shouldn't allow everybody to surf through every folder on your server (which\n# includes rather private places like CMS system folders).\n\n  Options -Indexes\n\n\n# Block access to \"hidden\" directories or files whose names begin with a\n# period. This includes directories used by version control systems such as\n# Subversion or Git.\n\n  RewriteCond %{SCRIPT_FILENAME} -d [OR]\n  RewriteCond %{SCRIPT_FILENAME} -f\n  RewriteRule \"(^|/)\\.\" - [F]\n\n\n# Block access to backup and source files. These files may be left by some\n# text/html editors and pose a great security danger, when anyone can access\n# them.\n\n  Order allow,deny\n  Deny from all\n  Satisfy All\n\n\n# If your server is not already configured as such, the following directive\n# should be uncommented in order to set PHP's register_globals option to OFF.\n# This closes a major security hole that is abused by most XSS (cross-site\n# scripting) attacks. For more information: http://php.net/register_globals\n#\n# IF REGISTER_GLOBALS DIRECTIVE CAUSES 500 INTERNAL SERVER ERRORS:\n#\n# Your server does not allow PHP directives to be set via .htaccess. In that\n# case you must make this change in your php.ini file instead. If you are\n# using a commercial web host, contact the administrators for assistance in\n# doing this. Not all servers allow local php.ini files, and they should\n# include all PHP configurations (not just this one), or you will effectively\n# reset everything to PHP defaults. Consult www.php.net for more detailed\n# information about setting PHP directives.\n\n# php_flag register_globals Off\n\n# Rename session cookie to something else, than PHPSESSID\n# php_value session.name sid\n\n# Disable magic quotes (This feature has been DEPRECATED as of PHP 5.3.0 and REMOVED as of PHP 5.4.0.)\n# php_flag magic_quotes_gpc Off\n\n# Do not show you are using PHP\n# Note: Move this line to php.ini since it won't work in .htaccess\n# php_flag expose_php Off\n\n# Level of log detail - log all errors\n# php_value error_reporting -1\n\n# Write errors to log file\n# php_flag log_errors On\n\n# Do not display errors in browser (production - Off, development - On)\n# php_flag display_errors Off\n\n# Do not display startup errors (production - Off, development - On)\n# php_flag display_startup_errors Off\n\n# Format errors in plain text\n# Note: Leave this setting 'On' for xdebug's var_dump() output\n# php_flag html_errors Off\n\n# Show multiple occurrence of error\n# php_flag ignore_repeated_errors Off\n\n# Show same errors from different sources\n# php_flag ignore_repeated_source Off\n\n# Size limit for error messages\n# php_value log_errors_max_len 1024\n\n# Don't precede error with string (doesn't accept empty string, use whitespace if you need)\n# php_value error_prepend_string \" \"\n\n# Don't prepend to error (doesn't accept empty string, use whitespace if you need)\n# php_value error_append_string \" \"\n\n# Increase cookie security\n\n  php_value session.cookie_httponly true\n\n"
  },
  {
    "path": "server/raw/CNAME",
    "content": "semantic-ui.com"
  },
  {
    "path": "server/raw/api.json",
    "content": "{\n  \"success\": true\n}"
  },
  {
    "path": "server/raw/crossdomain.xml",
    "content": "\n\n\n    \n\n    \n    \n\n    \n    \n\n"
  },
  {
    "path": "server/raw/draft/carousel.js",
    "content": "/*  ******************************\n  Semantic Module: Carousel\n  Author: Jack Lukic\n  Notes: First Commit May 28, 2013\n\n  A carousel alternates between\n  several pieces of content in sequence.\n\n******************************  */\n\n;(function ( $, window, document, undefined ) {\n\n$.fn.carousel = function(parameters) {\n  var\n    $allModules     = $(this),\n\n    settings        = $.extend(true, {}, $.fn.carousel.settings, parameters),\n\n    eventNamespace  = '.' + settings.namespace,\n    moduleNamespace = 'module-' + settings.namespace,\n    moduleSelector  = $allModules.selector || '',\n\n    time            = new Date().getTime(),\n    performance     = [],\n\n    query           = arguments[0],\n    methodInvoked   = (typeof query == 'string'),\n    queryArguments  = [].slice.call(arguments, 1),\n    returnedValue\n  ;\n\n  $allModules\n    .each(function() {\n      var\n        $module     = $(this),\n        $arrows     = $(settings.selector.arrows),\n        $leftArrow  = $(settings.selector.leftArrow),\n        $rightArrow = $(settings.selector.rightArrow),\n        $content    = $(settings.selector.content),\n        $navigation = $(settings.selector.navigation),\n        $navItem    = $(settings.selector.navItem),\n\n        selector    = $module.selector || '',\n        element     = this,\n        instance    = $module.data('module-' + settings.namespace),\n\n        className   = settings.className,\n        namespace   = settings.namespace,\n        errors      = settings.errors,\n        module\n      ;\n\n      module      = {\n\n        initialize: function() {\n          module.openingAnimation();\n          module.marquee.autoAdvance();\n          $leftArrow\n            .on('click', module.marquee.left)\n          ;\n          $rightArrow\n            .on('click', module.marquee.right)\n          ;\n          $navItem\n            .on('click', module.marquee.change)\n          ;\n        },\n\n        destroy: function() {\n          module.verbose('Destroying previous module for', $module);\n          $module\n            .off(eventNamespace)\n          ;\n        },\n\n        left: function() {\n          var\n            $activeContent = $content.filter('.' + className.active),\n            currentIndex   = $content.index($activeContent),\n            imageCount     = $content.size(),\n            newIndex       = (currentIndex - 1 != -1)\n              ? (currentIndex - 1)\n              : (imageCount - 1)\n          ;\n          $navItem\n            .eq(newIndex)\n              .trigger('click')\n          ;\n        },\n\n        right: function() {\n          var\n            $activeContent = $content.filter('.' + className.active),\n            currentIndex   = $content.index($activeContent),\n            imageCount     = $content.size(),\n            newIndex       = (currentIndex + 1 != imageCount)\n              ? (currentIndex + 1)\n              : 0\n          ;\n          $navItem\n            .eq(newIndex)\n              .trigger('click')\n          ;\n        },\n\n        change: function() {\n          var\n            $selected      = $(this),\n            selectedIndex  = $navItem.index($selected),\n            $selectedImage = $content.eq(selectedIndex)\n          ;\n          module.marquee.autoAdvance();\n          $selected\n            .addClass('active')\n            .siblings()\n              .removeClass('active')\n          ;\n          $selectedImage\n            .addClass('active animated fadeIn')\n            .siblings('.' + className.active)\n              .removeClass('animated fadeIn scaleIn')\n              .animate({\n                opacity: 0\n              }, 500, function(){\n                $(this)\n                  .removeClass('active')\n                  .removeAttr('style')\n                ;\n              })\n          ;\n        },\n\n        autoAdvance: function() {\n          clearInterval(module.timer);\n          module.timer = setInterval(module.marquee.right, settings.duration);\n        },\n\n        setting: function(name, value) {\n          if(value !== undefined) {\n            if( $.isPlainObject(name) ) {\n              module.verbose('Modifying settings object', name, value);\n              $.extend(true, settings, name);\n            }\n            else {\n              module.verbose('Modifying setting', name, value);\n              settings[name] = value;\n            }\n          }\n          else {\n            return settings[name];\n          }\n        },\n        internal: function(name, value) {\n          if(value !== undefined) {\n            if( $.isPlainObject(name) ) {\n              module.verbose('Modifying internal property', name, value);\n              $.extend(true, module, name);\n            }\n            else {\n              module.verbose('Changing internal method to', value);\n              module[name] = value;\n            }\n          }\n          else {\n            return module[name];\n          }\n        },\n        debug: function() {\n          if(settings.debug) {\n            if(settings.performance) {\n              module.performance.log(arguments);\n            }\n            else {\n              module.debug = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');\n              module.debug.apply(console, arguments);\n            }\n          }\n        },\n        verbose: function() {\n          if(settings.verbose && settings.debug) {\n            if(settings.performance) {\n              module.performance.log(arguments);\n            }\n            else {\n              module.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');\n              module.verbose.apply(console, arguments);\n            }\n          }\n        },\n        error: function() {\n          module.error = Function.prototype.bind.call(console.error, console, settings.moduleName + ':');\n          module.error.apply(console, arguments);\n        },\n        performance: {\n          log: function(message) {\n            var\n              currentTime,\n              executionTime,\n              previousTime\n            ;\n            if(settings.performance) {\n              currentTime   = new Date().getTime();\n              previousTime  = time || currentTime;\n              executionTime = currentTime - previousTime;\n              time          = currentTime;\n              performance.push({\n                'Element'        : element,\n                'Name'           : message[0],\n                'Arguments'      : message[1] || 'None',\n                'Execution Time' : executionTime\n              });\n              clearTimeout(module.performance.timer);\n              module.performance.timer = setTimeout(module.performance.display, 100);\n            }\n          },\n          display: function() {\n            var\n              title              = settings.moduleName,\n              caption            = settings.moduleName + ': ' + moduleSelector + '(' + $allModules.size() + ' elements)',\n              totalExecutionTime = 0\n            ;\n            if(moduleSelector) {\n              title += ' Performance (' + moduleSelector + ')';\n            }\n            if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {\n              console.groupCollapsed(title);\n              if(console.table) {\n                $.each(performance, function(index, data) {\n                  totalExecutionTime += data['Execution Time'];\n                });\n                console.table(performance);\n              }\n              else {\n                $.each(performance, function(index, data) {\n                  totalExecutionTime += data['Execution Time'];\n                  console.log(data['Name'] + ': ' + data['Execution Time']+'ms');\n                });\n              }\n              console.log('Total Execution Time:', totalExecutionTime +'ms');\n              console.groupEnd();\n              performance = [];\n              time        = false;\n            }\n          }\n        },\n        invoke: function(query, passedArguments, context) {\n          var\n            maxDepth,\n            found\n          ;\n          passedArguments = passedArguments || queryArguments;\n          context         = element         || context;\n          if(typeof query == 'string' && instance !== undefined) {\n            query    = query.split(/[\\. ]/);\n            maxDepth = query.length - 1;\n            $.each(query, function(depth, value) {\n              if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) {\n                instance = instance[value];\n                return true;\n              }\n              else if( instance[value] !== undefined ) {\n                found = instance[value];\n                return true;\n              }\n              module.error(errors.method);\n              return false;\n            });\n          }\n          if ( $.isFunction( found ) ) {\n            return found.apply(context, passedArguments);\n          }\n          return found || false;\n        }\n      };\n\n      if(methodInvoked) {\n        if(instance === undefined) {\n          module.initialize();\n        }\n        module.invoke(query);\n      }\n      else {\n        if(instance !== undefined) {\n          module.destroy();\n        }\n        module.initialize();\n      }\n    })\n  ;\n  return (returnedValue !== undefined)\n    ? returnedValue\n    : this\n  ;\n};\n\n$.fn.carousel.settings = {\n\n  name  : 'Carousel',\n  namespace   : 'carousel',\n\n  verbose     : true,\n  debug       : true,\n  performance : true,\n\n  // delegated event context\n  duration: 5000,\n\n  errors     : {\n    method   : 'The method you called is not defined.'\n  },\n\n  selector : {\n    arrows     : '.arrow',\n    leftArrow  : '.left.arrow',\n    rightArrow : '.right.arrow',\n    content    : '.content',\n    navigation : '.navigation',\n    navItem    : '.navigation .icon'\n  },\n\n  className : {\n    active : 'active'\n  }\n\n};\n\n})( jQuery, window , document );"
  },
  {
    "path": "server/raw/draft/carousel.less",
    "content": "/*\n * # Semantic Carousel\n * http://github.com/quirkyinc/semantic\n *\n *\n * Copyright 2013 Contributors\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n * Released: June 03, 2013\n */\n\n\n/*******************************\n            Carousel\n*******************************/\n\n.ui.carousel {\n  position: relative;\n  overflow: hidden;\n}\n.ui.carousel .arrow {\n  position: absolute;\n  font-size: 1.5em;\n  top: 50%;\n  left: 0%;\n  margin-top: -0.5em;\n  z-index: 10;\n}\n.ui.carousel .right.arrow {\n  left: auto;\n  right: 0%;\n}\n\n.ui.carousel .slides {\n  position: relative;\n  width: 200%;\n  width: 9999px;\n  overflow: hidden;\n  font-size: 0em;\n}\n.ui.carousel .slides .slide {\n  display: inline-block;\n  height: 100%;\n  font-size: 1rem;\n}\n.ui.carousel .slides .slide > img {\n  display: block;\n  width: 100%;\n}\n\n\n/*--------------------\n     Loading State\n---------------------*/\n\n/* On Form */\n.ui.carousel.loading {\n  position: relative;\n}\n.ui.carousel.loading:after {\n  position: absolute;\n  top: 0%;\n  left: 0%;\n  content: '';\n\n  width: 100%;\n  height: 100%;\n  background: rgba(255, 255, 255, 0.8) url(../images/loader-large.gif) no-repeat 50% 50%;\n  visibility: visible;\n}"
  },
  {
    "path": "server/raw/draft/extra.transitions.less",
    "content": "/*******************************\n  Semantic Module: Transition\n  Author: Jack Lukic\n  Notes: First Commit March 25, 2013\n\n  CSS animation definitions for\n  transition module\n\n*******************************/\n\n/*\n  Some transitions adapted from Animate CSS\n  https://github.com/daneden/animate.css\n*/\n\n\n.ui.transition {\n  -webkit-backface-visibility: hidden;\n  -moz-backface-visibility: hidden;\n  -ms-backface-visibility: hidden;\n  -o-backface-visibility: hidden;\n  backface-visibility: hidden;\n\n  -webkit-animation-iteration-count: 1;\n  -moz-animation-iteration-count: 1;\n  -ms-animation-iteration-count: 1;\n  -o-animation-iteration-count: 1;\n  animation-iteration-count: 1;\n\n  -webkit-animation-duration: 1s;\n  -moz-animation-duration: 1s;\n  -ms-animation-duration: 1s;\n  -o-animation-duration: 1s;\n  animation-duration: 1s;\n\n  animation-timing-function: ease;\n  -webkit-animation-timing-function: ease;\n\n  -webkit-animation-fill-mode: both;\n  -moz-animation-fill-mode: both;\n  -ms-animation-fill-mode: both;\n  -o-animation-fill-mode: both;\n  animation-fill-mode: both;\n\n  -webkit-transform: translateZ(0);\n  -moz-transform: translateZ(0);\n  -ms-transform: translateZ(0);\n  -o-transform: translateZ(0);\n  transform: translateZ(0);\n}\n\n/*******************************\n       States\n*******************************/\n\n/* Loading */\n.ui.loading.transition {\n  position: absolute;\n  top: -999999px;\n  left: -99999px;\n}\n\n/* Hidden */\n.ui.hidden.transition {\n  display: none;\n}\n\n/* Visible */\n.ui.visible.transition {\n  display: block;\n  visibility: visible;\n}\n\n\n/* Direction */\n.ui.out.transition {\n  -webkit-animation-direction: reverse;\n  -moz-animation-direction: reverse;\n  -o-animation-direction: reverse;\n  animation-direction: reverse;\n}\n\n/* Disabled */\n.ui.disabled.transition {\n  -webkit-animation-play-state: paused;\n  -moz-animation-play-state: paused;\n  -ms-animation-play-state: paused;\n  -o-animation-play-state: paused;\n  animation-play-state: paused;\n}\n\n/*******************************\n          Variations\n*******************************/\n\n.ui.looping.transition {\n  -webkit-animation-iteration-count: infinite;\n  -moz-animation-iteration-count: infinite;\n  -ms-animation-iteration-count: infinite;\n  -o-animation-iteration-count: infinite;\n  animation-iteration-count: infinite;\n}\n\n/*******************************\n             Types\n*******************************/\n\n/*--------------\n     Moving\n---------------*/\n\n.ui.move.down.transition.in,\n.ui.move.down.transition.out {\n  animation-name: moveDown;\n  -webkit-animation-name: moveDown;\n\n  animation-duration: 1s;\n  -webkit-animation-duration: 1s;\n\n  animation-timing-function: ease;\n  -webkit-animation-timing-function: ease;\n}\n\n@keyframes moveDown {\n  0% {\n    transform: translateY(-100%);\n  }\n  50%{\n    transform: translateY(8%);\n  }\n  65%{\n    transform: translateY(-4%);\n  }\n  80%{\n    transform: translateY(4%);\n  }\n  95%{\n    transform: translateY(-2%);\n  }\n  100% {\n    transform: translateY(0%);\n  }\n}\n\n@-webkit-keyframes moveDown {\n  0% {\n    -webkit-transform: translateY(-100%);\n  }\n  50%{\n    -webkit-transform: translateY(8%);\n  }\n  65%{\n    -webkit-transform: translateY(-4%);\n  }\n  80%{\n    -webkit-transform: translateY(4%);\n  }\n  95%{\n    -webkit-transform: translateY(-2%);\n  }\n  100% {\n    -webkit-transform: translateY(0%);\n  }\n}\n\n.ui.move.up.transition.in,\n.ui.move.up.transition.out {\n  animation-name: moveUp;\n  -webkit-animation-name: moveUp;\n\n  animation-duration: 1s;\n  -webkit-animation-duration: 1s;\n\n  animation-timing-function: ease;\n  -webkit-animation-timing-function: ease;\n}\n\n@keyframes moveUp {\n  0% {\n    transform: translateY(100%);\n  }\n  50%{\n    transform: translateY(-8%);\n  }\n  65%{\n    transform: translateY(4%);\n  }\n  80%{\n    transform: translateY(-4%);\n  }\n  95%{\n    transform: translateY(2%);\n  }\n  100% {\n    transform: translateY(0%);\n  }\n}\n\n@-webkit-keyframes moveUp {\n  0% {\n    -webkit-transform: translateY(100%);\n  }\n  50%{\n    -webkit-transform: translateY(-8%);\n  }\n  65%{\n    -webkit-transform: translateY(4%);\n  }\n  80%{\n    -webkit-transform: translateY(-4%);\n  }\n  95%{\n    -webkit-transform: translateY(2%);\n  }\n  100% {\n    -webkit-transform: translateY(0%);\n  }\n}\n\n\n.ui.move.left.transition.in,\n.ui.move.left.transition.out {\n  animation-name: moveLeft;\n  -webkit-animation-name: moveLeft;\n\n  animation-duration: 1s;\n  -webkit-animation-duration: 1s;\n\n  animation-timing-function: ease-in-out;\n  -webkit-animation-timing-function: ease-in-out;\n\n  visibility: visible !important;\n}\n\n@keyframes moveLeft {\n  0% {\n    transform: translateX(150%);\n  }\n  50%{\n    ransform: translateX(-8%);\n  }\n  65%{\n    transform: translateX(4%);\n  }\n  80%{\n    transform: translateX(-4%);\n  }\n  95%{\n    transform: translateX(2%);\n  }\n  100% {\n    transform: translateX(0%);\n  }\n}\n\n@-webkit-keyframes moveLeft {\n  0% {\n    -webkit-transform: translateX(150%);\n  }\n  50%{\n    -webkit-transform: translateX(-8%);\n  }\n  65%{\n    -webkit-transform: translateX(4%);\n  }\n  80%{\n    -webkit-transform: translateX(-4%);\n  }\n  95%{\n    -webkit-transform: translateX(2%);\n  }\n  100% {\n    -webkit-transform: translateX(0%);\n  }\n}\n\n\n.ui.move.right.transition.in,\n.ui.move.right.transition.out {\n  animation-name: moveRight;\n  -webkit-animation-name: moveRight;\n\n  animation-duration: 1s;\n  -webkit-animation-duration: 1s;\n\n  animation-timing-function: ease-in-out;\n  -webkit-animation-timing-function: ease-in-out;\n\n  visibility: visible !important;\n}\n\n@keyframes moveRight {\n  0% {\n    transform: translateX(-150%);\n  }\n  50%{\n    transform: translateX(8%);\n  }\n  65%{\n    transform: translateX(-4%);\n  }\n  80%{\n    transform: translateX(4%);\n  }\n  95%{\n    transform: translateX(-2%);\n  }\n  100% {\n    transform: translateX(0%);\n  }\n}\n\n@-webkit-keyframes moveRight {\n  0% {\n    -webkit-transform: translateX(-150%);\n  }\n  50%{\n    -webkit-transform: translateX(8%);\n  }\n  65%{\n    -webkit-transform: translateX(-4%);\n  }\n  80%{\n    -webkit-transform: translateX(4%);\n  }\n  95%{\n    -webkit-transform: translateX(-2%);\n  }\n  100% {\n    -webkit-transform: translateX(0%);\n  }\n}\n\n/*\n==============================================\nslideExpandUp\n==============================================\n*/\n\n\n.slideExpandUp{\n  animation-name: slideExpandUp;\n  -webkit-animation-name: slideExpandUp;\n\n  animation-duration: 1.6s;\n  -webkit-animation-duration: 1.6s;\n\n  animation-timing-function: ease-out;\n  -webkit-animation-timing-function: ease -out;\n\n  visibility: visible !important;\n}\n\n@keyframes slideExpandUp {\n  0% {\n    transform: translateY(100%) scaleX(0.5);\n  }\n  30%{\n    transform: translateY(-8%) scaleX(0.5);\n  }\n  40%{\n    transform: translateY(2%) scaleX(0.5);\n  }\n  50%{\n    transform: translateY(0%) scaleX(1.1);\n  }\n  60%{\n    transform: translateY(0%) scaleX(0.9);\n  }\n  70% {\n    transform: translateY(0%) scaleX(1.05);\n  }\n  80%{\n    transform: translateY(0%) scaleX(0.95);\n  }\n  90% {\n    transform: translateY(0%) scaleX(1.02);\n  }\n  100%{\n    transform: translateY(0%) scaleX(1);\n  }\n}\n\n@-webkit-keyframes slideExpandUp {\n  0% {\n    -webkit-transform: translateY(100%) scaleX(0.5);\n  }\n  30%{\n    -webkit-transform: translateY(-8%) scaleX(0.5);\n  }\n  40%{\n    -webkit-transform: translateY(2%) scaleX(0.5);\n  }\n  50%{\n    -webkit-transform: translateY(0%) scaleX(1.1);\n  }\n  60%{\n    -webkit-transform: translateY(0%) scaleX(0.9);\n  }\n  70% {\n    -webkit-transform: translateY(0%) scaleX(1.05);\n  }\n  80%{\n    -webkit-transform: translateY(0%) scaleX(0.95);\n  }\n  90% {\n    -webkit-transform: translateY(0%) scaleX(1.02);\n  }\n  100%{\n    -webkit-transform: translateY(0%) scaleX(1);\n  }\n}\n\n/*\n==============================================\nexpandUp\n==============================================\n*/\n\n\n.expandUp{\n  animation-name: expandUp;\n  -webkit-animation-name: expandUp;\n\n  animation-duration: 0.7s;\n  -webkit-animation-duration: 0.7s;\n\n  animation-timing-function: ease;\n  -webkit-animation-timing-function: ease;\n\n  visibility: visible !important;\n}\n\n@keyframes expandUp {\n  0% {\n    transform: translateY(100%) scale(0.6) scaleY(0.5);\n  }\n  60%{\n    transform: translateY(-7%) scaleY(1.12);\n  }\n  75%{\n    transform: translateY(3%);\n  }\n  100% {\n    transform: translateY(0%) scale(1) scaleY(1);\n  }\n}\n\n@-webkit-keyframes expandUp {\n  0% {\n    -webkit-transform: translateY(100%) scale(0.6) scaleY(0.5);\n  }\n  60%{\n    -webkit-transform: translateY(-7%) scaleY(1.12);\n  }\n  75%{\n    -webkit-transform: translateY(3%);\n  }\n  100% {\n    -webkit-transform: translateY(0%) scale(1) scaleY(1);\n  }\n}\n\n/*\n==============================================\nfadeIn\n==============================================\n*/\n\n.fadeIn{\n  animation-name: fadeIn;\n  -webkit-animation-name: fadeIn;\n\n  animation-duration: 1.5s;\n  -webkit-animation-duration: 1.5s;\n\n  animation-timing-function: ease-in-out;\n  -webkit-animation-timing-function: ease-in-out;\n\n  visibility: visible !important;\n}\n\n@keyframes fadeIn {\n  0% {\n    transform: scale(0);\n    opacity: 0.0;\n  }\n  60% {\n    transform: scale(1.1);\n  }\n  80% {\n    transform: scale(0.9);\n    opacity: 1;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n@-webkit-keyframes fadeIn {\n  0% {\n    -webkit-transform: scale(0);\n    opacity: 0.0;\n  }\n  60% {\n    -webkit-transform: scale(1.1);\n  }\n  80% {\n    -webkit-transform: scale(0.9);\n    opacity: 1;\n  }\n  100% {\n    -webkit-transform: scale(1);\n    opacity: 1;\n  }\n}\n\n/*\n==============================================\nexpandOpen\n==============================================\n*/\n\n\n.expandOpen{\n  animation-name: expandOpen;\n  -webkit-animation-name: expandOpen;\n\n  animation-duration: 1.2s;\n  -webkit-animation-duration: 1.2s;\n\n  animation-timing-function: ease-out;\n  -webkit-animation-timing-function: ease-out;\n\n  visibility: visible !important;\n}\n\n@keyframes expandOpen {\n  0% {\n    transform: scale(1.8);\n  }\n  50% {\n    transform: scale(0.95);\n  }\n  80% {\n    transform: scale(1.05);\n  }\n  90% {\n    transform: scale(0.98);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n\n@-webkit-keyframes expandOpen {\n  0% {\n    -webkit-transform: scale(1.8);\n  }\n  50% {\n    -webkit-transform: scale(0.95);\n  }\n  80% {\n    -webkit-transform: scale(1.05);\n  }\n  90% {\n    -webkit-transform: scale(0.98);\n  }\n  100% {\n    -webkit-transform: scale(1);\n  }\n}\n\n/*\n==============================================\nbigEntrance\n==============================================\n*/\n\n\n.bigEntrance{\n  animation-name: bigEntrance;\n  -webkit-animation-name: bigEntrance;\n\n  animation-duration: 1.6s;\n  -webkit-animation-duration: 1.6s;\n\n  animation-timing-function: ease-out;\n  -webkit-animation-timing-function: ease-out;\n\n  visibility: visible !important;\n}\n\n@keyframes bigEntrance {\n  0% {\n    transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);\n    opacity: 0.2;\n  }\n  30% {\n    transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);\n    opacity: 1;\n  }\n  45% {\n    transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);\n    opacity: 1;\n  }\n  60% {\n    transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);\n    opacity: 1;\n  }\n  75% {\n    transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);\n    opacity: 1;\n  }\n  90% {\n    transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);\n    opacity: 1;\n  }\n  100% {\n    transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);\n    opacity: 1;\n  }\n}\n\n@-webkit-keyframes bigEntrance {\n  0% {\n    -webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);\n    opacity: 0.2;\n  }\n  30% {\n    -webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);\n    opacity: 1;\n  }\n  45% {\n    -webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);\n    opacity: 1;\n  }\n  60% {\n    -webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);\n    opacity: 1;\n  }\n  75% {\n    -webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);\n    opacity: 1;\n  }\n  90% {\n    -webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);\n    opacity: 1;\n  }\n  100% {\n    -webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);\n    opacity: 1;\n  }\n}\n\n/*\n==============================================\nhatch\n==============================================\n*/\n\n.hatch{\n  animation-name: hatch;\n  -webkit-animation-name: hatch;\n\n  animation-duration: 2s;\n  -webkit-animation-duration: 2s;\n\n  animation-timing-function: ease-in-out;\n  -webkit-animation-timing-function: ease-in-out;\n\n  transform-origin: 50% 100%;\n  -ms-transform-origin: 50% 100%;\n  -webkit-transform-origin: 50% 100%;\n\n  visibility: visible !important;\n}\n\n@keyframes hatch {\n  0% {\n    transform: rotate(0deg) scaleY(0.6);\n  }\n  20% {\n    transform: rotate(-2deg) scaleY(1.05);\n  }\n  35% {\n    transform: rotate(2deg) scaleY(1);\n  }\n  50% {\n    transform: rotate(-2deg);\n  }\n  65% {\n    transform: rotate(1deg);\n  }\n  80% {\n    transform: rotate(-1deg);\n  }\n  100% {\n    transform: rotate(0deg);\n  }\n}\n\n@-webkit-keyframes hatch {\n  0% {\n    -webkit-transform: rotate(0deg) scaleY(0.6);\n  }\n  20% {\n    -webkit-transform: rotate(-2deg) scaleY(1.05);\n  }\n  35% {\n    -webkit-transform: rotate(2deg) scaleY(1);\n  }\n  50% {\n    -webkit-transform: rotate(-2deg);\n  }\n  65% {\n    -webkit-transform: rotate(1deg);\n  }\n  80% {\n    -webkit-transform: rotate(-1deg);\n  }\n  100% {\n    -webkit-transform: rotate(0deg);\n  }\n}\n\n\n/*\n==============================================\nbounce\n==============================================\n*/\n\n\n.bounce{\n  animation-name: bounce;\n  -webkit-animation-name: bounce;\n\n  animation-duration: 1.6s;\n  -webkit-animation-duration: 1.6s;\n\n  animation-timing-function: ease;\n  -webkit-animation-timing-function: ease;\n\n  transform-origin: 50% 100%;\n  -ms-transform-origin: 50% 100%;\n  -webkit-transform-origin: 50% 100%;\n}\n\n@keyframes bounce {\n  0% {\n    transform: translateY(0%) scaleY(0.6);\n  }\n  60%{\n    transform: translateY(-100%) scaleY(1.1);\n  }\n  70%{\n    transform: translateY(0%) scaleY(0.95) scaleX(1.05);\n  }\n  80%{\n    transform: translateY(0%) scaleY(1.05) scaleX(1);\n  }\n  90%{\n    transform: translateY(0%) scaleY(0.95) scaleX(1);\n  }\n  100%{\n    transform: translateY(0%) scaleY(1) scaleX(1);\n  }\n}\n\n@-webkit-keyframes bounce {\n  0% {\n    -webkit-transform: translateY(0%) scaleY(0.6);\n  }\n  60%{\n    -webkit-transform: translateY(-100%) scaleY(1.1);\n  }\n  70%{\n    -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05);\n  }\n  80%{\n    -webkit-transform: translateY(0%) scaleY(1.05) scaleX(1);\n  }\n  90%{\n    -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1);\n  }\n  100%{\n    -webkit-transform: translateY(0%) scaleY(1) scaleX(1);\n  }\n}\n\n\n/*\n==============================================\npulse\n==============================================\n*/\n\n.pulse{\n  animation-name: pulse;\n  -webkit-animation-name: pulse;\n\n  animation-duration: 1.5s;\n  -webkit-animation-duration: 1.5s;\n\n  animation-iteration-count: infinite;\n  -webkit-animation-iteration-count: infinite;\n}\n\n@keyframes pulse {\n  0% {\n    transform: scale(0.9);\n    opacity: 0.7;\n  }\n  50% {\n    ransform: scale(1);\n    opacity: 1;\n  }\n  100% {\n    transform: scale(0.9);\n    opacity: 0.7;\n  }\n}\n\n@-webkit-keyframes pulse {\n  0% {\n    -webkit-transform: scale(0.95);\n    opacity: 0.7;\n  }\n  50% {\n    -webkit-transform: scale(1);\n    opacity: 1;\n  }\n  100% {\n    -webkit-transform: scale(0.95);\n    opacity: 0.7;\n  }\n}\n\n/*\n==============================================\nfloating\n==============================================\n*/\n\n.floating{\n  animation-name: floating;\n  -webkit-animation-name: floating;\n\n  animation-duration: 1.5s;\n  -webkit-animation-duration: 1.5s;\n\n  animation-iteration-count: infinite;\n  -webkit-animation-iteration-count: infinite;\n}\n\n@keyframes floating {\n  0% {\n    transform: translateY(0%);\n  }\n  50% {\n    transform: translateY(8%);\n  }\n  100% {\n    transform: translateY(0%);\n  }\n}\n\n@-webkit-keyframes floating {\n  0% {\n    -webkit-transform: translateY(0%);\n  }\n  50% {\n    -webkit-transform: translateY(8%);\n  }\n  100% {\n    -webkit-transform: translateY(0%);\n  }\n}\n\n/*\n==============================================\ntossing\n==============================================\n*/\n\n.tossing{\n  animation-name: tossing;\n  -webkit-animation-name: tossing;\n\n  animation-duration: 2.5s;\n  -webkit-animation-duration: 2.5s;\n\n  animation-iteration-count: infinite;\n  -webkit-animation-iteration-count: infinite;\n}\n\n@keyframes tossing {\n  0% {\n    transform: rotate(-4deg);\n  }\n  50% {\n    transform: rotate(4deg);\n  }\n  100% {\n    transform: rotate(-4deg);\n  }\n}\n\n@-webkit-keyframes tossing {\n  0% {\n    -webkit-transform: rotate(-4deg);\n  }\n  50% {\n    -webkit-transform: rotate(4deg);\n  }\n  100% {\n    -webkit-transform: rotate(-4deg);\n  }\n}\n\n/*\n==============================================\npullUp\n==============================================\n*/\n\n.pullUp{\n  animation-name: pullUp;\n  -webkit-animation-name: pullUp;\n\n  animation-duration: 1.1s;\n  -webkit-animation-duration: 1.1s;\n\n  animation-timing-function: ease-out;\n  -webkit-animation-timing-function: ease-out;\n\n  transform-origin: 50% 100%;\n  -ms-transform-origin: 50% 100%;\n  -webkit-transform-origin: 50% 100%;\n}\n\n@keyframes pullUp {\n  0% {\n    transform: scaleY(0.1);\n  }\n  40% {\n    transform: scaleY(1.02);\n  }\n  60% {\n    transform: scaleY(0.98);\n  }\n  80% {\n    transform: scaleY(1.01);\n  }\n  100% {\n    transform: scaleY(0.98);\n  }\n  80% {\n    transform: scaleY(1.01);\n  }\n  100% {\n    transform: scaleY(1);\n  }\n}\n\n@-webkit-keyframes pullUp {\n  0% {\n    -webkit-transform: scaleY(0.1);\n  }\n  40% {\n    -webkit-transform: scaleY(1.02);\n  }\n  60% {\n    -webkit-transform: scaleY(0.98);\n  }\n  80% {\n    -webkit-transform: scaleY(1.01);\n  }\n  100% {\n    -webkit-transform: scaleY(0.98);\n  }\n  80% {\n    -webkit-transform: scaleY(1.01);\n  }\n  100% {\n    -webkit-transform: scaleY(1);\n  }\n}\n\n/*\n==============================================\npullDown\n==============================================\n*/\n\n.pullDown{\n  animation-name: pullDown;\n  -webkit-animation-name: pullDown;\n\n  animation-duration: 1.1s;\n  -webkit-animation-duration: 1.1s;\n\n  animation-timing-function: ease-out;\n  -webkit-animation-timing-function: ease-out;\n\n  transform-origin: 50% 0%;\n  -ms-transform-origin: 50% 0%;\n  -webkit-transform-origin: 50% 0%;\n}\n\n@keyframes pullDown {\n  0% {\n    transform: scaleY(0.1);\n  }\n  40% {\n    transform: scaleY(1.02);\n  }\n  60% {\n    transform: scaleY(0.98);\n  }\n  80% {\n    transform: scaleY(1.01);\n  }\n  100% {\n    transform: scaleY(0.98);\n  }\n  80% {\n    transform: scaleY(1.01);\n  }\n  100% {\n    transform: scaleY(1);\n  }\n}\n\n@-webkit-keyframes pullDown {\n  0% {\n    -webkit-transform: scaleY(0.1);\n  }\n  40% {\n    -webkit-transform: scaleY(1.02);\n  }\n  60% {\n    -webkit-transform: scaleY(0.98);\n  }\n  80% {\n    -webkit-transform: scaleY(1.01);\n  }\n  100% {\n    -webkit-transform: scaleY(0.98);\n  }\n  80% {\n    -webkit-transform: scaleY(1.01);\n  }\n  100% {\n    -webkit-transform: scaleY(1);\n  }\n}\n\n/*\n==============================================\nstretchLeft\n==============================================\n*/\n\n.stretchLeft{\n  animation-name: stretchLeft;\n  -webkit-animation-name: stretchLeft;\n\n  animation-duration: 1.5s;\n  -webkit-animation-duration: 1.5s;\n\n  animation-timing-function: ease-out;\n  -webkit-animation-timing-function: ease-out;\n\n  transform-origin: 100% 0%;\n  -ms-transform-origin: 100% 0%;\n  -webkit-transform-origin: 100% 0%;\n}\n\n@keyframes stretchLeft {\n  0% {\n    transform: scaleX(0.3);\n  }\n  40% {\n    transform: scaleX(1.02);\n  }\n  60% {\n    transform: scaleX(0.98);\n  }\n  80% {\n    transform: scaleX(1.01);\n  }\n  100% {\n    transform: scaleX(0.98);\n  }\n  80% {\n    transform: scaleX(1.01);\n  }\n  100% {\n    transform: scaleX(1);\n  }\n}\n\n@-webkit-keyframes stretchLeft {\n  0% {\n    -webkit-transform: scaleX(0.3);\n  }\n  40% {\n    -webkit-transform: scaleX(1.02);\n  }\n  60% {\n    -webkit-transform: scaleX(0.98);\n  }\n  80% {\n    -webkit-transform: scaleX(1.01);\n  }\n  100% {\n    -webkit-transform: scaleX(0.98);\n  }\n  80% {\n    -webkit-transform: scaleX(1.01);\n  }\n  100% {\n    -webkit-transform: scaleX(1);\n  }\n}\n\n/*\n==============================================\nstretchRight\n==============================================\n*/\n\n.stretchRight{\n  animation-name: stretchRight;\n  -webkit-animation-name: stretchRight;\n\n  animation-duration: 1.5s;\n  -webkit-animation-duration: 1.5s;\n\n  animation-timing-function: ease-out;\n  -webkit-animation-timing-function: ease-out;\n\n  transform-origin: 0% 0%;\n  -ms-transform-origin: 0% 0%;\n  -webkit-transform-origin: 0% 0%;\n}\n\n@keyframes stretchRight {\n  0% {\n    transform: scaleX(0.3);\n  }\n  40% {\n    transform: scaleX(1.02);\n  }\n  60% {\n    transform: scaleX(0.98);\n  }\n  80% {\n    transform: scaleX(1.01);\n  }\n  100% {\n    transform: scaleX(0.98);\n  }\n  80% {\n    transform: scaleX(1.01);\n  }\n  100% {\n    transform: scaleX(1);\n  }\n}\n\n@-webkit-keyframes stretchRight {\n  0% {\n    -webkit-transform: scaleX(0.3);\n  }\n  40% {\n    -webkit-transform: scaleX(1.02);\n  }\n  60% {\n    -webkit-transform: scaleX(0.98);\n  }\n  80% {\n    -webkit-transform: scaleX(1.01);\n  }\n  100% {\n    -webkit-transform: scaleX(0.98);\n  }\n  80% {\n    -webkit-transform: scaleX(1.01);\n  }\n  100% {\n    -webkit-transform: scaleX(1);\n  }\n}"
  },
  {
    "path": "server/raw/draft/sitemap.less",
    "content": "/*\n * # Sitemap\n *\n *\n * Copyright 2013 Contributors\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n * Released: April 17 2013\n */\n\n/*******************************\n           Sitemap\n*******************************/\n\n.ui.sitemap {\n  margin: 0 -3rem;\n  font-size: 0rem;\n  text-align: left;\n}\n\n\n/*--------------\n     Elements\n---------------*/\n\n.ui.sitemap > .section {\n  display: inline-block;\n  vertical-align: top;\n\n  margin: 0em 3rem;\n\n  font-size: 1rem;\n}\n\n.ui.sitemap > .section > .header {\n  font-size: 1.125em;\n  color: rgba(0, 0, 0, 0.8);\n  padding-bottom: 0.5em;\n}\n\n.ui.sitemap > .section > a {\n  display: block;\n  padding: 0.25em 0em;\n}\n\n"
  },
  {
    "path": "server/raw/humans.txt",
    "content": "# humanstxt.org/\n# The humans responsible & technology colophon\n\n# TEAM\n\n    jack Lukic - Developer\n\n# THANKS\n\n   Quirky Inc\n\n# TECHNOLOGY COLOPHON\n\n    HTML5, CSS3\n    jQuery\n"
  },
  {
    "path": "server/raw/robots.txt",
    "content": "# robotstxt.org/\n\nUser-agent: *\n"
  }
]