o-layout-is-silent

Silent mode: on (true) or off (false) Set to false to output default layour classes

Links

o-layout-class

Default button class used when $o-buttons-is-silent is true

Links

o-layout-breakpoints

Breakpoints for responsive layout

Links

oLayoutAreas(class)

Layout Areas Outputs grid grid template areas

parameter type default description
class — class name for grid

Links

oLayoutAreaHeader(class)

Header Area Outputs grid header area

parameter type default description
class — class name for grid

Links

oLayoutAreaSidebar(class)

Sidebar Area Outputs grid sidebar area

parameter type default description
class — class name for grid

Links

oLayoutAreaMain(class)

Main Area Outputs grid main content area

parameter type default description
class — class name for grid

Links

oLayoutAreaFooter(class)

Footer Area Outputs grid footer area

parameter type default description
class — class name for grid

Links

oLayoutBase(class)

Layout Base Outputs responsive base grid

parameter type default description
class — class name for grid

Links

oLayoutLinkedHeading(base-class)

Linked Heading Outputs styles for the linked headings

parameter type default description
base-class — base class name for layout

Links

oLayoutBreakPoint(from, until)

Apply styles at a given layout size Wrapper for the Sass MQ mq() mixin

parameter type default description
from one of $o-layout-breakpoints
until one of $o-layout-breakpoints

Example

// Turn the color of an element red at medium layout size and up
@include oLayoutBreakPoint(M) {
	element {
		color: red;
	}
}
// Turn the color of an element blue until medium layout
element {
	@include oLayoutBreakPoint($until: M) {
		color: blue;
	}
}
// Turn the color of an element green from small layout until medium layout
element {
	@include oLayoutBreakPoint($from: S, $until: M) {
		color: green;
	}
}

Links

oLayoutRule(side)

Styles decorative rules for containers

parameter type default description
side — left or right rule to be styled

Links