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.
126 lines
5.4 KiB
126 lines
5.4 KiB
---
|
|
layout : 'default'
|
|
css : 'guide'
|
|
|
|
title : ' Getting Started'
|
|
type : 'UI Specification'
|
|
---
|
|
<div class="segment">
|
|
<div class="container">
|
|
<h1 class="ui header">Getting Started</h1>
|
|
</div>
|
|
</div>
|
|
<div class="main container">
|
|
|
|
<h2 class="ui header">Installing</h2>
|
|
<p>Semantic uses an eponymous package manager written in node. To begin you must <a href="http://howtonode.org/how-to-install-nodejs">install nodejs and npm</a> for your platform.</p>
|
|
|
|
<p>After these dependencies are ready to go, you can install semantic using npm
|
|
<div class="code" data-type="text" data-label="true">
|
|
npm install -g semantic
|
|
</div>
|
|
|
|
<h2 class="ui header">Usage</h2>
|
|
|
|
<p>Components are given a namespace. This makes sure the css rules dont interfere with other rules on your page.</p>
|
|
<div class="code" data-type="text" data-label="true">
|
|
semantic add button
|
|
</div>
|
|
<div class="code" data-type="html" data-label="true">
|
|
<div class="ui button">Button</div>
|
|
</div>
|
|
<div class="code" data-type="css" data-label="true">
|
|
.ui.button {
|
|
font-size: 14px;
|
|
}
|
|
</div>
|
|
|
|
<p>If multiple components are available of the same type, you can specify which one to use by adding the package's name before. A package name is different than its namespace, for example there may be many types of buttons.</p>
|
|
<div class="code" data-type="text" data-label="true">
|
|
semantic search button
|
|
>> 2 buttons were found:
|
|
>> fancy button - a collection of buttons formatted for a blog - 15 variations, 3 types
|
|
>> semantic button - the official button collection of semantic - 10 variations, 5 types
|
|
</div>
|
|
|
|
<p>Components will download inside a directory. To use these components, simply link to their javascript and css in a web page</p>
|
|
<div class="code" data-type="html">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/ui/elements/button.css">
|
|
</div>
|
|
|
|
<h3>So I downloaded a component, now what?</h3>
|
|
|
|
<p>Semantic components are self documenting, that means documentation are generated automatically after you download. You can see the element and code samples by simply opening up the corresponding html file.
|
|
<div class="code" data-type="html">
|
|
/ui/specification/button.html
|
|
</div>
|
|
|
|
<p>You can view an example of an element definition by checking out the docs for semantic's first party button definition</p>
|
|
<a class="ui teal right labeled icon button" href="/elements/button.html">
|
|
View button definition <i class="right arrow icon"></i>
|
|
</a>
|
|
|
|
<div class="ui divider"></div>
|
|
|
|
<h2 class="ui header">Why Use Semantic?</h2>
|
|
|
|
<p>
|
|
Semantic sees website development as the coallescence of two things: <b>Re-usable UI Components + Discardable Page Glue</b>
|
|
</p>
|
|
<p>Semantic is a framework for writing portable UI components, which helps you and others re-use and re-skin your ui elements in their projects.</p>
|
|
|
|
<h3 class="ui header">Definitions and Language</h3>
|
|
|
|
<p>Natural language is <em>particularly good</em> at describing visual scenes, i.e. dogs, trees, flowers and hard at defining abstractions: behavior, emotions, etc. Where programming languages are <em>particularly good</em> at describing behavior, but can be more obtuse at describing layouts.</p>
|
|
|
|
<p>Semantic adopts concepts from natural languages like: plurals, adjectives, and tense so web developers can enjoy some of the more useful features of natural language. Semantic also aspires for developers to make decision based on common usage instead of deciding arbitrarily how to name things.</p>
|
|
|
|
<p>For example if a developer wants to include a set of red buttons with icons on a page he can simple grab the semantic button and icon component:</p>
|
|
|
|
<div class="code" data-type="text">
|
|
semantic add button
|
|
semantic add icon
|
|
</div>
|
|
|
|
and then include in html:
|
|
<div class="code" data-type="html">
|
|
<div class="red ui icon buttons">
|
|
<div class="ui button">
|
|
<i class="grid layout icon"></i>
|
|
</div>
|
|
<div class="ui button">
|
|
<i class="block layout icon"></i>
|
|
</div>
|
|
<div class="ui button">
|
|
<i class="list layout icon"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="red ui icon buttons">
|
|
<div class="ui button"><i class="grid layout icon"></i></div>
|
|
<div class="ui button"><i class="block layout icon"></i></div>
|
|
<div class="ui button"><i class="list layout icon"></i></div>
|
|
</div>
|
|
|
|
<h3 class="ui header">Authoring</h3>
|
|
|
|
<p>Creating a component in semantic requires two steps:
|
|
<ol class="ui list">
|
|
<li>Defining how your element can look.</li>
|
|
<li>Writing code to match your definitions</li>
|
|
</ol>
|
|
<p>These steps can be completed in either order. If you enjoy Test-Driven-Development, you can write your specification before coding, or if you prefer a more ad-hoc approach you can swap the order, defining your element only after you finish describing it.</p>
|
|
|
|
<h3 class="ui header">Consuming</h3>
|
|
<p>Semantic is a package manager, created by other people is a simple process</p>
|
|
<ol class="ui list">
|
|
<li>Search semantic for a type of UI component</li>
|
|
<li>Open up its specification to see what it can do and how to use it.</li>
|
|
</ol>
|
|
|
|
Semantic components are self documenting, giving you the ability to download a component, and get working immediately. Each component contains a spec file, which describes what a component can do. This is used to generate documentation automatically that lives alongside your project, making sure you know exactly what exists in your CSS.</p>
|
|
|
|
|
|
|
|
</div>
|