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

Preview:

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.

Citation preview

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

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

PRE-FRAMEWORKS

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 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

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 exempt from knowing CSS Are not design Don’t create mobile strategies

Frameworks:

www.blueriver.com

What questions do you have?

www.blueriver.com

Thank You.

Ronnie Duke Blue River Interactive Group

@ronnietheduke @brinteractive

Recommended