1. Adapting a Site
Template
Using Drupal Themes and SASS/LESS

2. Responsive Design
•
Screen size
•
Reorder, show or hide

3. Some Tools to Use
•
SASS
•
•
Mixins!
•
Little example
•
•
What are pre-processors
Semantic CSS Vs. Non-semantic
Frameworks
•
Bootstrap
•
Zurb Foundation
•
Zen Grids

4. Remember!
•
Get a template
•
Use same framework or
similar
•
Start locally
•
Easy Vs not so easy
•
Using classes
•
Using Mixins

5. What we use
•
Fences
•
Panels
•
Block Class
•
Views Responsive Grid
•
Node Class
•
Flexslider / Nivo Slider
•
Views
•
Title
•
DS & Extras
•
Blockify
•
Field Groups
•
Extra Modules

6. First Things First, Will It
Look Nice?
•
The Template search.
•
What should I look for.
•
My rationale.
•
You are not alone.

7. Try To M.I.S.S. This
•
Keep it in the front end.
•
Fix page.tpl.php only if needed (we want to avoid
this)
•
Why I’ve done it and where

8. And The Force May Be
With Us If…
•
Start Top to bottom
•
Attack one section Feature at a time
•
Convert to SASS /
LESS when possible.
•
Use variables as crazy
(Theme Colors, Fonts)

9. Plan Wisely
•
Design Content types
•
Panels.
•
What is in place.
•
Existing Modules
•
Manage Display (DS).
•
JQuery Scripts
•
Create Views (Global
Text)..

10. The Grid Is The
Backbone
Design the Grid per
device
•
Adding grid clases
•
Using Mixins

11. Fill It Nicely
•
Apply the “Prettiness”.
•
Use SASS Changes and create mixins as desired
•
Applying the javascripts.
•
Remember, You Are Not Alone.

12. Check progress
•
Using Firebug to debug
•
Mobile debugging
•
Screen size vs remote
debugging.

13. What Am I Missing?
Shoot your questions and comments!