https://github.com/chapter-three/c3-fractal
Mirror of https://dashboard.pantheon.io/sites/75e1a05e-d1ea-4c7f-95c5-34159376d7dd
https://github.com/chapter-three/c3-fractal
Last synced: about 2 months ago
JSON representation
Mirror of https://dashboard.pantheon.io/sites/75e1a05e-d1ea-4c7f-95c5-34159376d7dd
- Host: GitHub
- URL: https://github.com/chapter-three/c3-fractal
- Owner: chapter-three
- License: mit
- Created: 2019-07-31T17:39:19.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-01-10T18:29:45.000Z (over 5 years ago)
- Last Synced: 2025-01-18T06:27:39.491Z (3 months ago)
- Language: PHP
- Size: 61 MB
- Stars: 0
- Watchers: 7
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# C3 Fractal
[Fractal](https://fractal.build) is a design system tool, like Pattern Lab. This site exists to demonstrate a [Fractal](https://fractal.build) pattern library, used within Drupal, using the [UI Patterns](https://drupal.org/project/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](https://github.com/chapter-three/wiki/blob/master/Chapter%20Three/Developers/GIT.md#push-to-multiple-remotes-by-default)._
| 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:
```sh
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`_
```sh
fractal start --sync
```
3. Rebuild static style guide instance:
```sh
fractal build
```