SlideShare a Scribd company logo
1 of 78
Download to read offline
Design, UX and Theming




Forensic Theming


       Emma Jane Hogbin
       @emmajanedotnet
     www.designtotheme.com
drupal.org participation
●   emmajane
●   uid: 1773
●   First look at the Drupal code base: 2003ish.
    I stole the i18n table structure.
●   First Drupal site “for pay”: 2006ish.
●   First Drupal socks: 2007.
●   First DrupalCon conference: Szeged in 2008.
●   First Drupal book: 2009.
●   First Drupal core patch: 2010.
    Removed the “welcome” screen.
Really Tiny Web Budgets
The Socks




http://www.flickr.com/photos/mortendk/1439332466/
www.emmajane.net/craft/drupal
Book (Co)Author
Workbook Author
  www.designtotheme.com
Discount Code: DCLON87488
 Valid to the end of August.
Drupal Trainer




 www.sitebuildingextravaganza.com
Lazy Front End Developer
I'll just change this one tpl.php file
                  http://www.flickr.com/photos/gibbons/2500423526
Okay ... and a module file?
and ...
... everything else too? Bugger.
                http://www.flickr.com/photos/amagill/3225245292
This presentation is not about ...
●   Best practices          ●   Inheritance
●   Anything advanced       ●   HTML5
●   Design                  ●   Photoshop
●   Semantic markup         ●   Web systems
●   Responsive Web design
                            ●   Theming APIs
●   Typography
                            ●   Mobile devices
●   Grids (maybe a little
    bit)                    ●   Unicorns
●   CSS optimization        ●   Sprites
●   CSS preprocessing       ●   In-the-browser design
●   Rick Astley             ●   Sliding doors
●   PHP
                            ●   Gradients
●   Hooks
                            ●   IE6
Advanced Theming Sessions
Display Suite
Tuesday 17:00 - NodeOne Road - Fairfield Room
http://tinyurl.com/dclondon-displaysuite


Theming API
Tuesday 15:45 - NodeOne Road - Fairfield Room
http://tinyurl.com/dclondon-themingapi


Responsive Design
Thursday 11am - Axis 12 Street - Arnhem Gallery
http://tinyurl.com/dclondon-responsivedesign
Forensic Theming

       Best
       Practices
       Dissecting
       Themes
Agenda
Tools for Forensic Theming   Theming Tools
                                 Sketchbooks           CSS Frameworks
    Sweaver
                                                   ●
●                            ●



                                 Wireframes        ●   Base themes
    Firebug
                             ●
●
                             ●
                                 Data models       ●   Layout modules
●   Devel Themer             ●   Grid frameworks   ●   Text editors

Theme Building               Summary
●   Base themes              ●   Questions/Answers
●   Image extraction         ●   Bonuses
●   MVTs
●   Forensic styling
The Crime
Crime Scene
Forensic Theming


Definition: the art of
investigating a
Drupal page to find
out how that thing
got there.
Two Types of Clues
       Crime Scene Investigation
       Working with the rendered page:
       ●   Available CSS selectors.
       ●   Applied CSS styles.



       Crime Lab Forensics
       Working with Drupal code files:
       ●   Theme templates
       ●   Module templates
       ●   Hard coded module nonsense
Crime Scene




              Working with rendered
              pages. You can only look
              at the effects of Drupal
              on a rendered page.
Identifying CSS Selectors
               With Sweaver
●   Common newbie problem: being able to find
    relevant CSS selectors.
●   Sweaver can be used as a pointy-clicky-non-scary
    CSS class selector.
●   Can save/publish minor changes to CSS to live
    Web sites.
●   http://drupal.org/project/sweaver
Sweaver User Interface
Click on Stuff
See How a Selector Will Be Applied




Change CSS properties
                        See the changes


                                          CSS selector to use in your theme
Risky Live Demo
http://d7.sandbox/sweaver
Identifying What's Applied
                With Firebug
●
    Common newbie problem: trying to identifying
    what CSS styles are being applied by staring at
    code.
●   Firebug can be used to identify what CSS is
    actually being applied to a rendered Web page.
●   www.getfirebug.com
Locate Properties of Page Elements




Relevant HTML   Page element   CSS styles
source
Risky Live Firebug Demo
●
    http://d7.sandbox/sbe-site3/
●   Inspect element.
●   Edit CSS properties.
●   Edit CSS files.
●   Cannot publish changes.
●   www.getfirebug.com
Other Useful Browser Tools
●
    Web Developer Toolbar
    http://chrispederick.com/work/web-developer/
●   IE Web Developer Toolbar
    http://tinyurl.com/ie-web-dev-toolbar
Forensics
Devel / Themer
●   The Cadillac of theming tools.
●
    Tells you which tpl.php or theme function is
    responsible for that thing displaying over there.
●   http://drupal.org/project/devel_themer
●   http://drupal.org/project/devel
Point, Click, Analyse




                                                  3. Analyse the list of
                                                  functions, templates,
                          2. Click on the thing   variables, etc which
1. Enable Themer Info     you want to             control this page element.
                          investigate
Investigate What Themer Reveals




      Also go to: http://api.drupal.org
Ooops.
No risky live demo.
Making It Easier
node.tpl.php


                                 field.tpl.php


