Typographical Components

Paragraph Text

Paragraph text is set in slightly larger size than is typical. This is in the tradition of recent design trends, especially blogged and discussed by Trent Walton. People seem to like a larger print size, easier to read, and generally a better experience. The body/paragraph text is set in 16px, with a line height of 29px, a color of #676767. The bottom margin is 30px. Of course, it’s possible to change this in your Theme Options, under the Typography section.


Header Sizes

Here is a simple list of header sizes.

<h1> Just so you know – this is H1 </h1>

<h2> Well, I am incredulous! This is H2 </h2>

<h3> Hold your horses! This is H3 </h3>

<h4> Put the women and children to bed – here is H4 </h4>

<h5> I feel like I’m shrinking…This is H5 </h5>
<h6> Am I invisible? This is H6 </h6>

Unordered Lists

  • Suspendisse eget libero ut nisl pretium ullamcorper.
  • Aliquam scelerisque magna sit amet erat sollicitudin sed imperdiet turpis accumsan?
  • Donec id sem ligula, sit amet imperdiet orci.
  • In ullamcorper aliquet risus, quis viverra ante faucibus sed.

Ordered Lists

  1. Suspendisse eget libero ut nisl pretium ullamcorper.
  2. Aliquam scelerisque magna sit amet erat sollicitudin sed imperdiet turpis accumsan?
  3. Donec id sem ligula, sit amet imperdiet orci.
  4. In ullamcorper aliquet risus, quis viverra ante faucibus sed.

Emphasis Classes

These can be useful when trying to be more descriptive in your text.
<span class="text-muted"> Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </span>
<span class="text-warning"> Etiam porta sem malesuada magna mollis euismod. </span>
<span class="text-error"> Donec ullamcorper nulla non metus auctor fringilla. </span>
<span class="text-info"> Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis. </span>
<span class="text-success"> Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </span>

Address Markup

Siiimple, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name

Default buttons

Button styles can be applied to anything with the .btn class applied. However, typically you’ll want to apply these to only <a> and <button> elements for the best rendering.

Button class=”” Description
btn Standard gray button with gradient
btn btn-primary Provides extra visual weight and identifies the primary action in a set of buttons
btn btn-info Used as an alternative to the default styles
btn btn-success Indicates a successful or positive action
btn btn-warning Indicates caution should be taken with this action
btn btn-danger Indicates a dangerous or potentially negative action
btn btn-inverse Alternate dark gray button, not tied to a semantic action or use
btn btn-link Deemphasize a button by making it look like a link while maintaining button behavior

Button Sizes

<button class="btn btn-large btn-primary" type="button"></button>

<button class="btn btn-large" type="button"></button>

<button class="btn btn-primary" type="button"></button>

<button class="btn" type="button"></button>

<button class="btn btn-small btn-primary" type="button"></button>

<button class="btn btn-small" type="button"></button>

<button class="btn btn-mini btn-primary" type="button"></button>

<button class="btn btn-mini" type="button"></button>

Adding Links to Buttons

<button class="btn btn-mini" type="button"><a href>http://www.siiimple.comButton Name Here</a></button>

Icon glyphs

140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.

  • 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
  • icon-hdd
  • icon-bullhorn
  • icon-bell
  • icon-certificate
  • icon-thumbs-up
  • icon-thumbs-down
  • icon-hand-right
  • icon-hand-left
  • icon-hand-up
  • icon-hand-down
  • icon-circle-arrow-right
  • icon-circle-arrow-left
  • icon-circle-arrow-up
  • icon-circle-arrow-down
  • icon-globe
  • icon-wrench
  • icon-tasks
  • icon-filter
  • icon-briefcase
  • icon-fullscreen

Leave a Reply

Your email address will not be published.