Bootstrap: Consider creating Reboot.css npm module

[yakhinvadim]

I'm talking about this: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_reboot.scss

Reboot.scss uses a great approach to create a starting point for any project's CSS.
It offers the best of normalize.css - precise normalizing of browsers' differences. But it also offers a lot of useful, opinionated styles, which most of the people would be happy to have in CSS by default.

For now, developers can copy-paste Reboot.scss to their project, but they'll have to:
1) replace variables with actual values,
2) (if they don't use SCSS), convert SCSS-syntax to CSS,
3) update their copied version when something useful appears in the original Reboot.scss.

What if we create a separate npm module for reboot.css?
It will fix the issues described above. It would also help to reduce developers' code bases, as they would be able to @import reboot.css from node_modules to project's index.css file.

There is one drawback I see now. If we have reboot.css in a separate repository, sometimes we'll need to get updates from main bootstrap repository.

The other option would be completely extracting reboot.scss from the main repository. But for now, I see more cons than pros of this approach.

What do you think?

[mdo]

I'd be fine publishing it to another repo eventually, but only if it were automated from this repo (and perhaps our other components). Until then it'd be a bit too much hassle to move between the two (which is why we never changed our approach to Bootstrap's mono-repo design).

[animamundi]

Would love to see this as a separate NPM module. If you put _reboot.scss into its own sub-directory along with a package.json then you can publish independently as an NPM module while retaining only a single repo.

[yakhinvadim]

For those, who want to use reboot.css right now, there is a dist version of it here: https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap-reboot.css
You won't be able to update automatically from this repo and it lacks useful comments, but at least you don't have to convert it to css manually.

[yakhinvadim]

Wow! Actually, you can use reboot.css in your projects using npm!
1) install bootstrap:
npm install --save [email protected]
2) import only bootstrap-reboot.css into your project:
(using webpack) import 'bootstrap/dist/css/bootstrap-reboot.css';
you can also use css @import statements to import the file

[ghost]

And if you're not building with Node, reboot is available on CDN minified, gzipped and with cache headers over TLS right thanks to jsDelivr:

https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-reboot.min.css

Zoom zoom.

[lonix1]

That CDN is slow (compared to the major alternatives).

This should be separate so we can use bootstrap in all its glory, or use just reboot for those projects that only need a reset. Let's face it, reboot is the best reset there is, but it's unfortunate that it's coupled so tightly to bootstrap.

If separated, the major CDNs would offer it just like they offer the normalize.css styleheet.

---

UPDATE
Cool I see it's available here: https://cdnjs.com/libraries/twitter-bootstrap. And although it's part of cdnjs' infrastructure, that file is actually served by cloudflare, which is the fastest cdn around. NONETHELESS, this is a temporary workaround... reboot should still be separate and hosted as a first-class library, just like normalize.css.

[ExE-Boss]

See also: https://github.com/twbs/bootstrap/issues/29311.