Responsive theming and getting started with Foundation 5

As someone who doesn’t do much CSS theming these days, but has noticed the proliferation of Bootstrap themes (and, er, used them occasionally myself), I was interested to find out about other frameworks, particularly with Drupal 7 which isn’t entirely responsive off the bat (a curse on you core CSS!). So I was keen to see Richard Moger‘s talk about using Foundation 5 with Drupal.

Moger wryly noted a key truth with Themeforest themes – while they’re cheap (especially compared to doing the work from scratch), the minute you have do do things with them that aren’t shown on the demo pages things can go very quickly wrong (he even suggested that he suspects that some Drupal themes are made ‘just to look good for the four pages on Themeforest’), which is enough to be wary of them.

While there are Drupal starter themes available such as good ol’ Omega, Moger noted that their popularity seems to be on the wane as of late, possibly since using them often involves undoing a lot of the code and theme hooks in order to do your own thing.

Moger admitted that he uses foundation rather than other frameworks such as Bootstrap more out of personal preference, though he also finds that between what he needs and the designer he works with designs that Foundation offers the right degree of flexibility.

He noted a few key useful elements of Foundation with Drupal:

• You can get the oh-so-trendy off-screen menu for mobile without much work – as long as you edit your theme files it’s there.
• It has handy classes such as allowing for rounded corners, showing for small/medium/large/extra-large screens, touch, portrait, or landscape, or any combination of the above.

Some nice utility classes in Foundation @richardmoger #dclondon pic.twitter.com/hMrjD2w19N

— Vicky Teinaki (@vickytnz) February 28, 2015

He did note that you probably need some key infrastructure elements Vagrant/VLAD/Custom Settings to get going as well as modules such as display suite, templates, block_class module, or views templates or preprocess functions to get CSS classes into pages.

That said, he also noted a few useful reponsive modules such as Picture and Flexislider. He also recommended Livereload “which must have saved me hours from not having to constantly type Control-R to see my changes).

Moger’s slides are available on Slides.com.