In the good ‘ol days, as a front end developer, we were handed a design and we would build our CSS layout and structure from scratch. Ah, how good it felt to reinvent the wheel every time! </sarcasm>

Enter the age of CSS frameworks. We started with grid systems such as 960 and Blueprint, which introduced developers to the column & grid format. Now, we have added full layout and UI into frameworks such as Foundation and Bootstrap; the options are endless. While frameworks are a powerful tool for developers, they are not an end-all-be-all guarantee of high-quality implementation. On the other hand, you may think frameworks are bloated, limiting, and difficult to extend; these too, are common misconceptions. Either way, without proper use and strategy, a CSS framework could result in non-scalable websites or applications, and extreme frustrations for the developer.

Ronnie has worked with various CSS frameworks over the years and has learned many lessons along the way. In this session, he will explore the fundamental purpose of CSS frameworks, and some of the most common ways they can be used incorrectly. Ronnie will discuss common misconceptions about CSS frameworks and how you can use them to create robust, scalable websites and applications.

You should walk away with:

• A more holistic understanding of CSS frameworks
• How to use built in tools you may not have known existed
• How to customize the framework properly
• How to avoid common mistakes using CSS frameworks

Notes:

We used to:

• Start CSS from scratch
• No grid to follow
• Cross browser was a pain
• No standardization
• Reinvent the wheel each time

Now with frameworks

• Rapidly architect your UI
• Semantic reusable structure

But frameworks won’t work for everything.

Myth

• Frameworks are bloated (you don’t have to use the whole thing)
• I use a framework, I don’t need to know CSS.
• Frameworks aren’t customizable.
• Frameworks help design the site.
• Frameworks take care of the responsive for me.

Common mistakes (and hints)

• Rows go inside of containers !
• Use less or sass.
• Frameworks aren’t designed to design.
• Remember 80/20 rule
• Avoid theme rollers. Start with your design/branding.
• Don’t leave mobile as an after thought.