Browse Source

iteration on docs

Former-commit-id: 623688e65cbe8e47f5a54fda28735df55d64169f
Former-commit-id: b02e7daa61661f699c67b7899e3c7624e5976093
beta
Jack Lukic 12 years ago
parent
commit
37612730d6
  1. 26
      examples/button.html
  2. 22
      examples/example.css
  3. 6
      examples/example.js
  4. BIN
      examples/images/heroku.png
  5. BIN
      examples/images/jira.png
  6. BIN
      examples/images/quirky.png
  7. 18
      examples/module.html
  8. 125
      examples/ui/button.css

26
examples/button.html

@ -7,17 +7,20 @@
<link rel="stylesheet" href="ui/state.js" type="text/css" media="screen" /> <link rel="stylesheet" href="ui/state.js" type="text/css" media="screen" />
<link rel="stylesheet" href="ui/panel.css" type="text/css" media="screen" /> <link rel="stylesheet" href="ui/panel.css" type="text/css" media="screen" />
<link rel="stylesheet" href="ui/button.css" type="text/css" media="screen" /> <link rel="stylesheet" href="ui/button.css" type="text/css" media="screen" />
<link rel="stylesheet" href="ui/form.css" type="text/css" media="screen" />
<link rel="stylesheet" href="ui/icons.css" type="text/css" media="screen" />
<link rel="stylesheet" href="ui/table.css" type="text/css" media="screen" /> <link rel="stylesheet" href="ui/table.css" type="text/css" media="screen" />
<link rel="stylesheet" href="library/sidr.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../src/shape.css" type="text/css" media="screen" /> <link rel="stylesheet" href="../src/shape.css" type="text/css" media="screen" />
<link rel="stylesheet" href="example.css" type="text/css" media="screen" /> <link rel="stylesheet" href="example.css" type="text/css" media="screen" />
<script src="../dependencies/jquery.js" type="text/javascript"></script> <script src="../dependencies/jquery.js" type="text/javascript"></script>
<script src="library/sidr.js" type="text/javascript"></script>
<script src="ui/state.js" type="text/javascript"></script> <script src="ui/state.js" type="text/javascript"></script>
<script src="../dependencies/transform2d.js" type="text/javascript"></script>
<script src="../dependencies/transform3d.js" type="text/javascript"></script>
<script src="../src/shape.js" type="text/javascript"></script> <script src="../src/shape.js" type="text/javascript"></script>
<script src="example.js" type="text/javascript"></script> <script src="example.js" type="text/javascript"></script>
@ -25,7 +28,20 @@
</head> </head>
<body id="example"> <body id="example">
<div class="container">
<div class="sidr" id="menu">
<ul>
<li><a href="#">UI Library</a></li>
<li class="active"><a href="#">Button</a></li>
<li><a href="#">Shape</a></li>
</ul>
</div>
<div class="full container">
<div class="ui left attached vertical blue menu buttons">
<div class="ui menu button">Menu</div>
<div class="ui button">Source</div>
</div>
<div class="container">
<h1>Semantic UI Spec</h1> <h1>Semantic UI Spec</h1>
@ -169,8 +185,10 @@
<div class="ui bottom attached button">Bottom</div> <div class="ui bottom attached button">Bottom</div>
<h4>Can be attached to an input field</h4> <h4>Can be attached to an input field</h4>
<div class="ui form">
<input type="text"> <input type="text">
<div class="ui attached button">Search</div> <div class="ui attached button">Search</div>
</div>
<h2>States</h2> <h2>States</h2>
<div class="state segment"> <div class="state segment">
@ -188,7 +206,7 @@
<div class="ui button success">Success</div> <div class="ui button success">Success</div>
</div> </div>
</div> </div>
</body> </body>
</html> </html>

22
examples/example.css

