Great City Medical Theme

A custom WordPress theme for Great City Medical.

Built by Radley Sustaire, using PHPStorm. Designed by Pavel Khenkin, using Figma.

Quick Links

• Great City Medical - Theme:

  https://github.com/RadGH/great-city-medical-theme

• Great City Medical - Plugin:

  https://github.com/RadGH/great-city-medical-plugin

Build process

This theme uses the official standard @wp-scripts to compile the JS scripts, with a few additional packages to assist with compiling sass files.

Configuration

The build process is configured in the package.json file. The most important settings are:

1. JS source: /assets/js-src/*.js

2. JS output: /assets/js-build/*.js

3. JS include: /assets/js-build/*.asset.php

   • This php file is used when enqueueing the JS files, and automatically includes the dependencies that were imported by the script.

4. SCSS source: /*.scss

5. SCSS output: /*.css

6. SCSS map: /*.css.map

   • This source map tells your browser how to map the compiled CSS to the original SCSS files. This is useful for debugging.

7. Additional SCSS includes are located in /assets/styles/. These are not compiled directly, they are imported in the main scss files.

8. The theme uses the NPM package sass (dart-sass) to compile the SCSS files.

9. The theme uses the NPM package concurrently to run multiple build processes at once.

Preparing the build process

1. Install npm on your system, if needed.
2. Open terminal or command prompt.
3. Navigate to the theme root.
4. Run: npm install

You are now ready to use the build process. You do NOT need to repeat those steps unless package.json is updated, in which case you can simply repeat: npm install

Manual

To compile all JS/SCSS files once:

npm run build

Automatic

To compile all JS/SCSS files automatically:

npm run start