C3 Fractal

Fractal is a design system tool, like Pattern Lab. This site exists to demonstrate a Fractal pattern library, used within Drupal, using the UI Patterns suite of modules.

Information

* The Github repo is a mirror (meant for easily browsing the codebase). It's only updated if the user pushing code has configured additional push URLs according to these instructions.

Name	URL
Dashboard	https://dashboard.pantheon.io/sites/75e1a05e-d1ea-4c7f-95c5-34159376d7dd
Site	https://dev-c3-fractal.pantheonsite.io
Codebase	ssh://codeserver.dev.75e1a05e-d1ea-4c7f-95c5-34159376d7dd@codeserver.dev.75e1a05e-d1ea-4c7f-95c5-34159376d7dd.drush.in:2222/~/repository.git
Github*	https://github.com/chapter-three/c3-fractal
Fractal Pattern Library	https://dev-c3-fractal.pantheonsite.io/libraries/fractal/dist/index.html
Fractal UI Patterns Listing	https://dev-c3-fractal.pantheonsite.io/patterns

Notes

• The Fractal library is located in web/libraries/fractal. There are currently 3 patterns:
  • Blockquote
  • Button
  • Card
• There is a very basic Drupal theme at web/themes/custom/fractal. It doesn't have any CSS or build scripts. It currently defines only one Pattern & template (which passes through to the Fractal template): Blockquote.
• There is a symlink to the Fractal components to the web/themes/custom/fractal/templates directory, which is consumed directly by ui_patterns_fractal module.
• Patterns are configured in Drupal, in a few places:
  1. https://dev-c3-fractal.pantheonsite.io/hello: This is a landing node, that has a few Paragraphs configured:
     • Blockquote paragraph (default display)
     • Card paragraph (default display)
     • Button link paragraph (default display)
  2. https://dev-c3-fractal.pantheonsite.io/faq: This is a View, configured to use the UI Patterns row display, along with Views fields that are mapped to the Card pattern.
  3. https://dev-c3-fractal.pantheonsite.io/blog: This is a View, configured to render "teaser" entity display for article content type. The "Teaser" view mode is configured to use the "Card" pattern.
• There is a custom module fieldz_formatters that currently adds some extra fields to handle the 1:1 mapping that UI Patterns needs on entity displays.

Local Setup

1. Install dependencies:

cd web/libraries/fractal
npm install

2. Start server with BrowserSync:

   Note: If you get an error when running fractal start, try installing the cli tool globally: npm i -g @frctl/fractal

fractal start --sync

3. Rebuild static style guide instance:

fractal build