diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/assets/css/docs.css | 18 | ||||
| -rw-r--r-- | docs/assets/img/glyphicons-halflings-sprite.png | bin | 0 -> 9944 bytes | |||
| -rw-r--r-- | docs/assets/js/google-code-prettify/prettify.css | 41 | ||||
| -rw-r--r-- | docs/base-css.html | 152 | ||||
| -rw-r--r-- | docs/components.html | 32 |
5 files changed, 214 insertions, 29 deletions
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 Binary files differnew file mode 100644 index 000000000..525acee6d --- /dev/null +++ b/docs/assets/img/glyphicons-halflings-sprite.png 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 </section> + +<!-- Icons +================================================== --> +<section id="icons"> + <div class="page-header"> + <h1>Icons <small>Graciously provided by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small></h1> + </div> + <div class="row"> + <div class="span2"> + <div class="the-icons"> + <i class="glass"></i> + <i class="music"></i> + <i class="search"></i> + <i class="envelope"></i> + <i class="heart"></i> + <i class="star"></i> + <i class="star-empty"></i> + <i class="user"></i> + <i class="film"></i> + <i class="th-large"></i> + <i class="th"></i> + <i class="th-list"></i> + <i class="ok"></i> + <i class="remove"></i> + <i class="zoom-in"></i> + <i class="zoom-out"></i> + <i class="off"></i> + <i class="signal"></i> + <i class="cog"></i> + <i class="trash"></i> + </div> + </div> + <div class="span2"> + <div class="the-icons"> + <i class="home"></i> + <i class="file"></i> + <i class="time"></i> + <i class="road"></i> + <i class="download-alt"></i> + <i class="download"></i> + <i class="upload"></i> + <i class="inbox"></i> + <i class="play-circle"></i> + <i class="repeat"></i> + <i class="refresh"></i> + <i class="calendar"></i> + <i class="lock"></i> + <i class="flag"></i> + <i class="headphones"></i> + <i class="volume-off"></i> + <i class="volume-down"></i> + <i class="volume-up"></i> + <i class="qrcode"></i> + <i class="barcode"></i> + </div> + </div> + <div class="span2"> + <div class="the-icons"> + <i class="tag"></i> + <i class="tags"></i> + <i class="book"></i> + <i class="bookmark"></i> + <i class="print"></i> + <i class="camera"></i> + <i class="font"></i> + <i class="bold"></i> + <i class="italic"></i> + <i class="text-height"></i> + <i class="text-width"></i> + <i class="align-left"></i> + <i class="align-center"></i> + <i class="align-right"></i> + <i class="align-justify"></i> + <i class="list"></i> + <i class="indent-left"></i> + <i class="indent-right"></i> + <i class="facetime-video"></i> + <i class="picture"></i> + </div> + </div> + <div class="span2"> + <div class="the-icons"> + <i class="pencil"></i> + <i class="map-marker"></i> + <i class="adjust"></i> + <i class="tint"></i> + <i class="edit"></i> + <i class="share"></i> + <i class="check"></i> + <i class="move"></i> + <i class="step-backward"></i> + <i class="fast-backward"></i> + <i class="backward"></i> + <i class="play"></i> + <i class="pause"></i> + <i class="stop"></i> + <i class="forward"></i> + <i class="fast-forward"></i> + <i class="step-foward"></i> + <i class="eject"></i> + <i class="chevron-left"></i> + <i class="chevron-right"></i> + </div> + </div> + <div class="span2"> + <div class="the-icons"> + <i class="arrow-left"></i> + <i class="arrow-right"></i> + <i class="arrow-up"></i> + <i class="arrow-down"></i> + <i class="share"></i> + <i class="resize-full"></i> + <i class="resize-small"></i> + <i class="plus"></i> + <i class="minus"></i> + <i class="asterisk"></i> + </div> + </div> + </div> + + <br> + + <div class="row"> + <div class="span4"> + <h3>Built as a sprite</h3> + <p>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 <code>background-position</code>. This is the same method we use on Twitter.com and it has worked well for us.</p> + <p><a href="http://glyphicons.com" target="_blank">Glyphicons</a> 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.</p> + </div> + <div class="span4"> + <h3>How to use</h3> + <p>With v2.0.0, the <code><i></code> tag is essentially dedicated to iconography. To use the icons, you can place the follow code wherever you like one to appear:</p> +<pre class="prettyprint"> +<i class="chevron-left"></i> +</pre> + <p>There are over 100 classes to choose from for your icons. Just add an <code><i></code> tag with the right class and you're set. You can find the full list in sprites.less or right here in this document.</p> + </div> + <div class="span4"> + <h3>Use cases</h3> + <p>Icons are great, but where would one use them? Here are a few ideas:</p> + <ul> + <li>As visuals for your sidebar navigation</li> + <li>For a purely icon-driven nav</li> + <li>For buttons to help convey the meaning of an action</li> + <li>With links to share context on a user's destination</li> + </ul> + <p>Essentially, anywhere you can put an <code><i></code> tag, you can put an icon.</p> + </div> + </div> +</section> + + + <!-- Footer ================================================== --> <footer class="footer"> diff --git a/docs/components.html b/docs/components.html index fbfa9fb31..d9d6b10d6 100644 --- a/docs/components.html +++ b/docs/components.html @@ -223,6 +223,38 @@ +<!-- Side nav +================================================== --> +<section id="sidenav"> + <div class="page-header"> + <h1>Side nav <small></small></h1> + </div> + + <div class="well side-nav"> + <h6 class="nav-label">Your account</h6> + <ul class="nav-group"> + <li class="active"><a class="nav-item" href="#">Home</a></li> + <li><a class="nav-item" href="#">Library</a></li> + <li><a class="nav-item" href="#">Profile</a></li> + <li><a class="nav-item" href="#">Settings</a></li> + <li><a class="nav-item" href="#">Help</a></li> + </ul> + </div> + + <div class="well side-nav"> + <h6 class="nav-label">Your account</h6> + <ul class="nav-group"> + <li class="active"><a class="nav-item" href="#"><i class="home"></i> Home</a></li> + <li><a class="nav-item" href="#"><i class="book"></i> Library</a></li> + <li><a class="nav-item" href="#"><i class="user"></i> Profile</a></li> + <li><a class="nav-item" href="#"><i class="cog"></i> Settings</a></li> + <li><a class="nav-item" href="#"><i class="time"></i> Help</a></li> + </ul> + </div> +</section> + + + <!-- Navbar ================================================== --> <section id="navbar"> |
