From b8632ca0bb00d37f79a946470ce7b54526e56d30 Mon Sep 17 00:00:00 2001 From: Arnold Daniels Date: Tue, 17 Jul 2012 00:26:22 +0200 Subject: [PATCH] Documented iconic icons Added jasny/iconic.less to jasny/bootstrap.less Makefile also copies the fonts --- Makefile | 5 + docs/assets/css/docs.css | 20 ++- docs/templates/layout.mustache | 1 + docs/templates/pages/base-css.mustache | 223 +++++++++++++++++++++++++ docs/templates/pages/index.mustache | 7 + less/jasny/bootstrap.less | 1 + 6 files changed, 256 insertions(+), 1 deletion(-) diff --git a/Makefile b/Makefile index aceaa00b..0aea234c 100644 --- a/Makefile +++ b/Makefile @@ -26,6 +26,7 @@ build: @node docs/build @cp img/* docs/assets/img/ @cp js/*.js docs/assets/js/ + @cp -r fonts docs/assets/ @cp js/tests/vendor/jquery.js docs/assets/js/ @echo "Compiling documentation... ${CHECK} Done" @cat js/bootstrap-transition.js js/bootstrap-alert.js js/bootstrap-button.js js/bootstrap-carousel.js js/bootstrap-collapse.js js/bootstrap-dropdown.js js/bootstrap-modal.js js/bootstrap-tooltip.js js/bootstrap-popover.js js/bootstrap-scrollspy.js js/bootstrap-tab.js js/bootstrap-typeahead.js > docs/assets/js/bootstrap.js @@ -61,7 +62,9 @@ bootstrap: mkdir -p bootstrap/img mkdir -p bootstrap/css mkdir -p bootstrap/js + mkdir -p bootstrap/fonts cp img/* bootstrap/img/ + cp fonts/* bootstrap/fonts/ recess --compile ${BOOTSTRAP_LESS} ${JASNY_BOOTSTRAP_LESS} > bootstrap/css/bootstrap.css recess --compress ${BOOTSTRAP_LESS} ${JASNY_BOOTSTRAP_LESS} > bootstrap/css/bootstrap.min.css recess --compile ${BOOTSTRAP_RESPONSIVE_LESS} ${JASNY_BOOTSTRAP_RESPONSIVE_LESS} > bootstrap/css/bootstrap-responsive.css @@ -80,6 +83,8 @@ bootstrap: jasny-bootstrap: mkdir -p jasny-bootstrap/css mkdir -p jasny-bootstrap/js + mkdir -p jasny-bootstrap/fonts + cp fonts/* jasny-bootstrap/fonts/ recess --compile ${JASNY_BOOTSTRAP_LESS} > jasny-bootstrap/css/jasny-bootstrap.css recess --compress ${JASNY_BOOTSTRAP_LESS} > jasny-bootstrap/css/jasny-bootstrap.min.css recess --compile ${JASNY_BOOTSTRAP_RESPONSIVE_LESS} > jasny-bootstrap/css/jasny-bootstrap-responsive.css diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 0e664552..c01f46eb 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -572,11 +572,29 @@ form.well { ------------------------- */ .the-icons { margin-left: 0; + margin-bottom: 18px; list-style: none; } -.the-icons i:hover { +.the-icons i[class*="icon-"] { + margin-bottom: 5px; +} +.the-icons i[class*="icon-"]:hover { background-color: rgba(255,0,0,.25); } +.the-icons i[class*="iconic-"] { + display: block; +} +.the-icons i[class*="iconic-"]:after { + margin-left: 6px; + content: attr(class); + font-style: normal; +} +#javascript input[type=checkbox] { + position: relative; + top: -1px; + display: inline; + margin-left: 6px; +} /* Eaxmples page ------------------------- */ diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache index dcfbe0ea..011870ba 100644 --- a/docs/templates/layout.mustache +++ b/docs/templates/layout.mustache @@ -96,6 +96,7 @@

{{_i}}Extended with pride by @ArnoldDaniels of Jasny Software solutions.{{/i}}

{{_i}}Code licensed under the Apache License v2.0. Documentation licensed under CC BY 3.0.{{/i}}

{{_i}}Icons from Glyphicons Free, licensed under CC BY 3.0.{{/i}}

+

{{_i}}Iconic icon set font, licensed under the SIL Open Font License.{{/i}}

diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index cb3bfcbf..212ce040 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -12,6 +12,7 @@
  • {{_i}}Buttons{{/i}}
  • {{_i}}Action links{{/i}}
  • {{_i}}Icons by Glyphicons{{/i}}
    • +
  • {{_i}}Iconic icons{{/i}}
    • @@ -1811,3 +1812,225 @@ on multiple lines + +
    +
    +

    Iconic icons Graciously provided by P.J. Onori

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

    {{_i}}Icons as a font{{/i}}

    +

    {{_i}}Instead of using images, the Iconic icons are a font. This has the advantage that they can be any color you like, have the same size as your text and are subject to CSS text effects.{{/i}}

    + +

    {{_i}}All icons classes are prefixed with .iconic- for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.{{/i}}

    +

    {{_i}}The Iconic icons have been created by P.J. Onori of the Some Random Dude blog.{{/i}}

    +
    + +
    +

    {{_i}}How to use{{/i}}

    +

    {{_i}}For iconic icons you can use an <i> tag, just like regular for icons. To use, place the following code just about anywhere:{{/i}}

    +
    +<i class="iconic-search"></i>
+
    +

    {{_i}}There are 170 classes to choose from for your iconic icons. Just add an <i> tag with the right classes and you're set. You can find the full list right here in this document.{{/i}}

    +
    + +
    +

    {{_i}}Styling{{/i}}

    +

    {{_i}}Since iconic icons are a font, they will automatically match the text size and style. You can even use text effects, like text-shadow.{{/i}}

    +

    An external link and some italic text.

    +

    +

    Approved

    +

    RSS feed

    +
    +
    +
    diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache index 7eb49973..0deeb547 100644 --- a/docs/templates/pages/index.mustache +++ b/docs/templates/pages/index.mustache @@ -57,6 +57,13 @@

    {{_i}}Action links look distinctly different than normal links.{{/i}}

    +
    +
    +

    {{_i}}Iconic icons{{/i}}

    +

    {{_i}}The iconic font set adds 170 new icons to Bootstrap. These icons can be used with buttons, menus, links, etc.{{/i}}

    +

    {{_i}}Because these icons are a font, they can be styled just like text.{{/i}}

    +
    +

    {{_i}}Form elements{{/i}}

    diff --git a/less/jasny/bootstrap.less b/less/jasny/bootstrap.less index 132ec3c2..8cc0b174 100644 --- a/less/jasny/bootstrap.less +++ b/less/jasny/bootstrap.less @@ -19,6 +19,7 @@ // Components: Buttons & Alerts @import "action-links.less"; +@import "iconic.less"; // Components: Nav @import "navs-tabbable.less";