Front End: Adding stylesheets - dotherightthing/wpdtrt-plugin-boilerplate GitHub Wiki

Summary

DTRT WordPress Plugin Boilerplate handles loading of plugin Stylesheet files.

Status

  • Stable @ 1.5.6
  • Needs further documentation re loading of additional stylesheets

Usage

Default stylesheets

  • frontend.css stylesheet is automatically added to public facing pages
  • backend.css stylesheet is automatically added to admin pages

These stylesheets are editable at:

  • ./scss/frontend.scss (plugin)
  • ./scss/backend.scss (plugin)

CSS compiling

The CSS compiler:

  • converts SCSS to CSS
  • converts px values to rem
  • adds vendor prefixes, according to the browserslist in ./package.json

Note: The include-media media query library is specified as a dependency, but this is only loaded by plugins generated by the DTRT WordPress Plugin Boilerplate Generator. See a plugin's scss/_variables.scss for usage docs.

To regenerate the compiled .css versions:

// setup (if not run already)
composer install
yarn install 

// compile and watch for changes
yarn run watch