The combination of Sass, organized partials, a comprehensive style guide, along with some old fashioned planning and common sense can keep your project organized no matter how large it grows or how many new features are added. In this session, I'll cover a strategy that helps keep your theme styles more organized, efficient, scalable, and easier to maintain.
1. THEMING AIN’T EASY
BUT IT’S NECESSARY
How to make your job as a themer less complicated
while simultaneously making it more complicated.
Ryan Blyth // @ryan_blyth
Saturday, June 29, 13
2. •You are using Sass
•You are starting from scratch with your styles
A couple assumptions to get out of the way:
Saturday, June 29, 13
4. What is a Sass partial?
Sass file that starts with an underscore and is not directly
compiled into CSS. That partial file is then imported into
another file where it is eventually compiled into CSS.
Saturday, June 29, 13
12. BASE
Base rules are the defaults.They are almost exclusively
single element selectors but it could include attribute
selectors, pseudo-class selectors, child selectors or sibling
selectors. Essentially, a base style says that wherever this
element is on the page, it should look like this.
http://smacss.com/book/type-base
Saturday, June 29, 13
13. LAYOUT
Layout rules divide the page into sections. Layouts hold
one or more modules together.
http://smacss.com/book/type-layout
Saturday, June 29, 13
14. MODULE
Modules the reusable, modular parts of our design.They
are the callouts, the sidebar sections, the product lists and
so on.
http://smacss.com/book/type-module
Saturday, June 29, 13
54. DRUPAL MARKUP AND CLASSES
• ThemeTemplate Files
• Preprocess Functions
• Theme Functions
• Custom Modules
• Contributed Modules
• And probably some other ways
Saturday, June 29, 13
55. DRUPAL MARKUP AND CLASSES
Menus
• Menu Attributes
Webforms
• Webform Classes
Fields
• Display Suite
• Fences
• Field Formatter Class
• Semantic Fields
• Field Wrappers
Views
• Views
Blocks
• Block Class
Saturday, June 29, 13