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

678 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
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
678
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

×