Using the Basic v.s. Advanced Subthemes

The Basic Subtheme is pretty straight forward. 

• Add CSS to the CSS file at css/styles.css.
• Add JS to the JS file at js/scripts.js.

These two files are added to the theme as libraries in the .libraries file.

The Global Library is added to the site in the .info.yml file as global-styles. global-styles is an arbitrary name given to a bundle of css and js assets in the .libraries file and added to the entire site by name in the .info file.

Add any new templates or template overrides to the templates folder.

Finally any php processing or preprocessing goes in the .theme file.

There is a Templates README.md which has info about overriding templates.

There is also a generic README.md that has all of these details and more included.

The Advanced Subtheme requires a little more technical knowledge and additional technologies such as Node.js and likely NVM. Using the advanced subtheme will allow you to write SASS that processes into CSS and inherit CSS variables and mixins from the parent theme. The scope and benefit of this is out of the scope of this documentation.

I will refer you to that README.md for those detailed instructions.

Clearing Cache

Whether using the Basic or Advanced subtheme, if you do not see expected changes after updating CSS, JS, or templates, I would recommend clearing the cache. You can do this from the command line by typing fin drush cr