Bootstrap: Minimal CSS for JavaScript components

Created on 3 Sep 2017 · 7Comments · Source: twbs/bootstrap

Would you ever consider including CSS or Sass files that contain just the minimum amount of styling for JavaScript components?

Currently you can conditionally include Sass files per component, but often when I'm working off an existing design I need to implement, I would have to override all those styles somehow, which includes borders, shadows, etc. If I could include just the bare minimum, I may save some time.

I went ahead and created minimal versions for each component, just to see what it would look like:

alert.js: https://codepen.io/DannyJoris/pen/NvLGJW/
button.js: https://codepen.io/DannyJoris/pen/mMGeNv
carousel.js: https://codepen.io/DannyJoris/pen/rzZxxz
collapse.js: https://codepen.io/DannyJoris/pen/yoxoag
dropdown.js: https://codepen.io/DannyJoris/pen/jLvbzO
modal.js: https://codepen.io/DannyJoris/pen/YxOYNB
popover.js: https://codepen.io/DannyJoris/pen/JyapdV
scrollspy.js: https://codepen.io/DannyJoris/pen/ZJwdbv (can be stripped down more)
tab.js: https://codepen.io/DannyJoris/pen/brxKPK
tooltip.js: https://codepen.io/DannyJoris/pen/RZYyrv

Let me know what you think.

css v4

Source

DannyJoris

👍1

All 7 comments

Bootstrap allow a lot of customisation with including _custom.scss file, so you'll be able to create a custom theme with the minimal css you need

Johann-S on 3 Sep 2017

That's fair. I guess I was just looking at Bootstrap to "enhance" parts of custom projects. I'll look into it further.

DannyJoris on 4 Sep 2017

@Johann-S ??

$minimal-styling: false !default;

@mixin alert {
  @if ($minimal-styling) {
    /**
     * Minimal Styling here
     */
  } @else {
    /**
     * Regular Styling here
     */
  }
}