Layouts

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id...

.alternate-layout
  .alternate-layout__section
    %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id...
  .alternate-layout__section
    %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id...
  .alternate-layout__section
    %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id...
  .alternate-layout__section
    %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id...
  .alternate-layout__section
    %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id...

Haml

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id...

.alternate-layout.alternate-layout--inverse
  .alternate-layout__section
    %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id...
  .alternate-layout__section
    %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id...
  .alternate-layout__section
    %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id...
  .alternate-layout__section
    %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id...
  .alternate-layout__section
    %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id...

Haml

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id...

Nested section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id...

Nested section

.alternate-layout.alternate-layout--inverse
  .alternate-layout__section
    %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id...
    .alternate-layout__section
      %p Nested section
  .alternate-layout__section
    %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id...
    .alternate-layout__section
      %p Nested section

Haml

Alternate Layout

Alternate Layout (inverse)

Nested Alternate Layout

Grid