From 05c76a6d3194d2d076e7c2c3f18f5c7e0af6703f Mon Sep 17 00:00:00 2001 From: jlukic Date: Sat, 12 Oct 2013 18:57:19 -0400 Subject: [PATCH] updates getting started docs --- .../introduction/definitions.html.eco | 173 +++++++++++++----- .../introduction/getting-started.html.eco | 2 +- .../src/documents/introduction/types.html.eco | 2 +- .../introduction/variations.html.eco | 36 +++- .../views/{items.html.eco => item.html.eco} | 0 node/src/files/stylesheets/semantic.css | 10 + src/collections/table.less | 3 + src/modules/checkbox.less | 2 +- 8 files changed, 174 insertions(+), 54 deletions(-) rename node/src/documents/views/{items.html.eco => item.html.eco} (100%) diff --git a/node/src/documents/introduction/definitions.html.eco b/node/src/documents/introduction/definitions.html.eco index ccde6e56c..a5a01b94d 100755 --- a/node/src/documents/introduction/definitions.html.eco +++ b/node/src/documents/introduction/definitions.html.eco @@ -1,6 +1,6 @@ --- layout : 'default' -css : 'types' +css : 'guide' status : 'draft' title : 'Definitions' @@ -30,24 +30,137 @@ type : 'UI Introduction'

Semantic has five different ui definitions. These are useful patterns for describing re-usable parts of a website.

- - + + - - + + - - + + - - + + - - + + + +
Element a basic building block of a website, exists alone or in homogenous groupsUI ElementA basic building block of a website, exists alone or in homogenous groups
Collectiona heterogeneous group of several elements which can usually be found together. often pairs with individual elementsUI CollectionA heterogeneous group of several elements which can usually be found together.
View a way to present common website content like comments, activity feedsUI ViewA way to present common website content like comments, activity feeds
Module an element that also includes behavior as part of its definitionUI ModuleAn element where its behavior is an essential part of its definition
Behavior a set of behaviors not specfically tied to a designUI BehaviorA set of free-standing actions not specfically tied to an element
+ +

Definition Sections

+

All UI components of a single type are defined similarly.

