diff --git a/node/src/documents/introduction/definitions.html.eco b/node/src/documents/introduction/definitions.html.eco index a5a01b94d..c5d42a7c2 100755 --- a/node/src/documents/introduction/definitions.html.eco +++ b/node/src/documents/introduction/definitions.html.eco @@ -1,7 +1,6 @@ --- layout : 'default' css : 'guide' -status : 'draft' title : 'Definitions' description : 'Definitions provide a re-usable format for sharing an interface design' @@ -15,10 +14,7 @@ type : 'UI Introduction' @@ -163,8 +159,9 @@ type : 'UI Introduction' +

Types of Definitions

-

UI Elements

+

UI Elements

UI Elements are page elements which are indivisible. This can be thought of as similar in definition as an "element" in chemistry.

@@ -214,7 +211,7 @@ type : 'UI Introduction' -

UI Collections

+

UI Collections

UI Collections are groups of heterogeneous page elements which are usually found together. Carrying the chemistry metaphor, these can be thought of as molecules.

@@ -228,9 +225,9 @@ type : 'UI Introduction'
  • Menus
  • -

    UI Modules

    +

    UI Modules

    -

    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".

    +

    UI modules are elements whose behavior is a fundamental part of its definition. UI Modules are usually dependent on javascript which carries the implementation of it's behavior, although in some special circumstances the behavior can include css alone.

    Examples of UI modules:

    -

    UI Views

    +

    UI Views

    -

    UI Views are common ways to present content so that it can be understood more easily. A view's definition in semantic only describes the content which typically occupies the view.

    +

    UI Views are common tropes for presenting specific types of information. Unlike collections which focus specifically on the relation of interface elements, views focus specifically on the relation of site content to other pieces of site content.

    Examples of UI views:

    - - -
    Next: Element Types - \ No newline at end of file diff --git a/node/src/documents/introduction/getting-started.html.eco b/node/src/documents/introduction/getting-started.html.eco index 54c30f5a2..7c8c8dc58 100755 --- a/node/src/documents/introduction/getting-started.html.eco +++ b/node/src/documents/introduction/getting-started.html.eco @@ -2,7 +2,7 @@ layout : 'default' css : 'guide' -title : 'Getting Started' +title : 'Semantic Coding' description : 'An introduction to Semantic coding' type : 'UI Introduction' --- @@ -21,13 +21,17 @@ $(document)

    Interfacing Carefully

    -

    UI definitions in Semantic are given the class name ui. This is to help tell the difference between ui elements and parts of the definition of an element. For example a menu may have menu items inside of it. These items are contained as part of the menu definition but do not receive the class name ui.

    +

    UI definitions in Semantic are given the class name ui. This is to help tell the difference between ui elements and parts of the definition of an element. This means any element with the class name UI has a corresponding UI definition. + +

    For example a menu may have menu items inside of it. These items are contained as part of the menu definition but do not receive the class name ui because they are part of a UI menu collection.

    + +

    Namespacing

    Class names in semantic always use single english words. If a class name is an adjective it is either a type of element or variation of an element. CSS definitions always define adjectives in the context of a noun. In this way class names cannot pollute the namespace.

    diff --git a/node/src/documents/introduction/types.html.eco b/node/src/documents/introduction/types.html.eco index 0365216f3..3181f24ef 100755 --- a/node/src/documents/introduction/types.html.eco +++ b/node/src/documents/introduction/types.html.eco @@ -18,10 +18,10 @@ type : 'UI Introduction'

    Overview

    -

    A type is a mutually exclusive change to an element. Types may require different html structures to work correctly, or expect different content.

    +

    A type is a mutually exclusive change to an element. Types may require different html structures to work correctly, or expect different content.

    Content

    -

    An icon menu might expect you to include glyphs instead of text to be formatted correctly

    +

    For example, an icon menu might expect different content like icons glyphs instead of text to be formatted correctly

    \ No newline at end of file diff --git a/node/src/files/stylesheets/semantic.css b/node/src/files/stylesheets/semantic.css index 4feb4e4b7..2837db007 100755 --- a/node/src/files/stylesheets/semantic.css +++ b/node/src/files/stylesheets/semantic.css @@ -205,7 +205,7 @@ a:hover { ---------------*/ body.guide .main h3 { - margin: 3rem 0em 0.5rem; + margin: 2rem 0em 0.5rem; } body.guide .main.container > * { max-width: 800px;