Snippets

What is a snippet?

The template snippets are special CSS classes that you can assign to HTML elements to style them.
This is an example:

Hi, I am a special paragraph! my code is: <p class=¨success¨> my text </p>

The CSS class "success" is a snippet.

How can I use a snippet?

It depends on the editor you use. We recommend using the editor TinyMCE. When using this editor you can switch to Code mode, then simply edit the HTML code and add the attribute class=¨snippet-name¨ to the element you want to style.

Snippets Available

Text snippets:

A paragraph with "monospace" text.

Snippet code:

<p class=¨monospace¨>my text</p>

A paragraph with "serif" text.

Snippet code:

<p class=¨serif¨>my text</p>

A paragraph with "sans-serif" text.

Snippet code:

<p class=¨sans-serif¨>my text</p>

A span with "smaller-text": demo text, "small-text" demo text, "xsmall-text" demo text, "xxsmall-text" demo text, "xxxsmall-text" demo text, "xxxxsmall-text" demo text.

Snippet code:

<span class=¨smaller-text/small-text/xsmall-text/xxsmall-text/xxxsmall-text/xxxxsmall-text¨>text</span>

A span with "larger-text" demo text, "large-text" demo text, "xlarge-text" demo text, "xxlarge-text" demo text, "xxxlarge-text" demo text, "xxxxlarge-text" demo text.

Snippet code:

<span class=¨larger-text/large-text/xlarge-text/xxlarge-text/xxxlarge-text/xxxxlarge-text¨>text</span>

A span with "green-mark" text.

Snippet code:

<span class=¨green-mark¨>my text</span>

A span with "yellow-mark" text.

Snippet code:

<span class=¨yellow-mark¨>my text</span>

A span with "red-mark" text.

Snippet code:

<span class=¨red-mark¨>my text</span>

A span with "violet-mark" text.

Snippet code:

<span class=¨violet-mark¨>my text</span>

A span with "blue-mark" text.

Snippet code:

<span class=¨blue-mark¨>my text</span>

An "error" paragraph.

Snippet code:

<p class=¨error¨>my text</p>

A "notice" paragraph.

Snippet code:

<p class=¨notice¨>my text</p>

A "success" paragraph.

Snippet code:

<p class=¨success¨>my text</p>

A grey highlight paragraph.

Snippet code:

<p class=¨highlight-grey¨>my text</p>

A green highlight paragraph.

Snippet code:

<p class=¨highlight-green¨>my text</p>

A red highlight paragraph.

Snippet code:

<p class=¨highlight-red¨>my text</p>

A brown highlight paragraph.

Snippet code:

<p class=¨highlight-brown¨>my text</p>

A yellow highlight paragraph.

Snippet code:

<p class=¨highlight-yellow¨>my text</p>

A blue highlight paragraph.

Snippet code:

<p class=¨highlight-blue¨>my text</p>

A black highlight paragraph.

Snippet code:

<p class=¨highlight-black¨>my text</p>

Columns

A full width paragraph. Note that you can apply this snippet to any HTML element and not only to <p> elements.

Snippet code:

<p class=¨col-style-full¨>my text</p>

A 50% width paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Snippet code:

<p class=¨col-style-2¨>my text</p>

A 33% width paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Snippet code:

<p class=¨col-style-3¨>my text</p>

A 25% width paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Snippet code:

<p class=¨col-style-4¨>my text</p>

A 20% width paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Snippet code:

<p class=¨col-style-5¨>my text</p>

A 16% width paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Snippet code:

<p class=¨col-style-6¨>my text</p>

Block positioning

A nice photo. A left floated block ( image ). This block has no margins or paddings. Note that you can apply this snippet to all blocks, not only images. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Snippet code:

<img class=¨float-left¨ />

A nice photo. A right floated block ( image ). This block has no margins or paddings. Note that you can apply this snippet to all blocks, not only images. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Snippet code:

<img class=¨float-right¨ />

A nice photo. A left floated image ( article style ). This is a useful snippet for aligning article's images. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Snippet code:

<img class=¨article-image-left¨ />

A nice photo. A right floated image ( article style ). This is a useful snippet for aligning article's images. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Snippet code:

