Your SlideShare is downloading. ×
Theming practices for Drupal. Style Guides
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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.

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

Published in: Technology

  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 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: