On Arnhem sprint I started to work on Plone 5 Theme with the idea to create a basic theme that can be used as an example for future themes on Plone.
The goals were:
![]()
The goals were:
- Using plone.app.widgets and mockup to create it (as it's been approved to be included on coredev and Rok said it's ready to be merged)
- Using the new main_template arch to instead of having a layout we have a HTML5 semantic output from plone rendering engine
- Removing all dl/dt/dd structures from Plone that are not used on the correct semantic way
- Solve problems with tests so they pass again so we can merge in a short period of time.
- Define the Plone 5 theme mockup (we had an initial design from Oriol)
Dennis worked hard on having a plone 5 mockup :
After some discussions here there are my opinions of some open subjects we have:
Mockup
The mockup idea is great but means that we change a lot the way we develop skins. Mainly you need to create a bundle on mockup with all the js/css you want to use and all the mockup merges it for you on development and gets ready for production. I understand that the actual javascript history has changes a lot so we need it. The problem in my opinion is that portal_css and portal_javascript tools get useless with this software, you need to check that all your javascript works together so we will need to create it's bundles/patterns... to make it work.
In barceloneta case, we pushed to use Bootstrap 3 as a basic framework, the dependencies of this framework with widgets were incompatible (it's using BS2) so we need to adapt widgets to BS3. The main incompatibility is the modal, which has changes a lot. In my opinion we should make widgets and patterns completly independent of BS css (maybe with its own namespace). We are using our own javascript and the css from BS and we shouldn't to make it really easy to integrate with any framework story.
Toolbar
The toolbar idea is to have a backend and a frontend that makes skining frontend really easy. The idea is great and uses a lot of js/iframe magik to do it. It's were we must go to compete with CMS with separate frontend and backend. In my opinion, I love the way is it now regarthless it's much harder to implement the skin. For this reason I think that ajax-toolbar should be optional.
In order to create barceloneta theme I thought about creating a normal toolbar that's rendering within the same page and displayed on top using the actual viewlet engine.
For the skining implementation creating a toolbar.less with all the css from authenticated users and the toolbar would make easy to use ajax toolbar or normal toolbar. All the frontend less will go to another less file so it gets easy to combine.
On the javascript side, I'm not agree that we don't need widgets.js on frontend, for example the contact form is a clear example were we need tinymce. So my aproach is to deliver all the js in one file with all the needed staff. Here is were my question opens about, how I can set that I want some js on some pages ... ( so how to integrate mockup with portal_javascript ).
There are some issues like moving "Manage portalets" to the toolbar that needs to be solved in a nice way. I love the demo from rok were he can see all the portlets managers. But my initial sightseen of the toolbar template scared me and I think that we should do it on the viewlet manager toolbar so we can extend easy.
I really would like to see all the views from toolbar working as plain site also so we can have a non-iframe-full-ajax site and a ajax-toolbar with any pain.
Tests
We have some robotframework tests on plone that depends on sunburst and are hard to change all of them (xpaths are absolute and they should be more generic). That's a lot of work, and when we merge all the code to coredev we will need a lot of help to solve them.
Semantic (DT/DL/DD)
There are a lot of different aspects that I've changed on main_template :
- global status is out of content so you don't need to add on all templates the status message, it's possible to use the actual IStatusMessage adapter or just user the slot to render on main_template
- DT/DL/DD are used on portlets/viewlets/templates ... we should move it's arch to ul/li structures to make it compatible
- There are some classes that I added on templates in order not to overheight diazo rules (like dropdown class for actionmenu) that in my opinion can be seen as a general behavior.
Tiles/viewlets
I love tiles and I think is the future or at least something similar, but as it's not on coredev and we have enought mess (portal remove / skins remove) I wouldn't add any piece of software to plone 5. So we arrenged some new viewlets that helps on structuring the web (global status/hero/...)
Tasks that need to be done
- plone.app.widgets modal css move to it's own independent namespace.
- creating the toolbar.less file with all the css code for authenticated
- defining two different css/js files on portal_* for nonauth and auth (or finding a way to do it)
- finishing the styles of plonetheme.barceloneta
- removing dt/dl/dd from templates
- solving tests
All the work is done on the plips/plip13787-main-template.cfg
Really thanks to Dennis, Rok, Asko, toupt and 4Digits team to help on this task!