Don’t get Bootslapped: How to Avoid Common Pitfalls with CSS Frameworks
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.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Don’t get Bootslapped: How to Avoid Common Pitfalls with CSS Frameworks
Similar to Don’t get Bootslapped: How to Avoid Common Pitfalls with CSS Frameworks (20)
More from WebVisions
More from WebVisions (20)
Recently uploaded
Recently uploaded (20)
Don’t get Bootslapped: How to Avoid Common Pitfalls with CSS Frameworks
- 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
- 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
- 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
- 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
- 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
- 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