panels 3 for designers

41
Panels for designers An introduction to Panels 3 for people who like crayons

Upload: jesper-woldiche

Post on 02-Jul-2015

1.097 views

Category:

Technology


0 download

DESCRIPTION

An introduction to Panels 3 for people who like crayons

TRANSCRIPT

Page 1: Panels 3 for designers

Panels for designersAn introduction to Panels 3 for people who like

crayons

Page 2: Panels 3 for designers

You do realize, I’m just demoing some moduleanother guy made?

Page 3: Panels 3 for designers

The session

What?

Why?

Basic setup?

+ Views

Workflows & version control

Custom layouts

Page 4: Panels 3 for designers

Jesper WøldicheDesigner

Journalist

Architect

Markup Marine

Danish

Using Drupal since 2008

Page 5: Panels 3 for designers

You?

Page 6: Panels 3 for designers

A word of caution

Page 7: Panels 3 for designers

Earl MilesCreator of Panels

Page 8: Panels 3 for designers

The real Earl Miles(when coding)

Page 9: Panels 3 for designers

Me(while coding)

Page 10: Panels 3 for designers

The workings of PanelsAs I understand it

Page 11: Panels 3 for designers

Config Black Magic Output

Page 12: Panels 3 for designers

Features of Panels

Page 13: Panels 3 for designers

$content

Page 14: Panels 3 for designers
Page 15: Panels 3 for designers
Page 16: Panels 3 for designers

Different layouts and contentA way of serving different layouts and content based on

different criteria.

Page 17: Panels 3 for designers

A way of controllingdisplaysYes, you can do that with node-type.tpl.php and template.php

too…

Page 18: Panels 3 for designers

Making content awareA way of making content aware of context

Page 19: Panels 3 for designers

Why?Reasons to use Panels

Page 20: Panels 3 for designers

One of severaloptions

Page 21: Panels 3 for designers

Reasons to go with Panels

Easy way to theme nodes

Conditional layouts and content

Combining components

Easy export and version control

Context aware content

Easy deployment

Page 22: Panels 3 for designers

Installing panels

Page 23: Panels 3 for designers

Packages

Panels 3.x

Ctools

Page 24: Panels 3 for designers

Extras

Views (2)

CCK

Semantic Views

Semantic CCK

Menu Block

ImageCache etc.

Page 25: Panels 3 for designers

Getting set up

Page 26: Panels 3 for designers

Built in & custom panels

Page 27: Panels 3 for designers

Best friendsforeverViews Content Panes

Page 28: Panels 3 for designers

Exporting Panels

Page 29: Panels 3 for designers

Creating layouts

Page 30: Panels 3 for designers

Adding layouts

sites/all/modules/panels/plugins/layouts/

sites/all/themes/your-theme/layouts/

Page 31: Panels 3 for designers
Page 32: Panels 3 for designers

Anatomy of a customlayout

Page 33: Panels 3 for designers

my_awesome_layout.inc

my-awesome-layout.tpl.php

my_awesome_layout.css

my_awesome_layout.png

Page 34: Panels 3 for designers

What’s in a name?Don’t scare Panels

Page 35: Panels 3 for designers

A few words onstyling

Page 36: Panels 3 for designers

my_awesome_layout.css#panels-dnd-main

Page 37: Panels 3 for designers

Selectors on pages / variantsClasses and IDs for pages

Page 38: Panels 3 for designers

Selectors on contentClasses and IDs for panes

Page 39: Panels 3 for designers

Good o’le CCK and Views

Page 40: Panels 3 for designers

Or take the easy way outSemantic Views and Semantic CCK

Page 41: Panels 3 for designers

Questions?