Automatic.css – WordPress Plugin

Automatic.css is a WordPress plugin and CSS utility framework built for page builders such as Bricks, Oxygen, Gutenberg, Breakdance, and other supported builders. It helps designers, developers, freelancers, and agencies create faster, cleaner, and more consistent websites by using a structured design system instead of writing repeated custom CSS.

The plugin provides global design tokens for colors, typography, spacing, buttons, forms, grids, and layout elements. Users can manage these settings from one dashboard and apply them across the full website for better consistency and easier maintenance. In addition, Automatic.css uses fluid responsive spacing and typography based on mathematical scales, which helps websites adapt smoothly across desktop, tablet, and mobile devices.

Automatic.css also includes utility classes for flexbox, grid layouts, containers, margins, padding, and responsive design controls. Features such as automatic grids, smart content spacing, focus styling, clickable parent elements, and header offset tools help solve common layout and accessibility problems with less manual work. It also supports SCSS mixins, auto-BEM methods, and automatic REM conversion for faster development workflows.

The plugin focuses on maintainability and scalability, so users can update branding, spacing, and layout systems across the entire website from one place. This WordPress CSS framework works well for business websites, WooCommerce stores, landing pages, agency projects, and custom client websites.

Key Features

Global Design System

Manage colors, typography, spacing, buttons, and layout settings from one dashboard for full website consistency.

Fluid Responsive Typography

Use fluid text sizing and responsive typography scales that adjust smoothly across all screen sizes.

Smart Spacing System

Apply spacing based on mathematical scales for balanced layouts and consistent visual rhythm across the website.

Grid and Flex Layout Tools

Build responsive layouts using utility classes for grids, columns, flexbox, containers, and layout alignment.

Automatic Grids

Create responsive grid systems with fewer breakpoint issues using built-in auto grid controls.

Accessibility Features

Improve usability with focus styling, clickable parent elements, and better accessibility controls for forms and navigation.

Auto-BEM Support

Use structured class naming and maintain cleaner project organization with built-in Auto-BEM workflow tools.

SCSS Mixins

Speed up advanced styling tasks using ready-made SCSS mixins for overlays, buttons, focus states, and layouts.

Automatic REM Conversion

Convert pixel values into REM units quickly without manual calculations for cleaner responsive design.

Builder Compatibility

Work with Bricks, Oxygen, Gutenberg, Breakdance, and other supported WordPress page builders for flexible development.

Request a Theme or Plugin

If you’re looking for a specific WordPress theme, plugin, script, or design tool that isn’t currently listed on Spodly, don’t worry! We have a large library of themes and plugins available.
You can request any item you need using our product request form.