Documentation

Bedrock is a tool to efficiently work together, document HTML/CSS components, and provide a single source of truth for what an application should look like. It is primarily meant to create HTML prototypes for web applications,
but can be used to generate any website.

Bedrock can be compared to static site generators like Jekyll or Hugo in the sense that they take a collection of HTML, CSS and Javascript. Those files get processed to generate a static website.

However, we specifically made Bedrock to help us design and prototype interfaces. There are a few functionalities within Bedrock that help us achieve that. The most important one is the page index and tree, which is basically a listing of every page in the prototype.

This listing is very important and allows you to see the structure of your application. It allows you to see which templates are available.

Bedrocks supports prototypes that span hundreds of pages. The tree is built to accommodate that scale by providing a collapsable tree structure and remembering its “state” as you change pages.

(Pro tip: show and hide the tree by hitting the shortcut Ctrl+M in any prototype)

Next is the component styleguide. This is a series of pages that allows you to document the various interface pieces within the project. You can easily add new components to the system. Adding a component
is as simple as creating a new HTML file that contains the component.

Now, where it gets powerful is that you can directly reference the components within pages. So when you update the pages, the documentation changes along with it.

Bedrock also allows you to add static pages of documentation right along with the component documentation. So you can not only explain the “what” but also the “why”.

So why Bedrock? Why invest in learning a new tool?

It used to be that a lot of design was done in static images, tied together in long Powerpoint presentations or complex design files. While this approach might still be valid today, it breaks down quickly when working on the same project with multiple people, over a very long time.

Bedrock is built to provide an overview of the current state of the design. Within digital product design it’s often unclear which designs are ready to go to development.

Bedrock provides you with a way to provide a single source of truth for what should be implemented in the real application.