Thursday, August 25, 2011 - Drupal...THE KICK-OFF Supply the designer with a list of common items...

Thursday, August 25, 2011

A bulletproof approach to theming

Presented by Rasmus Kalms

Design, UX and Theming

STATE OF THEMING

How do you define yourself as a themer?

Goals for this talk

NO SILVER BULLETS

preprocess_make_it_all_go_away();

CASE #01

Bad timing and the indifferent backend dev, with little to no interest in presentation or markup

So, how do we deal with these scenarios?

LET YOUR THEMER ASK

Does the output match the intended design?

SHARING IS CARING

How do we improve communication?

REMEMBER

• Focus on how you can make a difference from your point-of-view.

REMEMBER

• Focus on how you can make a difference from your point-of-view.

• Ensure consistent communication and regular meetings, with output and code reviews.

REMEMBER

Style guides and Drupal

A style guide or style manual is a set of standards for the writing and design of

documents... The implementation of a style guide provides uniformity in style and

formatting of a document.

FROM WIKIPEDIA.ORG:

http://en.wikipedia.org/wiki/Style_guide

BASICALLY

A style guide is a document describing a set of visual standards.

A STYLE GUIDE COULD BE

• Description of logo usage

• Colorschemes

• Typography

• Colorschemes

• Typography

• Grids

• Colorschemes

• Typography

• Grids

And so on...

Skype brand style guideLocate it here: http://bit.ly/9oksav

BENEFIT

It ensures consistent usage of deliverables

PRINT VS. DEVELOPMENT

How could we use style guides in a Drupal environment?

The typical workflow

THE KICK-OFF

Supply the designer with a list of common items like typography, lists, form elements etc.

THE KICK-OFF

Pinpoint common design elements like content boxes (panels) and lists (views) together

SPECIFICALLY

• Typography

SPECIFICALLY

• Typography

• Grid / baseline

SPECIFICALLY

• Typography

• Grid / baseline

• Lists (views)

SPECIFICALLY

• Typography

• Grid / baseline

• Lists (views)

• Form elements

SPECIFICALLY

• Typography

• Grid / baseline

• Lists (views)

• Form elements

• Buttons

SPECIFICALLY

• Typography

• Grid / baseline

• Lists (views)

• Form elements

• Buttons

SPECIFICALLY

• Use of color

• Typography

• Grid / baseline

• Lists (views)

• Form elements

• Buttons

SPECIFICALLY

• Use of color

• Navigation & links

• Typography

• Grid / baseline

• Lists (views)

• Form elements

• Buttons

SPECIFICALLY

• Use of color

• Images (usage)

• Typography

• Grid / baseline

• Lists (views)

• Form elements

• Buttons

SPECIFICALLY

• Use of color

• Images (usage)

• Taxonomy and teaser lists

• Typography

• Grid / baseline

• Lists (views)

• Form elements

• Buttons

SPECIFICALLY

• Use of color

• Images (usage)

• Taxonomy and teaser lists

DEFINE MARGINS, DIFFERENT STATES (I .E LINKS & FORMS), POSITIONING ETC.

VALUABLE NOTES ABOUT IA

How we use Information Architecture at Peytz & Co.

HEADER

SIDEBAR

FOOTER

CONTENT

NODE SEC. NAV

SEARCH

NODE BLOCK

KEEPING CONTENT CONSISTENT

If the project warrants it, you should keep a list of intended output for each page

PAGE DESIGN VS. CONTENT SYSTEMS

The benefit is the replacement of page design in Photoshop, with the design of content systems in Drupal

The standard theme or boilerplate

REMEMBER

• Create a style guide, and keep using and maintaining it.

REMEMBER

• Make sure the site has a strong, well-defined information architecture. Help maintain it!

REMEMBER

• Make sure the site has a strong, well-defined information architecture. Help maintain it!

• If you’re providing a client with a theme for Drupal, you should make sure it works on even the most basic Drupal installation.

REMEMBER

Code Structure

CODE STRUCTURE

Divide templates into folders like “views”, “panels”, “nodes” etc.

CODE STRUCTURE

Use Drupal’s module architecture and avoid bloat

