From 8812b37097d4d2676b163a060ef586d86c995b0d Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Sat, 20 Apr 2013 13:48:03 -0400 Subject: [PATCH 1/2] module language Former-commit-id: ba0934f8a89ffbe6583747f0cdfc8b34b9302e03 Former-commit-id: 3cbf941bb5121254231b549e242dc5ba3e71333c --- docs/module.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/module.html b/docs/module.html index 476de2651..de1f40b53 100755 --- a/docs/module.html +++ b/docs/module.html @@ -143,8 +143,8 @@

Exchanging Designs

-

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 less prescriptive.

-

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.

+

Semantic defines HTML structures and class names for UI elements that attempt to create a common vernacular to make front end development less prescriptive.

+

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.

What's in an Element?

UI elements definitions are made of 4 parts: From 8394754ec6644af11a557cd05768e7208907d7a2 Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Sat, 20 Apr 2013 14:13:49 -0400 Subject: [PATCH 2/2] fixes up button page some Former-commit-id: 2748e1ca29a747b82e102c740e375dec04b80ee5 Former-commit-id: 7c0184e727bd80bd183d95ea028514cc16ec3e17 --- docs/button.html | 4 +--- src/ui/flat/button.css | 31 +++++++++---------------------- src/ui/images/throbber-tiny.gif | Bin 2295 -> 3994 bytes 3 files changed, 10 insertions(+), 25 deletions(-) diff --git a/docs/button.html b/docs/button.html index 2d198aa3a..59195a9d4 100755 --- a/docs/button.html +++ b/docs/button.html @@ -150,7 +150,7 @@

Successful Button

Can alert user of an error:

-
Error Button
+
Error
Normal
Hover
@@ -185,11 +185,9 @@ Huge
- Massive
- Gigantic
diff --git a/src/ui/flat/button.css b/src/ui/flat/button.css index aa7c1023f..5eb0e477d 100755 --- a/src/ui/flat/button.css +++ b/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 diff --git a/src/ui/images/throbber-tiny.gif b/src/ui/images/throbber-tiny.gif index 1ca21e60e40b5cc4115fdb925d43068bd882f7ab..c65ee55fd3dd353a1fb10139c48ae5c8e40c8532 100755 GIT binary patch literal 3994 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 literal 2295 zcmc)K|5MU=9>8%kHT=@0u9SJ+t(BG{mZ5aHW~Zj62nh%%CZ8vvzHCt0NZM!>n+e~vu?N7V2zu#vbf57wge!btHi*Ye$ zL&(ln&Q|}nvf45IeS7oyvyE?`t$(|<_P4Fo9rKFCwrP2LbLp9B>Dk8O(+%U(b>r6h z!q(cnd3DaT^2D@gSX-D{HBPV2Pp-^OEYFQE&yFoU8C#kiU7UGjVSN11Xc$?TelS0M ze|}0oH>rCvF+4jyG&8Q98Ph%<9eg}GV0dKFKmAZMJ))j^pqjj|oOqy|yswzh$;b8b zab4fouxxCocXYUSR4aWr*gc}|)T=sl$_|}eG^7v@^$E4IJA=J#13iL)p4R?uzPg*I z?&7H=%_>Qg@}31((b=fD%aM1m``R019SwbAmP}mVE3&BT5!PBr@6<>I)m?4XT>_@0 zwMx=bb+4uJ9>1cKck6ERO^c4E@{Xn(?c6dkx2(OfRLm(6v9Ajoitn(Cg{-1GEJjBgA&6a#}tyI3rSH0moHpPi_9lRTqTBIP5o^Xim~M zbX-VwQV1P)HXCz>hW!f-b0#Yhnw1!wiM9x$q97Sai__@|f$0gSD3?xA5GToq05Uv) z1P7Di{V&5TKxuJ)7Q|RzV(f|3nByrIkEh1?q(plYqK@HrpTDyD|9waP>v$;|lXxKl z84WoZxOb1G! z`v-(?kJFB_+u9aep!0b)NM}e0FI<)D$1YDPx7R<`v`S+uYJC!W%{&<_CF=dh=m6Nd zrzRN6C%sF6rWx~3dcJ^R4^_D`4{!EfF?j}2C!!!g|G6o*G0C#>C-$L!g6#bG8!gh{ ziR(v;jsiiZ6PUt=JmlubmJI;r{u@6N5Z9zC?*b+=>d4#qlfJ+1s28)9$W_bYnCamHef6Gv8cP= zHY}b#X^3;z`={7uXsD6$y*SnZ1FU+$c(^ObUJk#|33uTD!B}NdKTcr`X0;lEB~hgt z3|XCRGnjfng=xn*-PR{PI*(vPYdpSAQr2oj^L-vVq6Ya17IbYn04-7X zmK9}F=BlK~*J9xUshucG3o|j00u`#?6F&?=x*E{K=ZYXu2UFk0`ad&88TNc>O#O#T zZh&k``0q6ezno_77MKaJ-Mt2N+)@+m_wB;$;_pB*r^|gf&hbfLN|%jn=%5q1gVgU8 z<9*fvI3U>K@AsUgyTWr8)uK0y_p)%bm{Nm(*e8Y%x6bhjbVCRA*+pvnh6%LGr*D>% z2Vh0iOJ@A@xQ0Q@_i#IxcAD`djr_#g3p4q$U zi2a=*`ffi?#(q=+#jHf6+}8o2^py_O=)X4IPIZjry&F3C<(At2<~@qOq&B+wS>oMpr_F=1**aapwpkPO$6&SU9kPon*M&ZrD5&d4b>R6ie6eq-b;A zCv8w5J`!tIqS&E<$p*&?CL&!17HKIn`3-B;@i~Ud-@65ymRh%wY0hy3?TqE`5fFJO zn(G;%3|7ExYQ4a$GDdc*;*yxevOfL3st3-Cba}IDi&7!gF%i!5wk9b&?4TWs<=Ciq zs&gwfPOpiZ@xAAXzS8e_o!!>{3J~=bstX2}5E7+qj2y-}hgjdKJp@9PR{}5eLfzCj zD$G}fTZW;$=13wjsSydKt=|vqXyFL|SoIa>ljh9gYDY*O{CkRBh8LS`7M_;I2Z#so zOB}Ge8HXRdJjQr!h;~}H;uKS+3ufs85JoMwvH3jbZ@1F^c`LDllIf~C_aooXme;4? zV(%~rl|{0}a-FEVLHVsdD3P6qGV={d4p)sO`|~&iz1Kc0m7lTS1xnYrL#%-xgv0bA zcP_bTfv=^S-v)wTz!Hx~u6Cc+WiDXkRZFrr5MaSSwAJ+D=a9r^VFW^3{w@#zb`PS? i*3Y6}vj5qSA57Cz^z^o`YZVv~2nuV3KHjs(D)fJrG`%YT