Content Styling

Details: Hits: 1341

You can create some beautiful content by using some simple HTML elements. The Gantry Theme Framework offers some neat styles for all HTML elements and a great set of CSS classes to style your content. Basic HTML is very easy to learn and this small guide shows you how to use all styles provided by the Gantry Framework.

Text-Level Semantics

H1 Text

H2 Text

H3 Text

H4 Text

H5 Text

H6 Text

Here is a short demonstration of text-level semanticts. The element creates a new paragraph. It will have some space before and after itself. To turn your text into hypertext just use the <a> element.

You can emphasize text using the  element or to imply any extra importance the  element. Highlight text with no semantic meaning using the element. Markup document changes like inserted or deleted text with the ~~<del> element~~ or <ins> element. To define an abbreviation use the <abbr> element and to define a definition term use the <dfn> element.

Use the element for side comments and small print.

List Examples

There are several list examples that you can use in your design just apply a css class to the UL tag and you will have list styled. There are currently 6 list styles available:

Example Line List

Sample list item
Sample list item
Sample list item

<ul class="line"> ... </ul>

Example Zebra List

Sample list item
Sample list item
Sample list item

<ul class="zebra"> ... </ul>

Example Check List

Sample list item
Sample list item
Sample list item
Sample list item

<ul class="check"> ... </ul>

Example Plus List

Sample list item
Sample list item
Sample list item

<ul class="plus"> ... </ul>

Example Minus List

Sample list item
Sample list item
Sample list item

<ul class="minus"> ... </ul>

Example Asterisk List

Sample list item
Sample list item
Sample list item

<ul class="asterisk"> ... </ul>

Example of Unordered List

Premium WordPress and Joomla Templates
Fast and Slick Theme Framework
For Web and Print Projects

<ul>
  <li>Premium WordPress and Joomla Templates</li>
  <li>Fast and Slick Theme Framework</li>
  <li>For Web and Print Projects</li>
</ul>

Example of Ordered List

Premium WordPress and Joomla Templates
Fast and Slick Theme Framework
For Web and Print Projects

<ol>
  <li>Premium WordPress and Joomla Templates</li>
  <li>Fast and Slick Theme Framework</li>
  <li>For Web and Print Projects</li>
</ol>

Description

A list of terms with their associated descriptions.

Description lists: A description list is perfect for defining terms.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

Horizontal description

Make terms and descriptions in <dl> line up side-by-side.

Description lists: A description list is perfect for defining terms.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

Horizontal description lists will truncate terms that are too long to fit in the left column fix text-overflow. In narrower viewports, they will change to the default stacked layout.

Quotations

Inline quotations can be defined by using the <q> element.

The <blockquote> element defines a long quotation which also creates a new block by inserting white space before and after the blockquote element.

Someone famous Source Title

<blockquote>
	<p>The &lt;blockquote&gt; element defines a long quotation which ...</p>
	<small>Someone famous <cite title="Source Title">Source Title</cite></small>
</blockquote>

The <blockquote> element defines a long quotation which also creates a new block by inserting white space before and after the blockquote element.

Someone famous Source Title

<blockquote class="pull-right">
	<p>The &lt;blockquote&gt; element defines a long quotation which ...</p>
	<small>Someone famous <cite title="Source Title">Source Title</cite></small>
</blockquote>
<div class="clear"></div>

Code

To define a short inline computer code use the <code> element.

For a larger code snippet use the <pre class="prettyprint linenums"> element which defines preformatted text. It creates a new text block which preserves both spaces and line breaks.

pre {
	margin: 15px 0;
	padding: 10px;
	font-family: "Courier New", Courier, monospace;
	font-size: 12px;
	line-height: 18px;
	white-space: pre-wrap;
}

Note: Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.
You may optionally add the .pre-scrollable class which will set a max-height of 350px and provide a y-axis scrollbar.

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-outline btn-outline-invert`	Alternate black outline button, if you want it to be white erase the “btn-outline-invert”
	`btn btn-link`	Deemphasize a button by making it look like a link while maintaining button behavior

Cross browser compatibility

IE9 doesn’t crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.

Button sizes

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

Dividers

<hr/>

<hr class="dotted"/>

<hr class="hr-1"/>

<hr class="hr-2"/>

<hr class="hr-3"/>

<hr class="hr-4"/>

<hr class="hr-5"/>

<hr class="hr-6"/>

<hr class="hr-7"/>

<hr class="hr-8"/>

<hr class="hr-9"/>

<hr class="hr-10"/>

Simple Notices

Use the  tag with .success, .warning, .info or .error classes.

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<p class="success">...</p>

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<p class="info">...</p>

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<p class="warning">...</p>

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<p class="error">...</p>

Addresses

Preserve formatting by ending all lines with  .

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

Full Name
This email address is being protected from spambots. You need JavaScript enabled to view it.

<address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">This email address is being protected from spambots. You need JavaScript enabled to view it.
 </a>
</address>