PHPackages                             moody-college/moody - 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. [Utility & Helpers](/categories/utility)
4. /
5. moody-college/moody

ActiveDrupal-custom-theme[Utility & Helpers](/categories/utility)

moody-college/moody
===================

Drupal 9+ theme

03.5kCSSCI passing

Since Mar 31Pushed 2mo ago1 watchersCompare

[ Source](https://github.com/UTMoodyCollege/moody)[ Packagist](https://packagist.org/packages/moody-college/moody)[ RSS](/packages/moody-college-moody/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependenciesVersions (7)Used By (0)

Forty Acres Subtheme Developer Documentation
============================================

[](#forty-acres-subtheme-developer-documentation)

### Creating a Forty Acres Subtheme

[](#creating-a-forty-acres-subtheme)

Copy the STARTERKIT directory and put it at the same level as the forty\_acres theme (/web/themes). Rename the subtheme name in place of the name STARTERKIT, and replace the word STARTERKIT in your subtheme in the following places within your subtheme: /config/install/STARTERKIT.settings.yml package.json STARTERKIT.info.yml (the name and 2 instances inside this file) STARTERKIT.theme STARTERKIT.libraries.yml

### Customizing your subtheme

[](#customizing-your-subtheme)

#### Customizing templates

[](#customizing-templates)

If you want to override a Forty Acres theme template just copy it into the templates directory in your new subtheme. Namespacing in those templates may need to be updated with the namespace of your new subtheme. For example, if you copy a header.html.twig file into your new subtheme, you would need to copy the page.html.twig file and reference the include file with the new theme namespace. In other words, in page.html.twig, you would change: {% include '@forty\_acres/includes/header.html.twig' %} to {% include '@your\_subtheme/includes/header.html.twig' %}

#### Customizing JS

[](#customizing-js)

There is an example.custom.js file in the /js directory. It is referenced in the libraries.yml file. To use it, rename it by removing the "example" part of the file names and uncomment the "js" and the line beneath it in the libraries file. More information about adding JS to a subtheme is at:

#### Customizing CSS:

[](#customizing-css)

There are two ways to add or modify CSS in the subtheme: \* Add CSS to the styles.css file in the /css directory. Any styles here will get read last and override all other styles. \* Create Sass files and compile them. Instructions for using Sass and Gulp are below.

Typically new Sass partial files should go inside the /src/scss directory and be imported into the overrides.scss file to get compiled and output to the overrides.css file in /css.

#### Developing with SCSS Local environment requirements

[](#developing-with-scss-local-environment-requirements)

Developers will need the following packages installed globally.

```
Node
Node Package Manager (NPM)
Gulp

```

#### Local environment setup using NVM

[](#local-environment-setup-using-nvm)

Using Node Version Manager (NVM) is now recommended for installing Node/NPM. NVM is more flexible than Homebrew and avoids the situation where you use Homebrew to install Node which then installs your global packages. However, using NVM is not required and you may continue to use Homebrew if you so choose. If you have previously installed Node/NPM with Homebrew and want to delete it along with whatever global NPM packages you have installed run the following commands.

**Note: you will need to re-install whatever global packages you currently have using the NVM supplied NPM.**

```
brew uninstall node;
brew prune;
rm -f /usr/local/bin/npm /usr/local/lib/dtrace/node.d;
rm -rf ~/.npm;

```

To now install NVM run the following commands

```
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

```

Verify the following has been added to your bash\_profile

```
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

```

Next, verify NVM is working correctly by running the following which should output the options for NVM. If it is not found try sourcing your bash\_profile or opening a new terminal window.

```
nvm

```

Next, we need to install the stable version of Node and NPM. Run the following command to install both

```
nvm install --lts

```

Now you can verify you have Node and NPM installed by running the following commands which should return node v8.11.3 and npm v5.6.0

```
node -v
npm -v

```

Next, we will need to globally install Gulp

```
npm install -g gulp

```

You can check what global packages you have installed with the following command

```
npm list -g --depth 0

```

You should now have Node, NPM and Gulp installed globally. You can verify the location of these packages by running the following commands. The packages should all be coming from inside the ~/.nvm directory.

```
which node
which npm
which gulp

```

#### Running a gulp build

[](#running-a-gulp-build)

Now that you have Node, NPM and Gulp installed globally you can run the gulp configuration in Forty Acres. Forty Acres contains a package.json which defines a number of node packages and gulpfile.js which contains the Gulp configuration for tasks such as compiling SCSS and uglifying JS.

Run the following commands from your theme root to install the local packages and then to trigger a new build.

```
npm install
gulp

```

Gulp will run the following tasks:

- compile SCSS
- add vendor prefixes to CSS
- uglify JS
- copy CSS to relevant directory
- concatenate files

#### Errors

[](#errors)

If you run "gulp" and get an error similar to 'Syntax "undefined" is not supported yet...', it may be due to not having a Sass partial(s) to compile.

You may need disable CSS linting for any Sass that uses a "@" rule by adding a comment line above it, like the example below. @media screen and (min-width: #{$mq-breakpoint}) { // stylelint-disable-next-line at-rule-no-unknown @content; }

###  Health Score

31

—

LowBetter than 68% of packages

Maintenance56

Moderate activity, may be stable

Popularity19

Limited adoption so far

Community11

Small or concentrated contributor base

Maturity33

Early-stage or recently created project

 Bus Factor1

Top contributor holds 84.3% 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.

### Community

Maintainers

![](https://www.gravatar.com/avatar/d105944ee746943e35276f2c26b056247aaeae7a98f2b7d25d86388994711ab8?d=identicon)[tylerfahey](/maintainers/tylerfahey)

![](https://www.gravatar.com/avatar/efdbd92c3c5bf55b41cf48d5ed7b7ad9f0d04e06023e437abfb9581729b947cf?d=identicon)[mmarsello](/maintainers/mmarsello)

---

Top Contributors

[![twfahey1](https://avatars.githubusercontent.com/u/6699959?v=4)](https://github.com/twfahey1 "twfahey1 (150 commits)")[![mikemarsello](https://avatars.githubusercontent.com/u/1390614?v=4)](https://github.com/mikemarsello "mikemarsello (26 commits)")[![Copilot](https://avatars.githubusercontent.com/in/1143301?v=4)](https://github.com/Copilot "Copilot (2 commits)")

### Embed Badge

![Health badge](/badges/moody-college-moody/health.svg)

```
[![Health](https://phpackages.com/badges/moody-college-moody/health.svg)](https://phpackages.com/packages/moody-college-moody)
```

PHPackages © 2026

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