[nb] Edit: d11_theme_reqirements.md

d11_theme_reqirements.md

@@ -1 +1,208 @@
 # 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.