jplayer.tpl.php




                  page.tpl.php
content
I want less yucky markup!
Pink sherbert photography http://www.flickr.com/photos/pinksherbet/3372060864/
Less Yucky Markup
●
    European vs American theming
●   Inheritance: start with a better base.
●   Base theme: mothership
●   Modules: Semantic Views
●   D6 Modules: Semantic CCK
●   HTML5 http://drupal.org/project/html5_tools
Theming Tools
Sketchbook
Wire Frames




       www.balsamiq.com
Data Model




    http://www.flickr.com/photos/alan-dean/3513723498
Grid Framework




http://960.gs/
Want to Learn Grids?
Harass @markboulton and tell him to finish his book.
http://www.fivesimplesteps.com/
Do it.
Right now.
Tweet him.
And tell him if he doesn't finish his book you're going
to build exclusively 16-column, grid-based Web sites
until his book his published.
CSS (Grid) Framework
Base Theme




●   drupal.org/project/ninesixty
●   drupal.org/project/fusion
●   drupal.org/project/zen
Drupal (Layout) Modules
●
    Context http://drupal.org/project/context
●   Display Suite http://drupal.org/project/ds
●   Panels http://drupal.org/project/panels
Text Editor
Use anything that doesn't make you
want to punch someone in the face.
Build me a theme!
Steps to Making a Theme
1. Communicate with your whole team.
2. Plan your data structure.
3. Use wire frames to prove what you're saying about how the
   site ought to be built.
4.Build the site (ignore the theme).
5. Convert your wire frame to a grid layout.
6.Build out the HTML fragments in the relevant tpl.php files.
7. Apply your theme to the site.
8.Refine as necessary based on the UX.
Domicile
●
    Designed by Betty Biesenthal.
●   Themed by Emma Jane Hogbin.
●   Available from http://drupal.org/project/domicile
●   Described in Drupal: a user's guide
Theme Folder

sites/example.com/themes/theme_name
   theme_name.info
   page.tpl.php



Also: sites/all/themes/base_theme
theme_name.info (1 of 2)
name = D7SBE - Domicile
description = A three-column design by Design House (www.design-house.ca) and themed by
Design to Theme.
screenshot = screenshot.png
core = 7.x
engine = phptemplate
base theme = ninesixty


; Stylesheets.
stylesheets[all][] = styles.css


; To show the 960.gs grid and debug your theme's layout, delete this section.
; You will be able to remove this when http://drupal.org/node/1032486 is rolled out
stylesheets[all][] = debug.css
theme_name.info (2 of 2)
; Regions
regions[nav_left]   = Navigation (left)
regions[feature_middle] = Feature column (middle)
regions[content] = Content column (right)
regions[copyright_footer] = Copyright notice (footer)


; Features
features[] = logo
features[] = name
features[] = favicon
page.tpl.php
Hard Code Relevant Images
Minimum Viable Theme
Locate Properties of Page Elements




Relevant HTML   Page element   CSS styles
source
styles.css
Domicile: the theme
Summary
●   Plan. Think. Build. Test. Theme. Iterate.
●   Use relevant Drupal modules to break up content and display it
    in relevant locations.
●   Use Sweaver to isolate selectors for your CSS files.
●   Use Firebug to diagnose and fix CSS problems.
●   Use Devel to isolate theme functions and variables.
●   Correlate the number of tpl and PHP files you edit to the size of
    your budget and amount of time you have.
The practical guide to building sites with Drupal.



                                              Pre-order eBook edition on




                                                    and SAVE 45%!


                                             Use Coupon Code
                                                          IUGD45
                                                  at Step 3 of Checkout




Available September 2011
Theming Birds of a Feather Sessions
●
    Advanced Theming
    Time slot: 24 August 13:45 – 14:45
    Room 333 Part 1
●
    Front End Development
    Time slot: 25 August 13:30 – 14:30
    Room 333 Part 2
●
    Theming in Drupal 8
    Time slot: 25 August 14:45 – 15:45
    Room 333 Part 2
What did you think?
      Locate this session on the DrupalCon London website:
      http://london2011.drupal.org/conference/schedule


Click the “Take the survey” link

Discounts'n'stuff                                BoFs
45% off Drupal User Guide                        Advanced Theming
www.informit.com Code: IUGD45                    Time slot: 24 August 13:45 – 14:45
                                                 Room 333 Part 1
45% off Design to Theme workbooks
www.designtotheme.com Code: DCLON87488           Front End Development
                                                 Time slot: 25 August 13:30 – 14:30
www.sitebuildingextravaganza.com                 Room 333 Part 2

@emmajanedotnet                                  Theming in Drupal 8
emma@designtotheme.com                           Time slot: 25 August 14:45 – 15:45
                                                 Room 333 Part 2
Forensic Theming - DrupalCon London

More Related Content

What's hot

Dive into HTML5: SVG and Canvas
Dive into HTML5: SVG and CanvasDive into HTML5: SVG and Canvas
Dive into HTML5: SVG and CanvasDoris Chen
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX DesignersAshlimarie
 
Javascript Libraries
Javascript LibrariesJavascript Libraries
Javascript Librarieselliando dias
 
