diff --git a/examples/button.html b/examples/button.html index a25df78ca..ce173f7cc 100755 --- a/examples/button.html +++ b/examples/button.html @@ -7,17 +7,20 @@ + + + + + - - @@ -25,170 +28,185 @@ -
- -

Semantic UI Spec

- -

Semantic is a set of standards designed to make front end development less arbitrary. This is the definition of a button.

- -

Button

- -

The standard button:

-
Button
- -

States

- -

Can be hovered:

-
Hovered Button
-

Can be pressed in:

- -
Pressed Button
- -

Can be active:

-
Active Button
- -

Can be disabled:

-
Disabled Button
- -

Can show a loading indicator:

-
Loading Button
- -

Can alert to a succesful action:

-
Succesful Button
- -

Can alert user of an error:

-
Succesful Button
- -

Standard Variations

- -

Can have different sizes:

-
- Mini -
-
- Tiny -
-
- Small -
-
- Medium -
-
- Big -
-
- Huge -
-
- - Massive -
-
- - Gigantic -
- - -

Can have different colors:

-
Blue Button
-
Purple Button
-
Green Button
- -

Can fit parent container:

-
Fits container
- -

Buttons (Button Groups)

- -

Can exist together as groups

-
-
One
-
Two
-
Three
-
-

Groups can be vertical

-
-
One
-
Two
-
Three
-
-

Groups can be divided evenly to fit parent

-
-
One
-
Two
-
Three
-
- -

Singular variations can be applied to groups to infer all elements share the same quality

-

Blue

-
-
One
-
Two
-
Three
-
-

-

Large

-
-
One
-
Two
-
Three
-
- - -

Additional Variations

- -

Can be formatted to fit just an icon or image:

-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
- -

Can be attached to the top or bottom of other content

-
Top
-
-
Bottom
- -

Can be attached to an input field

- -
Search
- -

States

-
-

Button States

-
Normal
-
Hover
-
Down
-
Loading
+ +
+
+
Menu
+
Source
+
+
+ +

Semantic UI Spec

+ +

Semantic is a set of standards designed to make front end development less arbitrary. This is the definition of a button.

+ +

Button

+ +

The standard button:

+
Button
+ +

States

+ +

Can be hovered:

+
Hovered Button
+

Can be pressed in:

+ +
Pressed Button
+ +

Can be active:

+
Active Button
+ +

Can be disabled:

+
Disabled Button
+ +

Can show a loading indicator:

+
Loading Button
+ +

Can alert to a succesful action:

+
Succesful Button
+ +

Can alert user of an error:

+
Succesful Button
+ +

Standard Variations

+ +

Can have different sizes:

+
+ Mini +
+
+ Tiny +
+
+ Small +
+
+ Medium +
+
+ Big +
+
+ Huge +
+
+ + Massive +
+
+ + Gigantic +
+ + +

Can have different colors:

+
Blue Button
+
Purple Button
+
Green Button
+ +

Can fit parent container:

+
Fits container
+ +

Buttons (Button Groups)

+ +

Can exist together as groups

+
+
One
+
Two
+
Three
+
+

Groups can be vertical

+
+
One
+
Two
+
Three
+
+

Groups can be divided evenly to fit parent

+
+
One
+
Two
+
Three
+
+ +

Singular variations can be applied to groups to infer all elements share the same quality

+

Blue

+
+
One
+
Two
+
Three
+


-
Disabled
-
Active
-
Toggled
-
Error
-
Success
-
+

Large

+
+
One
+
Two
+
Three
+
+ + +

Additional Variations

+ +

Can be formatted to fit just an icon or image:

+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +

Can be attached to the top or bottom of other content

+
Top
+
+
Bottom
+ +

Can be attached to an input field

+
+ +
Search
+
+ +

States

+
+

Button States

+
Normal
+
Hover
+
Down
+
Loading
+ +

