Modern Front-End Frameworks

Why you should stop using Twitter Bootstrap

How can I learn to write better CSS?

Hi there

About Me

  • I go to U of C
  • I write code for a design agency -Mantaray Creative
  • I am front-end
  • Been using Express and Node for about 1 year
  • Some of you may recognize me
  • I like the newest stuff...

The Plan

  1. Why Bootstrap sucks
    1. littered with px
    2. Unsemantic
    3. Fixed width (for the most part)
    4. Not completely customizable (does not use variables throughout)
  2. CSS Preprocessor review
  3. Qualities of a good front-end framework
  4. The SASS Boilerplate Generator
  5. Bootstrap Alternatives
  6. Questions

Bootstrap Sucks!

px Are Everywhere!

Advanced front-end developers all agree that px should no longer be used at all.

em are better, work in IE7+

Bootstrap 3 thinks using a mixin to convert to rem is a good solution no, it's not!

rem suck because they can't be used in IE7. No, Bootstrap, no!

em > px

  • Allow resizing in IE
  • Supported in IE 7+
  • Can be scaled more easily
  • Adjust properly on mobile devices
  • Get you thinking in units -- in relative units
  • **Don't suck

I Tried to Fix It

I filed an issue on GitHub

Bootstrap is not littered with pixel units—it's the unit of choice in the framework. Opinions aside, it is still very much how folks are building on the web today—desktop or mobile. Not everything needs a variable. Folks seem dead-set on them, but I'm not so convinced. @mdo - Bootstrap Creator

But are px Really That Bad?

Umm... kind of.

Pixels have always been needed for computer applications... until now

em are device-agnostic, and have replaced px

Unit Alternatives

There are alternatives...absolutely

Just stop using px!

Bootstrap is Unsemantic

It's technical debt - This article explains it very well

Remember MVC? We need a loosely-coupled model and view

Preprocessor Review


3 preprocessors:

  • SASS
  • LESS
  • Stylus

Nested Selectors

Nested Selectors in SASS

@extends Directive

@extends Support

  • SASS: - @extends
  • LESS: - &:extends([class])
  • Stylus: - extends

You Have No Excuse!

Good Qualities

  • All values are variables can be configured
  • em units, where fixed widths are required
  • min-width and max-width properties over width
  • Modular design low coupling of components
  • Unitless measurements where possible: line-height
  • Optimized code re-use through mixins
  • Proper preprocessor usage of nested selectors
  • Light and usable as a starting point
  • Default variable values, set on simple options
  • Consistent naming scheme (CamelCase, CamelHumps, etc.), with limited variable shadowing

*Bootstrap has none of these!

Introducing the SASS Boilerplate

View it on GitHub

npm install -g generator-sass-boilerplate
yo sass-boilerplate

Enter your creds

LESS Boilerplate

View the repo on GitHub

Roots (Stylus)

Check out Roots on GitHub