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.

1. www.blueriver.com
DON’T GET BOOTSLAPPED
Ronnie Duke
Blue River Interactive Group
@ronnietheduke
@brinteractive

2. www.blueriver.com
Started with HTML in 1999
Started a business in 2006 – got acquired in 2014
Primarily Front End Developer
ABOUT

3. www.blueriver.com
WHO I AM NOT

5. www.blueriver.com
A brief history of CSS frameworks
Why use frameworks?
Common Myths/Misuses
WE WILL BE COVERING

6. www.blueriver.com
HOW DID WE GET HERE?

7. www.blueriver.com
CSS started from scratch
Typically no grid to follow
Cross-browser took 10x longer
No standardization
PRE-FRAMEWORKS

8. www.blueriver.com
To name a few…
Rock HammerLess Framework
Responsive Grid System

9. www.blueriver.com
WHY FRAMEWORKS?

10. www.blueriver.com
Navigation
Grid Layout
Responsive
UI Elements
Heading Hierarchy
Widgets

11. www.blueriver.com
Rapidly architect your UI
Semantic, reusable structure
CMS themes
WHY FRAMEWORKS

15. www.blueriver.com
MYTHS

16. www.blueriver.com
MYTH:
If I use a framework,
I have everything I’ll ever need.

18. www.blueriver.com
Frameworks aren’t right for everything
It’s okay to use your own markup and libraries!
FACT

20. www.blueriver.com
MYTH:
Frameworks are too bloated

21. www.blueriver.com
You don’t have to use the whole thing!
GitHub has all separate LESS, SASS and JS files
FACT

23. www.blueriver.com
MYTH:
If I use a framework,
I don’t need to know CSS

25. Lorem Ipsum Lorem
Ipsum Lorem Ipsum
Lorem Ipsum Lorem
Ipsum
Lorem Ipsum Lorem
Ipsum Lorem Ipsum
Lorem Ipsum Lorem
Ipsum
Lorem Ipsum Lorem
Ipsum Lorem Ipsum
Lorem Ipsum Lorem
Ipsum
col-lg-12
col-lg-4 col-lg-4 col-lg-4
Container
col-lg-12
Row
Row

26. col-lg-12
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
col-lg-4 col-lg-4 col-lg-4
Container

28. www.blueriver.com
STOP. BREATHE.

29. www.blueriver.com
Know the rules before you break the rules
Read the documentation

30. Container
Use browser tools to
inspect elements

31. Column

32. Container
Column

33. Row

35. www.blueriver.com
REMEMBER:
It’s just CSS!

36. www.blueriver.com
MYTH:
Frameworks are not customizable

37. www.blueriver.com
Frameworks are built to be customized!

39. www.blueriver.com
TIP:
Use LESS or SASS
lesscss.org
sass-lang.com

40. www.blueriver.com
MYTH:
Frameworks help design the site

44. www.blueriver.com
Frameworks are not designed to design
Start with an original design
80/20 rule

45. Bootstrap

46. Foundation

47. Bootstrap

48. www.blueriver.com
Don’t use theme rollers

51. www.blueriver.com
MYTH:
Frameworks take care of
responsive for me

52. www.blueriver.com
Just because content scales to mobile,
doesn’t make it…

54. www.blueriver.com
Don’t leave mobile as an afterthought
Use the Mobile First approach

55. www.blueriver.com
RECAP

56. www.blueriver.com
Are to get us started, not do the work for us.
Aren’t necessary for everything
Can be customized
Don’t exempt from knowing CSS
Are not design
Don’t create mobile strategies
Frameworks:

57. www.blueriver.com
What questions
do you have?

58. www.blueriver.com
Thank You.
Ronnie Duke
Blue River Interactive Group
@ronnietheduke
@brinteractive