Published on

Add Craft CMS Control Panel styling to your module / plugin

Authors

Keep your plugin / module UI consistent with the Craft CMS Control Panel using the official sass mixins.


The Craft CMS Control Panel uses a set sass mixins to keep styling consistent. Mixins include:

  • Colour variables
  • RTL support for borders, padding, text alignment
  • Input styles
  • Menu styles
  • Readable text

To use the mixins you'll need to build your plugin / module asset bundle with a build tool like webpack or vite that supports scss imports.

My last post shows you how to setup Webpack to build asset bundles.

Install the package in your asset bundle package.json:

npm i @craftcms/sass --save-dev

Import the @craftcms/sass mixins into your .scss file.

@import "@craftcms/sass/mixins";

Use the mixins in your custom classes:

.my-custom-input {
  @include input-styles;
}

Side Note

The @craftcms/sass package is updated as part of the craftcms/cms Github repository and published with Lerna.