SLASHED

Description

SLASHED loads a complete CSS framework on any WordPress site — no build step, no Node, no JavaScript on the frontend. You restyle the whole site by setting a handful of design tokens; the framework derives every color, dark-mode value, and fluid type and spacing scale from them in plain CSS.

The plugin enqueues the framework and wires it into the editors you use, so you pick tokens and classes from a list instead of typing them by hand. Bricks Builder gets the full toolset; Gutenberg gets presets and a token panel.

Design Settings

A visual editor for every token — brand and status colors, typography, spacing, borders, shadows, fluid scales, z-index — built into WordPress at SLASHED → Design Settings, with a live light/dark preview. You only ever set validated token values; there is no raw-CSS field.

Set six brand colors (primary, secondary, tertiary, action, neutral, base) and five status colors (success, warning, error, info, danger), each with an optional separate dark value, and the framework recolors itself. Hover and active states, tints, shades, and tonal steps are all computed for you.

The same editor runs as a standalone web app at https://slashed.codeslash.dev/configurator for designing without logging in. «Open in configurator» launches it preloaded with your current tokens; «Import shared config» pulls a shared design back in from a code or link.

Bricks Builder

Enable the Bricks integration and the framework shows up natively in the builder:

• Token pickers. Every SLASHED variable is registered with Bricks’ variable pickers and code-editor autocomplete, grouped by category. Color tokens show a swatch resolved for both light and dark.
• Class autocomplete. Every SLASHED class is added to the Bricks class input — layout, macros, components, and utilities under «SLASHED Layout», and .is-* state classes under «SLASHED State». The list is read from the CSS bundle you actually loaded, so it always matches.
• Color System panel. A floating, in-builder browser for the full color palette, organized by family and tone, with a light/dark canvas toggle. Click a swatch to copy its variable and apply it to the selected element’s background, text, or border.
• Class hints. With hints enabled, a ? icon next to each SLASHED class explains what it does and which category it belongs to. The icon is the only trigger, so it never covers Bricks’ own controls.
• reBEMer. A BEM class manager in the structure panel. Select an element, name the block, and reBEMer generates clean block__element / block--modifier names across the whole subtree in one pass. It supports add, rename, replace, add-modifier, and migrate-ID-styles modes, auto-numbers colliding siblings, and won’t shadow reserved SLASHED classes. It never deletes a global class.
• Dark mode bridge. The Bricks dark-mode toggle drives the SLASHED dark palette.

Gutenberg

Enable the Gutenberg integration and you get:

• Framework CSS in the editor canvas and on the frontend.
• SLASHED colors, gradients, font sizes, and spacing registered as native editor presets. On block themes this flows through theme.json automatically — no custom theme.json needed.
• A floating token panel to browse and apply colors and gradients to the selected block, toggle SLASHED classes, and copy variables.
• A dark mode bridge: the editor’s dark-mode toggle drives the SLASHED dark palette.

reBEMer and class autocomplete are Bricks-only.

Dark mode, no JavaScript

Dark mode runs entirely in CSS:

• Follows the operating-system setting by default.
• data-theme="dark" forces dark for an element and its descendants.
• data-theme="light" carves a light section out of a dark page.

A single dark section inside a light page — or the reverse — works with no script.

CSS bundles

Pick the bundle that fits the project on the settings page:

• Optimal (recommended) — tokens, CSS reset, base element styles, light/dark themes, layout primitives (container, stack, grid, cluster, sidebar, switcher, cover, center, frame, reel), macros (prose, flow, truncate, aspect, scroll-shadow), interaction states, motion, accessibility, print, and classless form styling.
• Optimal + Components — adds prebuilt components: buttons, badges, tags, cards, tables, form rows, and loading skeletons, with status and style modifiers.
• Optimal + Utilities — adds utility classes: object-fit, a z-index scale, text balancing, and animation helpers (spin, ping, blink, shimmer, float).
• Full — everything above.

All bundles ship with the plugin and load locally from the plugin’s own folder — no external requests are made to render your site. New framework CSS arrives through normal plugin updates.

Predictable overrides

SLASHED puts every rule in a named CSS cascade layer with a fixed order, so a later layer always wins regardless of selector specificity. Your token overrides land in the top layer, so they beat framework defaults without !important or specificity hacks.

Browser support

SLASHED targets Chrome 125+, Safari 18.0+, and Firefox 129+. It uses light-dark(), relative-color oklch(), @property, and scroll-driven animations with no fallback. Older browsers are not supported.

Open source

The framework is developed at https://github.com/codeslash-dev/SLASHED.

External services

The plugin works entirely on your own server: the framework CSS is bundled with the plugin and served locally, and the plugin makes no automatic or background calls to any external service. It does not phone home, and it does not collect, send, or track any data.

The plugin does link to one optional external tool, which is only ever opened when you explicitly choose to use it:

The SLASHED Configurator (https://slashed.codeslash.dev/configurator/)

• What it is and what it’s for: a hosted web app, run by the plugin author, for designing your SLASHED token set outside of WordPress. It is entirely optional — the same editor is built into the plugin at SLASHED → Design Settings, so you never need to leave your site.
• What data is sent and when: nothing is sent automatically, and the plugin never contacts it in the background. Clicking «Open in configurator» opens the tool in a new browser tab with your current design tokens (color, spacing, typography and similar non-personal style values) encoded in the URL fragment — the part after «#», which browsers keep on your device and do not transmit to the server. «Import shared config» simply loads a design code that you paste in. No personal data, site content, or credentials are sent, and no account is required. As with visiting any website, the host may record standard web-server access logs (such as IP address and request time) when the page loads.