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.
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
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
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
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
.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
Note: Breakpoints overwrite each other from small to large (mobile-first approach).
Currently, there are two variables to fine-tune the grid:
Styles for most common HTML elements like headings, buttons, forms, lists and tables.
|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.