Print this page
Lunedì, 02 Maggio 2011 11:47

Typography

Written by 
Rate this item
(0 votes)

You can create some beautiful content by using some simple HTML elements. The Warp 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 Warp framework.

Basic HTML Elements

<h1> Heading Styles

H1. Heading 1

H2. Heading 2

H3. Heading 3

H4. Heading 4

H5. Heading 5
h6. Heading6

H2 Title with under line

<p> DropCap Styles

Use the following format: <p class="dropcap">A Praesent rutrum sapien ac felis</p> You can use any letter, symbol or number.

A Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis.

A Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis.

A Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis.

A Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisi.

<blockquote> Styles

Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibu. Pellentesque vel enim urna, sit amet blandit ipsum. Maecenas quis sem sit amet nunc pretium mattis. Sed dapibus semper est, sed pretium erat

— John due

Praesent rutrum sapien ac felis. Phasellus elementum dolor

— John due
Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibu. Pellentesque vel enim urna, sit amet blandit ipsum. Maecenas quis sem sit amet nunc pretium mattis. Sed dapibus semper est, sed pretium erat. Phasellus elementum dolor quis turpis.

Maecenas quis sem sit amet nunc pretium mattis.

— John due
Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibu. Pellentesque vel enim urna, sit amet blandit ipsum. Maecenas quis sem sit amet nunc pretium mattis. Sed dapibus semper est, sed pretium erat. Phasellus elementum dolor quis turpis.

Here is a short demonstration of text-level semanticts. The <p> 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.

Text-Level Semantics

You can emphasize text using the <em> element or to imply any extra importance the <strong> element. Highlight text with no semantic meaning using the <mark> 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.

Short List with Links

  • YOOtheme - Premium Joomla Templates and WordPress Themes
  • Warp Framework - Fast and Slick Theme Framework
  • ZOO - Content Application Builder
  • Stock Icons - For Web and Print Projects

Quotations and Code

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.

To define a short inline computer code use the <code> element. For a larger code snippet use the <pre> 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;
}
Use the <small> element for side comments and small print.

Useful CSS Classes

Here is a short demonstration of all style related CSS classes provided by the Warp framework.

Highlight Content

Drop caps are the first letter of a paragraph which are displayed bigger than the rest of the text. You can create a drop cap using the CSS class dropcap. To emphasize text with some small boxes use <em> element with the CSS class box.

This simple box is intended to group large parts of your content using the CSS class box-content.
This is a simple box to highlight some text using the CSS class box-note.
This is a simple box with useful information using the CSS class box-info.
This is a simple box with important notes and warnings using the CSS class box-warning.
This is a simple box with additional hints using the CSS class box-hint.
This is a simple box with download information using the CSS class box-download.

Use the CSS class dotted to create a dotted horizontal rule.


Tables

Create a zebra stripped table using using the CSS class zebra.

Table caption
Table Heading Table Heading Table Heading
Table Footer Table Footer Table Footer
Table Data Table Data Data Centered
Data Bold Table Data Data Centered
Table Data Table Data Data Centered

<ul> List Styles (CSS3)

These list styles are based on the latest CSS3 techniques and are designed to work in modern browsers (will not display properly in IE6-IE8). To replicate, use the following format: <ul class="class name"><li>....</li><li>....</li>...</ul> (HTML) The class names are listed below, such as "checkmark red".
  • Checkmark Green
  • Checkmark Green
  • Checkmark Yellow
  • Checkmark Yellow
  • Checkmark Red
  • Checkmark Red
  • Checkmark Blue
  • Checkmark Blue
  • Checkmark White
  • Checkmark White
  • Triangle-Small
  • Triangle-Small
  • Triangle
  • Triangle
  • Triangle-Large
  • Triangle-Large
  • Triangle Green
  • Triangle Green
  • Triangle Yellow
  • Triangle Yellow
  • Triangle Red
  • Triangle Red
  • Triangle Blue
  • Triangle Blue
  • Triangle White
  • Triangle White
  • Circle-Small
  • Circle-Small
  • Circle
  • Circle
  • Circle-Large
  • Circle-Large
  • Circle Green
  • Circle Green
  • Circle Yellow
  • Circle Yellow
  • Circle Red
  • Circle Red
  • Circle Blue
  • Circle Blue
  • Circle White
  • Circle White

