https://github.com/stevepolitodesign/eleventy-bootstrap-starter

A Blank Bootstrap Starter Theme for Eleventy.
https://github.com/stevepolitodesign/eleventy-bootstrap-starter

Last synced: about 17 hours ago
JSON representation

A Blank Bootstrap Starter Theme for Eleventy.

• Host: GitHub
• URL: https://github.com/stevepolitodesign/eleventy-bootstrap-starter
• Owner: stevepolitodesign
• Created: 2019-09-22T18:20:22.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-03-01T23:27:29.000Z (over 1 year ago)
• Last Synced: 2023-03-06T00:21:53.746Z (over 1 year ago)
• Language: HTML
• Homepage: https://stevepolito.design/blog/create-a-bootstrap-starter-theme-in-eleventy/
• Size: 605 KB
• Stars: 8
• Watchers: 1
• Forks: 2
• Open Issues: 17
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Requirements

[Parcel](https://parceljs.org/getting_started.html#%F0%9F%9A%80-getting-started)

---

# Documentation

## Site Variables

- Custom site variables are located in `_data/site.json`. These are used in the templates, such as `_includes/shared/header.njk`.

- Specifically, these are used to dynamically generate page titles and meta descriptions.

## Templates

- Custom templates are located in `_includes/layouts`.

- In order to use `layout: default` instead of `layouts/default.njk`, an alias was added to `.eleventy.js`.

## Local Development

- `npm run start`

    - This runs `eleventy --serve` and `parcel watch ./_assets/js/main.js --out-dir ./_site/assets`.

    - `--out-dir` ensures the assets generated by `parcel` are loaded in the `_site` directory generated by `eleventy`.

## Production Build

- `npm run build`

    - This runs `eleventy` and `parcel build ./_assets/js/main.js --out-dir ./_site/assets`.

    - `parcel build` minifies everything.

    - `--out-dir` ensures the assets generated by `parcel` are loaded in the `_site` directory generated by `eleventy`.

## Styles

- Bootstrap is loaded via npm, and then imported in at `_assets/css/vendor/_bootstrap.scss`

- [Bootstap overrides](https://getbootstrap.com/docs/4.3/getting-started/theming/#importing) are located at `_assets/css/base/_bootstrap-overrides.scss`.

- All `.scss` files are imported into `_assets/css/main.scss`.

- `_assets/css/main.scss` is then imported into `_assets/js/main.js`.

- `_assets/js/main.js` is then bundled via [Parcel](https://parceljs.org/recipes.html#customizing-bootstrap-styles). Parcel magically creates a `_site/assets/main.css` and `_site/assets/main.js` from this file.

## Javascript

- All javascript is imported into `_assets/js/main.js` and then compiled into `_site/assets/main.js` via Parcel

- In order to use [Popovers](https://getbootstrap.com/docs/4.3/components/popovers/) and [Tooltips](https://getbootstrap.com/docs/4.3/components/tooltips/), I created `_assets/js/vendor/popover.js` and `_assets/js/vendor/tooltip.js` respectively. These are then imported into `_assets/js/main.js`.