diff --git a/node/src/documents/collection.html b/node/src/documents/collection.html index dc03b699c..5bd3a04d8 100755 --- a/node/src/documents/collection.html +++ b/node/src/documents/collection.html @@ -3,7 +3,7 @@ layout : 'default' css : 'index' title : 'UI Collections' -type : 'Library' +type : 'Semantic' ---
@@ -13,87 +13,86 @@ type : 'Library'
-
-

Types of Collections

- -
-
-
-
-
- - -
-
- - -
+

Types of Collections

+ +
+
+
+
+
+ +
-
-
- Form -

A form is used to solicit a user response

-
-
-
-
-
-
1
-
2
-
3
+
+ +
-
- Grid -

A grid helps harmonize negative space in a layout

-
-
-
-
-
Friends
-
Messages
-
-
-
- Menu -

A menu organizes related links

-
+
+ Form +

A form is used to solicit a user response

-
-
- - - - - - - - - - - -
NameStatus
John Approved
-
-
- Table -

A table collects related data into rows of content

+
+
+
+
+
1
+
2
+
3
-
-
-
-
Alert
-

You forgot your name!

-
+
+ Grid +

A grid helps harmonize negative space in a layout

+
+
+
+
+
+ Friends + Messages + Profile
-
- Message -

Messages alert a user to something important.

+
+
+ Menu +

A menu organizes related links

+
+
+
+
+ + + + + + + + + + + +
NameStatus
John Approved
+
+
+ Table +

A table collects related data into rows of content

+
+
+
+
+
+
Alert
+

You forgot your name!

- +
+ Message +

Messages alert a user to something important.

+
+
diff --git a/node/src/documents/element.html b/node/src/documents/element.html index 41f87d2f9..73a78cb47 100755 --- a/node/src/documents/element.html +++ b/node/src/documents/element.html @@ -3,7 +3,7 @@ layout : 'default' css : 'index' title : 'UI Elements' -type : 'Library' +type : 'Semantic' ---
diff --git a/node/src/documents/index.html b/node/src/documents/index.html index 0a2384034..083a5bf4e 100755 --- a/node/src/documents/index.html +++ b/node/src/documents/index.html @@ -1,171 +1,25 @@ --- layout : 'default' css : 'index' -title : 'About' -type : 'Library' +title : 'Introduction' +type : 'Semantic' --- -
+

Semantic

-

UI is the DNA of the web. Semantic empowers designers and developers by creating a shared vocabulary for UI.

-
-
-
+

UI is the language of the web.

+

Semantic empowers designers and developers by creating a shared vocabulary for UI.

-
-
- What is Semantic? - The UI Spec - The Module Spec - The Semantic Library +
+ Download + Customize
+
-

What is Semantic?

- -

Most developers create similar types of interface elements in their codebase, things like navigation menus, buttons, and forms, but each programmer may have different ways of structuring and classifying these elements.

-

The semantic specification is a set of standards designed to help developers share a common language for defining interface elements. The semantic library is a first draft at a UI library implementing these standards.

- -

With a community developed standard for interface elements, anyone can share a style definition of a UI element, without having to restructure their websites' codebase to match.

-

Developing a standard for defining UI modules like chat rooms, pop-ups, and modals, along with a consensus on - - -

The UI Specification

-

The semantic specification creates a standard language for describing user interface elements.

- - - - - - - - - - - - - - - - - -
UI ElementsUI Onlymenus, columns, grids, tables, buttons, forms
UI ModulesUI + Behaviorpopups, modals, chat rooms
Behavioral ModulesBehavior Onlyform validation, state management, polyfills, history
- -

Exchanging Designs

-

Semantic defines HTML structures and class names for UI elements that attempt to create a common vernacular to make front end development less prescriptive.

-

Sharing language for UI releases the burden from developers at making arbitrary decisions, like naming conventions, in their own projects, and opens up the ability to swap website designs without having to restructure your codebase.

- -

What's in an Element?

-

UI elements definitions are made of 4 parts: - - - - - - - - - - - - - - - - -
A prototype form of an elementA bunny has two long ears and is furry
A definition of the relationship between a plural and singular instance of an elementThree white bunnies are each white
A definition of possible variations of the element A bunny can be large or small and can be spotted or fuzzy
A list of states which the element can exist A bunny can either be hopping, eating or sitting still
-

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.

