"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
Plone 5 theming unleashed
1. Plone 5 Theming
Unleashed
Albert Casado
Víctor Fernández de Alba
2. Albert
• Interaction designer – IxD / UI / UX
• New plone.org
• Plone 5 default Barceloneta theme
• new Plone 5 UI elements
@albertcasado
3. Víctor
• Lead web developer and IT architect
• plone.app.multilingual
• New plone.org
• Plone 5 default Barceloneta theme
• Author of Plone 3 intranets (2010, PacktPub)
@sneridagh
5. Designer-frontend developer
• Visual designer (PS, Ai)
• HTML/CSS expert, cross-browsing and accessibility
• At least basic JS (jquery, integrator of other libs)
• Knows about Plone internals and structure
• <Knowing=“Diazo” helps />
6. Plone backend developer
• Proficient Plone developer
• Good CSS & HTML
• Strong JS
• Diazo and XSLT
• Limited design capabilities and doubtful taste ;)
17. We all like Bootstrap, but use Plone classes instead
.context:extend(.btn-primary) { }
18. So Plone 5 is
• HTML5
• ARIA & WCAG
• Responsive
• LESS
• Best JS ever
• No layout tables
• DL DT DD with pleasure!
• Updated .pt files
• Clever setup
19. Many things has been updated
Accessibility Addons Alerts Assignments Autotabs Breadcrumbs Buttons
Code Control panel Dashboard Document by line Dropzone Error page
Event Folder listing Forms Fullscreen image Header Image product Login
Mail reset Maintenance Manage portlets Members Mixins Modal Navigation
News Pagination Pick a date Portlets Recenty modified Search results
Sharing Site map Site nav Sortable States Strutcture Tabbing Tables
Tablesorter Thumbs TOC Toolbar Tree Types User settings Variables Views …
Check everything on Barceloneta
21. Designer frontend developer
• Learn basic rules of Diazo
• Reuse the fine existing Plone markup
• Understand Plone structure
• Have in mind Plone default classnames
• Prototype in static HTML: Prototype, prototype, prototype
• A “vainilla” Plone site to experiment with
22. Plone structure
Header
Nav
Breadcrumbs
Alerts
<main>
Portlets
Left
Column
Portlets footer
Footer
Portlets
Right
Column
Content
24. Do not create from scratch
• Use the default Plone’s HTML before Diazoing
• Understand Plone structure and distribution of elements, reuse it!
• Copy/Reuse Barceloneta LESS and adapt it
25. Ei designer: prototype
• If you reuse Plone structure…
• If you reuse Plone classes…
• If you reuse Plone elements…
Developers will love you
27. About prototyping
• Prototype based on the default Plone markup as far as possible
• Know the limits of prototyping (:after limits sitelive)
• Start to build the theme using the prototypes as baseline
28. Use a package generator
https://github.com/collective/zopeskel.diazotheme/
• Works with Plone 5.
• We’ll have to add some new things, specially new resource
registries GenericSetup .xml
29. Diazo
• 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 <body> tag with this rule:
<replace css:theme=“#portal-toolbar"
css:content-children=“#edit-bar"
css:if-not-content=“.ajax_load"
css:if-content=".userrole-authenticated"/>
30. Only if strictly needed
• Modify existing templates to match the prototypes ones
using z3c.jbot for default viewlets, views and **portlets**
• Only when Diazo rules turn insane or overcomplicated is
when “jboting” is easier, quicker and hassle free
31. Backend features
• Implement the backend features
using the prototype’s markup for templates
32. Iterative improvement
• Over the Diazo theme in the development site
• Demo it to the customer frequently
• Iterate over the feedback and bugs found
33. Do not forget
• Add custom styling for standard user generated markup
Not anymore the custom you are thinking about
34.
35. main_template
• No longer a portal_skins resource
• Now it’s a BrowserView
Products/CMFPlone/browser/templates/main_template.pt
Products/CMFPlone/browser/main_template.py
36. New Resource registries
• Completely updated
for modern frontend developing
• Don’t want to reveal too much on them
Spoilers
Remember: Do not miss Rob’s and Ramon’s talk in this room after this talk
44. Why not SASS?
• LESS is done in JS and can be compiled in browser
• Because we decided it and we don’t care.
• Still not convinced? https://github.com/ekryski/less2sass