Bedrock 1.19.0: node-based icon fonts

Posted on 5 December 2019 at 13:48 by Wolfr_

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.

How to document an icon font

Posted on 29 November 2019 at 16:03 by Wolfr_

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.

Bedrock 2 alpha

Posted on 8 September 2019 at 13:20 by Wolfr_

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!

Bedrock news – July 2019

Posted on 29 July 2019 at 20:52 by Wolfr_

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 😎!).

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.