Design and prototyping for drupal

Design and Prototyping for Drupal

Dani Nordin

Beijing

Cambridge Farnham Kln

Sebastopol Tokyo


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?

103
108
111
112
116
118
121

13. Practical Example #2: Controlling Views Markup . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
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?

125
126
128
130
132
135

14. Managing Your Code: Some Modules that Can Help . . . . . . . . . . . . . . . . . . . . . . . . . 137
Block Class
HTML5 Tools and Elements
@font-your-face
Semantic Fields

137
139
139
139

15. Working with LessCSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
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

141
142
142
143
144
144
147
149

Table of Contents | v






This icon signifies a tip, suggestion, or general note.

This icon indicates a warning or caution.

Using Code Examples
This book is here to help you get your job done. In general, you may use the code in
this book in your programs and documentation. You do not need to contact us for
permission unless you’re reproducing a significant portion of the code. For example,
writing a program that uses several chunks of code from this book does not require
permission. Selling or distributing a CD-ROM of examples from O’Reilly books does

require permission. Answering a question by citing this book and quoting example
code does not require permission. Incorporating a significant amount of example code
from this book into your product’s documentation does require permission.
We appreciate, but do not require, attribution. An attribution usually includes the title,
author, publisher, and ISBN. For example: “Design and Prototyping for Drupal by Dani
Nordin (O’Reilly). Copyright 2012 Dani Nordin, 978-1-449-30550-5.”
If you feel your use of code examples falls outside fair use or the permission given above,
feel free to contact us at

Safari® Books Online
Safari Books Online is an on-demand digital library that lets you easily
search over 7,500 technology and creative reference books and videos to
find the answers you need quickly.
With a subscription, you can read any page and watch any video from our library online.
Read books on your cell phone and mobile devices. Access new titles before they are
available for print, and get exclusive access to manuscripts in development and post
feedback for the authors. Copy and paste code samples, organize your favorites, download chapters, bookmark key sections, create notes, print out pages, and benefit from
tons of other time-saving features.
O’Reilly Media has uploaded this book to the Safari Books Online service. To have full
digital access to this book and others on similar topics from O’Reilly and other publishers, sign up for free at .

x | Preface

Figure 1-1. An overview of the Drupal site planning and design process. See how Technical
Implementation and Visual Design go together? That’s important.

2. As mentioned in the Planning and Managing guide, having actual content and
structure for the site at least somewhat established prior to starting visual design
gives you a better idea of where you’re starting from—which makes it easier to
create layouts that are both visually attractive and feasible to implement.
This last piece—feasible to implement—is one of the core challenges to working in
Drupal, and where many visual designers end up going crazy. Whether we want it to
or not, Drupal has ways it likes to do things—a fact that is true with any web-based
framework (yes, even WordPress). By understanding and respecting how Drupal likes
to do things, it’s easier to develop design patterns that allow you to design more efficiently, while maintaining your creativity.
The presentation Don’t Design Websites, Design Web SYSTEMS!,† first presented by
Todd Nienkerk and Aaron Stanush of Four Kitchens at DrupalCon Copenhagen, illustrates this point perfectly. Working with design agency Thinkso Creative to implement a complex Drupal site for Expeditiary Learning, the Four Kitchens team started
with a series of visual designs, site maps and wireframes that Thinkso had put together.
All of these provided an excellent design direction for the Four Kitchens team, but
because some design elements had been created before Thinkso had chosen Drupal as
its platform, several of the elements had to be reconsidered and restructured in order
to avoid significant delays or cost impacts in production.

† You can get the slide deck at />
4 | Chapter 1: Design for Drupal: Basic Concepts






CHAPTER 2

The Drupal Designer’s Toolkit

While every designer has their own set of applications and supplies that they use for
everyday design and prototyping work, certain tools just seem to be particularly useful
when working in Drupal. The following is the toolkit that I use for most of my work.
Although the last two applications (Coda and Less.app) are Mac-specific, the others
are available for Mac or PC.

Balsamiq Mockups
Balsamiq ( is a relatively small, but robust,
Adobe Air application that helps you create UI mockups incredibly quickly. The program itself contains many of the standard elements you’d expect in a web mockup (text
boxes, headlines, video or image comps, etc.), but it’s all done in a simple, cartoonish
style that helps clients and the design team focus on what’s important in the early stages
of a project—content organization and hierarchy. Stephanie at Fusion by Top Notch
Themes also put together a handy mockup of Drupal-specific components, which you
can download here: />-drupal-components-balsamiq-mockups. I’ve used it extensively for some of the examples in this book. Figure 2-1 shows the entire set of components.
In the Resources section of this book’s website ( />sources), I’ve also uploaded a copy of this document (as a .bmml file). For those using
the 960 grid system to more efficiently iterate wireframes and design mockups (see
Chapter 6 for more info), the master download from 960.gs contains Balsamiq mockup
elements for 12, 16, and 24 column layouts.

9