PHPackages                             drupalninja/drupalx\_theme - 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. [Templating & Views](/categories/templating)
4. /
5. drupalninja/drupalx\_theme

ActiveDrupal-theme[Templating & Views](/categories/templating)

drupalninja/drupalx\_theme
==========================

DrupalX Bootstrap, Storybook starter theme.

1.26(10mo ago)101.2k↓66.7%11GPL-2.0-or-laterJavaScriptCI passing

Since May 31Pushed 10mo ago4 watchersCompare

[ Source](https://github.com/nextagencyio/drupalx_theme)[ Packagist](https://packagist.org/packages/drupalninja/drupalx_theme)[ RSS](/packages/drupalninja-drupalx-theme/feed)WikiDiscussions 1.x Synced 1mo ago

READMEChangelogDependenciesVersions (24)Used By (1)

DrupalX Theme Starter Kit
=========================

[](#drupalx-theme-starter-kit)

[![Cypress](https://github.com/drupalninja/drupalx_theme/actions/workflows/cypress-tests.yml/badge.svg)](https://github.com/drupalninja/drupalx_theme/actions/workflows/cypress-tests.yml)

The DrupalX theme starter kit is intended to be used with the [DrupalX distribution](https://github.com/drupalninja/drupalx-project).

This starter kit includes [Tailwind CSS](https://tailwindcss.com/), [Storybook](https://storybook.js.org/) and full template integration with the DrupalX install profile.

Public Storybook:

Generating the theme
--------------------

[](#generating-the-theme)

The following commands will generate the new custom theme using the DrupalX starter as the template:

```
chmod +x core/scripts/drupal &&
ddev exec --dir /var/www/html/web core/scripts/drupal generate-theme --starterkit=drupalx_theme nameoftheme
```

Enable the new theme:

```
ddev . drush theme:en nameoftheme
ddev . drush config-set system.theme default -y nameoftheme
ddev . drush cr
```

Compiling Theme Assets
----------------------

[](#compiling-theme-assets)

If you haven't yet, install nvm:

Use the right version of node with the following:

```
nvm use
```

*This command will look at your `.nvmrc` file and use the version node.js specified in it. This ensures all developers use the same version of node for consistency.*

If that version of node isn't installed, install it with the following command:

```
nvm install
```

Install npm dependencies:

```
npm install
```

Available Scripts
-----------------

[](#available-scripts)

The theme includes several npm scripts for development and building:

### Development

[](#development)

- `npm run watch`: Run all watch tasks in parallel (Tailwind, components, and stories)
    - `watch:tailwind`: Watch and compile Tailwind CSS changes
    - `watch:components`: Watch and compile component SCSS changes
    - `watch:stories`: Watch and compile Storybook story changes
- `npm run storybook`: Start Storybook development server on port 6006
- `npm run build-storybook`: Build static Storybook site

### Building

[](#building)

- `npm run build`: Run all build tasks (stories, Tailwind CSS, and component compilation)
    - `build:stories`: Build Storybook stories
    - `compile`: Compile theme components

### Linting and Cleaning

[](#linting-and-cleaning)

- `npm run scss-fix`: Fix SCSS/CSS styling issues
- `npm run lint:js`: Lint and fix JavaScript files
- `npm run lint:sass`: Lint SCSS files
- `npm run clean`: Remove all compiled CSS and JS files
    - `clean:css`: Remove compiled CSS files
    - `clean:js`: Remove compiled JS files

### Testing

[](#testing)

- `npm run cypress`: Run Cypress tests

### Git Hooks

[](#git-hooks)

- `npm run postinstall`: Install Husky git hooks
- `npm run prepare`: Install Husky git hooks (alternative command)

### Managing the 'dist' Folder

[](#managing-the-dist-folder)

By default, the .gitignore file does not ignore the dist folder for demonstration purposes. However, in most projects, you will want to ignore this folder.

To do this, you can uncomment the relevant lines in the .gitignore file to ignore the dist folder and its contents. Here are the steps:

#### Update .gitignore:

[](#update-gitignore)

- Open the .gitignore file.
- Find the lines related to the dist folder, which are commented out.
- Uncomment these lines to ensure the dist folder is ignored by Git.

#### Deploying Your Application:

[](#deploying-your-application)

- If you choose to ignore the dist folder, you will need to incorporate an npm build process when you deploy your application. This ensures that the necessary assets are generated and included in your deployment package.

###  Health Score

37

—

LowBetter than 83% of packages

Maintenance53

Moderate activity, may be stable

Popularity23

Limited adoption so far

Community12

Small or concentrated contributor base

Maturity50

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 ~21 days

Recently: every ~0 days

Total

19

Last Release

328d ago

### 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 (166 commits)")

### Embed Badge

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

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

###  Alternatives

[mustache/mustache

A Mustache implementation in PHP.

3.3k44.6M291](/packages/mustache-mustache)[roots/acorn

Framework for Roots WordPress projects built with Laravel components.

9682.1M97](/packages/roots-acorn)[whitecube/nova-flexible-content

Flexible Content & Repeater Fields for Laravel Nova.

8053.0M25](/packages/whitecube-nova-flexible-content)[mopa/bootstrap-bundle

Easy integration of twitters bootstrap into symfony2

7042.9M33](/packages/mopa-bootstrap-bundle)[limenius/react-bundle

Client and Server-side react rendering in a Symfony Bundle

3871.2M](/packages/limenius-react-bundle)[nicmart/string-template

StringTemplate is a very simple string template engine for php. I've written it to have a thing like sprintf, but with named and nested substutions.

2101.7M30](/packages/nicmart-string-template)

PHPackages © 2026

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