Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
www.blueriver.com
DON’T GET BOOTSLAPPED
Ronnie Duke
Blue River Interactive Group
@ronnietheduke
@brinteractive
www.blueriver.com
Started with HTML in 1999
Started a business in 2006 – got acquired in 2014
Primarily Front End Develope...
www.blueriver.com
WHO I AM NOT
www.blueriver.com
A brief history of CSS frameworks
Why use frameworks?
Common Myths/Misuses
WE WILL BE COVERING
www.blueriver.com
HOW DID WE GET HERE?
www.blueriver.com
CSS started from scratch
Typically no grid to follow
Cross-browser took 10x longer
No standardization
PR...
www.blueriver.com
To name a few…
Rock HammerLess Framework
Responsive Grid System
www.blueriver.com
WHY FRAMEWORKS?
www.blueriver.com
Navigation
Grid Layout
Responsive
UI Elements
Heading Hierarchy
Widgets
www.blueriver.com
Rapidly architect your UI
Semantic, reusable structure 
CMS themes
WHY FRAMEWORKS
www.blueriver.com
MYTHS
www.blueriver.com
MYTH:
If I use a framework,
I have everything I’ll ever need.
www.blueriver.com
Frameworks aren’t right for everything
It’s okay to use your own markup and libraries!
FACT
www.blueriver.com
MYTH:
Frameworks are too bloated
www.blueriver.com
You don’t have to use the whole thing!
GitHub has all separate LESS, SASS and JS files
FACT
www.blueriver.com
MYTH:
If I use a framework, 

I don’t need to know CSS
Lorem Ipsum Lorem
Ipsum Lorem Ipsum	

Lorem Ipsum Lorem
Ipsum
Lorem Ipsum Lorem
Ipsum Lorem Ipsum	

Lorem Ipsum Lorem
Ipsu...
col-lg-12
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum	

Lorem Ipsum
Lorem Ipsum
Lorem Ipsum	

Lorem Ipsum
Lorem Ipsum
Lorem Ipsum	...
www.blueriver.com
STOP. BREATHE.
www.blueriver.com
Know the rules before you break the rules
Read the documentation
Container
Use browser tools to
inspect elements
Column
Container
Column
Row
www.blueriver.com
REMEMBER:
It’s just CSS!
www.blueriver.com
MYTH:
Frameworks are not customizable
www.blueriver.com
Frameworks are built to be customized!
www.blueriver.com
TIP:
Use LESS or SASS
lesscss.org
sass-lang.com
www.blueriver.com
MYTH:
Frameworks help design the site
www.blueriver.com
Frameworks are not designed to design
Start with an original design
80/20 rule
Bootstrap
Foundation
Bootstrap
www.blueriver.com
Don’t use theme rollers
www.blueriver.com
MYTH:
Frameworks take care of
responsive for me
www.blueriver.com
Just because content scales to mobile,
doesn’t make it…
www.blueriver.com
Don’t leave mobile as an afterthought
Use the Mobile First approach
www.blueriver.com
RECAP
www.blueriver.com
Are to get us started, not do the work for us.
Aren’t necessary for everything
Can be customized
Don’t e...
www.blueriver.com
What questions
do you have?
www.blueriver.com
Thank You.
Ronnie Duke
Blue River Interactive Group
@ronnietheduke
@brinteractive
Don’t get Bootslapped: How to Avoid Common Pitfalls with CSS Frameworks
Don’t get Bootslapped: How to Avoid Common Pitfalls with CSS Frameworks
Don’t get Bootslapped: How to Avoid Common Pitfalls with CSS Frameworks
Don’t get Bootslapped: How to Avoid Common Pitfalls with CSS Frameworks
Don’t get Bootslapped: How to Avoid Common Pitfalls with CSS Frameworks
Don’t get Bootslapped: How to Avoid Common Pitfalls with CSS Frameworks
Don’t get Bootslapped: How to Avoid Common Pitfalls with CSS Frameworks
Don’t get Bootslapped: How to Avoid Common Pitfalls with CSS Frameworks
Don’t get Bootslapped: How to Avoid Common Pitfalls with CSS Frameworks
Don’t get Bootslapped: How to Avoid Common Pitfalls with CSS Frameworks
Don’t get Bootslapped: How to Avoid Common Pitfalls with CSS Frameworks
Don’t get Bootslapped: How to Avoid Common Pitfalls with CSS Frameworks
Don’t get Bootslapped: How to Avoid Common Pitfalls with CSS Frameworks
Don’t get Bootslapped: How to Avoid Common Pitfalls with CSS Frameworks
Don’t get Bootslapped: How to Avoid Common Pitfalls with CSS Frameworks
Don’t get Bootslapped: How to Avoid Common Pitfalls with CSS Frameworks
Don’t get Bootslapped: How to Avoid Common Pitfalls with CSS Frameworks
Upcoming SlideShare
Loading in …5
×

