UnoCSS Starter

A starterkit theme with UnoCSS and Vite preconfigured for development.

Intro video
https://drupal.tv/external-video/2024-10-13/drupal-theming-sdc-vite-and-...

Blog post
https://www.drupalarchitect.info/projects/unocss-starter-theme/updates/u...

Setup

Create a starter theme from 0.1.x for a minimal setup, and 0.2.x for a better library directory structure.
[lando|ddev] php web/core/scripts/drupal generate-theme --starterkit unocss_starter THEME_NAME
*See complete example below.

Install Vite module.

Configure vite devServerUrl in settings.php.
$settings['vite']['devServerUrl'] = 'https://vite.SITENAME.[lando|ddev].site';

Install npm packages.
[lando|ddev] npm i -D

Build assets.
[lando|ddev] npm run build

Build a theme! Use unocss/tailwind classes in template files, or use them with @apply in css.

Vite dev server

Run vite dev server and experiment in index.html or work on your twig/css files.
[lando|ddev] npm run dev

*Included .lando.yml file has tooling for npm and vite. Edit the path to your theme and run lando vite to start the dev server.

You should see the following in your browser console.
[vite] connecting...
[vite] connected.

Please post any questions or issues in the queue.

Generate subtheme
php core/scripts/drupal generate-theme --path=themes/custom --starterkit=unocss_starter --name="New Theme" --description="UnoCSS starter theme." new_theme

Versions

0.1.x is a bare minimum UnoCSS/Vite setup.
0.2.x is a starting point with a modified directory structure.

0.1.x UnoCSS/Vite

Created vite project and installed unocss.
Configured vite and unocss to build css.
Added unocss library to load utilities.

0.2.x Libraries

Starterkit provides a mix of global and individual libraries in /css/components.

Global CSS
Global css is moved into /libraries/global/component, since they are all in the component layer. Base, layout, theme, and state directories and empty css files are added. Each of these directories is bundled by vite into base.css, layout.css, etc., which are loaded into those css layers in the global library instead of listing the individual files in there. This makes it easier to know where the files are being loaded as you edit them.

Component CSS
Component libraries are loaded individually in templates with {{ attach_library }}.
These are moved into /libraries/components, where they are bundled individually for separate loading when needed. It may make sense to replace these libraries with components.

Requirements

Vite module.

TODO

Testing, documentation and usage examples.
Opinionated starter theme.
Subtheming/update process.
Design System/Storybook integration.
Hot reloading twig files.
Convert component libraries to SDC.
Provide layouts.