Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(classic UI): how to get a minimal barceloneta integration #1592

Merged
merged 11 commits into from
Mar 17, 2024
Merged

feat(classic UI): how to get a minimal barceloneta integration #1592

Changes from 8 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
2c98180
feat(classic UI): how to get a minimal barceloneta integration
gforcada Dec 13, 2023
c5d29eb
fix admonitions
gforcada Dec 13, 2023
bb4bea2
fix the reference
gforcada Dec 13, 2023
5df1d66
typo
gforcada Dec 13, 2023
0265919
Clean up English and MyST syntax and grammar
stevepiercy Dec 14, 2023
a3dcc12
Merge branch '6.0' into gforcada-patch-1
stevepiercy Mar 7, 2024
6f69a47
Update docs/classic-ui/theming/from-scratch.md
gforcada Mar 8, 2024
05ea285
Update docs/classic-ui/theming/from-scratch.md
gforcada Mar 8, 2024
b1e1c74
Update docs/classic-ui/theming/from-scratch.md
gforcada Mar 8, 2024
0b6dcf6
Merge branch '6.0' into gforcada-patch-1
gforcada Mar 17, 2024
cc19c64
Merge branch '6.0' into gforcada-patch-1
stevepiercy Mar 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 57 additions & 1 deletion docs/classic-ui/theming/from-scratch.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,8 @@ prefix = /++theme++plonetheme.munich
doctype = <!DOCTYPE html>
```

(classic-ui-from-scratch-bundle-registration-label)=

### Bundle registration

```xml
Expand Down Expand Up @@ -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";
gforcada marked this conversation as resolved.
Show resolved Hide resolved

@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
Expand Down
Loading