Mondrian example

mondrian.scss

// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----
 
@include layout($app),
 
$app: (
  name: prey,
 
  layout: (
    mobile: off-canvas,
    desktop: horizontal,
  ),
 
  regions: (
    1: (
      name: menu,
      off-canvas: left,
      contains: $app-menu,
    ),
    2: (
      name: main,
      flex: true,
      contains: $app-main,
    ),
  ),
);
 
 
$app-menu: (
  layout: vertical,
  regions: (
    1: (
      name: brand,
    ),
    2: (
      name: navigation,
      flex: true,
    ),
    3: (
      name: options,
    ),
  ),
);
 
 
$app-main: (
  layout: vertical,
  regions: (
    1: (
      name: header,
      show-on: mobile,
    ),
    2: (
      name: sections,
      flex: true,
      contains: $view-section,
    ),
  ),
);
 
 
$view-section: (
  name: section,
 
  layout: (
    phone: stacked,
    tablet: horizontal,
  ),
 
  regions: (
    1: (
      name: aside,
      contains: $view-panel,
    ),
    2: (
      name: content,
      flex: true,
      contains: $view-page,
    ),
  ),
);
 
 
$view-panel: (
  name: panel,
 
  layout: (
    phone: stacked,
    tablet: horizontal,
  ),
 
  regions: (
    1: (
      name: header,
    ),
    2: (
      name: body,
      flex: true,
      scrollable: true,
    ),
    3: (
      name: footer,
    ),
  ),
);
 
 
$view-page: (
  name: page,
 
  layout: (
    phone: stacked,
    tablet: horizontal,
  ),
 
  regions: (
    1: (
      name: header,
      contains: wrapper,
    ),
    2: (
      name: body,
      flex: true,
      scrollable: true,
      contains: wrapper,
    ),
  ),
);