Merge pull request #1592 from plone/gforcada-patch-1

feat(classic UI): how to get a minimal barceloneta integration
plone · Mar 17, 2024 · ef89b06 · ef89b06
2 parents 59d6a71 + cc19c64
commit ef89b06
Showing 1 changed file with 57 additions and 1 deletion.
diff --git 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 = <!DOCTYPE html>
 ```
 
+(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 <classic-ui-from-scratch-bundle-registration-label>`.
+
+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