Styleguide

How to use this web interface

The web UI interface of this project is built upon Fractal.

The interface includes three parts:

  • ← on the left, a sidebar that gives you direct access to components and documentation
  • ➝ on the right, a preview of the current component or doc page
  • ↓ on the bottom part of the preview pane, several panels provide some more information (only available when previewing a component, won’t show up on documentation pages)

TIP: If the bottom pane is hidden when previewing a component, drag the handle at the very bottom of the page to reveal it.

Component panels

HTML

As its name implies, this panel gives you get direct access to the full generated HTML markup.

View

Displays the code for the view of the current component using the template rendering engine used to build it.

Assets

Gives you access to the SCSS file and to the complete markup of the currently previewed component.

Context

The rendered view of some components use some dynamic data. You will find them under this context panel.

Info

This panel shows various information about the currently previewed component, including a very useful cross-linking list of the components (atoms, molecules…) used to build the current component; this list is available under the last section of the panel, namely ‘REFERENCES’).

Notes

Might include some notes about the preview, design, code… etc. For instance, some components have some specially added visual elements that embellish the preview; it will be written down here.

⤺ back to docs homepage