11straps is a static website boilerplate that pairs the Eleventy (11ty) static site generator with the Bootstrap 5 CSS framework to produce minified, purged static sites. It is maintained as an open-source GitHub repository by holger1411 and has 126 stars.
What is 11straps?
11straps is a simple boilerplate that combines 11ty, a static site generator, with Bootstrap 5, a popular CSS framework. It takes source files from the /src folder and outputs a complete static website into /dev for development or /public for production. The project requires Node.js v8 or newer and uses npm scripts and Gulp tasks to handle the build pipeline.
Key Features
- Eleventy integration — Generates static HTML pages from Nunjucks templates with no client-side JavaScript framework.
- Bootstrap 5 via SCSS — Bootstrap is included as SCSS source, allowing theme variable overrides before compilation.
- CSS purging and minification — Production builds remove unused CSS and minify both CSS and HTML, reducing file size.
- BrowserSync dev server — The
npm run watchcommand starts a local server with live reload that rebuilds on changes in the/srcfolder. - Dual build outputs —
npm run build-devoutputs unminified code to/devfor debugging;npm run buildoutputs optimized files to/public. - Gulp task runner — Gulp orchestrates SCSS compilation, autoprefixing, purging, minification, and file copying.
- Netlify one-click deploy — A deploy button in the README lets you deploy to Netlify directly from GitHub.
- Node v8+ compatibility — Works with Node versions as old as v8.
Who is it for?
- Developers building static marketing sites — Use Bootstrap components like navbar, cards, and forms, and get a production-ready static site.
- Teams standardizing on Bootstrap — Keep the familiar Bootstrap grid and components while switching to a static-site workflow.
- Developers who want small CSS output — The automatic purging of unused CSS in production means the final stylesheet is smaller than a standard Bootstrap bundle.
- Netlify users — The one-click deploy button makes it easy to get a live demo from the repository.
What can you do with 11straps?
- Launch a landing page or blog — Create pages in the
/srcfolder and deploy the generated/publicoutput to any static host. - Prototype with live reload — Use
npm run watchto edit templates and SCSS and see changes reflected instantly in the browser. - Customize Bootstrap's theme — Override SCSS variables for colors, spacing, and breakpoints before the build.
- Generate a deploy-ready folder — Run
npm run buildto produce a minified, purged site ready to upload.
How does 11straps work?
After running npm install, you can either run npm run build-dev to compile the site into /dev without minification, or npm run watch to start a BrowserSync server that rebuilds on every save. When ready for production, npm run build runs the full pipeline, purging unused CSS and minifying HTML into /public.
FAQ
Does 11straps use Sass?
Yes, Bootstrap 5 is included as SCSS source, and Gulp compiles it to CSS. The production build also purges unused CSS and minifies the result.
What Node version do I need?
Node.js v8 or newer is required. You can check your version with the node --version command.
Can I deploy 11straps to Netlify?
Yes, there's a one-click deploy button in the README that connects to a Netlify app and builds the repository automatically.
Where does the production build go?
Running npm run build outputs the final site to the /public folder, with minified HTML and a purged, minified CSS file.
Is 11straps free?
Yes, the source code is publicly available on GitHub under an open-source repository, and you can download the latest release or clone the main branch.
