You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
57 lines
2.2 KiB
57 lines
2.2 KiB
---
|
|
layout : 'default'
|
|
css : 'guide'
|
|
|
|
title : 'Using UI'
|
|
type : 'UI Specification'
|
|
---
|
|
<div class="segment">
|
|
<div class="container">
|
|
<h1 class="ui header">Writing a Component</h1>
|
|
</div>
|
|
</div>
|
|
<div class="main container">
|
|
|
|
|
|
<h2 class="ui header">Creating an Element</h2>
|
|
|
|
<p>Semantic defines five categories of elements, each type of element has different definition requirements</p>
|
|
|
|
<ul class="ui list">
|
|
<li><b>Element</b> - a basic building block of a website, exists alone or in homogenous groups</li>
|
|
<li><b>Colleciton</b> - a group of several elements which are usually found together</li>
|
|
<li><b>Module</b> - an element where its behavior is included as part of its definition</li>
|
|
<li><b>Behavior</b> - a definition of behavior that exists without any physical description</li>
|
|
<li><b>View</b> - a way to present specific website content</li>
|
|
</ul>
|
|
|
|
The first step when using semantic is to initialize a directory as using semantic
|
|
<div class="code" data-type="html">
|
|
semantic init
|
|
</div>
|
|
This will create a directory, by default, 'ui' which will hold all your element definitions.
|
|
|
|
After initializing semantic, you may install other registered components. Each semantic component uses a css classname as a namespace. This namespace is also the name of the package on semantic. To search for a button for example, you could use the following command.
|
|
|
|
semantic find button
|
|
|
|
Multiple packages will appear showing possible buttons available to download.
|
|
|
|
There are four button packages:
|
|
|
|
1) Fancy: A set of rounded buttons (3 types, 22 variations)
|
|
2) Loadr: A set of buttons with expandable loaders (1 type, 10 variations)
|
|
3) Bootstrap: Classic bootstrap buttons (2 types, 10 variations)
|
|
4) Semantic: Semantic UI buttons (4 types, 20 variations)
|
|
|
|
Each package that uses the button namespace also contains a name. Use this to specify what type of element you want to install.
|
|
|
|
semantic install semantic button
|
|
|
|
This will install semantic's core button library. Inside your ui directory, this will also generate a new file inside ui/docs, which will include an overview of the element.
|
|
|
|
To use a button on your page, simple link to the css and js of an element
|
|
|
|
|
|
|
|
</div>
|