Documentation

Shortcodes

This section is devoted to shortcodes available in Quickr template. There are some bonus shortcodes not implemented in Demo website. Following is the detailed review of each of shortcodes.

Columns

Columns are useful to define the layout of your pages. The template supports up to 16 column layouts with many combinations.

Don't forget

An "omega" postfix class should be added to every last column and an "alpha" prefix to every first column in page for consistent look.
For 2 column layout it looks like this:
<div class="eight columns last">Some text...</div>

All columns are floated left, so if you want to quit floating mode, don't forget to add
<div class="clear"></div>
after the columns.

Type	Description	Sample Code
One Half	Column that takes one half (1/2) of page.	<div class="eight columns">Some text...</div>
One Third	Column that takes one third (1/3) of page.	<div class="one-third column">Some text...</div>
One Fourth	Column that takes one fourth (1/4) of page.	<div class="four columns">Some text...</div>
One Eighth	Column that takes one fifth (1/8) of page.	<div class="two columns">Some text...</div>
Two Third	Column that takes one two third (2/3) of page.	<div class="two-thirds column">Some text...</div>
Three eighth and five eighth	Combination of columns that takes one three fourth (3/8 and 5/8) of page.	<div class="ten columns">Some text...</div> <div class="six columns">Some text...</div>

Columns Spacing

Spacing between elements with vaious values. There are 2 types of spacing: To have column-wide spacing (offsets) and a regular one, just to separate the values.

Offsets

The offsets are to apply column-wide left padding to the elements. As the template is based on 960px 16 Column grid, the minimal unit is 1 column and you can have up to 15 columns of offset. Following is the code for 1 and 11 column offsets.

Margins

Attributes
Attribute	Description	Default Value
type	Direction of spacing. possible values: top, bottom, right, left.	top
amount	Amount of spacing. possible values: 0,5,10,15,20,25,30,40,50.	10
Syntax Sample
<div class="top10">Some text...</div>

Buttons

Stylish buttons with variety of options. Below is the list of classes for the buttons with the corresponding descriptions.

Attributes
Class	Description	Other Options available
button	Required Makes an element look like a button	-
medium	Add this class for a bigger-sized button.	-
big	Add this class for big-sized button	-
Syntax Sample
<a href="#" class="button medium">Medium size button</a>

Quotes

The syntax of the blockquotes speaks for itself. You can remove the arrow or not specify the author by removing corresponding blocks from the syntax.

<blockquote> <span class="bq-arrow"></span> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed ipsum tortor. Nam aliquam lacinia </p> <p class="bq-author">Lance Dorgan</p> </blockquote>

Text Sliders

There are 2 types of text sliders - Full width and mini-sized.

Full size text slider

The slider is very easy to use, the each list element is considered as a slide. Don't forget to paste the corresponding Jquery code wherever you want to use a text slider.

<div class="textSlider"> <ul> <li> <h2>Fast, Clean and Modern</h2> <p> Everyone knows that this days peopele are not reading the website anymore. They just scan it. They glance at it in the same way you glance at advertisements in a magazine. </p> </li> <li> <h2>Another one</h2> <p> Everyone knows that this days peopele are not reading the website anymore. They just scan it. They glance at it in the same way you glance at advertisements in a magazine. </p> </li> </ul> </div>

Mini-size text slider

The syntax for mini-slider is the same as for the full text Slider. The only difference is that you have to apply class "mini-slider" instead of "textSlider". This slider was used on About page's testimonials section.

<div class="mini-slider"> <ul> <li> Slide content goes here... </li> <li> Slide content goes here... </li> </ul> </div>

Lists

Unordered Lists

There are 4 types of unordered lists. Available classes: type1, type2, type4, type5. Below is a syntax sample.

<div> class="list type1"> <ul > <li>lorem ipsum</li> <li>lorem ipsum</li> <li>lorem ipsum</li> <li>lorem ipsum</li> <li>lorem ipsum</li> </ul> </div>

Ordered Lists

There are 4 types of Ordered lists. Available classes: type1, type2, type3, type4. Below is a syntax sample.

<div> class="olist type1"> <ol > <li>lorem ipsum</li> <li>lorem ipsum</li> <li>lorem ipsum</li> <li>lorem ipsum</li> <li>lorem ipsum</li> </ol> </div>

Tooltips

Tooltips should be applied to parent element of any item you want to show tooltip on. Elements you can apply tooltip on are the following: a, div, p. All you need to do is to specify Title parameter for the tooltip and insert the tooltip text as title and add class "tooltip" for that element. Below is the code for social buttons tooltips.

Dividers

There are 2 types of dividers - Central and regular. Following is the syntax for both.

// Regular Divider <div class="divider"></div> // Central Divider <div class="central-divider"></div>

Tabs

There are 2 types of tabs: Regular tabs, as used on blog page sidebar and advanced tabs, like seen on services page. Following is the code for advanced tabs. The use of regular tabs is the same except that the class "type2" is not applied to tab list element or content divs.

<ul class="tabs type2"> <li> <a href="#">1. Step One<span>Some title...</span></a> </li> <li> <a href="#">2. Step Two<span>Some title...</span></a> </li> <li> <a href="#">3. Step Three<span>Some title...</span></a> </li> <li> <a class="" href="#">4. Step Four<span>Some title...</span></a> </li> </ul> <div class="clear"></div> <div class="panes"> <div class="pane type2"> Content part goes here.... </div> <div class="pane type2"> Content part goes here.... </div> <div class="pane type2"> Content part goes here.... </div> <div class="pane type2"> Content part goes here.... </div> </div>

Toggles

Toggles are an easy way to make your content more compact and wrap it into logical blocks. Syntax is very simple and is presented below. All you need is to apply class "toggle" to an unordered list. The rest is handled automatically.

<ul class="toggle"> <li>First toggle content goes here</li> <li>Second toggle content goes here</li> <li>Third toggle content goes here</li> </ul>

Previous Section (Template Files and Structure) Next Section (Sliders)