Scroll to Top

Responsive Utils

For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed. Classes are included, which are ready to use for responsive projects development.

SITEMAP Documentation / Css / Responsive Utils

Show any element depend upon device type, using these types of classes.

Demo

Options

Classes Device action
show-on-s Small
show-on-m Medium
show-on-l Large

Example

show-on-s example

show-on-m example

show-on-l example

Code copy

        <p class="show-on-s">show-on-s example</p>
        <p class="show-on-m">show-on-m example</p>
        <p class="show-on-l">show-on-l example</p>

Hide any element on any type of device.

Demo

Options

Classes Device action
hide-on-s Small
hide-on-m Medium
hide-on-l Large

Example

hide-on-s example

hide-on-m example

hide-on-l example

Code copy

        <p class="hide-on-s">hide-on-s example</p>
        <p class="hide-on-m">hide-on-m example</p>
        <p class="hide-on-l">hide-on-l example</p>

Padding is made device responsive too. now use these classes and on different devices use different padding.

Demo

Options

Classes Similarity with old classes Effect On
pad-(5,10 ... 60)-on-s Just add -on-s after any padding class Small
pad-(5,10 ... 60)-on-m Just add -on-m after any padding class Medium
pad-(5,10 ... 60)-on-l Just add -on-l after any padding class Large

Example

pad-30-on-s example

pad-60-on-m example

pad-20-on-l example

Code copy

        <p class="pad-30-on-s">pad-30-on-s example</p>
        <p class="pad-60-on-m">pad-60-on-m example</p>
        <p class="pad-20-on-l">pad-20-on-l example</p>

Margin is made device responsive too. now use these classes and on different devices use different margins.

Demo

Options

Classes Similarity with old classes Effect On
margin-(5,10 ... 60)-on-s Just add -on-s after any margin class Small
margin-(5,10 ... 60)-on-m Just add -on-m after any margin class Medium
margin-(5,10 ... 60)-on-l Just add -on-l after any margin class Large

Example

margin-30-on-s example

margin-60-on-m example

margin-20-on-l example

Code copy

        <p class="margin-30-on-s">margin-30-on-s example</p>
        <p class="margin-60-on-m">margin-60-on-m example</p>
        <p class="margin-20-on-l">margin-20-on-l example</p>

Add Different border radius on different devices.

Demo

use the radius classes as defined in instant helper classes and add (-s, -m or -l) for different devices

radius-10-on-s, radius-5-on-m, radius-15-on-l

Code copy

<p class="pad-20 margin-20 grey3 radiusTL-10-on-s  radius-5-on-m radiusB-15-on-l">radius-10-on-s, radius-5-on-m, radius-15-on-l</p>

Give different border on different devices now.

Demo

use the border classes as defined in instant helper classes and add (-s, -m or -l) for different devices

border-light-on-s, border-dark-on-m, border-lowdark-on-l

Code copy

<p class="pad-20 margin-20 grey8 text-white border-light-on-s  border-dark-on-m border-lowdark-on-l">border-light-on-s, border-dark-on-m, border-lowdark-on-l</p>

Quickly float any element to left or right on different devices.

Demo

Options

Classes orientation
left-on-(s,m,l) left
right-on-(s,m,l) right

Code copy

<a class="btn btn-success left-on-m right-on-s">left-on-m right-on-s</a>

Shadows are now controllable on different devices.

Demo

Use shadow classes from instant helper classes and add -on-s,m,l to make them responsive

Example

shadow-dark-5-on-s, shadow-dark-2-on-m, shadow-dark-3-on-l

Code copy

                <div class="blue6 shadow-dark-5-on-s shadow-dark-2-on-m shadow-dark-3-on-l  text-white pad-20 margin-10">
                     shadow-dark-5-on-s, shadow-dark-2-on-m, shadow-dark-3-on-l
                </div>

Font classes can be controlled through responsive classes which have controlled response on different devices.

Demo

Use typography classes from typography section and add -on-s,m,l to make them responsive

Example

font-20-on-s, font-10-on-m, font-30-on-l

Code copy

                <div class="blue6 font-20-on-s font-10-on-m font-30-on-l text-white pad-20 margin-10">
                     font-20-on-s, font-10-on-m, font-30-on-l
                </div>

Feedback