Baseline cover illustration

Baseline

CSS starter-kit built on top of PostCSS

Setup

  1. Download the latest release
  2. Copy the src folder into your project
  3. 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.

Architecture

Styles are grouped into the following categories:

Settings

Settings contain global configurations like custom properties and breakpoints which are shared across the system.

Base

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

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

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

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

Grid system

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

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

Example

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

Extending

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.