Definition Lists

Create a nice looking definition list separated with a line by using the CSS class separator.

Definition List
A definition list is a list of terms and corresponding definitions. To create a definition list use the <dl> element in conjunction with <dt> to define the definition term and <dd> to define the definition description.
Definition Term
This is a definition description.
Definition Term
This is a definition description.
This is another definition description.

Forms

Create a clearly arranged form layout with fieldset boxes using the CSS class box.

Form legend

The generated SVG font can be imported back to IcoMoon for modification.

Heading 1 Example

Link style example

Easy Customization

You can create some beautiful content by using some simple HTML elements. The Warp 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 Warp framework.



CSS Class Names

 icon-home  icon-home-2  icon-home-3  icon-newspaper  icon-pencil  icon-pencil-2  icon-droplet  icon-picture  icon-picture-2  icon-camera  icon-music  icon-play  icon-film  icon-camera-2  icon-spades  icon-clubs  icon-diamonds  icon-broadcast  icon-microphone  icon-book  icon-bell  icon-bell-2  icon-bell-3  icon-clock  icon-history  icon-compass  icon-location  icon-mail  icon-phone  icon-support  icon-calculate  icon-basket  icon-cart  icon-tag  icon-folder  icon-folder-2  icon-copy  icon-new  icon-paper  icon-paper-2  icon-calendar  icon-mouse  icon-screen  icon-laptop  icon-mobile  icon-tablet  icon-mobile-2  icon-drawer  icon-drawer-2  icon-box-add  icon-box-remove  icon-database  icon-undo  icon-redo  icon-forward  icon-reply  icon-reply-2  icon-comments  icon-comments-2  icon-comments-3  icon-cog  icon-equalizer  icon-wrench  icon-unlocked  icon-locked  icon-key  icon-key-2  icon-zoom-out  icon-zoom-in  icon-search  icon-search-2  icon-loading  icon-loading-2  icon-busy  icon-user  icon-user-2  icon-user-3  icon-comments-4  icon-comments-5  icon-comments-6  icon-pie  icon-bars  icon-stats-up  icon-gift  icon-trophy  icon-diamond  icon-rocket  icon-meter-slow  icon-meter-medium  icon-coffee  icon-meter-fast  icon-dashboard  icon-fire  icon-lab  icon-remove  icon-remove-2  icon-remove-3  icon-briefcase  icon-briefcase-2  icon-cars  icon-menu  icon-menu-2  icon-tree-view  icon-grid-view  icon-playlist  icon-clipboard  icon-clipboard-2  icon-power  icon-power-2  icon-lightning  icon-target  icon-target-2  icon-accessibility  icon-accessibility-2  icon-glasses  icon-glasses-2  icon-puzzle  icon-cube  icon-cube-2  icon-bus  icon-cloud  icon-cloud-2  icon-download  icon-upload  icon-upload-2  icon-link  icon-link-2  icon-flag  icon-flag-2  icon-flag-3  icon-eye  icon-eye-2  icon-bookmark  icon-bookmark-2  icon-star  icon-star-2  icon-star-3  icon-heart  icon-heart-2  icon-thumbs-up  icon-arrow-up  icon-loop  icon-exit  icon-enter  icon-plus  icon-minus  icon-checkmark  icon-cancel  icon-cancel-2  icon-cancel-3  icon-blocked  icon-info  icon-help  icon-help-2  icon-minus-2  icon-plus-2  icon-neutral  icon-smiley  icon-happy  icon-thumbs-down  icon-arrow-right  icon-arrow-down  icon-arrow-left  icon-arrow-up-left  icon-arrow-up-2  icon-arrow-up-right  icon-arrow-right-2  icon-arrow-down-right  icon-arrow-down-2  icon-arrow-down-left  icon-arrow-left-2  icon-arrow-up-left-2  icon-arrow-up-3  icon-arrow-up-right-2  icon-arrow-right-3  icon-arrow-down-right-2  icon-arrow-down-3  icon-arrow-down-left-2  icon-arrow-left-3  icon-arrow-up-left-3  icon-menu-3  icon-arrow-left-4  icon-arrow-down-4  icon-arrow-right-4  icon-arrow-up-4  icon-arrow-left-5  icon-arrow-down-5  icon-arrow-right-5  icon-arrow-up-5  icon-arrow-left-6  icon-arrow-down-6  icon-arrow-right-6  icon-arrow-up-6  icon-arrow-left-7  icon-arrow-down-left-3  icon-arrow-down-7  icon-arrow-down-right-3  icon-arrow-right-7  icon-arrow-up-right-3  icon-arrow-up-7  icon-enter-2  icon-backspace  icon-backspace-2  icon-tab  icon-tab-2  icon-checkbox  icon-checkbox-unchecked  icon-checkbox-partial  icon-radio-checked  icon-radio-unchecked  icon-paragraph-left  icon-paragraph-center  icon-paragraph-right  icon-font  icon-left-to-right  icon-right-to-left  icon-out  icon-out-2  icon-embed  icon-seven-segment  icon-facebook  icon-facebook-2  icon-gplus  icon-google-plus  icon-google-plus-2  icon-google-plus-3  icon-mail-2  icon-mail-3  icon-share  icon-share-2  icon-seven-segment-2  icon-bluetooth  icon-seven-segment-3  icon-seven-segment-4  icon-seven-segment-5  icon-seven-segment-6  icon-seven-segment-7  icon-seven-segment-8  icon-seven-segment-9  icon-seven-segment-10  icon-facebook-3  icon-facebook-4  icon-twitter  icon-twitter-2  icon-feed  icon-feed-2  icon-feed-3  icon-youtube  icon-youtube-2  icon-vimeo  icon-vimeo-2  icon-flickr  icon-flickr-2  icon-flickr-3  icon-picassa  icon-picassa-2  icon-dribbble  icon-dribbble-2  icon-dribbble-3  icon-yahoo  icon-yahoo-2  icon-tumblr  icon-tumblr-2  icon-blogger  icon-blogger-2  icon-wordpress  icon-wordpress-2  icon-github  icon-git  icon-github-2  icon-twitter-3  icon-github-3  icon-github-4  icon-github-5  icon-github-6  icon-github-7  icon-deviantart  icon-deviantart-2  icon-forrst  icon-forrst-2  icon-amazon  icon-amazon-2  icon-apple  icon-finder  icon-android  icon-windows  icon-soundcloud  icon-soundcloud-2  icon-skype  icon-reddit  icon-linkedin  icon-lastfm  icon-delicious  icon-lastfm-2  icon-stumbleupon  icon-pinterest  icon-pinterest-2  icon-xing  icon-libreoffice  icon-stumbleupon-2  icon-IcoMoon  icon-safari  icon-opera  icon-IE  icon-firefox  icon-chrome  icon-html5  icon-html5-2  icon-file-xml  icon-file-zip  icon-file-excel  icon-file-word  icon-file-openoffice  icon-file-pdf  icon-file-powerpoint  icon-file-css  icon-css3  icon-clock-2  icon-leaf  icon-umbrella  icon-arrow-up-8  icon-globe  icon-cogs  icon-arrow-bottom  icon-arrow-left-8  icon-arrow-right-8  icon-umbrella-2  icon-map-pin-fill  icon-cloudy  icon-earth

<img> Dynamic shadow

Here some examples are images with dynamic shadow. The shadow is automatically added this with only one class added to the image.
Just like <img src="/moto/images/image.jpg" class="shadow1" alt="image" /> shadow-test
<img src="/moto/images/image.jpg" class="shadow2" alt="image" /> shadow-test
<img src="/moto/images/image.jpg" class="shadow3" alt="image" /> shadow-test
<img src="/moto/images/image.jpg" class="shadow4" alt="image" /> shadow-test
<img src="/moto/images/image.jpg" class="shadow5" alt="image" /> shadow-test
<img src="/moto/images/image.jpg" class="shadow6" alt="image" /> shadow-test
<img src="/moto/images/image.jpg" class="shadow9" alt="image" /> shadow-test
<img src="/moto/images/image.jpg" class="shadow10" alt="image" /> shadow-test
Read 7220 times Last modified on Venerdì, 18 Gennaio 2013 16:33
Super User

Latest from Super User