From fb9401b355366452d310d39f51224999da4daa82 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 5 Jan 2012 01:34:14 -0800 Subject: tweaks abound, updated prettify styles, new sidenav component started, sprite icons started --- docs/assets/css/docs.css | 18 +++ docs/assets/img/glyphicons-halflings-sprite.png | Bin 0 -> 9944 bytes docs/assets/js/google-code-prettify/prettify.css | 41 ++---- docs/base-css.html | 152 +++++++++++++++++++++++ docs/components.html | 32 +++++ 5 files changed, 214 insertions(+), 29 deletions(-) create mode 100644 docs/assets/img/glyphicons-halflings-sprite.png (limited to 'docs') diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index c2c92a251..b218b465c 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -330,6 +330,24 @@ h2 + table { position: relative; } +/* Icons +------------------------- */ +.the-icons { + +} +.the-icons i { + display: block; + margin-bottom: 5px; + background-color: rgba(255,0,0,.25); +} +.the-icons i:after { + display: block; + content: attr(class); + font-style: normal; + margin-left: 20px; + width: 100px; +} + /* Responsive Docs -------------------------------------------------- */ diff --git a/docs/assets/img/glyphicons-halflings-sprite.png b/docs/assets/img/glyphicons-halflings-sprite.png new file mode 100644 index 000000000..525acee6d Binary files /dev/null and b/docs/assets/img/glyphicons-halflings-sprite.png differ diff --git a/docs/assets/js/google-code-prettify/prettify.css b/docs/assets/js/google-code-prettify/prettify.css index da6b6e7e1..7ff618550 100644 --- a/docs/assets/js/google-code-prettify/prettify.css +++ b/docs/assets/js/google-code-prettify/prettify.css @@ -2,40 +2,23 @@ .lit { color: #195f91; } .pun, .opn, .clo { color: #93a1a1; } .fun { color: #dc322f; } -.str, .atv { color: #268bd2; } -.kwd, .tag { color: #195f91; } -.typ, .atn, .dec, .var { color: #CB4B16; } +.str, .atv { color: #62C462; } +.kwd, .linenums .tag { color: #049CD9; } +.typ, .atn, .dec, .var { color: #EE5F5B; } .pln { color: #93a1a1; } pre.prettyprint { - background: #fefbf3; + background-color: #fefbf3; padding: 9px; - border: 1px solid rgba(0,0,0,.2); - -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1); - -moz-box-shadow: 0 1px 2px rgba(0,0,0,.1); - box-shadow: 0 1px 2px rgba(0,0,0,.1); + margin-bottom: 9px; +} + +pre.prettyprint { + color: #ccc; + background-color: #252525; } /* Specify class=linenums on a pre to get line numbering */ ol.linenums { margin: 0 0 0 40px; } /* IE indents via margin-left */ -ol.linenums li { color: rgba(0,0,0,.15); line-height: 20px; } +ol.linenums li { color: #444; line-height: 18px; } /* Alternate shading for lines */ -li.L1, li.L3, li.L5, li.L7, li.L9 { } - -/* -$base03: #002b36; -$base02: #073642; -$base01: #586e75; -$base00: #657b83; -$base0: #839496; -$base1: #93a1a1; -$base2: #eee8d5; -$base3: #fdf6e3; -$yellow: #b58900; -$orange: #cb4b16; -$red: #dc322f; -$magenta: #d33682; -$violet: #6c71c4; -$blue: #268bd2; -$cyan: #2aa198; -$green: #859900; -*/ \ No newline at end of file +li.L1, li.L3, li.L5, li.L7, li.L9 { } \ No newline at end of file diff --git a/docs/base-css.html b/docs/base-css.html index 2bc6f49fb..c07263495 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1175,6 +1175,158 @@ Form states + + +
+
+

Icons Graciously provided by Glyphicons

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

Built as a sprite

+

Instead of making every icon an extra request, we've compiled them into a sprite—a bunch of images in one file that uses CSS to position the images with background-position. This is the same method we use on Twitter.com and it has worked well for us.

+

Glyphicons has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit. Please consider doing the same in your projects.

+
+
+

How to use

+

With v2.0.0, the <i> tag is essentially dedicated to iconography. To use the icons, you can place the follow code wherever you like one to appear:

+
+<i class="chevron-left"></i>
+
+

There are over 100 classes to choose from for your icons. Just add an <i> tag with the right class and you're set. You can find the full list in sprites.less or right here in this document.

+
+
+

Use cases

+

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

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

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

+
+
+
+ + +