<p>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 <code>onclick</code>, an input <code>oninput</code>, or a form <code>onsubmit</code>.</p>
<p>API actions and data can be specified in javascript on initialization</p>
<p>API actions and data can be specified in Javascript on initialization</p>
<div class="code" data-type="html">
<div class="ui follow button">
Follow
@ -326,7 +326,7 @@ type : 'UI Behavior'
<div class="no example">
<h4 class="ui header">3. Settings Specified in Javascript</h4>
<p>URL variable, and GET/POST data can be specified at run-time in the javascript object </p>
<p>URL variable, and GET/POST data can be specified at run-time in the Javascript object </p>
<div class="code" data-type="javascript">
$('.follow.button')
.api({
@ -433,8 +433,8 @@ type : 'UI Behavior'
<p>Structured form data is beneficial over <a href="https://api.jquery.com/serialize/">jQuery's serialize</a> for several reasons</p>
<ul class="ui large list">
<li>Serialize object correctly converts structured form names like <code>name="name[first]"</code> into nested object literals</li>
<li>Structured form data can be modified in javascript in <code>beforeSend</code></li>
<li>Form data will automatically be converted to their javascript equivalents, for instance, checkboxes will be converted to <code>boolean</code> values.</li>
<li>Structured form data can be modified in Javascript in <code>beforeSend</code></li>
<li>Form data will automatically be converted to their Javascript equivalents, for instance, checkboxes will be converted to <code>boolean</code> values.</li>
</ul>
<div class="ui ignored warning message">
Structured form data requires including <a href="https://github.com/macek/jquery-serialize-object" target="_blank">macek's serialize object.</a>
@ -557,7 +557,7 @@ type : 'UI Behavior'
<h4 class="ui header">Response Callbacks</h4>
<p>Successful responses from the server will trigger <code>onSuccess</code>, invalid results <code>onFailure</code>.<p>
<p><code>onError</code> will only trigger on <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest">XHR</a> errors, but not on invalid JSON responses.</p>
<p>You can use the <code>onResponse</code> callback to adjust the json response before being parsed against a success test.
<p>You can use the <code>onResponse</code> callback to adjust the JSON response before being parsed against a success test.
<div class="code" data-type="javascript">
$('.follow.button')
.api({
@ -566,11 +566,11 @@ type : 'UI Behavior'
return response;
},
successTest: function(response) {
// test whether a json response is valid
// test whether a JSON response is valid
return response.success || false;
},
onComplete: function(response) {
// always called after xhr complete
// always called after XHR complete
},
onSuccess: function(response) {
// valid response and response.success = true
@ -641,7 +641,7 @@ type : 'UI Behavior'
if(!githubResponse || !githubResponse.items) {
return;
}
// translate github api response to work with search
// translate GitHub API response to work with search
<div class="ui ignored info message">Templates are found in <code>settings.template</code>, to modify templates across all forms, modify <code>$.fn.form.settings.templates</code> to include your function. They must return html.</div>
<div class="ui ignored info message">Templates are found in <code>settings.template</code>, to modify templates across all forms, modify <code>$.fn.form.settings.templates</code> to include your function. They must return HTML.</div>
<p>If javascript or <a href="/modules/dropdown.html">ui dropdown</a> are not a viable option, forms also can provide basic styling for select elements</p>
<p>If Javascript or <a href="/modules/dropdown.html">ui dropdown</a> are not a viable option, forms also can provide basic styling for select elements</p>
<p>UI tables use <code>border-collapse: separate</code> to allow for tables to receive styles that cannot usually be applied to tables like <code>border-radius</code>. However this can cause some cell borders to appear missing with complex layouts that use <code>rowspan</code> or <code>colspan</code> and rows with varying column count.</p>
<p><code>ui complex table</code> does not support some style features, but can correctly display all valid html table content.</p>
<p><code>ui complex table</code> does not support some style features, but can correctly display all valid HTML table content.</p>
<h2 class="ui dividing header">What's In Our Reset</h2>
<p>Semantic's default theme includes the latest <a href="http://necolas.github.io/normalize.css/">Normalize css</a> to provide a base line HTML reset. In addition, Semantic UI requires a <b>Box-sizing</b> reset, to make sure that elements handle width definitions in the same way.</p>
<p>Semantic's default theme includes the latest <a href="http://necolas.github.io/normalize.css/">Normalize CSS</a> to provide a base line HTML reset. In addition, Semantic UI requires a <b>Box-sizing</b> reset, to make sure that elements handle width definitions in the same way.</p>
<h2 class="ui dividing header">Reset Options</h2>
<p>
The <b>basic</b> themes <b>only</b> includes the required <code>box-sizing</code> reset and nothing else. The <b>resetcss</b> theme provides a version of <a href="http://meyerweb.com/eric/tools/css/reset/">Reset CSS</a>, a less opinionated css reset.
The <b>basic</b> themes <b>only</b> includes the required <code>box-sizing</code> reset and nothing else. The <b>resetcss</b> theme provides a version of <a href="http://meyerweb.com/eric/tools/css/reset/">Reset CSS</a>, a less opinionated CSS reset.
<p>Component repos are released on NPM and as tagged releases on github.</p>
<p>Component repos are released on NPM and as tagged releases on GitHub.</p>
<p>Check the list of repos available under <a href="https://github.com/Semantic-Org?utf8=%E2%9C%93&query=ui-">Semantic Org</a> on GitHub</p>
<p>Each component's release notes will automatically update with the relevant notes for that component from the main release.</p>
<div class="ignored code">
@ -164,8 +164,8 @@ type : 'Introduction'
</div>
<div class="no example">
<h4>Hosted Docs</h4>
<p>If you are managing your documentation you can automatically deploy to github pages using a built in <a href="https://github.com/docpad/docpad-plugin-ghpages">docpad gh-pages</a> plugin</p>
<p>For more information about GitHub pages, check out the <a href="https://pages.github.com/" target="_blank">docs on GitHub</a></p>
<p>If you are managing your documentation you can automatically deploy to GitHub Pages using a built in <a href="https://github.com/docpad/docpad-plugin-ghpages">docpad gh-pages</a> plugin</p>
<p>For more information about GitHub Pages, check out the <a href="https://pages.github.com/" target="_blank">docs on GitHub</a></p>
Globals are styles that are applied across a site. These include things like css resets, and sitewide font, link and sizing defaults.</p>
Globals are styles that are applied across a site. These include things like CSS resets, and sitewide font, link and sizing defaults.</p>
<p>Most importantly, globals include site-wide <a href="/usage/theming.html">theming variables</a> that other components can inherit and modify.</td>
</tr>
</tr>
@ -53,7 +53,7 @@ type : 'Introduction'
<tr>
<td>Behaviors</td>
<td>
<p>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.</p>
<p>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.</p>
</td>
</tr>
</tbody>
@ -75,7 +75,7 @@ type : 'Introduction'
<tr>
<td>Definition</td>
<td>
<p>A definition is a set of css and javascript which describe a component's essential qualities.</p>
<p>A definition is a set of CSS and Javascript which describe a component's essential qualities.</p>
<p>Definition use variables to express arbitrary parts of a component's appearance so that they can be changed with themes.</p>
</td>
</tr>
@ -84,7 +84,7 @@ type : 'Introduction'
<td>
<p><code>ui</code> is a special class name used to distinguish parts of components from components.</p>
<p>For example, a <a href="/elements/list.html">list</a> will receive the class <code>ui list</code> because it has a corresponding definition, however a list item, will receive just the class <code>item</code>.</p>
<p>The ui class name helps encapsulate css rules by making sure all 'parts of a component' are defined in context to a 'whole' component.</p>
<p>The ui class name helps encapsulate CSS rules by making sure all 'parts of a component' are defined in context to a 'whole' component.</p>
<p>It also helps make scanning unknown code simpler. If you see <code>ui</code> you know you are looking at a component.</p>
</td>
</tr>
@ -107,7 +107,7 @@ type : 'Introduction'
<tr>
<td>Definition</td>
<td>
<p>A definition is a set of css and javascript which describe a component's essential qualities.</p>
<p>A definition is a set of CSS and Javascript which describe a component's essential qualities.</p>
<p>Definition use variables to express arbitrary parts of a component's appearance so that they can be changed with themes.</p>
</td>
</tr>
@ -141,7 +141,7 @@ type : 'Introduction'
<tr>
<td>Behaviors</td>
<td>
<p>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.</p>
<p>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.</p>
</td>
</tr>
</tbody>
@ -157,7 +157,7 @@ type : 'Introduction'
<tr>
<td class="three wide">Namespace</td>
<td>A name given to an element for the explicit purpose of containing the application of properties.</p>
<p>In Semantic UI, components are given the class name <code>ui</code> 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.</td>
<p>In Semantic UI, components are given the class name <code>ui</code> 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.</td>
<p>Multiple select dropdowns are now available, and can generate automatically from standard html selects. </p>
<p>Multiple select dropdowns are now available, and can generate automatically from standard HTML selects. </p>
<p>Dropdowns now all support advanced keyboard shortcuts like <code>pagedown</code>, <code>delete</code>, <code>shift+left</code> <code>ctrl+click</code>, and selection using first letter of item.</p>
<p>Additionally dropdowns will now automatically open <code>upward</code> if there is not enough space available in the viewport below a dropdown.</p>
<select class="ui fluid dropdown" multiple>
@ -1058,7 +1058,7 @@ type : 'Main'
results : {}
}
;
// translate github api response to work with search
// translate GitHub API response to work with search
<p><a href="/modules/checkbox.html">Checkboxes</a> now can work without javascript, although additional features are available with javascript use.</p>
<p><a href="/modules/checkbox.html">Checkboxes</a> now can work without Javascript, although additional features are available with Javascript use.</p>
<h4 class="ui header">Full Featured Checkboxes</h4>
<p>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 <code>indeterminate</code> can only be triggered with javascript.</p>
<p>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 <code>indeterminate</code> can only be triggered with Javascript.</p>
<p>If you just need labels to link without any other features of javascript checkboxes, you can match the <code>for</code> attribute of the label to an input's id.</p>
<p>If you just need labels to link without any other features of Javascript checkboxes, you can match the <code>for</code> attribute of the label to an input's id.</p>
<p>A dimmer can be controlled without javascript</p>
<p>A dimmer can be controlled without Javascript</p>
<div class="ignored ui info message">Having any parent element receive the class <code>ui dimmable dimmed</code> will trigger the dimmer to display.</div>
<div class="ui dimmable dimmed segment">
<div class="ui simple dimmer"></div>
@ -419,7 +419,7 @@ themes : ['Default']
<tr>
<td>opacity</td>
<td class="six wide">auto</td>
<td>Dimmers opacity from 0-1. Defaults to <code>auto</code> which uses the css specified opacity.</td>
<td>Dimmers opacity from 0-1. Defaults to <code>auto</code> which uses the CSS specified opacity.</td>
</tr>
<tr>
<td>variation</td>
@ -444,7 +444,7 @@ themes : ['Default']
<tr>
<td>useCSS</td>
<td class="six wide">true</td>
<td>Whether to dim dimmers using css transitions.</td>
<td>Whether to dim dimmers using CSS transitions.</td>
<p>Initializing a dropdown with pre-existing html allows for greater performance than initializing a dropdown directly on a <code>select</code> element.</p>
<div class="ui ignored info message">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.</div>
<p>Initializing a dropdown with pre-existing HTML allows for greater performance than initializing a dropdown directly on a <code>select</code> element.</p>
<div class="ui ignored info message">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.</div>
<h4 class="ui header">Hybrid Form Initialization</h4>
<p>As a third option, you can include a wrapper around your <code>select</code> so that it will appear correctly on page load, but will then <b>populate the hidden menu</b> when javascript fires. In this case, the <code>select</code> element does not receive the <code>ui dropdown</code> class.</p>
<p>As a third option, you can include a wrapper around your <code>select</code> so that it will appear correctly on page load, but will then <b>populate the hidden menu</b> when Javascript fires. In this case, the <code>select</code> element does not receive the <code>ui dropdown</code> class.</p>
<p>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.</p>
<p>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.</p>
<div class="ui info message">
<div class="header">Why move modal content?</div>
<p>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.</p>
<li>Using <code>data-html</code> for specific html</li>
<li>Using <code>data-html</code> for specific HTML</li>
<li>Using the content property in the initialization of the popup</li>
</ul>
<p>Popups can also specify some other frequently used settings using metadata<p>
@ -326,7 +326,7 @@ themes : ['Default']
<div class="example">
<h4 class="ui header">Wide Popup Menu</h4>
<p>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.</p>
<p>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.</p>
<p>Using the setting <code>inline: true</code> will let Semantic know to display the next sibling <code>ui popup</code> element after the activator.</p>
<p>Tweaking settings like the delay for show, and hide, and making the menu hoverable will help it function more like a dropdown menu</p>
<p>The starting rating can be set either using metadata value <code>data-rating</code> or the setting <code>initialRating</code>.
<p>The maximum rating can be be set using the metadata value <code>data-max-rating</code> or the settings <code>maxRating</code>, or you can just include the icon html yourself on initialization to avoid the overhead of the <code>DOM template insertions</code>. </p>
<div class="ui ignored info message">If a metadata rating is specified it will automatically override the default value specified in javascript.</div>
<p>The maximum rating can be be set using the metadata value <code>data-max-rating</code> or the settings <code>maxRating</code>, or you can just include the icon HTML yourself on initialization to avoid the overhead of the <code>DOM template insertions</code>. </p>
<div class="ui ignored info message">If a metadata rating is specified it will automatically override the default value specified in Javascript.</div>
<div class="code" data-type="javascript">
$('.toggle.example .rating')
.rating({
@ -167,7 +167,7 @@ themes : ['Default']
<div class="example">
<h4 class="ui header">Javascript</h4>
<p>You can specify the rating values in javascript</p>
<p>You can specify the rating values in Javascript</p>
<td>Specify a javascript object which will be searched locally</td>
<td>Specify a Javascript object which will be searched locally</td>
</tr>
<tr>
<td>searchFullText</td>
@ -617,7 +617,7 @@ type : 'UI Module'
<td>
easeOutExpo
</td>
<td>Easing equation when using fallback javascript animation</td>
<td>Easing equation when using fallback Javascript animation</td>
</tr>
</tbody>
</table>
@ -641,7 +641,7 @@ type : 'UI Module'
<tr>
<td>onResultsAdd(html)</td>
<td>module</td>
<td>Callback after processing element template to add html to results. Function should return false to prevent default actions.</td>
<td>Callback after processing element template to add HTML to results. Function should return false to prevent default actions.</td>
</tr>
<tr>
<td>onSearchQuery(query)</td>
@ -670,7 +670,7 @@ type : 'UI Module'
Templates
</h2>
<p>These templates are used to generate the html structures for search results</p>
<p>These templates are used to generate the HTML structures for search results</p>
<div class="ui ignored info message">
By specifying a search as <code>type: 'customType'</code>, and a custom template under <code>$.fn.search.settings.templates.customType</code> you can create custom search results. Keep in mind that <code>.title</code> will be used for matching results <code>onSelect</code>
A sidebar will automatically adjust its animations to match any custom size specified in css
A sidebar will automatically adjust its animations to match any custom size specified in CSS
</div>
<div class="code" data-type="html">
<div class="ui thin sidebar"></div>
@ -270,11 +270,11 @@ themes : ['Default']
<td>Returns page content to original position</td>
</tr>
<tr>
<td>add body css</td>
<td>add body CSS</td>
<td>Adds stylesheet to page head to trigger sidebar animations</td>
</tr>
<tr>
<td>remove body css</td>
<td>remove body CSS</td>
<td>Removes any inline stylesheets for sidebar animation</td>
</tr>
<tr>
@ -499,10 +499,10 @@ themes : ['Default']
<h4 class="ui header">Starting Visible</h4>
<p>A sidebar can start visible by adding the class name <code>visible</code></p>
<div class="ui ignored warning message">
You must include the class <code>pushable</code> on a sidebars containing element for it to appear correctly before javascript initializes the element
You must include the class <code>pushable</code> on a sidebars containing element for it to appear correctly before Javascript initializes the element
</div>
<div class="ui ignored info message">
Although sidebars support any size content, sidebars that are visible on load only support standard, predefined sizes like <code>thin</code> or <code>wide</code>. This makes sure content can be positioned correctly before javascript is available.
Although sidebars support any size content, sidebars that are visible on load only support standard, predefined sizes like <code>thin</code> or <code>wide</code>. This makes sure content can be positioned correctly before Javascript is available.
</div>
<div class="ui bottom attached segment pushable">
<div class="ui visible inverted left vertical sidebar menu">
@ -597,7 +597,7 @@ themes : ['Default']
<tr>
<td>delaySetup</td>
<td>false</td>
<td>When sidebar is initialized without the proper html, using this option will defer creation of DOM to use <code>requestAnimationFrame</code>.</td>
<td>When sidebar is initialized without the proper HTML, using this option will defer creation of DOM to use <code>requestAnimationFrame</code>.</td>
</tr>
</tbody>
</table>
@ -651,17 +651,17 @@ themes : ['Default']
<tr>
<td>useLegacy</td>
<td>false</td>
<td>Whether javascript animations should be used. Defaults to <code>false</code>. Setting to <code>auto</code> will use legacy animations only for browsers that do not support CSS transforms</td>
<td>Whether Javascript animations should be used. Defaults to <code>false</code>. Setting to <code>auto</code> will use legacy animations only for browsers that do not support CSS transforms</td>
</tr>
<tr>
<td>duration</td>
<td>500</td>
<td>Duration of sidebar animation when using legacy javascript animation</td>
<td>Duration of sidebar animation when using legacy Javascript animation</td>
</tr>
<tr>
<td>easing</td>
<td>easeInOutQuint</td>
<td>Easing to use when using legacy javascript animation</td>
<td>Easing to use when using legacy Javascript animation</td>
<div class="item">Loading images without specified size</div>
<div class="item">Setting CSS which adjusts the layout of the page</div>
<div class="item">Hiding elements using javascript</div>
<div class="item">Hiding elements using Javascript</div>
</div>
<p>Refreshing cached values just requires calling the <code>refresh</code> behavior.</p>
<div class="ui code">
@ -459,7 +459,7 @@ type : 'UI Module'
<div class="example">
<h4 class="ui header">Sticky Conditions</h4>
<p>Sticky content is required to be inside its own <code>position: relative</code> container that is either the sticky context, or <b>shares vertical positioning with the context element</b>.</p>
<p>You can use <code>ui rail</code> or <code>ui grid</code> column that are in the same row to provide this set-up, or your own custom css</p>
<p>You can use <code>ui rail</code> or <code>ui grid</code> column that are in the same row to provide this set-up, or your own custom CSS</p>
<p>Sticky elements swap between being bound to the edges of their container, or fixed to the edges of the browser viewport</p>
<table class="ui celled definition table">
<thead>
@ -535,7 +535,7 @@ type : 'UI Module'
<tr>
<td>observeChanges</td>
<td>false</td>
<td>Whether any change in <code>context</code> dom should automatically refresh cached sticky positions</td>
<td>Whether any change in <code>context</code> DOM should automatically refresh cached sticky positions</td>
<div class="ui ignored info message">A tab is hidden by default, and will only become visible when given the class name <code>active</code> or when activated with javascript. For more information, see the usage section.</div>
<div class="ui ignored info message">A tab is hidden by default, and will only become visible when given the class name <code>active</code> or when activated with Javascript. For more information, see the usage section.</div>
<div class="ui top attached tabular menu">
<div class="item">Tab</div>
</div>
@ -80,7 +80,7 @@ themes : ['Default']
<div class="first example">
<h4 class="ui header">Basic Tabs</h4>
<p>Tabs are connecting using paths specified in the <code>data-tab</code> attribute. Tab is then initialized in javascript on the activating elements.</p>
<p>Tabs are connecting using paths specified in the <code>data-tab</code> attribute. Tab is then initialized in Javascript on the activating elements.</p>
<div class="ui ignored info message">
To have a tab visible on page load, add the class <code>active</code> to both the initializing menu and the tab.
</div>
@ -243,7 +243,7 @@ themes : ['Default']
$('.dynamic.example .menu .item')
.tab({
cache: false,
// faking api request
// faking API request
apiSettings: {
loadingDuration : 300,
mockResponse : function(settings) {
@ -547,15 +547,15 @@ themes : ['Default']
</tr>
<tr>
<td>cache read(path)</td>
<td>Returns cached html for path</td>
<td>Returns cached HTML for path</td>
</tr>
<tr>
<td>cache add(path, html)</td>
<td>Sets cached html for path</td>
<td>Sets cached HTML for path</td>
</tr>
<tr>
<td>cache remove(path)</td>
<td>Removes cached html for path</td>
<td>Removes cached HTML for path</td>
</tr>
</table>
</div>
@ -594,7 +594,7 @@ themes : ['Default']
<tr>
<td>evaluateScripts</td>
<td>once</td>
<td>Whether inline scripts in tab html should be parsed on tab load. Defaults to <code>once</code>, parsing only on first load. Can also be set to <code>true</code> or <code>false</code> to always parse or never parse inline scripts.</td>
<td>Whether inline scripts in tab HTML should be parsed on tab load. Defaults to <code>once</code>, parsing only on first load. Can also be set to <code>true</code> or <code>false</code> to always parse or never parse inline scripts.</td>
<p>UI Transitions provide a wrapper for using css transitions in javascript providing cross-browser callbacks, advanced queuing, and feature detection.</p>
<p>UI Transitions provide a wrapper for using CSS transitions in Javascript providing cross-browser callbacks, advanced queuing, and feature detection.</p>
<p>Transitions are loosely coupled with other ui modules like <a href="/modules/dropdown.html">dropdowns</a> and <a href="/modules/modal.html">modals</a> to provide element transitions</p>
<h3 class="ui header">Types</h3>
@ -388,7 +388,7 @@ type : 'UI Module'
</div>
<h3 class="ui header">Passing in settings</h3>
<p>Transitions use similar argument shorthand as <a href="http://api.jquery.com/animate/">animate</a>. 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.</p>
<p>Transitions use similar argument shorthand as <a href="http://api.jquery.com/animate/">animate</a>. 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.</p>
<p>Semantic UI includes an <a target="_blank" href="http://semantic-org.github.io/example-github/">example project</a> designed to showcase theming. This project includes examples of creating a packaged theme, using component css overrides, and managing your themes with <code>theme.config</code>.</p>
<p>Semantic UI includes an <a target="_blank" href="http://semantic-org.github.io/example-github/">example project</a> designed to showcase theming. This project includes examples of creating a packaged theme, using component CSS overrides, and managing your themes with <code>theme.config</code>.</p>
<p>To get started click <b>the paint can</b> icon next to the notification button in the top right</p>
<p>The example project includes two html files, <code>index.html</code> is designed to swap themes using a sidebar, and uses precompiled css. <code>static.html</code> uses files outputted by Semantic UI and can be used alongside our <a href="/introduction/build-tools.html">gulp pipeline</a> to try modifying themes hands on.</p>
<p>The example project includes two HTML files, <code>index.html</code> is designed to swap themes using a sidebar, and uses precompiled CSS. <code>static.html</code> uses files outputted by Semantic UI and can be used alongside our <a href="/introduction/build-tools.html">gulp pipeline</a> to try modifying themes hands on.</p>
<p>Some special things to note:</p>
@ -264,8 +264,8 @@ type : 'Usage'
<div class="no example">
<h4 class="ui header">Definition File</h4>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>Here's an abridged version of <a href="/elements/button.html">button</a> with an explanation of each section of the file.</p>
@ -325,7 +325,7 @@ type : 'Usage'
-webkit-tap-highlight-color: @tapColor;
}
/* Additional css removed for brevity */
/* Additional CSS removed for brevity */
/* Load CSS Overrides and Inline */
.loadUIOverrides();
@ -346,7 +346,7 @@ type : 'Usage'
</div>
<div class="no example">
<h4 class="ui header">Override Files</h4>
<p>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.</p>
<p>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.</p>
<p><b>UI Views</b> 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<p>
<p><b>UI Views</b> 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<p>
Jack Lukic
9 years ago