Customize Bootstrap 4

.gitattributes

# YOU CAN SKIP THIS FILE
# Suppress diff for generated files
build/* linguist-generated=true

.stylelintrc

{
  "extends": ["stylelint-config-standard", "stylelint-config-recommended-scss"]
}

.travis.yml

language: node_js
node_js:
- '8'
before_install:
- npm install -g greenkeeper-lockfile@1
before_script: greenkeeper-lockfile-update
after_script: greenkeeper-lockfile-upload

_name.scss

/*!Insert copyright here. This will be included in the compiled and minified CSS*/

//Custom SCSS

//Required
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
//Extra
@import "node_modules/bootstrap/scss/root";
@import "node_modules/bootstrap/scss/reboot";
@import "node_modules/bootstrap/scss/type";
@import "node_modules/bootstrap/scss/images";
@import "node_modules/bootstrap/scss/code";
@import "node_modules/bootstrap/scss/grid";
@import "node_modules/bootstrap/scss/tables";
@import "node_modules/bootstrap/scss/forms";
@import "node_modules/bootstrap/scss/buttons";
@import "node_modules/bootstrap/scss/transitions";
@import "node_modules/bootstrap/scss/dropdown";
@import "node_modules/bootstrap/scss/button-group";
@import "node_modules/bootstrap/scss/input-group";
@import "node_modules/bootstrap/scss/custom-forms";
@import "node_modules/bootstrap/scss/nav";
@import "node_modules/bootstrap/scss/navbar";
@import "node_modules/bootstrap/scss/card";
@import "node_modules/bootstrap/scss/breadcrumb";
@import "node_modules/bootstrap/scss/pagination";
@import "node_modules/bootstrap/scss/badge";
@import "node_modules/bootstrap/scss/jumbotron";
@import "node_modules/bootstrap/scss/alert";
@import "node_modules/bootstrap/scss/progress";
@import "node_modules/bootstrap/scss/media";
@import "node_modules/bootstrap/scss/list-group";
@import "node_modules/bootstrap/scss/close";
@import "node_modules/bootstrap/scss/modal";
@import "node_modules/bootstrap/scss/tooltip";
@import "node_modules/bootstrap/scss/popover";
@import "node_modules/bootstrap/scss/carousel";
@import "node_modules/bootstrap/scss/utilities";
@import "node_modules/bootstrap/scss/print";

about.md

Custom Bootstrap CSS creator

Usage:

1. Copy these files and put them to the right places in a NodeJS app

• _name.scss should be put in the scss folder
• change the name of the SCSS-file and specify it in package.json

2. Replace all other things that start with _ in package.json (find and replace) and check what version of Bootstrap you want to use (tested for 4.0.0, but you should probably get the current version)

3. Customize your custom.scss file

4. Then you can compile everything in your command line with npm run build.

Read this page to find out more.

Testing

• There is also built-in scripts to lint the SCSS. You can run it throught a test using the npm test command.
• There is a Travis config: If you don't use Greenkeeper, you can remove all references to it. If you use Greenkeeper, make sure to set $GH_TOKEN (and make it secret)

package.json

{
  "name": "lowercase-name",
  "version": "1.0.0",
  "description": "Styles for _service",
  "scripts": {
    "test": "npm-run-all lint build",
    "lint": "stylelint --syntax scss \"scss/_name.scss\"",
    "build": "npm-run-all --sequential compile prefix minify",
    "compile": "node-sass --output-style expanded --precision 6 scss/_name.scss build/_name.css",
    "prefix": "postcss --use autoprefixer --replace \"build/_name.css\"",
    "minify": "cleancss --level 1 --output build/_name.min.css build/_name.css"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/_user/_repo.git"
  },
  "author": "_author",
  "license": "UNLICENSED",
  "bugs": {
    "url": "https://github.com/_user/_repo/issues"
  },
  "homepage": "https://github.com/_user/_repo#readme",
  "dependencies": {
    "autoprefixer": "^7.1.6",
    "bootstrap": "4.0.0",
    "clean-css-cli": "^4.1.10",
    "node-sass": "^4.5.3",
    "npm-run-all": "^4.1.1",
    "postcss-cli": "^4.1.1",
    "stylelint": "^9.1.1",
    "stylelint-config-recommended-scss": "^3.1.0",
    "stylelint-config-standard": "^18.1.0",
    "stylelint-scss": "^2.4.0"
  }
}

Cheers !

Thanks you very much for this.
I have a small issue though: Spinners don't seem to be included in any of the individual components.
I added @import "bootstrap/scss/spinners"; myself but you might want to put it in the _input.scss
Just letting you know

@jorn1 Hi, thanks for letting me know! This Gist hasn't been updated since Bootstrap 4.1.1, so there might be some other new components that aren't included as well.

I'll have a look on what has changed and will update the Gist shortly 😃

I've also been planning on refactoring scss-powertools, to make it faster and more efficient. I'm hoping that I can ship it at some time in the coming months!

@Klooven: Great one!

I'd add a remark if you don't mind, lost couple of time to figure it out since for me it was not clear.

Then you can compile everything in your command line with npm run build.
I'd change to: (removing the final dot since its quite confusing.
Then you can compile everything in your command line with npm run build

Tested and works with latest version.

@alexszilagyi

Thanks! That sounds like a good idea. I'll change that. 👍

---

I'll also have a look at the new Bootstrap components and add them in here ASAP.

Spinner and toast components are now added to the SCSS - everything should now be up to date (Bootstrap 4.6.0)! 🎊

@Klooven

The container and max-width breakpoints components are not listed.

@gusbemacbe

Are you using Bootstrap 5? Everything should be included and up-to date for Bootstrap 4 in this Gist. I'll probably create a separate Gist for Bootstrap 5 at some moment. I can add a link to it when I've created it.

Yes, I do, @Klooven, I want to use max-width instead of min-width for both breakpoint and container.

@gusbemacbe

Ok, that explains it. I'll create a similar Gist for Bootstrap 5 in the coming weeks. In the meantime, feel free to look at Bootstrap's docs or repo as a reference: https://github.com/twbs/bootstrap/blob/v5.0.1/scss/bootstrap.scss 🙂