Customize

Customize Rasuke from the source kit. Do not edit compiled bundles or scattered hex values.

Colors, type, and spacing

1. Open rasuke-html-dev/tokens/tokens.json.
2. Change the value (colors need both light and dark when they differ).
3. Run npm run tokens (or just npm run dev / npm run build — it runs automatically).
4. Use the resulting var(--token-name) in SCSS.

See Design Tokens for the pipeline and Colors / Typography for the public variable names.

Add a page

1. Create src/pages/{name}.html with {% extends "layouts/base.njk" %}.
2. Set title, description, and bodyClass. Add colorScheme only to pin a mode, headerPartial / footerPartial to change the chrome, and preloaderEnabled = false if the page should not preload.
3. Include one section per design block inside {% block content %}.
4. Link the page from the navigation data (src/data/navPrimary.json, navHeader2.json / navHeader4.json, offcanvasMenu.json) if it belongs in navigation.

Vite picks up every src/pages/*.html automatically — no config change is needed.

Add a section

1. src/sections/{group}/{name}.njk — semantic HTML, first child of <section> is exactly one .container.
2. src/assets/scss/sections/{group}/_{name}.scss — starts with @use "../../abstracts" as *;, then the block class. Values only from var(--…) tokens (1px/2px hairlines excepted); any geometry/duration the JS needs goes in layout.* tokens so SCSS and JS read the same number.
3. @forward "{name}"; in that folder's _index.scss (and @use "sections/{group}"; in main.scss for a brand-new group).
4. Optional: src/data/{name}.json for looped content, and src/assets/js/{name}.js exporting one init{Name}() that no-ops when its markup is absent; import and call it from main.js (respect prefers-reduced-motion like the existing modules).
5. {% include %} the section from the page, then run npm run lint:fse.

Layout mixins: @include container;, @include section-space(var(--space-12), var(--space-10));, @include grid-auto(18rem);, @include grid-columns(3);, @include media-up(lg) { … }, @include visually-hidden;.

Content data

Add src/data/{key}.json. It becomes {{ key }} / {% for item in key %} in every template. Prefer loops for long lists (projects, services, FAQs, team…); hardcoded markup is fine for one-offs. Global chrome toggles live in preloader.json, cursor.json, and transition.json; site-wide values (name, description, logo) in site.json.

Images

Put design assets in src/assets/imgs/{section}/, not in dist/. Prefer optimized .webp files at 2× the displayed frame size. Reference them as assets/imgs/… so the flat dist/ output still works from disk. Helper converters live in scripts/convert-*-images.mjs (sharp).

Global features on/off

• Preloader: src/data/preloader.json (enabled, wordmark, statuses, oncePerSession / sessionKey), per page {% set preloaderEnabled = false %}.
• Custom cursor: src/data/cursor.json, per page cursorEnabled.
• Page transition: src/data/transition.json (enabled, prefetch), per page transitionEnabled.
• Smooth scroll: created in main.js; a host page can disable it via window.rasukeCore = { smoothScroll: false } (the WordPress runtime uses this), and it is always skipped for prefers-reduced-motion.