diff options
| -rw-r--r-- | README.md | 19 | ||||
| -rw-r--r-- | package-lock.json | 47 | ||||
| -rw-r--r-- | package.json | 4 | ||||
| -rw-r--r-- | scss/starter.scss | 49 |
4 files changed, 115 insertions, 4 deletions
@@ -20,7 +20,7 @@ Setup as a starter template, you can easily generate a new GitHub repository. Fr ## Usage -Be sure to have [Node.js](https://nodejs.org/en/download/) installed before proceeding. +Be sure to have [Node.js](https://nodejs.org/) installed before proceeding. ```shell # Clone the repo @@ -55,6 +55,7 @@ The following npm scripts are available to you in this starter repo. With the ex | `css` | Runs `css-compile` and `css-prefix` | | `css-compile` | Compiles source Sass into CSS | | `css-prefix` | Runs Autoprefixer on the compiled CSS | +| `css-purge` | Runs PurgeCSS to remove CSS that is unused by `index.html` | ## Advanced usage @@ -62,7 +63,7 @@ Take this starter repository to another level with some built-in addons that you ### Optimizing CSS -Before you start to use tools that remove Bootstrap styling like PurgeCSS, you can make some broad optimizations by only including the stylesheets you think you'll need. +Before you start to use tools that remove Bootstrap styling like [PurgeCSS](#purgecss), you can make some broad optimizations by only including the stylesheets you think you'll need. Look to the `scss/starter.scss` file for your two options of including all of Bootstrap, or a subset of our styles and components. By default we've only imported the stylesheets that Bootstrap requires plus those of the components we're planning to use. @@ -76,6 +77,20 @@ See the `js/starter.js` file for an example of how to import all of Bootstrap's You can add more options here, or import the entire `bootstrap-bundle.min.js` file, to get all JavaScript plugins and Popper.js. +### PurgeCSS + +[PurgeCSS](https://purgecss.com/) is a [PostCSS](https://postcss.org) plugin that removes unused CSS based on your site's HTML. It finds rulesets that are unused by your HTML and removes them, ensuring only what's needed is sent to your site's visitors while improving file size and performance. + +We've included a single npm script that runs PurgeCSS against our single `index.html` file to remove unused styles from `assets/css/starter.css`. + +To purge your CSS, run `npm run css-purge` from the command line. This executes the following: + +```shell +npm purgecss --css assets/css/starter.css --content index.html --output assets/css/ +``` + +PurgeCSS is a PostCSS plugin and [can be configured](https://purgecss.com/configuration.html) to your exact needs with a little extra effort, including additional [command line options](https://purgecss.com/CLI.html). + ## Actions CI We've included some simple GitHub Actions in this template repo. When you generate your new project from here, you'll have the same tests that run whenever a pull request is created. We've included Actions for the following: diff --git a/package-lock.json b/package-lock.json index 6aa173c..ffed73b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -725,6 +725,12 @@ "delayed-stream": "~1.0.0" } }, + "commander": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz", + "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==", + "dev": true + }, "compressible": { "version": "2.0.18", "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz", @@ -844,6 +850,12 @@ "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==", "dev": true }, + "cssesc": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", + "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", + "dev": true + }, "currently-unhandled": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz", @@ -1446,6 +1458,12 @@ "repeating": "^2.0.0" } }, + "indexes-of": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz", + "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=", + "dev": true + }, "inflight": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", @@ -2535,6 +2553,17 @@ "postcss": "^7.0.7" } }, + "postcss-selector-parser": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz", + "integrity": "sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==", + "dev": true, + "requires": { + "cssesc": "^3.0.0", + "indexes-of": "^1.0.1", + "uniq": "^1.0.1" + } + }, "postcss-value-parser": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz", @@ -2602,6 +2631,18 @@ "escape-goat": "^2.0.0" } }, + "purgecss": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-2.1.2.tgz", + "integrity": "sha512-5oDBxiT9VonwKmEMohPFRFZrj8fdSVKxHPwq7G5Rx/2pXicZFJu+D4m5bb3NuV0sSK3ooNxq5jFIwwHzifP5FA==", + "dev": true, + "requires": { + "commander": "^5.0.0", + "glob": "^7.0.0", + "postcss": "7.0.27", + "postcss-selector-parser": "^6.0.2" + } + }, "qs": { "version": "6.5.2", "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz", @@ -3361,6 +3402,12 @@ } } }, + "uniq": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz", + "integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=", + "dev": true + }, "unique-string": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz", diff --git a/package.json b/package.json index 307cfdb..a8c05ef 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "build": "npm run css", "css-compile": "node-sass --include-path node_modules --output-style compressed --source-map true --source-map-contents true --precision 6 scss -o assets/css/", "css-prefix": "postcss --replace assets/css/starter.css --use autoprefixer --map", + "css-purge": "purgecss --css assets/css/starter.css --content index.html --output assets/css/", "css": "npm run css-compile && npm run css-prefix", "server": "serve --listen 3000", "watch": "nodemon -e html,scss -x \"npm run css\"", @@ -39,6 +40,7 @@ "node-sass": "^4.14.1", "nodemon": "^2.0.4", "postcss-cli": "^7.1.1", - "serve": "^11.3.1" + "purgecss": "^2.1.2", + "serve": "^11.3.0" } } diff --git a/scss/starter.scss b/scss/starter.scss index 80343ed..4fdd65b 100644 --- a/scss/starter.scss +++ b/scss/starter.scss @@ -27,7 +27,54 @@ $body-bg: #f5f5f5; // Bring in Bootstrap // -@import "bootstrap/scss/bootstrap"; +// Option 1 +// +// Import all of Bootstrap's CSS + +// @import "bootstrap/scss/bootstrap"; + +// Option 2 +// +// Import just the styles you need. Note that some stylesheets are required no matter what. + +@import "bootstrap/scss/functions"; // Required +@import "bootstrap/scss/variables"; // Required +@import "bootstrap/scss/mixins"; // Required +// @import "bootstrap/scss/root"; +@import "bootstrap/scss/reboot"; // Required +@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"; // Requires forms +// @import "bootstrap/scss/custom-forms"; +// @import "bootstrap/scss/nav"; +// @import "bootstrap/scss/navbar"; // Requires nav +// @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/toasts"; +@import "bootstrap/scss/modal"; // Requires transitions +// @import "bootstrap/scss/tooltip"; +// @import "bootstrap/scss/popover"; +// @import "bootstrap/scss/carousel"; +// @import "bootstrap/scss/spinners"; +// @import "bootstrap/scss/utilities"; +// @import "bootstrap/scss/print"; + // |