Skip to content
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__ Setup DB Mar 21, 2019
_screenshots Update Readme Nov 6, 2018
generators Update _prettierrc.js Apr 15, 2019
.editorconfig Update Editorconfig + Stylelint Feb 1, 2018
.eslintignore Init Jun 29, 2017
.eslintrc Remove prettier Feb 8, 2018
.gitattributes Init Jun 29, 2017
.gitignore Init Jun 29, 2017
.jshintrc Init Jun 29, 2017
.nvmrc Add nvmrc Jan 14, 2018
.stylelintrc Update Editorconfig + Stylelint Feb 1, 2018
.travis.yml Hm Jan 14, 2018 Update Jan 21, 2019
baukasten.png Logo Jul 3, 2017
baukasten.sketch Logo Jul 3, 2017
jestSetup.js Init Jun 29, 2017
package-lock.json Setup DB Mar 21, 2019
yarn.lock Update Dependencies Sep 30, 2017


Build Status


   baukasten made with love & help.
   Author   :   David Hellmann
   Website  :
   Github   :

Table of contents


It's just a little 'Baukasten' or Boilerplate for your next Craft CMS or Prototyping Project. WordPress is also on Board but has not the priority as the other ones. Most of the stuff fits for my own requirements and maybe you have the same you can have a lot of fun with it. Give it a try.


yarn (npm works also)


This installs Baukasten global on you computer

yarn global add generator-baukasten

Setup a new project

Go to you project directory and run this command and run through the questions

yo baukasten


When you answered all question the generator do some magic. When he's done and all is fine he runs an yarn start to initialize the project.

Most important commands

When you need more details look at the package.json

yarn start         // run this command only if you setup a new project. Normally the generator execute this command by itself
yarn install       // to install NPM Packages
yarn dev           // to start the dev process. It runs a yarn build in front of that
yarn dev:single    // runs just the dev task without a build process in front
yarn build         // runs the build task

Scss Framework

There is a little CSS Framework inside. It's simple as possible to have a good point to start.


You can find this stuff here: ___src/assets/css/_______settings

Sass Functions

You can find this stuff here: ___src/assets/css/______tools

Sass Mixins

You can find this stuff here: ___src/assets/css/_______settings

Grid system

We've outsourced the Scss Grid Framework in his own NPM Package to use it in different environments You can find it here: Or directly to the Readme

To modify you settings you must open the ___src/assets/css/_______settings/_settings.breakpoints.scss and there you can change what you want. The dafaults look like this:

// Settings
$bk-grid-settings-custom: (
  cssgrid: false,
  cssgrid-fallback: false,
  flexboxgrid: true,
  testing: false,
  prefix: 'o-',
  units: (
    gutter: 8px,
    gutter-min-factor: 1,
    gutter-max-factor: 2,
    gutter-min-vertical-factor: 1,
    gutter-max-vertical-factor: 2,
  offset-classes: false,
  push-classes: false,
  pull-classes: false,
  disable-padding-horizontal: false,
  breakpoints: (
    min: (
      from: 320px,
      cols: 12,
      create-classes: true,
    xs: (
      from: 400px,
      cols: 12,
      create-classes: false,
    s: (
      from: 600px,
      cols: 24,
      create-classes: true,
    m: (
      from: 800px,
      cols: 24,
      create-classes: false,
    l: (
      from: 1000px,
      cols: 24,
      create-classes: true,
    max: (
      from: 1440px,
      cols: 24,
      create-classes: false,


  • webdevs - for so many things: Website
  • Sascha Fuchs - for help help help: Website
  • Martin Herweg - for help help help: Website
  • CSS Tricks - for Easing Map: Website
  • Florian Kutschera - for the Material Design Box Shadows: Website
  • Hugo Giraudel & Eduardo Bouças - for include media: Website
  • @LukyVj - for family.scss: Website
  • inuitcss - for some snippets and inspiration: website


  • Add Laravel as option
  • Add Vue CLI as option
You can’t perform that action at this time.