Fluid Cell System – PageCells Responsive Framework

PageCells automatically adjusts content on the page to adapt to the device being viewed. One of the primary ways that this is done is by applying CSS styles to each Layout Item that can automatically respond to changes in the surrounding elements. We collectively call these styles the Fluid Cell System.

Fluid Cell System Properties

Cell

This is the main class that makes the Layout Item responsive. It applies the left float, inline display and right and bottom margin rules that maintain consistent behavior as the device width changes. This style is ENABLED by default.

This style is the same as cell, except it floats the Layout Item to the right instead of left. This style is DISABLED by default.

Clear

This style applies the clear:both rule to the Layout Item so that it clears any floated elements that are rendered before it. This style is DISABLED by default.

Flat

This style removes the automatic bottom margin from the Layout Item. This style is DISABLED by default.

End

This style removes the automatic right margin from the Layout Item. It is used on the last Layout Item in a row of Layout Items so that all of the Layout Item widths correctly fill the horizontal space. This style is DISABLED by default.

Width

PageCells uses simple fractions to describe Layout Item widths. The width is a fraction of the total width of its surrounding container, so it is always relative to the surrounding container, not an absolute value. PageCell widths can be Full, or combinations of Halves, Thirds, Fourths, Fifths, Sixths, Eighths, Tenths or Twelfths. Width is set to Full by default.

Top Margin

This style applies a top margin from a specific set of values including 5, 10, 15, 20, 25, 30, 40, 50, 60, 70, 80, 90, 100 or 150 pixels. PageCells automatically adjusts the top margin for smaller devices based on the value selected. Top Margin is set to Zero by default.

Classes

You can add additional CSS classes to further style the Layout Item. See Helper Styles for description of pre-configured PageCells Helper Styles. You can also create your own classes using the Child Theme Configurator. Do not apply any classes that affect the width or position of the Cell because they will conflict with the Cell width calculation. This includes border, padding, margin, position, display and width. If you need to apply these styles, create a container inside the Layout Item and apply them to that container.

Selector

This option lets to specify your own unique identifier for the Layout Item. This is useful when you need to identify the Layout Item for jQuery or other JavaScript plugins.

Cell Behavior

Arranging Rows of Cells

The width is a fraction of the total width of its surrounding container, so it is always relative to the surrounding container, not an absolute value. The total sum of the widths of all Cells in a given row of Cells must add up to no more than 1.

For example, you can combine three one-third width Cells (1/3 + 1/3 + 1/3 = 1), or a one-fourth Cell, a one-third Cell, and a five-twelfths Cell (1/4 + 1/3 + 5/12 = 1). For the Cells to fit correctly, you must apply the end property to the last Cell in the group.

Some other common combinations are:

  • two-thirds and one-third (2/3 + 1/3 = 1) for a typical “content-sidebar” layout
  • one-fifth, three-fifths, on-fifth (1/5 + 3/5 + 1/5 = 1) for a newspaper-style galley layout
  • one-half and one-half (1/2 + 1/2 = 1) for a two-column book layout
Break Point

Layout Items will automatically resize themselves to smaller devices up to a specific break point. By default, the break point is 768 pixels wide, which a commonly accepted width for tablet devices. Smaller than that, PageCells assumes the device is a handheld device and uses styles designed for those devices.

Below the break point, the float attribute is set to none which causes the browser to ignore the width and margin values of the Cell. This effectively causes the Cell to fill the entire width of the device and stack above or below other Cells.

There are Helper Styles that allow you to adjust this behavior for specific Layout Items based on the width of the device. These are described in the Helper Styles documentation.

Tutorial

In this video we discuss the PageCells Fluid Cell System, how Layout Items interact to adapt to different device widths and different ways to apply styles to achieve the results you want using the PageCells Responsive Theme Framework.

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!