Skip to content
esr360 edited this page Feb 29, 2020 · 14 revisions

Synergy allows you to create, style and interact with modular and configurable UI components

The primary goal of Synergy is to allow for the creation of sane and abstract user-interfaces that are isolated from all content and substance. These user-interfaces should be easily modifiable and manipulatable with no risk of unexpected or unwanted side-effects. Synergy makes it easy to understand your entire project's UI from a bird's-eye view, giving you the freedom you need whilst constraining everything else.

This makes Synergy the perfect tool for creating front-end styleguides (or Living Styleguides) using a series a Presentational Components forming a reusable component library (ideal for use with Design Systems).

Modules, Components & Modifiers

Synergy is just a practical application of certain theories and philosophies. One of the main philosophies includes the way UI elements are viewed. In a world of HTML and CSS, this could equate to something as simple as a "naming convention" (e.g. BEM), but in a world of abstract UI Modules, an idea with more depth is needed.

Put simply, the way Synergy views a UI is a series of Modules that are composed of Components, both of which can have Modifiers.

See the Modules, Components & Modifiers page for more information

Under-the-Hood

The main component of Synergy is the Lucid React library. This handles the creation and rendering of Synergy Modules (using React) and is also used for styling them (using JavaScript). For styling Synergy Modules with Sass, the Cell Sass library is used.