Custom Bootstrap CSS creator

.gitattributes

# YOU MAY SKIP THIS FILE

# Suppress diff for generated files
build/* linguist-generated=true

_input.scss

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

//Custom SCSS can be placed in here, for example

//Required

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";

//Extra: remove any components you don't need

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

about.md

Custom Bootstrap CSS creator

Now powered with scss-powertools! Read the docs for that to better understand how this works.

Please note! New components introduced after v4.1.1 haven't been added to the SCSS file in this Gist, yet. Please have a look at the Bootstrap source code, if you need some component that hasn't been imported.

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 the scripts 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.1, 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

• scss-powertools is used to create the CSS from SCSS. It will lint your code for you, without any config.

package.json

{
  "name": "lowercase-name",
  "version": "1.0.0",
  "description": "Styles for _service",
  "scripts": {
    "test": "npm run build -- --production",
    "build": "scss-powertools scss/_input.scss build/_output.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": {
    "bootstrap": "4.1.1",
    "scss-powertools": "^1.0.1"
  }
}