Automatic.css Integration

MisePress outputs stable BEM classes and CSS variables so it can inherit an Automatic.css design system without selector fights.

Enable

Open MisePress → Settings → Modules and keep Automatic.css classes enabled. The option only appears when ACSS is active.

When enabled, MisePress wrappers gain ACSS structural classes (e.g. section-content, gap-m) without losing their misepress__ BEM names. This means ACSS spacing scales apply, while internal styling continues to be themed by --mp- variables.

Recommended token mapping

Add this in your child theme, ACSS custom CSS, or global stylesheet:

:root {
  --mp-color-accent:      var(--action);
  --mp-color-accent-soft: var(--action-light-trans-90);
  --mp-color-bg:          var(--base-ultra-light);
  --mp-color-fg:          var(--base-ultra-dark);
  --mp-color-muted:       var(--base);
  --mp-color-border:      var(--base-light);
  --mp-radius:            var(--radius-m);
  --mp-radius-sm:         var(--radius-s);
}

Once mapped, MisePress cards, badges, and filter bars adopt your ACSS palette and radius automatically — including dark-mode swaps if you've set those up in ACSS.

Typography

MisePress can inherit ACSS font and spacing tokens inside MisePress wrappers only. Configure your scale in ACSS as usual; recipe cards, allergen badges, and filter bars follow your --text-* tokens without styling the theme header, footer, or global navigation.

Common patterns

• Hero accent block. Mix MisePress's [misepress_collection] shortcode inside an ACSS section with bg-action and ACSS spacing tokens.
• Light/dark variants. Re-declare the --mp-* mapping inside your ACSS dark-mode selector.
• Card density. Override --mp-radius and add ACSS gap-s to dense archives without touching MisePress templates.

Disabling

Switch off Automatic.css classes under MisePress → Settings → Modules to revert to plain BEM only.