<img class=¨article-image-right¨ />

Marked Blocks

A dark marked paragraph. Note that you can apply this snippet to all blocks, not only paragraphs. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Snippet code:

<p class=¨marked-block-dark¨>my text</p>

A light marked paragraph. Note that you can apply this snippet to all blocks, not only paragraphs. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Snippet code:

<p class=¨marked-block-light¨>my text</p>

Interesting Combinations

You can use multiple snippet combinations. Here are some examples.

A 25% width block, left floated

A simple 25% width paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

This content will wrap around the floated block. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.

Snippet code:

<p class=¨col-style-4¨>my text</p>

A 33% width block, right floated

A 33% width paragraph, right floated. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.

Snippet code:

<p class=¨col-style-3 float-right¨>my text</p>

A 33% width block, right floated, light style

A light marked paragraph, left floated, 25%width. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus.

Snippet code:

<p class=¨marked-block-light float-left col-style-4¨>my text</p>

A 33% width block, right floated, dark style

A dark marked paragraph, right floated, 33% width.

Snippet code:

<p class=¨marked-block-dark float-right col-style-3¨>my text</p>

Floated blocks combinations

A light marked paragraph, right floated, 20% width.

A dark marked paragraph, left floated, 16% width.

Snippet code:

<p class=¨marked-block-light float-right col-style-5¨>my text</p>

<p class=¨marked-block-dark float-left col-style-16¨>my text</p>

Styled blocks and column layout

Attention: if you want to have a column layout and styled blocks you need to add a wrapper <div> element:

A light marked paragraph, 50% width column layout. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.

Snippet code:

<div class=¨col-style-2¨>

    <p class=¨marked-block-light¨>my text</p>

</div>

<div class=¨col-style-2¨>

    <p class=¨marked-block-light¨>my text</p>

</div>

Multiple blocks combinations

A highlight blue paragraph, left floated, 33% width.

A succes paragraph, left floated, 20% width.

A plain paragraph, left floated, 25% width.

Snippet code:

<p class=¨highlight-blue float-left col-style-3¨>my text</p>

<p class=¨success float-left col-style-5¨>my text</p>

<p class=¨float-left col-style-4¨>my text</p>

Buttons

A grey button

Snippet code:

<a class=¨grey-button-style¨>my text</a>

A white button

Snippet code:

<a class=¨white-button-style¨>my text</a>

A green button

Snippet code:

<a class=¨green-button-style¨>my text</a>

A red button

Snippet code:

<a class=¨red-button-style¨>my text</a>

A yellow button

Snippet code:

<a class=¨yellow-button-style¨>my text</a>

A violet button

Snippet code:

<a class=¨violet-button-style¨>my text</a>

A blue button

Snippet code:

<a class=¨blue-button-style¨>my text</a>

A black button

Snippet code:

<a class=¨black-button-style¨>my text</a>

Rounded Corners ( CSS3 support needed )

Use the following snippet combinations to get rounded buttons:

button button button button button button button button

Snippet code:

<a class=¨grey-button-style rounded-corners¨>my text</a>

<a class=¨white-button-style rounded-corners¨>my text</a>

<a class=¨green-button-style rounded-corners¨>my text</a>

<a class=¨red-button-style rounded-corners¨>my text</a>

<a class=¨yellow-button-style rounded-corners¨>my text</a>

<a class=¨violet-button-style rounded-corners¨>my text</a>

<a class=¨blue-button-style rounded-corners¨>my text</a>

<a class=¨black-button-style rounded-corners¨>my text</a>

You can use the rounded corners class also for other elements; for example:

A success paragraph, 33% width and rounded corners.

Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.

Snippet code:

<p class=¨highlight-green rounded-corners¨>my text</p>

Box Shadow ( CSS3 support needed )

Use the following snippet combinations to get shadowed blocks:

Black shadow:

button button button

Snippet code:

<a class=¨grey-button-style rounded-corners black-shadow¨>my text</a>

<a class=¨white-button-style rounded-corners black-shadow¨>my text</a>

<a class=¨green-button-style rounded-corners black-shadow¨>my text</a>

Grey shadow:

button button button

