Starters

Starters are minimal projects with SpiraCSS project configuration already set up (Stylelint / HTML CLI, etc). If you want to use VS Code extensions for SCSS generation and @rel navigation, install them in your editor.

What you can try

• SpiraCSS class structure (Block/Element, one Block per SCSS file)
• Variant and state patterns (data attributes by default)
• HTML -> SCSS generation (VS Code extension / HTML CLI)
• Stylelint rule checks and error messages
• @rel comment navigation (with the Comment Links extension)

Basics

• SCSS structure reference: spiracss-scss-structure

List

Stack	Starter	Markup	SCSS loading
Vanilla	spiracss-starter-vanilla	Plain HTML	Entry SCSS linked in HTML
Eleventy	spiracss-starter-eleventy	WebC templates + includes	Compiled CSS linked from templates
Astro	spiracss-starter-astro	Astro components	Entry SCSS imported from layout + entry files
Next.js	spiracss-starter-next	React components	Global SCSS + CSS Modules
Next.js	spiracss-starter-next-global	React components	Global SCSS only
Nuxt	spiracss-starter-nuxt	Vue components	Global SCSS + scoped SCSS