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
Getting Started: Some Stuff to Consider
Chapter 1 Design for Drupal: Basic Concepts
About the Case Studies
Chapter 2 The Drupal Designer’s Toolkit
LessCSS and Less.app
Design and Layout
Chapter 3 Sketch Many, Show One
Ideation: Methods and Madness
Chapter 4 Using Style Tiles to Explore Design Ideas
Chapter 5 Design Layout: Covering All Your Bases
Greyboxing: An In-Between Option
Chapter 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
Chapter 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
Prototyping, Theming, and Managing your Markup
Chapter 8 Paper Prototyping
When to Use a Paper Prototype
Creating a Paper Prototype
Walking Through the Prototype
Other Types of Prototypes
Chapter 9 Breaking Down a Layout for Drupal Implementation
Chapter 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
Please, Tell Me More!
Chapter 11 Prototyping in the Browser
Chapter 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
Step 6: Setting Up the Contextual Filter
Step 7: Setting Up the “Related Events” Block
So What Did We Just Do Here?
Chapter 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?
Chapter 14 Managing Your Code: Some Modules that Can Help
Dani Nordin is the founder and principal designer of the zen kitchen, where you'll find tasty marketing and design ideas with an eco-friendly twist. She has over 10 years of experience designing award-winning work for small to large businesses and non-profits.