I just released Bedrock 1.11, in which we merged a pull request from Jelle Versele.

This PR introduces a change to how you run Bedrock. In the previous incarnation, we required gulp to be installed globally.

Leveraging the power of npm scripts, this is not necessary anymore. Yay! In practice this does mean that the command to run Bedrock changes from gulp to npm start.

The command to create a build changes to npm run build.

Given a folder of SVG icons in Bedrock 1.10, you can document it with the following code:

We will be improving the documentation on how to document colors and icons in the future. For now, I will be posting little useful snippets as I encounter (or code 🤓) them.

The Bedrock command line interface has been updated. bedrock-cli@2.0.0 was published last Friday. These are the commands you can run:

• bedrock init [base] where base is material or bootstrap4
  • Provides an easy way to get a new Bedrock project going using one of the Bedrock bases
• bedrock upgrade and bedrock upgrade --dev, the latter command will pull changes from the develop branch instead of master

You can get the latest version of the Bedrock CLI by installing it globally with npm install bedrock-cli -g.

Wrong config

If you upgrade Bedrock and you get an error like this:

path.js:28
throw new TypeError('Path must be a string. Received ' + inspect(path));
^

TypeError: Path must be a string. Received undefined
at assertPath (path.js:28:11)
at Object.dirname (path.js:1349:5)
at Object.<anonymous> (

It means your config is out of date.

Here’s the base config for Bedrock, that you can copy/paste from here easily to fix the issue:

/**
 * Bedrock configuration
 * For docs, see https://bedrockapp.org/documentation/configuration/
*/

module.exports = {
  styleguide: {
    snippetLanguage: 'html',
    colors: './content/scss/_colors.scss',
    categoryOrder: [
      'Style guide',
      'Design patterns',
      'Components'
    ],
    componentCategories: {
      aov: 'Overviews',
      c: 'Components',
    }
  },
  icons: {
    generateIconFont: true,
    iconFontPath: "./content/scss/_icon-font.scss",
    svgIconClassPrefix: 'o-svg-icon',
    iconFontClassPrefix: 'if'
  },
  pug: {
    pretty: true,
    basedir: "./content"
  },
  prettify: {
    logSuccess: false,
    indentSize: 2,
    unformatted: ['pre', 'textarea'],
    extraLiners: ['body']
  },
};

Variable overrides file does not exist

If you get an error like this:

[16:42:29] Error in plugin 'gulp-sass'
Message:
    core/scss/prototype.scss
Error: File to import not found or unreadable: ../../content/scss/br-variables-override
       Parent style sheet: /Users/user/Sites/projects/my-prototype/core/scss/prototype.scss
        on line 40 of core/scss/prototype.scss
>> @import "../../content/scss/br-variables-override";
   ^

Create a new file inside /content/scss called _br-variables-override.scss. It can be empty, but I recommend putting in the following content:

/* ==========================================================================
  Variables override
  Overide variables set in core/scss/prototype.scss with your own
   ========================================================================== */

// Example: your code is pixel based, use $br-rem-multiplier of 0.625
// $br-rem-multiplier: 1;

// Example: your code is rem-based, where 1rem = 10px, use $br-rem-multiplier of 1
$br-rem-multiplier: 0.625;

We are sorry for the manual hassle, and intend to minimize the minimal changes needed to upgrade to newer Bedrock versions in the future.

Errors in style guide

If you encounter an error like this:

TypeError: /Users/user/Sites/projects/project/bedrock/core/templates/styleguide/component-group.pug:17
    15| 
    16|     each component in componentGroup.components
  > 17|         +sample(component)
    18| 

pug_mixins.sample is not a function

Make sure your master.pug template starts with the following code:

//- Globally expose mixins without output, needed for prototypes
include ../../../core/templates/mixins/icon
include ../../../core/templates/mixins/render-page-tree
include ../../../core/templates/mixins/sample
include ../../../core/templates/mixins/styleguide-settings
include ../../../core/templates/mixins/languages

Coinciding with the 1.10 release we updated some of the documentation.

The basic tutorial received a revision, which includes an all-new screencast to get started with Bedrock:

The explanation for page index and tree was revised.

Working with Pug changed into a basic Working with Pug and a more advanced Advanced Pug tips.

A new section was added about Styling the style guide – make the style guide your own. This is still a work in progress.

If you need support, just post an issue on Github.

We welcome any question!

We are glad to announce a new thing: Bedrock bases.

We worked on a method to get started with Bedrock in an easier manner – a method that makes you set up less things and get prototyping faster.

With the release of Bedrock Bases we are providing a “base” for 2 common web frameworks: Bootstrap 4 and Material Design.

A base consists of an implementation which shows a few example templates, a styleguide which documents the framework, and the HTML/CSS components and Javascript already in place.

Now it’s up to you to put things together to prototype your dream app. Fork it, document your changes and build your custom environment. You’ll be working in an integrated environment that is optimized for productivity.

Here’s a few screenshots of what the Bedrock bases look like – and links to the online versions:

So, why Bedrock bases?

At Mono we have maintained starting points like this for our own work internally, and we figured it would be useful for other people as well.

We depend on a lot of open-source projects for our work and we are happy to give something back.

If you know how to work with Bedrock, the bases are on a branch.

Simply start with checking out Bedrock, using git clone git@github.com:usebedrock/bedrock.git; then check out the relevant branch with either git checkout bootstrap4base or git checkout materialdesignbase.

Run npm install to install the necessary dependencies and get things going with gulp.

The branches are here:

• Bootstrap 4
• Material Design

If you are new to Bedrock, check out the basic tutorial.

We’ve been thinking hard about who Bedrock is for.

The current answer is: it’s for designers who want to reach the next level.

Bedrock is extremely powerful, but it is not easy to use.

I actually had “easy to use” on the website for a while, as a marketing message.

I thought about it. For months I’ve thought about how to make things easier.

With the upcoming 1.10 release it will be much easier to get into than before.

The thing is that learning to work with Bedrock is not easy – but learning to work with Bedrock is worthwhile.

If a designer learns to work with Bedrock they will be able to communicate their designs at scale, with a level of realism that design apps can only dream of.

But to do so you will need to learn about quite a few concepts.

And to work efficiently you basically need to know how to code HTML and CSS, and then be able to work with things like SCSS and Pug as well.

You need to way around a terminal, and you need to know about version control.

For a long time I thought about trying to simplify Bedrock, to try to make it easier to use.

But the problem is that I can’t make the reality of building complex web apps easier.

And I also don’t want to dumb down Bedrock with choices to make it more dummy-proof leading to a development environment I don’t want to use myself.

So, Bedrock is not easy.

It’s definitely not for the designer who doesn’t want to code.

But once you get past the hurdles, you will be rewarded with a powerful tool.

We have updated the documentation for Bedrock.

• The documentation for using JS data in your projects is now more extensive and more accurate
• The configuration is now listed in a clearer table
• The working with Pug section has been updated to give some hints specific to using Pug within Bedrock

We also released Bedrock 1.9. Check out the release notes on Github.

We are working on a new version of Bedrock, that will improve Bedrock as a whole. Stay tuned!

As part of the planned evolutions for Bedrock, we now have a new Github organization that will host all Bedrock related repositories.

For now, the 2 public repositories available on Bedrock are Bedrock itself and our CLI tool.

We have also registered the bedrockapp.org domain, which will be the new domain for this website soon.

If you work on Bedrock, please update your git remotes! The new URL for Bedrock itself is https://github.com/usebedrock/bedrock and git@github.com:usebedrock/bedrock.git.