In September ’19, I blogged about Bedrock 2 for the first time. The idea has now evolved to an implementation in Ember, Angular, Svelte and Vue. In this blog post I will give a global summary.

Around five years ago — yes, really! It’s that long ago — we released Bedrock to the world as an open source project. Bedrock is a tool to help with prototyping user interfaces using HTML and CSS.

We made this very documentation website you are visiting right now, and we learned a lot improving upon it & maintaining it over the years.

While Bedrock is completely open source, most usage was as an internal tool at Mono and as far as I know did not get much usage outside of our company. At some level this is fine, because it was doing it’s job for us and maintaining OSS can be a pain. At another level I would have liked more companies to use it to grow it as a project.

Over the years, a problem crept up on us: the dev world had moved to using Javascript frameworks for their front-ends. Simply delivering static HTML/CSS wasn’t good enough anymore in some cases.

I started toying around with porting the features of Bedrock to environments powered by the popular JS frameworks.

In Aprl last year I wrote the idea of Bedrock 2 down in a design document, which outlined a vision for what Bedrock 2 is. The main idea is to build on top of existing frameworks to deliver the functionality of Bedrock.

Up until today, we’ve released some early versions of Bedrock2:

• Bedrock2-vue-nuxt
• Bedrock2-ember
• Bedrock2-svelte-routify
• Bedrock2-angular

These are all early example implementations. Some of these already have improved version, but we didn’t get to open sourcing them yet. These better versions currently live in client projects.

Whichever one of these evolves depends on what type of design projects we are working on at Mono. I am curious which one evolves the most over the coming year 😉 (I wish more clients would ask for Vue projects, because I like that one the best.)

While testing these in real-world projects, we’ve also learned that Bedrock 1 is still a viable tool. It has some features like page states and reliable static deployment that make it the go-to tool for some types projects.

For example, in large prototypes with lots of user roles, where the different user roles see a different UI, Bedrock 1 is immensely helpful. The features to simulate the UI states don’t exist in none of the Bedrock 2 versions.

The last time we reported about Bedrock, we were at version 1.19.

If you follow us on Twitter, you might have heard about Bedrock 2. That’s a separate story from Bedrock 1, using Javascript frameworks as a base setup instead of a custom Gulp-based static site generator (Bedrock 1).

We’ll be reporting about Bedrock 2 when it is more evolved.

The latest Bedrock version is 1.25.1. Compared to 1.19, there are the following major changes:

Technical maintenance

• Improved default config logic
• Use Gulp 4 instead of Gulp 3
• Use the latest LTS version of Node (no need to use nvm anymore if you use Node 14)

Deprecations

• Removed linter feature

Usage

• Any component prefixed with _ should be ignored in component list in styleguide
• Improvement: Ignore root page directories that start with an underscore

We are continuing to support Bedrock as we use it in our own projects.

For the longest time, we had a Ruby dependency for icon font generation. Thanks to a recent PR by Xavez this is no longer the case.

This will make it easier to get Bedrock up and running. Icon fonts are still useful when you have lots of icons. The markup for an icon font is simple whereas having to use repeated inline SVGs can lead to performance issues.

Both icon techniques have their advantages and disadvantages, so that’s why we support both. Check out the newest release on Github.

First, make sure icon font generation is active. In bedrock.config.js check this:

icons: {
    generateIconFont: true,
    ....

The loop that you need to document an icon font is as follows:

each icon in icons.iconFont
    p #{icon}
    .if(class="if-"+icon)

You would place this in a .pug file inside the documentation.

You could semantically put it in a proper list:

ul.br-icon-font-list
    each icon in icons.iconFont
        li
            .if(class="if-"+icon)
            | #{icon}

You can then add some styling if you want:

/* Styling for icon font list
   ========================================================================== */

.br-icon-font-list {
  columns: 16rem;
  list-style: none;
  padding: 0;
  margin: 0;
  li {
    display: flex;
    padding: 0 1rem 1rem 0;
    .if {
      display: inline-block;
      margin-right: 1rem;
    }
  }
}

Voila, that is how you document an icon font.

I started working on an early version of Bedrock 2. It is kind of experimental but I have a good feeling that it will replace Bedrock 1 in the end.

Bedrock 2 is an entire rewrite of Bedrock. It uses different technology under the hood but conceptually it is the same.

It provides a prototyping development to quickly iterate on UIs. It provides helpful features like the component styleguide and the page tree that you might know from Bedrock 1.

Technology-wise it runs on Sapper which in turn uses Svelte. Anyone who’s been following me on Twitter might know that I’ve been over the moon about Svelte. In a nutshell, it’s just pretty awesome.

While Bedrock 2 is in development, it will ship with Svelte Simple UI (I have to find a better name). Svelte Simple UI is new framework to create UIs in Svelte. It has its own aims: to be Svelte-ish, to have a small bundle size, to not be overly complex.

During Bedrock 2’s development, we will work towards making Svelte Simple UI a separate package. But to fully test Bedrock2 we need component code in the system. So the current repo will be a mix-up until we extract the code into a separate repo (#3).

If you are curious to give it a try, please check out the Github repository.

Call for contributors

Everything will be MIT-licensed so anyone can go and do their thing with it.

Because some of the work is a bit outside of my comfort zone I aim to get contributors for this project that are better at Javascript than I am, or that are interested in getting to grips with Svelte and Sapper together.

So, are you a Javascript dev interested in something new? Want to contribute to an OSS project that might very well help you in your day job? Get in touch!

I’ve clarified the documentation of the page tree and index page as well as the working with Pug page.

Next to this, some missing documentation was added to “Working with the style guide”. It pained me slightly that it took us a full year to complete this.

One might be concerned about the lack of updates to Bedrock, but rest assured – for me this is just proof that the software is stable and working, and does what it needs to do. Personally, I haven’t needed a new feature in a while, but I use Bedrock quite often, which I believe is a great sign.

I would like it more people used Bedrock though. So if you use Bedrock or if you are interested to start using Bedrock, feel free to post on our issues page. Let us know how you are using Bedrock, any problems you encounter or anything else that is on your mind (as long as it’s about Bedrock 😎!).

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:

• Bootstrap 4 base
• Material Base

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.

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

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 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.