Theming good practices                Cebotari Kirillwww.wearepropeople.com
Start with a sad news:                This presentation is not what                you thinks it’s about.               It...
Content:                   1.    Why ‘Theming’ ?                   2.    What’s Best practices?                   3.    Mu...
1. Why ‘Theming’ ?                http://drupal.org/project/Themes                And that’s all. It’s just the part   con...
2. Best practiceBest practice is used to describe the process ofdeveloping and following a standard way ofdoing things tha...
Theme coding standarts.                Making your theme semantically correct                http://drupal.org/node/44072 ...
Themes we use:                          AdoptiveTheme   Omega   Zen              HTML5            +            +     +    ...
Theming Toolswww.wearepropeople.com
Server-side tools:               Modules               Conditional Stylesheets     http://drupal.org/project/conditional_s...
Browser-side tools:               Live CSS Editor               https://chrome.google.com/webstore/detail/oelggcmknbjmhkpg...
Browser-side tools:               jQuery API Browser               https://chrome.google.com/webstore/detail/abefhanahjell...
Links again30 CSS Best Practices for Beginnershttp://net.tutsplus.com/tutorials/html-css-techniques/30-css-best-practices-...
3. MultiClass model:                               *Back to basicswww.wearepropeople.com
Similar properties of elements                         combined into a simple class, like:                         .grey-b...
Any classes you want:               .white-border     .no-space         .simple-menu               .grey-border      .last...
So this block can only have:                               purple-title                               circle-list         ...
Pros and Cons:                 + Can move parts from one project to another                 + Doesn’t create useless repea...
What does it lead to:                     Style Guides                     Time Saver                     New (old) model ...
Link, what else:Lego thinking (video)http://www.youtube.com/watch?v=F8mZGDFDceUTheming resourceshttp://wiki.wearepropeople...
4. Style Guides:            A style guide is a set of standards for the writing and            design of documents, either...
Who uses style guides:            Twitter Bootstrap http://twitter.github.com/bootstrap/www.wearepropeople.com
Links:                Style Guide module                http://drupal.org/project/styleguidewww.wearepropeople.com
More Links:               Designing and Implementing Beautiful, Flexible Interfaces               http://               bl...
Style guides ftw:               • Change the thinking from ‘using a framework’ to ‘suing a style               guide’     ...
5. P.P.S               It doesn’t matter what tools you use,               what practices, methods or style guides.       ...
Шаблонные сайты VS эксклюзивные сайты               http://habrahabr.ru/company/twins/blog/148340/               GitHub St...
6. Round-up.www.wearepropeople.com
Thanks!               Cebotari Chirill               twitter: @borzovme               web: borzov.mewww.wearepropeople.com
Upcoming SlideShare
Loading in...5
×

Theming practices for Drupal. Style Guides

2,769

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 Kirillwww.wearepropeople.com
  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 )www.wearepropeople.com
  3. 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. 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. 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 http://drupal.org/node/44072 Theme coding conventions http://drupal.org/node/1965 Theme Hook Suggestions http://drupal.org/node/1089656www.wearepropeople.com
  7. 7. Themes we use: AdoptiveTheme Omega Zen HTML5 + + + Responsive + + + Mobile-first + + + SASS + + + Grid + + + IE styles + + + RTL + + +www.wearepropeople.com
  8. 8. Theming Toolswww.wearepropeople.com
  9. 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/viewswww.wearepropeople.com
  10. 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-USwww.wearepropeople.com
  11. 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. 12. Links again30 CSS Best Practices for Beginnershttp://net.tutsplus.com/tutorials/html-css-techniques/30-css-best-practices-for-beginners/Smashing Magazine CSS principleshttp://www.smashingmagazine.com/mastering-css-principles-comprehensive-reference-guide/HTML and CSS techniques and toolshttp://drupal.org/node/37156
  13. 13. 3. MultiClass model: *Back to basicswww.wearepropeople.com
  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; }www.wearepropeople.com
  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 .clear-fixwww.wearepropeople.com
  16. 16. So this block can only have: purple-title circle-list grey-gradient grey-border grid5www.wearepropeople.com
  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 messwww.wearepropeople.com
  18. 18. What does it lead to: Style Guides Time Saver New (old) model of doing things SASS friendlywww.wearepropeople.com
  19. 19. Link, what else:Lego thinking (video)http://www.youtube.com/watch?v=F8mZGDFDceUTheming resourceshttp://wiki.wearepropeople.md/node/70CSS Frameworkshttp://coding.smashingmagazine.com/2007/09/21/css-frameworks-css-reset-design-from-scratch/
  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 samples.www.wearepropeople.com
  21. 21. Who uses style guides: Twitter Bootstrap http://twitter.github.com/bootstrap/www.wearepropeople.com
  22. 22. Links: Style Guide module http://drupal.org/project/styleguidewww.wearepropeople.com
  23. 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/36579366www.wearepropeople.com
  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 approachwww.wearepropeople.com
  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 any.www.wearepropeople.com
  26. 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-guideswww.wearepropeople.com
  27. 27. 6. Round-up.www.wearepropeople.com
  28. 28. Thanks! Cebotari Chirill twitter: @borzovme web: borzov.mewww.wearepropeople.com
  1. A particular slide catching your eye?

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

×