Adapting a Site
Template
Using Drupal Themes and SASS/LESS
Responsive Design

•

Screen size

•

Reorder, show or hide
Some Tools to Use
•

SASS
•
•

Mixins!

•

Little example

•
•

What are pre-processors

Semantic CSS Vs. Non-semantic

Fr...
Remember!
•

Get a template

•

Use same framework or
similar

•

Start locally

•

Easy Vs not so easy
•

Using classes

...
What we use
•

Fences

•

Panels

•

Block Class

•

Views Responsive Grid

•

Node Class

•

Flexslider / Nivo Slider

•
...
First Things First, Will It
Look Nice?
•

The Template search.

•

What should I look for.

•

My rationale.

•

You are n...
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 ...
And The Force May Be
With Us If…
•

Start Top to bottom

•

Attack one section Feature at a time

•

Convert to SASS /
LES...
Plan Wisely
•

Design Content types

•

Panels.

•

What is in place.

•

Existing Modules

•

Manage Display (DS).

•

JQ...
The Grid Is The
Backbone
Design the Grid per
device
•

Adding grid clases

•

Using Mixins
Fill It Nicely
•

Apply the “Prettiness”.

•

Use SASS Changes and create mixins as desired

•

Applying the javascripts.
...
Check progress
•

Using Firebug to debug

•

Mobile debugging

•

Screen size vs remote
debugging.
What Am I Missing?
Shoot your questions and comments!
Upcoming SlideShare
Loading in …5
×

Convert a Site Template to a Drupal 7 Theme using SASS or LESS and Zurb Foundation or Twitter Bootstrap

3,150 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Convert a Site Template to a Drupal 7 Theme using SASS or LESS and Zurb Foundation or Twitter Bootstrap

  1. 1. Adapting a Site Template Using Drupal Themes and SASS/LESS
  2. 2. Responsive Design • Screen size • Reorder, show or hide
  3. 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. 4. Remember! • Get a template • Use same framework or similar • Start locally • Easy Vs not so easy • Using classes • Using Mixins
  5. 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. 6. First Things First, Will It Look Nice? • The Template search. • What should I look for. • My rationale. • You are not alone.
  7. 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. 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. 9. Plan Wisely • Design Content types • Panels. • What is in place. • Existing Modules • Manage Display (DS). • JQuery Scripts • Create Views (Global Text)..
  10. 10. The Grid Is The Backbone Design the Grid per device • Adding grid clases • Using Mixins
  11. 11. Fill It Nicely • Apply the “Prettiness”. • Use SASS Changes and create mixins as desired • Applying the javascripts. • Remember, You Are Not Alone.
  12. 12. Check progress • Using Firebug to debug • Mobile debugging • Screen size vs remote debugging.
  13. 13. What Am I Missing? Shoot your questions and comments!

×