Origami Frontend Components & Services

SassDoc: o-layout

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

Switch component view

GitHub Repository

Install o-layout

If using the Build Service, add o-layout@^2.2.4 to your script and link tags. Ensure the correct brand is set with a query parameter &brand=internal.

If running a Manual Build, run bower install --save "o-layout@^2.2.4".

Help & Support

o-layout is maintained directly by the Origami team. If you have any questions about o-layout or Origami in general, we are happy to help. 😊

Slack: #ft-origami
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #ft-origami
Email: origami.support@ft.com