{"id":14972508,"url":"https://github.com/bootpack/bootpack","last_synced_at":"2026-04-02T13:25:22.325Z","repository":{"id":48310232,"uuid":"132692187","full_name":"bootpack/bootpack","owner":"bootpack","description":"Create multi-page websites using bootstrap for development and webpack for task running.","archived":false,"fork":false,"pushed_at":"2021-08-02T09:19:58.000Z","size":13052,"stargazers_count":30,"open_issues_count":53,"forks_count":7,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-30T06:04:57.594Z","etag":null,"topics":["boilerplate","boilerplate-template","bootstrap","bootstrap-template","bootstrap4","template","webpack","webpack-starter-template","webpack4","website-builder","website-template","website-template-bootstrap"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bootpack.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":null,"open_collective":"zachtrice","ko_fi":"zachtrice","patreon":"zachtrice","issuehunt":"zachtrice","liberapay":"zachtrice","tidelift":null,"community_bridge":null,"otechie":null,"custom":null}},"created_at":"2018-05-09T02:42:52.000Z","updated_at":"2022-12-03T17:32:05.000Z","dependencies_parsed_at":"2022-08-27T10:41:36.465Z","dependency_job_id":null,"html_url":"https://github.com/bootpack/bootpack","commit_stats":null,"previous_names":["zachtrice/webpack-bootstrap-boilerplate"],"tags_count":19,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bootpack%2Fbootpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bootpack%2Fbootpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bootpack%2Fbootpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bootpack%2Fbootpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bootpack","download_url":"https://codeload.github.com/bootpack/bootpack/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238394323,"owners_count":19464583,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boilerplate","boilerplate-template","bootstrap","bootstrap-template","bootstrap4","template","webpack","webpack-starter-template","webpack4","website-builder","website-template","website-template-bootstrap"],"created_at":"2024-09-24T13:47:01.702Z","updated_at":"2025-10-26T19:31:33.745Z","avatar_url":"https://github.com/bootpack.png","language":"CSS","funding_links":["https://opencollective.com/zachtrice","https://ko-fi.com/zachtrice","https://patreon.com/zachtrice","https://issuehunt.io/r/zachtrice","https://liberapay.com/zachtrice"],"categories":[],"sub_categories":[],"readme":"# ![bootpack](thumbnail.png) \u0026middot; [![GitHub release](https://img.shields.io/github/release/bootpack/bootpack.svg)](https://GitHub.com/bootpack/bootpack/releases/) [![Build Status](https://travis-ci.com/bootpack/bootpack.svg?branch=master)](https://travis-ci.com/bootpack/bootpack) [![GitHub license](https://img.shields.io/github/license/bootpack/bootpack.svg)](https://github.com/bootpack/bootpack/blob/master/LICENSE) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/bootpack/bootpack/blob/master/.github/CONTRIBUTING.md) [![GitHub stars](https://img.shields.io/github/stars/bootpack/bootpack.svg?style=social\u0026label=Star\u0026maxAge=2592000)](https://GitHub.com/bootpack/bootpack/stargazers/)\n\n## bootpack\n`bootpack` is a boilerplate template to create multi-page websites using bootstrap for development and webpack for task running. View the latest version at [https://bootpack.github.io/bootpack/](https://bootpack.github.io/bootpack/).\n\n**Bootstrap + Webpack = \u0026hearts;**\n- **Just Develop:** 4 steps to [get started](#installation). Launch a dev server with live reloading.\n- **Pre-Configured:** A pre-configured webpack config simplifies overcomplicated build processes.\n- **Predictable File Output:** Keep your CSS where you want it; out of your JavaScript files! The `dist` directory will closely match the `src` directory.\n- **Minified Files:** JavaScript and CSS is minified and output as single files.\n- **Compressed Resources:** JS, CSS, fonts, images and favicons are gzipped for maximum compression.\n- **Dev and Production Builds:** [Build](#build) the project in development mode with sourcemapping enabled or production mode.\n- **Development Tools:** Generate \u0026 compress images + more [tools](#tools) to ease web development.\n- **Built-In Tests:** Lint JavaScript and CSS files with [one command](#test).\n\n## Table of Contents\n- [Overview](#bootpack)\n- [Getting Started](#getting-started)\n- [Usage](#usage)\n- [About](#about)\n- [Contributing](#contributing)\n- [Support](#support)\n\n## Getting Started\n\n### Prerequisites\n- This project uses [Node.js v8.15.1](https://nodejs.org/en/download/) or greater.\n\n### Use bootpack as a template (Option 1)\n\n*Using bootpack as template is the recommended method.*\n\n1. To get started, click the \"Use this template\" button at the top of this repository.   \n![Use this template button](.github/images/use_this_template_button.jpg?raw=true \"Use this template\")\n\n2. After clicking the \"Use this template\" button, you will be asked to enter a name for a new repostiory. This repository will be generated with all of the bootpack repository’s files and folders.   \n\n3. Next, simply perform the following commands in your terminal to get started, replacing `[USERNAME]/[REPOSITORY_NAME]` with the location and repository names you chose in the previous step.\n\n```\ngit clone https://github.com/[USERNAME]/[REPOSITORY_NAME].git\nnpm install\nnpm run build\nnpm start\n```\n\n### Fork/Clone bootpack  (Option 2)\n\nbootpack can also be forked into your own repository and cloned or cloned directly using the following commands.\n\n```\ngit clone https://github.com/bootpack/bootpack.git\nnpm install\nnpm run build\nnpm start\n```\n- Navigate to http://localhost:8080 in a browser. \n- Save a file in the project to refresh the browser. \n- Press ctrl+c in the terminal to stop serving.\n\n## Usage\n### Build\n`npm run build` - Creates the project in **production** mode (minified) and outputs to the dist directory.   \n`npm run watch` - Creates the project in **development** mode (unminified). This mode watches for changes and outputs to the dist directory.   \n`npm start` - Creates the project in **development** mode (unminified). This mode watches for changes, outputs to the dist directory and live reloades the page.\n\n### Test\n`npm run test` - Runs lint tests (+ additional unit and e2e tests can be added here as needed)   \n`npm run lint` - Runs `npm run lint:js` and `npm run lint:styles`   \n`npm run lint:js` - Runs eslint test on `src/*/*.js` files   \n`npm run lint:css` - Runs stylelint test on `src/css/*.css` files   \n`npm run lint:scss` - Runs stylelint test on `src/scss/*.scss` files   \n`npm run lint:styles` - Runs `npm run lint:css` and `npm run lint:scss`\n\n### Tools\n`npm run compress:images` \n- Optimizes images in the `images` directory, saves original images to `images-original`.   \n- Run before building or during watch. Only the `images` directory will be copied to the `dist` directory.   \n- Edit `tools/image-compress.js` to change the image compress. See: https://www.npmjs.com/package/compress-images for settings\n\n`npm run generate:images width ### height ###` \n- Creates a placeholder.jpg image in the `images` directory   \n- Replace `###` with a numeric value representing wwidth and height. If no width/height is specified, the placeholder will default to 800px x 600px.\n\n## About\n### Webpack 4\n#### Webpack: Builds\nThe webpack build creates a `dist` directory that closely mimics the `src` directory. \n- In production mode, the `dist` directory contains files that are minified \u0026 compressed. \n- In development mode, files are kept unminified with sourcemapping turned on as needed \u0026 no compression output. \n- Webpack server is available to speed up development via live browser refreshes on code change while preserving the ability to inspect the `dist` directory. \n\nThe `src` directory contains starter files to get your project off the ground quickly.\n\n#### Webpack: Process\nThe webpack task runner builds the site with the following commands:\n- `npm run build` will build production. \n- `npm run watch` builds development mode and watches for file changes. \n- `npm start` builds development mode, watches for file changes, opens the browser and refreshes when files change.\n1. The `dist` directory is cleaned on first built or modified on change (`npm start` or `npm run watch`).\n2. `src/**/*.html` is copied to `dist/**/*.html`\n3. Favicons are generated and injected into the dist index.html file from the `src/favicon.png` file. \n4. Bootstrap components are imported into the index.js and output to `dist/index.js`.\n5. CSS/SCSS files in `src/css/` and `src/scss/` are bundled together, minified and output to `dist/styles.css`.\n6. Images and fonts are copied from `src/images` -\u003e `dist/images` and `src/fonts` -\u003e `dist/fonts`.\n7. Files are compressed with gzip compression.\n\n### Bootstrap 4\n#### Bootstrap: SCSS Files\nBootstrap 4 is imported into `scss/boostrap.scss` via `@import \"~bootstrap/scss/*bootstrap*\";` import rules. Optional components can be excluded by commenting out the `@import` rules in this file (**recommended to minimize bundle size**). \n\n##### SCSS/CSS Overrides \u0026 Custom Styles:\n- `scss/variables.scss` is included to override all of bootstrap's built in variables.\n- `scss/custom.scss` is included to add custom scss to the project.\n- `css/custom.css` is included to add custom css to the project.\n- `css/fonts.css` is included to import local fonts into the project. Open Sans has been included as an example.\n\n#### Bootstrap: JS Files\nBootstap 4 is imported in the index.js file via `bootstrap.bundle` which contains the full bootstrap JavaScript plus the `popper.js` tooltip dependency.   Below the `bootstrap.bundle` import, comments contain other methods to import bootstrap. End-users may choose to import `bootstrap.bundle`, `bootstrap`, or individual components (**recommended to minimize bundle size**).\n\n### File Structure\n`src` file structure\n```\n|-css/\n|--custom.css\n|--fonts.css\n|-fonts/\n|--OpenSans/\n|----[font_styles]/\n|-images/\n|--[images]\n|-js\n|--index.js\n|-scss/\n|--boostrap.scss\n|--custom.scss\n|--variables.scss\n|-templates/\n|--[templates]/\n|----index.html\n|-favicon.png\n|-index.html\n```\n\n`dist` file structure\n```\n/* All files compressed, minified \u0026 gzipped */\n|-css\n|--index.css\n|--index.css.gz\n|-fonts/\n|--OpenSans/\n|----[font_styles]/\n|-images/\n|--[images]\n|-js\n|--index.js\n|--index.js.gz\n|-templates/\n|--[templates]/\n|----index.html\n|----index.html.gz\n|-[favicons]\n|-index.html\n|-index.html.gz\n```\n\n## Contributing\nPlease contribute using [Gitflow](https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow). Create a feature branch, add commits, and [open a pull request](https://github.com/bootpack/bootpack/compare/).\n\n## Support\nPlease [open an issue](https://github.com/bootpack/bootpack/issues/new) for support.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbootpack%2Fbootpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbootpack%2Fbootpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbootpack%2Fbootpack/lists"}