From a4033eeeb0475826b66032c94de7375b0c294ae6 Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Mon, 29 Jul 2013 19:09:32 -0400 Subject: [PATCH] updates to documentation Former-commit-id: 7e2a4dfdbe4fcba95c8b871db039ad809dcb6554 Former-commit-id: 127091ea2fbedf30fcdc2a26a3c51f900a5eb07d --- node/src/documents/index.html | 4 +- node/src/documents/introduction.html | 71 +++++++++++++++++++ .../{intro => specification}/authoring.html | 2 +- .../{intro => specification}/downloading.html | 2 +- .../getting-started.html | 2 +- node/src/layouts/default.html.eco | 7 +- 6 files changed, 81 insertions(+), 7 deletions(-) create mode 100755 node/src/documents/introduction.html rename node/src/documents/{intro => specification}/authoring.html (98%) rename node/src/documents/{intro => specification}/downloading.html (98%) rename node/src/documents/{intro => specification}/getting-started.html (99%) diff --git a/node/src/documents/index.html b/node/src/documents/index.html index 3611814d0..fa24748fe 100755 --- a/node/src/documents/index.html +++ b/node/src/documents/index.html @@ -10,8 +10,8 @@ type : 'Semantic'

Semantic UI

-

UI is the DNA of the web.

-

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

+

UI is the vocabulary of the web.

+

Semantic empowers designers and developers by creating a shared language for user interfaces.

View UI Get Started
diff --git a/node/src/documents/introduction.html b/node/src/documents/introduction.html new file mode 100755 index 000000000..d27a96030 --- /dev/null +++ b/node/src/documents/introduction.html @@ -0,0 +1,71 @@ + --- +layout : 'default' +css : 'guide' + +title : 'Getting Started' +type : 'Semantic' +--- +
+
+

Getting Started

+
+
+
+ +
+
+ Philosophy + Getting Started +
+
+

Philosophy

+

Writing front end code shouldn't require learning the naming or programming conventions of a particular developer. Semantic is an attempt to design a front end library built around common usage and convention to make adopting and sharing code with others easier.

+

The semantic framework is an attempt to create a less prescriptive front end library which others can extend and modify to enhance their projects.

+

Getting Started

+ +

UI definitions in Semantic are namespaced with the class name ui. This is to help differentiate between parts of a UI element, and the element itself. In the example below you can see that item must be a part of a menu definition.

+ +
+
+
Home
+
Inbox
+
+
+
+
Home
+
Inbox
+
+
+

All UI definitions in semantic are stand-alone, and do not require other components to function. However, components can choose to have optional couplings with other components.

+ +

For example you might want to include a badge inside a menu. A label inside of a menu will automatically function as a badge.

+ +
+
+
Home
+
+ Inbox +
22
+
+
+
+
+
Home
+
+ Inbox +
22
+
+
+
+

Class names in semantic always use single english words. If a class name is an adjective it is a type or variation of an element. A type is a mutually exclusive change to an element, while a variation can be used together with other variations.

+

Semantic has five different ways UI elements can be defined. As an element, collection, view, module, or behavior.

+ +
    +
  • Element - a basic building block of a website, exists alone or in homogenous groups
    • +
  • Colleciton - a group of several elements which are usually found together
    • +
  • Module - an element where its behavior is included as part of its definition
    • +
  • Behavior - a definition of behavior that exists without any physical description
    • +
  • View - a way to present specific website content
    • +
+ +
\ No newline at end of file diff --git a/node/src/documents/intro/authoring.html b/node/src/documents/specification/authoring.html similarity index 98% rename from node/src/documents/intro/authoring.html rename to node/src/documents/specification/authoring.html index 37f36930c..03dc8ba64 100755 --- a/node/src/documents/intro/authoring.html +++ b/node/src/documents/specification/authoring.html @@ -3,7 +3,7 @@ layout : 'default' css : 'guide' title : 'Authoring UI' -type : 'UI Introduction' +type : 'UI Specification' ---
diff --git a/node/src/documents/intro/downloading.html b/node/src/documents/specification/downloading.html similarity index 98% rename from node/src/documents/intro/downloading.html rename to node/src/documents/specification/downloading.html index ea837cb21..d5549007a 100755 --- a/node/src/documents/intro/downloading.html +++ b/node/src/documents/specification/downloading.html @@ -3,7 +3,7 @@ layout : 'default' css : 'guide' title : 'Using UI' -type : 'UI Introduction' +type : 'UI Specification' ---
diff --git a/node/src/documents/intro/getting-started.html b/node/src/documents/specification/getting-started.html similarity index 99% rename from node/src/documents/intro/getting-started.html rename to node/src/documents/specification/getting-started.html index f057bb554..86546e12e 100755 --- a/node/src/documents/intro/getting-started.html +++ b/node/src/documents/specification/getting-started.html @@ -3,7 +3,7 @@ layout : 'default' css : 'guide' title : ' Getting Started' -type : 'UI Introduction' +type : 'UI Specification' ---
diff --git a/node/src/layouts/default.html.eco b/node/src/layouts/default.html.eco index fe72397d4..c75b3de45 100755 --- a/node/src/layouts/default.html.eco +++ b/node/src/layouts/default.html.eco @@ -84,9 +84,12 @@