Mobile web development in 2013 is a mess of browser quirks, viewport headaches, and CSS bugs that multiply with every platform you touch. I built the Mobile Boilerplate theme for Drupal 7 to stop reinventing the wheel every time I needed a mobile-ready starting point. It’s a collection of fixes, polyfills, and sensible defaults that handle the boring stuff so you can focus on building something that works.
What’s in it
The theme ships with a bunch of things you’d otherwise spend an afternoon Googling:
- CSS normalisation across mobile browsers, so your styles don’t break on the first device you test on.
- Modernizr with a custom build for feature detection, plus a CSS Media Queries polyfill for older browsers.
- Home page icons for Android, iOS, and Nokia devices, so your site looks at home when someone adds it to their home screen.
- Viewport handling tuned for Android, iOS, Mobile IE, Nokia, and Blackberry.
- Mobile IE fixes – conditional switches and better font rendering.
- iOS web app meta tags so your site feels less like a webpage and more like an app when launched from the home screen.
- Instant button click to remove the 300ms tap delay on touch devices.
- Textarea autogrow so text inputs expand as users type instead of forcing them to scroll.
- URL bar hiding and form zoom prevention for a cleaner, more native-feeling interface.
- User agent detection built in, so you can route users to the right version of your site.
- Apache tweaks for caching and compression, ready to drop into your
.htaccess. - Cross-domain Ajax support so you’re not stuck with same-origin restrictions.
- Modular structure – every piece is independent, so if you don’t need something, delete it without breaking the rest.
Getting started
Clone the repository and you’re in:
git clone --branch 7.x-1.x shafiqAlibhai@git.drupal.org:sandbox/shafiqAlibhai/2078519.git mobile_boilerplate
cd mobile_boilerplate
From there it’s just a matter of enabling the theme in Drupal and tweaking what you need. The code is organised so you can strip out anything you don’t use without touching the rest.