Common errors when upgrading to Bedrock 1.10

Posted on 2 July 2018 at 16:41 by Wolfr_

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

Documentation updates

Posted on 28 June 2018 at 12:20 by Wolfr_

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.

Need support?

Posted on 22 June 2018 at 13:53 by Wolfr_

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

We welcome any question!

Bedrock 1.10: introducing Bedrock bases

Posted on 18 June 2018 at 22:45 by Wolfr_

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:

The Material base styleguide home page.
The navbar component in the Bootstrap 4 base.

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:

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

Not easy

Posted on 11 June 2018 at 15:07 by Wolfr_

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.

Updated documentation + Bedrock 1.9 released

Posted on 8 June 2018 at 9:30 by Wolfr_

We have updated the documentation for 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!

Github organization + new domain

Posted on 20 May 2018 at 16:31 by Wolfr_

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.

Bedrock on Product Hunt

Posted on 20 May 2018 at 10:22 by Wolfr_

Bedrock was submitted to Product Hunt on Saturday Morning and even though it is weekend we have amassed a whopping 150+ upvotes. Yay! I am just posting this here for posterity.

We have big plans for Bedrock the next months. If you want be the first to know about new things, follow @usebedrock on Twitter or subscribe to the RSS feed.

Multi language support (1.7 update)

Posted on 16 May 2018 at 19:29 by Wolfr_

We updated Bedrock to include basic multi language support. It is a very simple implementation that is mainly meant for quickly testing prototypes in multiple languages.

We don’t recommend using this sort of code in production, but it can be helpful for small-scale language testing (e.g. UI label testing or usability tests). Check out the documentation.

Icon fonts & Bedrock 1.6

Posted on 29 April 2018 at 12:48 by Wolfr_

In order to address a security vulnerability, we have updated FontCustom to version 2.0.0 in Bedrock 1.6.

In order for the icon font generation to continue working, you need to have woff2 installed on your system. Instructions are in the google/woff2 repository.

Don’t forget to move the commands to a folder from where commands can be executed. If you use MacOS this is typically something like /usr/local/bin.

Since the Gemfile updated, you will need to run bundle install when updating existing projects. First you would upgrade Bedrock and then you would run bundle install again.