The Future of [Plone] Theming

  • 517 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
517
On Slideshare
0
From Embeds
0
Number of Embeds
9

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. What changes in Plone 5? Diazo is the default theming story The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014
  • 3. What changes in Plone 5? portal_skins becomes deprecated The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014
  • 4. What changes in Plone 5? New theme: The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014
  • 5. What changes in Plone 5? Uses Chameleon for templates The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014
  • 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. 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. 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. 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. 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. 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. 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. 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. Supported Technologies HTML5 CSS3 SVG images http://caniuse.com/ The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014
  • 15. Browser Stats Chrome, FF, IE11, Safari iPad, IE8-10 The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014
  • 16. Browser Stats Look at your site's analytics IE6 is "dead"! The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014
  • 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. 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. 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. Any Questions/Comments? The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014
  • 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!