Giving Bootstrap

The Boot

Who dares disrespect the Bootstrap?

My name is David Khourshid

I wish my slides were as cool as Alyssa's.

I'm a front-end web developer

We were all BSers.

Some of us still are.

I'm so sorry.

We've all made

BS web sites.

Most of us have read the BS docs.

(╯°□°)╯︵ ┻━┻

Tight deadlines = Shipping BS

(▀̿Ĺ̯▀̿ ̿)

What's wrong with Bootstrap?

  • It's huge.
    • "But you can customize your build!"
    • Yeah, but you won't.
  • It ignores design and is too prescriptive.
  • Difficult to customize to an original design.
    • More "undoing" than "doing"
  • Screams "I can't afford a designer."
  • Non-semantic markup
    • Lots of <div>itis
  • Nearly impossible upgrades
    • Requires lots of refactoring, style tweaking,
      and a goat sacrifice

"But I'm really good at Bootstrap."

(That wasn't a very good argument)

Bootstrap is unfortunately the most popular HTML, CSS, and JS framework in the world for building cliché, ugly, but responsive web sites.

But it does have some redeeming qualities...

Super fast prototyping.

... which is all it should ever be used for.

Just-add-water components.

... because you love jQuery.

Hundreds of components!

...you're going to use, like, 7

"I don't need to hire a designer."

Yes, you do.

DESIGNERS HATE HIM

He constantly complains that "you can't do that design in Bootstrap." He also codes in the toilet, where his code belongs.

DESIGNERS LOVE HER

She codes modular components from a pattern library, follows best practices, and is showing this guy what's wrong with his code.

Bootstrap experience looks great on a résumé.

I remember when W3Schools was cool, too.

"Must have experience with Bootstrap."

"Must be willing to fix whatever our last developer did to Bootstrap."

"Must be willing to look elsewhere. You're in for some serious code spaghetti."

So, is Bootstrap bad?

Dear God yes

Not necessarily.

You might be new to web development.

You might work in a

bottomless pit of sadness

corporate environment.

You procrastinated. Badly.

You deserve Bootstrap.

You love <divs>. A lot.

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-1"> </div>
                <div class="col-md-10">
                    <div class="row">
                        <h1>Profile Page for </h1>
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title">User Profile/Bio Information</h3>
                            </div>
                            <div class="panel-body"></div>
                        </div>
                    </div>
                    <div class="row" id="contrib-row">
                        <h3>Articles Authored By </h3>
                        <ul class="list-group">
                            <li class="list-group-item"><a href="/posts/">"title" Published #</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-1"> </div>
            </div>
        </div>
    </div>
</div>
<hr />

You appreciate Bootstrap for it being a well-defined set of components with a huge community, used by millions of websites, and with thousands of customizable themes.

It's time to replace Bootstrap.

Okay, but... why?

  • I hope you enjoyed your nap
  • Greater control over styles
  • More consistent styling
  • Only use the CSS you need
  • No more <div>itis!
  • Your designer won't hate you.
  1. Use an architecture.
     
  2. Replace Bootstrap components,
    one by one.
     
  3. Get rid of Bootstrap.
    Or at least try.

And how!

  • base/
  • components/
  • layout/
  • pages/
  • themes/
  • utils/
  • vendors/

main.scss

base/

  • Boilerplate code
  • Resets
    • normalize.css
    • reboot.css
  • Typography
  • No trouble

layout/

  • The bigger components
    • Header
    • Footer
    • Sidebar
    • Main
    • Navigation

components/

  • Every little tiny part of your website
  • Seriously, everything
  • Get as granular as possible
  • Should be self-contained

pages/

  • Page-specific styles
  • Only when certain pages may look different than others
  • Usually affects layout styles

themes/

  • The different themes
    (if there are multiple)
  • Why does your site have different themes?
  • Your site should have one theme.
  • Your designer is an idiot.

utils/

  • Settings and utilities, like:
    • $variables
    • @mixins
    • @functions
  • Never output a single line of CSS!

vendors/

  • 3rd-party styles (if you must)
  • Yeah, you can include Bootstrap in here.
  • You shouldn't, though.
  • Bootstrap sucks, remember?
  • Really, this is where you include the crappy styles that some 3rd-party components force you to use.
@import 'button';
@import 'alert';
@import 'card';
@import 'calendar';
@import 'label';
// ... etc.
.my-button {
  display: block;
  appearance: none;
  background-color: #BADA55;
  // ... etc.
}
@import 'utils/index';
@import 'vendors/index';
@import 'base/index';
@import 'components/index';
@import 'layout/index';
@import 'pages/index';
@import 'themes/index';

components/_button.scss

components/_index.scss

main.scss

Too much work?

Here's a Sassy boilerplate.

Click

We still need to override Bootstrap styles.

SOLUTION:
Make an override class.

This makes it easy for our components to be more specific

Use it to scope your specific styles to prevent leaking styles.

.goatstrap

.btn.btn-primary {
  // Bootstrap's silly styles
}

Specificity: 0 2 0

.goatstrap {
  .gs-button.primary {
    // Our sexy styles
  }
}

Specificity: 0 3 0

Let's talk classes.

Be semantic!

<div class="my-dog">
<div class="my-dog poor-eyesight">
<div class="my-dog smush-face-in">
<div class="my-dog pug">
<div class="my-dog buttpug">
<div class="container">
    <div class="row">
        <div class="col-md-8">
            <div class="row">
                <div class="col-md-6"></div>
                <div class="col-md-6"></div>
            </div>
        </div>
        <div class="col-md-4"></div>
    </div>
    <div class="row">
        <div class="col-md-12"></div>
    </div>
</div>
<main class="goatstrap layout-main">
    <div class="layout-content">
        <div class="block"></div>
        <div class="block"></div>
    </div>
    <aside class="layout-aside"></aside>
    <footer class="layout-footer"></footer>
</main>

layout-main

layout-aside

layout-footer

block

block

What about grid layouts?

Use grid functions and mixins, not classes.

  • http://singularity.gs/
  • http://susy.oddbird.net/
  • Do it yourself. Seriously.
  • I heard flexbox was good.
.layout-main {
  @include clearfix;

  > .layout-content, > .layout-aside {
    float: left;
  }
}

.layout-content {
  @include clearfix;
  width: percentage(8/12);
}

.layout-aside {
  width: percentage(4/12);
}

Sass seems pretty cool.

What are some best practices?

I GOT YOU COVERED

I wrote a section in here!

You should care!

Day 2 Track

Nov. 19, 2015

9AM to 5PM CT

Use code DAVID for 15% off!

That's it!
Let's go get beer!

Giving Bootstrap the Boot

By David Khourshid

Giving Bootstrap the Boot

  • 8,184