Skip to content

Commit 8613313

Browse files
santonellisantonelli
committed
add structure and basic infos
1 parent f626981 commit 8613313

File tree

10 files changed

+236
-0
lines changed

10 files changed

+236
-0
lines changed

‎icons.md‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
# Icons in Plone 6 Classic UI
2+
3+
- Bootstrap Icons
4+
- SVG Inline Icons
5+
- Iconresolver
6+
7+
8+
# Bootstrap Icons
9+
10+
Bootstrap is the default CSS Framework in Plone 6. We decided to use it's icons as well. Check out all available Icons:
11+
12+
https://icons.getbootstrap.com/
13+
14+
Icons are shipped via plone.staticresources. Check out the [package.json](https://github.com/plone/plone.staticresources/blob/master/package.json) of the package to get the actual version of the icons in Plone.
15+
16+
17+
# Registration
18+
19+
* Icons are registered in Plone's registry
20+
* Override of icons via xml
21+
* [Bootstrap Icons](https://github.com/plone/plone.staticresources/blob/master/src/plone/staticresources/profiles/default/registry/icons_bootstrap.xml)
22+
* [Contenttypes](https://github.com/plone/plone.staticresources/blob/master/src/plone/staticresources/profiles/default/registry/icons_contenttype.xml)
23+
* [Plone UI](https://github.com/plone/plone.staticresources/blob/master/src/plone/staticresources/profiles/default/registry/icons_plone.xml)
24+
25+
26+
# Customization
27+
28+
* Add custom icons
29+
* Override some of the icons
30+
* TODO
31+
32+
33+
# Icon Font
34+
35+
* TODO
36+
* Setup profile to install icon font
37+
* Usage as known from e.g. Font Awesome
38+
39+
# Iconresolver
40+
41+
## Get Icon URL
42+
43+
URL method of @@icons view returns the actual URL to the SVG icon. This can be used e.g. in an img tag.
44+
45+
```
46+
<img src="" tal:attributes="src python:icons.url('alarm')" class="custom-class" alt="foo" />
47+
```
48+
49+
## Get Icon Tag
50+
51+
Tag method is used with tal:replace and returns an entire inline SVG image. tag_class and tag_alt is used to pass in custom classes and an alt text.
52+
53+
```
54+
<tal:icon tal:replace="structure python:icons.tag('archive', tag_class='custom-class', tag_alt='foobar')" />
55+
```

‎index.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# Plone Classic UI
2+
3+
The all-new default frontend of Plone 6 is aka Volto. Plone 6 is still shipped with a bunch of modernized templates based on Bootstrap. This is now Classic UI.
4+
5+
# Contents
6+
7+
* What's new
8+
* Theming
9+
* Registry
10+
* Icons

‎registry.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# Registry and Plone 6 Classic UI
2+
3+
* No more separation between anonymous and logged in
4+
* No more resources
5+
* Just regular bundles
6+
* Available attributes (TODO)
7+
8+
# Order
9+
10+
* All registered bundles
11+
* Diazo stuff
12+
* custom.css

‎theming/barceloneta/index.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# TTW Customizations in Plone 6 Classic UI
2+
3+
Small CSS changes via control panel in Plone 6 Classic UI's custom.css.
4+
5+
* TODO
6+
* SCSS
7+
* Colors, fonts and sizes via variable changable
8+
* Properties for shadows, rounded corners, gradients, etc.
9+
* plonetheme.barceloneta npm package for includes
10+
* bobtemplates.plone template

‎theming/basics/index.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Plone Classic UI Theme Add-On
2+
3+
Create a filesystem package to keep an installable theme for Plone 6 Classic UI.

‎theming/diazo/index.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Plone Classic UI Theming from scratch
2+
3+
Theming based on Diazo.

‎theming/from-scratch/index.md‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
# Plone Classic UI Theming based on Barceloneta
2+
3+
Theming based on a filesystem package without any dependency.
4+
5+
* Theming for Plone 6 Classic UI
6+
* Theme stored in a filesystem package
7+
* Built from scratch
8+
* No dependencies to Barceloneta
9+
* No Diazo needed
10+
11+
12+
# Theme Package
13+
14+
* Create a theme package as explained here.
15+
* Temove what you do not need
16+
* Add [package.json](https://github.com/collective/plonetheme.munich/blob/master/package.json)
17+
* Overrides
18+
* Static files
19+
20+
21+
# Static Files
22+
23+
Register directory to keep static files
24+
25+
File: src/plonetheme/munich/browser/configure.zcml
26+
Directory: src/plonetheme/munich/browser/static
27+
28+
```
29+
<!-- Publish static files -->
30+
<plone:static
31+
name="plonetheme.munich"
32+
type="plone"
33+
directory="static"
34+
/>
35+
```
36+
37+
# Theme
38+
39+
## Manifest
40+
41+
* Manifest for your theme
42+
* Keep rules empty to disable Diazo
43+
44+
```
45+
[theme]
46+
title = Munich Theme
47+
description = A modernized Plone 6 theme
48+
preview = preview.png
49+
rules =
50+
prefix = /++theme++plonetheme.munich
51+
doctype = <!DOCTYPE html>
52+
```
53+
54+
## Bundle Registration
55+
56+
```
57+
<?xml version="1.0"?>
58+
<registry
59+
xmlns:i18n="http://xml.zope.org/namespaces/i18n"
60+
i18n:domain="plonetheme.munich">
61+
62+
<records interface="Products.CMFPlone.interfaces.IBundleRegistry" prefix="plone.bundles/munich">
63+
<value key="jscompilation">++theme++munich/js/munich.min.js</value>
64+
<value key="csscompilation">++theme++munich/css/munich.min.css</value>
65+
<value key="enabled">True</value>
66+
<value key="compile">False</value>
67+
<value key="last_compilation">2020-12-06 12:00:00</value>
68+
</records>
69+
70+
</registry>
71+
```
72+
73+
## Theme Registration
74+
75+
Register your theme via theme.xml
76+
77+
```
78+
<?xml version="1.0" encoding="UTF-8"?>
79+
<theme>
80+
<name>munich</name>
81+
<enabled>true</enabled>
82+
</theme>
83+
```
84+
85+
## Compile the bundle
86+
87+
* Compile SASS to SCSS
88+
89+
Install all requirements and dependencies from package.json:
90+
91+
```
92+
yarn install
93+
```
94+
95+
Build the actual bundle:
96+
97+
```
98+
yarn dist
99+
```
100+
101+
102+
# Theming
103+
104+
* Make use of Bootstrap [variables](https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss)
105+
* Tweak basic settings like rounded corners, shadows, etc.
106+
* Set custom fonts
107+
* Define your own stuff
108+
* Import Boostrap (as basis)
109+
110+
## Templates
111+
112+
* Add z3c.jbot overrides
113+
* Copy Templates to customize
114+
* Add custom views for your story
115+
116+
117+
# Available Themes
118+
119+
* plonetheme.tokyo (mobile first, onw column)
120+
* plonetheme.munic (minimalistic)
121+
* plonetheme.berlin (based on Barceloneta)

‎theming/index.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# Plone Classic UI Theming
2+
3+
TODO
4+
5+
# Contents
6+
7+
* Basics and Requirements
8+
* Minor CSS changes via controlpanel (TTW)
9+
* Theming based on Barceloneta
10+
* Theming from scratch (without dependencies)
11+
* Thiming with Diazo

‎theming/ttw/index.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Plone Classic UI Theming based on Barceloneta
2+
3+
Theming based on a filesystem package without any dependency.

‎whatsnew.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# What's new in Plone 6 Classic UI
2+
3+
- Markup is based on [Bootstrap](https://getbootstrap.com/)
4+
- TTW theming has been removed
5+
- Bootstrap Icons
6+
- Modernized JavaScript
7+
- RequireJS has been removed
8+
- jQuery has been removed

0 commit comments

Comments
 (0)