PageCells Helper Styles – PageCells Responsive Framework

Fluid Cell System Core Styles

In addition to the Fluid Cell System core classes, PageCells uses the following helper styles.

Lorem Ipsum dolor

scroll-to

Binds click element to scrollTop animation. Uses href value as target or top of page if no target is present.


center-vertical

Vertically aligns element within a container. Enclosing container must have a specific height attribute.


nobreak

Maintains floats at the normal break point. Normally floats are removed so elements become full width and stack above or below each other.


stagger

Selectively removes floats at the normal break point so elements go from multiple columns to three columns, then to two columns, then to one column.


fullheight

Sets minimum height to 100% and position to relative.


abstop

Sets top to 0 and position to absolute.


absbottom

Sets bottom to 0 and position to absolute.


padoffset-top

Sets top padding to the height of first element with abstop class.


padoffset-bottom

Sets bottom padding to the height of first element with absbottom class.

Text styles

Lorem Ipsum dolor

hide-text

Applies a negative indent to move text out the viewport.


Lorem Ipsum dolor

nowrap

Applies white-space: nowrap. Forces text to stay on a single line.


Lorem Ipsum dolor

text-lightgray

Sets text color to medium lightgray.


Lorem Ipsum dolor

text-lightgray

Sets text color to light lightgray.


Lorem Ipsum dolor

text-white

Sets text color to white.


Lorem Ipsum dolor

text-black

Sets text color to black.


Lorem Ipsum dolor

larger

Sets font-size to 1.2em


Lorem Ipsum dolor

smaller

Sets font-size to .85em


Lorem Ipsum dolor

center

Applies text-align:center.


Lorem Ipsum dolor

Applies text-align:right.


Lorem Ipsum dolor

left

Applies text-align:left.


Lorem Ipsum dolor

required

Sets text color to red.


Lorem Ipsum dolor

caution

Sets text color to orange and adds caution icon.


Lorem Ipsum dolor

info

Adds information icon.

Show/Hide Styles

hidden

Applies visibility:hidden. Hides the element from view but maintains its space in the layout.


Lorem Ipsum dolor

visible

Applies visibility:visible.


Lorem Ipsum dolor

none

Applies display:none. Hides the element from view and removes its space in the layout.


Lorem Ipsum dolor

hide-desktop

Hides the element on devices wider than 980 pixels.


Lorem Ipsum dolor

show-desktop

Shows the element on devices wider than 980 pixels.


Lorem Ipsum dolor

hide-tablet

Hides the element on devices between 768 pixels and 980 pixels wide.


Lorem Ipsum dolor

show-tablet

Shows the element on devices between 768 and 980 pixels wide.


Lorem Ipsum dolor

hide-handheld

Hides the element on devices between 481 and 767 pixels wide.


Lorem Ipsum dolor

show-handheld

Shows the element on devices between 481 and 767 pixels wide.


Lorem Ipsum dolor

hide-phone

Hides the element on devices 480 pixels wide and smaller.


Lorem Ipsum dolor

show-phone

Shows the element on devices 480 pixels wide and smaller.

Padding Styles

Lorem Ipsum dolor

pad

Applies a 20 pixel pad around the element.


Lorem Ipsum dolor

infobox

Applies a 5 pixel pad around the element.


Lorem Ipsum dolor

inset

Applies a 10 pixel pad around the element.


Lorem Ipsum dolor

pad-lr

Applies a 20 pixel pad to the left and right of the element.


Lorem Ipsum dolor

pad-t

Applies a 20 pixel pad at the the top of the element.


Lorem Ipsum dolor

pad-r

Applies a 20 pixel pad on the right side of the element.


Lorem Ipsum dolor

pad-b

Applies a 20 pixel pad to the bottom of the element.


Lorem Ipsum dolor

pad-l

Applies a 20 pixel pad on the left side of the element.

Margin Styles

Lorem Ipsum dolor

topbottom

Applies a 20 pixel margin to the top and bottom of the element.


Lorem Ipsum dolor

notopbottom

Removes margin from the top and bottom of the element.


Lorem Ipsum dolor

margin-lr

Applies a 20 pixel margin to the left and right of the element.


Lorem Ipsum dolor

margin-l

Applies a 20 pixel pad to the left side of the element.


Lorem Ipsum dolor

margin-r

Applies a 20 pixel pad to the right side of the element.


Lorem Ipsum dolor

top5 - top150

Applies a margin to the top of the element corresponding to the number. Available values are 5, 10, 15, 20, 25, 30, 40, 50, 60, 70, 80, 90, 100 and 150 pixels.


Lorem Ipsum dolor

bottom5 - bottom150

Applies a margin to the bottom of the element corresponding to the number. Available values are 5, 10, 15, 20, 25, 30, 40, 50, 60, 70, 80, 90, 100 and 150 pixels.

Shadow and Border Styles

Lorem Ipsum dolor

border

Applies a 1 pixel border around the element.


Lorem Ipsum dolor

border-t

Applies a 1 pixel border to the top of the element.


Lorem Ipsum dolor

border-r

Applies a 1 pixel border to the right of the element.


Lorem Ipsum dolor

border-b

Applies a 1 pixel border to the bottom of the element.


Lorem Ipsum dolor

border-l

Applies a 1 pixel border to the left of the element.


Lorem Ipsum dolor

shadow

Applies a box shadow around the element.


Lorem Ipsum dolor

raised

Applies a box shadow to the top and bottom of the element.


Lorem Ipsum dolor

burned

Applies a wide inset shadow around the element.


Lorem Ipsum dolor

sunken

Applies an inset box shadow to the top and bottom the element.

Background Styles

Lorem Ipsum dolor

gray

Sets background color to medium gray.


Lorem Ipsum dolor

lightgray

Sets background color to light gray.


Lorem Ipsum dolor

white

Sets background color to white.


Lorem Ipsum dolor

black

Sets background color to black.


Lorem Ipsum dolor

shade-black-25

Applies 25% opaque black PNG as background-image.


Lorem Ipsum dolor

shade-black-40

Applies 40% opaque black PNG as background-image.


Lorem Ipsum dolor

shade

Alias of shade-black-40.


Lorem Ipsum dolor

shade-black-70

Applies 70% opaque black PNG as background-image.


Lorem Ipsum dolor

shade-black-80

Applies 80% opaque black PNG as background-image.


Lorem Ipsum dolor

shade-white-50

Applies 50% opaque white PNG as background-image.


Lorem Ipsum dolor

tint

Alias of shade-white-50


Lorem Ipsum dolor

shade-white-80

Applies 80% opaque white PNG as background-image.

Position Styles

abs

Sets position to absolute.


rel

Sets position to relative.


fix

Sets position to fixed.

context-menu

Applies contextual menu behavior to a Nav Menu. See Menu Layout Item.


inline-menu

Applies inline menu behavior to a Nav Menu. See Menu Layout Item.


horz-menu

Applies horizontal menu behavior to a Nav Menu. See Menu Layout Item.

Need More Help? Contact Us!

Maintaining our reputation for excellent support is very important to us, so please do not hesitate to ask any question about this or any of our other plugins, large or small. You can also use the Child Theme Configurator Support Forum on WordPress.org. Don't forget to give us 5 stars!