Baseline cover illustration


CSS starter-kit built on top of PostCSS


Baseline leverages tomorrow’s CSS syntax and provides styles for most common HTML elements, a simple grid system and some helpers all interconnected with custom properties to head-start new web projects in a consistent way.


Download the latest release, copy the src folder into your project, and integrate the kit with your build workflow.

Make sure that your task runner processes PostCSS, postcss-preset-env and postcss-easy-import.

View an example of a package.json on how to setup a build workflow with simple NPM scripts.


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 o-.


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 c-.


Utilities are high-specificity, very explicit style rules which serve one purpose. Classes of this category are prefixed with u-.


File structure

This is how Baseline is structured:


Grid system

To leverage the grid system the HTML markup should follow such kind of structure:

    .o-grid__col .u-span--06
    .o-grid__col .u-span--06

Each .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 .o-grid__col elements.

Columns & Shifts

.o-grid__col elements can be supplemented with utility classes like .u-span--* or .u-push--* with modifiers ranging from 01 to 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-grid__col .u-span--12 .u-span--06m .u-span--08l
    .o-grid__col .u-span--12 .u-span--06m .u-span--04l

Note: Breakpoints overwrite each other from small to large (mobile-first approach).


Currently, there are two variables to fine-tune the grid:

  1. –grid–max-width
  2. –grid–gutter

Base elements

Styles for most common HTML elements like headings, buttons, forms, lists and tables.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Tables Are Cool
col 1 is left-aligned $1600
col 2 is centered $12
col 3 is right-aligned $1
This is code

This is a quote


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.


Please ask first before working on any significant pull request. Find more information on how to setup the dev environment here.

Report bugs and make feature requests via the issue tracker.