+ + + + + + + + + + + + + + + + + + + + +
All UI +
+
+
Types
+
Defines mutually exclusive types which each may have their own html
+
+
+
States
+
Defines element states like disabled, hovered, pressed down
+
+
+
Variations
+
Defines changes to an element which are not mutually exclusive and can be used together
+
+
+
Elements +
+
+
Group
+
An element can define how attributes can be shared across a group
+
+
+
+ View an example UI Button +
+
+
+
Collections +
+
+
Content
+
Content elements which can exist inside of the UI collection
+
+
+
States
+
A collection may define states for content elements or itself
+
+
+
Variations
+
A collection may define variations for content elements or itself
+
+
+
+ View an example UI Form +
+
+
+
Views +
+
+
Content
+
Content elements which can exist inside of the UI view
+
+
+
States
+
A view may define states for content elements or itself
+
+
+
Variations
+
A view may define variations for a content elements or itself
+
+
+
+ View an example UI Item +
+
+
+
Modules & Behaviors +
+
+
Behavior
+
A set of behaviors which can be invoked programatically
+
+
+
Settings
+
A settings object which can alter the default behavior when instantiating a module
+
+
+
Examples
+
A list of examples to showcase the variations in behavior of a module
+
+
+
+ View an example UI Dropdown +
+
+
+
@@ -137,14 +250,6 @@ type : 'UI Introduction'
  • Product List
    • -

    Authoring UI

    - -

    All UI: The specification defines class name and html structures which can be used to represent an element -

    -

    Elements: 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.

    -

    Collections: Collection definitions list elements that it can include, and variations which can apply to both the collection, or individual elements found in the collection.

    -

    Modules: Module definitions include a list of behaviors that are commonly associated with an element

    -

    Views: View specifications defines the types of content the view usually display, and the heirarchy typical to presenting this content to the user.

    -

    Context sensitive

    - -

    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.

    - -

    For example, a form you can have a variation called "inverted". This changes the appearance of form elements to work on dark backgrounds.

    - -
    -
    -
    - - -
    -
    -
    - -

    The same variation can also be useful in the context of a menu although the implementation may be different.

    - -
    -
    -
    Section 1
    -
    - Dropdown -
    -
    Dropdown item 1
    -
    Dropdown item 2
    -
    -
    -
    -
    -
    Next: Element Types diff --git a/node/src/documents/introduction/getting-started.html.eco b/node/src/documents/introduction/getting-started.html.eco index 6c64e17a7..54c30f5a2 100755 --- a/node/src/documents/introduction/getting-started.html.eco +++ b/node/src/documents/introduction/getting-started.html.eco @@ -29,7 +29,7 @@ $(document)

    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.

    -

    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.

    +

    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 ddda4eb62..0365216f3 100755 --- a/node/src/documents/introduction/types.html.eco +++ b/node/src/documents/introduction/types.html.eco @@ -1,6 +1,6 @@ --- layout : 'default' -css : 'types' +css : 'guide' title : 'Types' description : 'A type is an mutually exclusive change to an element' diff --git a/node/src/documents/introduction/variations.html.eco b/node/src/documents/introduction/variations.html.eco index 8e3b045ba..cf8d74ead 100755 --- a/node/src/documents/introduction/variations.html.eco +++ b/node/src/documents/introduction/variations.html.eco @@ -1,6 +1,6 @@ --- layout : 'default' -css : 'types' +css : 'guide' title : 'Variations' description : 'Variations are stackable, symbiotic changes to an elements appearance' @@ -47,7 +47,8 @@ type : 'UI Introduction'

    Stacking Variations

    -

    Another variation of a menu is an inverted menu. This alters the color contrast to appear inverted for darker backgrounds. Some variations may also mutate when used together. Lets try adding the class name red as well. Because variations are not mutually exclusive we can use these together to create a compact, inverted, red tiered menu

    +

    Another variation of a menu is an inverted menu. This alters the color contrast to appear inverted for darker backgrounds. Some variations may also mutate when used together. Lets try adding the class name red as well.

    +

    Variations are not mutually exclusive so we can use these together to create an inverted red tiered menu

    @@ -99,6 +100,37 @@ type : 'UI Introduction'
    +

    Context sensitive

    + +

    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.

    + +

    For example, a form you can have a variation called "inverted". This changes the appearance of form elements to work on dark backgrounds.

    + +
    +
    +
    + + +
    +
    +
    + +

    The same variation can also be useful in the context of a menu although the implementation may be different.

    + +
    +
    +
    Section 1
    +
    + Dropdown +
    +
    Dropdown item 1
    +
    Dropdown item 2
    +
    +
    +
    +
    + +
    Next: View Elements diff --git a/node/src/documents/views/items.html.eco b/node/src/documents/views/item.html.eco similarity index 100% rename from node/src/documents/views/items.html.eco rename to node/src/documents/views/item.html.eco diff --git a/node/src/files/stylesheets/semantic.css b/node/src/files/stylesheets/semantic.css index 0944810dd..4feb4e4b7 100755 --- a/node/src/files/stylesheets/semantic.css +++ b/node/src/files/stylesheets/semantic.css @@ -200,6 +200,16 @@ a:hover { margin-left: 2em; } +/*-------------- + Intro +---------------*/ + +body.guide .main h3 { + margin: 3rem 0em 0.5rem; +} +body.guide .main.container > * { + max-width: 800px; +} /*-------------- diff --git a/src/collections/table.less b/src/collections/table.less index 6963047ac..c39738055 100755 --- a/src/collections/table.less +++ b/src/collections/table.less @@ -486,6 +486,9 @@ .ui.basic.table td { padding: 0.8em 0.5em; } +.ui.basic.table tbody tr:nth-child(2n) { + background-color: transparent !important; +} /*-------------- diff --git a/src/modules/checkbox.less b/src/modules/checkbox.less index 662a6a9f2..5582e1607 100755 --- a/src/modules/checkbox.less +++ b/src/modules/checkbox.less @@ -43,7 +43,7 @@ position: relative; min-width: 1em; - height: 1em; + height: 1.5em; padding-left: 2em; outline: none;