Theming practices for Drupal. Style Guides


Published on

Introduction to Drupal theming best practices, multi-class model in theming, style guides and lots of links.

Published in: Technology

Theming practices for Drupal. Style Guides

  1. 1. Theming good practices Cebotari
  2. 2. Start with a sad news: This presentation is not what you thinks it’s about. It’s just my opinion on how we can try to make theming practices good )
  3. 3. Content: 1. Why ‘Theming’ ? 2. What’s Best practices? 3. Multi-class model 4. Style Guides 5. P.P.S. 6.
  4. 4. 1. Why ‘Theming’ ? And that’s all. It’s just the part connected to theme
  5. 5. 2. Best practiceBest practice is used to describe the process ofdeveloping and following a standard way ofdoing things that multiple organizations canuse.
  6. 6. Theme coding standarts. Making your theme semantically correct Theme coding conventions Theme Hook Suggestions
  7. 7. Themes we use: AdoptiveTheme Omega Zen HTML5 + + + Responsive + + + Mobile-first + + + SASS + + + Grid + + + IE styles + + + RTL + +
  8. 8. Theming
  9. 9. Server-side tools: Modules Conditional Stylesheets Sassy* Block Class Menu Class Display Suite Panels Views
  10. 10. Browser-side tools: Live CSS Editor Web Developer Code Cola
  11. 11. Browser-side tools: jQuery API Browser PerfectPixel MeasureIt! EyeDropper, DevTools Autosave, Build With Chrome
  12. 12. Links again30 CSS Best Practices for Beginners Magazine CSS principles and CSS techniques and tools
  13. 13. 3. MultiClass model: *Back to
  14. 14. Similar properties of elements combined into a simple class, like: .grey-border { border: 1px #ddd solid; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
  15. 15. Any classes you want: .white-border .no-space .simple-menu .grey-border .last-item .imaged-menu .grid3 .slider .iconed .grid5 .bordered-image .btn .light-gradient .padd15 .full-table .dark-gradient .padd30 .highlight-table .full-width .no-margin .white-box .clear-space .mar15 .black-box .purple .image-left .imaged-list .orange .image-right
  16. 16. So this block can only have: purple-title circle-list grey-gradient grey-border
  17. 17. Pros and Cons: + Can move parts from one project to another + Doesn’t create useless repeats in css + Can be used for style guide + Easy to add new styles + Part of theming turns into simple class adding - Overriding styles for different pages - God damn classes everywhere! - Can be a real
  18. 18. What does it lead to: Style Guides Time Saver New (old) model of doing things SASS
  19. 19. Link, what else:Lego thinking (video) resources Frameworks
  20. 20. 4. Style Guides: A style guide is a set of standards for the writing and design of documents, either for general use or for a specific publication, organization or field. So theming style guide would be a set of rules and standards to be used all over the web application. Most important, it includes ready-made
  21. 21. Who uses style guides: Twitter Bootstrap
  22. 22. Links: Style Guide module
  23. 23. More Links: Designing and Implementing Beautiful, Flexible Interfaces http:// Inventing on Principles
  24. 24. Style guides ftw: • Change the thinking from ‘using a framework’ to ‘suing a style guide’ • Creating (new) standards for Front-end developers • More client-friendly
  25. 25. 5. P.P.S It doesn’t matter what tools you use, what practices, methods or style guides. It’s the way you can define a pattern for your work and share your practices with community We can define standards in theming and follow them only when we have
  26. 26. Шаблонные сайты VS эксклюзивные сайты GitHub Style Guides CSS 3 Selectors Front-end style Guides
  27. 27. 6.
  28. 28. Thanks! Cebotari Chirill twitter: @borzovme web:
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.