Bootstrap: Let's add Bootstrap-utilities.css to dist!

[julian-hecker]

Hello, Bootstrap Community!

I think that Bootstrap would benefit from having a distributable bootstrap-utilities.css file, just as there is a bootstrap-grid.css and bootstrap-reboot.css files alongside the full bootstrap.css.

Such a file:

• would not require absolutely any JavaScript in order to work,
• only requires the addition of one scss file to the scss directory,
• is completely customizable by editing the _variables.scss and _utilities.scss files,
• provides a wealth of features to developers without requiring anything else.

The following code compiles to a bootstrap-utilities.css file and minifies to about 50KB.

// bootstrap/scss/bootstrap-utilities.scss

/*!
 * Bootstrap v4.3.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 The Bootstrap Authors
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */


// Configuration

@import "functions";
@import "variables";
@import "mixins";
@import "utilities";


// Utilities

@import "utilities/api";
@import "utilities/sizing";
@import "utilities/text";
@import "utilities/visibility";

Let's do this!!

Pull Request: #29027

[mdo]

@MartijnCuppens Thoughts? Should we do this and possibly extend with even more utilities as an alternate to the main dist builds?

[MartijnCuppens]

Should we do this

Yeah, why not? I can imagine people need the utilities without reboot overriding the rest of the styling.

and possibly extend with even more utilities

I would like to keep the utilities for the main file & utilities file in sync. It might be a bit too confusing.

[julian-hecker]

Awesome! What could I do to help get this integrated?

[MartijnCuppens]

Your PR is a good start: https://github.com/twbs/bootstrap/pull/29027. You do need to document it a bit as I mentioned there.

[rthm93]

This is just what I was looking for. Hope this get released as soon as possible.

[julian-hecker]

So glad this got implemented! ^_^

[MohannadNaj]

Thank you @julian-hecker !

Guess now I should mark https://www.npmjs.com/package/bootstrap-utilities on NPM as deprecated, Right? I always didn't like it that it didn't support SCSS.

[MartijnCuppens]

@MohannadNaj,

The standalone utilities file will be available when we release Bootstrap 5. Since your version covers the utilities for v4, it's fine to keep it for now.