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
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.
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.
This style removes the automatic bottom margin from the Layout Item. This style is DISABLED by default.
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.
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.
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.
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.
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
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.
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.