WCM Advanced Training

Monet 2.0 Bootstrap

Charles Brown-Roberts
Mark Konrad
May 21, 2013


A bootstrap is a collection of assets that comprise a basic framework for creating websites.

bootstrap directory structure


Regions are important concepts in the boostrap. They correlate to ARIA Landmark Regions as defined in the template.

Regions directory structure

Landmark Roles example

ARIA landmark roles example

Monet 2.0 Template Regions

Monet template regions

How ARIA Landmark Roles help screen readers.

Outputs: Regions in a Configuration Set

output regions in a configuration set


blocks directory structureblocks regions directory structure


module transforms

Block Selector

Example of block selector

Global Transforms

global transforms

Blueprint CSS

The Monet 2.0 template uses Blueprint CSS for layout.  It's based on a grid of 960 pixels.