+
Disabled
+
Active
+
Toggled
+
Error
+
Success
+
-
+
\ No newline at end of file diff --git a/examples/example.css b/examples/example.css index fdcf09096..4ab2560d3 100755 --- a/examples/example.css +++ b/examples/example.css @@ -38,16 +38,20 @@ a:hover { #example h1, #example h2, #example h3, -#example h4, -#example h5, #example a, #example .ui { font-family: "Neutraface Bold", "Helvetica Neue", "Arial", sans-serif; + font-weight: normal } /* text and headers */ #example h1 { - margin: 20px 0px 20px; + margin: 50px 0px 20px; + padding-bottom: 5px; + border-bottom: 1px solid #DDDDDD; +} +#example h1:first-child { + margin-top: 20px; } #example h2 { margin: 40px 0px 20px; @@ -69,7 +73,8 @@ a:hover { padding: 3px 5px; } #example pre code { - + border: none; + padding: 0px; } #example p { margin: 10px 0px; @@ -101,12 +106,21 @@ a:hover { width: 700px; margin: 0px auto; } +#example .full.container { + position: relative; + width: 1000px; +} #example .shortcuts { float: right; clear: both; } +#example .menu.buttons { + position: fixed; + +} + /******************************* diff --git a/examples/example.js b/examples/example.js index c2d0c5e67..5c49082ce 100755 --- a/examples/example.js +++ b/examples/example.js @@ -77,6 +77,12 @@ shape.ready = function() { .on('click', handler.changeShape) ; + $('.menu.button') + .sidr({ + name: 'menu' + }) + ; + }; diff --git a/examples/images/heroku.png b/examples/images/heroku.png deleted file mode 100755 index 06ee22dd5..000000000 Binary files a/examples/images/heroku.png and /dev/null differ diff --git a/examples/images/jira.png b/examples/images/jira.png deleted file mode 100755 index ac48489f2..000000000 Binary files a/examples/images/jira.png and /dev/null differ diff --git a/examples/images/quirky.png b/examples/images/quirky.png deleted file mode 100755 index 3d31fbc5c..000000000 Binary files a/examples/images/quirky.png and /dev/null differ diff --git a/examples/module.html b/examples/module.html index dde6315eb..8bfe9eb5a 100755 --- a/examples/module.html +++ b/examples/module.html @@ -41,7 +41,7 @@

Semantic has two parts. The semantic standard, and the semantic library.

-

The standard

+

The standard

The semantic standard attempts to create a standard design pattern for describing static UI components (UI elements), and dynamic UI components or behavioral definitions (Javascript modules).

Static elements: menus, columns, grids, tables, buttons, forms.

@@ -50,20 +50,20 @@

Defining UI

Semantic creates an exchange format for UI, by defining a consistent HTML structure and set of class names for representing UI elements.

-

Sharing a structural standard for UI releases the burden from developers at being a naming authorities in their own projects.

- -

If, as a community we can agree on consistent UI definitions, then we can freely share variations of element designs without having to modify our site's codebase to match any declarative expectations by other developers, and interface designs can be freely exchanged between projects and teams.

+

Sharing a common standard for UI releases the burden from developers at being a naming authorities in their own projects.

+

If together as a community we can define a standard for interface elements, we can share designs without having to modify our site's code to match the arbitrary specifications of a library, and interface designs can be freely exchanged between projects and teams.

What's in an element

UI elements definitions are made of 4 parts:

    -
  1. An ideal form of an element (A bunny has two long ears and is furry)
    2. -
  2. A list of states which the element can exist. (A bunny can either be hopping, eating or sitting still)
    3. +
  3. A prototype form of an element (A bunny has two long ears and is furry)
  4. A definition of the relationship between a plural and singular instance of an element (Three white bunnies are each white)
  5. A definition of possible variations of the element (A bunny can be large or small and can be spotted or fuzzy)
    6. +
  6. A list of states which the element can exist. (A bunny can either be hopping, eating or sitting still)
-

UI elements can be thought of as nouns, and variations as adjectives. Variations are written in a way which only describe the innate features of that variation in the context of the noun. For example, in english, a large planet has a different meaning than a large chair, but both are the same variant "largeness".

-

Variations can be used together without negating each other unless used in a pardoxical way (A large small bunny).

+

UI elements can be thought of as nouns, and variations as adjectives. Variations are written so to only describe the innate features of that variation, and must account for the differences when declared along-side other variations.

+

For example, in English, a large planet has a different meaning than a large chair, and would require different specific contextual definitions, but both are the same variant "largeness" to the person using the word.

+

Variations can be used together without negating each other unless used in a paradoxical way (A large small bunny).

I don't know what you're talking about just show me the code

If you'd like to shortcut any more explanation, check out the standard definition for a UI button for a live example.

@@ -95,7 +95,7 @@
-

The Libraries

+

The Libraries

To semantic library is a set of UI elements and javascript modules that provides an example implementation of the Semantic standard. The purpose is to be useful in their own right for developers, but also to provide a guide for how the standard can be used.

The UI Library