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

Theming practices for Drupal. Style Guides

on

  • 2,134 views

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.

Statistics

Views

Total Views
2,134
Views on SlideShare
2,113
Embed Views
21

Actions

Likes
5
Downloads
17
Comments
0

3 Embeds 21

http://local.minesandmoney.com 17
http://local.beacon.com 3
https://twitter.com 1

Accessibility

Categories

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.

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

Theming practices for Drupal. Style Guides Theming practices for Drupal. Style Guides Presentation Transcript

  • Theming good practices Cebotari Kirillwww.wearepropeople.com
  • 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
  • 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 View slide
  • 1. Why ‘Theming’ ? http://drupal.org/project/Themes And that’s all. It’s just the part connected to theme files.www.wearepropeople.com View slide
  • 2. Best practiceBest practice is used to describe the process ofdeveloping and following a standard way ofdoing things that multiple organizations canuse.
  • 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
  • Themes we use: AdoptiveTheme Omega Zen HTML5 + + + Responsive + + + Mobile-first + + + SASS + + + Grid + + + IE styles + + + RTL + + +www.wearepropeople.com
  • Theming Toolswww.wearepropeople.com
  • 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
  • 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
  • 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
  • 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
  • 3. MultiClass model: *Back to basicswww.wearepropeople.com
  • 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
  • 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
  • So this block can only have: purple-title circle-list grey-gradient grey-border grid5www.wearepropeople.com
  • 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
  • What does it lead to: Style Guides Time Saver New (old) model of doing things SASS friendlywww.wearepropeople.com
  • 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/
  • 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
  • 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:// blip.tv/drupalcon/designing-and-implementing-beautiful-flexible-interfaces-6 Inventing on Principles https://vimeo.com/36579366www.wearepropeople.com
  • 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
  • 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
  • Шаблонные сайты 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
  • 6. Round-up.www.wearepropeople.com
  • Thanks! Cebotari Chirill twitter: @borzovme web: borzov.mewww.wearepropeople.com