W3CSS Theme is a free, root-level Drupal theme with 22 placeable regions and 50 predefined colour schemes, built directly on the W3.CSS framework rather than Bootstrap or a page-builder library. Its core_version_requirement is ^9 || ^10 || ^11 || ^12, so it installs on any currently supported Drupal core, and it is the base theme three published sub-themes build on.
What W3CSS Theme is
The project's own machine name is drupal8_w3css_theme — packaged on drupal.org as d8w3css — and its .info.yml names it W3CSS Theme V2. It was the first Drupal theme built on the W3.CSS framework, and the design brief has stayed the same since version 1: plain CSS, no jQuery, no JavaScript dependency for layout, and a theme-settings page that does the styling work a site builder would otherwise hand-code.
Version 3 of this idea now exists as a separate project, Solo. W3CSS Theme V2 is not deprecated — it is still maintained, it is the base theme for the sub-themes below, and plenty of sites run it in production — but if you are starting a new build with no existing investment in it, read the Solo page too before deciding.
Requirements, read from the source
| Fact | Value |
|---|---|
| Drupal core | ^9 || ^10 || ^11 || ^12 |
| Composer package | drupal/d8w3css |
| Base theme | false — this is a root theme, not a sub-theme of anything |
| Declared regions | 22, counted directly from the regions: block |
| Sub-themes built on it | Amun, Amunet, Anhur — each declares base theme: drupal8_w3css_theme |
That last row matters because the theme's own description text still promotes Solo heavily, and it would be easy to assume the three sub-themes moved with it. They did not: each sub-theme's .info.yml names drupal8_w3css_theme as its base theme, not Solo. If you are building on Amun, Amunet or Anhur, this is the theme underneath them.
What you get
22 regions across a top, main and bottom structure
The region list runs from a header and two menu regions (horizontal or vertical) through three flexible top containers, the main content with two sidebars, four flexible bottom containers, and three flexible footer containers plus a footer menu region. Each flexible group divides its available space evenly by however many of its regions you actually fill — put three blocks in the top containers and you get an even three-column band; put one, and it runs full width.
50 predefined colour schemes
Counted directly from the theme's own list — not estimated — the theme ships 50 named colour schemes, from Charcoal Gray to Obsidian Cascade to Twilight Ash Mystique. Selecting one from theme settings recolours backgrounds, hover states, text, links and buttons across 26 separate colour fields, without writing CSS. The theme documents 11 additional colour libraries — Camouflage, European Signal, Fashion, Flat UI, Food, iOS, Metro UI, US Highway, US Safety, Vivid and Win8 — for building unlimited custom themes beyond the 50 shipped ones; that count comes from the theme's own documentation and has not been independently verified against the CSS source.
Fonts, animation and layout controls
Theme settings expose a website-width control with eight preset breakpoints (from 800px up to 2560px, plus a full-width option), a choice between a horizontal main menu and a vertical side nav, and a large bundled font and text-animation library — the theme's own documentation lists 101 font options and 24 CSS text-animation effects, figures I am reporting from the project's stated features rather than a file count I ran myself. What I can confirm directly from the source: the theme hides any region you leave empty rather than printing an empty wrapper div, and it keeps the markup shallow — no nested nest of nested divs around your content.
CKEditor styling, in and out of the editor
The theme declares both ckeditor_stylesheets and ckeditor5-stylesheets in its .info.yml, pointing at css/theme/w3-ckeditor-iframe.css and css/theme/w3-ckeditor5.css. That means the WYSIWYG editing area — under either CKEditor 4 or CKEditor 5 — is styled to match the live page, so an editor is not guessing how a heading or a blockquote will actually render.
Sub-themes built on this theme
Three published sub-themes extend W3CSS Theme directly, each with a different navigation pattern and each declaring the same ^9 || ^10 || ^11 || ^12 core support:
- Amun — sticky horizontal menu, user menu and search icon at the top
- Amunet — an invisible vertical menu that opens from a button on the left
- Anhur — a fixed vertical menu that stays visible on the left
The project also ships its own blank starter sub-theme, drupal8_w3css_subtheme, with no navigation opinion at all — a clean base if none of the three above fits and you want to build your own layout on top of W3CSS Theme rather than override the root theme directly.
Installation
composer require drupal/d8w3cssEnable it and set it as the default theme:
drush theme:enable drupal8_w3css_theme
drush config:set system.theme default drupal8_w3css_theme -y
drush crOr through the admin interface: go to Appearance, find W3CSS Theme V2, and choose Install and set as default.
Configuration
- Website width
- Pick a preset from 800px to 2560px, or full width.
- Main menu style
- Horizontal in the primary region, or vertical side nav — not both at once.
- Colour scheme
- One of the 50 shipped schemes, or a custom theme built from the colour libraries.
- Fonts and text animation
- Global, heading and special-use fonts, plus optional animation classes for the site name, page title or any element.
- Social media links
- Up to eight configurable icons, no contributed module required.
W3CSS Theme or Solo?
| Consideration | W3CSS Theme V2 | Solo |
|---|---|---|
| Generation | Second — still maintained | Third, current development focus |
| Regions | 22, measured | 24 placeable, per the Solo page |
| Sub-themes | Amun, Amunet, Anhur build on this theme | Its own line of sub-themes |
| Best for | Sites already running it, or a build that needs Amun/Amunet/Anhur | A new build with no existing theme investment |
Common questions
Is W3CSS Theme still maintained?
Yes. It receives updates and is the base theme for Amun, Amunet and Anhur, all of which declare it — not Solo — in base theme.
Do I need jQuery or a JavaScript framework?
No. W3.CSS is plain CSS. The theme previously used jQuery for equal-height blocks and has since moved that behaviour to CSS Flexbox.
Should I pick this or Solo for a new site?
If you have no reason to prefer one of Amun, Amunet or Anhur specifically, read the Solo page — it is where new development is focused. If you need one of those three sub-themes, this is the theme underneath them.
Does it work with Paragraphs for richer layouts?
Yes, via the companion W3CSS Paragraphs module, which is built on the same W3.CSS framework and installs alongside this theme.
Need help building on W3CSS Theme?
W3CSS Theme is free and GPL-licensed, like all my contributed work. If you are running it in production, planning a sub-theme, or weighing a move to Solo, that decision is easier with someone who maintains both projects.
Read about my Drupal services, see what a Drupal themer actually does, or get in touch to talk about your project.
