The Future of [Plone] Theming
Upcoming SlideShare
Loading in...5
×
 

The Future of [Plone] Theming

on

  • 503 views

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

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

Statistics

Views

Total Views
503
Views on SlideShare
204
Embed Views
299

Actions

Likes
0
Downloads
2
Comments
0

7 Embeds 299

http://www.sixfeetup.com 287
http://feeds.feedburner.com 4
https://twitter.com 3
http://feedly.com 2
http://reader.aol.com 1
http://translate.googleusercontent.com 1
http://self-terminative10.rssing.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

The Future of [Plone] Theming The Future of [Plone] Theming Presentation Transcript

  • 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
  • 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 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • What changes are happening with the Internet? Supported Technologies Browser Usage Responsive Themes The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014
  • Supported Technologies HTML5 CSS3 SVG images http://caniuse.com/ The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014
  • Browser Stats Chrome, FF, IE11, Safari iPad, IE8-10 The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014
  • Browser Stats Look at your site's analytics IE6 is "dead"! The Future of [Plone] Theming - Chrissy Wainwright - Plone Symposium Midwest 2014
  • 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
  • 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
  • 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
  • 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://caniuse.com StatCounter  May  2014 http://jpegmini.com,  https://tinypng.com http://sixfeetup.com/quickref Presentation  created  with  Hovercraft!