Browse Source

Merge branch 'gh-pages' of github.com:quirkyinc/semantic into gh-pages

Former-commit-id: 909575dc49
Former-commit-id: b0b0c0e19f
pull/258/head
Jack Lukic 12 years ago
parent
commit
002eb281a3
4 changed files with 12 additions and 27 deletions
  1. 4
      docs/button.html
  2. 4
      docs/module.html
  3. 31
      src/ui/flat/button.css
  4. BIN
      src/ui/images/throbber-tiny.gif

4
docs/button.html

@ -150,7 +150,7 @@
<div class="ui success button">Successful Button</div>
<h4>Can alert user of an error:</h4>
<div class="ui error button">Error Button</div>
<div class="ui error button">Error</div>
<div class="ui button">Normal</div>
<div class="ui button hover">Hover</div>
@ -185,11 +185,9 @@
Huge
</div>
<div class="massive ui button">
<i class="icon pin"></i>
Massive
</div>
<div class="gigantic ui button">
<i class="icon pin"></i>
Gigantic
</div>

4
docs/module.html

@ -143,8 +143,8 @@
</table>
<h3>Exchanging Designs</h3>
<p>Semantic creates an exchange format for UI, by defining HTML structures and class names for UI elements that attempt to create a common language and make front end development <a href="http://instruct.westvalley.edu/lafave/DFW_present_tense.html">less prescriptive</a>.</p>
<p>Sharing a language for UI releases the burden from developers at being a naming authorities in their own projects. We can share a common visual vocabulary as a community, and design interchangeable interface elements without having to rely on the prescribed standards of a single developer.</p>
<p>Semantic defines HTML structures and class names for UI elements that attempt to create a common vernacular to make front end development <a href="http://instruct.westvalley.edu/lafave/DFW_present_tense.html">less prescriptive</a>.</p>
<p>Sharing language for UI releases the burden from developers at making arbitrary decisions, like naming conventions, in their own projects, and opens up the ability to swap website designs without having to restructure your codebase.</p>
<h3>What's in an Element?</h3>
<p>UI elements definitions are made of 4 parts:

31
src/ui/flat/button.css

@ -171,7 +171,7 @@
width: 100%;
height: 100%;
content: '';
background: #EEEEEE url(../images/throbber-blue-tiny.gif) no-repeat 50% 50%;
background: #EEEEEE url(../images/throbber-tiny.gif) no-repeat 50% 50%;
background-position: 50% 50%;
background-repeat: no-repeat;
@ -194,13 +194,13 @@
/* blue */
.ui.huge.button.loading:after {
background-image: url(../images/throbber-blue-small.gif);
background-image: url(../images/throbber-small.gif);
}
.ui.massive.buttons .button.loading:after,
.ui.gigantic.buttons .button.loading:after,
.ui.massive.button.loading:after,
.ui.gigantic.button.loading:after {
background-image: url(../images/throbber-blue-medium.gif);
background-image: url(../images/throbber-medium.gif);
}
/* grey */
@ -233,6 +233,7 @@
cursor: default;
position: relative;
background-color: #EE141D;
color: #FFFFFF;
text-shadow: none;
@ -242,25 +243,6 @@
-ms-transition: all 0s linear;
transition: all 0s linear;
}
.ui.buttons .button.error:after,
.ui.buttons .button.error.hover:after,
.ui.buttons .button.error.down:after,
.ui.button.error:after,
.ui.button.error.hover:after,
.ui.button.error.down:after {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
content: '';
/* standard */
background: #EE141D url(../images/button-error.gif) no-repeat 50% 50%;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.ui.button.success,
.ui.button.success.hover,
.ui.button.success.down {
@ -441,6 +423,11 @@
font-weight: bold;
}
.ui.mini.button,
.ui.tiny.button {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/*--------------
Containing Icon

BIN
src/ui/images/throbber-tiny.gif

Before After
Width: 16  |  Height: 16  |  Size: 2.2 KiB Width: 16  |  Height: 16  |  Size: 3.9 KiB
Loading…
Cancel
Save