The Future of [Plone] Theming

The Future of [Plone]Theming

Chrissy Wainwright

How theming changes in Plone 5 and front-end development ingeneral.

The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014

What changes in Plone 5?Diazo is the default theming story


What changes in Plone 5?

portal_skins becomes deprecated


What changes in Plone 5?New theme:


What changes in Plone 5?Uses Chameleon for templates


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)


Help prepare Plone 5!Sprints this weekend:

Plone 5 bug fixesJavascript/MockupSkins removalPlone installercollective.jbotDexterity/PloneFormGen

Meet in Sage room 3235


How can you future-proof aPlone theme?

Make it a Diazo themeUse Plone Default as the base themeReduce number of template overridesTurn custom skins templates into view templates


Make a Diazo ThemeDiazo is a method of mapping dynamic content to a staticthemezopeskel.diazotheme for boilerplateA Diazo theme is basically a resource directory


Use Plone Default as YourBase

Don't use Sunburst (Plone 4 Theme)Navbar will still be styledAlso note that the main_template now uses HTML5 elements


Reduce Number of TemplateOverrides

Includes skins and z3c.jbotDo as much as possible with DiazoSome templates will be relocated in Plone 5Upgrading Plone is easier when you don't have to manage thetemplate overridesWhen you do override a template, add a note of what versionit came from


Create View TemplatesIn configure.zcml:

<browser:page for="*" name="homepage" class=".homepageview.HomePageView" template="homepageview.pt" permission="zope2.View" />

This template is accessible at yoursite.com/@@homepage, sowith Diazo:

<replace css:theme="#content" css:content="#home" href="/@@homepage"/>


What changes are happeningwith the Internet?

Supported TechnologiesBrowser UsageResponsive Themes


Supported TechnologiesHTML5CSS3SVG imageshttp://caniuse.com/


Browser StatsChrome, FF, IE11, Safari iPad, IE8-10


Browser StatsLook at your site's analyticsIE6 is "dead"!


Responsive ThemesFairly easy to implementDon't need a separate site or an app for mobileUse the viewport <meta> tagUses CSS media queries, tiny bit of JS for navigation toggle


CSS/JS OptimizationPut all CSS and JS files in the resource registriesOrder files in CSS and JS registries to make as few requestsas possible


Image OptimizationUse image spritesUse CSS instead of images where possiblehttp://jpegmini.com, https://tinypng.com


Any Questions/Comments?


Resources and LinksUpdating 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!

https://www.sixfeetup.com/blog/updating-a-traditional-plone-theme

https://plone5.veit-schiele.de/

http://docs.diazo.org/en/latest/index.html

https://github.com/collective/zopeskel.diazotheme

http://caniuse.com/

http://gs.statcounter.com/#browser_version_partially_combined-US-monthly-201405-201405-bar

http://jpegmini.com/

https://tinypng.com/

http://sixfeetup.com/quickref

https://hovercraft.readthedocs.org/en/1.0/

Technology

The Future of [Plone] Theming