My small crisis of faith as a front-end developer

Story time!

Using HTML5/CSS3 doesn’t have to be complicated

CLEAR BENEFITS

It’s fast and it keeps the code flexible; less need for cutting out graphics in Photoshop

CLEAR BENEFITS

Leaves more room for prototyping and an iterative approach

Adaption and ease of use

LE SIGH (VENDOR PREFIXES)

-moz-border-radius: 4px;

-webkit-border-radius: 4px;

-o-border-radius: 4px;

... and on and on.

LESS VS. SASS

CSS pre-processors

THEY TYPICALLY PROVIDE

• Variables

• Mixins

• Variables

• Mixins

• Functions

• Variables

• Mixins

• Functions

• Nesting

VARIABLES EXAMPLE

@color: #4D926F;

#header { color: @color;}

h2 { color: @color;}

MIXINS: LIKE VARIABLES WITH CLASSES

.rounded-corners (@radius: 5px) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius;}

#header { .rounded-corners;}

#footer { .rounded-corners(10px);}

NESTED RULES: SIMPLE INHERITANCE

#header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } }}

FUNCTIONS

@the-border: 1px;@base-color: #111;@red: #842210;

#header { color: @base-color * 3; border-left: @the-border; border-right: @the-border * 2;}

#footer { color: @base-color + #003300; border-color: desaturate(@red, 10%);}

Is there a module for this? Yes!

• http://drupal.org/project/sass

• http://drupal.org/project/less

FINAL NOTE

Organizing your theme and approach goes a long way

THEMERS

Take it upon yourself to communicate the constraints and possibilities

Your designers should be running their own projects. Do not place some non-designer in

between them and their client. You have a responsibility to shepherd your designers

toward consummate professionalism. (...) To do otherwise is to cripple their professional development; perhaps permanently.

TO QOUTE ANDY RUTLEDGE:

From “Design Professionalism”, designprofessionalism.com

Thank youIf you want to catch up: @kalms on Twitter

What did you think?

What did you think?Locate this session on the DrupalCon London website:http://london2011.drupal.org/conference/schedule

Click the “Take the survey” link

THANK YOU!

Click the “Take the survey” link

Thursday, August 25, 2011 - Drupal...THE KICK-OFF Supply the designer with a list of common items...

Documents

Transcript of Thursday, August 25, 2011 - Drupal...THE KICK-OFF Supply the designer with a list of common items...

Multicultural Center Annual Report 2017-2018 2018 · 2018-06-21 · Hispanic Heritage Month Hispanic Heritage Kick-Off The annual Hispanic Heritage Kick-Off was hosted on Thursday,

UASI FY19 Project Proposal Kick-Off Meeting · UASI FY19 Project Proposal Kick-Off Meeting Thursday, September 20, 2018 10:00 – 11:00am . Alameda County Public Works Department.

Project Kick-Off Meeting Project Kick-Off Meeting September 13, 2013.

Kick-Off Meeting

Wasco kick off

Tidningen Kick Off

#PDR15 Kick-Off

Kick off meeting_course_dev_sp2014

57 Kick-Off

Kick-off meeting

53 Kick Off

LEGISLATIVE VISITS KICK-OFF BREAKFAST THURSDAY, MARCH 21, 2013, SHERATON GRAND SACRAMENTO.

Deliverable: D7.1 Project Kick-off Meeting · 2016. 1. 14. · 8 Deliverable D7.1 – Project Kick-off Meeting 3. Kick-off Meeting - conclusions VetMedZg project Kick-off Meeting

Communication Kick-Off

58 Kick Off

STEELERS & DOLPHINS KICK OFF SEASON … releases...STEELERS & DOLPHINS KICK OFF SEASON THURSDAY NIGHT ON NBC It all begins Thursday night. NFL Kickoff 2006 starts then when the Super

UASI FY20 Project Proposal Kick-Off Meeting...UASI FY20 Project Proposal Kick-Off Meeting Thursday, September 19, 2019 10:00 – 11:00am . Alameda County OES. 4985 Broder Blvd., Dublin,

Kick Off Meeting

2012 Kick Off

NXTGNT kick off