Cover image for Design and Prototyping for Drupal

Book description

This will give an overview of how Drupal outputs content, and how to design around that visually, as well as an overview of turning the design into a theme. Less of a comprehensive, "these are all the hooks you'll ever have to deal with" volume, and more of a "this is how to understand how Drupal works so you know what you're applying the visuals to" thing.

Table of Contents

  1. Special Upgrade Offer
  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 Upgrade Offer
  8. Copyright