diff --git a/docs/classic-ui/theming/from-scratch.md b/docs/classic-ui/theming/from-scratch.md index 9d2110e07..688431e6c 100644 --- a/docs/classic-ui/theming/from-scratch.md +++ b/docs/classic-ui/theming/from-scratch.md @@ -66,6 +66,8 @@ prefix = /++theme++plonetheme.munich doctype = ``` +(classic-ui-from-scratch-bundle-registration-label)= + ### Bundle registration ```xml @@ -120,7 +122,61 @@ yarn dist - Tweak basic settings like rounded corners, shadows, and so on. - Set custom fonts - Define your own stuff -- Import Boostrap (as basis) +- Import Bootstrap (as basis) + + +#### Minimal backend styling + +When you create a theme from scratch, it is convenient to reuse the Barceloneta theme for: + +- Plone toolbar +- add and edit forms +- control panels + +To do so, follow this guide. + +- Create a new CSS file in your theme, such as the following. + + ```scss + @import "@plone/plonetheme-barceloneta-base/scss/variables.colors.plone"; + @import "@plone/plonetheme-barceloneta-base/scss/variables.colors.dark.plone"; + @import "@plone/plonetheme-barceloneta-base/scss/root_variables"; + @import "bootstrap/scss/bootstrap"; + + @import "@plone/plonetheme-barceloneta-base/scss/toolbar"; + @import "@plone/plonetheme-barceloneta-base/scss/controlpanels"; + @import "@plone/plonetheme-barceloneta-base/scss/forms"; + ``` + + ```{tip} + See all the available [Barceloneta SCSS files](https://github.com/plone/plonetheme.barceloneta/tree/master/scss), and import the ones that you want to use. + ``` + +- Add `@plone/plonetheme-barceloneta-base` as a dependency. + + ```shell + yarn add @plone/plonetheme-barceloneta-base + ``` + +- Add a script in {file}`package.json` to compile the CSS. + + ```json + "css-compile-main": "sass --load-path=node_modules --style expanded --source-map --embed-sources --no-error-css plone.scss:../static/plone.css" + ``` + + ```{tip} + Look at [`plonetheme.barcelonta`'s {file}`package.json`](https://github.com/plone/plonetheme.barceloneta/blob/master/package.json) for a few more scripts that can prefix and minify your CSS and get a bundle for use in production. + ``` + +- Run the compilation. + + ```shell + yarn run css-compile-main + ``` + +- Finally, {ref}`register the bundle `. + +With this guide, you will save yourself quite some work on styling the toolbar, the add and edit forms, and control panels, while keeping the rest of your theming separate. #### Templates