2013 twin cities drupal camp - no css needed: a sitebuilders' guide to theming
DESCRIPTION
Talk by Tara KingTRANSCRIPT
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