Course Description
Experienced front end developers spontaneously transform static design files into complete Drupal themes without realizing all of the little steps their brain takes to achieve the final solution. In this session you'll learn, and get to practice, the step-by-step strategies and techniques needed to pull apart a static design file, and rebuild it as a Drupal theme. You will learn the principles behind:
- component-based Web design for responsive Web design
- creating style guides using interface design patterns
- libraries for rapid front end development
- object-oriented CSS with Sass and Compass
- organizing themes using object-oriented CSS best practices
- extracting usable assets from static design files
This session gives a high-level overview of the front end development process, and then dives into hands-on activities for the trickiest parts of the design-to-theme process. With start-to-finish examples, this workshop is perfect for designers wanting to learn front end development techniques; developers wanting to improve their design literacy skills; and project managers who want to improve their team's communication.
Learning Objectives
- Identify components in a static design file using a list of established design patterns.
- Describe the generalized process for breaking down a static design file into assets and their related CSS style rules.
- Apply the concepts of component-based design to a Drupal theme
Digital handouts will be provided for learners wanting to build either a Drupal 7 or a Drupal 8 theme. The best practices of component-based design apply equally to both versions of Drupal.
Early Bird Promotion
Register before May 2nd and receive a FREE annual membership to the premium video training service, Drupalize.Me. Those registering after May 2nd (if we're not sold out) will receive only a one-month membership. (Account activation information will be forwarded to you in May.)
Syllabus
Morning - Part 1 - component-based Web design for responsive web sites
Morning - Part 2 - creating style guides using interface design patterns
Afternoon - Part 1 - object-oriented CSS with Sass and Compass
Afternoon - Part 2 - applying your styles to Drupal
Who will gain the most from this course?
Designers, novice themers/front-end developers, and project managers.
Prerequisites for this course
This is a process-oriented workshop with hands-on activities designed for individuals working on Web production teams. e.g. designer, coder, or project manager. They should have sufficient vocabulary about web design to *either* be able to discuss design elements, and/or front end languages (HTML, CSS).
Those who have a development environment setup (e.g. coders) will be able to complete code-related activities at their own pace.
Those who do not have a development environment setup (e.g. project managers) may choose to pair up with one who does; or will be given alternate activities to discuss the pros and cons for the steps outlined for their team.
This team-centered approach makes the workshop valuable to the range of people we see working on modern Web development teams.
Event Information
Date: Monday, June 2
Time: 09:00-05:00
Cost: $475.00 - included breakfast, lunch, and coffee breaks