Design and Prototyping for Drupal

Book description

Itching to build interesting projects with Drupal, but confused by the way it handles design challenges? This concise guide helps small teams and solo website designers understand how Drupal works by demonstrating the ways it outputs content. You’ll learn how to manage Drupal’s output, design around it, and then turn your design into a theme.

In the second of three volumes on Drupal design, award-winning designer Dani Nordin takes you beyond basic site planning and teaches you key strategies for working with themes, layouts, and wireframes. Discover how to use Drupal to make your vision a reality, instead of getting distracted by the system’s project and code management details.

  • Learn strategies for sketching, wireframing, and designing effective layouts
  • Break down a Drupal layout to understand its basic components
  • Understand Drupal’s theme layer, and what to look for in a base theme
  • Work with the 960 grid system to facilitate efficient wireframing and theming
  • Manage Drupal markup, including the code generated by the powerful Views module
  • Use LessCSS to organize CSS and help you theme your site more efficiently

Publisher resources

View/Submit Errata

Table of contents

  1. Design and Prototyping for Drupal
    1. SPECIAL OFFER: Upgrade this ebook with O’Reilly
    2. Preface
      1. Introduction
        1. In This Volume
        2. A Quick Note on Nomenclature
        3. A Note on Code
        4. But Dani, I’ve Never Even Installed Drupal Before; What Do I Do?
      2. Conventions Used in This Book
      3. Using Code Examples
      4. Safari® Books Online
      5. How to Contact Us
      6. About the Reviewers
      7. Acknowledgments
    3. I. Getting Started: Some Stuff to Consider
      1. 1. Design for Drupal: Basic Concepts
        1. About the Case Studies
      2. 2. The Drupal Designer’s Toolkit
        1. Balsamiq Mockups
        2. Fireworks
        3. Coda
        4. LessCSS and Less.app
    4. II. Design and Layout
      1. 3. Sketch Many, Show One
        1. Ideation: Methods and Madness
      2. 4. Using Style Tiles to Explore Design Ideas
      3. 5. Design Layout: Covering All Your Bases
        1. Greyboxing: An In-Between Option
      4. 6. Working with Layout Grids
        1. Why Use a Grid?
        2. Grids in Wireframing
        3. Grids in Theming
        4. Anatomy of a Grid Layout
        5. But What About All These Presentational Classes? There Must Be a Better Way!
        6. The New CSS Grid Layout module: The Future Is Now
        7. Going Deeper: CSS Layout and Grid Systems
      5. 7. Setting up Fireworks Templates for Drupal
        1. Step One: Setting Up the Grid
        2. Step Two: Setting Up the Header
        3. Step 3: Single Node Page
        4. Step 4: Single Node Pages with Sidebars
        5. Step 5: Create the Other Pages
        6. Step 6: Step Up the Visuals
    5. III. Prototyping, Theming, and Managing your Markup
      1. 8. Paper Prototyping
        1. When to Use a Paper Prototype
        2. Fidelity
        3. Creating a Paper Prototype
        4. Walking Through the Prototype
        5. Other Types of Prototypes
      2. 9. Breaking Down a Layout for Drupal Implementation
        1. Nodes
        2. Blocks
        3. Views
      3. 10. Working with Base Themes
        1. How to Choose a Base Theme
        2. Other Base Themes to Try
        3. Creating a Child Theme
        4. Other Things You Should Know About Base Themes
          1. Clear the Theme Registry!
          2. Working with Regions
        5. Please, Tell Me More!
      4. 11. Prototyping in the Browser
      5. 12. Practical Example #1: Using Views to Enhance a Layout
        1. But I’m Not a Developer—What if I Don’t Want to Code?
        2. Step 1: Create the “Event Categories” Taxonomy Vocabulary
        3. Step 2: Create the Event Content Type
        4. Step 3: Create an Image Style
        5. Step 4: Create the User Profile
        6. Step 5: Getting Profile Content into the Event Page
          1. Setting Up the View
        7. Step 6: Setting Up the Contextual Filter
        8. Step 7: Setting Up the “Related Events” Block
        9. So What Did We Just Do Here?
      6. 13. Practical Example #2: Controlling Views Markup
        1. Step 1: Associating an Image with a Taxonomy Term
        2. Step 2: Create the Event Categories View
        3. Step 3: Update the Field Settings
        4. Step 4: Add a Custom Class to Each Taxonomy Term: Name Field
        5. Step 5: Style Away
        6. So What Did We Just Do Here?
      7. 14. Managing Your Code: Some Modules that Can Help
        1. Block Class
        2. HTML5 Tools and Elements
        3. @font-your-face
        4. Semantic Fields
      8. 15. Working with LessCSS
        1. Creating Variables
        2. The Mighty Mixin
        3. Nesting Behavior
        4. Compiling the Code
        5. Working with LessCSS: Organizing Your Stylesheets
          1. Setting Up Color Variables
        6. Why This is Awesome (Aside From the Obvious)
        7. Working with LessCSS on a Team
    6. About the Author
    7. SPECIAL OFFER: Upgrade this ebook with O’Reilly

Product information

  • Title: Design and Prototyping for Drupal
  • Author(s): Dani Nordin
  • Release date: December 2011
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781449325978