soba icon indicating copy to clipboard operation
soba copied to clipboard

Kirby starter theme that uses Twig, PostCSS, and Browsersync

Soba

Starter theme for Kirby that uses Twig, PostCSS, and Browsersync.

Get Started

Make sure you have node & npm installed then download all of Soba's dependencies by running:

$ npm install

By default Soba will try to start PHP via command line with php -S then proxy it with Browsersync.

# Start PHP, PostCSS watcher, and Browsersync
$ npm start

If this doesn't work or you'd like a different PHP environment (Vagrant, MAMP, etc.) you can adjust the Browsersync config manually to fit your setup (likely just changing the proxy).

To run without starting PHP:

# Start PostCSS watcher and Browsersync
$ npm watch

Customization

CSS Syntax

Soba uses postcss-scss syntax but it can easily be switched out for something else. See available syntaxes.

To switch to sugarss for example:

$ npm install --save-dev sugarss

Edit parser in postcss.config.js:

module.exports = {
  ...
  parser: 'sugarss'
  ...
}