Development
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 use
yarn install
The repository doesn't contain compiled CSS and JavaScript files. You will have to run the following commands before the theme will work:
yarn run build:js
yarn run build:css
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. CSS source files are located in css/src
folder. The compiled CSS files can be found in css/dist
. When making changes, the patch should only contain changes to the source CSS files.
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
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.
Help improve this page
You can:
- Log in, click Edit, and edit this page
- Log in, click Discuss, update the Page status value, and suggest an improvement
- Log in and create a Documentation issue with your suggestion