- Looking for form validation?
+ Looking for form validation?
Form input can be validated using the form behavior definition
@@ -27,10 +27,10 @@ type : 'UI Collection'
Types
-
+
Form:
-
+
Forms always include fields, and fields always contain form elements. Fields themselves may also include:
ui inputs, standard form fields, ui labels, textareas, as well as:
checkboxes, and message blocks.
@@ -79,7 +79,7 @@ type : 'UI Collection'
-
+
Text Area
A textarea uses the default form element
@@ -90,7 +90,7 @@ type : 'UI Collection'
-
+
Checkbox
UI Checkboxes are styled forms of standard form checkboxes.
@@ -100,18 +100,25 @@ type : 'UI Collection'
-
+
-
+
+
+
+
+
+
+
+
-
+
-
+
Radio Box
Radio boxes are styled forms of standard form radio controls.
@@ -155,7 +162,7 @@ type : 'UI Collection'
-
+
Text Block
Text blocks have special meaning inside a form tag. Any info, error, or warning message blocks found inside a form are hidden by default.
@@ -173,11 +180,11 @@ type : 'UI Collection'
States
Form
-
+
Loading
If a form is in loading state, it will automatically show a loading indicator:
-
+
@@ -207,7 +214,7 @@ type : 'UI Collection'
Submit
-
+
Error
If a form is in an error state, it will automatically show any error message blocks:
@@ -244,11 +251,11 @@ type : 'UI Collection'
Submit
-
+
Warning
If a form is in warning state, it will automatically show any warning message block:
-
+
Could you check something!
@@ -287,13 +294,13 @@ type : 'UI Collection'
Submit
-
+
Form Fields
-
+
Error
Individual fields may contain an error state
-
+
@@ -307,11 +314,11 @@ type : 'UI Collection'
-
+
Disabled
Individual fields may be disabled or read only
-
+
@@ -327,7 +334,7 @@ type : 'UI Collection'
Variations
-
+
Forms
@@ -347,7 +354,7 @@ type : 'UI Collection'
Submit
-
+
Size
A form can also be small or large
@@ -379,11 +386,11 @@ type : 'UI Collection'
Submit
-
+
Inverted
A form on a dark background may have to invert its color scheme
-
+
@@ -407,10 +414,10 @@ type : 'UI Collection'
-
-
+
+
Fields
-
+
Inline
A field can have its label next to instead of above it.
@@ -421,7 +428,7 @@ type : 'UI Collection'
-
+
Date
A field can let users know they are for dates
@@ -432,10 +439,10 @@ type : 'UI Collection'
-
-
+
+
Groups
-
+
Fields
Fields can exist together side by side
@@ -456,7 +463,7 @@ type : 'UI Collection'
-
+
Grouped Fields
Fields can be grouped to show related choices
@@ -467,28 +474,28 @@ type : 'UI Collection'
-
+
-
+
-
+
-
+
@@ -512,5 +519,5 @@ type : 'UI Collection'
-
+
\ No newline at end of file
diff --git a/node/src/documents/elements/button.html b/node/src/documents/elements/button.html
index 47455fc07..ffb37f073 100755
--- a/node/src/documents/elements/button.html
+++ b/node/src/documents/elements/button.html
@@ -55,6 +55,22 @@ type : 'UI Element'
+
+
Primary
+
A button can be formatted to greatly emphasize interaction with a particular button
+
+ Add to Cart
+
+
+
+
+
Secondary
+
A button can be formatted to show slightly emphasis a particular button
+
+ Save
+
+
+
Social
A button can be formatted to link to a social website
@@ -189,7 +205,7 @@ type : 'UI Element'
Add Friend
It's fairly commonly known that you can set text selection colors in css for a page, but its less commonly known that you can use multiple highlight colors in a single page.
When you have colored content that needs a border to match its current color, try using a 1 pixel inset box shadow with an RGBA value.
@@ -356,9 +388,9 @@ type : 'UI Guide'
}
-
No wrappers, no excess markup
+
Avoid non-semantic tags, make wrappers groups
UI elements should be designed to include the minimum footprint of an element. If extra styling is needed, consider using pseudo selectors :after and :before. This allows for the creation of two extra divs inside each div context which can almost always be enough to accomodate extra styling.
-
If there is no other option than wrapping content in a containing HTML element, consider using a name that describes the content instead of the word wrapper or container.
+
If there is no other option than wrapping content in a containing HTML element, consider using a singular/plural relationship by having the wrapper describe its contents instead of an arbitrary class name like wrapper
/* not tops */
.ui.message .wrapper .title,
diff --git a/node/src/documents/index.html.eco b/node/src/documents/index.html.eco
index 1626c9d7d..f28a781e5 100755
--- a/node/src/documents/index.html.eco
+++ b/node/src/documents/index.html.eco
@@ -15,7 +15,7 @@ type : 'Semantic'
Semantic UI
UI is the vocabulary of the web.
-
Semantic empowers designers and developers by creating a shared language for user interfaces.
+
Semantic empowers designers and developers by creating a language for sharing UI.
diff --git a/node/src/documents/introduction/definitions.html b/node/src/documents/introduction/definitions.html
index 9f2a05ffa..b1de21743 100755
--- a/node/src/documents/introduction/definitions.html
+++ b/node/src/documents/introduction/definitions.html
@@ -23,27 +23,27 @@ type : 'UI Introduction'
Authoring
-
+
Defining Definitions
Definitions in semantic are groups of css, fonts, images, and javascript which make up a single element. Unlike other javascript libraries, semantic UI elements are stand-alone and only require their own assets to function correctly.
CSS Definitions avoid conflicts with other elements by descending rules from a common ui namespace. UI namespaces should use a single word class name that represents its function descriptively on a web site. For example, a button will be namespaced in html using the class name "ui button".
-
Definition Types
+
Definition Types
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 groups
Collection
-
a heterogeneous group of several elements which are usually found together
+
a heterogeneous group of several elements which can usually be found together. often pairs with individual elements
View
-
a way to present common website content
+
a way to present common website content like comments, activity feeds
Module
@@ -60,7 +60,7 @@ type : 'UI Introduction'
UI Elements are page elements which are indivisible. 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 in groups. Plural variations allow you to only specify qualities once, allowing them to be inferred across all members of a group.
-
+
Cancel
@@ -68,12 +68,12 @@ type : 'UI Introduction'
- Examples of UI elements:
+
Examples of UI elements:
Button
-
Button
+
Button
@@ -85,32 +85,33 @@ type : 'UI Introduction'
Input
-
+
+
Loader
-
+
Segment
-
Segment
+
Segment
UI Collections
-
+
UI Collections are groups of heteregeneous page 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 definitions, collections are not typically useful to define in plural.
-
Examples of UI collections:
+
Examples of UI collections:
Forms
Tables
@@ -131,10 +132,10 @@ type : 'UI Introduction'
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:
+
Examples of UI views:
Comment Feed
Activity Feed
@@ -155,16 +156,13 @@ type : 'UI Introduction'
-
Mostly tag ambivalent
-
-
Semantic is based on class names, instead of tags. This means, except for links, tables and form elements, you can use semantic with tags like <div> <article> <nav> without any difference.
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.
-
+
@@ -174,8 +172,8 @@ type : 'UI Introduction'
-
The same variation can also be useful in the context of a menu.
-
+
The same variation can also be useful in the context of a menu although the implementation may be different.
+
Section 1
@@ -194,7 +192,7 @@ type : 'UI Introduction'
Next: Element Types
-
@@ -115,12 +115,12 @@ type : 'UI Behavior'
Submit
-
+
-
Validation w/ Message
+
Validation w/ Message
Forms that contain a ui message error block will automatically be filled in with form validation information.
The template for error messages can be modified by adjusting settings.template.error
-
+
Let's go ahead and get you signed up.
@@ -153,7 +153,7 @@ type : 'UI Behavior'
-
Custom Validation
+
Custom Validation
Custom form validation requires passing in a validation object with the rules required to validate your form.
A validation object includes a list of form elements, and rules to validate each against. Fields are matched by either the id tag, name tag, or data-validate metadata matching the identifier provided in the settings object. To pass parameters to a rule, use bracket notation
@@ -191,9 +191,9 @@ type : 'UI Behavior'
-
+
-
Inline Validation
+
Inline Validation
Validation messages can also appear inline. UI Forms automatically format labels with the className prompt. These validation prompts are also set to appear on input change instead of form submission.
To change the range of your rating, simply adjust the number of icons in the initialized html
+
+ To use any variations besides the basic rating ui icons must be included to provide the additional icons required.
+
+
+ $('.ui.rating')
+ .rating()
+ ;
+
+
+
+
+
+
+
+
+
+
+
+
+
Types
+
+
+
+
Rating
+
A basic rating
+
+
+
+
+
+
+
+
+
+
+
Star
+
A star rating uses a set of star glyphs to show a rating
+
+
+
+
+
+
+
+
+
+
+
Heart
+
A heart rating uses a set of heart glyphs to show a rating
+
+
+
+
+
+
+
+
+
Examples
+
+
+
Setting existing values
+
Starting ratings can be set either using metadata values or the setting initialRating.
+
If a metadata rating is specified it will automatically override any initial rating. This way you can set a default value but also allow it to be overridden.