Development

Installing Claro using Git or development release

Before starting, ensure that you are using at least the latest LTS release of Node.js, once Node.js has been installed, we recommend installing yarn

npm i -g yarn

To install the required packages go to drupal/core and run:

yarn install

Working on JavaScript

When developing JavaScript locally you can use the watcher to make changes and
have them compiled as you save as well as generate source maps.

yarn run watch:js

It is also possible to build all files at once

yarn run build:js

To build source maps you need to use

yarn run watch:js-dev

For building a single file use

yarn run build:js -- --file js/responsive-details.es6.js

Working on CSS

The project uses PostCSS for compiling CSS for better browser support. Every CSS file Claro has an accompanying file with the extension .pcss.css these.pcss.css are the ones that should be directly edited. These files are then compiled to their equivalent .css file.

CSS scaffolding tasks are following the logic of the JavaScript tasks:

yarn run build:css

Process sources without writing source maps.

yarn run build:css-dev

Process sources with (external) source maps.

yarn run watch:css

Watches source assets and applies distributive task if any of them changes.

yarn run watch:css-dev

Watches source assets and applies development task if any of them changes.

Working on images

.pcss.css files should never reference inlined SVGs. They should instead reference an actual SVG file with url(../../etc.svg). These svg file references will be inlined to the CSS compiled from .pcss.css files.

Whenever images are added or modified, make sure they're optimized by dropping them into https://imageoptim.com/. Optimizing images is important because it reduces the amount of data that end users need to download: it improves front-end performance, reduces data cost and reduces energy consumption.

Linting JavaScript and CSS

For linting compiled CSS use

yarn run lint:css

For JavaScript there are two separate configs you can use

yarn run lint:js

yarn run lint:js-passing

Claro Distribution

The Claro Distribution can be used for Claro theme development. It includes a dashboard with a variety of markup generator modules for theme components, along with tests.