Do your Drupal themes work on all devices, regardless of size or browser complexity? This hands-on, “You can do it” training session will teach you how to create and theme a responsive design in Drupal.

Four Kitchens’ web chefs will show you:

• The past, present, and future of responsive design
• How to create a responsive layout
• How to plan for content delivery and fluidity
• How to implement your plan in the Drupal theme layer
• @media queries and HTML/CSS conventions
• JavaScript enhancements

Course Overview

• What is Responsive Design?
• The Basics
  • Fluid layout
  • HTML/CSS aspects
  • CSS3 @media queries
  • JavaScript: your future as a themer
  • Images and other rich content

The Four Step Process

1. The Design
2. Minimum Viable Content
3. @media
4. HTML, CSS, Grid

Advanced topics (as time permits)

• Advanced CSS3 (transitions, interaction cues)
• JavaScript (make it performant)
• Feature detection
• Conditional loading
• Making it work in old browsers (polyfills)
• Responsive images and content
• Obscure FOUCs and make your work sparkle with jQuery

Students will need to bring:

Laptops. Each attendee will have a development instance to access and build on.

Intended audience and skill level

This is not a beginner course. To attend, you must be skilled in:

• HTML and CSS
• Drupal theming (can build from a sub theme)
• Javascript (some use of JQuery)
• Accessing a development site
• Editing with a tool like Coda, Vim, or Textmate

Skill level

Intermediate -> Advanced