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.