Baseline cover illustration

Baseline

CSS starter-kit built on top of PostCSS

About

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.

Setup

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.

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

Examples

File structure

This is how Baseline is structured:

settings.css
base/
  _normalize.css
  _box-sizing.css
  _copy.css
  _buttons.css
  _forms.css
  _lists.css
  _tables.css
  _media.css
  base.css
objects/
  _container.css
  _grid.css
  objects.css
components/
  _example.css
  components.css
utilities/
  _margin.css
  _padding.css
  _push.css
  _span.css
  utilities.css
style.css

Grid system

To leverage the grid system the HTML markup should follow such kind of 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

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

Settings

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

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.

Contributing

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.