Fun with CSS FrameworksOr, everything you wanted to know about CSS frameworks but were afraid to ask...

Image Source Http://9circuits.com/blog/wp-content/uploads/hamstermachine.jpg

Who the heck are you? I’m Mario NobleWeb DesignerFront end developerUX DesignerLos Angeles cliche

What we’ll be covering

What is a CSS Framework?

Why use one?

Pros and Cons of using frameworks.

What’s usually in a framework

Let’s dive into a little hands on

Choosing the right one for you and a bit of theory background

Q&A

Image Source Http://media-cdn.tripadvisor.com/media/photo-s/02/fa/13/9c/campo-rico-ziplining.jpg

What the heck is a CSS Framework?

CSS - It’s a starting CSS (Cascading Style Sheet) structure that’s meant to be extended by someone else.

JS - It may also have additional components, graphics and browser compatibility fixes.

Docs - It has documentation that others can refer to when working with it. Image Source Https://www.youtube.com/watch?v=8h4Hr1e2IP4

Basically, it’s a DIY kitGet ready to unbox!

Why the heck should I use one?

It gets you up and running quickly.

Enhanced teamwork

Scalability and flexibility

Real world tested

Feature goodies

Luke, feel the Force Do not turn to the inline css side.

What are the Pros and Cons?Help or hinder your process?

ProsBetter team member on boarding

Documentation written (so you don’t have to)

Increased capabilities

Consistent naming and conventions

Community bugfixes

ConsCan be a “cookie cutter” look and feel.

Sometimes a steep learning curve

Bloated code offering more than you need.

Might be wrong

You didn’t do it!

What’s in a typical CSS Framework?Let’s pop the hood

CSS (of course)Basic CSS files

May include “browser fixes” like normalize.css, reset.css, etc.

SASS/SCSS or LESS authoring files

Minified CSS

A particular structure and aesthetic choices out-of-the-box

Grid system, Responsive styling, Utility classes

Modules / Components / Patterns

Pieces of CSS that are meant to work together to create a web component or interface like a nav bar, side bar, carousel, etc.

JavaScript that enhances or enables many patterns

Task runner files like Grunt/Gulp to auto compile or setup new projects

JavaScript libraries like jQuery, Respond.js and Modernizr that enable behaviors or provide fallbacks for unsupported features across browsers

Resources such as web icons and animations

Documentation and Community

Extensive documentation

Community forums

“Wisdom of the crowds”

Collaborative environment

New team members Image Source Http://www.science20.com/alpha_meme/democracy_and_wisdom_crowds-83550

A few frameworks

Twitter Bootstrap

Zurb Foundation

Skeleton

Pure

Ink

Semantic UI

If you use pre-made themes, you may be using a framework... now.but just don’t know it.

You could also make your own...The Joy of Crafting your own stuff to share.

Copyright Nick Offerman Aka “Ron Swanson”- Image Source - Https://wiggersfurniture.wordpress.com/

Let’s get a little hands on!It’s demo time. Time to get down and dirty.

Image Source Http://www.unfinishedman.com/what-women-really-think-men-benefits-car-maintenance/

How do you choose a framework?How fast, cheap and good does your project need to be?

How many people are on your team?

What are your skill sets?

How much time do you have to test?

How custom/bespoke does your project need to be?

How much does the project need to scale over time?

Who took the Cascading out of my CSS! A short digression...

SMACSS

BEM

Docssa

Web Components

Angular.js, React.js and their kind...

Next StepsDownload and try a simple CSS framework

Play around with it on a basic no pressure project

Learn some SASS/SCSS or LESS. Just the basics.

Get a CSS complier like Scout App or Codekit

Read some framework documentation a bit at a time

Learn a tiny bit of jQuery

Have fun!

What we went overWhat is a CSS Framework and why would you use one

Some Pros and Cons

Some nitty gritty pieces

Got a little hands on

Some guidance on choosing the right one for a project

Some theory

Q&A

Q&A“Yeah, well, you know, that’s just, like, your opinion, man.” — The Dude