Theming practices for Drupal. Style Guides

Theming good practices

Cebotari Kirill

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


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


1. Why ‘Theming’ ?
http://drupal.org/project/Themes
And that’s all. It’s just the part connected
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.

Theme coding standarts.
Making your theme semantically correct
http://drupal.org/node/44072

Theme coding conventions

Theme Hook Suggestions


Themes we use:
AdoptiveTheme Omega Zen
HTML5 + + +
Responsive + + +
Mobile-first + + +
SASS + + +
Grid + + +
IE styles + + +
RTL + + +


Theming Tools


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


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


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.


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

3. MultiClass model:

*Back to basics


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;
}


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


So this block can only have:

purple-title
circle-list
grey-gradient
grey-border
grid5


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


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 resources
http://wiki.wearepropeople.md/node/70

CSS Frameworks
http://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.


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


Links:
Style Guide module
http://drupal.org/project/styleguide


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


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


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.


Шаблонные сайты 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


6. Round-up.


Thanks!

Cebotari Chirill
twitter: @borzovme
web: borzov.me


Theming practices for Drupal. Style Guides

Recomendados

Recomendados

Mais conteúdo relacionado

Último

Último (20)

Destaque

Destaque (20)

Theming practices for Drupal. Style Guides