0
The Future of [Plone]
Theming
Chrissy Wainwright
How theming changes in Plone 5 and front-end development in
general.
The ...
What changes in Plone 5?
Diazo is the default theming story
The Future of [Plone] Theming - Chrissy Wainwright - Plone Sym...
What changes in Plone 5?
portal_skins becomes deprecated
The Future of [Plone] Theming - Chrissy Wainwright - Plone Sympos...
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...
What changes in Plone 5?
Lots of other things (go check it out!)
https://plone5.veit-schiele.de (demo site)
http://plone.o...
Help prepare Plone 5!
Sprints this weekend:
Plone 5 bug fixes
Javascript/Mockup
Skins removal
Plone installer
collective.j...
How can you future-proof a
Plone theme?
Make it a Diazo theme
Use Plone Default as the base theme
Reduce number of templat...
Make a Diazo Theme
Diazo is a method of mapping dynamic content to a static
theme
zopeskel.diazotheme for boilerplate
A Di...
Use Plone Default as Your
Base
Don't use Sunburst (Plone 4 Theme)
Navbar will still be styled
Also note that the main_temp...
Reduce Number of Template
Overrides
Includes skins and z3c.jbot
Do as much as possible with Diazo
Some templates will be r...
Create View Templates
In configure.zcml:
<browser:page
for="*"
name="homepage"
class=".homepageview.HomePageView"
template...
What changes are happening
with the Internet?
Supported Technologies
Browser Usage
Responsive Themes
The Future of [Plone]...
Supported Technologies
HTML5
CSS3
SVG images
http://caniuse.com/
The Future of [Plone] Theming - Chrissy Wainwright - Plon...
Browser Stats
Chrome, FF, IE11, Safari iPad, IE8-10
The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium M...
Browser Stats
Look at your site's analytics
IE6 is "dead"!
The Future of [Plone] Theming - Chrissy Wainwright - Plone Symp...
Responsive Themes
Fairly easy to implement
Don't need a separate site or an app for mobile
Use the viewport <meta> tag
Use...
CSS/JS Optimization
Put all CSS and JS files in the resource registries
Order files in CSS and JS registries to make as fe...
Image Optimization
Use image sprites
Use CSS instead of images where possible
http://jpegmini.com, https://tinypng.com
The...
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:...
Upcoming SlideShare
Loading in...5
×

The Future of [Plone] Theming

697

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
697
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "The Future of [Plone] Theming"

  1. 1. 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
  2. 2. What changes in Plone 5? Diazo is the default theming story The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014
  3. 3. What changes in Plone 5? portal_skins becomes deprecated The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014
  4. 4. What changes in Plone 5? New theme: The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014
  5. 5. What changes in Plone 5? Uses Chameleon for templates The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014
  6. 6. 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
  7. 7. 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
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. 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
  13. 13. What changes are happening with the Internet? Supported Technologies Browser Usage Responsive Themes The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014
  14. 14. Supported Technologies HTML5 CSS3 SVG images http://caniuse.com/ The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014
  15. 15. Browser Stats Chrome, FF, IE11, Safari iPad, IE8-10 The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014
  16. 16. Browser Stats Look at your site's analytics IE6 is "dead"! The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014
  17. 17. 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
  18. 18. 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
  19. 19. 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
  20. 20. Any Questions/Comments? The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014
  21. 21. 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!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×