Design and Prototyping for Drupal by Nordin, Dani -- Read -- Imperial Library of Trantor

Index

Design and Prototyping for Drupal

Preface

Introduction

In This Volume A Quick Note on Nomenclature A Note on Code But Dani, I’ve Never Even Installed Drupal Before; What Do I Do?

Conventions Used in This Book Using Code Examples Safari® Books Online How to Contact Us About the Reviewers Acknowledgments

I. Getting Started: Some Stuff to Consider

1. Design for Drupal: Basic Concepts

About the Case Studies

2. The Drupal Designer’s Toolkit

Balsamiq Mockups Fireworks Coda LessCSS and Less.app

II. Design and Layout

3. Sketch Many, Show One

Ideation: Methods and Madness

4. Using Style Tiles to Explore Design Ideas 5. Design Layout: Covering All Your Bases

Greyboxing: An In-Between Option

6. Working with Layout Grids

Why Use a Grid? Grids in Wireframing Grids in Theming Anatomy of a Grid Layout But What About All These Presentational Classes? There Must Be a Better Way! The New CSS Grid Layout module: The Future Is Now Going Deeper: CSS Layout and Grid Systems

7. Setting up Fireworks Templates for Drupal

Step One: Setting Up the Grid Step Two: Setting Up the Header Step 3: Single Node Page Step 4: Single Node Pages with Sidebars Step 5: Create the Other Pages Step 6: Step Up the Visuals

III. Prototyping, Theming, and Managing your Markup

8. Paper Prototyping

When to Use a Paper Prototype Fidelity Creating a Paper Prototype Walking Through the Prototype Other Types of Prototypes

9. Breaking Down a Layout for Drupal Implementation

Nodes Blocks Views

10. Working with Base Themes

How to Choose a Base Theme Other Base Themes to Try Creating a Child Theme Other Things You Should Know About Base Themes

Clear the Theme Registry! Working with Regions

Please, Tell Me More!

11. Prototyping in the Browser 12. Practical Example #1: Using Views to Enhance a Layout

But I’m Not a Developer—What if I Don’t Want to Code? Step 1: Create the “Event Categories” Taxonomy Vocabulary Step 2: Create the Event Content Type Step 3: Create an Image Style Step 4: Create the User Profile Step 5: Getting Profile Content into the Event Page

Setting Up the View

Step 6: Setting Up the Contextual Filter Step 7: Setting Up the “Related Events” Block So What Did We Just Do Here?

13. Practical Example #2: Controlling Views Markup

Step 1: Associating an Image with a Taxonomy Term Step 2: Create the Event Categories View Step 3: Update the Field Settings Step 4: Add a Custom Class to Each Taxonomy Term: Name Field Step 5: Style Away So What Did We Just Do Here?

14. Managing Your Code: Some Modules that Can Help

Block Class HTML5 Tools and Elements @font-your-face Semantic Fields

15. Working with LessCSS

Creating Variables The Mighty Mixin Nesting Behavior Compiling the Code Working with LessCSS: Organizing Your Stylesheets

Setting Up Color Variables

Why This is Awesome (Aside From the Obvious) Working with LessCSS on a Team

About the Author