From a2a10ae4211f0cdba5fe54417d267e3ba3b63705 Mon Sep 17 00:00:00 2001 From: Burak Tuyan Date: Sat, 28 Jan 2012 02:13:53 +0200 Subject: [PATCH] Adding new examples to the icons' docs. - Button with dropdown menu. - Small info button. - Text alignment for navigation with no icon. - Text input form with prepended icon - Select input form with prepended icon --- docs/base-css.html | 73 ++++++++++++++++++++------ docs/templates/pages/base-css.mustache | 73 ++++++++++++++++++++------ 2 files changed, 112 insertions(+), 34 deletions(-) diff --git a/docs/base-css.html b/docs/base-css.html index 698b68ea19..7c7ab48ef8 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1482,51 +1482,90 @@

Icons are great, but where would one use them? Here are a few ideas:

-

Essentially, anywhere you can put an <i> tag, you can put an icon.

+

Essentially, anywhere you can put an <i> tag, you can put an icon. And if you need to position the text with no icon before it (where other items have an icon; see the navigation example below) simply use .icon class with no other classes:

+
+<i class="icon"></i>
+

Examples

-
-

Use them in buttons, or in button groups for a toolbar style presentation.

-

- Refresh - Checkout - Delete -

+
+

Use them in buttons - of all types and sizes.

-
- - - -
+
+ User + + +

- Refresh + Refresh + Checkout + Delete +

+

+ Comment Settings + More Info

-
-

Or, use them in navigation.

+
+

Use them in navigation.

+
+
+

Use them with prepended forms.

+
+ +
+
+ + +
+
+
+
+ +
+
+ + +
+
+
+
+
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index f6504a249a..92c925b37b 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -1417,50 +1417,89 @@

{{_i}}Icons are great, but where would one use them? Here are a few ideas:{{/i}}

  • {{_i}}As visuals for your sidebar navigation{{/i}}
    • -
  • {{_i}}For a purely icon-driven nav{{/i}}
    • +
  • {{_i}}For a purely icon-driven navigation{{/i}}
  • {{_i}}For buttons to help convey the meaning of an action{{/i}}
  • {{_i}}With links to share context on a user's destination{{/i}}
-

{{_i}}Essentially, anywhere you can put an <i> tag, you can put an icon.{{/i}}

+

{{_i}}Essentially, anywhere you can put an <i> tag, you can put an icon. And if you need to position the text with no icon before it (where other items have an icon; see the navigation example below) simply use .icon class with no other classes:{{/i}}

+
+<i class="icon"></i>
+

{{_i}}Examples{{/i}}

-
-

{{_i}}Use them in buttons, or in button groups for a toolbar style presentation.{{/i}}

-

- {{_i}}Refresh{{/i}} - {{_i}}Checkout{{/i}} - {{_i}}Delete{{/i}} -

+
+

{{_i}}Use them in buttons - of all types and sizes.{{/i}}

-
- - - -
+
+ {{_i}}User{{/i}} + + +

- {{_i}}Refresh{{/i}} + {{_i}}Refresh{{/i}} + {{_i}}Checkout{{/i}} + {{_i}}Delete{{/i}} +

+

+ {{_i}}Comment{{/i}} {{_i}}Settings{{/i}} + {{_i}}More Info{{/i}}

-
-

{{_i}}Or, use them in navigation.{{/i}}

+
+

{{_i}}Use them in navigation.{{/i}}

+
+
+

{{_i}}Use them with prepended forms.{{_i}}

+
+ +
+
+ + +
+
+
+
+ +
+
+ + +
+
+
+
+
\ No newline at end of file