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.

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.

Do you work on larger projects? Do you work with larger teams? 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.

This workshop will shift how you think about writing CSS that will simplify your code, make your project easier to manage, and allow it to grow without creating an increasingly brittle system of dependencies. Your code will also be more portable, making it easier to use code on other projects.

Loving the format of #smacss. @snookca talking with individuals a lot and it's a good discussion.

— Susan Robertson (@susanjrobertson) June 21, 2012

Attend at one of these great locations

With the SMACSS Workshops having sold out at events around the world, you should get your tickets to these events now!

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

— Terry Appleby (@Tjay819) March 2, 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.

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.

Now I want to refactor everything I've ever written. Thanks @snookca! #smacss

— Justin Levinsohn (@jlevinsohn) June 21, 2012

Had a great day at the #smacss workshop today.

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

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

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

That was awesome workshopness. Thanks @snookca. #smacss

— Andreas Dantz (@dantz) March 15, 2012

Learning a lot with @snookca at a #smacss workshop. twitter.com/evan_is/status…

— Evan Price (@evan_is) June 21, 2012

Very much enjoying #smacss workshop with @snookca at @ISITE_Design in Portland #pdx twitpic.com/9yytxc twitpic.com/9yyu0m

— Petra Gregorová (@PetraGregorova) June 21, 2012

@snookca thanks for the great #SMACSS workshop. Priceless tips for flexible and scaleable CSS. Enjoy your time in Philly!

— David Ross (@davidhross) June 2, 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