Smashing Magazine

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.

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.

IN THIS WORKSHOP, YOU'LL LEARN:

• Learn the Five Categories: Base, Layout, Module, State, and Theme
• Explore how to separate theming and typography
• Learn how to name CSS classes and why naming convention is important
• Discover the pitfalls of setting base styles
• Learn when to create a module instead of base styles
• Learn how Depth of Applicability impacts our code
• Work through examples of how to simplify complex selectors
• Look at how to create leaner and more flexible modules
• See how I look at applying states to a modular design
• Learn the 4 ways to apply states to a module
• Look at what a preprocessor can do for you
• Discover how preprocessors can create unwanted, bloated code and learn how to fix it
• Learn how to tie a preprocessor into a SMACSS-based project
• Prototyping and Pattern Libraries
• Learn how to use templates to create reusable modules
• Look at how module isolation can improve testing
• Learn what a pattern library is and how to create one for your project
• Look at ways to audit your existing code base
• Develop strategies for converting a project
• Learn how to structure your project

This workshop is intended for designers, developers and everybody else who is dealing with design projects on a regularl base. You should be familiar with some basics of responsive design, HTML5 and CSS.

Workshop Schedule

• 8:30 Doors open, Registration
• 9:00 Introduction & Kick-off
• 11:00 Coffee Break
• 12:30 Lunch
• 13:30 Afternoon Session
• 15:00 Coffee Break
• 17:00 The End, Networking

Workshop Includes

• Snacks and drinks during the whole day
• Tea and coffee
• Lunch
• Paper and pen/pencil

What hardware/software do you need?

To get the most out of the workshop, you'll need to bring a laptop with your preferred text editor.

Location

IED School of Design
C/ Biada, 11,
08012 Barcelona
Spain
Google Maps