Goizueta Style Guide

This Theme is Built using KSS

This theme is built from non-Drupal-specific components and layouts. These are kept in a living style guide, built using KSS.

The src directory contains subdirectories holding code for these components: scss files for styling, twig files for markup, and json files for data.

You can see the living style guide by pointing your browser at /themes/custom/goizueta_theme/dist/style-guide

Getting Started

This section uses nvm to ensure everyone is on the same version of node.

Lando users will have the correct version of node installed based on the configuration in .lando.yml in the project root directory.

Browser Support

Autoprefixer & Babel is set to support:

• IE >= 9
• Last 3 versions of modern browsers.

These can be updated at any time within the package.json.

Run the following commands from the theme directory

If you are using lando, skip to "Install npm dependencies"

If you are NOT running lando, install nvm if you haven't already: https://github.com/creationix/nvm

Use the right version of node with:

cd docroot/themes/custom/goizueta_theme 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 this command does not return the following, see below:

Now using node v14.21.3 (npm v6.14.18)

Use the right version of npm:

npm install -g npm@6.14.18

You must do this before adding node 14 with nvm install, else you may have version conflicts.

If you already have node 14 installed, you may need to delete it.

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

nvm install

Install npm dependencies with

npm install, Or if using ddev: ddev npm install

This command looks at package.json and installs all the npm dependencies specified in it. Some of the dependencies include gulp, autoprefixer, gulp-sass and others.

Runs default task

npm run build, Or if using ddev: ddev npm run build or just ddev build

This will run whatever the default task is.

Note: there are a ton of lint errors. It is safe to ignore them.

Compiles Sass

npm run compile or ddev npm run compile

This will perform a one-time Sass compilation.

Runs the watch command

npm run watch or ddev npm run watch or just ddev watch

This is ideal when you are doing a lot of Sass changes and you want to make sure every time a change is saved it automatically gets compiled to CSS

Cleans complied directory

npm run clean or ddev npm run clean

This will perform a one-time deletion of all compiled files within the dist/ directory.