Responsive Images and Styles
By nature images are not responsive. If you want Images to be Responsive just add class "size-auto" to them and they will re-size to the screen size. We have example of images with Lightbox on them that work with responsive design.
<img class="size-auto" src="image" alt="Sample Image"/>
Image Styles
border
polaroid
well
round
<img class="size-auto polaroid" src="Image" alt="Sample Image"/>Columns
This page includes example of columns that you can use in the content when you write your Blog or a Page. The instructions is simple place the html code that is below and add content.
100% Width Column
The more you tighten your grip, Tarkin, the more star systems will slip through your fingers. I'm surprised you had the courage to take the responsibility yourself. The plans you refer to will soon be back in our hands.
<div class="grid-block grid-gutter">
<div class="grid-box width100">
<div> . . . </div>
</div>
</div>
50% Width Column
The more you tighten your grip, Tarkin, the more star systems will slip through your fingers. I'm surprised you had the courage to take the responsibility yourself. The plans you refer to will soon be back in our hands.
50% Width Column
The more you tighten your grip, Tarkin, the more star systems will slip through your fingers. I'm surprised you had the courage to take the responsibility yourself. The plans you refer to will soon be back in our hands.
<div class="grid-block grid-gutter">
<div class="grid-box width50">
<div> . . . </div>
</div>
<div class="grid-box width50">
<div> . . . </div>
</div>
</div>
33% Width Column
The more you tighten your grip, Tarkin, the more star systems will slip through your fingers. I'm surprised you had the courage to take the responsibility yourself. The plans you refer to will soon be back in our hands.
33% Width Column
The more you tighten your grip, Tarkin, the more star systems will slip through your fingers. I'm surprised you had the courage to take the responsibility yourself. The plans you refer to will soon be back in our hands.
33% Width Column
The more you tighten your grip, Tarkin, the more star systems will slip through your fingers. I'm surprised you had the courage to take the responsibility yourself. The plans you refer to will soon be back in our hands.
<div class="grid-block grid-gutter">
<div class="grid-box width33">
<div> . . . </div>
</div>
<div class="grid-box width33">
<div> . . . </div>
</div>
<div class="grid-box width33">
<div> . . . </div>
</div>
</div>
25% Width Column
The more you tighten your grip, Tarkin, the more star systems will slip through your fingers. I'm surprised you had the courage to take the responsibility yourself. The plans you refer to will soon be back in our hands.
25% Width Column
The more you tighten your grip, Tarkin, the more star systems will slip through your fingers. I'm surprised you had the courage to take the responsibility yourself. The plans you refer to will soon be back in our hands.
25% Width Column
The more you tighten your grip, Tarkin, the more star systems will slip through your fingers. I'm surprised you had the courage to take the responsibility yourself. The plans you refer to will soon be back in our hands.
25% Width Column
The more you tighten your grip, Tarkin, the more star systems will slip through your fingers. I'm surprised you had the courage to take the responsibility yourself. The plans you refer to will soon be back in our hands.
<div class="grid-block grid-gutter">
<div class="grid-box width25">
<div> . . . </div>
</div>
<div class="grid-box width25">
<div> . . . </div>
</div>
<div class="grid-box width25">
<div> . . . </div>
</div>
<div class="grid-box width25">
<div> . . . </div>
</div>
</div>
You can combine different width classes to suit your needs.
The available width classes are:
width16,
width20,
width25,
width33,
width40,
width50,
width60,
width66,
width75,
width80,
width100
60% Width Column
The more you tighten your grip, Tarkin, the more star systems will slip through your fingers. I'm surprised you had the courage to take the responsibility yourself. The plans you refer to will soon be back in our hands.
40% Width Column
The more you tighten your grip, Tarkin, the more star systems will slip through your fingers. I'm surprised you had the courage to take the responsibility yourself.
<div class="grid-block grid-gutter">
<div class="grid-box width60">
<div> . . . </div>
</div>
<div class="grid-box width40">
<div> . . . </div>
</div>
</div>Pricing Table
To create your own pricing table simply paste this code in the page, this will make a shell of your Pricing Table. Depending on the number of colums you would like to have, simply use the Warp width-classes e.g. width25 to set up the column width. Use the classes price and highlighted to easily highlight certain areas.
<div class="grid-block pricing">
<div class="grid-box width25">
<div> ... </div>
</div>
<div class="grid-box width25">
<div> ... </div>
</div>
<div class="grid-box width25 hightlighted">
<div> ... </div>
</div>
<div class="grid-box width25">
<div> ... </div>
</div>
</div>Here is the example on how to add content in your pricing table, add this in the spot of the three dots.
<h2>Name</h2>
<div class="price">$39</div>
<ul class="zebra">
<li class="odd">Feature 1</li>
<li>Feature 2</li>
<li class="odd">Feature 3</li>
</ul>
<a href="#" class="button-default">Buy now</a>