Drupal distributions - how to build them
Drupal distributions - how to build themDrupal distributions - how to build them
Drupal distributions - how to build themDick Olsson
 
Clojurescript slides
Clojurescript slidesClojurescript slides
Clojurescript slideselliando dias
 
From PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to lifeFrom PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to lifeDerek Christensen
 
Designers & Developers
Designers & DevelopersDesigners & Developers
Designers & DevelopersAndré Luís
 
Best Practices in SharePoint Development - Just Freakin Work! Overcoming Hurd...
Best Practices in SharePoint Development - Just Freakin Work! Overcoming Hurd...Best Practices in SharePoint Development - Just Freakin Work! Overcoming Hurd...
Best Practices in SharePoint Development - Just Freakin Work! Overcoming Hurd...Geoff Varosky
 
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to DevelopmentWordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to DevelopmentEvan Mullins
 

What's hot (12)

Dive into HTML5: SVG and Canvas
Dive into HTML5: SVG and CanvasDive into HTML5: SVG and Canvas
Dive into HTML5: SVG and Canvas
 
JavaScript-Core
JavaScript-CoreJavaScript-Core
JavaScript-Core
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
 
Javascript Libraries
Javascript LibrariesJavascript Libraries
Javascript Libraries
 
Drupal distributions - how to build them
Drupal distributions - how to build themDrupal distributions - how to build them
Drupal distributions - how to build them
 
Lecture 3 Javascript1
Lecture 3  Javascript1Lecture 3  Javascript1
Lecture 3 Javascript1
 
Bootstrap 5 ppt
Bootstrap 5 pptBootstrap 5 ppt
Bootstrap 5 ppt
 
Clojurescript slides
Clojurescript slidesClojurescript slides
Clojurescript slides
 
From PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to lifeFrom PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to life
 
Designers & Developers
Designers & DevelopersDesigners & Developers
Designers & Developers
 
Best Practices in SharePoint Development - Just Freakin Work! Overcoming Hurd...
Best Practices in SharePoint Development - Just Freakin Work! Overcoming Hurd...Best Practices in SharePoint Development - Just Freakin Work! Overcoming Hurd...
Best Practices in SharePoint Development - Just Freakin Work! Overcoming Hurd...
 
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to DevelopmentWordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
 

Viewers also liked

habitats_fluviales_red_URA.pdf
habitats_fluviales_red_URA.pdfhabitats_fluviales_red_URA.pdf
habitats_fluviales_red_URA.pdfIrekia - EJGV
 
Presentacion Jornadas As Sistema
Presentacion Jornadas As SistemaPresentacion Jornadas As Sistema
Presentacion Jornadas As SistemaCarlos Vacacela
 
Vip BLD (Business Link Direct)
Vip BLD (Business Link Direct)Vip BLD (Business Link Direct)
Vip BLD (Business Link Direct)Lokacell
 
Practica de biologia n°01
Practica de biologia n°01Practica de biologia n°01
Practica de biologia n°01Jeff CalderoOn
 
Trabalho final roseny
Trabalho final  rosenyTrabalho final  roseny
Trabalho final rosenyAline Chanan
 
Correcciones logistica
Correcciones logisticaCorrecciones logistica
Correcciones logisticaaulaclick
 
HERRAMIENTAS DE LA WEB 2.0 PARA CREAR Y PUBLICAR ARCHIVOS
HERRAMIENTAS DE LA WEB 2.0 PARA CREAR Y PUBLICAR ARCHIVOSHERRAMIENTAS DE LA WEB 2.0 PARA CREAR Y PUBLICAR ARCHIVOS
HERRAMIENTAS DE LA WEB 2.0 PARA CREAR Y PUBLICAR ARCHIVOSEVANNYSOPHIA
 
Comp aula02 penal_comp
Comp aula02 penal_compComp aula02 penal_comp
Comp aula02 penal_compJ M
 
eMarketer_China_Digital_Ad_Trends-Multiple_Forces_Driving_Growth
eMarketer_China_Digital_Ad_Trends-Multiple_Forces_Driving_GrowtheMarketer_China_Digital_Ad_Trends-Multiple_Forces_Driving_Growth
eMarketer_China_Digital_Ad_Trends-Multiple_Forces_Driving_GrowthGLG (Gerson Lehrman Group)
 
T Ips Metodologia Formacion Proyectos 1
T Ips Metodologia Formacion Proyectos 1T Ips Metodologia Formacion Proyectos 1
T Ips Metodologia Formacion Proyectos 1francisco
 
Rodriguez sabina e2 modificado
Rodriguez sabina   e2 modificadoRodriguez sabina   e2 modificado
Rodriguez sabina e2 modificadoRodriguez_Sabina
 

Viewers also liked (20)

Buenas practicas de uso de agua en servicios
Buenas practicas de uso de agua en serviciosBuenas practicas de uso de agua en servicios
Buenas practicas de uso de agua en servicios
 
habitats_fluviales_red_URA.pdf
habitats_fluviales_red_URA.pdfhabitats_fluviales_red_URA.pdf
habitats_fluviales_red_URA.pdf
 
Presentacion Jornadas As Sistema
Presentacion Jornadas As SistemaPresentacion Jornadas As Sistema
Presentacion Jornadas As Sistema
 
