Base scss styles for Plone 5 theming
We use these styles while bootstrapping a new theme with plonecli, in order to have basic plone styles ready and save some time on development.
In order to use this correctly, you will need to tell your sass compiler to also read files from the node_modules
folder.
- If you use it through the node-sass cli, by adding the
--include-path node_modules
argument - If you configure it with a js object, add the
includePaths
property, which will look like this:includePaths: ['node_modules']
This is needed because the styles inside this package read other styles from its bootstrap-sass
dependency, and it will also make it smoother for you to use these styles.
In order to add these styles to your theme styles, import it like this:
@import 'plone-scss-base/styles';
To customize these styles, make a copy of the bootstrap variables file, customize it with your own values (be sure to remove the !default
statements from your variables), and import it before these package styles, like this:
@import 'my_variables';
@import 'plone-scss-base/styles';
If you don't need all of the styles provided here, you can cherry-pick the partials you need by making a copy of the main stylesheet of this package (styles.scss) and commenting the partials you don't need.
As an extra that may be helpful, in the lib
folder of the package you download from npm, there is a compiled css stylesheet with all of the styles included in this repo.
npm install --save plone-scss-base
## Compatibility
These styles are developed for Plone 5.x sites. Styles compilation is currently tested only with node-sass.
MIT