# D11 theme set up

What I would recommend for your stack
Core stack
Reset / normalize

Use:

Modern Normalize

Very small and sensible.

Design tokens / vars

Use either:

your own variables
or selectively import from Open Props

Open Props

You do not need the whole library.

You can literally copy only the tokens you want.

Example:

:root {
--font-sans: system-ui, sans-serif;

--size-1: 0.25rem;
--size-2: 0.5rem;
--size-3: 1rem;
--size-4: 1.5rem;

--radius-2: 8px;

--surface-1: #ffffff;
--surface-2: #f5f5f5;

--text-1: #111;
--text-2: #555;

--brand: hsl(210 90% 50%);
}

That alone gets you surprisingly far.

Native CSS nesting is now good enough

You can now do:

.card {
padding: var(--size-4);

& h2 {
margin-block-start: 0;
}

& a {
color: var(--brand);
}
}

No Sass needed.

Browser support is now solid.

Cascade layers are a huge replacement for old Sass architecture

This is one of the biggest modern CSS improvements.

@layer reset, tokens, base, layout, components, utilities;

Then:

@layer base {
body {
font-family: var(--font-sans);
}
}

This gives you predictable override behavior without specificity nightmares.

Honestly better than many old Sass architectures.

Container queries are transformative for Drupal theming

Instead of:

@media (min-width: 900px)

you can do:

@container (min-width: 40rem)

This is fantastic for:

paragraphs
blocks
views
reusable Drupal components

because components respond to their container, not the viewport.

That maps beautifully to Drupal’s block-based structure.

Suggested file structure

Something like:

css/
reset.css
tokens.css
base.css
layout.css
components/
buttons.css
cards.css
forms.css
navigation.css

Then load in your .libraries.yml.

Very maintainable.

I would honestly skip Pico entirely then

Given what you just said, I think you may actually prefer:

normalize/reset
your own tokens
semantic HTML
native CSS features
tiny component CSS

instead of Pico.

Because Pico is opinionated.
You may eventually find yourself undoing its typography/layout assumptions.

Whereas your own token system:

stays tiny
teaches future-you exactly how the site works
avoids framework drift
keeps Drupal Twig very clean
Modern CSS features worth embracing immediately

These are absolutely worth using now:

clamp()
font-size: clamp(1rem, 2vw, 1.5rem);
logical properties
margin-block: 1rem;
padding-inline: 2rem;

Much cleaner than top/right/bottom/left.

:where()

Low-specificity selectors:

:where(article, section, aside) h2 {
margin-top: 0;
}

Excellent for maintainability.

color-mix()
background: color-mix(in srgb, var(--brand), white 90%);

Incredibly useful.

Tooling I would still keep

Even without preprocessing, I’d still consider:

Vite only for:
live reload
JS bundling
asset handling

NOT CSS transforms.

Or skip even that initially.

Modern Drupal theming can genuinely be:

CSS files
ES modules
libraries.yml
done.

And that’s refreshing compared to the old webpack/gulp era.

This approach fits Drupal especially well

Drupal’s strengths are:

semantic HTML
server rendering
reusable structured content
progressive enhancement

A lightweight native CSS architecture aligns with that extremely well.

You avoid importing frontend-app complexity into a CMS that doesn’t necessarily benefit from it.

──────────────────────────────────────────────────────────────────