Ficha 9
Ficha 9Ficha 9
Ficha 9
 
Vip BLD (Business Link Direct)
Vip BLD (Business Link Direct)Vip BLD (Business Link Direct)
Vip BLD (Business Link Direct)
 
Practica de biologia n°01
Practica de biologia n°01Practica de biologia n°01
Practica de biologia n°01
 
Columnas
Columnas Columnas
Columnas
 
Act 2 blog
Act 2 blogAct 2 blog
Act 2 blog
 
Quik Venues
Quik VenuesQuik Venues
Quik Venues
 
Pescado fresco
Pescado frescoPescado fresco
Pescado fresco
 
Presentació2102n1
Presentació2102n1Presentació2102n1
Presentació2102n1
 
Trabalho final roseny
Trabalho final  rosenyTrabalho final  roseny
Trabalho final roseny
 
Correcciones logistica
Correcciones logisticaCorrecciones logistica
Correcciones logistica
 
HERRAMIENTAS DE LA WEB 2.0 PARA CREAR Y PUBLICAR ARCHIVOS
HERRAMIENTAS DE LA WEB 2.0 PARA CREAR Y PUBLICAR ARCHIVOSHERRAMIENTAS DE LA WEB 2.0 PARA CREAR Y PUBLICAR ARCHIVOS
HERRAMIENTAS DE LA WEB 2.0 PARA CREAR Y PUBLICAR ARCHIVOS
 
Comp aula02 penal_comp
Comp aula02 penal_compComp aula02 penal_comp
Comp aula02 penal_comp
 
eMarketer_China_Digital_Ad_Trends-Multiple_Forces_Driving_Growth
eMarketer_China_Digital_Ad_Trends-Multiple_Forces_Driving_GrowtheMarketer_China_Digital_Ad_Trends-Multiple_Forces_Driving_Growth
eMarketer_China_Digital_Ad_Trends-Multiple_Forces_Driving_Growth
 
T Ips Metodologia Formacion Proyectos 1
T Ips Metodologia Formacion Proyectos 1T Ips Metodologia Formacion Proyectos 1
T Ips Metodologia Formacion Proyectos 1
 
Carlos verdun merchandising
Carlos verdun merchandisingCarlos verdun merchandising
Carlos verdun merchandising
 
Rodriguez sabina e2 modificado
Rodriguez sabina   e2 modificadoRodriguez sabina   e2 modificado
Rodriguez sabina e2 modificado
 
Memento
MementoMemento
Memento
 

Similar to Forensic Theming - DrupalCon London

Theme customisation for beginners
Theme customisation for beginnersTheme customisation for beginners
Theme customisation for beginnersGareth J Barnard
 
Intro to Theming Drupal, FOSSLC Summer Camp 2010
Intro to Theming Drupal, FOSSLC Summer Camp 2010Intro to Theming Drupal, FOSSLC Summer Camp 2010
Intro to Theming Drupal, FOSSLC Summer Camp 2010Emma Jane Hogbin Westby
 
There's a Module for That, MIMA Summit 2010
There's a Module for That, MIMA Summit 2010There's a Module for That, MIMA Summit 2010
There's a Module for That, MIMA Summit 2010Emma Jane Hogbin Westby
 
Spark: Authoring Experience++ in Drupal 7, 8, and Beyond
Spark: Authoring Experience++ in Drupal 7, 8, and BeyondSpark: Authoring Experience++ in Drupal 7, 8, and Beyond
Spark: Authoring Experience++ in Drupal 7, 8, and BeyondAngela Byron
 
Ready. Set. Drupal! An Intro to Drupal 8, Part 2
Ready. Set. Drupal! An Intro to Drupal 8, Part 2Ready. Set. Drupal! An Intro to Drupal 8, Part 2
Ready. Set. Drupal! An Intro to Drupal 8, Part 2Acquia
 
Implementing a Symfony Based CMS in a Publishing Company
Implementing a Symfony Based CMS in a Publishing CompanyImplementing a Symfony Based CMS in a Publishing Company
Implementing a Symfony Based CMS in a Publishing CompanyMarcos Labad
 
Architektura html, css i javascript - Jan Kraus
Architektura html, css i javascript - Jan KrausArchitektura html, css i javascript - Jan Kraus
Architektura html, css i javascript - Jan KrausWomen in Technology Poland
 
Becoming A Drupal Master Builder
Becoming A Drupal Master BuilderBecoming A Drupal Master Builder
Becoming A Drupal Master BuilderPhilip Norton
 
Developing Custom WordPress Themes for Clients
Developing Custom WordPress Themes for ClientsDeveloping Custom WordPress Themes for Clients
Developing Custom WordPress Themes for ClientsSteven Slack
 
Atlanta Drupal User Group (ADUG)
Atlanta Drupal User Group (ADUG) Atlanta Drupal User Group (ADUG)
Atlanta Drupal User Group (ADUG) Mediacurrent
 
Decoupling Drupal mit dem Lupus Nuxt.js Drupal Stack
Decoupling Drupal mit dem Lupus Nuxt.js Drupal StackDecoupling Drupal mit dem Lupus Nuxt.js Drupal Stack
Decoupling Drupal mit dem Lupus Nuxt.js Drupal Stacknuppla
 
