Theming practices for Drupal. Style Guides
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


Theming practices for Drupal. Style Guides



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

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



Total Views
Views on SlideShare
Embed Views



3 Embeds 21 17 3 1



Upload Details

Uploaded via as Microsoft PowerPoint

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.

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

Theming practices for Drupal. Style Guides Presentation Transcript

  • 1. Theming good practices Cebotari
  • 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. Content: 1. Why ‘Theming’ ? 2. What’s Best practices? 3. Multi-class model 4. Style Guides 5. P.P.S. 6.
  • 4. 1. Why ‘Theming’ ? And that’s all. It’s just the part connected to theme
  • 5. 2. Best practiceBest practice is used to describe the process ofdeveloping and following a standard way ofdoing things that multiple organizations canuse.
  • 6. Theme coding standarts. Making your theme semantically correct Theme coding conventions Theme Hook Suggestions
  • 7. Themes we use: AdoptiveTheme Omega Zen HTML5 + + + Responsive + + + Mobile-first + + + SASS + + + Grid + + + IE styles + + + RTL + +
  • 8. Theming
  • 9. Server-side tools: Modules Conditional Stylesheets Sassy* Block Class Menu Class Display Suite Panels Views
  • 10. Browser-side tools: Live CSS Editor Web Developer Code Cola
  • 11. Browser-side tools: jQuery API Browser PerfectPixel MeasureIt! EyeDropper, DevTools Autosave, Build With Chrome
  • 12. Links again30 CSS Best Practices for Beginners Magazine CSS principles and CSS techniques and tools
  • 13. 3. MultiClass model: *Back to
  • 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. 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. So this block can only have: purple-title circle-list grey-gradient grey-border
  • 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. What does it lead to: Style Guides Time Saver New (old) model of doing things SASS
  • 19. Link, what else:Lego thinking (video) resources Frameworks
  • 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. Who uses style guides: Twitter Bootstrap
  • 22. Links: Style Guide module
  • 23. More Links: Designing and Implementing Beautiful, Flexible Interfaces http:// Inventing on Principles
  • 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. 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. Шаблонные сайты VS эксклюзивные сайты GitHub Style Guides CSS 3 Selectors Front-end style Guides
  • 27. 6.
  • 28. Thanks! Cebotari Chirill twitter: @borzovme web: