Saturday, 01 January 2011 00:00

Template Typography

Written by  Joomla!
Rate this item
(1 Vote)

Typography is a fundamental part of a template, providing you with the tools to characterize your content and bring it to life. Expose integrated and nicely blended with Bootstrap's Typography to enhance your typography experience.

If you are using the TinyMCE editor for HTML typography, go to Extensions → Plugin Manager → TinyMCE 2.0 → Set Code Clean-up on Save to Never.

Heading Style

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

Default List Style

Unordered List

  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Vestibulum laoreet porttitor sem
  • Faucibus porta lacus fringilla vel

Ordered List

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet

Typographic components Page header and hero unit for segmenting content

Expose provides a lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.

Markup

Wrap your content in a div like so:

  1. <div class="hero-unit">
  2. <h1>Heading</h1>
  3. <p>Tagline</p>
  4. <p>
  5. <a class="btn btn-primary btn-large">
  6. Learn more
  7. </a>
  8. </p>
  9. </div>

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

Blockquotes

  1. <blockquote>
  2. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
  3. <small>Someone famous</small>
  4. </blockquote>

Default blockquotes are styled as such:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.

Someone famous in Body of work

To float your blockquote to the right, add class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.

Someone famous in Body of work

Code Inline and block code snippets

This is a sample <pre>...</pre> tag:

div.ex-block div.bx1 {
  background: url(../images/box_bl.png) 0 100% repeat;
}

div.ex-block div.bx2 {
  background: url(../images/box_tr.png) 100% 0 repeat;
}
This is a sample <pre class="prettyprint">...</pre> tag:

div.ex-block div.bx1 {
  background: url(../images/box_bl.png) 0 100% repeat;
}

div.ex-block div.bx2 {
  background: url(../images/box_tr.png) 100% 0 repeat;
}

Inline labels Label and annotate text

Labels Markup
Default <span class="label">Default</span>
Success <span class="label label-success">Success</span>
Warning <span class="label label-warning">Warning</span>
Important <span class="label label-important">Important</span>
Info <span class="label label-info">Info</span>

Alerts Styles for success, warning, and error messages

This is a sample of the Approved style. To replicate, use the following syntax: <div class="alert">....</div>
This is a sample of the Approved style. To replicate, use the following syntax: <div class="alert alert-error">....</div>
This is a sample of the Approved style. To replicate, use the following syntax: <div class="alert alert-success">....</div>
This is a sample of the Approved style. To replicate, use the following syntax: <div class="alert alert-info">....</div>

Nav, tabs, and pills Highly customizable list-style navigation

Stacked tabs

  1. <ul class="nav nav-tabs nav-stacked">
  2. ...
  3. </ul>

Stacked pills

  1. <ul class="nav nav-pills nav-stacked">
  2. ...
  3. </ul>

Example nav list

Take a list of links and add class="nav nav-list":

  1. <ul class="nav nav-list">
  2. <li class="nav-header">
  3. List header
  4. </li>
  5. <li class="active">
  6. <a href="#">Home</a>
  7. </li>
  8. <li>
  9. <a href="#">Library</a>
  10. </li>
  11. ...
  12. </ul>

Example with icons

Same example, but with <i> tags for icons.

  1. <ul class="nav nav-list">
  2. ...
  3. <li>
  4. <a href="#">
  5. <i class="icon-book"></i>
  6. Library
  7. </a>
  8. </li>
  9. ...
  10. </ul>

Icons Text style

  • icon-glass
  • icon-music
  • icon-search
  • icon-envelope
  • icon-heart
  • icon-star
  • icon-star-empty
  • icon-user
  • icon-film
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-remove
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-trash
  • icon-home
  • icon-file
  • icon-time
  • icon-road
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-play-circle
  • icon-repeat
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-flag
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-book
  • icon-bookmark
  • icon-print
  • icon-camera
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-list
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • icon-picture
  • icon-pencil
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • icon-check
  • icon-move
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-play
  • icon-pause
  • icon-stop
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-chevron-left
  • icon-chevron-right
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • icon-question-sign
  • icon-info-sign
  • icon-screenshot
  • icon-remove-circle
  • icon-ok-circle
  • icon-ban-circle
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-gift
  • icon-leaf
  • icon-fire
  • icon-eye-open
  • icon-eye-close
  • icon-warning-sign
  • icon-plane
  • icon-calendar
  • icon-random
  • icon-comment
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal

Buttons

Button Class Description
.btn Standard gray button with gradient
.btn-primary Provides extra visual weight and identifies the primary action in a set of buttons
.btn-info Used as an alternate to the default styles
.btn-success Indicates a successful or positive action
.btn-warning Indicates caution should be taken with this action
.btn-danger Indicates a dangerous or potentially negative action
.btn-inverse Alternate dark gray button, not tied to a semantic action or use

Multiple sizes

Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for two additional sizes.

Button with icons

Refresh Checkout Delete

Comment Settings More Info

Tables For, you guessed it, tabular data

1. Default table styles

Tables are automatically styled with only a few borders to ensure readability and maintain structure. With 2.0, the .table class is required.

<table class="table">
  …
</table>
# First Name Last Name Language
1 Mark Otto CSS
2 Jacob Thornton Javascript
3 Stu Dent HTML

2. Striped table

Get a little fancy with your tables by adding zebra-striping—just add the .table-striped class.

Note: Striped tables use the :nth-child CSS selector and is not available in IE7-IE8.

<table class="table table-striped">
  …
</table>
# First Name Last Name Language
1 Mark Otto CSS
2 Jacob Thornton Javascript
3 Stu Dent HTML

3. Bordered table

Add borders around the entire table and rounded corners for aesthetic purposes.

<table class="table table-bordered">
  …
</table>
# First Name Last Name Language
1 Mark Otto CSS
2 Jacob Thornton Javascript
3 Stu Dent
3 Brosef Stalin HTML

4. Condensed table

Make your tables more compact by adding the .table-condensed class to cut table cell padding in half (from 8px to 4px).

<table class="table table-condensed">
  …
</table>
# First Name Last Name Language
1 Mark Otto CSS
2 Jacob Thornton Javascript
3 Stu Dent HTML

5. Combine them all!

Feel free to combine any of the table classes to achieve different looks by utilizing any of the available classes.

<table class="table table-striped table-bordered table-condensed">
  ...
</table>
# First Name Last Name Language
1 Mark Otto CSS
2 Jacob Thornton Javascript
3 Stu Dent HTML
4 Brosef Stalin HTML
Read 282400 times Last modified on Sunday, 11 March 2012 05:55
More in this category: « Module Variations