Responsive Visibility

Scritto da Happy Scoot on . Postato in Features

Try Resizing your Browser and see what happens



Sample Image

Desktop Device ON

Sample Image

Desktop Device OFF

Sample Image

Tablet Device ON

Sample Image

Tablet Device OFF

Sample Image

Phone Device ON

Sample Image

Phone Device OFF


<div class="hidden-desktop">This will hide content from Desktop Device</div>
<div class="hidden-tablet">This will hide content from Tablet Device</div>
<div class="hidden-phone">This will hide content from Phone Device</div>

Responsive Images and Styles

Scritto da Happy Scoot on . Postato in Features

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.


Sample Image

Sample Image

Sample Image


<img class="size-auto" src="image" alt="Sample Image"/>

Image Styles



Sample Image

border

Sample Image

polaroid

Sample Image

well

Sample Image

round

<img class="size-auto polaroid" src="Image" alt="Sample Image"/>

Columns

Scritto da Happy Scoot on . Postato in Features

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.

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

100% 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 class="bfc-o"> . . .  </div>
    </div>
</div>

50% Column

The more you tighten your grip, Tarkin, the more star systems will slip through your fingers. I'm surprised you had the courage.

50% Column

The more you tighten your grip, Tarkin, the more star systems will slip through your fingers. I'm surprised you had the courage.

<div class="grid-block grid-gutter">
    <div class="grid-box width50">
        <div class="bfc-o"> . . .  </div>
    </div>
    <div class="grid-box width50">
        <div class="bfc-o"> . . .  </div>
    </div>
</div>

33% Column

The more you tighten your grip, Tarkin, the more star systems will slip.

33% Column

The more you tighten your grip, Tarkin, the more star systems will slip.

33% Column

The more you tighten your grip, Tarkin, the more star systems will slip.

<div class="grid-block grid-gutter">
    <div class="grid-box width33">
        <div class="bfc-o"> . . .  </div>
    </div>
    <div class="grid-box width33">
        <div class="bfc-o"> . . .  </div>
    </div>
    <div class="grid-box width33">
        <div class="bfc-o"> . . .  </div>
    </div>
</div>

25% Column

The more you tighten your grip, Tarkin, the more.

25% Column

The more you tighten your grip, Tarkin, the more.

25% Column

The more you tighten your grip, Tarkin, the more.

25% Column

The more you tighten your grip, Tarkin, the more.

<div class="grid-block grid-gutter">
    <div class="grid-box width25">
        <div class="bfc-o"> . . .  </div>
    </div>
    <div class="grid-box width25">
        <div class="bfc-o"> . . .  </div>
    </div>
    <div class="grid-box width25">
        <div class="bfc-o"> . . .  </div>
    </div>
    <div class="grid-box width25">
        <div class="bfc-o"> . . .  </div>
    </div>
</div>

60% 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.

40% Column

The more you tighten your grip, Tarkin, the more star systems will slip through your fingers.

<div class="grid-block grid-gutter">
    <div class="grid-box width60">
        <div class="bfc-o"> . . .  </div>
    </div>
    <div class="grid-box width40">
        <div class="bfc-o"> . . .  </div>
    </div>
</div>