Timber — A barebones boilerplate using PostCSS & Webpack2

Timber

A barebones boilerplate built using PostCSS & Webpack2

Features

A web app starter to quickly get your site running

PostCSS

Only uses a minimal number of plugins targeting consistency with the upcoming CSS4 specification.

Speed, Future Focused

Limits the amount of bloat, create SASS-like color maps for your web app(s), and assists you in writing clean, future-proof syntax.

Optimization & Minification

CSS & Image optimization/minification with cssnano and image-min.

Additional Features

Timber includes many other features for easy, fast local development including:

Webpack 2
ES2015
Browsersync
Minification
Sourcemapping

Base Colors

Accessible SASS-like Color Mapping with PostCSS

Easily generate accessible color maps for any color, instantly. By using the primary color swatches from Open Color and 3 color-adjuster's from the postcss-color-function plugin.

Example:


/* Violet */
--violet: #7048E8;
--violet-lighter: color(var(--violet) lightness(+20%) tint(15%));
--violet-light: color(var(--violet) lightness(+10%) tint(15%));
--violet-medium: color(var(--violet) lightness(-10%) shade(15%));
--violet-dark: color(var(--violet) lightness(-20%) shade(15%));

Getting Started

Get the app running for local developement.

Clone the repo

                  git clone https://github.com/wad3g/Timber.git
cd Timber

Install dependencies with yarn or npm

                        yarn install

                        npm i

Start watching files for compilation

                  yarn start