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

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 fixesJavascript/MockupSkins removalPlone installercollective.jbotDexterity/PloneFormGen

Meet in Sage room 3235

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

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

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

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

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

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

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

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

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

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

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

What changes are happeningwith the Internet?

Supported TechnologiesBrowser UsageResponsive Themes

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

Supported TechnologiesHTML5CSS3SVG imageshttp://caniuse.com/

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

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

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

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

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

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

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

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

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

Image OptimizationUse image spritesUse CSS instead of images where possiblehttp://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  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!