Feel like I'm stuck between a rock and a hardplace, I've decide to post.

I'm looking for answers/opinions on getting going on custom Responsive Drupal v7 theme dev using ONLY HTML5/CSS/Less/Responsive with a primary focus on mobile then desktop with a view to it being a MINIMAL design set. I'm not an IT newbie having been in IT since '86 and then earlydays webdev HTML usage since '97, but due to a health/career change I've recently had to 'upskill' again and hence back in IT and focused now purely on D7 by choice. A lot has changed since '97 and early HTML and now I'm wreaking my brains looking at the best approach to contemporary webdev trends (ie Less/HTML5/CSS/SCSS). I don't really want to use 'off the shelf' free D7 themes as I want to be able to theme myself again using the above. I most definately like the idea of HTML5 Boilerplate/360 and the mobile future.

Numerous hours researching online has left me confused (LOL) with all the available Responsive frameworks (CSS: 360 and up, 1140, inuit/Less etc etc).

So my query here is:

  • best approach starting grid for webdev on the above technologies at this entry level of learning. (I like building things so I'm keen as an all rounder, as I think I have way long mised the boat on becoming a 'themer' so my interests lay in 'lego' building in Drupal so to speak).

  • should I skip early CSS theory and go straight into Less/SCSS? (html5 will be easy to pick up on me thinks).

  • which single Responsive model should I pick to start out with then?

FYI, I'm now on a Linux Ubuntu 11.04 LAMP DEVBOX using a range of tools such as Aptana (and comfortable on a pure text editor) having moved over from M$ but I still have 3 other M$ comps due to other multi-media/pro-music interests.

I've been 'hacking' some D7 themes, but feel I can't see to 'wood for trees' when it comes to hacking to vast amount of data in the css files and feel I'm over whelmed in simply wants to create simple, minimal css so much taht it may be just easier starting from scratch.

Any advice to get me going immediately in the right direction would be most helpful. Thanks in advance. Paul, UK

  • As a general point, if you're new to stackexchange sites, upvotes/accepted answers tend to encourage people to give you better responses to questions. Good luck with your theming learning! – jvc26 Mar 25 '12 at 18:06
up vote 2 down vote accepted

Less or SCSS are not that dissimilar to CSS (since they compile down to CSS anyway), they just have some additional features (such as mixins) and have in some cases a nicer layout. I personally have used scss and Compass to compile my scss, and also for the ability to include resets and things automatically without having to add in your own reset.css file.

In terms of learning Drupal themes, you have a choice, either use something like the omega base theme and subtheme that, or alternatively start from scratch with a clean, empty folder with the following in it:

exampletheme/
    css/
    templates/
    js/
    exampletheme.info
    template.php

And build up from there. The existing themes, whilst good for some information, are very content-heavy (by virtue of being mature, complex themes). Use a browser such as chrome/firefox with firebug in order to find out what elements are tagged or classed as. The drupal.org theme guide and the specific section on d6 & d7 is quite a good place to start.

As far as grid frameworks, I started using 960 grid as that was something which conceptually struck a chord with me. They all have similar features, though the way they work in practice is different.

  • Much Garcias Amigo, that again is very enlightening and certainly helps me clear my mind. I agree whilst most exisiting themes are mature, they often can be complex. I sure most will agree one doesn't want to 'reinvent' the wheel everytime, but at the same time as I said, the wood can be obstucted by the trees. I had/(and still do) started reading the D6/D7 theme guides, but just found I wasn't moving forward. All your comments have been very helpful, so that you all for taking the time to respond. I'll pay it back one my own knowledge has grown. I'll take jvc26's recommendations onboard. PB – Paul B Mar 25 '12 at 13:24

Few links for inspiration :

  • Best theme for understanding the themeing stuff : zen
    • html5 is in the 7.5 dev version
  • Best HTML5 support and a huge effort to "unclutter" the markup : mothership
    • will leave you with a "tabula rasa" - it won't look nice out of box, but the markup will feel better :)
  • another interesting approach in the same direction : pony

OK, the thing is that all of that CSS is there for a reason. Drupal has a lot of features, and there is a lot of markup and styles to go along with to work in a generic sense.

If you are new to Drupal, then I think that starting the HTML and CSS from scratch will be a losing battle. You really need to know how Drupal works in order to do this well.

My recommendation is to start out with the Omega basetheme, which is grid based, media-query aware, and has an HTML5 starterkit for subthemes. Subtheme this, and use it as your starting point. Build up your site to have the features you want, and work on theming it. Then once you have a good grasp of things, spend time eliminating the markup from the templates that you find superflous, and then work on the CSS.

  • Again, thanks I'll take another look at Omega as it's already installed on my localhost D7. I had been editing the Boilerplate and also Boron, but just found I was trying to wade through lines of CSS and after multiple hours found I was not making much progress. I'm not saying I don't understand, but just at the 'bottom of the mountain' (again!) with a long walk up, but frustrated that I didn't seem to make any significant progress. Your advice has given me a focus. – Paul B Mar 25 '12 at 13:34
  • Don't work that way. Just override what you need to in your subtheme (not Omega itself), and work incrementally. Firebug is your friend here. Omega also lets you turn each sheet off in the settings panel should you decide you don't want it. – mpdonadio Mar 25 '12 at 13:42

I would just add that it might be helpful to build a couple different sites, each with a different subtheme. When you're still in the early stages of learning it's impossible to pick the subtheme that best matches your style because you're still in the process of figuring out what you like. I suppose you could call this the "date around a bit before you settle down" theory.

Since my goal was also a responsive theme, I tried Adaptivetheme and Omega before settling on Adaptivetheme since it has Panels support which I definitely didn't want to write myself.

Also, to experience Drupal in its purest state, you can use Stark (built-in to core, but the core version lacks a responsive design; the contrib version is patched to be responsive).

  • Thank you. Much Garcias Amigo, that is very helpful. I agree with your points about 'dating' also. (-: Also, since I'm keen to use Views/Panels, it can be completely overwhelming (even if coming over from other CMS's). I'd already implimented Adaptive and Omega, bus dismissed them purely on initial perceptions. Stark was installed but again dismissed. Again I'll re-evaluate these options further. Thanks again for your postive feedback. – Paul B Mar 25 '12 at 13:14
  • If you're looking at Adaptivetheme, take a look at Corolla, Sky, and Pixture Reloaded, which are all subthemes based on AT. That should give you an idea of the wide range of directions you can take the theme in. – Patrick Kenny Mar 25 '12 at 13:29

You might enjoy reading this article (and checking Planet Drupal regularly for articles from many excellent Drupalists): http://www.zivtech.com/blog/responsive-drupal-theme-50-lines-code-or-less

The author describes something very similar to your request. Mobile first, responsive, etc. as a beginning, and has a sandbox project you can check out for details. Bare bones, on which you can add the design you want.

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.