Development

List of available scripts

To run the scripts below, replace with the name of the script in the list npm run <script-name>

• dev is the main task for local development which starts the webserver on ports
  • 18080 for the main website
  • 3000 for Fractal
• fractal:build builds Fractal pattern library and transforms twig files in HTML static files into templates/01-fractal/www folder. This folder is the one which is then deployed on server.

Usage

The Design System utilises NPM script as task runner. To start development on the DS the simplest step is to use the npm run dev task by simply running it in the root of the repo. This will run a watch task and create a local static server instance to see your ouput on.

Project structure

The project structure is formed like this: the templates folder is where the Craft CMS views live.

Inside 01-fractal live Fractal components.

├── templates
│   ├── 01-fractal
│   │   ├── src
│   │   ├──── pattern-library/02-components
│   └── work
│   |───└── _entry.twig
│   |───└── index.twig
│   └── thinking
│   |───└── _entry.twig
│   |───└── index.twig
│   └── index.twig

Components

In order for components to be consumed by the website they must follow a set of conditions. The recommended minimum for a component is as follows:

├── 02-components
│   ├── component-name
│   │   ├── _component-name.scss
│   │   ├── component-name.config.js
│   │   ├── component-name.twig

• component-name.twig is the markup of the component where logic lives
• component-name.config.js is the configuration file of the component written in Javascript module format and shows static data in Fractal UI. These data are not consumed in Craft templates. They are instead passed via { include "@component-name" with { city: "New York" } }
• _component-name.scss it the SCSS of the component