Theming practices for Drupal. Style Guides

  • 2,581 views
Uploaded 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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,581
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
20
Comments
0
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Theming good practices Cebotari Kirillwww.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 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 http://drupal.org/node/44072 Theme coding conventions http://drupal.org/node/1965 Theme Hook Suggestions http://drupal.org/node/1089656www.wearepropeople.com
  • 7. Themes we use: AdoptiveTheme Omega Zen HTML5 + + + Responsive + + + Mobile-first + + + SASS + + + Grid + + + IE styles + + + RTL + + +www.wearepropeople.com
  • 8. Theming Toolswww.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/viewswww.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-USwww.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 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. 3. MultiClass model: *Back to basicswww.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-fixwww.wearepropeople.com
  • 16. So this block can only have: purple-title circle-list grey-gradient grey-border grid5www.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 messwww.wearepropeople.com
  • 18. What does it lead to: Style Guides Time Saver New (old) model of doing things SASS friendlywww.wearepropeople.com
  • 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. 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/styleguidewww.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/36579366www.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 approachwww.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-guideswww.wearepropeople.com
  • 27. 6. Round-up.www.wearepropeople.com
  • 28. Thanks! Cebotari Chirill twitter: @borzovme web: borzov.mewww.wearepropeople.com