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...
Our journey:
1) Why is theming so hard, and
how are modules easier?
2) Which modules can help with theming?
3) How can you...
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...
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...
Modules are easy.
1) Color
2) Font-your-face
3) Background Images
4) Display Suite
5) Gallery Formatter/
Lightbox2
Elements of Design
1) Color
2) Typography
3) Texture
source: some DrupalConPDX session
Color
"The Color module allows you to
easily change the color of links,
backgrounds, text, and other theme
elements."
sour...
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 loo...
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
...
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
-Corpo...
Elements of Design
1) Color
2) Typography
3) Texture
source: some DrupalConPDX session
@font-your-face
Typography
"@font-your-face provides an
administrative interface for
browsing and applying web fonts
from ...
@font-your-face
● Typekit.com
● Google Fonts
● Font Squirrel
● Fontdeck
● Fonts.com
● Adobe Edge Web Fonts
● Local fonts
s...
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) Color
2) Typography
3) Texture
source: some DrupalConPDX session
Background Images
Texture
"Background images allows users to
add background images to html
elements on pages of the site."...
Elements of
Drupal Design
1) Color
2) Typography
3) Texture
4) Layout
source: some DrupalConPDX session and me
Layout
1) Display Suite
2) Gallery Formatter/
Lightbox2
Layout
1) Display Suite
2) Gallery Formatter/
Lightbox2
Display Suite
"Display Suite allows you to take full control
over how your content is displayed using a
drag and drop inte...
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 Suite
2) Gallery Formatter/
Lightbox2
Gallery Formatter
"Gallery formatter will turn any
image field into a jQuery Gallery."
source: https://drupal.org/project/...
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) ...
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...
Advanced Beginner
Tools
Panels - "The Panels module allows a site
administrator to create customized layouts for
multiple ...
Advanced Beginner
Tools
Context - "Context allows you to manage contextual
conditions and reactions for different portions...
Our journey:
1) Why is theming so hard, and why do I think
modules are better?
2) Which modules can help with theming?
3) ...
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
Upcoming SlideShare
Loading in …5
×

2013 Twin Cities Drupal Camp - No CSS Needed: A Sitebuilders' Guide to Theming

630 views
554 views

Published on

Talk by Tara King

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
630
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

2013 Twin Cities Drupal Camp - No CSS Needed: A Sitebuilders' Guide to Theming

  1. 1. No CSS Needed: A Sitebuilders' Guide to Theming @sparklingrobots
  2. 2. Hi, I'm Tara. Tara King @sparklingrobots Sparkling Robots Design Cruiskeen Consulting
  3. 3. 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?
  4. 4. 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?
  5. 5. Why is theming so hard? php, CSS, HTML, SASS, SMACSS, jQuery, mobile-friendly ...and more
  6. 6. How are modules easier? CHEAP, FAST, OR GOOD: CHOOSE TWO. It's fast! It's cheap! It's not terrible!
  7. 7. 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.
  8. 8. Why is this better? ● It's the Drupal way! You take advantage of contributed code, it's easier to maintain, and it's free.
  9. 9. Why Drupal? ● Views ● Time-sensitive content ● Media handling ● ...Overall flexibility!
  10. 10. 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?
  11. 11. Modules are easy. 1) Color 2) Font-your-face 3) Background Images 4) Display Suite 5) Gallery Formatter/ Lightbox2
  12. 12. Elements of Design 1) Color 2) Typography 3) Texture source: some DrupalConPDX session
  13. 13. 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
  14. 14. 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
  15. 15. Let's recolor Bartik!
  16. 16. 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.
  17. 17. Color: the new way.
  18. 18. Color!
  19. 19. Color?
  20. 20. Color help! www.colorschemedesigner.com
  21. 21. 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
  22. 22. Elements of Design 1) Color 2) Typography 3) Texture source: some DrupalConPDX session
  23. 23. @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
  24. 24. @font-your-face ● Typekit.com ● Google Fonts ● Font Squirrel ● Fontdeck ● Fonts.com ● Adobe Edge Web Fonts ● Local fonts source: https://drupal.org/project/fontyourface
  25. 25. The old way: Use the CSS @font-face rule. Let's use a new typeface!
  26. 26. @font-your-face
  27. 27. @font-your-face
  28. 28. @font-your-face: Group selectors
  29. 29. @font-your-face
  30. 30. @font-your-face: Custom Selectors
  31. 31. @font-your-face: Custom Selectors
  32. 32. @font-your-face
  33. 33. Where we started:
  34. 34. Where we are now:
  35. 35. Elements of Design 1) Color 2) Typography 3) Texture source: some DrupalConPDX session
  36. 36. 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
  37. 37. Elements of Drupal Design 1) Color 2) Typography 3) Texture 4) Layout source: some DrupalConPDX session and me
  38. 38. Layout 1) Display Suite 2) Gallery Formatter/ Lightbox2
  39. 39. Layout 1) Display Suite 2) Gallery Formatter/ Lightbox2
  40. 40. 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
  41. 41. Default Layout.
  42. 42. Default Display Options.
  43. 43. Display Suite. Pick your layout:
  44. 44. Display Suite. New options in "Manage display":
  45. 45. Display Suite.
  46. 46. Display Suite. Free intro to Display Suite! drupalize.me/series/display-suite-drupal-7 Kristof De Jaeger
  47. 47. Layout 1) Display Suite 2) Gallery Formatter/ Lightbox2
  48. 48. Gallery Formatter "Gallery formatter will turn any image field into a jQuery Gallery." source: https://drupal.org/project/galleryformatter
  49. 49. Gallery Formatter
  50. 50. Gallery Formatter
  51. 51. Lightbox2 "The Lightbox2 module overlays images on the current page." source: https://drupal.org/project/lightbox2
  52. 52. Gallery Formatter + Lightbox2
  53. 53. 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?
  54. 54. Advanced Beginner Tools ● Omega ● Panels ● Context
  55. 55. 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
  56. 56. 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
  57. 57. 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
  58. 58. 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?
  59. 59. Drupal is pretty confusing...
  60. 60. ...but it's also pretty great. source: me
  61. 61. Drupal has 27,782 developers. Let them help you! source: drupal.org
  62. 62. Confession time.
  63. 63. ??
  64. 64. Thank you. @sparklingrobots tara@sparklingrobots.com

×