This is a recap of Chrissy Wainwright's talk at PSM 2014
The Future of [Plone] Theming from cdw9
What's New in Plone 5?
- Diazo is the default theming story
- portal_skins becomes deprecated
- There is a new default Plone theme
- Uses Chameleon for templates
- Lots of other things (go check it out!)
- https://plone5.veit-schiele.de (demo site)
- http://plone.org/try-five (download)
How can you future-proof a Plone theme?
- Make it a Diazo theme
- Use Plone Default as the base theme
- Reduce the number of template overrides
- Turn custom skins templates into view templates
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
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
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
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"/>
What changes are happening with the Internet?
- Supported Technologies
- Browser Usage
- Responsive Themes
Supported Technologies
- HTML5
- CSS3
- SVG images
- http://caniuse.com/
Browser Usage
- Focus on Chrome, FF, IE11, Safari iPad, IE8-10
- Look at your site's analytics IE6 is "dead"!
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
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
Image Optimization
- Use image sprites
- Use CSS instead of images where possible
- http://jpegmini.com
- https://tinypng.com
Learn More:
