SMACSS Workshops

The SMACSS Workshop is a full day of instruction and exercises on writing HTML and CSS using a flexible and modular approach that will improve team efficiency and minimize problems with growing projects. It takes the e-book and brings it to life with practical examples and in-depth discussion.

Each workshop is capped at 25 attendees for an intimate and comfortable learning experience. Get your tickets while you can!

#smacss workshop earlier today was awesome! cant wait to apply it to my upcoming projects. thanks again @snookca

— Terry Appleby (@Tjay819) March 2, 2012

Is this workshop for you?

Have you ever added !important or added an extra selector just to get something to style properly? Have you found yourself adding more properties to override properties you already set elsewhere in your CSS? Does inspecting an element in Firebug or Web Inspector reveal a long stream of styles being applied, overridden, and reapplied? Then this workshop is for you.

You need not have played with the latest and greatest CSS3 and know what a vendor prefix is. You will need to know a selector from a property and have a general understanding of CSS-based layouts.

That was awesome workshopness. Thanks @snookca. #smacss

— Andreas Dantz (@dantz) March 15, 2012

What is planned for the day

The day is broken down into four sessions of 1½ hours each. That's six hours of hardcore learning! (Plus lunch and two breaks. I don't want you to starve or pass out!)

Part 1: Overview

For the first part of the day, we will take a look at the principles of modular design:

• Learn the Five Types of CSS Rules: Base, Layout, Module, State, and Theme
• Explore how to separate theming and typography
• See how small sites differ from large (and why SMACSS can work for both)
• Learn about State Representation
• Look at Depth of Applicability and what it means for maintainable code and performance

Part 2: In Depth

After the morning break, we will dive even deeper into all the different layers of front-end development including HTML, JavaScript, and, of course, CSS!

• Determine how to modularize the design (and code)
• Expand on State Representation, with examples of...
  • Media Queries (and Responsive Design)
  • Progressive Enhancement
  • Alternative Views
• Examine how to integrate JavaScript into our projects
• Look at examples of the SMACSS approach in live projects
• Look at techniques for managing cross-browser and cross-device compatibility

Part 3: Process

After lunch, we are examining our process.

• See how a modular design can work with larger teams
• Learn about CSS preprocessors like LESS and Sass and how they can...
  • improve workflow
  • support a modular design approach
• Learn how to prototype using the SMACSS approach
• Explore prototyping tools that can help rapid development
• Look at site performance factors like HTTP requests, combo handling, JIT loading, and more

Part 4: Exercises and Examples

We will end the day with some hands-on exercises! No, not jumping jacks (although some stretches might be in order). We will take attendees' projects and step through them as a team to determine where we can apply the lessons of the day. We will also look at other live sites (big and small) and see how we can apply the principles of modular design to them.

Two workshops down, more to come!

The workshop tour kicked off in Ottawa, Ontario and then headed off to Essen, Germany. Both were sold out and attendees walked away excited.

Had a great day at the #smacss workshop today.

— Thomas J Bradley (@thomasjbradley) March 1, 2012

Thanks to @snookca the great #smacss workshop. And thanks to @phidelityco for hosting it right here in Essen.

— Jakob Hilden (@jkwebs) March 15, 2012

Attend at one of these great locations

Non-Canadian prices are approximations based on currency exchange. You will be charged in Canadian dollars.

Your questions (hopefully) answered

Want to be notified when tickets go on sale or when new cities are announced?

You should sign up for the mailing list, of course! (It's right there at the bottom of the page. Go ahead.)

Looking for a workshop in your area or would like me to speak at your event?

Dismayed that I'm not coming to your town? We can discuss partnering or sponsorship to put an event on in your area. Half-day workshops and conference sessions are also available. Interested in having me speak at your event? Send an email to workshops@smacss.com and we can discuss opportunities.

What's the refund policy?

If you let me know you need to cancel within 48 hours of registering, I will refund you 100% of the amount you paid. After 48 hours and up until 15 days before the workshop there is a $150 cancellation fee. Within 15 days of the workshop date, there are no refunds.

Great #smacss workshop on modular CSS & HTML, I've learned so much today! Thanks @snookca ;)

— Dragan Nevjestić (@DraganNevjestic) March 1, 2012