Jack Lukic
9 years ago
@ -1,144 +0,0 @@ |
|||
y--- |
|||
layout : 'default' |
|||
css : 'list' |
|||
|
|||
title : 'UI Collections' |
|||
description : 'UI collections are elements which contain other elements which often appear together.' |
|||
type : 'Semantic' |
|||
--- |
|||
|
|||
<%- @partial('header') %> |
|||
|
|||
<div class="main ui container"> |
|||
<h2 class="ui dividing header">Types of Collections</h2> |
|||
|
|||
<div class="ui type two stackable collection cards"> |
|||
<div class="card"> |
|||
<div class="image"> |
|||
<div class="ui segment"> |
|||
<div class="ui breadcrumb"> |
|||
<a class="section">Food</a> |
|||
<div class="divider"> / </div> |
|||
<a class="section">Fruit</a> |
|||
<div class="divider"> / </div> |
|||
<div class="active section">Apples</div> |
|||
</div> |
|||
<div class="ui divider"></div> |
|||
<div class="ui breadcrumb"> |
|||
<a class="section">Food</a> |
|||
<i class="right arrow icon divider"></i> |
|||
<a class="section">Fruit</a> |
|||
<i class="right arrow icon divider"></i> |
|||
<div class="active section">Apples</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="content"> |
|||
<a href="/collections/breadcrumb.html" class="header">Breadcrumb</a> |
|||
<p class="description">A breadcrumb is a menu to show the location of the current section in relation to other sections.</p> |
|||
</div> |
|||
</div> |
|||
<div class="card"> |
|||
<div class="image"> |
|||
<div class="ui fluid form segment"> |
|||
<div class="field"> |
|||
<label>Name</label> |
|||
<div class="ui left icon input"> |
|||
<i class="user icon"></i> |
|||
<input type="text" placeholder="Name"> |
|||
</div> |
|||
</div> |
|||
<div class="field"> |
|||
<label>E-mail</label> |
|||
<div class="ui left icon input"> |
|||
<i class="email icon"></i> |
|||
<input type="text" placeholder="E-mail"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="content"> |
|||
<a href="/collections/form.html" class="header">Form</a> |
|||
<p class="description">A form is used to solicit a user response</p> |
|||
</div> |
|||
</div> |
|||
<div class="card"> |
|||
<div class="image"> |
|||
<div class="ui three column aligned page grid"> |
|||
<div class="column"><div class="ui segment">1</div></div> |
|||
<div class="column"><div class="ui segment">2</div></div> |
|||
<div class="column"><div class="ui segment">3</div></div> |
|||
</div> |
|||
</div> |
|||
<div class="content"> |
|||
<a href="/collections/grid.html" class="header">Grid</a> |
|||
<p class="description">A grid helps harmonize negative space in a layout</p> |
|||
</div> |
|||
</div> |
|||
<div class="card"> |
|||
<div class="image"> |
|||
<div class="ui three item menu"> |
|||
<a class="active item">Friends</a> |
|||
<a class="item">Messages</a> |
|||
<a class="item">Profile</a> |
|||
</div> |
|||
<div class="ui three item secondary menu"> |
|||
<a class="active item">Friends</a> |
|||
<a class="item">Messages</a> |
|||
<a class="item">Profile</a> |
|||
</div> |
|||
<div class="ui three item secondary pointing menu"> |
|||
<a class="active item">Friends</a> |
|||
<a class="item">Messages</a> |
|||
<a class="item">Profile</a> |
|||
</div> |
|||
</div> |
|||
<div class="content"> |
|||
<a href="/collections/menu.html" class="header">Menu</a> |
|||
<p class="description">A menu organizes related links</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="card"> |
|||
<div class="image"> |
|||
<div class="ui error message top attached"> |
|||
<div class="header">We're sorry we can't process your idea just yet</div> |
|||
<p>Please enter your name</p> |
|||
</div> |
|||
</div> |
|||
<div class="content"> |
|||
<a href="/collections/message.html" class="header">Message</a> |
|||
<p class="description">Messages alert a user to something important.</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="card"> |
|||
<div class="image"> |
|||
<table class="ui celled sortable definition top attached table segment"> |
|||
<thead> |
|||
<tr><th>Name</th> |
|||
<th>Status</th> |
|||
</tr></thead> |
|||
<tbody> |
|||
<tr class="positive"> |
|||
<td>John</td> |
|||
<td> Approved</td> |
|||
</tr><tr> |
|||
<td>John</td> |
|||
<td> Unconfirmed</td> |
|||
</tr> |
|||
<tr class="negative"> |
|||
<td>Sally</td> |
|||
<td> Denied</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
<div class="content"> |
|||
<a href="/collections/table.html" class="header">Table</a> |
|||
<p class="description">A table collects related data into rows of content</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
@ -1,50 +0,0 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'guide' |
|||
|
|||
title : 'Authoring UI' |
|||
type : 'UI Specification' |
|||
--- |
|||
|
|||
<%- @partial('header') %> |
|||
|
|||
<div class="main ui 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> |
|||
|
|||
Creating Components |
|||
===================================== |
|||
|
|||
The first step after deciding what type of element you are creating is writing a spec file, these allow you to define the language for describing your interface element before beginning to write a component. The spec file can be used to generate a css and javascript stub which will give you a starting point for writing your component. Spec files content varies depending on which of the five UI types are being defined. |
|||
|
|||
Here's an example spec file for a ui element button. You can read more about creating spec files <here> |
|||
|
|||
<whatever> |
|||
|
|||
After creating a spec file you can use semantic to generate ui components. Simply specify a package name and json spec file. |
|||
|
|||
semantic generate awesome button.json |
|||
|
|||
This will create a stub css (and possibly js) file in ui/element with your definition. This will also create a stub html file in docs/, this is the visual representation of your element definition, and will appear unformatted until you begin to create your css. |
|||
|
|||
As you edit each css definition to create the look and feel of your element, you can refresh this page to verify each element appears properly. After you finish writing your UI component, if you would like to register your package to be used by others. No need to package anything up, simply type |
|||
|
|||
semantic register awesome button |
|||
|
|||
Assuming your package name is not taken, your buttons will now be available on semantic. |
|||
|
|||
|
|||
|
|||
|
|||
</div> |
|||
@ -1,57 +0,0 @@ |
|||
--- |
|||
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 ui 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> |
|||
@ -1,126 +0,0 @@ |
|||
--- |
|||
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 ui 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> |
|||
@ -1,133 +0,0 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'guide' |
|||
|
|||
title : 'Spec Files' |
|||
type : 'UI Specification' |
|||
--- |
|||
|
|||
<%- @partial('header') %> |
|||
|
|||
<div class="main ui container"> |
|||
|
|||
<h2>Introduction</h2> |
|||
|
|||
<p>Semantic defines an exchange format for user interface. Writing your interface components to match the specifications allows others to easily use your interface components in their project.</p> |
|||
|
|||
|
|||
<h3>Writing a Spec File</h3> |
|||
|
|||
<p>Before authoring an element you should begin by writing a spec file for your element. A specification file defines the structure and names used inside your element. For more information on naming convention visit our css and html guides.</p> |
|||
<p>A spec file also allows you to provide metadata to generate code for your element, this can be used to generate visual documentation of your element.</p> |
|||
|
|||
<h3>Common Specification</h3> |
|||
|
|||
<p>A spec file is a specially formatted json file.</p> |
|||
<div class="code" type="javascript"> |
|||
{ |
|||
// your element name should be a single word and match to the classname of your element |
|||
"Name": "Button", |
|||
|
|||
// you may include metadata |
|||
"Author": "Jack Lukic", |
|||
"Website": "http://www.semantic-ui.com" |
|||
"Version": "2.0", |
|||
|
|||
// All elements must specify whether it is an element, collection, module, or behavior |
|||
"Type": "Element", |
|||
|
|||
// Types are exclusive forms of your element. For example a button cannot be an icon button and a text button. The definitions of the html structure of each element is written using emmet syntax. These are used to generate html structures for your elements. For more information visit: http://docs.emmet.io/abbreviations/syntax/ |
|||
"Types": { |
|||
"Standard" : ".ui.button", |
|||
"Icon" : ".ui.icon.button > i.icon", |
|||
} |
|||
|
|||
// States are ways which elements show an innate change in its quality. |
|||
"States": { |
|||
"Active" : "active", |
|||
"Loading" : "loading", |
|||
"Disabled" : "disabled" |
|||
}, |
|||
|
|||
|
|||
// Variations are individual classnames which your element may receive to alter its look. Variations should, for the most part, be able to be used together to create more complex styles of an element. |
|||
"Variations": { |
|||
// If a set of variations are options of a single type (for example sizing may contain, small, medium, etc) then this can be defined as an array. |
|||
"Size": [ |
|||
"mini", |
|||
"tiny", |
|||
"small", |
|||
"medium", |
|||
"large", |
|||
"huge", |
|||
"massive" |
|||
], |
|||
"Color": [ |
|||
"black", |
|||
"green", |
|||
"red", |
|||
"blue", |
|||
"green", |
|||
"red", |
|||
"teal" |
|||
], |
|||
"Ordinality": [ |
|||
"secondary", |
|||
"tertiary" |
|||
], |
|||
"Attached": [ |
|||
"attached top", |
|||
"attached bottom", |
|||
"attached left", |
|||
"attached right" |
|||
], |
|||
"Circular" : "circular", |
|||
"Fluid" : "fluid" |
|||
}, |
|||
|
|||
// You may define a list of dummy text and selectors which can be filled with them. This is used by generators to export a style guide of your interface element. If you specify an array, each item will be used in order to fill the content of each match. |
|||
"Text": { |
|||
".ui.button": ["Button", "Click Me", "Lorem Ipsum"] |
|||
}, |
|||
|
|||
// Your module may optionally include a text definition of its variations to help clarify their purpose. This may include the definition of types or variations |
|||
"Definition": { |
|||
"Standard" : "A simple button", |
|||
"Icon" : "A button icon is formatted to contain only an icon", |
|||
"Size" : "A button can vary in size", |
|||
"Color" : "A button can have different colors", |
|||
"Ordinality" : "A button can blend into a page", |
|||
"Attached" : "A button can attach to other content", |
|||
"Circular" : "A button can be circular", |
|||
"Fluid" : "A button can be fluid" |
|||
} |
|||
} |
|||
</div> |
|||
|
|||
<h3>UI Elements</h3> |
|||
|
|||
<p>A UI element is a basic building block of a website. It may have a singular or group (plural) definition</p> |
|||
|
|||
<div class="code" type="javascript"> |
|||
{ |
|||
// in addition to the parameters above an element may contain a definition for its singular and plural type |
|||
"Types": { |
|||
// these types can only exist for class="ui button" |
|||
"Singular": { |
|||
"Standard" : ".ui.button", |
|||
"Icon" : ".ui.icon.button > i.add.icon", |
|||
"Labeled Icon" : ".ui.labeled.icon.button > i.add.icon" |
|||
}, |
|||
// these types can exist only for class="ui button" |
|||
"Group": { |
|||
"Standard" : ".ui.buttons > .button+.button+.button", |
|||
"Icon" : ".ui.buttons > ( (.button > i.icon.user) + (.button > i.icon.heart) + (.button > i.icon.lab))", |
|||
"Conditional" : ".ui.buttons > .button+.or+.button", |
|||
"Vertical" : ".vertical.ui.buttons > .button+.button+.button" |
|||
} |
|||
} |
|||
} |
|||
</div> |
|||
|
|||
|
|||
</div> |
|||
@ -0,0 +1,31 @@ |
|||
semantic.started = {}; |
|||
|
|||
// ready event
|
|||
semantic.started.ready = function() { |
|||
|
|||
// selector cache
|
|||
var handler = { |
|||
|
|||
}; |
|||
|
|||
console.log('zzz'); |
|||
|
|||
$('.main .ui.accordion') |
|||
.accordion() |
|||
; |
|||
$('.main .tabular .item') |
|||
.tab({ |
|||
context: 'parent', |
|||
onFirstLoad: function() { |
|||
semantic.handler.makeCode(); |
|||
} |
|||
}) |
|||
; |
|||
|
|||
}; |
|||
|
|||
|
|||
// attach ready event
|
|||
$(document) |
|||
.ready(semantic.started.ready) |
|||
; |
|||
|
After Width: | Height: | Size: 30 KiB |
|
After Width: | Height: | Size: 95 KiB |
|
After Width: | Height: | Size: 158 KiB |
|
After Width: | Height: | Size: 89 KiB |
|
After Width: | Height: | Size: 196 KiB |
|
After Width: | Height: | Size: 48 KiB |
|
After Width: | Height: | Size: 64 KiB |
|
After Width: | Height: | Size: 218 KiB |
|
After Width: | Height: | Size: 60 KiB |
|
After Width: | Height: | Size: 115 KiB |
|
After Width: | Height: | Size: 196 KiB |
|
After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 5.3 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 8.1 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 5.5 KiB |
|
After Width: | Height: | Size: 8.7 KiB |
|
After Width: | Height: | Size: 6.9 KiB |
|
After Width: | Height: | Size: 9.9 KiB |
|
After Width: | Height: | Size: 8.1 KiB |
|
Before Width: | Height: | Size: 145 KiB |
|
Before Width: | Height: | Size: 171 KiB |
|
Before Width: | Height: | Size: 271 KiB |
|
Before Width: | Height: | Size: 204 KiB |
|
Before Width: | Height: | Size: 186 KiB |
|
Before Width: | Height: | Size: 189 KiB |
|
Before Width: | Height: | Size: 159 KiB |
|
Before Width: | Height: | Size: 271 KiB |
|
Before Width: | Height: | Size: 145 KiB |
|
Before Width: | Height: | Size: 187 KiB |
|
Before Width: | Height: | Size: 172 KiB |
|
Before Width: | Height: | Size: 189 KiB |
|
Before Width: | Height: | Size: 276 KiB |
|
Before Width: | Height: | Size: 285 KiB |
|
Before Width: | Height: | Size: 321 KiB |
|
Before Width: | Height: | Size: 333 KiB |
|
Before Width: | Height: | Size: 338 KiB |
|
Before Width: | Height: | Size: 258 KiB |
|
Before Width: | Height: | Size: 289 KiB |
|
Before Width: | Height: | Size: 390 KiB |
|
Before Width: | Height: | Size: 323 KiB |