Typography

You can cre­ate some beau­ti­ful con­tent by using some sim­ple HTML ele­ments. The Warp theme frame­work offers some neat styles for all HTML ele­ments and a great set of CSS classes to style your con­tent. Basic HTML is very easy to learn and this small guide shows you how to use all styles pro­vided by the Warp framework.

Basic HTML Elements

Here is a short demon­stra­tion of text-level seman­ticts. The <p> ele­ment cre­ates a new para­graph. It will have some space before and after itself. To turn your text into hyper­text just use the <a> ele­ment.

Text-Level Seman­tics

You can empha­size text using the <em> ele­ment or to imply any extra impor­tance the <strong> ele­ment. High­light text with no seman­tic mean­ing using the <mark> ele­ment. Markup doc­u­ment changes like inserted or deleted text with the <del> ele­ment or <ins> ele­ment. To define an abbre­vi­a­tion use the <abbr> ele­ment and to define a def­i­n­i­tion term use the <dfn> ele­ment.

Short List with Links

  • YOOtheme — Pre­mium Joomla Tem­plates and Word­Press Themes
  • Warp Frame­work — Fast and Slick Theme Framework
  • ZOO — Con­tent Appli­ca­tion Builder
  • Stock Icons — For Web and Print Projects

Quo­ta­tions and Code

Inline quo­ta­tions can be defined by using the <q> ele­ment.

The <block­quote> ele­ment defines a long quo­ta­tion which also cre­ates a new block by insert­ing white space before and after the block­quote element.

To define a short inline com­puter code use the <code> element. For a larger code snip­pet use the <pre> ele­ment which defines pre­for­mat­ted text. It cre­ates a new text block which pre­serves 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;
}

Use the <small> ele­ment for side com­ments and small print.


Use­ful CSS Classes

Here is a short demon­stra­tion of all style related CSS classes pro­vided by the Warp framework.

High­light Content

Drop caps are the first let­ter of a para­graph which are dis­played big­ger than the rest of the text. You can cre­ate a drop cap using the CSS class dropcap. To empha­size text with some small boxes use <em> ele­ment with the CSS class box.

This sim­ple box is intended to group large parts of your con­tent using the CSS class box-content.
This is a sim­ple box to high­light some text using the CSS class box-note.
This is a sim­ple box with use­ful infor­ma­tion using the CSS class box-info.
This is a sim­ple box with impor­tant notes and warn­ings using the CSS class box-warning.
This is a sim­ple box with addi­tional hints using the CSS class box-hint.
This is a sim­ple box with down­load infor­ma­tion using the CSS class box-download.

Use the CSS class dotted to cre­ate a dot­ted hor­i­zon­tal rule.


Tables

Cre­ate a zebra stripped table using using the CSS class zebra.

Table cap­tion
Table Head­ing Table Head­ing Table Head­ing
Table Footer Table Footer Table Footer
Table Data Table Data Data Cen­tered
Data Bold Table Data Data Cen­tered
Table Data Table Data Data Cen­tered

Def­i­n­i­tion Lists

Cre­ate a nice look­ing def­i­n­i­tion list sep­a­rated with a line by using the CSS class separator.

Def­i­n­i­tion List
A def­i­n­i­tion list is a list of terms and cor­re­spond­ing def­i­n­i­tions. To cre­ate a def­i­n­i­tion list use the <dl> ele­ment in con­junc­tion with <dt> to define the def­i­n­i­tion term and <dd> to define the def­i­n­i­tion description.
Def­i­n­i­tion Term
This is a def­i­n­i­tion description.
Def­i­n­i­tion Term
This is a def­i­n­i­tion description.
This is another def­i­n­i­tion description.

Forms

Cre­ate a clearly arranged form lay­out with field­set boxes using the CSS class box.

Form leg­end