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

1. Theming good practices
Cebotari Kirill
www.wearepropeople.com

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 )
www.wearepropeople.com

3. Content:
1. Why ‘Theming’ ?
2. What’s Best practices?
3. Multi-class model
4. Style Guides
5. P.P.S.
6. Round-up.
www.wearepropeople.com

4. 1. Why ‘Theming’ ?
http://drupal.org/project/Themes
And that’s all. It’s just the part connected
to theme files.
www.wearepropeople.com

5. 2. Best practice
Best practice is used to describe the process of
developing and following a standard way of
doing things that multiple organizations can
use.

6. Theme coding standarts.
Making your theme semantically correct
http://drupal.org/node/44072
Theme coding conventions
http://drupal.org/node/1965
Theme Hook Suggestions
http://drupal.org/node/1089656
www.wearepropeople.com

7. Themes we use:
AdoptiveTheme Omega Zen
HTML5 + + +
Responsive + + +
Mobile-first + + +
SASS + + +
Grid + + +
IE styles + + +
RTL + + +
www.wearepropeople.com

8. Theming Tools
www.wearepropeople.com

9. Server-side tools:
Modules
Conditional Stylesheets http://drupal.org/project/conditional_styles
Sassy* http://drupal.org/project/sassy
Block Class http://drupal.org/project/block_class
Menu Class http://drupal.org/project/menuclass
Display Suite http://drupal.org/project/ds
Panels http://drupal.org/project/panels
Views http://drupal.org/project/views
www.wearepropeople.com

10. Browser-side tools:
Live CSS Editor
https://chrome.google.com/webstore/detail/oelggcmknbjmhkpgjfhakedcfnkgbdpg?hl=en-US
Web Developer
https://chrome.google.com/webstore/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=en-US
Code Cola
https://chrome.google.com/webstore/detail/lomkpheldlbkkfiifcbfifipaofnmnkn?hl=en-US
www.wearepropeople.com

11. Browser-side tools:
jQuery API Browser
https://chrome.google.com/webstore/detail/abefhanahjellfbchdmkjdcchkogijhk?hl=en-US
PerfectPixel
https://chrome.google.com/webstore/detail/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=en-US
MeasureIt!
https://chrome.google.com/webstore/detail/aonjhmdcgbgikgjapjckfkefpphjpgma?hl=en-US
EyeDropper, DevTools Autosave, Build With Chrome etc.
www.wearepropeople.com

12. Links again
30 CSS Best Practices for Beginners
http://net.tutsplus.com/tutorials/html-css-techniques/30-css-best-practices-for-beginners/
Smashing Magazine CSS principles
http://www.smashingmagazine.com/mastering-css-principles-comprehensive-reference-guide/
HTML and CSS techniques and tools
http://drupal.org/node/37156

13. 3. MultiClass model:
*Back to basics
www.wearepropeople.com

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;
}
www.wearepropeople.com

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 .clear-fix
www.wearepropeople.com

16. So this block can only have:
purple-title
circle-list
grey-gradient
grey-border
grid5
www.wearepropeople.com

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 mess
www.wearepropeople.com

18. What does it lead to:
Style Guides
Time Saver
New (old) model of doing things
SASS friendly
www.wearepropeople.com

19. Link, what else:
Lego thinking (video)
http://www.youtube.com/watch?v=F8mZGDFDceU
Theming resources
http://wiki.wearepropeople.md/node/70
CSS Frameworks
http://coding.smashingmagazine.com/2007/09/21/css-frameworks-css-reset-design-from-scratch/

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 samples.
www.wearepropeople.com

21. Who uses style guides:
Twitter Bootstrap http://twitter.github.com/bootstrap/
www.wearepropeople.com

22. Links:
Style Guide module
http://drupal.org/project/styleguide
www.wearepropeople.com

23. More Links:
Designing and Implementing Beautiful, Flexible Interfaces
http://
blip.tv/drupalcon/designing-and-implementing-beautiful-flexible-interfaces-6
Inventing on Principles
https://vimeo.com/36579366
www.wearepropeople.com

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 approach
www.wearepropeople.com

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 any.
www.wearepropeople.com

26. Шаблонные сайты VS эксклюзивные сайты
http://habrahabr.ru/company/twins/blog/148340/
GitHub Style Guides
https://github.com/styleguide/css
CSS 3 Selectors
https://speakerdeck.com/u/rachelandrew/p/css3-selectors
Front-end style Guides
http://24ways.org/2011/front-end-style-guides
www.wearepropeople.com

27. 6. Round-up.
www.wearepropeople.com

28. Thanks!
Cebotari Chirill
twitter: @borzovme
web: borzov.me
www.wearepropeople.com