The new 1.1 release is almost upon us. You can grab a pre-release here if you are interested.

I made some videos demonstrating the 3 coolest new features: icon documentation, dark mode and page states.

At the moment, upgrading a Bedrock install is a semi-manual process. We are working on automating this as much as possible.

If you are using an older version of Bedrock, it is best to use a combination of the upgrade command provided by the Bedrock command line interface and a diff tool that allows you to diff folders to upgrade your Bedrock install.

Personally I use DeltaWalker to compare my project’s folder to a standard Bedrock install.

Part 1: Automatic upgrade

You can use the Bedrock upgrade command contained in bedrock-cli to update every file in /core.

This will update every file in /core/.

Part 2: Transferring files manually

You will then need to manually transfer a few files, depending on how old your Bedrock install is.

These are the files you can transfer as-is:

• gulpfile.js
• .gitignore

There are some files that didn’t exist in older versions of Bedrock that need to be added:

• .nvmrc
• bedrock.config.js

Within bedrock.config.js you will probably need to set a path to where you use the colors feature. It is not possible to use Bedrock at the moment without using this feature.

You will also need to set whether you want to use icon fonts or SVG icons.

Then there is a tricky one – the package.json file. The contents of this one depend on how much custom Javascript you wrote in your project. If you didn’t use any Javascript you can transfer the file as is.

But if you wrote Javascript and installed packages via npm install you need to list these as devDependencies. Within the logic of Bedrock, Bedrock’s code itself is a dependency and your application’s code is a devDependency.

Making sure your folders are named correctly

We changed some folder names to be able to provide better functionality.

The Bedrock upgrade tool does not help with this, this is a manual process.

In the beginning the folder for styleguide components was named patterns, then _patterns, then _components. So to upgrade your Bedrock to the latest install, that folder needs to be named _components.

The _ part of this logic is to disallow Bedrock from indexing Jade templates within _components as pages that show up in the page index/page tree.

The same counts for the _layouts and optional _mixins and _includes folders.

Basically your tree has to look like this:

.
├── content
│   ├── data
│   ├── docs
│   │   ├── overviews
│   │   └── styleguide
│   ├── icon-font-source     ---> Optional if you use icon fonts
│   ├── icons                ---> Optional if you use svg icons
│   ├── images
│   ├── js
│   ├── scss
│   └── templates
│       ├── _components
│       └── _layouts
│       └── _includes        ---> Optional, depends on how you code your templates
│       └── _mixins          ---> Optional, depends on how you code your templates
├── core
    ├── discovery
    ├── js
    ├── scss
    │   ├── components
    │   └── vendor
    ├── tasks
    ├── templates
    │   ├── includes
    │   ├── layouts
    │   ├── mixins
    │   └── styleguide
    └── util

Note that within core the includes, layouts and mixins folders do not use an underscore and within content they do. So if you are globally replacing file references within the project be careful, because you will run into errors.

So, I hope this helps if you are running into problems upgrading Bedrock.

We are always available to help – just log an issue on Github and we wil try to help out.

A few days ago I tested an interesting alternative to Bedrock, called Fractal.

It’s more of a component style guide that can be added to any project than a prototyping tool, but there are a lot of similarities.

It builds on a lot of similar ideas as Bedrock, so me this is a validation that what we are doing here is right.

I am trying something new – using Slack as a support/community channel for Bedrock. So if you are interested in Bedrock, want some help to set things up – send an e-mail to jr@mono.company and I will set you up with a Slack invite.

The community URL is bedrock-hq.slack.com/.

Up until this point we haven’t really focussed on Windows support for Bedrock. Some recent projects required us to also make the software work on Windows. We were able to get Bedrock working with only a few minor tweaks.

To set up Bedrock on a clean Windows install, you need to download:

• Node from the official node.js website (use the installer)
• Git from the official Git website (use the installer)
• Bedrock from the repository (Use the “download” option, or use SSH if you set up an SSH agent on your machine)

Then follow the instructions, which basically amount to installing gulp globally, running npm install to get the required dependencies, and then running Bedrock using the gulp command.

We’ve started working on a linter which allows you to test your template code for HTML errors. You can easily create your own tests. Use cases include avoiding common HTML mistakes like forgetting for attributes on form labels. This feature is being worked on and will be released when it’s tested by more people. Feel free to check out the PR.

Bedrock is one year old! We started this project about a year ago, and we’ve been updating and refining Bedrock since.

We use Bedrock for most of our projects at Mono. HTML prototyping is a staple of our workflow; and it’s something we’ve talked about extensively in the past.

We’re at the point where Bedrock’s features have stabilized, and have been in actual use in many projects.

After some recent development work I concluded that Bedrock is feature complete. I’m ready to call this stable and thus a 1.0 is in order. You can download Bedrock 1.0 on Github.

What’s next for Bedrock? Well, at Mono we often use Bootstrap for our projects. We’ve customized Bootstrap 3 with a lot of extra components which we think are worth sharing.

I plan to make a new demo that shows the power of Bedrock combined with Bootstrap. While developing the demo I am going to record my screen and turn it into a session that anyone can watch, to see the process.

Next to this, I want to revise the documentation to make it easier for newcomers to get started. Bedrock is a relatively simple tool to use, but you have to know some details to use it effectively.

P.S. A huge shoutout to Thomas for his coding efforts. If you need a fine React developer, hire him!

First, install jQuery using npm:

npm install jquery

Then, go to content/js/index.js and add the following line:

window.$ = window.jQuery = require('jquery');

You can now write jQuery! Test it with the following code which will turn everything green:

$(document).ready(function() {
$('*').css('background', 'green');
});

This is not specifically Bedrock related, it’s more of a Jade thing, but I am putting it down here for reference. This is how I add selected states to navigations in a Bedrock context.

When you have a navigation it might follow an HTML structure like this:

nav
    a.active(href='/') Page 1
    a(href='/page-2') Page 2
    a(href='/page-3') Page 3

Now, how to add an active state to the page when you are on the page? You can directly use Javascript within Jade to check for the pathname:

nav
    a(href='/') Page 1
    a(class='#{pathname.match(/page-2/) ? "active" : ""}') Page 2
    a(class='#{pathname.match(/page-3/) ? "active" : ""}') Page 3

This works for page 2 and 3, but, what about our home page? The url to match is actually just “/” so we can’t match this. We can solve this by adding a variable on the home template:

block append pageVariables
    - var isHome = true

Then we can call it by checking if the isHome variable is true:

nav
    a(href='/' class='#{ isHome ? "active" : ""}') Page 1
    a(href='/page-2' class='#{pathname.match(/page-2/) ? "active" : ""}') Page 2
    a(href='/page-3' class='#{pathname.match(/page-3/) ? "active" : ""}') Page 3

This method depends on the block pageVariables being defined within the master.jade template:

block pageVariables
    // Nothing here yet, don't remove, styleguide depends on this

In Bedrock, we automatically generate the colors based on the contents of an SCSS file. The visual reference exists to make people aware of colors used in a project to avoid the “50 shades of grey” problem.

Here’s a screencast that shows how it works: