Create new Bootstrap-powered projects in no time.
flexstrap-starter it's a Lightweight Design System to power your new amazing project!
The system it's based on Bootstrap 5 & Flexbox layout method.
Created & maintained by @ncladuiuf.
Setup as a starter template, you can easily generate a new GitHub repository. From the repository homepage, click the Use this template button or use the template on codesandbox.
- Single HTML page (
index.html) to demonstrate how to include Bootstrap. - Includes Bootstrap (currently using v5.1.0) source files via npm or codesandbox.
- Includes Bootstrap Icons (v1.5.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. - CI-CD using Vercel for deployment & server. PurgeCSS & Parcel to optimize, minfiy & bundle the code before deploying on github.
- Performance; Score 100 on both mobile & desktop Accoring to (Google PageSpeed Insights)[https://developers.google.com/speed/pagespeed]
Be sure to have Node.js installed before proceeding or create a generate a server using codesandbox.io.
via Node.js
# 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 devFor 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.
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 against source Sass for code quality |
css-prefix |
Runs Autoprefixer on the compiled CSS |
css-purge |
Runs PurgeCSS to remove CSS that is unused by index.html |
test |
Runs css-lint and css, in sequential order |
dev |
Watches Sass for changes and starts a local server |
I recently stumble upon codesandbox and found it quite easy to get started and maintain a project.
If you want to give it a go, visit codesandbox and generate a project using the template I've created.
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.
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.
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 5 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 is a PostCSS 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:
npm purgecss --css assets/css/starter.css --content index.html --output assets/css/PurgeCSS is a PostCSS plugin and can be configured to your exact needs with a little extra effort, including additional command line options.
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, read the Actions docs, or browse the Actions Marketplace.
Stylelint is included, as is Bootstrap's default Stylelint config, 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.
Configurations based on parceljs v2, be sure to visit parceljs for more information.
Configurations need to be made on vercel project settings page. (🚧 TODO create a json script for setup)
#Build Command:
npm run build | yarn build
#Output Directory:
dist/
# Install Command:
npm install --save-dev parcel | yarn add --dev parcelAccording to google pagespeed insights score both 100 on mobile and desktop.
© @nclaudiuf 2021-2022 and licensed MIT.
Bootstrap team