-

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.

-

Variations can be used together without negating each other unless used in a paradoxical way (A large small bunny).

-

Plurality

-

UI elements are given a plural definition. Groups of elements can share properties, in the same way "There are two tall men" provides a shortcut to saying "there is a tall man, and another tall man".

-

Some plural relationships are not all instances of the same thing, and can be thought of as ui collections. For example a form is a collection of related UI elements, but not all items of the same type. Semantic allows for these grouping to be defined as well, so that groups of related elements can be defined together.

- -

Just Show Me the Code

-

If you'd like to shortcut any more explanation, check out the standard definition for a UI button for a live example.

- UI Button Spec - -

The Module Specification

-

In Semantic, modules are user interface elements which require a behavioral definition. For example, a pop-up is understood by the actual action that occurs, it "pops up". Without this logic any pop-up is incomplete.

-

Semantic UI modules have two components, a definition of the UI element and a behavioral definition in javascript. Semantic includes a standard javascript module pattern, which helps in defining interface elements in a similar context to UI.

- -

The goal of the module design pattern is primarily to accomplish three things:

-
    -
  1. Make debugging modules simpler by making techniques like performance profiling, and logging easier and more useful.
    2. -
  2. Make understanding new code easier, by defining a common pattern for initializing, destroying elements, modifying settings, and allowing more advanced features.
    3. -
  3. Reduce prescriptive aspects of
    4. -
- -

Why use Semantic Modules?

-
    -
  1. Puts accessibility first. -

    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 Aaron Copland of programming libraries. It only requires an understanding of jQuery and Javascript to begin writing code. If you're stuck there are also plenty of examples to help you get started.

    -
    2. -
  2. Is self documenting. -

    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. Show me -

    -
    3. -
  3. Separates arbitrary decisions from the fundamental mechanics of your module. -

    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. Show me

    -
    4. -
  4. Lets you access anything, and change everything. -

    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. Show me

    -
    5. -
  5. Plays nice with other libraries. -

    Modules include a destroy method 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 -

    -
    6. -
  6. Patterns for every need. -

    Semantic has patterns that work well both as a widget factory, and as a single entity.

    -
    7. -
- -

You really like to talk. Lets see some code

-

For a complete definition of the specification check to annotated source:

- -
- Single Instance - Many Instances -
- - -

The Libraries

-

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.

-

The UI Library

- -

The module library

-

Javascript modules.

-
    -
  • Accordion
    • -
  • API
    • -
  • Animation
    • -
  • Chat Room
    • -
  • Form Validation
    • -
  • Placeholder Text
    • -
  • Modal
    • -
  • Nag
    • -
  • Popup
    • -
  • Search
    • -
  • Star Rating
    • -
  • Shape
    • -
  • State
    • -
  • Tabs
    • -