Freelancer Weapons of mass productivity
Freelancer Weapons of mass productivityFreelancer Weapons of mass productivity
Freelancer Weapons of mass productivityGregg Coppen
 
Drupal: an Overview
Drupal: an OverviewDrupal: an Overview
Drupal: an OverviewMatt Weaver
 
Making Your Site Printable: CSS Summit 2014
Making Your Site Printable: CSS Summit 2014Making Your Site Printable: CSS Summit 2014
Making Your Site Printable: CSS Summit 2014Adrian Roselli
 
Responsive Web Design for Drupal, CMS Expo
Responsive Web Design for Drupal, CMS ExpoResponsive Web Design for Drupal, CMS Expo
Responsive Web Design for Drupal, CMS ExpoEmma Jane Hogbin Westby
 
Future proofing design work with Web components
Future proofing design work with Web componentsFuture proofing design work with Web components
Future proofing design work with Web componentsbtopro
 

Similar to Forensic Theming - DrupalCon London (20)

Forensic Theming for Drupal
Forensic Theming for DrupalForensic Theming for Drupal
Forensic Theming for Drupal
 
Theme customisation for beginners
Theme customisation for beginnersTheme customisation for beginners
Theme customisation for beginners
 
Intro to Theming Drupal, FOSSLC Summer Camp 2010
Intro to Theming Drupal, FOSSLC Summer Camp 2010Intro to Theming Drupal, FOSSLC Summer Camp 2010
Intro to Theming Drupal, FOSSLC Summer Camp 2010
 
Drupal Flyover, CMS Expo
Drupal Flyover, CMS ExpoDrupal Flyover, CMS Expo
Drupal Flyover, CMS Expo
 
There's a Module for That, MIMA Summit 2010
There's a Module for That, MIMA Summit 2010There's a Module for That, MIMA Summit 2010
There's a Module for That, MIMA Summit 2010
 
Spark: Authoring Experience++ in Drupal 7, 8, and Beyond
Spark: Authoring Experience++ in Drupal 7, 8, and BeyondSpark: Authoring Experience++ in Drupal 7, 8, and Beyond
Spark: Authoring Experience++ in Drupal 7, 8, and Beyond
 
Design to Theme @ CMSExpo
Design to Theme @ CMSExpoDesign to Theme @ CMSExpo
Design to Theme @ CMSExpo
 
Ready. Set. Drupal! An Intro to Drupal 8, Part 2
Ready. Set. Drupal! An Intro to Drupal 8, Part 2Ready. Set. Drupal! An Intro to Drupal 8, Part 2
Ready. Set. Drupal! An Intro to Drupal 8, Part 2
 
Implementing a Symfony Based CMS in a Publishing Company
Implementing a Symfony Based CMS in a Publishing CompanyImplementing a Symfony Based CMS in a Publishing Company
Implementing a Symfony Based CMS in a Publishing Company
 
Architektura html, css i javascript - Jan Kraus
Architektura html, css i javascript - Jan KrausArchitektura html, css i javascript - Jan Kraus
Architektura html, css i javascript - Jan Kraus
 
Becoming A Drupal Master Builder
Becoming A Drupal Master BuilderBecoming A Drupal Master Builder
Becoming A Drupal Master Builder
 
Developing Custom WordPress Themes for Clients
Developing Custom WordPress Themes for ClientsDeveloping Custom WordPress Themes for Clients
Developing Custom WordPress Themes for Clients
 
Atlanta Drupal User Group (ADUG)
Atlanta Drupal User Group (ADUG) Atlanta Drupal User Group (ADUG)
Atlanta Drupal User Group (ADUG)
 
Decoupling Drupal mit dem Lupus Nuxt.js Drupal Stack
Decoupling Drupal mit dem Lupus Nuxt.js Drupal StackDecoupling Drupal mit dem Lupus Nuxt.js Drupal Stack
Decoupling Drupal mit dem Lupus Nuxt.js Drupal Stack
 
Freelancer Weapons of mass productivity
Freelancer Weapons of mass productivityFreelancer Weapons of mass productivity
Freelancer Weapons of mass productivity
 
Drupal: an Overview
Drupal: an OverviewDrupal: an Overview
Drupal: an Overview
 
Making Your Site Printable: CSS Summit 2014
Making Your Site Printable: CSS Summit 2014Making Your Site Printable: CSS Summit 2014
Making Your Site Printable: CSS Summit 2014
 
Drupal in-depth
Drupal in-depthDrupal in-depth
Drupal in-depth
 
Responsive Web Design for Drupal, CMS Expo
Responsive Web Design for Drupal, CMS ExpoResponsive Web Design for Drupal, CMS Expo
Responsive Web Design for Drupal, CMS Expo
 
Future proofing design work with Web components
Future proofing design work with Web componentsFuture proofing design work with Web components
Future proofing design work with Web components
 

More from Emma Jane Hogbin Westby

Managing a Project the Drupal Way - Drupal Open Days Ireland
Managing a Project the Drupal Way - Drupal Open Days IrelandManaging a Project the Drupal Way - Drupal Open Days Ireland
Managing a Project the Drupal Way - Drupal Open Days IrelandEmma Jane Hogbin Westby
 
