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

Adapting a Site Template

Using Drupal Themes and SASS/LESS

Responsive Design

• Screen size

• Reorder, show or hide

Some Tools to Use• SASS

• What are pre-processors

• Mixins!

• Little example

• Semantic CSS Vs. Non-semantic

• Frameworks

• Bootstrap

• Zurb Foundation

• Zen Grids

Remember!• Get a template

• Use same framework or similar

• Start locally

• Easy Vs not so easy

• Using classes

• Using Mixins

What we use• Fences

• Block Class

• Node Class

• Views

• DS & Extras

• Field Groups

• Panels

• Views Responsive Grid

• Flexslider / Nivo Slider

• Title

• Blockify

• Extra Modules

First Things First, Will It Look Nice?

• The Template search.

• What should I look for.

• My rationale.

• You are not alone.

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

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)

Plan Wisely• Design Content types

• What is in place.

• Manage Display (DS).

• Create Views (Global Text)..

• Panels.

• Existing Modules

• JQuery Scripts

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.

• Remember, You Are Not Alone.

Check progress

• Using Firebug to debug

• Mobile debugging

• Screen size vs remote debugging.

What Am I Missing?Shoot your questions and comments!