Mastering zen

1,901 views
1,809 views

Published on

“Mastering Zen 2” slides for presentation given at DrupalCamp Taipei in July 2010.

Published in: Technology
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
1,901
On SlideShare
0
From Embeds
0
Number of Embeds
135
Actions
Shares
0
Downloads
26
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide





















  • * positive margins push against the edges of other divs
    * negative margins move the apparent edge of the divs
  • * positive margins push against the edges of other divs
    * negative margins move the apparent edge of the divs
  • * positive margins push against the edges of other divs
    * negative margins move the apparent edge of the divs
  • * positive margins push against the edges of other divs
    * negative margins move the apparent edge of the divs
  • * positive margins push against the edges of other divs
    * negative margins move the apparent edge of the divs





  • Mastering zen

    1. 1. Mastering Theming with Zen 2 John Albin Wilkins JohnAlbin twitter: @johnalbin
    2. 2. Zen 6.x-2.0 is out!!!
    3. 3. Organdized! Keep your theme directory clean. • css • images • js • templates
    4. 4. One stylesheet to rule them all
    5. 5. One stylesheet to rule them all • Hard to find anything.
    6. 6. One stylesheet to rule them all • Hard to find anything. • Too much scrolling!
    7. 7. One stylesheet to rule them all • Hard to find anything. • Too much scrolling! • Developers use separate files
    8. 8. One stylesheet to rule them all • Hard to find anything. • Too much scrolling! • Developers use separate files • Sauron was evil. Don’t be evil.
    9. 9. 30 stylesheets! ZOMG! • block-editing-rtl.css • layout-liquid-rtl.css • block-editing.css • layout-liquid.css • blocks.css • messages-rtl.css • comments.css • messages.css • drupal6-reference.css • navigation.css • fields.css • nodes.css • forms-rtl.css • page-backgrounds.css • forms.css • pages-rtl.css • html-reset-rtl.css • pages.css • html-reset.css • panels-styles.css • ie.css • print.css • ie6-rtl.css • tabs-rtl.css • ie6.css • tabs.css • layout-fixed-rtl.css • views-styles.css • layout-fixed.css • wireframes.css
    10. 10. 30 stylesheets! ZOMG! • blocks.css • navigation.css • comments.css • nodes.css • fields.css • page-backgrounds.css • forms.css • pages.css • html-reset.css • panels-styles.css • ie.css • print.css • ie6.css • tabs.css • layout-fixed.css • views-styles.css • messages.css
    11. 11. Which stylesheet first?
    12. 12. Which stylesheet first? • html-reset.css — I don’t like reset stylesheets.
    13. 13. Which stylesheet first? • html-reset.css — I don’t like reset stylesheets. • layout-fixed.css — This is just the default.
    14. 14. Which stylesheet first? • html-reset.css — I don’t like reset stylesheets. • layout-fixed.css — This is just the default. • Most stylesheets are grouped by the template file.
    15. 15. Which stylesheet first? • html-reset.css — I don’t like reset stylesheets. • layout-fixed.css — This is just the default. • Most stylesheets are grouped by the template file. • And, yeah, IE still sucks — so you need a fix for the IE 31 stylesheet limit: http://drupal.org/project/ie_css_optimizer
    16. 16. Brief overview of Zen’s Layout method
    17. 17. Brief overview of Zen’s Layout method • Source-ordered HTML: The importance of the pieces of content determines the order in HTML, and not the graphic design.
    18. 18. Brief overview of Zen’s Layout method • Source-ordered HTML: The importance of the pieces of content determines the order in HTML, and not the graphic design. • Flexible layout options:
    19. 19. Brief overview of Zen’s Layout method • Source-ordered HTML: The importance of the pieces of content determines the order in HTML, and not the graphic design. • Flexible layout options: • Fluid (100% width) or fixed-width layout
    20. 20. Brief overview of Zen’s Layout method • Source-ordered HTML: The importance of the pieces of content determines the order in HTML, and not the graphic design. • Flexible layout options: • Fluid (100% width) or fixed-width layout • Optional horizontal navbar
    21. 21. Brief overview of Zen’s Layout method • Source-ordered HTML: The importance of the pieces of content determines the order in HTML, and not the graphic design. • Flexible layout options: • Fluid (100% width) or fixed-width layout • Optional horizontal navbar • 1-3 columns built-in. More columns are possible without mind-bending contortions.
    22. 22. Brief overview of Zen’s Layout method • Source-ordered HTML: The importance of the pieces of content determines the order in HTML, and not the graphic design. • Flexible layout options: • Fluid (100% width) or fixed-width layout • Optional horizontal navbar • 1-3 columns built-in. More columns are possible without mind-bending contortions. • Zen’s default Layout Method is completely pluggable. If you don’t like it, just replace the layout.css file with your own layout
    23. 23. Brief overview of Zen’s Layout method • Source-ordered HTML: The importance of the pieces of content determines the order in HTML, and not the graphic design. • Flexible layout options: • Fluid (100% width) or fixed-width layout • Optional horizontal navbar • 1-3 columns built-in. More columns are possible without mind-bending contortions. • Zen’s default Layout Method is completely pluggable. If you don’t like it, just replace the layout.css file with your own layout
    24. 24. Brief overview of Zen’s Layout method • Source-ordered HTML: The importance of the pieces of content determines the order in HTML, and not the graphic design. • Flexible layout options: • Fluid (100% width) or fixed-width layout • Optional horizontal navbar • 1-3 columns built-in. More columns are possible without mind-bending contortions. • Zen’s default Layout Method is completely pluggable. If you don’t like it, just replace the layout.css file with your own layout
    25. 25. Negative Margins (and positive results) ( These blocks have float: left; )
    26. 26. Negative Margins (and positive results) ( These blocks have float: left; )
    27. 27. Negative Margins (and positive results) ( These blocks have float: left; )
    28. 28. Negative Margins (and positive results) ( These blocks have float: left; )
    29. 29. Negative Margins (and positive results) ( These blocks have float: left; )
    30. 30. Negative Margins (and positive results) ( These blocks have float: left; )
    31. 31. Information Architecture
    32. 32. Information Architecture • Set the source for Main & Secondary Links.
    33. 33. Information Architecture • Set the source for Main & Secondary Links. • Even with separate navigational areas, try to keep most links in the Main menu.
    34. 34. Information Architecture • Set the source for Main & Secondary Links. • Even with separate navigational areas, try to keep most links in the Main menu. • Use “Menu block” module! http://drupal.org/project/menu_block
    35. 35. Accessibility • Skip navigation links • .element-invisible class for making content visually invisible, but still accessible. • Heading navigation means your blocks need headings!
    36. 36. Ask me anything @JohnAlbin

    ×