Git Makes Me Angry Inside - DrupalCon Prague
Git Makes Me Angry Inside - DrupalCon PragueGit Makes Me Angry Inside - DrupalCon Prague
Git Makes Me Angry Inside - DrupalCon PragueEmma Jane Hogbin Westby
 
Was It Something I Said? The Art of Giving (and getting) A Critique
Was It Something I Said? The Art of Giving (and getting) A CritiqueWas It Something I Said? The Art of Giving (and getting) A Critique
Was It Something I Said? The Art of Giving (and getting) A CritiqueEmma Jane Hogbin Westby
 
Work Flow for Solo Developers and Small Teams
Work Flow for Solo Developers and Small TeamsWork Flow for Solo Developers and Small Teams
Work Flow for Solo Developers and Small TeamsEmma Jane Hogbin Westby
 
Selling Hopes and Dreams - DrupalCamp Toronto
Selling Hopes and Dreams - DrupalCamp TorontoSelling Hopes and Dreams - DrupalCamp Toronto
Selling Hopes and Dreams - DrupalCamp TorontoEmma Jane Hogbin Westby
 

More from Emma Jane Hogbin Westby (20)

Managing a Project the Drupal Way - Drupal Open Days Ireland
Managing a Project the Drupal Way - Drupal Open Days IrelandManaging a Project the Drupal Way - Drupal Open Days Ireland
Managing a Project the Drupal Way - Drupal Open Days Ireland
 
Was it something I said?
Was it something I said?Was it something I said?
Was it something I said?
 
HOWTO Empathy
HOWTO EmpathyHOWTO Empathy
HOWTO Empathy
 
Getting a CLUE at the Command Line
Getting a CLUE at the Command LineGetting a CLUE at the Command Line
Getting a CLUE at the Command Line
 
Lessons From an Unlikely Superhero
Lessons From an Unlikely SuperheroLessons From an Unlikely Superhero
Lessons From an Unlikely Superhero
 
PSD to Theme: The SMACSS Way
PSD to Theme: The SMACSS WayPSD to Theme: The SMACSS Way
PSD to Theme: The SMACSS Way
 
Git Makes Me Angry Inside - DrupalCon Prague
Git Makes Me Angry Inside - DrupalCon PragueGit Makes Me Angry Inside - DrupalCon Prague
Git Makes Me Angry Inside - DrupalCon Prague
 
Git Makes Me Angry Inside
Git Makes Me Angry InsideGit Makes Me Angry Inside
Git Makes Me Angry Inside
 
Was It Something I Said? The Art of Giving (and getting) A Critique
Was It Something I Said? The Art of Giving (and getting) A CritiqueWas It Something I Said? The Art of Giving (and getting) A Critique
Was It Something I Said? The Art of Giving (and getting) A Critique
 
Beyond the Bikeshed
Beyond the BikeshedBeyond the Bikeshed
Beyond the Bikeshed
 
Gamestorming Meets Quiet
Gamestorming Meets QuietGamestorming Meets Quiet
Gamestorming Meets Quiet
 
Git Makes Me Angry Inside
Git Makes Me Angry InsideGit Makes Me Angry Inside
Git Makes Me Angry Inside
 
Work Flow for Solo Developers and Small Teams
Work Flow for Solo Developers and Small TeamsWork Flow for Solo Developers and Small Teams
Work Flow for Solo Developers and Small Teams
 
Speaker Check-in - 3 - Munich
Speaker Check-in - 3 - MunichSpeaker Check-in - 3 - Munich
Speaker Check-in - 3 - Munich
 
Selling Hopes and Dreams - DrupalCamp Toronto
Selling Hopes and Dreams - DrupalCamp TorontoSelling Hopes and Dreams - DrupalCamp Toronto
Selling Hopes and Dreams - DrupalCamp Toronto
 
Advanced Layout Techniques @ CMSExpo
Advanced Layout Techniques @ CMSExpoAdvanced Layout Techniques @ CMSExpo
Advanced Layout Techniques @ CMSExpo
 
Drupal Help System
Drupal Help SystemDrupal Help System
Drupal Help System
 
Lessons from Life Coaching for Linux
Lessons from Life Coaching for LinuxLessons from Life Coaching for Linux
Lessons from Life Coaching for Linux
 
Beautiful In Print
Beautiful In PrintBeautiful In Print
Beautiful In Print
 
We Economy - Drupalsouth
We Economy - DrupalsouthWe Economy - Drupalsouth
We Economy - Drupalsouth
 

Recently uploaded

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Victor Rentea
 
Stronger Together: Developing an Organizational Strategy for Accessible Desig...
Stronger Together: Developing an Organizational Strategy for Accessible Desig...Stronger Together: Developing an Organizational Strategy for Accessible Desig...
Stronger Together: Developing an Organizational Strategy for Accessible Desig...caitlingebhard1
 
Working together SRE & Platform Engineering
Working together SRE & Platform EngineeringWorking together SRE & Platform Engineering
Working together SRE & Platform EngineeringMarcus Vechiato
 
UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewDianaGray10
 
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...SOFTTECHHUB
 
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptxCyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptxMasterG
 
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...FIDO Alliance
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Victor Rentea
 
