Tailoring the default layout

Controlling section visibility

All sections in the default layout are optional. Sections for whom no template exists and which have not been directly stored are automatically omitted from the generated Web page.

Moreover, if a controller wants to make the visibility of a section a runtime decision, it can do so by setting the sections key in pagevar. For example,

pagevar set sections {header main}

will hide the sidebar, supplement and footer sections even if templates are defined for them. This can be set any time in the controller or action method before the page is rendered.

Woof! uses the Pure CSS stylesheets to provide the underlying styles infrastructure for the default layout. The appropriate style classes are chosen based on which page sections being present.

Tailoring each section

Each individual section in the default layout can also be customized to some degree through the corresponding key of the same name in pagevar. The value should be a dictionary containing the settings for the section. For example,

pagevar set sidebar {tag aside cssclasses {+ appcss pure-skin-app}}

The above specifies that the aside tag be used for the sidebar section and the specified CSS classes be added to it.

The pagevar element as well as individual settings are all optional and defaults are used for missing values. The table below shows the settings and defaults.

Styling individual sections

The CSS classes have a default style defined in the file public/stylesheets/_layout.css that is always loaded by the default layout. The application can override or modify these classes as desired in a separate CSS file and arrange for it to be loaded as described in Using stylesheets.

The CSS classes wf-header and wf-footer that define the styles for the corresponding sections are essentially placeholders and do not define any CSS attributes for the sections beyond those defined by Pure CSS. The CSS classes wf-sidebar, wf-main and wf-supplement on the other hand do define a padding for the corresponding sections. This difference is based on how those sections are expected to be used by the application. These settings can of course be overridden as described above.

Controlling section widths

If present, the header and footer sections of the default layout always occupy the entire width of the browser window. The sidebar, main and supplement sections on the other hand share the width of the browser window. The mechanism for apportioning space to each is based on the Pure CSS grid system.

We only outline Pure CSS grid capabilities that are required for our purposes here. For a full description see Pure CSS Grids page.

Pure CSS grids divide the browser page into a number of columns of equal widths. The Pure CSS distribution comes with built-in support for 5- and 24-column grids but also provides a tool that lets you define grids for an arbitrary number of columns.

By default, Woof! uses a 5 column grid with the sidebar and supplement sections taking up a column each and the main section occupying the remaining three. An application may however change this by setting widths in the pagevar to a dictionary whose keys are section names with corresponding values being the number of columns in the section. Any unspecified sections will be defaulted as above but it is good practice to explicitly specify all section widths.

The fragment below sets up a 24-column page grid with the sidebar and supplement being five columns each and the main column taking up the remaining fourteen.

pagevar set widths {
    sidebar    5
    main      14
    supplement 5
}

Responsive layouts