2013 twin cities drupal camp - no css needed: a sitebuilders' guide to theming

No CSS Needed: A Sitebuilders' Guide to

Theming

@sparklingrobots

Hi, I'm Tara.

Tara King

@sparklingrobots

Sparkling Robots Design

Cruiskeen Consulting

Our journey:

1) Why is theming so hard, and how are modules easier?2) Which modules can help with theming?3) How can you start learning more?4) How can Drupal help people like us, and how can we help Drupal?

Our journey:

1) Why is theming so hard, and how are modules easier?2) Which modules can help with theming?3) How can you start learning more?4) How can Drupal help people like us, and how can we help Drupal?

Why is theming so hard?

php, CSS, HTML, SASS, SMACSS, jQuery, mobile-friendly ...and more

How are modules easier?

CHEAP, FAST, OR GOOD:CHOOSE TWO.

It's fast! It's cheap! It's not terrible!

Why are modules easier?

Modules get you 90% of the way toward a theme much faster than learning front-end development gets you 100% of the way.

Why is this better?

● It's the Drupal way! You take advantage of contributed code, it's easier to maintain, and it's free.

Why Drupal?

● Views● Time-sensitive content● Media handling● ...Overall flexibility!

Our journey:

1) Why is theming so hard, and how are modules better?

2) Which modules can help with theming?3) How can you start learning more?4) How can Drupal help people like us, and how can we help Drupal?

Modules are easy.1) Color2) Font-your-face 3) Background Images4) Display Suite5) Gallery Formatter/

Lightbox2

Elements of Design

1) Color2) Typography3) Texture

source: some DrupalConPDX session

Color

"The Color module allows you to easily change the color of links,

backgrounds, text, and other theme elements."

source: https://drupal.org/documentation/modules/color

Color

"I have tried for weeks to make garland just be black. I am new also but I tried many things. I have seen others looking for the same. I can tell you that there is not likely an easy answer.... I kept thinking I was very close, but I give up. Too much wasted time. "

-darrellleerogers on drupal.org

Let's recolor Bartik!

Let's recolor Bartik!

The old way: Use search and replace in the

subtheme to put your new colors in the theme files. Grow

frustrated when you realize you missed a slight variant.

Or....learn SASS.

Color: the new way.

Color!

Color?

Color help!

www.colorschemedesigner.com

Color-enabled themes.

-Bartik (D7 default)-Tej (Omega subtheme) drupal.org/project/tej

-Sky drupal.org/project/sky

-Corporate Clean drupal.org/project/corporateclean

-Gratis drupal.org/project/gratis

-Mix and Match drupal.org/project/mix_and_match

Elements of Design

1) Color2) Typography3) Texture

source: some DrupalConPDX session

@font-your-face

Typography

"@font-your-face provides an administrative interface for browsing and applying web fonts from a variety of sources."

source: https://drupal.org/project/fontyourface

@font-your-face

● Typekit.com

● Google Fonts

● Font Squirrel

● Fontdeck

● Fonts.com

● Adobe Edge Web Fonts

● Local fonts

source: https://drupal.org/project/fontyourface

The old way: Use the CSS @font-face

rule.

Let's use a new typeface!

@font-your-face

@font-your-face

@font-your-face:Group selectors

@font-your-face

@font-your-face: Custom Selectors

@font-your-face: Custom Selectors

@font-your-face

Where we started:

Where we are now:

Elements of Design

1) Color2) Typography3) Texture

source: some DrupalConPDX session

Background Images

Texture

"Background images allows users to add background images to html elements on pages of the site."

source: https://drupal.org/project/bg_image

Elements of Drupal Design

1) Color2) Typography3) Texture4) Layout

source: some DrupalConPDX session and me

Layout

1) Display Suite2) Gallery Formatter/ Lightbox2

Layout

1) Display Suite2) Gallery Formatter/ Lightbox2

Display Suite

"Display Suite allows you to take full control

over how your content is displayed using a

drag and drop interface. Arrange your

nodes, views, comments, user data etc. the

way you want without having to work your

way through dozens of template files. "

source: https://drupal.org/project/ds

Default Layout.

Default Display Options.

Display Suite.Pick your layout:

Display Suite. New options in "Manage display":

Display Suite.

Display Suite.

Free intro to Display Suite!

drupalize.me/series/display-suite-drupal-7

Kristof De Jaeger

Layout

1) Display Suite2) Gallery Formatter/ Lightbox2

Gallery Formatter

"Gallery formatter will turn any

image field into a jQuery Gallery."

source: https://drupal.org/project/galleryformatter

Gallery Formatter

Gallery Formatter

Lightbox2

"The Lightbox2 module overlays

images on the current page."

source: https://drupal.org/project/lightbox2

Gallery Formatter + Lightbox2

Our journey:

1) Why is theming so hard, and why do I think modules are better?2) Which modules can help with theming?

3) How can you start learning more?4) How can Drupal help people like us, and how can we help Drupal?

Advanced Beginner Tools

● Omega

● Panels

● Context

Advanced Beginner Tools

Omega - "Omega 3 is best suited to those who

like to build their themes through the user

interface. The theme’s layout can be modified

through the theme settings and then

contextually changed (different layouts/settings

for various portions of a site)."

source: https://drupal.org/project/omega

Advanced Beginner Tools

Panels - "The Panels module allows a site

administrator to create customized layouts for

multiple uses. At its core it is a drag and drop

content manager that lets you visually design a

layout and place content within that layout."

source: https://drupal.org/project/panels

Advanced Beginner Tools

Context - "Context allows you to manage contextual

conditions and reactions for different portions of your

site. For each context, you can choose the conditions

that trigger this context to be active and choose

different aspects of Drupal that should react to this

active context."

source: https://drupal.org/project/context

Our journey:

1) Why is theming so hard, and why do I think modules are better?2) Which modules can help with theming?3) How can you start learning more?

4) How can Drupal help people like us, and how can we help Drupal?

Drupal is pretty

confusing...

...but it's also pretty great.

source: me

Drupal has 27,782 developers.

Let them help you!

source: drupal.org

Confession time.

??

Thank you.@sparklingrobots

tara@sparklingrobots.com