2024 May Patch Tuesday
2024 May Patch Tuesday2024 May Patch Tuesday
2024 May Patch TuesdayIvanti
 
Introduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDMIntroduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDMKumar Satyam
 
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Skynet Technologies
 
Top 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTop 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTopCSSGallery
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxFIDO Alliance
 
Simplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptxSimplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptxMarkSteadman7
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuidePixlogix Infotech
 
AI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by AnitarajAI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by AnitarajAnitaRaj43
 
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...ScyllaDB
 
Generative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdfGenerative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdfalexjohnson7307
 
Design and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data ScienceDesign and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data SciencePaolo Missier
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...panagenda
 

Recently uploaded (20)

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
Stronger Together: Developing an Organizational Strategy for Accessible Desig...
Stronger Together: Developing an Organizational Strategy for Accessible Desig...Stronger Together: Developing an Organizational Strategy for Accessible Desig...
Stronger Together: Developing an Organizational Strategy for Accessible Desig...
 
Working together SRE & Platform Engineering
Working together SRE & Platform EngineeringWorking together SRE & Platform Engineering
Working together SRE & Platform Engineering
 
UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overview
 
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
 
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptxCyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
 
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
2024 May Patch Tuesday
2024 May Patch Tuesday2024 May Patch Tuesday
2024 May Patch Tuesday
 
Introduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDMIntroduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDM
 
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
 
Top 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTop 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development Companies
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptx
 
Simplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptxSimplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptx
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate Guide
 
AI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by AnitarajAI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by Anitaraj
 
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
 
Generative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdfGenerative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdf
 
Design and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data ScienceDesign and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data Science
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
 

