From 2407f0ae2d532e8e0e33516c95d322cb3840a53b Mon Sep 17 00:00:00 2001 From: davegandy Date: Wed, 23 Oct 2013 10:05:10 -0400 Subject: [PATCH] rewriting examples for consistency --- src/_includes/examples/bootstrap.html | 2 +- src/_includes/examples/bordered-pulled.html | 28 ++++---------- src/_includes/examples/fixed-width.html | 3 +- src/_includes/examples/inline.html | 12 ++---- src/_includes/examples/larger.html | 24 +++++------- src/_includes/examples/list.html | 2 +- src/_includes/examples/rotated-flipped.html | 13 +++---- src/_includes/examples/spinning.html | 19 ++++------ src/_includes/examples/stacked.html | 31 ++++++++------- src/_includes/navbar.html | 14 +++---- src/assets/less/site/bootstrap/variables.less | 38 ++++++++----------- 11 files changed, 78 insertions(+), 108 deletions(-) diff --git a/src/_includes/examples/bootstrap.html b/src/_includes/examples/bootstrap.html index f8ee71700..246b7426b 100644 --- a/src/_includes/examples/bootstrap.html +++ b/src/_includes/examples/bootstrap.html @@ -1,5 +1,5 @@
-

Bootstrap 3

+

Bootstrap 3 Examples

diff --git a/src/_includes/examples/bordered-pulled.html b/src/_includes/examples/bordered-pulled.html index 01c495012..f22ee8e35 100644 --- a/src/_includes/examples/bordered-pulled.html +++ b/src/_includes/examples/bordered-pulled.html @@ -3,30 +3,18 @@

- Use fa-border and pull-right or pull-left for easy pull quotes or - article graphics. + + Use a few styles together and you'll have easy pull quotes or a great introductory article icon.

-
- - Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image. - Or spinning icons for loading and refreshing content. Or fun big icons in multi-line buttons. You can combine all - of them in any combination to get lots of new possibilities. -
+

+ Use fa-border and pull-right or pull-left for easy pull quotes or + article graphics. +

{% highlight html %} - -Use a few of the new styles together ... lots of new possibilities. -{% endhighlight %} -
- - Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image. - Or spinning icons for loading and refreshing content. Or fun big icons in multi-line buttons. You can combine all - of them in any combination to get lots of new possibilities. -
-{% highlight html %} - -Use a few of the new styles together ... lots of new possibilities. + +Use a few styles together and you'll have easy pull quotes or a great introductory article icon. {% endhighlight %}
diff --git a/src/_includes/examples/fixed-width.html b/src/_includes/examples/fixed-width.html index f33124d53..9f16ec380 100644 --- a/src/_includes/examples/fixed-width.html +++ b/src/_includes/examples/fixed-width.html @@ -11,7 +11,8 @@

- Use fa-fw to set icons at a fixed width. Great to use when variable width throws off alignment. Especially useful in things like nav lists. + Use fa-fw to set icons at a fixed width. Great to use when variable icon widths throw off alignment. + Especially useful in things like nav lists.

