Jetzt neu und frisch, besser vom Niederrhein. 
KLXM Studio – Home
Get in touch

Agencies & network · Advanced · 0:52 min

Your own kit with the start kit

kit:create copies the start kit “starter” – then adjust, build, test.

No sound, with subtitles German and English subtitles – switch them on and off with “CC” in the player. The video is hosted on this server and only loads when you press play. The steps below are the full text of the video.

Goal

You create your own kit for a project, based on the smallest complete kit, and know which steps follow.

Prerequisites

  • Access to the command line and the themes/ folder (locally or on the server).
  • Node/pnpm for the build (local only).

Step by step

Transcript: every step matches one subtitle in the video.

  1. Your own kit for a project: “kit:create” copies the start kit and renames everything.
  2. The output lists the new folders and the next steps: adjust, build, test, check.
  3. The start kit is the smallest complete kit: six example blocks, light and dark, one accent colour.
  4. You set colours, fonts and navigation under Design as usual – the values are design tokens of the kit.
  5. theme.php is divided into sections § 1–11. The guide: technical documentation › kits & design.

Commands & configuration

php bin/console kit:create kanzlei                 # Kopie von themes/starter, Präfix starter_ → kanzlei_
cd tools && pnpm run build
php bin/console site:create kunde www.kunde.de kanzlei
php bin/console health --site=kunde
php themes/kanzlei/tools/contrast.php

Tips & pitfalls

Tip

kit:create name --from=basis uses another kit as the template.

Tip

Check the home-page budget: CSS < 30 KB, JS < 8 KB (start kit ≈ 15.7 KB / 0.4 KB).

Watch out

Rebuild after changes to assets/ – public/themes/{name}/ only contains the built files.

Watch out

Do not change the start kit itself – it is the template for kit:create and is replaced by updates.