Snippet code:

<a class=¨red-button-style rounded-corners grey-shadow¨>my text</a>

<a class=¨yellow-button-style rounded-corners grey-shadow¨>my text</a>

<a class=¨violet-button-style rounded-corners grey-shadow¨>my text</a>

White shadow:

button button button

Snippet code:

<a class=¨blue-button-style rounded-corners white-shadow¨>my text</a>

<a class=¨black-button-style rounded-corners white-shadow¨>my text</a>

<a class=¨green-button-style rounded-corners white-shadow¨>my text</a>

The shadow snippet can be applied to all blocks:

A plain paragraph, 33% width, grey shadow added.

Snippet code:

<p class=¨marked-block-light col-style-3 grey-shadow¨>my text</p>

Javascript snippets

Attention: these snippets are available only if JavaScript is enabled.

Tooltip

This snippet shows a quick tooltip based on the element's title: Hover me!

Snippet code:

<a class=¨show-tooltip¨ title=¨This is the link title¨>Hover me!</a>

Accordion Block

This snippet hides an element partially.

Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.

Snippet code:

<p class=¨accordion-block¨>My text</p>

Other snippets ( advanced )

The next snippets are very useful to web-developers:

visually-hidden: This snippet hides the HTML element to normal graphic browsers but it is still readable by screen readers and search engines. This snippet is very useful for targeting specific content to screen readers and search engines.

Snippet code example:

<p class=¨visually-hidden¨>This content can be read only by screen readers and search engines</p>

visually-hidden.focusable: When the element is focused, this snippet shows the element that was previously hidden.

Snippet code example:

<p class=¨visually-hidden focusable¨>When focused, this element will be visible</p>

removed: This snippet removes the element from the layout. It cannot be read by screen readers.

Snippet code example:

<div class=¨removed¨>This DIV element is removed</div>

clearfix: This snippet clears the floated elements after and before.

Snippet code example:

<div class=¨clearfix¨>Content</div>

text-hidden: This snippet hides the element's text (it is useful for image replacement).

Snippet code example:

<p class=¨text-hidden¨>This text will not be visible</p>

spacing-reset: This snippet set margins and paddings to zero.

Snippet code example:

<p class=¨spacing-reset¨>This element has no margins nor paddings</p>

list-reset: This snippet set all padding and margin to zero for <ul> and <ol> elements and their inner children (<ol>, <ul> and <li>). This snippet is useful if you need to build a menu.

Snippet code example:

<ul class=¨list-reset¨>
    <li><a href="#">Menu link 1</a></li>
    <li><a href="#">Menu link 2</a></li>
    <li><a href="#">Menu link 3</a></li>
</ul>
The above list has padding and margin set to 0

wrapper-element: This snippet sets an element as a wrapper. This means that no margins nor paddings are applied, overflow is set to hidden and the display property is set to inline-block.

Snippet code example:

<p class=¨wrapper-element¨>This paragraph will simply wrap its inner content</p>

Other minor snippets

<div class=¨clear-both¨>the CSS property "clear:both;" is set</div>

<div class=¨float-left¨>the CSS property "float:left;" is set</div>

<div class=¨float-right¨>the CSS property "float:right;" is set</div>

<div class=¨display-block¨>the CSS property "display:block;" is set</div>

<div class=¨display-inline¨>the CSS property "display:inline;" is set</div>

<div class=¨display-inlineblock¨>the CSS property "display:inline-block;" is set</div>

<div class=¨invisible¨>the CSS property "visbility:hidden;" is set</div>

zhong

Login form

What is a snippet?

How can I use a snippet?

Snippets Available

Text snippets:

Columns

Block positioning

Marked Blocks

Interesting Combinations

A 25% width block, left floated

A 33% width block, right floated

A 33% width block, right floated, light style

A 33% width block, right floated, dark style

Floated blocks combinations

Styled blocks and column layout

Multiple blocks combinations

Buttons

Rounded Corners ( CSS3 support needed )

Box Shadow ( CSS3 support needed )

Black shadow:

Grey shadow:

White shadow:

Javascript snippets

Tooltip

Accordion Block

Other snippets ( advanced )

Other minor snippets