Plone 5 theming unleashed
3 likes3,199 views
The document summarizes a presentation about theming in Plone 5. It discusses the new default Barceloneta theme in Plone 5, which includes rewritten UI elements and markup using newer standards. It provides guidance for designers and developers on best practices when working with Plone themes, such as prototyping, understanding the Plone structure and classes, and reusing existing Plone elements. It also briefly outlines some of the new features of Plone 5 related to resource registries and theming.
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
- 4. Relationship Genweb (Plone 2.5), Genweb 3 (Plone 4), UPC.edu (Plone 3), UPC.tv (Plone 3) …
- 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 ;)
- 10. Friendlier Site setup Stay in this room: next talk Resource Registry
- 13. New markup: less Diazo • Updated Header • Updated Navigation • Updated Breadcrumbs • Updated Alerts • Updated Portlets • Updated Search • … • Just turn off Diazo adding ?diazo.off=1
- 14. Diazo off = Plone naked Designer, really, save this: ?diazo.off=1
- 15. /test_rendering All usual elements in one page
- 16. Fontello font Updatable with JSON file: you all can update easily to your own glyphs
- 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
- 20. Just a recap for best practices!
- 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
- 23. Plone classes and IDs • .portlet .portletNews • .formHelp, .formControls • .context, .standalone, .destructive • .documentFirstHeading • #portal-column-content • #edit-bar
- 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
- 26. Transfer prototype into a Diazo Theme for Plone
- 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
- 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
- 37. New Resource registries Bundles Plone bundle Barceloneta bundle Legacy bundle Resources plone.less plone.js barceloneta.plone.less plone-legacy.less plone-legacy.js TTW customization and overrides Spoiler Alert!
- 38. New Resource registries Spoiler Alert!
- 39. New Resource registries Spoiler Alert! manifest.cfg
- 40. Development mode • Compilation on browser of LESS/JS resources • Compilation on console via grunt watch task Spoiler Alert!
- 41. Production mode Have we said that you should assist to the next talk? Spoiler Alert!
- 42. Plone 5 Barceloneta Barcelona, Catalonia
- 43. Pretty well ordered plonetheme > barceloneta > static > less
- 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
- 45. Plone 5 and Barceloneta
- 47. Deductible LESS structure and file naming
- 49. @import "@{sitePath}/++plone++barceloneta/less/variables.plone.less"; Reuse Barceloneta LESS
- 50. Let’s Plone a bit
- 51. Thanks / Gràcies @albertcasado @sneridagh