plone 5 theming unleashed
TRANSCRIPT
Plone 5 ThemingUnleashed
Albert CasadoVíctor Fernández de Alba
Albert
• Interaction designer – IxD / UI / UX
• New plone.org
• Plone 5 default Barceloneta theme
• new Plone 5 UI elements
@albertcasado
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
RelationshipGenweb (Plone 2.5), Genweb 3 (Plone 4), UPC.edu (Plone 3), UPC.tv (Plone 3) …
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 />
Plone backend developer
• Proficient Plone developer
• Good CSS & HTML
• Strong JS
• Diazo and XSLT
• Limited design capabilities and doubtful taste ;)
New all-in-one toolbar
Toolbar markup
Friendlier Site setupStay in this room: next talk Resource Registry
Rewritten UI elements
Rewritten UI elements
New markup: less Diazo• Updated Header
• Updated Navigation
• Updated Breadcrumbs
• Updated Alerts
• Updated Portlets
• Updated Search
• …
• Just turn off Diazo adding ?diazo.off=1
Diazo off = Plone naked
Designer, really, save this: ?diazo.off=1
/test_rendering
All usual elements in one page
Fontello fontUpdatable with JSON file: you all can update easily to your own glyphs
.context:extend(.btn-primary) { }
We all like Bootstrap, but use Plone classes instead
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
Many things has been updatedAccessibility 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
Just a recap for best practices!
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
Plone structureHeader
Nav
Breadcrumbs
Alerts
<main>
Portlets
Left
Column
Portlets footer
Footer
Portlets
Right
Column
Content
Plone classes and IDs• .portlet .portletNews
• .formHelp, .formControls
• .context, .standalone, .destructive
• .documentFirstHeading
• #portal-column-content
• #edit-bar
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
Ei designer: prototype
• If you reuse Plone structure…
• If you reuse Plone classes…
• If you reuse Plone elements…
Developers will love you
Transfer prototype into a Diazo Theme for Plone
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
Use a package generator
• Works with Plone 5.
• We’ll have to add some new things, specially new resource registries GenericSetup .xml
https://github.com/collective/zopeskel.diazotheme/
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"/>
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
Backend features
• Implement the backend features using the prototype’s markup for templates
Iterative improvement
• Over the Diazo theme in the development site
• Demo it to the customer frequently
• Iterate over the feedback and bugs found
Do not forget
• Add custom styling for standard user generated markup
Not anymore the custom you are thinking about
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
New Resource registries
• Completely updated for modern frontend developing
• Don’t want to reveal too much on them
Remember: Do not miss Rob’s and Ramon’s talk in this room after this talk
Spoilers
New Resource registriesBundles
Plone bundle
Barceloneta bundle
Legacy bundle
Resources
plone.less plone.js
barceloneta.plone.less
plone-legacy.lessplone-legacy.js
TTW customization and overrides
Spoiler Alert!
New Resource registriesSpoiler Alert!
New Resource registriesSpoiler Alert!
manifest.cfg
Development mode
• Compilation on browser of LESS/JS resources
• Compilation on console via grunt watch task
Spoiler Alert!
Production mode
Have we said that you should assist to the next talk?
Spoiler Alert!
Plone 5 Barceloneta
Barcelona, Catalonia
Pretty well ordered plonetheme > barceloneta > static > less
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
Plone 5 and Barceloneta
Deductible LESS
structure and file naming
Just modify variables
Reuse Barceloneta LESS
@import "@{sitePath}/++plone++barceloneta/less/variables.plone.less";
Let’s Plone a bit
Thanks / Gràcies@albertcasado
@sneridagh