Bedrock 1.17 released

Posted on 20 February 2019 at 22:46 by Wolfr_

We’ve been hard at work improving Bedrock. Over the past two weeks we have added a search function to the styleguide, the ability to add your own logo, as well as ways to mark components as “unofficial” in the sidebar as well as on the components page (i.e. to mark components as something that you customised).

You can see the newest version of Bedrock in action in our Bedrock bases:

We realize that the usage of some of the features might be a bit obscure, and we hope to make it more clear how to implement and use these in the near future.

Bedrock news – February 2018

Posted on 9 February 2019 at 13:27 by Wolfr_

The design systems event I held this week inspired me to keep on hacking to make Bedrock better.

I know that not many people use Bedrock, but I want to change that, as I think the workflow that we propose has much to offer.

Help with using Bedrock

Do you want help with using Bedrock? Troubles setting up Bedrock? Get in touch with me via Twitter. My DM inbox is open.

Bedrock changes

  • 1.14
    • Added a way to tag components with their source to differentiate, for example, between official/unofficial components. The way to do it is to add a source to the YAML front matter of the component docs. For example, the .md file of a component would look like this:
    ---
    title: My component
    source: Unofficial
    ---
    
    An extra component.
  • 1.15
    • Started work on 2 new features
      • A better way to display the component style guide on mobile
      • A way to search components in the styleguide

If you are curious you can check out the pre-release.

Updated Bedrock bases

Bedrock bases are starting points to use Bedrock with. Using degit it is super easy to get started.

  • The Bootstrap 4 base has been updated to use Bootstrap 2.1.4.
    • Here’s the 5 terminal commands you need to get started with a Bootstrap project:
      • npm i -g degit
      • degit usebedrock/bedrock#bootstrap4base my-bootstrap-project
      • cd my-bootstrap-project/
      • npm install
      • npm start
  • The Material Design base has been updated to use Material Web Components 0.44.0.
    • Here’s what you need to get started with a Material Web Components project
      • npm i -g degit
      • degit usebedrock/bedrock#materialbase my-material-project
      • cd my-bootstrap-project/
      • npm i
      • npm start

Updated documentation

I pruned the documentation to make it clearer.

  • Basic tutorial
    • The video was removed since it is out of date with how Bedrock works and might cause confusion for newcomers
    • We recommend using degit to start a new Bedrock project. This has been documented in the basic tutorial.
  • Page tree
    • Documentation for the page tree docs page was simplified for clarity
  • Updating Bedrock
    • We added docs about the option to update Bedrock from the development branch

 

Updated documentation/requirements

Posted on 28 January 2019 at 11:48 by Wolfr_

We have updated the documentation, where sometimes the old command to start Bedrock (gulp) was mentioned. Now it should talk about npm start everywhere.

Next to this the requirement for Bedrock was stated to be Node at version 8, but recently this has changed to Node 10 (node stable). The documentation was subsequently changed.

Bedrock 1.12 requires node 10

Posted on 12 December 2018 at 17:38 by Wolfr_

Bedrock now requires the LTS version of Node to work – currently this is Node 10.14.1 for Bedrock 1.12.0. We recommend using nvm to manage multiple node versions. You can install the latest version of node from nodejs.org.

A change to Bedrock’s commands

Posted on 11 November 2018 at 18:22 by Wolfr_

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.

How to document SVG icons

Posted on 30 August 2018 at 9:24 by Wolfr_

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.

An update to the CLI

Posted on 16 July 2018 at 13:03 by Wolfr_

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.

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!