Skip to main content

Styling

Entry Point​

The main SCSS entry file is:

  • src/themes/reactwp/scss/default.scss

Structure​

The default theme SCSS is organized into:

  • inc/ for permanent base rules and runtime-safe CSS
  • templates/ for page-level or screen-level styles that can be imported on demand

The main entry currently composes:

  • inc/_base.scss

What Lives Where​

Typical responsibilities are:

  • inc/_base.scss: resets, shell sizing, smooth-scroll states, and the CSS that should remain even if you remove the starter visuals
  • inc/_variables.scss: simple SCSS path variables such as $font_path and $image_path
  • inc/_functions.scss: reusable SCSS helpers such as the viewport unit functions (vw, vh, svw, dvh, and related helpers)
  • inc/_mixins.scss: a placeholder file for project-level SCSS mixins
  • inc/_font-face.scss: a placeholder file for custom @font-face declarations
  • templates/*: screen or page styles that can be imported directly from the matching React template

What Is Loaded By Default​

ReactWP keeps the default SCSS entry intentionally light.

Today, default.scss only loads:

  • inc/_base.scss

That means:

  • variables, functions, mixins, and font-face are available as starter scaffolding
  • but they are not imported automatically into the compiled theme stylesheet
  • if a project wants to use them, it should opt into them explicitly

Example:

@use './inc/functions' as *;
@use './inc/font-face';
@use './inc/base';

This keeps the CSS baseline smaller while still shipping the helper files many projects expect to find in a starter.

SCSS Helper Files​

inc/_variables.scss​

This file currently exposes lightweight path variables:

  • $font_path
  • $image_path

Use it when you want a central place for asset-relative SCSS values.

In the default theme pipeline, those paths are intended to resolve from the compiled stylesheet in assets/css/, so they point to:

  • ../fonts/
  • ../images/

That means a font file stored in:

  • src/themes/reactwp/medias/fonts/PPNeueMontreal-Regular.woff2

is expected to end up in:

  • dist/wp-content/themes/reactwp/assets/fonts/PPNeueMontreal-Regular.woff2

The theme style pipeline copies theme media directories from src/themes/<theme>/medias/ into the matching dist/.../assets/ folders before Sass output is written.

In prod, the same pipeline also optimizes copied .jpg, .jpeg, .png, .gif, .webp, and .svg files in place through Sharp and SVGO.

Fonts, audio, video, and other copied assets are still copied as-is. ReactWP does not transcode them or generate precompressed variants for them during the theme style build.

inc/_functions.scss​

This file contains viewport conversion helpers:

  • vw
  • svw
  • lvw
  • dvw
  • vh
  • svh
  • lvh
  • dvh

These are useful when a project still wants SCSS-side viewport math instead of writing raw viewport units by hand everywhere.

inc/_mixins.scss​

This file is currently empty on purpose.

It exists as a project-level place to collect mixins once a theme actually needs them, instead of forcing a default mixin layer before the project has earned one.

inc/_font-face.scss​

This file is also starter scaffolding.

It is not loaded by default, and the sample code inside it is commented out.

If a project wants to register local font files through SCSS, this is the intended place to do it.

That keeps font declarations out of _base.scss and avoids forcing a typography direction on every new project.

Starter Visual Pack​

The shipped Default and NotFound page visuals are grouped into:

  • src/themes/reactwp/scss/templates/reactwp.scss
  • src/themes/reactwp/scss/templates/reactwp-not-found.scss

Those files are imported directly by:

  • src/themes/reactwp/js/templates/Default.jsx
  • src/themes/reactwp/js/templates/NotFound.jsx

The starter visual direction is deliberately black and white, direct, and editorial. It uses compact, medium-weight headings, hard contrast, open sections, and meaningful rules instead of oversized display type or a grid of generic cards. The Default and NotFound templates share that visual language but keep separate stylesheet ownership, so a project can replace either screen without touching the permanent base entry.

Official ReactWP Marks​

The two official SVG files are the only source of truth for the ReactWP identity:

  • src/themes/reactwp/medias/images/reactwp-mark.svg is the compact mark
  • src/themes/reactwp/medias/images/reactwp-wordmark.svg is the full wordmark

The documentation site keeps byte-for-byte copies in static/img/reactwp-mark.svg and static/img/reactwp-wordmark.svg. Its favicon uses the compact mark, while navigation and larger brand moments use the wordmark.

Render these controlled static files through an <img> element or the site favicon configuration. Add the SVG's intrinsic width and height to every <img> so the browser reserves its aspect ratio before the file loads. Use an empty alt value when the same nearby content already names ReactWP; use alt="ReactWP" when the image carries the brand name by itself. A large pale hero treatment must still use the real wordmark and remain decorative with an empty alternative and aria-hidden="true".

Do not redraw the mark in CSS, substitute a generated monogram, recreate the paths, inline the supplied SVG markup, or load it through raw HTML, <object>, or <embed>. If either supplied SVG changes, review the new file before replacing the controlled static copy.

Keep the same visual rules when extending the starter or documentation surfaces:

  • cap display sizes so the title, lead, and primary action remain visible together
  • prefer regular-to-semibold weights instead of defaulting to 800 or 900
  • let spacing, inversion, typography, and open rows carry the hierarchy
  • add a panel or card only when it represents a real object, state, comparison, or interaction boundary
  • preserve visible keyboard focus with a two-tone black-and-white ring that works on either surface, black-and-white contrast, intrinsic content height, and responsive reflow

Critical Shell Styling​

ReactWP also prints a small amount of critical shell CSS inline from:

  • src/themes/reactwp/template/functions.php

That inline CSS exists to style:

  • the page background
  • #loader
  • the shell containers needed before the compiled stylesheet is available

The rest of the theme styling comes from the compiled stylesheet asset.

Output​

Theme CSS is compiled as a real stylesheet asset, not only injected through JavaScript.

That makes the theme easier to cache, inspect, and reason about.

The default output path is:

  • dist/wp-content/themes/reactwp/assets/css/reactwp.min.css

The main filename stays .min.css in development and production. Development writes expanded CSS; production writes compressed CSS without a source map and also creates .br and .gz siblings.

SCSS imported by a React template is extracted by Webpack into assets/css/chunks/. Development chunk names are stable and production chunk names are content-hashed. WordPress loads initial extracted styles from entrypoints.json; lazy template CSS is requested with its JavaScript chunk.

  • Keep the permanent reset and runtime CSS in scss/inc/_base.scss
  • Treat scss/inc/_variables.scss, scss/inc/_functions.scss, scss/inc/_mixins.scss, and scss/inc/_font-face.scss as helper files you opt into when needed
  • Keep starter-only colors and utility visuals out of the permanent base
  • Keep page or screen-specific styles in scss/templates/
  • Import screen styles from the React template that owns them when you want them to stay easy to remove
  • Import new global partials through default.scss
  • Avoid mixing runtime orchestration concerns into SCSS organization

For the production delivery and caching behavior of these files, see Deployment and Performance.

This keeps styles easier to grow without turning the theme into one oversized stylesheet.