divi-5-css-patternslisted

Use this skill when writing CSS for Divi 5 / Divi 5.6, styling Divi modules (buttons, sections, rows, blurbs, toggles, forms including the 5.3 Contact Form 7 Styler), the five 5.6 modules (Timeline, Breadcrumbs, SVG, Table of Contents, Instagram Feed), working with Free-Form CSS and the `selector` keyword, overriding `.et_pb_*` classes, setting up design tokens or dark mode, using the 5.4 Sizing Variable Generator or Relative Colorscheme Generator, applying the 5.5 Aspect Ratio / Framing settings, adding animations with reduced-motion, styling WooCommerce with Divi, the 5.3 pseudo-class editing modes (:checked, :focus, :active), Nested Option Presets, building accessible layouts, or developing a Divi child theme. Provides CSS patterns, class naming conventions, selector specificity guidance, Composable Settings alternatives, Canvas and Loop Builder patterns, and full example files for buttons, design tokens, animations, dark mode, WooCommerce, accessibility, forms, Loop Builder, and the 5.6 new modules.
cjsimon2/Divi5-ToolKit · ★ 38 · Web & Frontend · score 76

Install: claude install-skill cjsimon2/Divi5-ToolKit

# Divi 5 CSS Development Patterns ## Overview **Divi 5** (released February 26, 2026, current version 5.6.0 as of May 25, 2026) is a complete architecture overhaul: - **React 18-based Visual Builder** — no Shadow DOM, standard DOM with `et_pb_*` classes - **Flexbox-first layout** — sections, rows, columns use Flexbox by default - **Native CSS Grid support** — convertible from Flexbox in builder; 5.6 added full CSS track values (`grid-auto-columns`, `grid-auto-rows`) - **Design Variable Manager** — 6 variable types (Colors, Fonts, Numbers, Images, Text, Links) - **Preset System** — Option Group, Element, Stacked, and Nested presets. 5.3 added **Nested Option Presets** (presets within presets, e.g., CTA > Button > Border) - **Block-based storage** — JSON format, no shortcodes - **7 responsive breakpoints** — 3 active by default, 4 optional - **Dynamic CSS** — 94% smaller stylesheets, per-page CSS generation. Per-module components combine into a unique per-page stylesheet. - **Critical CSS + Inline Stylesheets** — auto-extracted above-the-fold CSS inlined; non-critical deferred. Together they eliminate render-blocking CSS. - **Composable Settings (5.2)** — toggle any design option on any sub-element, reducing CSS needs - **Canvas System** — local/global canvases for off-canvas menus, popups, staging areas - **Canvas Portal Module** — inject canvas content at specific layout locations - **Interaction Builder** — cross-canvas interactions with Click, Mouse, Viewport, Load trigge