Astrobase

Astro starter · v0.1.0

A starter you can actually launch from.

Astrobase pairs an opinionated Astro setup with an in-house CSS framework built on OKLCH, fluid type, and fluid spacing. Clone it, tune override.scss, push. That's the whole workflow.

Browse components → Style guide

What's inside

OKLCH color engine

10 families × 7 shades generated from a single base lightness + chroma. Perceptual uniformity baked in. Hover states derived at runtime via CSS relative colors.

Fluid spacing + type

Every --space-* and --text-* token is a clamp() between mobile and desktop breakpoints. Set a base value and a scale ratio; the rest falls out.

Three-layer SCSS

framework.scss stays pristine. override.scss tunes per project via @use … with(). base.scss is opt-in reset. Pull framework updates without losing your brand.

Get going

  1. Clone the repo.
  2. Edit css-framework/framework-import/override.scss to set brand colors, fonts, gutters.
  3. Build pages under astro/src/pages/.
  4. npm run dev locally; git push to deploy.

Ready to build?

Clone the starter and see how little configuration it takes to ship something clean.

See components Style guide