Posted by shanabus on February 25, 2014 at 9:48pm
Hey peoples,
I'm about to start working on a new theme for a client of mine. I do have some experience creating my own themes and modifying themes developed by others, however this will be my first attempt at creating a Responsive Drupal 7 theme.
The client is working with a designer who has sold them on a site that needs to work similar to this one: http://ffc.com/.
My question - what is the preferred base theme for a D7 Responsive site? I know there are a lot of base themes out there so I appreciate this groups suggestions for which ones are easier to start with.
Comments
I don't know about the
I don't know about the preferred base theme, but my preferred base theme by far is Omega: https://drupal.org/project/omega
I use it for pretty much everything now. It's incredibly flexible.
I like the Bootstrap base
I like the Bootstrap base theme with some special mods to support Webform, more details @ http://www.vilepickle.com/blog/2014/01/08/00183-theming-drupal-7-webform...
There are nice modules for Panels and Views to add Bootstrap support too, which gets around the front-end rape that Views/Panels usually do to any sort of layout you're working on.
Forgot to mention another
Forgot to mention another benefit of the Bootstrap theme: When you're working with it, the skillset is transferrable to your other, non-Drupal sites. For those of us who love Drupal but realize it has its time and place.
it all depends
My answer for everything :)
Bootstrap, by leaps and bounds, adds more to your resume in the front-end dev world, but you'll spend more time learning how to wrestle Drupal into Bootstrap than learning Bootstrap. Having said that, I still think it's useful if your familiar with preprocess functions/templates to add specific classes. I did a lot of preprocessing blocks/regions and a few custom template files. Plus a Bootstrap theme function override so every menu wasn't a dropdown. I did not use Views or Panels integration and perhaps that led to a lot of frustrations getting classes where I needed them. Vilepickle's route is likely easier. When your done you'll have a lot of nicely styled components and features that you won't get with a theme like Zen, Adaptive Theme or Omega. Just be mindful of css/js that you don't need because Bootstrap is bloated.
Responsive sites rely heavily on source order in html for positioning across device widths. If you don't want to get into template files than it would be good to test a couple. For instance, Zen out of the box puts the left sidebar above the content area on mobile. Most websites content consider this a complementary area and doesn't make sense to stack above the main content block. It requires a new page template to change this. Match up your mockups with where the content shifts on these themes to prevent any large layout adjustments right out the gate.
As for your example site, here's a quick plugin for the menu that I have come across in my responsive exploits ... http://tinynav.viljamis.com
Hope it helps!
I definitely wouldn't
I definitely wouldn't recommend implementing Bootstrap unless you're working with the Views/Panels integrations for the reason you mentioned. Here are the modules I was referencing:
Views: https://drupal.org/project/views_bootstrap
Panels: https://drupal.org/project/panels_bootstrap_layouts
Note that within the last year Bootstrap has transitioned to version 3, and the Panels plugin mentions this (with its 3.x branch). The Drupal theme uses v3 too. It's different, but better than v2.
Also if you're doing a site that only you are editing (no clients), Bootstrap can be handy to just do some quick layout work in HTML with static content if you don't want to build up with Panels.
Example: Assuming you're working in the body content region under a Bootstrap col-md-12 div (as defined in your page tpl file), you can add a row div parented to two col-md-6 divs with content in them for two columns. Bootstrap is nice because you reset all of your padding/margins by just adding a row div. It allows you to nest columns to your heart's content, and it's responsive. You could subsequently nest a row with two more col-md-6 divs inside of your first ones. This is just one example, but it's a pretty common case.
Omega all the way!
It is my personal favourite and the one used on the websites I developed www.tourswithpaws.com & http://185.17.180.150/~teetechn/
Let me know if you have any questions on how I made any of it work :)
The question of the best base
The question of the best base theme really comes down to how much boilerplate you want. In other words, how much templating and theming do you want to do yourself, versus how much nitty gritty do you want the theme to have already taken care of? It just depends on what your design and site needs.
If you want the least boilerplate, start a new theme from scratch. The next level up would be Zen or Omega 4. The next level up from there would be Bootstrap or other framework-based themes.
Marketing WordPress Theme
Marketing WordPress Theme
Given the decision whether or not to use a premium WordPress theme for your online business means that you are taking your business seriously and you are willing to invest in creating...