Based on 11ty-bs5-starter https://github.com/THoenig/11ty-bs5-starter
Scroll to top: https://mdbootstrap.com/docs/standard/extended/back-to-top/
Animate on scroll
Bootstrap 5 starter for 11ty. Developed with rapid prototyping, easy customization/theming and fast loading times in mind.
### 2. cd into project directory
```cd your-project-name```
### 3. Install dependencies
```npm install```
### 4. Run
```npm start```
Then visit [http://localhost:8080](http://localhost:8080).
## Building for production
```npm run build```
This will minify HTML, CSS and JS and purge unused styles.
## Differences from 11ty default config
While I want to keep things as default as possible, I decided to change the following:
### [Input](https://www.11ty.dev/docs/config/#input-directory)/[Output](https://www.11ty.dev/docs/config/#output-directory) folders:
``` javascript
config.dir = {
input: './src',
output: "./public"
}
To separate configuration, actual source and output.
For me, it just feels like this should be the default.
config.setTemplateFormats([
'njk',
'md',
'jpg',
'png',
'svg',
// 'liquid',
// 'pug',
// 'ejs',
// 'hbs',
// 'mustache',
// 'haml',
// '11ty.js',
])
I like it, so I added it.
Add htmlmin transform
Minify HTML if NODE_ENV is set to 'production'.
11ty parses Liquid in markdown. This is great, because this enables you to include custom Liquid/HTML in your markdown or split your content up. To prevent 11ty to create a new output folder, just use the double underscore.
Example:
# Hi
This is content part 1.
{% include ./__content-part-2.md %}
By default, all styles and JS modules are activated. Deactivate the components you don't need to reduce file sizes and increase overall performance.
The entry point for all assets is parcel.js
. Nothing much to see here, in fact this is the whole content:
import "./src/_assets/scss/main.scss"
import "./src/_assets/js/main.js"
Use the respective main.{scss,js}
files to import stuff and extend to your liking.
Entry point: src/_assets/scss/main.scss
.
In src/_assets/scss/_bootstrap.scss
you can theme Bootstrap and (de-)activate Bootstrap modules. Further information on this topic in the Bootstrap docs about SCSS customization
Entry point: src/_assets/js/main.js
.
Bootstrap imports are located in src/_assets/js/_bootstrap.js
. The Bootstrap docs for popovers and tooltips state that these modules have impact on performance, so make sure to deactivate if you don't need them.
src/_data
├── env.js
├── layout.json
├── menus.json
└── site.json
This contains the expression isDev
to determine if NODE_ENV is 'development'. It's used to include sourcemaps in development mode and leave them out for a production build.
Applies the default layout for all pages (unless otherwise specified).
As I didn't want to include too much stuff like the 11ty navigation plugin, you can use this file to build navigation menus the manual way. Of course, feel free to use the plugin!
Don't forget to add a trailing slash to the URLs (at least to your internal ones)! This is important to be able to show the current active page. 11ty's {{ page.url }}
does add a trailing slash and if you don't, the comparison will fail.
Contains the default metadata, site name and language.
Now go and create something awesome!