Jack Lukic
11 years ago
28 changed files with 527 additions and 208 deletions
Split View
Diff Options
-
2build/minified/collections/menu.min.css
-
2build/minified/elements/button.min.css
-
2build/minified/elements/label.min.css
-
8build/minified/modules/transition.js
-
2build/minified/modules/transition.min.js
-
8build/packaged/modules/transition.js
-
2build/packaged/semantic.min.css
-
2build/packaged/semantic.min.js
-
2build/uncompressed/collections/menu.css
-
68build/uncompressed/elements/button.css
-
1build/uncompressed/elements/label.css
-
8build/uncompressed/modules/transition.js
-
4node/src/documents/elements/button.html
-
102node/src/documents/introduction.html
-
162node/src/documents/introduction/definitions.html
-
102node/src/documents/introduction/types.html
-
81node/src/documents/introduction/variations.html
-
2node/src/files/components/semantic/collections/menu.css
-
68node/src/files/components/semantic/elements/button.css
-
1node/src/files/components/semantic/elements/label.css
-
8node/src/files/components/semantic/modules/transition.js
-
15node/src/files/javascript/semantic.js
-
1node/src/files/stylesheets/semantic.css
-
2node/src/layouts/default.html.eco
-
2src/collections/menu.less
-
69src/elements/button.less
-
1src/elements/label.less
-
8src/modules/transition.js
2
build/minified/collections/menu.min.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
2
build/minified/elements/button.min.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
2
build/minified/elements/label.min.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
2
build/minified/modules/transition.min.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
2
build/packaged/semantic.min.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
2
build/packaged/semantic.min.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,162 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'types' |
|||
|
|||
title : 'Definitions' |
|||
type : 'UI Introduction' |
|||
--- |
|||
<script src="/javascript/intro.js"></script> |
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<h1 class="ui header">UI Definitions <div class="ui red label">First Draft</div> </h1> |
|||
<p>Definitions provide a re-usable format for sharing an interface design</p> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
<div class="peek"> |
|||
<div class="ui vertical pointing secondary menu"> |
|||
<a class="active item">Definitions</a> |
|||
<a class="item">Elements</a> |
|||
<a class="item">Collections</a> |
|||
<a class="item">Modules</a> |
|||
<a class="item">Views</a> |
|||
<a class="item">Authoring</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Defining Definitions</h2> |
|||
|
|||
<p>Definitions in semantic are groups of css, fonts, images, and javascript which make up a single element on a page. A UI definition is portable, and stand-alone</p> |
|||
|
|||
<p>Definitions avoid conflicts with other elements by descending rules from a common namespace.</p> |
|||
|
|||
<p>Semantic has five different ui definitions. These are useful patterns for describing re-usable parts of a website.</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>Collection</b> - a heterogeneous group of several elements which are usually found together</li> |
|||
<li><b>View</b> - a way to present common website content</li> |
|||
<li><b>Module</b> - an element that also includes behavior as part of its definition</li> |
|||
<li><b>Behavior</b> - a set of behaviors not specfically tied to a design</li> |
|||
</ul> |
|||
|
|||
<h2 class="ui dividing header">UI Elements</h2> |
|||
|
|||
<p>UI Elements are interface elements which do not contain other elements inside themselves. This can be thought of as similar in definition as an "element" in chemistry.</p> |
|||
|
|||
<p>UI elements can have plural definitions when they are known to exist together frequently.</p> |
|||
|
|||
<p>In this case each button will be large because we understand it is a part of the large button group</p> |
|||
|
|||
<div class="code" data-type="html" data-label="true"> |
|||
<div class="large ui buttons"> |
|||
<div class="ui button">Cancel</div> |
|||
<div class="ui button">Continue</div> |
|||
</div> |
|||
</div> |
|||
|
|||
Examples of UI elements: |
|||
<ul class="ui list"> |
|||
<li>Buttons</li> |
|||
<li>Labels</li> |
|||
<li>Headers</li> |
|||
<li>Progress bars</li> |
|||
</ul> |
|||
|
|||
|
|||
<h2 class="ui dividing header">UI Collections</h2> |
|||
|
|||
<p>UI Collections are groups of heteregeneous UI elements which are usually found together. Carrying the chemistry metaphor, these can be thought of as molecules.</p> |
|||
|
|||
<p>UI collections have a definition of elements that exist, or could exist inside of them. They do not usually require all elements to be found, but they describe a list of the "usual suspects". Unlike elements, collections are not typically useful to define in plural.</p> |
|||
|
|||
<p>Examples of UI collections:</p> |
|||
<ul class="ui list"> |
|||
<li>Forms</li> |
|||
<li>Tables</li> |
|||
<li>Grids (Layout)</li> |
|||
<li>Menus</li> |
|||
</ul> |
|||
|
|||
<h2 class="ui dividing header">UI Modules</h2> |
|||
|
|||
<p>UI modules are elements where it's behavior is a fundamental part of its definition. UI Modules are dependent on the javascript which carry their definition. They also may be more complex, and have a variety of different functions. Further abusing the scientific analogy: These can be thought of as "organs".</p> |
|||
|
|||
<p>Examples of UI modules:</p> |
|||
<ul class="ui list"> |
|||
<li>Popups</li> |
|||
<li>Modals</li> |
|||
<li>Chatrooms</li> |
|||
<li>Calendar Pickers</li> |
|||
</ul> |
|||
|
|||
<h2 class="ui dividing header">UI Views</h2> |
|||
|
|||
<p>UI Views are common ways to structure types of content so that it can be understood more easily. A view's definition in semantic only describes the content which typically occupies the view.</p> |
|||
|
|||
<p>Examples of UI views:</p> |
|||
<ul class="ui list"> |
|||
<li>Comment Feed</li> |
|||
<li>Activity Feed</li> |
|||
<li>Product List</li> |
|||
</ul> |
|||
|
|||
<h2 class="ui header">Authoring UI</h2> |
|||
|
|||
<p><b>All UI</b>: The specification defines class name and html structures which can be used to represent an element |
|||
</p> |
|||
<p><b>Elements</b>: An element definition gives states which an elements can occupy, common types of that element, and if necessary, defines how the element functions in groups.</p> |
|||
<p><b>Collections</b>: Collection definitions list elements that it can include, and variations which can apply to both the collection, or individual elements found in the collection.</p> |
|||
<p><b>Modules</b>: Module definitions include a list of behaviors that are commonly associated with an element</p> |
|||
<p><b>Views</b>: View specifications defines the types of content the view usually display, and the heirarchy typical to presenting this content to the user.</p> |
|||
|
|||
<a class="ui large right labeled teal icon button"> |
|||
Authoring Guide |
|||
<i class="right arrow icon"></i> |
|||
</a> |
|||
|
|||
<h3 class="ui header">Mostly tag ambivalent</h3> |
|||
|
|||
<p>Semantic is based on class names, instead of tags. This means, except for links, tables and form elements, you can use semantic with tags like <pre><code><div> <article> <nav></code></pre> without any difference.</p> |
|||
|
|||
<h3 class="ui header">Context sensitive</h3> |
|||
|
|||
<p>In Semantic, variations maintain context based on the element they modify, but keep the same vocabulary between elements. Just like how in English, the adjective 'big' may describe a different scale for a big planet versus a big insect.</p> |
|||
|
|||
<p>For example, a form you can have a variation called "inverted". This changes the appearance of form elements to work on dark backgrounds.</p> |
|||
|
|||
<div class="code" data-type="html" data-label="true"> |
|||
<div class="ui inverted form"> |
|||
<div class="field"> |
|||
<label>Name</label> |
|||
<input type="text"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<p>The same variation can also be useful in the context of a menu.</p> |
|||
|
|||
<div class="code" data-type="html" data-label="true"> |
|||
<div class="ui inverted menu"> |
|||
<div class="item">Section 1</div> |
|||
<div class="ui simple dropdown item"> |
|||
Dropdown |
|||
<div class="menu"> |
|||
<div class="item">Dropdown item 1</div> |
|||
<div class="item">Dropdown item 2</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="ui divider"></div> |
|||
<a class="ui large right labeled teal icon button" href="/introduction/types.html"> |
|||
Next: Element Types |
|||
<i class="right arrow icon"></i> |
|||
</a> |
|||
<!-- |
|||
<h3 class="ui header" class="ui header">Known Limitations</h3> |
|||
|
|||
<p>Semantic uses the UI namespace to separate element definitions from the content that they define. This means that namespaces might conflict with other definitions if a variation or a type used matches the namespace of another ui definition.</p> |
|||
|
|||
--> |
|||
</div> |
|||
@ -0,0 +1,102 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'types' |
|||
|
|||
title : 'Types' |
|||
type : 'UI Introduction' |
|||
--- |
|||
<script src="/javascript/intro.js"></script> |
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<h1 class="ui header">Element Types |
|||
<div class="ui label">Draft</div> |
|||
<div class="ui red label">Incomplete</div> |
|||
</h1> |
|||
<p>Types are exclusive versions of an element included in its definition</p> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
<div class="peek"> |
|||
<div class="ui vertical pointing secondary menu"> |
|||
<a class="active item">Overview</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Overview</h2> |
|||
|
|||
<p>A <b>type</b> is a mutually exclusive change to an element. Types may require different html structures to work correctly, or expect different content.</p> |
|||
|
|||
<h3 class="ui header">Content</h3> |
|||
<p>For example an icon menu might expect you to include glyphs instead of text to be formatted correctly</p> |
|||
|
|||
<div class="code" data-type="html" data-label="true"> |
|||
<div class="ui icon menu"> |
|||
<a class="item"> |
|||
<i class="mail icon"></i> |
|||
</a> |
|||
<a class="item"> |
|||
<i class="lab icon"></i> |
|||
</a> |
|||
<a class="item"> |
|||
<i class="star icon"></i> |
|||
</a> |
|||
</div> |
|||
</div> |
|||
<div class="ui icon menu"> |
|||
<a class="item"> |
|||
<i class="mail icon"></i> |
|||
</a> |
|||
<a class="item"> |
|||
<i class="lab icon"></i> |
|||
</a> |
|||
<a class="item"> |
|||
<i class="star icon"></i> |
|||
</a> |
|||
</div> |
|||
|
|||
<h3 class="ui header">HTML Differences</h3> |
|||
<p>Types may also require different html to be formatted correctly. A tiered menu needs additional content like a sub menu to display itself correctly</p> |
|||
|
|||
<div class="code" data-type="html" data-label="true"> |
|||
<div class="ui tiered menu"> |
|||
<div class="menu"> |
|||
<div class="active item"> |
|||
<i class="home icon"></i> |
|||
Home |
|||
</div> |
|||
<div class="item"> |
|||
<i class="mail icon"></i> |
|||
Mail |
|||
<div class="ui label">22</div> |
|||
</div> |
|||
</div> |
|||
<div class="sub menu"> |
|||
<div class="active item">Activity</div> |
|||
<div class="item">Profile</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="ui tiered menu"> |
|||
<div class="menu"> |
|||
<div class="active item"> |
|||
<i class="home icon"></i> |
|||
Home |
|||
</div> |
|||
<div class="item"> |
|||
<i class="mail icon"></i> |
|||
Mail |
|||
<div class="ui label">22</div> |
|||
</div> |
|||
</div> |
|||
<div class="sub menu"> |
|||
<div class="active item">Activity</div> |
|||
<div class="item">Profile</div> |
|||
</div> |
|||
</div> |
|||
<div class="ui divider"></div> |
|||
<a class="ui large right labeled teal icon button" href="/introduction/variations.html"> |
|||
Next: UI Variations |
|||
<i class="right arrow icon"></i> |
|||
</a> |
|||
|
|||
</div> |
|||
@ -0,0 +1,81 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'types' |
|||
|
|||
title : 'Variations' |
|||
type : 'UI Introduction' |
|||
--- |
|||
<script src="/javascript/intro.js"></script> |
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<h1 class="ui header">Variations |
|||
<div class="ui label">Draft</div> |
|||
<div class="ui red label">Incomplete</div> |
|||
</h1> |
|||
<p>Variations are stackable, symbiotic changes to an elements appearance.</p> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
<div class="peek"> |
|||
<div class="ui vertical pointing secondary menu"> |
|||
<a class="active item">Overview</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Overview</h2> |
|||
|
|||
<p>A <b>variation</b> alters the design of an element but is not mutually exclusive. Variations can be stacked together, or be used along with altering an element's type.</p> |
|||
|
|||
<p>For example, having wide menus that take up the full width of its parent may sometimes be overwhelming. You can use the compact variation of a menu to alter its format to only take up the necessary space.</p> |
|||
|
|||
<div class="code" data-type="html" data-label="true"> |
|||
<div class="ui compact tiered menu"> |
|||
... |
|||
</div> |
|||
</div> |
|||
<div class="ui compact tiered menu"> |
|||
<div class="menu"> |
|||
<div class="active item"> |
|||
<i class="home icon"></i> |
|||
Home |
|||
</div> |
|||
<div class="item"> |
|||
<i class="mail icon"></i> |
|||
Mail |
|||
<div class="ui label">22</div> |
|||
</div> |
|||
</div> |
|||
<div class="sub menu"> |
|||
<div class="active item">Activity</div> |
|||
<div class="item">Profile</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<h3 class="ui header">Stacking Variations</h3> |
|||
|
|||
<p>Another variation of a menu is an <b>inverted menu</b>. This alters the color contrast to appear inverted for darker backgrounds. Because variations are not mutually exclusive we can use these two together to create a compact, inverted tiered menu</p> |
|||
|
|||
<div class="code" data-type="html" data-label="true"> |
|||
<div class="ui inverted compact tiered menu"> |
|||
... |
|||
</div> |
|||
</div> |
|||
<div class="ui inverted compact tiered menu"> |
|||
<div class="menu"> |
|||
<div class="active item"> |
|||
<i class="home icon"></i> |
|||
Home |
|||
</div> |
|||
<div class="item"> |
|||
<i class="mail icon"></i> |
|||
Mail |
|||
<div class="ui teal label">22</div> |
|||
</div> |
|||
</div> |
|||
<div class="sub menu"> |
|||
<div class="active item">Activity</div> |
|||
<div class="item">Profile</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
Write
Preview
Loading…
Cancel
Save