@ -38,16 +38,20 @@ a:hover {
#example h1, #example h1,
#example h2, #example h2,
#example h3, #example h3,
#example h4,
#example h5,
#example a, #example a,
#example .ui { #example .ui {
font-family: "Neutraface Bold", "Helvetica Neue", "Arial", sans-serif; font-family: "Neutraface Bold", "Helvetica Neue", "Arial", sans-serif;
font-weight: normal
} }
/* text and headers */ /* text and headers */
#example h1 { #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 { #example h2 {
margin: 40px 0px 20px; margin: 40px 0px 20px;
@ -69,7 +73,8 @@ a:hover {
padding: 3px 5px; padding: 3px 5px;
} }
#example pre code { #example pre code {
border: none;
padding: 0px;
} }
#example p { #example p {
margin: 10px 0px; margin: 10px 0px;
@ -101,12 +106,21 @@ a:hover {
width: 700px; width: 700px;
margin: 0px auto; margin: 0px auto;
} }
#example .full.container {
position: relative;
width: 1000px;
}
#example .shortcuts { #example .shortcuts {
float: right; float: right;
clear: both; clear: both;
} }
#example .menu.buttons {
position: fixed;
}
/******************************* /*******************************

6
examples/example.js

@ -77,6 +77,12 @@ shape.ready = function() {
.on('click', handler.changeShape) .on('click', handler.changeShape)
; ;
$('.menu.button')
.sidr({
name: 'menu'
})
;
}; };

BIN
examples/images/heroku.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.5 KiB

BIN
examples/images/jira.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

BIN
examples/images/quirky.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.8 KiB

18
examples/module.html

@ -41,7 +41,7 @@
<p>Semantic has two parts. The <a href="#standard">semantic standard</a>, and the <a href="#library">semantic library</a>.</b></p> <p>Semantic has two parts. The <a href="#standard">semantic standard</a>, and the <a href="#library">semantic library</a>.</b></p>
<a name="standard"></a> <a name="standard"></a>
<h2>The standard</h2> <h1>The standard</h1>
<p>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).</p> <p>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).</p>
<p><b>Static elements</b>: menus, columns, grids, tables, buttons, forms.</p> <p><b>Static elements</b>: menus, columns, grids, tables, buttons, forms.</p>
@ -50,20 +50,20 @@
<h2>Defining UI</h2> <h2>Defining UI</h2>
<p>Semantic creates an exchange format for UI, by defining a consistent HTML structure and set of class names for representing UI elements.</p> <p>Semantic creates an exchange format for UI, by defining a consistent HTML structure and set of class names for representing UI elements.</p>
<p>Sharing a structural standard for UI releases the burden from developers at being a naming authorities in their own projects.</p> <p>Sharing a common standard for UI releases the burden from developers at being a naming authorities in their own projects.</p>
<p>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.</p>
<p>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.</p>
<h3>What's in an element</h3> <h3>What's in an element</h3>
<p><b>UI elements definitions are made of 4 parts</b>: <p><b>UI elements definitions are made of 4 parts</b>:
<ol> <ol>
<li>An ideal form of an element (A bunny has two long ears and is furry)</li> <li>A prototype form of an element (A bunny has two long ears and is furry)</li>
<li>A list of states which the element can exist. (A bunny can either be hopping, eating or sitting still)</li>
<li>A definition of the relationship between a plural and singular instance of an element (Three white bunnies are each white)</li> <li>A definition of the relationship between a plural and singular instance of an element (Three white bunnies are each white)</li>
<li>A definition of possible variations of the element (A bunny can be large or small and can be spotted or fuzzy)</li> <li>A definition of possible variations of the element (A bunny can be large or small and can be spotted or fuzzy)</li>
<li>A list of states which the element can exist. (A bunny can either be hopping, eating or sitting still)</li>
</ol> </ol>
<p>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".</p> <p>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.</p>
<p>Variations can be used together without negating each other unless used in a pardoxical way (A large small bunny).</p> <p>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.</p>
<p>Variations can be used together without negating each other unless used in a paradoxical way (A large small bunny).</p>
<h3>I don't know what you're talking about just show me the code</h3> <h3>I don't know what you're talking about just show me the code</h3>
<p>If you'd like to shortcut any more explanation, check out the standard definition for a UI button for a live example.</p> <p>If you'd like to shortcut any more explanation, check out the standard definition for a UI button for a live example.</p>
@ -95,7 +95,7 @@
</div> </div>
<a name="library"></a> <a name="library"></a>
<h2>The Libraries</h2> <h1>The Libraries</h1>
<p>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.</p> <p>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.</p>
<h3>The UI Library</h3> <h3>The UI Library</h3>
<ul class="list"> <ul class="list">

125
examples/ui/button.css

@ -341,7 +341,6 @@
.ui.button.toggle.active.hover.down { .ui.button.toggle.active.hover.down {
border: 1px solid #77CF66; border: 1px solid #77CF66;
text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.5);
background-color: #B6F3A2; background-color: #B6F3A2;
color: #21A627; color: #21A627;
@ -365,6 +364,7 @@ input + .ui.attached.button {
margin: 0px 0px 0px -15px; margin: 0px 0px 0px -15px;
height: 14px; height: 14px;
padding: 8px 15px; padding: 8px 15px;
border: 1px solid #D0D0D0;
-webkit-box-shadow: none; -webkit-box-shadow: none;
-moz-box-shadow: none; -moz-box-shadow: none;
@ -373,6 +373,8 @@ input + .ui.attached.button {
-webkit-border-radius: 0px 5px 5px 0px; -webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px; -moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px; border-radius: 0px 5px 5px 0px;
vertical-align: top;
} }
.ui.attached.button.loading, .ui.attached.button.loading,
.ui.attached.button.loading.hover { .ui.attached.button.loading.hover {
@ -427,7 +429,6 @@ input + .ui.attached.button {
background: -ms-linear-gradient(top, #E9E9E9 0%, #F0F0F0 100%); background: -ms-linear-gradient(top, #E9E9E9 0%, #F0F0F0 100%);
background: linear-gradient(top, #E9E9E9 0%, #F0F0F0 100%); background: linear-gradient(top, #E9E9E9 0%, #F0F0F0 100%);
text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.3);
-webkit-box-shadow: -webkit-box-shadow:
0px 1px 6px -3px rgba(0, 0, 0, 0.3) inset 0px 1px 6px -3px rgba(0, 0, 0, 0.3) inset
@ -457,7 +458,6 @@ input + .ui.attached.button {
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2) inset; box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2) inset;
text-shadow: none;
} }
.ui.buttons .button.active.hover, .ui.buttons .button.active.hover,
.ui.buttons .button.active.hover a, .ui.buttons .button.active.hover a,
@ -511,13 +511,13 @@ input + .ui.attached.button {
/* standard */ /* standard */
background: url(/images/ui/throbber-blue-tiny.gif) no-repeat 50% 50%; background: url(/images/ui/throbber-blue-tiny.gif) no-repeat 50% 50%;
/* css 3 multi image */ /* css 3 multi image */
background-image: url(/images/ui/throbber-blue-tiny.gif), -webkit-linear-gradient(top, #22C1FC 0%, #1995FB 100%); background-image: url(/images/ui/throbber-blue-tiny.gif);
background-image: url(/images/ui/throbber-blue-tiny.gif), -moz-linear-gradient(top, #22C1FC 0%, #1995FB 100%); background-image: url(/images/ui/throbber-blue-tiny.gif);
background-image: url(/images/ui/throbber-blue-tiny.gif), -o-linear-gradient(top, #22C1FC 0%, #1995FB 100%); background-image: url(/images/ui/throbber-blue-tiny.gif);
background-image: url(/images/ui/throbber-blue-tiny.gif), -ms-linear-gradient(top, #22C1FC 0%, #1995FB 100%); background-image: url(/images/ui/throbber-blue-tiny.gif);
background-image: url(/images/ui/throbber-blue-tiny.gif), linear-gradient(top, #22C1FC 0%, #1995FB 100%); background-image: url(/images/ui/throbber-blue-tiny.gif);
background-position: 50% 50%, 0px 0px; background-position: 50% 50%, 0px 0px;
background-repeat: no-repeat, repeat; background-repeat: no-repeat;
-moz-border-radius: 3px; -moz-border-radius: 3px;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
@ -534,44 +534,44 @@ input + .ui.attached.button {
/* standard */ /* standard */
background: url(/images/ui/throbber-tiny.gif) no-repeat 50% 50%; background: url(/images/ui/throbber-tiny.gif) no-repeat 50% 50%;
/* css 3 multi image */ /* css 3 multi image */
background-image: url(/images/ui/throbber-tiny.gif), -webkit-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%); background-image: url(/images/ui/throbber-tiny.gif);
background-image: url(/images/ui/throbber-tiny.gif), -moz-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%); background-image: url(/images/ui/throbber-tiny.gif);
background-image: url(/images/ui/throbber-tiny.gif), -o-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%); background-image: url(/images/ui/throbber-tiny.gif);
background-image: url(/images/ui/throbber-tiny.gif), -ms-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%); background-image: url(/images/ui/throbber-tiny.gif);
background-image: url(/images/ui/throbber-tiny.gif), linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%); background-image: url(/images/ui/throbber-tiny.gif);
background-position: 50% 50%, 0px 0px; background-position: 50% 50%, 0px 0px;
background-repeat: no-repeat, repeat; background-repeat: no-repeat;
} }
/* resizes */ /* resizes */
/* blue */ /* blue */
.ui.huge.button.loading:after { .ui.huge.button.loading:after {
background-image: url(/images/ui/throbber-blue-small.gif), -webkit-linear-gradient(top, #22C1FC 0%, #1995FB 100%); background-image: url(/images/ui/throbber-blue-small.gif);
background-image: url(/images/ui/throbber-blue-small.gif), -moz-linear-gradient(top, #22C1FC 0%, #1995FB 100%); background-image: url(/images/ui/throbber-blue-small.gif);
background-image: url(/images/ui/throbber-blue-small.gif), -o-linear-gradient(top, #22C1FC 0%, #1995FB 100%); background-image: url(/images/ui/throbber-blue-small.gif);
background-image: url(/images/ui/throbber-blue-small.gif), -ms-linear-gradient(top, #22C1FC 0%, #1995FB 100%); background-image: url(/images/ui/throbber-blue-small.gif);
background-image: url(/images/ui/throbber-blue-small.gif), linear-gradient(top, #22C1FC 0%, #1995FB 100%); background-image: url(/images/ui/throbber-blue-small.gif);
} }
.ui.massive.buttons .button.loading:after, .ui.massive.buttons .button.loading:after,
.ui.gigantic.buttons .button.loading:after, .ui.gigantic.buttons .button.loading:after,
.ui.massive.button.loading:after, .ui.massive.button.loading:after,
.ui.gigantic.button.loading:after { .ui.gigantic.button.loading:after {
background-image: url(/images/ui/throbber-blue-medium.gif), -webkit-linear-gradient(top, #22C1FC 0%, #1995FB 100%); background-image: url(/images/ui/throbber-blue-medium.gif);
background-image: url(/images/ui/throbber-blue-medium.gif), -moz-linear-gradient(top, #22C1FC 0%, #1995FB 100%); background-image: url(/images/ui/throbber-blue-medium.gif);
background-image: url(/images/ui/throbber-blue-medium.gif), -o-linear-gradient(top, #22C1FC 0%, #1995FB 100%); background-image: url(/images/ui/throbber-blue-medium.gif);
background-image: url(/images/ui/throbber-blue-medium.gif), -ms-linear-gradient(top, #22C1FC 0%, #1995FB 100%); background-image: url(/images/ui/throbber-blue-medium.gif);
background-image: url(/images/ui/throbber-blue-medium.gif), linear-gradient(top, #22C1FC 0%, #1995FB 100%); background-image: url(/images/ui/throbber-blue-medium.gif);
} }
/* grey */ /* grey */
.ui.huge.grey.button.loading:after, .ui.huge.grey.button.loading:after,
.ui.huge.button.loading.active:after { .ui.huge.button.loading.active:after {
background-image: url(/images/ui/throbber-small.gif), -webkit-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%); background-image: url(/images/ui/throbber-small.gif);
background-image: url(/images/ui/throbber-small.gif), -moz-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%); background-image: url(/images/ui/throbber-small.gif);
background-image: url(/images/ui/throbber-small.gif), -o-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%); background-image: url(/images/ui/throbber-small.gif);
background-image: url(/images/ui/throbber-small.gif), -ms-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%); background-image: url(/images/ui/throbber-small.gif);
background-image: url(/images/ui/throbber-small.gif), linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%); background-image: url(/images/ui/throbber-small.gif);
} }
.ui.massive.grey.buttons .button.loading:after, .ui.massive.grey.buttons .button.loading:after,
.ui.gigantic.grey.buttons .button.loading:after, .ui.gigantic.grey.buttons .button.loading:after,
@ -581,11 +581,11 @@ input + .ui.attached.button {
.ui.gigantic.grey.buttons .button.loading.active:after, .ui.gigantic.grey.buttons .button.loading.active:after,
.ui.massive.button.loading.active:after, .ui.massive.button.loading.active:after,
.ui.gigantic.button.loading.active:after { .ui.gigantic.button.loading.active:after {
background-image: url(/images/ui/throbber-medium.gif), -webkit-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%); background-image: url(/images/ui/throbber-medium.gif);
background-image: url(/images/ui/throbber-medium.gif), -moz-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%); background-image: url(/images/ui/throbber-medium.gif);
background-image: url(/images/ui/throbber-medium.gif), -o-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%); background-image: url(/images/ui/throbber-medium.gif);
background-image: url(/images/ui/throbber-medium.gif), -ms-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%); background-image: url(/images/ui/throbber-medium.gif);
background-image: url(/images/ui/throbber-medium.gif), linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%); background-image: url(/images/ui/throbber-medium.gif);
} }
@ -625,6 +625,9 @@ input + .ui.attached.button {
content: ''; content: '';
/* standard */ /* standard */
background: #EE141D url(/images/ui/button-error.gif) no-repeat 50% 50%; background: #EE141D url(/images/ui/button-error.gif) no-repeat 50% 50%;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
} }
.ui.button.success, .ui.button.success,
@ -632,7 +635,6 @@ input + .ui.attached.button {
.ui.button.success.down { .ui.button.success.down {
background-color: #59B94B; background-color: #59B94B;
color: #FFFFFF; color: #FFFFFF;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
border-color: #588D0F; border-color: #588D0F;
} }
@ -702,17 +704,6 @@ input + .ui.attached.button {
display: block; display: block;
float: none; float: none;
} }
.ui.buttons.vertical .button,
.ui.buttons.vertical .mini.button,
.ui.buttons.vertical .tiny.button,
.ui.buttons.vertical .small.button,
.ui.buttons.vertical .massive.button,
.ui.buttons.vertical .huge.button,
.ui.buttons.vertical .gigantic.button {
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
.ui.buttons.vertical .button:first-child, .ui.buttons.vertical .button:first-child,
.ui.buttons.vertical .mini.button:first-child, .ui.buttons.vertical .mini.button:first-child,
.ui.buttons.vertical .tiny.button:first-child, .ui.buttons.vertical .tiny.button:first-child,
@ -1002,6 +993,46 @@ input + .ui.attached.button {
-moz-border-radius: 0px 0px 4px 0px; -moz-border-radius: 0px 0px 4px 0px;
border-radius: 0px 0px 4px 0px; border-radius: 0px 0px 4px 0px;
} }
/* Left Side */
.left.attached.ui.buttons {
margin-left: -1px;
-webkit-border-radius: 0px 4px 4px 0px;
-moz-border-radius: 0px 4px 4px 0px;
border-radius: 0px 4px 4px 0px;
}
.left.attached.ui.buttons .button:first-child {
margin-left: -1px;
-webkit-border-radius: 0px 4px 0px 0px;
-moz-border-radius: 0px 4px 0px 0px;
border-radius: 0px 4px 0px 0px;
}
.left.attached.ui.buttons .button:last-child {
margin-left: -1px;
-webkit-border-radius: 0px 0px 4px 0px;
-moz-border-radius: 0px 0px 4px 0px;
border-radius: 0px 0px 4px 0px;
}
/* Right Side */
.right.attached.ui.buttons,
.right.attached.ui.buttons .button {
margin-right: -1px;
-webkit-border-radius: 4px 0px 0px 4px;
-moz-border-radius: 4px 0px 0px 4px;
border-radius: 4px 0px 0px 4px;
}
.right.attached.ui.buttons .button:first-child {
margin-left: -1px;
-webkit-border-radius: 4px 0px 0px 0px;
-moz-border-radius: 4px 0px 0px 0px;
border-radius: 4px 0px 0px 0px;
}
.right.attached.ui.buttons .button:last-child {
margin-left: -1px;
-webkit-border-radius: 0px 0px 0px 4px;
-moz-border-radius: 0px 0px 0px 4px;
border-radius: 0px 0px 0px 4px;
}
/* Fluid */ /* Fluid */

Loading…
Cancel
Save