In this talk, using a real case scenario (taken from the presenter's experience), we will see how it is possible to fit onto Plone a design that wasn't made for it, and what tools and methodologies to employ to do it in the best possible way.
This is a task that a large part of the audience probably encountered more than one time in their professional career, and the purpose of this talk is to expose:
The challenges that one has to encounter when shifting from the designer table to the muddy world of markup and code
Tips and tricks on how to get yourself out of the aforementioned mud
Learning to be bold and venturing out of your comfort zone
2. Theming
What is theming?
Adding decorations CSS
Altering structure Configuration, Diazo
Modifying user experience Diazo, Programming
Paint it Plone! — Simone Deponti for Abstract
3. Theming The process
1. Mockups by designer
2. HTML mockups
a. Widget library
3. Integration with backend
Paint it Plone! — Simone Deponti for Abstract
4. Theming The cast
1. Wireframe
2. Mockups
3. UX customizations
4. Static theme
5. Diazo rules
6. Custom templates
Paint it Plone! — Simone Deponti for Abstract
6. The dawn of a design
Good Bad
Wireframes Printed stuff
Mockups with specs No specs
Modular design No patterns
Paint it Plone! — Simone Deponti for Abstract
7. Ratio
« The relationship in quantity, amount, or size between two or more things
— Definition of ratio
Web pages have to adapt to different sizes and resolutions, making absolute measurement very
difficult. But you can try to maintain a pattern with proportions, which is fundamental for:
Legibility
Usability
Aesthetics
Paint it Plone! — Simone Deponti for Abstract
8. What to measure
1. Font sizes (headings and normal text)
2. Paddings, margins, interlines
3. Elements
4. Lines (borders, graphic signs, etc)
Paint it Plone! — Simone Deponti for Abstract
9. I forgot my phone!
It's not necessary to start your design with
mobile experience in mind, but it helps.
However, it's not possible to entirely
delegate the mobile experience to
implementation time, you need to go back
to the drawing board for that.
Progressive enhancement currently
doesn't perform so well
Paint it Plone! — Simone Deponti for Abstract
10. Playing with blocks
Do not focus on decorations
Instead focus on typography, elements, and make something that works well with no decorations and
in black & white.
Colors and graphics elements enhance the experience, they cannot create it alone
Paint it Plone! — Simone Deponti for Abstract
12. Johannes' legacy
Fun fact
Gutenberg's Bible is still one of the pinnacles of the art of typography, being one of the very few
printed books that can rival with carefully handcrafted books (as done by scribes) in terms of
beauty.
Screen typography is even harder:
Hinting is crucial
Hinting is boring and hard
Many free fonts are not well hinted
Font rendering systems vary wildly
Paint it Plone! — Simone Deponti for Abstract
13. Getting text wrong
Bad Good
Fusce pulvinar justo inantetristiquevitae porta nisi elementum. In ipsum quam, suscipit Fusce pulvinar justo inantetristiquevitae porta nisi elementum. In ipsum
velpellentesque a, porttitor tempus mi. Aliquam at orcilobortis metus venenatis facilisis.
quam, suscipit velpellentesque a, porttitor tempus mi. Aliquam at
Nulla nisl sapien, elementum eu lobortis a, auctor sit amet nunc.
orcilobortis metus venenatis facilisis.
Proin urna nulla, imperdietinplacerateu, vehicula sit amet neque.
Nulla nisl sapien, elementum eu lobortis a, auctor sit amet nunc.
Proin urna nulla, imperdietinplacerateu, vehicula sit amet neque.
Lorem ipsum dolor
Integer mollis, augue et molestie rutrum, lorem velit fringilla ipsum, eget
pellentesque tortor purus eu enim. Lorem ipsum dolor
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere Integer mollis, augue et molestie rutrum, lorem velit
cubilia Curae; Nam nunc diam, pellentesque eget eleifend sed, fringilla ipsum, eget pellentesque tortor purus eu enim.
consectetur nec felis. Ut ac felis nisi.
Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Nam nunc diam,
pellentesque eget eleifend sed, consectetur nec felis.
Ut ac felis nisi.
Paint it Plone! — Simone Deponti for Abstract
16. What's a grid?
A grid is:
1. A creative constraint
2. The exoskeleton of the page
3. Something that helps in placing stuff
Paint it Plone! — Simone Deponti for Abstract
17. What grid?
Avoid fluid grids.
Obvious, recommended choice
The Deco grid system, Plone's builtin
More original choice
Get a prebuilt one (personal preferences: cssgrid, frameless)
Not-as-crazy-as-it-sounds choice
Make your own
Paint it Plone! — Simone Deponti for Abstract
18. Making your own
You can make a grid that is also a layout engine.
With a good starting point (Golden Grid System) it's not that hard.
When doing responsive design, not all layouts are possible (a 16-column grid has 16! possible layouts).
Optimize/tweak only for the layouts you use.
Paint it Plone! — Simone Deponti for Abstract
20. LESS vs SASS
LESS SASS
Easier to setup Feature complete
Works client side (great for development) Slightly more difficult to set up
Lacks a couple features Ruby
Javascript & node.js
Paint it Plone! — Simone Deponti for Abstract
22. Owh, my brain
LESS CSS
.mixin1() { .tst3 {
@media all { color: grey;
.tst { }
color: black; @media all {
@media screen { .tst {
color: red; color: black;
.tst3 { }
color: white; }
} @media all and screen {
} .tst {
} color: red;
} }
} .tst .tst3 {
.tst3 { color: white;
color: grey; }
} }
.mixin1();
Paint it Plone! — Simone Deponti for Abstract
23. Colors
Question
What is the hexadecimal value ( #XXXXXX ) for a dark, desaturated yellow?
Modern browsers have hsl() ( hsl(60, 30%, 30%); ).
IE (6|7|8): What about us?
Using a CSS preprocessor helps: desaturate(darken(yellow, 30%), 30%);
Paint it Plone! — Simone Deponti for Abstract
25. Dissociative identity disorder
China is the only country still using IE6 widely, 21.3% still use IE6 (source: ie6countdown.com)
Internet Explorer usage in 2012, by version
Region IE 9 IE 8 IE 7 IE 6
Worldwide 15.22% 15.10% 2.15% 0.90%
Europe 14.79% 12.05% 1.70% 0.47%
North America 16.97% 12.05% 2.60% 0.62%
South America 11.45% 14.11% 1.42% 0.56%
Asia 10.85% 18.13% 2.40% 2.04% (but 16.88% in China)
Africa 8.84% 12.43% 1.73% 1.53%
Oceania 20.79% 14.22% 1.76% 0.47%
Percentage of total market, data by gs.statcounter.com Paint it Plone! — Simone Deponti for Abstract
26. Bugs affecting IE
Internet Explorer bugs, by version
Version Bugs/missing features
6 No > , + , tag[attr="value"] , position: fixed , buggy .class1.class2 , :hover only on links, buggy overflow: visible .
No (max|min)-(width|height)
7 No :before , :after , :focus , buggy :first-child , buggy position: fixed , broken box model and no way to have a
border that doesn't take up space.
Also incomplete table styling (forget about playing with borders) and handling of whitespace.
8 No CSS3 whatsoever, including :last-child .
Webfonts look ugly.
:first-child , + , do not behave correctly when you add/remove elements
9 Not substantially better or worse than any other browser
Paint it Plone! — Simone Deponti for Abstract
27. IE tricks
Use modernizr.js to include browser-specific optimizations.
Use Javascript to add classes where you are missing selectors (e.g. :first-child and :last-child ).
Throw away borders for browsers with an incomplete box model.
Paint it Plone! — Simone Deponti for Abstract
29. Models and policies
There are too many page types for a designer to come up with a full mockup of each.
However, if you decompose each page in a layout and a set of widgets, things are easier to design and
mock.
This also reminds me of something else that began with D.
Paint it Plone! — Simone Deponti for Abstract
30. Bootstrap The lesson
Bootstrap is more than a default set of CSS.
It provides a documented set of widgets, where it's easy to pick the one that fits best thanks to visual
examples, and just using the correct markup does the job.
And the whole system is coherent and cohesive, allowing you to mix & match.
Paint it Plone! — Simone Deponti for Abstract
31. Bootstrap The opportunity
Nothing prevents you to do what Bootstrap does.
Catalog and document all of your widgets in a static template, and plone.app.theming will serve it over
the ++theme++ traversal namespace.
It doesn't need to be as wide or as encompassing as Bootstrap , but it's a very good starting point.
Paint it Plone! — Simone Deponti for Abstract
33. Useful markup
Tables
Tabs
Portlets
Breadcrumbs
Navigation
Edit bar
Paint it Plone! — Simone Deponti for Abstract
34. Useful Javascript
modernizr
jQuery
jQueryTools (tabs, overlays)
jQueryUI (currently as add-on)
Paint it Plone! — Simone Deponti for Abstract
35. Diazo tricks
A few parts of Diazo often overlooked or misunderstood.
Wrapping stuff classA is classB
<replace css:content="#my-content"> <replace css:content=".classA">
<div id="my-wrapper" class="a-class"> <xsl:copy select="node()">
<div class="another-class"> <xsl:attribute name="class">
<xsl:apply-templates select="node()" /> <xsl:value-of select="./@class" /> classB
</div> </xsl:attribute>
</div> <xsl:apply-templates />
</replace> </xsl:copy>
</replace>
if ... elif ... else and
<rules css:if-content="#foo"> ... </rules>
<rules css:if-content="#bar"> ... </rules> <rules css:if-content="#foo">
<rules css:if-not-content="#foo, #bar"> ... </rules> <rules css:if-content="#bar"> ... </rules>
</rules>
Paint it Plone! — Simone Deponti for Abstract
36. Using jbot
There are situations in which using Diazo is overkill.
Then you shall use jbot.
When to do that:
1. When it's a small component.
2. When it would require the use of advanced XSLT to morph the original HTML.
Paint it Plone! — Simone Deponti for Abstract
37.
38. Questions?
Paint it Plone! — Simone Deponti for Abstract