Don’t get Bootslapped: How to Avoid Common Pitfalls with CSS Frameworks

846 views

Published on

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.

Published in: Technology, Design
  • Be the first to comment

Don’t get Bootslapped: How to Avoid Common Pitfalls with CSS Frameworks

  1. 1. www.blueriver.com DON’T GET BOOTSLAPPED Ronnie Duke Blue River Interactive Group @ronnietheduke @brinteractive
  2. 2. www.blueriver.com Started with HTML in 1999 Started a business in 2006 – got acquired in 2014 Primarily Front End Developer ABOUT
  3. 3. www.blueriver.com WHO I AM NOT
  4. 4. www.blueriver.com A brief history of CSS frameworks Why use frameworks? Common Myths/Misuses WE WILL BE COVERING
  5. 5. www.blueriver.com HOW DID WE GET HERE?
  6. 6. www.blueriver.com CSS started from scratch Typically no grid to follow Cross-browser took 10x longer No standardization PRE-FRAMEWORKS
  7. 7. www.blueriver.com To name a few… Rock HammerLess Framework Responsive Grid System
  8. 8. www.blueriver.com WHY FRAMEWORKS?
  9. 9. www.blueriver.com Navigation Grid Layout Responsive UI Elements Heading Hierarchy Widgets
  10. 10. www.blueriver.com Rapidly architect your UI Semantic, reusable structure CMS themes WHY FRAMEWORKS
  11. 11. www.blueriver.com MYTHS
  12. 12. www.blueriver.com MYTH: If I use a framework, I have everything I’ll ever need.
  13. 13. www.blueriver.com Frameworks aren’t right for everything It’s okay to use your own markup and libraries! FACT
  14. 14. www.blueriver.com MYTH: Frameworks are too bloated
  15. 15. www.blueriver.com You don’t have to use the whole thing! GitHub has all separate LESS, SASS and JS files FACT
  16. 16. www.blueriver.com MYTH: If I use a framework, 
 I don’t need to know CSS
  17. 17. 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
  18. 18. 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
  19. 19. www.blueriver.com STOP. BREATHE.
  20. 20. www.blueriver.com Know the rules before you break the rules Read the documentation
  21. 21. Container Use browser tools to inspect elements
  22. 22. Column
  23. 23. Container Column
  24. 24. Row
  25. 25. www.blueriver.com REMEMBER: It’s just CSS!
  26. 26. www.blueriver.com MYTH: Frameworks are not customizable
  27. 27. www.blueriver.com Frameworks are built to be customized!
  28. 28. www.blueriver.com TIP: Use LESS or SASS lesscss.org sass-lang.com
  29. 29. www.blueriver.com MYTH: Frameworks help design the site
  30. 30. www.blueriver.com Frameworks are not designed to design Start with an original design 80/20 rule
  31. 31. Bootstrap
  32. 32. Foundation
  33. 33. Bootstrap
  34. 34. www.blueriver.com Don’t use theme rollers
  35. 35. www.blueriver.com MYTH: Frameworks take care of responsive for me
  36. 36. www.blueriver.com Just because content scales to mobile, doesn’t make it…
  37. 37. www.blueriver.com Don’t leave mobile as an afterthought Use the Mobile First approach
  38. 38. www.blueriver.com RECAP
  39. 39. 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:
  40. 40. www.blueriver.com What questions do you have?
  41. 41. www.blueriver.com Thank You. Ronnie Duke Blue River Interactive Group @ronnietheduke @brinteractive

×