Setting up a pattern library for your design system is typically done in the form of documentation. It would be setup in a design tool, each component with placeholder content, a token name, and some instructions for using.

When it comes to a website however, design components should not be static. They should be made to work in the browser, as close to final HTML as possible.

Design components in context

Documentation made in HTML is not enough. The components should be part of a real layout. A section should be shown within the frame of a template and buttons and titles among example content. And they should all adapt to the responsive fluidity of the browser.

The way to do this would be to have the components in an example layout, among each other. Working the way they would in the final website. An HTML file with all of your design components.

Design system source of truth

A single HTML file with all of your components would allow you to get closer to your final CSS, and even Javascript, where needed. Your tokens for typography and colors will all be defined globally and used in your components for final output.

Within your HTML code, for each component you would include comments to give it a name and any instructions needed. Your code is the documentation. You would show the component variants. And your components would include functionality that you can preview and interact with in the browser for things like forms, menus, carousels, etc.

The single HTML approach would eliminate the need for extra layers of design files, code repos, and documentation that would need to be maintained. It would simplify your workflow for making updates to your pattern library and could span across any kind of web content.

Blocks Edit allows using the single-page HTML format for anyone on your team to visually place and edit components to build content.