Romanesco pattern library
Structured according to the Atomic Design principles

Electrons
Electrons function as a bonding mechanism for atomic systems

Atoms
Moving up to the level of atoms, things are still very much generic

Molecules
Molecules are slightly more complex, but they can't function on their own

Organisms
The outlines of a module appear when dealing with an organism

Templates
Templates provide the framework for specific layouts and content types

Pages
The end result of all this chemistry is actual website content

Formulas
Code snippets specially created to solve a particular problem

Computations
A set of instructions that fire on certain system events

Bosons
The invisible force that glues your Romanesco universe together

Purpose

The goal of this front-end pattern library is to give you an overview of all the available patterns in the system. It briefly describes the purpose of each pattern, informs you about potential caveats and shows its relationships to other patterns.

Some patterns are accompanied by a Backyard button. This will take you to a sandbox page, which showcases how that pattern looks and behaves in real life. You can also use these pages as your playground, to fiddle with the components and try out new things (or fix bugs).

Please note that all pages that were originally included in this front-end library are reset to their default content when you update or reinstall the Romanesco Backyard package.

You can use this to your advantage: mess up the place to your hearts content and then simply reinstall the package to undo the damage. But if you want to keep any changes you make in the Backyard, you'll have to duplicate that page and give it a unique pagetitle. This way the installer won't see it as part of the package and will therefore leave it alone.

Possible use cases

  • Testing environment for developing new components
  • Visual aid during front-end styling edits
  • Tool to navigate all available patterns
  • Playground to learn how the system works and explore new possibilities
  • Rapid prototyping tool for creating layouts in HTML

Contributing

One crucial requirement is that this pattern library, like the patterns themselves, should be interchangeable between Romanesco projects. In order to make this work, the following rules apply:

  • The front-end library is composed of resources.
  • The resources follow the structure of the elements inside the Romanesco Patterns package.
  • The resources are installed through the Romanesco Backyard package (which is created with Git Package Management).
  • Because of this, the resources will receive a unique ID from the installer. So resources cannot contain links to other resources based on their ID!

For more information, check out Romanesco Backyard on Github.