|
|
|
@ -0,0 +1,71 @@ |
|
|
|
--- |
|
|
|
layout : 'default' |
|
|
|
css : 'guide' |
|
|
|
|
|
|
|
title : 'Getting Started' |
|
|
|
type : 'Semantic' |
|
|
|
--- |
|
|
|
<div class="segment"> |
|
|
|
<div class="container"> |
|
|
|
<h1 class="ui header">Getting Started</h1> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="main container"> |
|
|
|
|
|
|
|
<div class="peek"> |
|
|
|
<div class="ui vertical pointing secondary menu"> |
|
|
|
<a class="active item">Philosophy</a> |
|
|
|
<a class="item">Getting Started</a> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<h2 class="ui header">Philosophy</h2> |
|
|
|
<p> Writing front end code shouldn't require learning the naming or programming conventions of a particular developer. Semantic is an attempt to design a front end library built around common usage and convention to make adopting and sharing code with others easier.</p> |
|
|
|
<p>The semantic framework is an attempt to create a less prescriptive front end library which others can extend and modify to enhance their projects.</p> |
|
|
|
<h2 class="ui header">Getting Started</h2> |
|
|
|
|
|
|
|
<p>UI definitions in Semantic are namespaced with the class name <b>ui</b>. This is to help differentiate between parts of a UI element, and the element itself. In the example below you can see that item must be a part of a menu definition.</p> |
|
|
|
|
|
|
|
<div class="code" data-type="html" data-label="true"> |
|
|
|
<div class="ui menu"> |
|
|
|
<div class="item">Home</div> |
|
|
|
<div class="item">Inbox</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="ui menu"> |
|
|
|
<div class="item">Home</div> |
|
|
|
<div class="item">Inbox</div> |
|
|
|
</div> |
|
|
|
<div class="ui divider"></div> |
|
|
|
<p>All UI definitions in semantic are stand-alone, and do not require other components to function. However, components can choose to have optional couplings with other components.</p> |
|
|
|
|
|
|
|
<p>For example you might want to include a badge inside a menu. A label inside of a menu will automatically function as a badge.</p> |
|
|
|
|
|
|
|
<div class="code" data-type="html" data-label="true"> |
|
|
|
<div class="ui menu"> |
|
|
|
<div class="item">Home</div> |
|
|
|
<div class="item"> |
|
|
|
Inbox |
|
|
|
<div class="ui label">22</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="ui menu"> |
|
|
|
<div class="item">Home</div> |
|
|
|
<div class="item"> |
|
|
|
Inbox |
|
|
|
<div class="ui label">22</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="ui divider"></div> |
|
|
|
<p>Class names in semantic always use single english words. If a class name is an adjective it is a <b>type</b> or <b>variation</b> of an element. A <b>type</b> is a mutually exclusive change to an element, while a <b>variation</b> can be used together with other variations.</p> |
|
|
|
<p>Semantic has five different ways UI elements can be defined. As an element, collection, view, module, or behavior.</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> |
|
|
|
|
|
|
|
</div> |
Jack Lukic