don’t get bootslapped: how to avoid common pitfalls with css frameworks
DESCRIPTION
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! 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.TRANSCRIPT
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 Developer
ABOUT
www.blueriver.com
A brief history of CSS frameworks Why use frameworks? Common Myths/Misuses
WE WILL BE COVERING
www.blueriver.com
CSS started from scratch Typically no grid to follow Cross-browser took 10x longer No standardization
PRE-FRAMEWORKS
www.blueriver.com
To name a few…
Rock HammerLess Framework
Responsive Grid System
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
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
You don’t have to use the whole thing! GitHub has all separate LESS, SASS and JS files
FACT
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
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
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
TIP: Use LESS or SASS
lesscss.org sass-lang.com
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 leave mobile as an afterthought Use the Mobile First approach
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:
www.blueriver.com
Thank You.
Ronnie Duke Blue River Interactive Group
@ronnietheduke @brinteractive