Layout abstractions are structural design patterns used throughout the interfaces. Layouts are css classes that use BEM syntax, and usually contain both block and element classes. Additionally, each layout abstractions comes with a mixin to allow one to leverage an abstraction within writing a component (see the panel layout abstraction for an example).
Layouts come in two flavors:
- Direct usage through classes like (e.g.
l-fillVertical) - Mixins for use within a component. When a component will consistently use a layout pattern, it is advisable to encapsulate that pattern inside of the component CSS classes. This is typically achieves through using a common mixin pattern:
scss
@include l-layoutMixin('c-myComponentClass');New layout abstractions are most often created when a series of CSS utilities are being used in a repeated pattern to achieve a specific desired layout effects. For a full example look to the panel layout abstraction.