Víctor Fernández de Alba and Albert Casado: Plone 5 theming unleashed
Talk by Víctor Fernández de Alba and Albert Casado at the Plone Conference 2014 in Bristol.
Plone 5 has a toolbar. On the left by default, but you can move it to the top if you want.
New markup, so less Diazo. Updated html of header, navigation, portlets, etcetera.
Remember that when styling you can use the test_renderer page to see all the standard elements of Plone, to check that all is fine.
We all like bootstrap, but use Plone classes instead, like context for buttons, which you can extend.
A designer should learn basic rules of Diazo, reuse the fine existing Plone markup, understand Plone structure, have in mind Plone default classnames, prototype a lot in in static html.
How to transfer a prototype into a Diazo theme for Plone
- Prototype based on the default Plone markup as far as possible.
- Know the limits of prototyping and know when to stop and use the real site.
- Use Diazo to move blocks around, do easy modifications to the default markup. Do not forget to make space for the toolbar just after the tag.
- Only if strictly needed, modify existing templates to match the prototype ones, using z3c.jbot.
- Use iterative improvement. Demo it to the customer frequently.
- Add custom styling for standard user generated markup in TinyMCE.
main_template is now a browser view, instead of a skins resource: Products.CMFPlone/browser/main_template.py.
Resource registries have been completely updated for modern front-end developing. Plone bundle, Barceloneta theme bundle, Legacy bundle. In your Diazo theme in manifest.cfg you can enable or disable bundles.
Development mode: compilation on browser of less/js resources. Compilation on console via grunt watch.
Barceloneta theme
- Pretty well ordered files: plonetheme > barceloneta > static > less.
- Deductible LESS structure and file naming.
- You can reuse the Barceloneta LESS files in your own theme by importing it with the sitePath variable.
- We did not use much Diazo: the rules file is very simple.
Toolbar is not completely isolated, we ran into problems using an iframe for this, it is still the plan for the future, it is now about halfway.
Maybe we can add a checkbox for developing in LESS and not Javascript and the other way around, so your browser does not need to compile everything all the time.
Twitter: @albertcasado and @sneridagh.