From b681fd7d3dd4fbea2110975159fc098b39abf321 Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Thu, 6 Jun 2013 02:32:53 -0400 Subject: [PATCH] fixes some language --- .../documents/specification/authoring.html | 138 ------------------ .../src/documents/specification/cssguide.html | 2 +- .../documents/specification/htmlguide.html | 2 +- .../documents/specification/styleguide.html | 6 +- 4 files changed, 5 insertions(+), 143 deletions(-) delete mode 100755 node/src/documents/specification/authoring.html diff --git a/node/src/documents/specification/authoring.html b/node/src/documents/specification/authoring.html deleted file mode 100755 index bcd40ab12..000000000 --- a/node/src/documents/specification/authoring.html +++ /dev/null @@ -1,138 +0,0 @@ - --- -layout : 'default' -css : 'guide' - -title : 'Spec Files' -type : 'UI Specification' ---- -
-
-

Spec Files

-
-
-
- -

Introduction

- -

Semantic defines an exchange format for user interface. Writing your interface components to match the specifications allows others to easily use your interface components in their project.

- -

Writing a Spec File

- -

Before authoring an element you should begin by writing a spec file for your element. A specification file defines the structure and names used inside your element. For more information on naming convention visit our css and html guides.

-

A spec file also allows you to provide metadata to generate code for your element, this can be used to generate visual documentation of your element.

- -

Common Specification

- -

A spec file is a specially formatted json file.

-
- { - // your element name should be a single word and match to the classname of your element - "Name": "Button", - - // you may include metadata - "Author": "Jack Lukic", - "Website": "http://www.semantic-ui.com" - "Version": "2.0", - - // All elements must specify whether it is an element, collection, module, or behavior - "Type": "Element", - - // definition of the html structure of each type of an element - "Types": { - "Standard" : ".ui.button" - }, - - // States are ways which elements show an innate change in its quality. - "States": { - "Active" : "active", - "Loading" : "loading", - "Disabled" : "disabled" - }, - - - // Variations are individual classnames which your element may receive to alter its look. Variations should, for the most part, be able to be used together to create more complex styles of an element. - "Variations": { - // If a set of variations are options of a single type (for example sizing may contain, small, medium, etc) then this can be defined as an array. - "Size": [ - "mini", - "tiny", - "small", - "medium", - "large", - "huge", - "massive" - ], - // Types are exclusive forms of your element. For example a button cannot be an icon button and a text button. The definitions of the html structure of each element is written using emmet syntax. These are used to generate html structures for your elements. For more information visit: http://docs.emmet.io/abbreviations/syntax/ - "Types": { - "Standard" : ".ui.button", - "Icon" : ".ui.icon.button > i.icon", - } - "Color": [ - "black", - "green", - "red", - "blue", - "green", - "red", - "teal" - ], - "Ordinality": [ - "secondary", - "tertiary" - ], - "Attached": [ - "attached top", - "attached bottom", - "attached left", - "attached right" - ], - "Circular" : "circular", - "Fluid" : "fluid" - }, - - // You may define a list of dummy text and selectors which can be filled with them. This is used by generators to export a style guide of your interface element. If you specify an array, each item will be used in order to fill the content of each match. - "Text": { - ".ui.button": ["Button", "Click Me", "Lorem Ipsum"] - }, - - // Your module may optionally include a text definition of its variations to help clarify their purpose. This may include the definition of types or variations - "Definition": { - "Standard" : "A simple button", - "Icon" : "A button icon is formatted to contain only an icon", - "Size" : "A button can vary in size", - "Color" : "A button can have different colors", - "Ordinality" : "A button can blend into a page", - "Attached" : "A button can attach to other content", - "Circular" : "A button can be circular", - "Fluid" : "A button can be fluid" - } - } -
- -

UI Elements

- -

A UI element is a basic building block of a website. It may have a singular or group (plural) definition

- -
- { - // in addition to the parameters above an element may contain a definition for its singular and plural type - "Types": { - // these types can only exist for class="ui button" - "Singular": { - "Standard" : ".ui.button", - "Icon" : ".ui.icon.button > i.add.icon", - "Labeled Icon" : ".ui.labeled.icon.button > i.add.icon" - }, - // these types can exist only for class="ui button" - "Group": { - "Standard" : ".ui.buttons > .button+.button+.button", - "Icon" : ".ui.buttons > ( (.button > i.icon.user) + (.button > i.icon.heart) + (.button > i.icon.lab))", - "Conditional" : ".ui.buttons > .button+.or+.button", - "Vertical" : ".vertical.ui.buttons > .button+.button+.button" - } - } - } -
- - -
\ No newline at end of file diff --git a/node/src/documents/specification/cssguide.html b/node/src/documents/specification/cssguide.html index 41ca324a4..3008da677 100755 --- a/node/src/documents/specification/cssguide.html +++ b/node/src/documents/specification/cssguide.html @@ -2,7 +2,7 @@ layout : 'default' css : 'guide' -title : 'CSS Guide' +title : 'CSS' type : 'UI Specification' ---
diff --git a/node/src/documents/specification/htmlguide.html b/node/src/documents/specification/htmlguide.html index e9faae136..e45d833ef 100755 --- a/node/src/documents/specification/htmlguide.html +++ b/node/src/documents/specification/htmlguide.html @@ -2,7 +2,7 @@ layout : 'default' css : 'guide' -title : 'HTML Guide' +title : 'HTML' type : 'UI Specification' ---
diff --git a/node/src/documents/specification/styleguide.html b/node/src/documents/specification/styleguide.html index 3744cd3bb..bc9247365 100755 --- a/node/src/documents/specification/styleguide.html +++ b/node/src/documents/specification/styleguide.html @@ -2,7 +2,7 @@ layout : 'default' css : 'guide' -title : 'Authoring Guide' +title : 'Language' type : 'UI Specification' ---
@@ -12,9 +12,9 @@ type : 'UI Specification'
-

Creating UI Definitions

+

UI Language

-

Defining anything will involve some slightly arbitrary decision making. The goal of semantic is not to create code that is free from prescription, but to create code that tends to avoid it if possible.

+

Defining anything will involve some subjectivity. The goal of semantic is not to create code that is free from prescription, but to create code that tends to avoid arbitrary decisions if a conventional choice presents itself.

The following are some guidelines which help avoid some common pitfalls in writing UI element definitions.