Plone 5 theming unleashed

Plone 5 Theming
Unleashed
Albert Casado
Ví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

Relationship
Genweb (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 ;)

Friendlier Site setup
Stay in this room: next talk Resource Registry

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 font
Updatable with JSON file: you all can update easily to your own glyphs

We all like Bootstrap, but use Plone classes instead
.context:extend(.btn-primary) { }

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 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

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 structure
Header
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
https://github.com/collective/zopeskel.diazotheme/
• Works with Plone 5.
• We’ll have to add some new things, specially new resource
registries GenericSetup .xml

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
Spoilers
Remember: Do not miss Rob’s and Ramon’s talk in this room after this talk

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!

Spoiler Alert!

Spoiler 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

Deductible
LESS
structure
and file naming

@import "@{sitePath}/++plone++barceloneta/less/variables.plone.less";
Reuse Barceloneta LESS

Thanks / Gràcies
@albertcasado
@sneridagh

Plone 5 theming unleashed

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Plone 5 theming unleashed

Ähnlich wie Plone 5 theming unleashed (20)

Mehr von sneridagh

Mehr von sneridagh (6)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Plone 5 theming unleashed