Page Structure in the CE2 Framework

Sound websites are built on sound foundations. Structural integrity and commonality are at the core of Core Elements 2, helping to ensure conceptual unity and cohesive design principles within the CE2 line of plug-ins. Though built with a component methodology in mind, the combined components feel as one when joined in site.

CE2 Structure

What follows is an outline of the CE2 page structure.

Header

CE2 Header

The Header comprises the topmost portion of the layout and includes the Masthead and Navigation. Depending upon your configuration, the Masthead may appear above the Navigation, below the Navigation or within the Navigation.

Masthead

CE2 Masthead

The Masthead appears within the Header. The purpose of the masthead is branding. Your logo and/or business name appears here to lead a sense of identity to each of your site's pages. The underlying source code is also designed to factor into the site's SEO.

As one of two parts of the Header, the masthead design plays off of the Navigation. The CE2 framework offers three styles of masthead: Nuovo, Retro and Traditional. Controls for the Masthead appear within the Site Info control pane.

Navigation

CE2 Navigation

Navigation (a.k.a. the Menu) appears within the Header. It allows visitors to navigate your site, traveling from one page to another; it is the glue that binds together the pages which comprise your site.

As one of two parts of the Header, the navigation design plays off of the masthead. The CE2 framework offers two navigations styles: Traditional and Drop-down. Controls for the Navigation appear within the Site Info control pane.

Canvas

CE2 Canvas

The Canvas is the page's content area, comprising both The Block and The Grid.

The block and grid may be displayed in any of several arrangements:

  • The block on top, the grid below
  • The grid on top, the block below
  • The block only
  • The grid only
  • Blank canvas

A blank canvas is one which contains neither grid nor block; in such case, PHPlugins may be used to fill in custom page content.

the Block

CE2 The Block

The Block resides within the Canvas, and houses the page's textual content. Text within the block may be formatted using either Markdown syntax or HTML. The block may optionally contain an image.

The block may be positioned either above or below the grid, or not at all. Controls for the Block appear within the Color Palette control pane, with exception of the Typography controls, located in the Site Info control pane.

the Grid

CE2 The Grid

The Grid resides within the Canvas, and is so named because it contains the image gallery content – the thumbnail grid, the index grid, or gallery content staged in some other format.

The grid may be positioned either above or below the block, or not at all. Controls for the Grid appear within the Appearance control pane.

Footer

CE2 Footer

The Footer resides at the bottom, or foot or the page. It may contain secondary “convenience” navigation, and/or provide a brief attribution/copyright notice, an assist to your site's branding. Controls for the Footer reside in the Site Info control pane.

The Box Model

In the screen captures above, you can see that the CE2 framework is primarily composed of boxes appearing in a particular arrangement. Most of these boxes adhere to a common “Box Model”. The standard CE2 box model utilizes two width sliders, Container Width and Content Width, pictured below.

Box Model controls

Each slider may be set to 'auto' or 'fixed', and includes a numeric slider.

When Container Width is set to 'auto', it will ignore the value on the numeric slider. The container box will occupy the full width of the web browser; this is equivalent to width=100%. When set to 'fixed', the container box will respect the value on the numeric slider; this value will be used as the container's max-width.

When the Content Width is set to 'auto', it will ignore the value on the numeric slider. The content box will occupy the full width of the container box; this is equivalent to width=100%. When set to 'fixed', the container box will respect the value on the numeric slider; this value will be used as the content's max-width.

Box controls will sometimes also include controls for borders, shadows, padding, etc. These attributes are typically applied to the container, though may in some cases be applied to the content box instead.

Print/export