The document is a comprehensive exploration of CSS frameworks, detailing their definition, benefits, and drawbacks. It covers essential components commonly found in frameworks, guidance on choosing the right framework, and suggests hands-on learning approaches. Additionally, it highlights various popular frameworks and emphasizes collaborative and scalable web design.

1. Fun with CSS Frameworks
Or, everything you wanted to know about CSS
frameworks but were afraid to ask...
Image Source Http://9circuits.com/blog/wp-content/uploads/hamstermachine.jpg

2. Who the heck
are you? I’m
Mario Noble
Web Designer
Front end developer
UX Designer
Los Angeles cliche

3. 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

4. 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

5. Basically, it’s a DIY kit
Get ready to unbox!

6. Why the heck
should I use one?
It gets you up and running
quickly.
Enhanced teamwork
Scalability and flexibility
Real world tested
Feature goodies

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

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

9. Pros
Better team member
on boarding
Documentation written
(so you don’t have to)
Increased capabilities
Consistent naming and
conventions
Community bugfixes

10. Cons
Can 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!

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

12. 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

13. 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

14. 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

15. A few frameworks
Twitter Bootstrap
Zurb Foundation
Skeleton
Pure
Ink
Semantic UI

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

17. 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/

18. 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/

19. 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?

20. Who took the Cascading out of
my CSS! A short digression...
SMACSS
BEM
Docssa
Web Components
Angular.js, React.js and their kind...

21. Next Steps
Download 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!

22. What we went over
What 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

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