Cali is a starter theme for WordPress.
It focuses on UI component development using the Atomic design methodology.
Tech used:
Clone the repo in the themes folder.
then execute:
composer install && cd frontend && yarn
cd frontend && yarn start
This will watch for changes in any file and rebuild the assets.
It also starts a server for the Styleguide with BrowserSync.
cd frontend && yarn build
Production ready assets.
The Atomic methodology can help on classifying the components.
Components are built using a templating syntax from a view engine library called Handlebars, which uses a mix of HTML and placeholders for showing data and having control structures like if conditionals or for loops.
Placeholders will make your component's much cleaner than the usual PHP/HTML mix.
A view engine will also allow for keeping DRY components, like having a unique wrapper component using partial blocks and reuse it in several sub components.
This theme includes a component's styleguide where you can isolate your component's and use it as a development server that refreshes automatically when a change is detected in the HTML, CSS and JS files.
The same Handlebars files are parsed in PHP and used directly by WordPress.
Having a templating engine like Handlebars means that the components can be used in PHP and JS.
Javascript can be written in ES6 and transpile to ES5 with Babel for IE11 support.
Use nesting and imports in the CSS. It's similar like using SASS. Althought, custom CSS will barely be created because the design is created using Tailwind's functional CSS.
A view engine will force developers to separate business logic from Views as PHP is not allowed in the components templates.
Stylelint and ESLint are triggered on every file change and will show any warnings or errors while coding.