Theming practices for Drupal. Style Guides
28
Theming good practices www.wearepropeople.com Cebotari Kirill
-
Upload
kirill-borzov -
Category
Technology
-
view
2.775 -
download
3
Transcript of Theming practices for Drupal. Style Guides
Start with a sad news:
This presentation is not what you thinks it’s about.
www.wearepropeople.com
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 model4. Style Guides5. P.P.S.6. Round-up.
www.wearepropeople.com
1. Why ‘Theming’ ?http://drupal.org/project/Themes
And that’s all. It’s just the partconnected to theme files.
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.
www.wearepropeople.com
Theme coding standarts.
Making your theme semantically correcthttp://drupal.org/node/44072
Theme coding conventionshttp://drupal.org/node/1965
Theme Hook Suggestionshttp://drupal.org/node/1089656
www.wearepropeople.com
Themes we use:
AdoptiveTheme Omega Zen
+ + ++ + ++ + ++ + ++ + ++ + ++ + +
HTML5ResponsiveMobile-first
SASSGrid
IE stylesRTL
www.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/views
www.wearepropeople.com
Browser-side tools:
Live CSS Editorhttps://chrome.google.com/webstore/detail/oelggcmknbjmhkpgjfhakedcfnkgbdpg?hl=en-US
Web Developerhttps://chrome.google.com/webstore/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=en-US
Code Colahttps://chrome.google.com/webstore/detail/lomkpheldlbkkfiifcbfifipaofnmnkn?hl=en-US
www.wearepropeople.com
Browser-side tools:
jQuery API Browserhttps://chrome.google.com/webstore/detail/abefhanahjellfbchdmkjdcchkogijhk?hl=en-US
PerfectPixelhttps://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.
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
www.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
.grey-border
.grid3
.grid5
.light-gradient
.dark-gradient
.full-width
.clear-space
.purple
.orange
.no-space
.last-item
.slider
.bordered-image.padd15.padd30.no-margin.mar15.image-left.image-right
.simple-menu
.imaged-menu
.iconed
.btn
.full-table
.highlight-table.white-box.black-box.imaged-list.clear-fix
www.wearepropeople.com
So this block can only have:
purple-titlecircle-listgrey-gradientgrey-bordergrid5
www.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 mess
www.wearepropeople.com
What does it lead to:
Style Guides
Time Saver
New (old) model of doing things
SASS friendly
Link, what else:Lego thinking (video)http://www.youtube.com/watch?v=F8mZGDFDceU
Theming resourceshttp://wiki.wearepropeople.md/node/70
CSS Frameworkshttp://coding.smashingmagazine.com/2007/09/21/css-frameworks-css-reset-design-from-scratch/
www.wearepropeople.com
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 modulehttp://drupal.org/project/styleguide
www.wearepropeople.com
More Links:
Designing and Implementing Beautiful, Flexible Interfaceshttp://blip.tv/drupalcon/designing-and-implementing-beautiful-flexible-interfaces-6318672
Inventing on Principleshttps://vimeo.com/36579366
www.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 approach
www.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 workand share your practices with community
We can define standards in theming and follow themonly when we have any.
www.wearepropeople.com
Шаблонные сайты VS эксклюзивные сайтыhttp://habrahabr.ru/company/twins/blog/148340/
GitHub Style Guideshttps://github.com/styleguide/css
CSS 3 Selectorshttps://speakerdeck.com/u/rachelandrew/p/css3-selectors
Front-end style Guideshttp://24ways.org/2011/front-end-style-guides
www.wearepropeople.com
6. Round-up.
www.wearepropeople.com
Thanks!
Cebotari Chirill
twitter: @borzovmeweb: borzov.me
