O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Responsive Theming for Drupal

Responsive Theming for Drupal

by Mike Crittenden
Publisher: O'Reilly Media, Inc.
Release Date: February 2014
ISBN: 9781449373306
View table of contents
Start reading

Book Description

If you want your Drupal website to work well on smartphones, tablets, and desktops, this practical guide shows you how to incorporate Responsive Web Design (RWD) with specific Drupal 7 themes. Ideal for experienced Drupal developers, this book takes you through RWD basics and shows you how to build sites based on Aurora, Zen, and Omega—three popular base themes created by Drupal contributors.

Table of Contents

  1. Preface
    1. What You’ll Find Here
    2. Intended Audience
    3. Conventions Used in This Book
    4. Using Code Examples
    5. Safari® Books Online
    6. How to Contact Us
    7. Acknowledgments
  2. 1. Responsive Design: A Quick and Dirty Intro
    1. So, What the Heck Is Responsive Design?
    2. A Simple Example
    3. Stop the Scaling!
    4. Why Does This Rock?
    5. Back to Riley
    6. Mobile First Versus Desktop First
      1. Mobile Web Users Are A Huge Sector and Growing Fast
      2. The Importance of the First Target
      3. How Mobile First Changes Our Example
    7. Back to Riley (Again)
  3. 2. Responsive, Meet Drupal
    1. A Bit of A Primer on Drupal Theming
    2. Adding the Media Queries
    3. Adding the Viewport Meta Tag
    4. Moving on to Base Themes
    5. Using a Base Theme
  4. 3. A Short Primer on Sass and Compass
    1. Installation of Sass/Compass
    2. Learning Your Way Around Sass/Compass
    3. Feeling the Power
      1. Let Sass Calculate Your Colors For You
      2. Generate CSS Image Sprites with Compass
      3. Write Your Own Mixins
      4. Know Your Plug-ins
    4. Debugging Notes
    5. Moving Right Along
  5. 4. Responsive Theming With Aurora
    1. Pros and Cons
    2. Getting Started
      1. Step 1: Install Sass/Compass
      2. Step 2: Install Aurora
      3. Step 3: Create Your Custom Subtheme
      4. Step 4: Configure and Run Compass
      5. Step 5: Perform a Sanity Check
    3. Digging Into Aurora
      1. Aurora’s Goodie Bag
      2. A Primer on Aurora’s Sass Structure
      3. Getting to Work
      4. Making It Responsive
      5. Committin’ and Quittin’ Time
  6. 5. Responsive Theming Using Zen
    1. Pros and Cons
    2. Getting Started
      1. Step 1: Install Zen Using Drush
      2. Step 2: Create Your Subtheme
      3. Step 3: Set Your Subtheme as the Default Theme
      4. Step 4: Install Sass/Compass
      5. Step 5: Install Zen Grids
      6. Fire Up Compass
    3. Getting to Work
    4. Working With Zen Grids
  7. 6. Responsive Theming Using Omega
    1. A Note About Versions
    2. Pros and Cons
    3. Getting Started
      1. Step 1: Install Sass/Compass
      2. Step 2: Create Your Subtheme Using Drush
      3. Drush Integration
    4. Taking an Omega Tour
      1. Responsive Layouts Using Singularity Grids
      2. Making Use of Custom Layouts
  8. 7. Some Common Gotchas and Tips
    1. Different Resolution-Specific Navigations
      1. Select Dropdown as Mobile Navigation
      2. Mobile-Specific Navigation Hidden by Default
    2. Dealing with Responsive Images
      1. Installation
    3. Adding a Touch Icon for Mobile/Tablet Touchscreens
    4. Supporting Older Internet Explorer Browsers
    5. Styling/Testing Common Drupal Elements
  9. 8. Alternative Options and Next Steps
    1. Study Some More Base Themes
    2. Learn How to Compare Base Themes
    3. Become an Expert on Your Base Theme of Choice
    4. Study Up on Some Non-Drupal-Exclusive Responsive Techniques
    5. Know the Alternatives
      1. Create a Separate Theme
      2. Serve the Desktop Experience
      3. Provide a Mobile App
    6. Be A Student of the Community
  10. Colophon
  11. Copyright