Ticket #9315 (closed PLIP: fixed)
New theme for Plone 4
|Reported by:||limi||Owned by:||limi|
|Keywords:||Cc:||plip-advisories@…, robzonenet, grahamperrin@…, denys.mishunov@…, emanlove|
Description (last modified by limi) (diff)
Proposer: Alexander Limi
Seconder: Steve McMahon
Plone's look is quite dated, and the CSS has grown organically over the years, and is quite messy, inefficient and large. Furthermore, there's a lot of things that we know better how to pull off with the CSS techniques of today, and we have an awesome new way to do layouts with the Deco grids.
It's also a great way to signal progress in the Plone world, since we've had the current look since Plone 1.0.
Proposal & Implementation
- Create a theme based on the new plone.org typography
- Keep the theme color-neutral (black, white, grays), so it meshes with any company logo and doesn't feel like it requires color adjustment for doing the 10-minute-show-it-to-the-boss exercise.
- The theme will be tableless, based on the Deco grid approach which is currently in use on plone.org. It works perfectly in all browsers, including IE6.
- The grid works in both fixed-width and flexible-width modes, we may optionally include a switch for this if we think it's a common operation.
- No substantial markup changes are expected outside of the table removal, class and ID names will be kept.
- The theme will not have the same look as plone.org for the navigation parts, portlets, etc — it will only share the basic typography.
- The theme will probably be using less files than the current theme, since we went a bit overboard there. Probably the same as trunk, 2-3 files + the print/mobile/RTL/IEFixes CSS.
- We will "future-proof" the theme as far as possible to make the transition to something like Deliverance/xdv easy in anticipation for Plone 5.
- The theme will use some CSS3 features, but degrade gracefully (although not identically on browsers like IE6)
- The theme will not use any DTML.
- The theme will be a separate Python package, which is a dependency of Plone. This way, we can make releases independently of the CMFPlone package.
- A new standard theme to replace the current one, living in a separate Python package.
- Complete package includes RTL + Print CSS, and a simple @media-based mobile stylesheet for mobile devices that use WebKit (iPhone, Palm Pre, Android) and Opera (a large variety of handsets)
- Documentation on how Deco grids work.
- List of changed selectors or markup, if any — to make it easy for people to update their existing themes.
- If people reuse parts of the default Plone theme in their own themes, this will obviously change those parts. Generally, existing themes should work unless they address things in a way that depends on tables — table.something, etc. — but that's an easy fix.
- Some re-testing with IE6 will be required — not for the grid framework, but more for things like the peekaboo bug and other standard IE6 issues. The upside is that most of these bugs disappear with the new grid approach, but there's bound to be some.
- Some themes that re-use parts of the Plone 1/2/3 CSS (without copying the code) will have their typography and whatever else changed. This is simple to fix by copying the relevant parts from an old CSS file, though.
- RTL needs some testers, as it is hard to test as a non-native speaker. Most of the existing RTL style sheet applies, though — since we don't change the markup.
- If people have sites deployed using only the standard theme, their site will look different when they upgrade. This could be mitigated by providing the old theme as an add-on that they can download if they really want to keep the old look. My instinct is that people won't care, but packaging up the old CSS in a dedicated product isn't too much work, so should probably be done.
Why not refine and use NuPlone? While NuPlone is a beautiful design, it's not flexible enough to handle being the default theme. It's way too "opinionated" — which is a good thing when you want to make something that looks good, but things like not working with flexible-width layouts, automatic moving of portlets, and stronger visual identity — all conflict somewhat with the "generic" quality that a default theme needs to have. There are several great and neutral design elements from NuPlone that could potentially be carried over (portlet design comes to mind), but NuPlone as a whole is too specific in its goals. It's also a bit too smart for its own good — since it uses some very advanced tricks to get around Plone limitations, it's less "hackable", which is something that the default theme should definitely be.
Won't this take us back to square one, where "every Plone site looks like plone.org"? There's an explicit goal to make it not look like plone.org. It will reuse some of the time-consuming parts to get right (typography, etc), but it won't use the same style except for that.
- Alexander Limi (theme implementation, typography, browser testing)
- Iain Claridge (designer for the current plone.org theme, helping out on the remaining design elements like navigation)
- I will need some help with the actual Python packaging bits, volunteers welcome. :)
Some of the work is already done (the hard parts ;):
- Deco grid system is in production on plone.org, and I have used it extensively outside of Plone for a while. I have also let people that have never used CSS before use it, and it works really well for them — it fits their brain.
- The typography of the design (which is arguably one of the major parts since we're keeping the theme very simple) has been in use on plone.org since the redesign.