PHPackages                             drupalninja/drupalx-project - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Framework](/categories/framework)
4. /
5. drupalninja/drupalx-project

ActiveProject[Framework](/categories/framework)

drupalninja/drupalx-project
===========================

Drupal 11 + Canvas (Experience Builder) project template with drupalx\_theme — a Tailwind v4 Single-Directory-Component library and a Twing static preview pipeline.

1.18.2(1y ago)311876GPL-2.0-or-laterJavaScriptCI passing

Since Jun 20Pushed 1mo ago2 watchersCompare

[ Source](https://github.com/nextagencyio/drupalx-project)[ Packagist](https://packagist.org/packages/drupalninja/drupalx-project)[ RSS](/packages/drupalninja-drupalx-project/feed)WikiDiscussions main Synced 1w ago

READMEChangelogDependencies (14)Versions (14)Used By (0)

DrupalX
=======

[](#drupalx)

A modern Drupal 11 project template built around **Canvas (Experience Builder)** and **drupalx\_theme** — a Tailwind v4 Single-Directory-Component library with a real design system: editorial display type, a token-driven brand palette, glass-panel heroes, big-number stat bands, and card grids with polished hover states. Editors compose landing pages from the component library in Canvas; the design system's guardrails (enums, slots, schema-validated props) keep every page on-brand.

**`ddev install` lands a complete five-page demo site** — Home, About, Services, Contact, plus a Component library page showing every component — so you see the theming system working before you write a line of code.

Requirements
------------

[](#requirements)

- [DDEV](https://ddev.readthedocs.io/) (Docker-based local dev)
- Node 20+ on the host (only needed when changing the theme or using the static preview — the committed `dist/` means Drupal runs without it)

Quick start
-----------

[](#quick-start)

```
git clone https://github.com/nextagencyio/drupalx-project.git
cd drupalx-project
ddev start
ddev install
```

Log in with `admin` / `admin`. Every demo page is a Canvas page — open **Content → Pages** and click **Edit** to compose with the component library (drag components, fill in form fields, nest cards into grids).

What's inside
-------------

[](#whats-inside)

PieceWhat it is`web/themes/custom/drupalx_theme/`The component library: 24 SDCs (heroes, stat bands, card grids, splits, CTAs, quotes, galleries, accordions, alerts, news/event cards, document lists + primitives), Tailwind v4 CSS-first tokens, self-hosted variable fonts (Inter + Fraunces), and a curated build-time Lucide icon set — no CDNs anywhere.`web/themes/custom/drupalx_theme/COMPONENTS.md`Generated reference for every component: props, enums, required fields, slots.`recipes/drupalx_canvas/`The site recipe: Canvas modules, dx\_image, the theme, registered component configs, responsive image styles, and the five-page demo content.`web/modules/custom/dx_image/``dx_image()` Twig function — serves width-stepped WebP derivatives (300–1600w) for managed images automatically.`frontend/`A Twing-powered static preview: live-reload dev server that renders the *same* component Twig outside Drupal, plus a static-site build you can deploy anywhere.The theming system
------------------

[](#the-theming-system)

All brand decisions live in one place — `web/themes/custom/drupalx_theme/src/css/global.css`:

- **`@theme` tokens**: a full `primary` 50–900 scale, a warm `accent`scale, and two secondary **wayfinding families** (`sky`, `clay`) used to color-code cards, stats, and tags so pages don't read single-hue.
- **Type**: Inter (UI) + Fraunces (display serif), self-hosted as variable fonts; fluid display scales (`.display-hero`, `.display-xl`).
- **Design primitives**: `.spark-card` (lift + accent-bar + arrow-slide hover), `.spark-dropdown` (hover-intent nav), `.brand-glow` dark bands, scroll-reveal, an accessible focus ring, and two-tier container widths.

To rebrand: recolor the token block, swap the `@fontsource` packages and `logo.svg`, then:

```
cd web/themes/custom/drupalx_theme
npm install
npm run build     # icons + fonts + Tailwind CSS + JS → committed dist/
```

Site chrome strings (tagline, header CTA, footer contact) are theme settings — no template edits:

```
ddev drush config:set drupalx_theme.settings dx_tagline "Your tagline" -y
```

Building components
-------------------

[](#building-components)

Each component is a Single-Directory Component under `web/themes/custom/drupalx_theme/components//`:

```
components/card/
├── card.component.yml   # schema: props, enums, slots — this drives the Canvas edit form
└── card.twig            # Tailwind markup

```

1. Copy an existing component as a starting point (see `COMPONENTS.md`for the catalog and `AGENTS.md` for the schema conventions).
2. Rebuild the theme (`npm run build`) so Tailwind picks up the new markup's classes.
3. `ddev drush cr` — Canvas discovers the component and it appears in the editor's library.

The static preview (`frontend/`)
--------------------------------

[](#the-static-preview-frontend)

Design components without Drupal in the loop:

```
cd frontend
npm install
npm run dev        # http://localhost:5050 — live reload on twig/data edits
npm run validate   # checks demo pages against the component schemas
npm run build      # static dist/ build, deployable to any static host
```

The dev server renders the same demo pages from plain data files (`site/pages-data/*.cjs`) using the same Twig components Drupal uses, and rebuilds the theme's CSS on every change — edit a component and see it in milliseconds.

License
-------

[](#license)

GPL-2.0-or-later, like Drupal itself. Demo photography is from [Unsplash](https://unsplash.com/license).

###  Health Score

40

—

FairBetter than 86% of packages

Maintenance67

Regular maintenance activity

Popularity23

Limited adoption so far

Community11

Small or concentrated contributor base

Maturity48

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~145 days

Total

3

Last Release

330d ago

Major Versions

1.18.2 → 10.x-dev2025-06-07

10.x-dev → 11.x-dev2025-09-22

### Community

Maintainers

![](https://www.gravatar.com/avatar/23e37b1ecb5973dbb1a3b1be781229da7602aee47963477ba49fcc353e3e04eb?d=identicon)[drupalninja](/maintainers/drupalninja)

---

Top Contributors

[![nextagencyio](https://avatars.githubusercontent.com/u/1112449?v=4)](https://github.com/nextagencyio "nextagencyio (10 commits)")

### Embed Badge

![Health badge](/badges/drupalninja-drupalx-project/health.svg)

```
[![Health](https://phpackages.com/badges/drupalninja-drupalx-project/health.svg)](https://phpackages.com/packages/drupalninja-drupalx-project)
```

###  Alternatives

[govcms/govcms

GovCMS Drupal Distribution

200103.6k3](/packages/govcms-govcms)[pressbooks/pressbooks

Pressbooks is an open source book publishing tool built on a WordPress multisite platform. Pressbooks outputs books in multiple formats, including PDF, EPUB, web, and a variety of XML flavours, using a theming/templating system, driven by CSS.

45844.8k1](/packages/pressbooks-pressbooks)[fourkitchens/sous-drupal-project

Starter project for Sous a Drupal distribution featuring a theme based on Emulsify Design System.

141.1k](/packages/fourkitchens-sous-drupal-project)[az-digital/az_quickstart

Arizona Quickstart

52296.5k4](/packages/az-digital-az-quickstart)[vardot/varbase-project

Project template for Varbase distribution.

5162.6k](/packages/vardot-varbase-project)[ec-europa/toolkit

Toolkit packaged for Drupal projects based on Robo.

39255.4k37](/packages/ec-europa-toolkit)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)