From ba433ea713efaa8dc76a4642e182cc216996acc3 Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Mon, 13 May 2013 23:05:14 -0300 Subject: [PATCH] Update README.md Former-commit-id: 329954935f7d957aa6d85861cf4e069358d161e3 Former-commit-id: 4c73c5fe83da0409bbfe8edb96b99d9fb6b09874 --- README.md | 115 +++++++++++++++++++++++++++--------------------------- 1 file changed, 57 insertions(+), 58 deletions(-) diff --git a/README.md b/README.md index 43e1b0e18..e348412eb 100755 --- a/README.md +++ b/README.md @@ -27,6 +27,63 @@ The aim of the specification is to develop conventions around structuring and na By defining a vocabulary the development community can exchange javascript and css definitions of UI in a similar language, making new code easier to grock, and reducing the complexity of starting a new project, or changing a sites design. +## Types of UI + +UI components are split into four categories, ranging from smallest to largest in scope: +* UI Elements +* UI Collections +* UI Modules +* UI Views + +### UI Elements +UI Elements are interface elements which do not contain other elements inside themselves. This can be thought of as similar in definition as an "element" in chemistry. + +UI elements can have plural definitions when they are known to exist together frequently. + +In this case each button will be large because we understand it is a part of the large button group +``` html +
+
Cancel
+
Continue
+
+``` + +Examples of UI elements: +* Buttons +* Labels +* Headers +* Progress bars + + +### UI Collections +UI Collections are groups of heteregeneous UI elements which are usually found together. Carrying the chemistry metaphor, these can be thought of as molecules. + +UI collections have a definition of elements that exist, or could exist inside of them. They do not usually require all elements to be found, but they describe a list of the "usual suspects". Unlike elements, collections are not typically useful to define in plural. + +Examples of UI collections: +* Forms +* Tables +* Grids (Layout) +* Menus + + +### 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". + +Examples of UI modules: +* Popups +* Modals +* Chatrooms +* Calendar Pickers + +### UI Views +UI Views are common ways to structure types of content so that it can be understood more easily. A view's definition in semantic only describes the content which typically occupies the view. + +Examples of UI views: +* Comment Feed +* Activity Feed +* Product List ### How it is defined @@ -107,64 +164,6 @@ Here is part of Semantic's definition of a button ``` -## Types of UI - -UI components are split into four categories, ranging from smallest to largest in scope: -* UI Elements -* UI Collections -* UI Modules -* UI Views - -### UI Elements -UI Elements are interface elements which do not contain other elements inside themselves. This can be thought of as similar in definition as an "element" in chemistry. - -UI elements can have plural definitions when they are known to exist together frequently. - -In this case each button will be large because we understand it is a part of the large button group -``` html -
-
Cancel
-
Continue
-
-``` - -Examples of UI elements: -* Buttons -* Labels -* Headers -* Progress bars - - -### UI Collections -UI Collections are groups of heteregeneous UI elements which are usually found together. Carrying the chemistry metaphor, these can be thought of as molecules. - -UI collections have a definition of elements that exist, or could exist inside of them. They do not usually require all elements to be found, but they describe a list of the "usual suspects". Unlike elements, collections are not typically useful to define in plural. - -Examples of UI collections: -* Forms -* Tables -* Grids (Layout) -* Menus - - -## 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". - -Examples of UI modules: -* Popups -* Modals -* Chatrooms -* Calendar Pickers - -## UI Views -UI Views are common ways to structure types of content so that it can be understood more easily. A view's definition in semantic only describes the content which typically occupies the view. - -Examples of UI views: -* Comment Feed -* Activity Feed -* Product List - ## Usage