- Download the latest release
- Copy the src folder into your project
- Integrate the kit with your build workflow*.
Styles are grouped into the following categories:
Settings contain global configurations like custom properties and breakpoints which are shared across the system.
Base styles are default styles of base elements like body, headings or paragraphs without ID or class selectors. These styles serve as the foundation.
Objects are class-based selectors which define design patterns like containers or grids shared across the system. Classes of this category are prefixed with
Components are independent parts of any system. However, unity only exists when design elements are in agreement. Therefore, components here are not entirely isolated as they inherit base styles while taking-in specific component-related styles of this category. Classes of this category are prefixed with
Utilities are high-specificity, very explicit style rules which serve one purpose. Classes of this category are prefixed with
To leverage the simple grid system, the HTML markup should follow a specific structure:
.o-container .o-grid .o-grid__col .u-span--06 .o-grid__col .u-span--06
.o-grid element can hold one or more
.o-grid__col element(s) which can be sized or pushed with specific utility classes. The maximum grid-width is set on the
.o-grid element. The grid is always centered inside the
.o-container element. Gutters are split equally with paddings on
Columns & Shifts
.o-grid__col elements can be supplemented with utility classes like
.u-push--* with modifiers ranging from
12. The modifiers represent the column-width based on overall 12 columns. To set widths and shifts for certain breakpoints append another modifier at the end:
s: Append to adjust for small breakpoint
m: Append to adjust for medium breakpoint
l: Append to adjust for large breakpoint
x: Append to adjust for extra large breakpoint
.o-container .o-grid .o-grid__col .u-span--12 .u-span--06m .u-span--08l .o-grid__col .u-span--12 .u-span--06m .u-span--04l
Breakpoints overwrite each other from small to large (mobile-first approach).
Baseline is no as-is dev dependency but a boilerplate to start with. Therefore, it can be changed or adjusted at any stage of your project. It is highly recommended to use the BEM naming approach to keep things consistent.