Skip to content

Latest commit

 

History

History
57 lines (42 loc) · 2.83 KB

README.md

File metadata and controls

57 lines (42 loc) · 2.83 KB
Raw

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

  1. 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
  1. Rebuild static style guide instance:
fractal build