Post on 13-May-2015
description
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!