{% highlight html %}
    diff --git a/src/_includes/examples/inline.html b/src/_includes/examples/inline.html index 8324d0af6..794a2ae59 100644 --- a/src/_includes/examples/inline.html +++ b/src/_includes/examples/inline.html @@ -1,17 +1,13 @@ -
    +

    Inline Icons

    -

    Place Font Awesome icons just about anywhere with the <i> tag.

    + fa-camera-retro
    -
    -
    - icon-camera-retro -
    -
    +

    Place Font Awesome icons just about anywhere with the <i> tag.

    {% highlight html %} - icon-camera-retro + fa-camera-retro {% endhighlight %}
    Icon classes are echoed via CSS :before.
    diff --git a/src/_includes/examples/larger.html b/src/_includes/examples/larger.html index 9f2834e74..8c5e24636 100644 --- a/src/_includes/examples/larger.html +++ b/src/_includes/examples/larger.html @@ -1,30 +1,24 @@ -
    +

    Larger Icons

    -

    - To increase the size of icons relative to its container, use fa-lg, fa-2x, - fa-3x, or fa-4x. -

    +

    fa-camera-retro

    +

    fa-camera-retro

    +

    fa-camera-retro

    +

    fa-camera-retro

    +

    fa-camera-retro

    - Increase the icon size by using the fa-lg (33% increase), fa-2x, - fa-3x, or fa-4x classes. + To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, + fa-3x, fa-4x, or fa-5x classes.

    -
    -
    -

    fa-camera-retro

    -

    fa-camera-retro

    -

    fa-camera-retro

    -

    fa-camera-retro

    -
    -
    {% highlight html %}

    fa-camera-retro

    fa-camera-retro

    fa-camera-retro

    fa-camera-retro

    +

    fa-camera-retro

    {% endhighlight %}
    If your icons are getting chopped off on top and bottom, make sure you have diff --git a/src/_includes/examples/list.html b/src/_includes/examples/list.html index 884afe9ca..5cbc17585 100644 --- a/src/_includes/examples/list.html +++ b/src/_includes/examples/list.html @@ -1,4 +1,4 @@ -
    +

    List Icons

    diff --git a/src/_includes/examples/rotated-flipped.html b/src/_includes/examples/rotated-flipped.html index 33dd3591c..87616b146 100644 --- a/src/_includes/examples/rotated-flipped.html +++ b/src/_includes/examples/rotated-flipped.html @@ -2,10 +2,7 @@

    Rotated & Flipped

    - A set of classes that can be used to arbitrarily rotate and flip icons. -
    -
    -
    +
      normal
      fa-rotate-90
      fa-rotate-180
    @@ -13,6 +10,11 @@   fa-flip-horizontal
      fa-flip-vertical
    +
    +
    +

    + To arbitrarily rotate and flip icons, use the fa-rotate-* and fa-flip-* classes. +

    {% highlight html %}   normal
      fa-rotate-90
    @@ -21,9 +23,6 @@   fa-flip-horizontal
      icon-flip-vertical {% endhighlight %} -

    - Rotating and flipping icons aren't yet supported in IE7. -

    diff --git a/src/_includes/examples/spinning.html b/src/_includes/examples/spinning.html index da8bacfd1..5c3cff62b 100644 --- a/src/_includes/examples/spinning.html +++ b/src/_includes/examples/spinning.html @@ -2,22 +2,19 @@

    Spinning Icons

    + + + +
    +

    Use the fa-spin class to get any icon to rotate. Works well with fa-spinner, fa-refresh, and fa-cog.

    -

    - - - -

    -
    -
    -
    - Spinner icon when loading content... -
    {% highlight html %} - Spinner icon when loading content... + + + {% endhighlight %}

    CSS3 animations aren't supported in IE8 - IE9. diff --git a/src/_includes/examples/stacked.html b/src/_includes/examples/stacked.html index 1f400997a..64294bfab 100644 --- a/src/_includes/examples/stacked.html +++ b/src/_includes/examples/stacked.html @@ -2,50 +2,53 @@

    Stacked Icons

    - A method for easily stacking multiple icons. Use the fa-stack class on the parent, the fa-stack-1x - for the regularly sized icon, and fa-stack-2x for the larger bottom icon. fa-inverse - can be used as an alternative icon color. -
    -
    -
    - +
    + fa-twitter on fa-square-o
    - + fa-flag on fa-circle
    - + fa-terminal on fa-square
    - + fa-ban on fa-camera
    +
    +
    +

    + To stack multiple icons, use the fa-stack class on the parent, the fa-stack-1x + for the regularly sized icon, and fa-stack-2x for the larger icon. fa-inverse + can be used as an alternative icon color. You can even throw larger icon classes on the parent + to get further control of sizing. +

    {% highlight html %} - + fa-twitter on fa-square-o
    - + fa-flag on fa-circle
    - + fa-terminal on fa-square
    - + diff --git a/src/_includes/navbar.html b/src/_includes/navbar.html index e7216b74f..507a4de67 100644 --- a/src/_includes/navbar.html +++ b/src/_includes/navbar.html @@ -47,15 +47,15 @@ diff --git a/src/assets/less/site/bootstrap/variables.less b/src/assets/less/site/bootstrap/variables.less index b51e28392..353c55390 100644 --- a/src/assets/less/site/bootstrap/variables.less +++ b/src/assets/less/site/bootstrap/variables.less @@ -56,11 +56,7 @@ // ------------------- // Brand colors -//@brand-primary: @blue-dark; @brand-success: mix(@fa-green, #fff, 70%); -//@brand-warning: @yellow-dark; -//@brand-danger: @red; -//@brand-info: @blue; // Links @@ -99,30 +95,26 @@ // Jumbotron -@jumbotron-color: #fff; -@jumbotron-bg: @fa-green; +@jumbotron-color: #fff; +@jumbotron-bg: @fa-green; // Form states and alerts -//@state-warning-text: mix(@yellow-dark, @yellow-darker, 80%); -//@state-warning-bg: @yellow-lighter; -//@state-warning-border: darken(spin(@state-warning-bg, -10), 7%); -// -//@state-danger-text: @red; -//@state-danger-bg: @red-lighter; -//@state-danger-border: darken(spin(@state-danger-bg, -10), 4%); -// -@state-success-text: @fa-green; -@state-success-bg: mix(@fa-green, #fff, 6%); -@state-success-border: darken(spin(@state-success-bg, -10), 13%); +@state-success-text: @fa-green; +@state-success-bg: mix(@fa-green, #fff, 6%); +@state-success-border: darken(spin(@state-success-bg, -10), 13%); -@state-info-text: mix(@blue-dark, @blue, 50%); -@state-info-bg: @blue-lighter; -@state-info-border: darken(spin(@state-info-bg, -10), 7%); +@state-info-text: mix(@blue-dark, @blue, 50%); +@state-info-bg: @blue-lighter; +@state-info-border: darken(spin(@state-info-bg, -10), 7%); // Carousel -@carousel-text-shadow: 0 1px 0 rgba(255,255,255,0.25); +@carousel-text-shadow: 0 1px 0 rgba(255,255,255,0.25); -@carousel-control-color: @fa-green-dark; -@carousel-control-font-size: 30px; +@carousel-control-color: @fa-green-dark; +@carousel-control-font-size: 30px; + + +// Code +@pre-border-color: #e5e5e5;