WP Rig’s PostCSS compilation pipeline enables you to write highly structured, modern CSS with powerful design capabilities out of the box.
In this lesson, you will learn how to use pre-defined custom media queries, build an integrated dark mode, and reference theme image assets dynamically inside your stylesheets.
1. Custom Media Queries
Instead of repeating complex, error-prone pixel values inside media queries (e.g., `@media (max-width: 768px)`), WP Rig uses standard-compliant **Custom Media Queries**.
Breakpoints Definition
Usage inside Stylesheets
@media (–medium-query) { .card { width: 50%; } } “`
2. Dynamic Theme Image Referencing in CSS
Referencing images inside your CSS files is notoriously brittle in WordPress because theme URLs change based on site environments. WP Rig provides a custom PostCSS function helper to resolve theme image URLs dynamically!
How to Reference Dynamic Images
3. Built-In Dark Mode Capabilities
Providing a dark mode ensures premium, accessible visual designs. You can implement dark mode easily using native CSS custom properties.
System-Based Dark Mode
“`css :root { –color-bg: #ffffff; –color-text: #1a202c; –color-primary: #3182ce; }
@media (prefers-color-scheme: dark) { :root { –color-bg: #1a202c; –color-text: #f7fafc; –color-primary: #63b3ed; } } “`
Class-Based Toggle
body.dark-mode {
--color-bg: #1a202c;
--color-text: #f7fafc;
--color-primary: #63b3ed;
}By leveraging these built-in CSS capabilities, your design remains modern, fast, and fully responsive across all device sizes and color preferences!