The Future of [Plone]
Theming
Chrissy Wainwright
How theming changes in Plone 5 and front-end development in
general.
The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014

What changes in Plone 5?
Diazo is the default theming story
The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014

What changes in Plone 5?
portal_skins becomes deprecated
The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014

What changes in Plone 5?
New theme:
The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014

What changes in Plone 5?
Uses Chameleon for templates
The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014

What changes in Plone 5?
Lots of other things (go check it out!)
https://plone5.veit-schiele.de (demo site)
http://plone.org/try-five (download)
The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014

Help prepare Plone 5!
Sprints this weekend:
Plone 5 bug fixes
Javascript/Mockup
Skins removal
Plone installer
collective.jbot
Dexterity/PloneFormGen
Meet in Sage room 3235
The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014

How can you future-proof a
Plone theme?
Make it a Diazo theme
Use Plone Default as the base theme
Reduce number of template overrides
Turn custom skins templates into view templates
The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014

Make a Diazo Theme
Diazo is a method of mapping dynamic content to a static
theme
zopeskel.diazotheme for boilerplate
A Diazo theme is basically a resource directory
The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014

Use Plone Default as Your
Base
Don't use Sunburst (Plone 4 Theme)
Navbar will still be styled
Also note that the main_template now uses HTML5 elements
The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014

Reduce Number of Template
Overrides
Includes skins and z3c.jbot
Do as much as possible with Diazo
Some templates will be relocated in Plone 5
Upgrading Plone is easier when you don't have to manage the
template overrides
When you do override a template, add a note of what version
it came from
The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014

Create View Templates
In configure.zcml:
<browser:page
for="*"
name="homepage"
class=".homepageview.HomePageView"
template="homepageview.pt"
permission="zope2.View"
/>
This template is accessible at yoursite.com/@@homepage, so
with Diazo:
<replace css:theme="#content" css:content="#home" href="/@@homepage"/>
The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014

What changes are happening
with the Internet?
Supported Technologies
Browser Usage
Responsive Themes
The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014

Supported Technologies
HTML5
CSS3
SVG images
http://caniuse.com/
The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014

Browser Stats
Chrome, FF, IE11, Safari iPad, IE8-10
The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014

Browser Stats
Look at your site's analytics
IE6 is "dead"!
The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014

Responsive Themes
Fairly easy to implement
Don't need a separate site or an app for mobile
Use the viewport <meta> tag
Uses CSS media queries, tiny bit of JS for navigation toggle
The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014

CSS/JS Optimization
Put all CSS and JS files in the resource registries
Order files in CSS and JS registries to make as few requests
as possible
The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014

Image Optimization
Use image sprites
Use CSS instead of images where possible
http://jpegmini.com, https://tinypng.com
The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014

Any Questions/Comments?
The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014

Resources and Links
Updating a Traditional Plone Theme to Diazo
Plone 5 Demo
Diazo.org
zopeskel.diazotheme
http://caniuse.com
StatCounter May 2014
http://jpegmini.com, https://tinypng.com
http://sixfeetup.com/quickref
Presentation created with Hovercraft!