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.
181 lines
9.5 KiB
181 lines
9.5 KiB
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
<title>Semantic Modules</title>
|
|
|
|
<link rel="stylesheet" href="../src/ui/flat/state.js" type="text/css" media="screen" />
|
|
<link rel="stylesheet" href="../src/ui/flat/panel.css" type="text/css" media="screen" />
|
|
<link rel="stylesheet" href="../src/ui/flat/button.css" type="text/css" media="screen" />
|
|
<link rel="stylesheet" href="../src/ui/flat/form.css" type="text/css" media="screen" />
|
|
<link rel="stylesheet" href="../src/ui/flat/icons.css" type="text/css" media="screen" />
|
|
<link rel="stylesheet" href="../src/ui/flat/table.css" type="text/css" media="screen" />
|
|
|
|
<link rel="stylesheet" href="../src/modules/shape.css" type="text/css" media="screen" />
|
|
|
|
<link rel="stylesheet" href="library/sidr.css" type="text/css" media="screen" />
|
|
<link rel="stylesheet" href="stylesheets/example.css" type="text/css" media="screen" />
|
|
|
|
<script src="../dependencies/jquery.js" type="text/javascript"></script>
|
|
<script src="../src/modules/ui/shape.js" type="text/javascript"></script>
|
|
<script src="../src/modules/behavior/state.js" type="text/javascript"></script>
|
|
|
|
<script src="library/sidr.js" type="text/javascript"></script>
|
|
<script src="javascript/example.js" type="text/javascript"></script>
|
|
|
|
</head>
|
|
|
|
<body id="example">
|
|
<div class="sidr" id="menu">
|
|
<ul>
|
|
<li class="active"><a href="module.html">Introduction</a></li>
|
|
<li><a>Download</a></li>
|
|
<li><a href="#">UI</a>
|
|
<ul>
|
|
<li><a href="button.html">Button</a></li>
|
|
<li><a>Text</a></li>
|
|
<li><a>Headers</a></li>
|
|
<li><a>Columns</a></li>
|
|
<li><a>Elements (Grid System)</a></li>
|
|
<li><a>Tags</a></li>
|
|
<li><a>Items (Lists of Content)</a></li>
|
|
<li><a>Panels (Type of Menu)</a></li>
|
|
<li><a>Forms</a></li>
|
|
<li><a>Fields</a></li>
|
|
<li><a>Checkboxes</a></li>
|
|
<li><a>Icons</a></li>
|
|
<li><a>Dividers</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#">Modules</a>
|
|
<ul>
|
|
<li><a>Accordion</a></li>
|
|
<li><a>API</a></li>
|
|
<li><a>Animation</a></li>
|
|
<li><a>Chat Room</a></li>
|
|
<li><a>Form Validation</a></li>
|
|
<li><a>Placeholder Text</a></li>
|
|
<li><a>Modal</a></li>
|
|
<li><a>Nag</a></li>
|
|
<li><a>Popup</a></li>
|
|
<li><a>Search</a></li>
|
|
<li><a>Star Rating</a></li>
|
|
<li><a>Shape</a></li>
|
|
<li><a>State</a></li>
|
|
<li><a>Tabs</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="ui left attached vertical blue menu buttons">
|
|
<div class="ui menu button">Menu</div>
|
|
</div>
|
|
<h1>
|
|
<div class="text">
|
|
Semantic
|
|
</div>
|
|
</h1>
|
|
<div class="full container">
|
|
<p>UI is the DNA of the web. Semantic empowers developers by creating a shared vocabulary for UI.</p>
|
|
|
|
<h2>What is Semantic?</h2>
|
|
|
|
<p>Semantic has two parts. The <a href="#standard">semantic standard</a>, and the <a href="#library">semantic library</a>.</b></p>
|
|
|
|
<a name="standard"></a>
|
|
<h1>The standard</h1>
|
|
<p>The semantic standard attempts to create a standard design pattern for describing static UI components (UI elements), and dynamic UI components or behavioral definitions (Javascript modules).</p>
|
|
|
|
<p><b>Static elements</b>: menus, columns, grids, tables, buttons, forms.</p>
|
|
<p><b>Dynamic components</b>: popups, modals, chat rooms.</p>
|
|
<p><b>Behavioral components</b>: form validation, state management, history.</p>
|
|
|
|
<h2>Defining UI</h2>
|
|
<p>Semantic creates an exchange format for UI, by defining a consistent HTML structure and set of class names for representing UI elements.</p>
|
|
<p>Sharing a common standard for UI releases the burden from developers at being a naming authorities in their own projects.</p>
|
|
<p>If together as a community we can define a standard for interface elements, we can share designs without having to modify our site's code to match the arbitrary specifications of a library, and interface designs can be freely exchanged between projects and teams.</p>
|
|
|
|
<h3>What's in an element</h3>
|
|
<p><b>UI elements definitions are made of 4 parts</b>:
|
|
<ol>
|
|
<li>A prototype form of an element (A bunny has two long ears and is furry)</li>
|
|
<li>A definition of the relationship between a plural and singular instance of an element (Three white bunnies are each white)</li>
|
|
<li>A definition of possible variations of the element (A bunny can be large or small and can be spotted or fuzzy)</li>
|
|
<li>A list of states which the element can exist. (A bunny can either be hopping, eating or sitting still)</li>
|
|
</ol>
|
|
<p>UI elements can be thought of as nouns, and variations as adjectives. Variations are written so to only describe the innate features of that variation, and must account for the differences when declared along-side other variations.</p>
|
|
<p>For example, in English, a large planet has a different meaning than a large chair, and would require different specific contextual definitions, but both are the same variant "largeness" to the person using the word.</p>
|
|
<p>Variations can be used together without negating each other unless used in a paradoxical way (A large small bunny).</p>
|
|
|
|
<h3>I don't know what you're talking about just show me the code</h3>
|
|
<p>If you'd like to shortcut any more explanation, check out the standard definition for a UI button for a live example.</p>
|
|
<a class="blue ui button" href="button.html">UI Button Spec</a>
|
|
|
|
<h2>Defining Modules</h2>
|
|
<p>The Semantic modules standard is created primarily to accomplish two things:</p>
|
|
<ol>
|
|
<li>Provide conveniences for module authors so that they can be written faster and without clutter.</li>
|
|
<li>Add features which make understanding and debugging other developers' modules simpler</li>
|
|
</ol>
|
|
|
|
<h3>Why use Semantic Modules?</h3>
|
|
<ol>
|
|
<li><b>Puts accessibility first</b>. Although Coffeescript is beautiful, and Angular is smart, Semantic has a different agenda: to be easy to use, and opinionless. Semantic can be thought of more as the <a href="http://en.wikipedia.org/wiki/Aaron_Copland">Aaron Copland</a> of programming libraries. It only requires an understanding of jQuery and Javascript to begin writing code. If you're stuck there are also <a href="#">plenty of examples</a> to help you get started.</li>
|
|
<li><b>Is self documenting.</b> Instead of reading through inline comments to determine what a developer is intending, semantic allows developers to pass meaningful debug data where its most useful: the javascript console. This allows you to see the sequence of events that occur in a module , along with useful debug information, like the value of significant variables. If you're in the source code, debug statements also read similarly to code comments which provide context. <a href="#">Show me</a>
|
|
<li><b>Designed to separate the arbitrary bits from the core logic of your module.</b> Ever scroll through an unfimiliar library looking for the line of code where they define the ID tag for an expected html structure? Semantic keeps you from ever having to do that again. Developer decisions like metadata, classnames, selectors, and messages are separated from the less arbitrary parts of code. <a href="#">Show me</a> </li>
|
|
<li><b>Lets you access anything, and change everything.</b> Methods defined as part of module definitions are all invokable. Semantic also maps from dot notation to their appropriate locations inside the module, allowing developers not to only make flat modules. Settings can be changed at initialization, or after. Module defaults can be changed whenever. <a href="#">Show me</a></li>
|
|
<li><b>Plays nice with other libraries</b>. Modules have teardown methods which will remove any bound events or initialized code. Modules also use namespaced events so you can have more flexibility over defining and clearing them</li>
|
|
<li><b>Patterns for every need</b>. Semantic has patterns that work well both as a widget factory, and as a single entity.</li>
|
|
</ol>
|
|
|
|
<h3>You really like to talk. Lets see some code</h3>
|
|
<p>For a complete definition of the specification check to annotated source:</p>
|
|
|
|
<div class="ui blue buttons">
|
|
<a class="ui button">Single Instance</a>
|
|
<a class="ui button" href="generated/multiple.html">Many Instances</a>
|
|
</div>
|
|
|
|
<a name="library"></a>
|
|
<h1>The Libraries</h1>
|
|
<p>To semantic library is a set of UI elements and javascript modules that provides an example implementation of the Semantic standard. The purpose is to be useful in their own right for developers, but also to provide a guide for how the standard can be used.</p>
|
|
<h3>The UI Library</h3>
|
|
<ul class="list">
|
|
<li><a href="button.html">Buttons</a></li>
|
|
<li><a>Text</a></li>
|
|
<li><a>Headers</a></li>
|
|
<li><a>Columns</a></li>
|
|
<li><a>Elements (Grid System)</a></li>
|
|
<li><a>Tags</a></li>
|
|
<li><a>Items (Lists of Content)</a></li>
|
|
<li><a>Panels (Type of Menu)</a></li>
|
|
<li><a>Forms</a></li>
|
|
<li><a>Fields</a></li>
|
|
<li><a>Checkboxes</a></li>
|
|
<li><a>Icons</a></li>
|
|
<li><a>Dividers</a></li>
|
|
</ul>
|
|
<p>The aim is to release pieces of the library on a schedule over the course of the next few months.</p><a class="big ui button">UI Release Calendar</a>
|
|
<h3>The module library</h3>
|
|
<p>Javascript modules.</p>
|
|
<ul class="list">
|
|
<li>Accordion</li>
|
|
<li>API</li>
|
|
<li>Animation</li>
|
|
<li>Chat Room</li>
|
|
<li>Form Validation</li>
|
|
<li>Placeholder Text</li>
|
|
<li>Modal</li>
|
|
<li>Nag</li>
|
|
<li>Popup</li>
|
|
<li>Search</li>
|
|
<li>Star Rating</li>
|
|
<li>Shape</li>
|
|
<li>State</li>
|
|
<li>Tabs</li>
|
|
</ul>
|
|
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|