User Tools

Site Tools


ce4_standard_box_model

The Standard Box Model

The CE4 framework consists of a number of boxes, block elements or box elements, each stacked upon the other. You have some limited capability to rearrange these boxes, but the general layout is something like this:

  • Page Container
    • Masthead
    • Navigation
    • “The Block” (the content/exposition area)
    • “The Grid” (the gallery/media area)
    • Footer

Apart from these major box elements, you also have subsidiary box elements for social media, a status bar, etc. which are less structural and more feature related.

For every box element, you will find a pretty standard set of options used to style its appearance and layout. This is The Standard Box Model.

Background-color

Sets the background-color for the box element. If disabled, then box element will be transparent. Use the slider to adjust the background's alpha (opacity) value, 0 being fully transparent and 100 being fully opaque.

Mantle and Core Width

The Mantle width is the horizontal size of the box itself.

The Core width is the horizontal size of the content within that box.

When either is set to “auto”, its width will be the full width of its container (the browser window or the page container depending on your setup; in the case of the Core, then the full width of the Mantle).

When either is set to “fixed”, then use the corresponding slider to set the maximum width for the element. Boxes will automatically respond to smaller displays and will never overflow the window.

Margins

The Margin sliders control the box elements distance from the immediate adjacent box elements preceding or subsequent. Adheres to the CSS specification for margin.

Padding

The Padding sliders add space to the inside of the box element, separating the element's content from its sides. Adheres to the CSS specification for padding.

Borders

The Borders controls allow you to define borders for the box element. Adheres to the CSS specification for border.

The Render Borders… option allows borders to be set either on the mantle or the core. When on the mantle, borders will surround the exterior of the box. When on the core, the borders will render flush with the box element's content, allowing the borders to be used as section separators.

Border-radius

The Border-radius controls allow you to round the box element's corners. When set to “Simple”, a single slider is used to round all four corners by the same amount. When set to “Advanced”, a separate slider becomes available for each of the four corners. Adheres to the CSS specification for box-radius.

Box-shadow

The Box-Shadow controls allow you to define a drop-shadow for the box element. Shadows are locked in at rgba(0,0,0,0.5), black at 50% opacity. Otherwise adheres to the CSS specification for box-shadow.

Linear-gradient

The Linear-gradient options allow you to define a two-color linear-gradient background for the box element. Adheres to the current working specification1) for CSS linear-gradients.

For more information on using linear-gradients, see the document Linear-gradient Backgrounds.

1) as of January 2014
ce4_standard_box_model.txt · Last modified: 2014/01/10 05:35 by matthew

The Turning Gate
Creating webbly, wobbly, Lightroomy things since 2007.