Initial commit

.browserslistrc

@@ -0,0 +1,13 @@
+# https://github.com/browserslist/browserslist#readme
+
+>= 1%
+last 1 major version
+not dead
+Chrome >= 45
+Firefox >= 38
+Edge >= 12
+Explorer >= 10
+iOS >= 9
+Safari >= 9
+Android >= 4.4
+Opera >= 30

.editorconfig

@@ -0,0 +1,11 @@
+# editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true

.gitattributes

@@ -0,0 +1,2 @@
+# Enforce Unix newlines
+* text=auto eol=lf

.github/workflows/ci.yml

@@ -0,0 +1,31 @@
+name: CI
+
+on: [push, pull_request]
+
+env:
+  FORCE_COLOR: 2
+
+jobs:
+  test:
+    name: Node ${{ matrix.node }}
+    runs-on: ubuntu-latest
+
+    strategy:
+      fail-fast: false
+      matrix:
+        node: [12, 14]
+
+    steps:
+      - name: Clone repository
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: "${{ matrix.node }}"
+
+      - name: Install npm dependencies
+        run: npm ci
+
+      - name: Test
+        run: npm test

.gitignore

@@ -0,0 +1 @@
+node_modules

.stylelintignore

@@ -0,0 +1,3 @@
+**/*.min.css
+**/dist/
+node_modules

.stylelintrc

@@ -0,0 +1,5 @@
+{
+  "extends": [
+    "stylelint-config-twbs-bootstrap/scss"
+  ]
+}

LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2020-2021 Mark Otto
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -0,0 +1,124 @@
+<p align="center">
+  <img src=".github/logo.png" width="300" height="175" alt="Bootstrap npm logo">
+</p>
+
+<h3 align="center">Bootstrap npm starter template</h3>
+
+<p align="center">Create new Bootstrap-powered npm projects in no time.</p>
+
+## About
+
+`bootstrap-npm-starter` is a GitHub template repository for creating new Bootstrap-powered npm projects, maintained by Bootstrap co-author @mdo. You can also use it as your own Bootstrap prototyping sandbox. It's built with Bootstrap v4 with plans to update for v5.
+
+[![Build Status](https://github.com/twbs/bootstrap-npm-starter/workflows/CI/badge.svg)](https://github.com/twbs/bootstrap-npm-starter/actions)
+
+## Repo template
+
+Setup as a starter template, you can easily generate a new GitHub repository. From the repository homepage, click the `Use this template` button.
+
+## What's included
+
+- Single HTML page (`index.html`) to demonstrate how to include Bootstrap.
+- Includes [Bootstrap](https://getbootstrap.com) (currently using v4.6.0) source files via npm.
+- Includes [Bootstrap Icons](https://icons.getbootstrap.com) (v1.4.0), which includes over 1,200 icons available as SVGs and web fonts.
+- npm scripts (see `package.json`) for compiling and autoprefixing Sass, watching for changes, and starting a basic local server.
+- Example stylesheet (`scss/starter.scss`) highlighting two ways to include and customize Bootstrap.
+- Example JavaScript file (`assets/js/starter.js`) showing how to import all of Bootstrap, or just the parts you need.
+
+## Usage
+
+Be sure to have [Node.js](https://nodejs.org/) installed before proceeding.
+
+```shell
+# Clone the repo
+git clone https://github.com/twbs/bootstrap-npm-starter
+cd bootstrap-npm-starter
+
+# Install dependencies
+npm i
+
+# Compile Sass
+npm run css-compile
+
+# Watch Sass for changes (uses nodemon)
+npm run watch
+
+# Start local server (uses sirv-cli)
+npm run server
+
+# Watches Sass for changes and starts a local server
+npm start
+```
+
+For the most straightforward development, open two Terminal tabs to execute `npm run server` and `npm run watch` at the same time.
+
+Open <http://localhost:3000> to see the page in action.
+
+## Scripts
+
+The following npm scripts are available to you in this starter repo. With the exception of `npm start` and `npm test`, the remaining scripts can be run from your command line with `npm run scriptName`.
+
+| Script | Description |
+| --- | --- |
+| `server` | Starts a local server (<http://localhost:3000>) for development |
+| `watch` | Automatically recompiles CSS as it watches the `scss` directory for changes |
+| `css` | Runs `css-compile` and `css-prefix` |
+| `css-compile` | Compiles source Sass into CSS |
+| `css-lint` | Runs [Stylelint](https://stylelint.io) against source Sass for code quality |
+| `css-prefix` | Runs [Autoprefixer](https://github.com/postcss/autoprefixer) on the compiled CSS |
+| `css-purge` | Runs [PurgeCSS](https://purgecss.com) to remove CSS that is unused by `index.html` |
+| `test` | Runs `css-lint` and `css`, in sequential order |
+
+## Advanced usage
+
+Take this starter repository to another level with some built-in addons that you can enable and customize.
+
+### Optimizing CSS
+
+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.
+
+Uncomment specific lines as needed, then recompile to use them.
+
+### Optimizing JS
+
+Similar to optimizing CSS, we publish individual scripts for each of our plugins. This allows you to import only what you need, versus the entire bundle and dependencies. For example, if you don't plan on using dropdowns, tooltips, or popovers, you can safely omit the Popper.js depdendency. Bootstrap 4 requires jQuery though, so you won't be able to safely remove that until v5 launches.
+
+See the `js/starter.js` file for an example of how to import all of Bootstrap's JS or just the individual pieces. By default we've only imported our modal JavaScript since we have no need for anything else.
+
+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:
+
+- Stylelint for your CSS
+
+When your repository is generated, you won't see anything in the Actions tab until you create a new pull request. You can customize these Actions, add new ones, or remove them outright if you wish.
+
+[Learn more about GitHub Actions](https://github.com/features/actions), [read the Actions docs](https://help.github.com/en/actions), or [browse the Actions Marketplace](https://github.com/marketplace/actions).
+
+### Stylelint
+
+Stylelint is included, as is Bootstrap's default Stylelint config, [stylelint-config-twbs-bootstrap](https://github.com/twbs/stylelint-config-twbs-bootstrap). This is the same linter configuration we use in the main Bootstrap project. It's run via the `npm test` command, which is invoked in our `ci.yml` Actions workflow file.
+
+At the root of the repo, `.stylelintignore` is used to list files that we ignore when linting and `.stylelintrc` is where we tell Stylelint to use the Bootstrap config. The former is recommended based on your specific needs, while the latter is required.
+
+## Copyright
+
+&copy; @mdo 2020-2021 and licensed MIT.

assets/js/starter.js

@@ -0,0 +1,22 @@
+// Importing JavaScript
+//
+// You have two choices for including Bootstrap's JS files—the whole thing,
+// or just the bits that you need.
+
+
+// Option 1
+//
+// Import Bootstrap's bundle (all of Bootstrap's JS + Popper.js dependency)
+
+// import "../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js";
+
+
+// Option 2
+//
+// Import just what we need
+
+// If you're importing tooltips or popovers, be sure to include our Popper.js dependency
+// import "../../node_modules/popper.js/dist/popper.min.js";
+
+import "../../node_modules/bootstrap/js/dist/util.js";
+import "../../node_modules/bootstrap/js/dist/modal.js";

index.html

@@ -0,0 +1,87 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="assets/css/starter.css">
+    <title>Bootstrap npm starter</title>
+  </head>
+  <body>
+    <div class="col-md-8 py-5 px-3 mx-auto">
+
+      <header class="pb-3 mb-5 border-bottom">
+        <h1 class="h4">
+          <a href="/" class="d-flex align-items-center text-dark text-decoration-none">
+            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-inline-block mr-2" viewBox="0 0 118 94" role="img"><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg>
+            <span>npm starter</span>
+          </a>
+        </h1>
+      </header>
+
+      <h1>Get started with Bootstrap</h1>
+      <div class="col-lg-8 px-0">
+        <p class="lead">You've successfully loaded up the Bootstrap npm starter project! It's loaded up with <a href="https://getbootstrap.com/docs/4.6/getting-started/introduction/">Bootstrap 4</a>, <a href="https://icons.getbootstrap.com">Bootstrap Icons</a>, and tooling for compiling our Sass and JavaScript to your needs.</p>
+        <p>If this button appears blue and the link appears purple, you've done it!</p>
+      </div>
+
+      <button type="button" class="btn btn-primary mr-3" data-toggle="modal" data-target="#exampleModal">Toggle example modal</button>
+      <a href="#" class="text-success">Example link</a>
+
+      <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered" role="document">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h5 class="modal-title" id="exampleModalLabel">Success!</h5>
+              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+              </button>
+            </div>
+            <div class="modal-body">
+              If you're seeing this modal after clicking the button on the page, Bootstrap's CSS and JS are both working properly.
+            </div>
+            <div class="modal-footer">
+              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+              <button type="button" class="btn btn-primary">Save changes</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <hr class="my-5 w-25 mx-0">
+
+      <div class="row">
+        <div class="col-md-6">
+          <h2>Adding Bootstrap Icons</h2>
+          <p><a href="https://icons.getbootstrap.com">Bootstrap Icons</a> are included with the SVG sprite here, but there are other <a href="https://icons.getbootstrap.com/#usage">usage options</a>, too. They're styleable with text utilities and more.</p>
+
+          <svg class="bi text-danger" width="32" height="32">
+            <use xlink:href="node_modules/bootstrap-icons/bootstrap-icons.svg#heart-fill"/>
+          </svg>
+          <svg class="bi text-dark" width="32" height="32">
+            <use xlink:href="node_modules/bootstrap-icons/bootstrap-icons.svg#toggles"/>
+          </svg>
+          <svg class="bi text-primary" width="32" height="32">
+            <use xlink:href="node_modules/bootstrap-icons/bootstrap-icons.svg#shop"/>
+          </svg>
+        </div>
+
+        <div class="col-md-6">
+          <h2>Guides</h2>
+          <p>Read more detailed instructions and documentation on using or contributing to Bootstrap.</p>
+          <ul class="icon-list">
+            <li><a href="https://getbootstrap.com/docs/4.6/getting-started/introduction">Bootstrap quick start guide</a></li>
+            <li><a href="https://getbootstrap.com/docs/4.6/getting-started/webpack">Bootstrap Webpack guide</a></li>
+            <li><a href="https://getbootstrap.com/docs/4.6/getting-started/build-tools">Contributing to Bootstrap</a></li>
+          </ul>
+        </div>
+      </div>
+
+      <hr class="my-5">
+
+      <p class="text-muted">Created and open sourced by the Bootstrap team. Licensed MIT.</p>
+    </div>
+
+    <script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
+    <script type="module" src="assets/js/starter.js"></script>
+  </body>
+</html>