holger1411 / 11straps

11straps is a static website boilerplate. It combines Eleventy with Bootstrap 5. 🎉

11straps = 11ty + Bootstrap5

Live Demo: 11straps.com

What is 11straps?

11straps is a simple boilerplate. It combines the static site generator 11ty with the CSS framework Bootstrap 5 and is stitched together with some npm and Gulp magic dust. It minifies and purges the CSS file (so it removes any unused CSS) and comes with a static server and browser sync support for your local development.

Requirements

You need Node (at least v8+) on your computer. To check if you have node and what version run this command in your terminal:

node --version

Want to try it out now?

Installation

Download and extract the latest release or checkout the main branch of this repo. Fire up your terminal, go to the new folder and run:

npm install

Now you are good to go.

Build it for dev

To build your static website for local development run:

npm run build-dev

This will build the static website into the /dev folder without all the minifiying and purging stuff (<- much faster and a more human friendly code output, but a much bigger package)

Run in dev mode

To run the build-dev task automatically on file changes run:

npm run watch

That will run a local server from /dev folder and connects browser sync to it. On changes within the /src folder it will run the npm run build-dev command automatically and will refresh your browser.

Build it for prod

If you are done with your dev work and happy with it its time to deploy your static website into the wild wild west (www). To build your static website for a prod deployment run:

npm run build

That will output the full site, with purged and minified CSS and minified html. The output will be stored in the /public folder.

11straps's Issues

npm run watch not working on windows

rm -rf dev/*

'rm' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] clean: rm -rf dev/*
npm ERR! Exit status 1

Question not issue about populating dev directory

Hello. I am a self learner and I am very grateful for what you have created here! I am fairly new to eleventy and I have been pouring over the code and I can't for the life of me find the command that creates the blog directory in the dev directory when using the builld-dev command, since it is not in the src directory. I find that searching for these answers is vital to learning but I have honestly hit a wall and I suspect that I am making it harder than it is.

Thank you in advance for any help as I know this is not an actual issue.

JS not included in dev?

Hey,

thanks very much for providing this starter!

I started with the dev version and seems that JS is missing (I tried bootstrapp navbar with toggle/collapse).

Best regards,
Matthias

Blockquote class not present

Hi, thanks for this great theme.

When writing:

> Some stuff that someone said

The output is:

<blockquote>
Some stuff that someone said
</blockquote>

It should be

<blockquote class="blockquote">
Some stuff that someone said
</blockquote>

To be properly formatted with Bootstrap. How and where should this be implemented?

error in node-sass with npm install

updated npm-sass to 8.0.0 in package.json and npm install completed. Thank you for this template!

vulnerable dependencies

Hi!

Looking to use this as a base template for a project but noticed running npm install there are a lot of vulnerable deps that can't be automatically patched with npm audit fix

Is this something you are aware of? I've attempted to resolve myself but just thought I would raise!

Thanks

Suggestion: Use relative links for assets

Currently this boilerplate uses

<link rel="stylesheet" href="css/theme.css">

As far as I understand 11ty, you can use relative urls. This supports the use case of having an 11ty site on a subdirectory, e.g. https://pages.github.com/user/my-11tystraps-project/

So a better way could be:

<link rel="stylesheet" href="{{ "css/themes" | url }}"">

Docs: https://www.11ty.dev/docs/filters/url/

If you agree, I could also (of course) send a PR to change this.

Thanks in advance!

Best regards!
PS: Disclaimer - I'm a 11ty newbie :)
PPS: Also a subpage like "about.njk" would be cool in this boilerplate to show the power of 11ty.

Fabform contact form

Can you add a fabform.io contact form to this theme