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.
<p>...</p>
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
- 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.
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
<address> Siiimple, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
</address>
Full Namefirst.last@example.com
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.