nb/d11_theme_reqirements.md

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.