- +
+
+
diff --git a/node/src/documents/module.html b/node/src/documents/module.html index 6a15818bc..da69dcc49 100755 --- a/node/src/documents/module.html +++ b/node/src/documents/module.html @@ -3,7 +3,7 @@ layout : 'default' css : 'index' title : 'UI Modules' -type : 'Library' +type : 'Semantic' ---
diff --git a/node/src/files/components/semantic/src/collections/items.css b/node/src/files/components/semantic/src/collections/items.css index a807e07a1..65f2178d8 100644 --- a/node/src/files/components/semantic/src/collections/items.css +++ b/node/src/files/components/semantic/src/collections/items.css @@ -229,8 +229,8 @@ box-sizing: border-box; } -.ui.items > .item > .image a, -.ui.items > .item > .image img { +.ui.items > .item > .image > a, +.ui.items > .item > .image > img { position: relative; display: block; width: 100%; @@ -239,7 +239,7 @@ -moz-border-radius: 3px; border-radius: 3px; } -.ui.items > .item > .image a:after { +.ui.items > .item > .image > a:after { position: absolute; display: block; content: ''; @@ -254,7 +254,7 @@ -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2) inset; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2) inset; } -.ui.items > .item > .image .overlay { +.ui.items > .item > .image > .overlay { position: absolute; bottom: 0px; left: 0px; @@ -273,7 +273,7 @@ text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.6); } -.ui.items > .item > .image .overlay i { +.ui.items > .item > .image > .overlay i { font-size: 1.3em; font-weight: bold; } diff --git a/node/src/files/stylesheets/semantic.css b/node/src/files/stylesheets/semantic.css index 402f0e6cd..d0d396607 100755 --- a/node/src/files/stylesheets/semantic.css +++ b/node/src/files/stylesheets/semantic.css @@ -165,7 +165,7 @@ ul.list li { h1 { margin: 0px 0px 20px; padding: 50px 0px 5px; - border-bottom: 1px solid #DDDDDD; + border-bottom: 1px solid rgba(255, 255, 255, 0.6); } h1 { margin: 0px auto; @@ -295,6 +295,37 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */ font-weight: bold; } +/*-------------- + Masthead +---------------*/ + +#example .masthead { + background-color: #EF4D6D; + padding: 75px 0px 50px; + color: #FFFFFF; +} +#example .masthead h1 { + font-size: 4em; + line-height: 1.2; + padding-bottom: 0px; +} +#example .masthead strike { + color: rgba(255, 255, 255, 0.5); +} +#example .masthead h2 { + font-weight: normal; + margin: 0.5em 0em 1em; + font-size: 1.5em; + border-bottom: none; + line-height: 1; +} +#example .masthead p { + font-size: 1.25em; + margin: 1.5em 0em 1em; + padding: 0px; +} + + /*-------------- Transparent ---------------*/ @@ -561,7 +592,7 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */ #example .highlighted.example .grid, #example .ui.type.items .image .grid { - background-color: #FCFCFC; + background-color: #F6F6F6; } #example .highlighted.example .grid .row, #example .ui.type.items .image .grid .row { diff --git a/node/src/layouts/default.html.eco b/node/src/layouts/default.html.eco index 14b794ba6..5799af7a9 100755 --- a/node/src/layouts/default.html.eco +++ b/node/src/layouts/default.html.eco @@ -3,6 +3,7 @@ <% uiElements = @getCollection("documents").findAllLive({type: $in: ['UI Element']},[{title: 1}]).toJSON() %> <% uiCollections = @getCollection("documents").findAllLive({type: $in: ['UI Collection']},[{title: 1}]).toJSON() %> <% uiModules = @getCollection("documents").findAllLive({type: $in: ['UI Module']},[{title: 1}]).toJSON() %> +<% uiSpecification = @getCollection("documents").findAllLive({type: $in: ['UI Specification']},[{title: 1}]).toJSON() %> <% currentCollection = @getCollection("documents").findAllLive({type: $in: [@document.type]},[{title: 1}]).toJSON() %> <% pageCount = @pageCount(currentCollection) %> <% pageNumber = @getPage(currentCollection, @document.id) %> @@ -90,6 +91,14 @@ <% end %>
+
+ Specification +
+ <% for element in uiSpecification: %> + <%= element.title %> + <% end %> +
+
diff --git a/src/collections/items.css b/src/collections/items.css index a807e07a1..65f2178d8 100755 --- a/src/collections/items.css +++ b/src/collections/items.css @@ -229,8 +229,8 @@ box-sizing: border-box; } -.ui.items > .item > .image a, -.ui.items > .item > .image img { +.ui.items > .item > .image > a, +.ui.items > .item > .image > img { position: relative; display: block; width: 100%; @@ -239,7 +239,7 @@ -moz-border-radius: 3px; border-radius: 3px; } -.ui.items > .item > .image a:after { +.ui.items > .item > .image > a:after { position: absolute; display: block; content: ''; @@ -254,7 +254,7 @@ -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2) inset; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2) inset; } -.ui.items > .item > .image .overlay { +.ui.items > .item > .image > .overlay { position: absolute; bottom: 0px; left: 0px; @@ -273,7 +273,7 @@ text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.6); } -.ui.items > .item > .image .overlay i { +.ui.items > .item > .image > .overlay i { font-size: 1.3em; font-weight: bold; }