Forensic Theming - DrupalCon London

  • 1. Design, UX and Theming Forensic Theming Emma Jane Hogbin @emmajanedotnet www.designtotheme.com
  • 2. drupal.org participation ● emmajane ● uid: 1773 ● First look at the Drupal code base: 2003ish. I stole the i18n table structure. ● First Drupal site “for pay”: 2006ish. ● First Drupal socks: 2007. ● First DrupalCon conference: Szeged in 2008. ● First Drupal book: 2009. ● First Drupal core patch: 2010. Removed the “welcome” screen.
  • 3. Really Tiny Web Budgets
  • 7. Workbook Author www.designtotheme.com Discount Code: DCLON87488 Valid to the end of August.
  • 9. Lazy Front End Developer
  • 10. I'll just change this one tpl.php file http://www.flickr.com/photos/gibbons/2500423526
  • 11. Okay ... and a module file?
  • 13. ... everything else too? Bugger. http://www.flickr.com/photos/amagill/3225245292
  • 14. This presentation is not about ... ● Best practices ● Inheritance ● Anything advanced ● HTML5 ● Design ● Photoshop ● Semantic markup ● Web systems ● Responsive Web design ● Theming APIs ● Typography ● Mobile devices ● Grids (maybe a little bit) ● Unicorns ● CSS optimization ● Sprites ● CSS preprocessing ● In-the-browser design ● Rick Astley ● Sliding doors ● PHP ● Gradients ● Hooks ● IE6
  • 15. Advanced Theming Sessions Display Suite Tuesday 17:00 - NodeOne Road - Fairfield Room http://tinyurl.com/dclondon-displaysuite Theming API Tuesday 15:45 - NodeOne Road - Fairfield Room http://tinyurl.com/dclondon-themingapi Responsive Design Thursday 11am - Axis 12 Street - Arnhem Gallery http://tinyurl.com/dclondon-responsivedesign
  • 16. Forensic Theming Best Practices Dissecting Themes
  • 17. Agenda Tools for Forensic Theming Theming Tools Sketchbooks CSS Frameworks Sweaver ● ● ● Wireframes ● Base themes Firebug ● ● ● Data models ● Layout modules ● Devel Themer ● Grid frameworks ● Text editors Theme Building Summary ● Base themes ● Questions/Answers ● Image extraction ● Bonuses ● MVTs ● Forensic styling
  • 20. Forensic Theming Definition: the art of investigating a Drupal page to find out how that thing got there.
  • 21. Two Types of Clues Crime Scene Investigation Working with the rendered page: ● Available CSS selectors. ● Applied CSS styles. Crime Lab Forensics Working with Drupal code files: ● Theme templates ● Module templates ● Hard coded module nonsense
  • 22. Crime Scene Working with rendered pages. You can only look at the effects of Drupal on a rendered page.
  • 23. Identifying CSS Selectors With Sweaver ● Common newbie problem: being able to find relevant CSS selectors. ● Sweaver can be used as a pointy-clicky-non-scary CSS class selector. ● Can save/publish minor changes to CSS to live Web sites. ● http://drupal.org/project/sweaver
  • 26. See How a Selector Will Be Applied Change CSS properties See the changes CSS selector to use in your theme
  • 28. Identifying What's Applied With Firebug ● Common newbie problem: trying to identifying what CSS styles are being applied by staring at code. ● Firebug can be used to identify what CSS is actually being applied to a rendered Web page. ● www.getfirebug.com
  • 29. Locate Properties of Page Elements Relevant HTML Page element CSS styles source
  • 30. Risky Live Firebug Demo ● http://d7.sandbox/sbe-site3/ ● Inspect element. ● Edit CSS properties. ● Edit CSS files. ● Cannot publish changes. ● www.getfirebug.com
  • 31. Other Useful Browser Tools ● Web Developer Toolbar http://chrispederick.com/work/web-developer/ ● IE Web Developer Toolbar http://tinyurl.com/ie-web-dev-toolbar
  • 33. Devel / Themer ● The Cadillac of theming tools. ● Tells you which tpl.php or theme function is responsible for that thing displaying over there. ● http://drupal.org/project/devel_themer ● http://drupal.org/project/devel
  • 34. Point, Click, Analyse 3. Analyse the list of functions, templates, 2. Click on the thing variables, etc which 1. Enable Themer Info you want to control this page element. investigate
  • 35. Investigate What Themer Reveals Also go to: http://api.drupal.org
  • 37. No risky live demo.
  • 39. node.tpl.php field.tpl.php jplayer.tpl.php page.tpl.php
  • 41. I want less yucky markup! Pink sherbert photography http://www.flickr.com/photos/pinksherbet/3372060864/
  • 42.
  • 43. Less Yucky Markup ● European vs American theming ● Inheritance: start with a better base. ● Base theme: mothership ● Modules: Semantic Views ● D6 Modules: Semantic CCK ● HTML5 http://drupal.org/project/html5_tools
  • 46. Wire Frames www.balsamiq.com
  • 47. Data Model http://www.flickr.com/photos/alan-dean/3513723498
  • 49. Want to Learn Grids? Harass @markboulton and tell him to finish his book. http://www.fivesimplesteps.com/ Do it. Right now. Tweet him. And tell him if he doesn't finish his book you're going to build exclusively 16-column, grid-based Web sites until his book his published.
  • 51. Base Theme ● drupal.org/project/ninesixty ● drupal.org/project/fusion ● drupal.org/project/zen
  • 52. Drupal (Layout) Modules ● Context http://drupal.org/project/context ● Display Suite http://drupal.org/project/ds ● Panels http://drupal.org/project/panels
  • 53. Text Editor Use anything that doesn't make you want to punch someone in the face.
  • 54. Build me a theme!
  • 55. Steps to Making a Theme 1. Communicate with your whole team. 2. Plan your data structure. 3. Use wire frames to prove what you're saying about how the site ought to be built. 4.Build the site (ignore the theme). 5. Convert your wire frame to a grid layout. 6.Build out the HTML fragments in the relevant tpl.php files. 7. Apply your theme to the site. 8.Refine as necessary based on the UX.
  • 56. Domicile ● Designed by Betty Biesenthal. ● Themed by Emma Jane Hogbin. ● Available from http://drupal.org/project/domicile ● Described in Drupal: a user's guide
  • 57.
  • 58.
  • 59.
  • 61. theme_name.info (1 of 2) name = D7SBE - Domicile description = A three-column design by Design House (www.design-house.ca) and themed by Design to Theme. screenshot = screenshot.png core = 7.x engine = phptemplate base theme = ninesixty ; Stylesheets. stylesheets[all][] = styles.css ; To show the 960.gs grid and debug your theme's layout, delete this section. ; You will be able to remove this when http://drupal.org/node/1032486 is rolled out stylesheets[all][] = debug.css
  • 62. theme_name.info (2 of 2) ; Regions regions[nav_left] = Navigation (left) regions[feature_middle] = Feature column (middle) regions[content] = Content column (right) regions[copyright_footer] = Copyright notice (footer) ; Features features[] = logo features[] = name features[] = favicon
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 71. Locate Properties of Page Elements Relevant HTML Page element CSS styles source
  • 74. Summary ● Plan. Think. Build. Test. Theme. Iterate. ● Use relevant Drupal modules to break up content and display it in relevant locations. ● Use Sweaver to isolate selectors for your CSS files. ● Use Firebug to diagnose and fix CSS problems. ● Use Devel to isolate theme functions and variables. ● Correlate the number of tpl and PHP files you edit to the size of your budget and amount of time you have.
  • 75. The practical guide to building sites with Drupal. Pre-order eBook edition on and SAVE 45%! Use Coupon Code IUGD45 at Step 3 of Checkout Available September 2011
  • 76. Theming Birds of a Feather Sessions ● Advanced Theming Time slot: 24 August 13:45 – 14:45 Room 333 Part 1 ● Front End Development Time slot: 25 August 13:30 – 14:30 Room 333 Part 2 ● Theming in Drupal 8 Time slot: 25 August 14:45 – 15:45 Room 333 Part 2
  • 77. What did you think? Locate this session on the DrupalCon London website: http://london2011.drupal.org/conference/schedule Click the “Take the survey” link Discounts'n'stuff BoFs 45% off Drupal User Guide Advanced Theming www.informit.com Code: IUGD45 Time slot: 24 August 13:45 – 14:45 Room 333 Part 1 45% off Design to Theme workbooks www.designtotheme.com Code: DCLON87488 Front End Development Time slot: 25 August 13:30 – 14:30 www.sitebuildingextravaganza.com Room 333 Part 2 @emmajanedotnet Theming in Drupal 8 emma@designtotheme.com Time slot: 25 August 14:45 – 15:45 Room 333 Part 2