Responsive Theming for Drupal

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