This theme was created to accompany the theming chapters (15 and 16) in The Definitive Guide to Drupal 7. It's currently running on http://definitivedrupal.org and includes examples of:
- General setup and customized Global Theme Settings (see pages 275-281).
- Custom region implementation (see pages 282-292).
- Template file overrides (see pages 293-301).
- Theme function overrides (see pages 301-304).
- Theme hook suggestions implementations (304-310).
- Preprocess and process function implementations (see pages 313-321).
- Alter hook implementations (see pages 321-327).
- render(), hide(), and show() (see pages 327-329).
- Advanced loading and removal of Stylesheets (see 341-347).
You can purchase the book, which contains way more than a couple of chapters on theme development here: http://definitivedrupal.org/purchase. It's over 1,000 pages, was written by lots of Drupal rockstars, and covers so many aspects of Drupal 7 development.
This is probably really obvious from viewing the site. This theme was created with 3 goals in mind:
1. Illustrate as many useful theming examples as possible.
2. Make it look decent.
3. Have fun with CSS3 and not care at all about older browsers.
It's not perfect, and doesn't claim to be, but if you are trying to learn Drupal 7 theming in more detail, it should be helpful.
The CSS in this theme was written using Sass and Compass. The source is located in the "sass" directory and is ultimately complied into the "css" directory. In this case, existing code was quickly converted to Compass syntax, because I hate writing CSS3 without it and it's got lots of awesome utilities that make it a lot easier and faster to write CSS in general. Unfortunately, the time that I can spend on this has run out, but if I were to continue working on this theme (or had used SASS from the start), I would have made partials, mixins, sprites and more variables.
To learn more about using SASS and Compass + Drupal, I highly recommend checking out all of the following resources:
- Sass
- Compass
- The Sass Way
- The Coding Designer's Survival Kit
- The Coding Designer's Survival Kit (Drupal project)
While this theme contains media queries that manipulate the layout so that it is easier to read on small screens, it's by no means meant to be an example of how to create a complete and robust mobile experience or responsive design and doesn't work where media queries are not supported. It's just a quick attempt to make it more mobile friendly as others have done: http://bit.ly/n3kqsJ.
To learn more about making mobile friendly and responsive websites, here are some good resources and some code:
- Responsive Web Design (article)
- Responsive Web Design (book)
- HTML5 Mobile Boilerplate
- css3-mediaqueries.js
- respond.js
- Responsive Images
There are many resources available, some of which are linked throughout the code comments and in this file. There's also plenty of official documentation on http://drupal.org:
Below is a collection of the tools/apps that I use on a daily basis and find invaluable. Maybe you will too.
- This theme was partially written in TextMate and Espresso on Mac OS X.
- I use Google Chrome for development.
- I use LiveReload to automatically refresh my browser windows while I code.
- I use MAMP for my local development environment.
- I use xDebug which gives very helpful stack traces when an error occurs.
- I use VMware Fusion and 3 virtual machines for cross-browser testing.
- I use VirtualHostX to easily setup local sites.
- I use Tower for version control.
- I use Colloquy to hang out and chat with other developers and frequent #drupal, #drupal-contribute, #drupal-html5 and #html5 on IRC.
- I use Devel religiously while theming to print the contents of arrays/objects using
dpm(). - I use Drush constantly during development (especially to clear the cache).
- I use the Design test and Style Guide modules which contain test pages with lots of different output to help ensure that I don't miss styling anything important when creating themes.