Phonon Framework

Phonon

Utility

Utility classes let you show or hide elements based on screen size or on the operating system (browser).


Usage

Padding

Full Padded

Use the .padded-full class for adding full padding.

Top Padded

Use the .padded-top class for adding top padding.

Right Padded

Use the .padded-right class for adding right padding.

Bottom Padded

Use the .padded-bottom class for adding bottom padding.

Left Padded

Use the .padded-left class for adding left padding.


Show/Hide Elements

Show for phones only (max width 640px)

Use the .show-for-phone-only class on the element.

Show for tablets only (min width 641px and max-width 1024px)

Use the .show-for-tablet-only class on the element.

Show for tablets and up (min width 641px)

Use the .show-for-tablet-up class on the element.

Show for large screens only (min width 1025px)

Use the .show-for-large-only class on the element.

Show for Android only

Use the .show-for-android-only class on the element.

Show for iOS only

Use the .show-for-ios-only class on the element.

Show for Web only

Use the .show-for-web-only class on the element.


Text Alignment

Left Aligned

Use the .text-left class on the element.

Center Aligned

Use the .text-center class on the element.

Right Aligned

Use the .text-right class on the element.

Justify Aligned

Use the .text-justify class on the element.


Float

Left Floated

Use the .pull-left class on the element.

Right Floated

Use the .pull-right class on the element.


Expand Width

Use the .fit-parent class on the element.