Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tomreinert/minimal-11ty-tailwind-starter
https://github.com/tomreinert/minimal-11ty-tailwind-starter
Last synced: 5 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/tomreinert/minimal-11ty-tailwind-starter
- Owner: tomreinert
- Created: 2020-09-15T07:47:29.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2024-04-29T09:42:21.000Z (7 months ago)
- Last Synced: 2024-08-01T19:45:11.403Z (3 months ago)
- Language: Nunjucks
- Size: 391 KB
- Stars: 113
- Watchers: 1
- Forks: 27
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Minimal 11ty Starter
[![Screenshot of the Demo Website](https://github.com/tomreinert/minimal-11ty-tailwind-starter/assets/3286735/87949d5e-dc9a-4f12-bab0-b854f7e78dd0)](https://clever-newton-cbb08a.netlify.app)
A *very* minimal [eleventy](https://11ty.io/) starter using [Tailwind CSS](https://tailwindcss.com/) for styling.
It features a smart navigation component that sets active states automatically.
For beginners and/or when you need a simple static site and don't want to duplicate your navigation header and set active states for the nth time.
## Features
ðĶī As minimal as possible
âĄïļ Active states in the navigation are automatically set based on the current url.
ð Dark/Light Mode Toggle
ðĻ Add a couple of lines to any page and it will appear in the navigation. (Check how to below)
ð A very simple blog structure because why not
ðŠ Example for including json data on contact page
ð Tailwind CSS### [Live Demo](https://clever-newton-cbb08a.netlify.app)
---
## Getting Started
#### 1. Clone this repo
```
git clone [email protected]:tomreinert/minimal-11ty-tailwind-starter.git mysite
```
#### 2. Change into the working directory```
cd mysite
```#### 3. Install dependencies
```
npm install
```#### 4. Work locally
Watches for changes and serves locally on http://localhost:8080```
npm run serve
```#### 5. Create a production build
```
npm run build
```## How To: Navigation
The top navigation is the only *feature* in this starter and lives in `/src/_includes/components/navigation.njk`.
It looks for the eleventyNavigation object in pages and adds them to the navigation bar. It also checks whether the site's url is in the currently opened url and highlights the navigation item accordingly. This even works for subpages. So if you're on `/blog/post/` the **Blog** nav item will still be active.
### Adding links to the navigation
Add the `eleventyNavigation` object to any page and it will appear in the navigation. Optionally set the order of your items.
Check the [11ty docs](https://www.11ty.dev/docs/plugins/navigation/) for more information about the navigation plugin.```
---
eleventyNavigation:
key: Your Page Name
order: 1
---
```### Changing the navigation item styles
The script in `/_includes/components/navigation.njk` checks if a navigation item is active and styles it accordingly.
Let's dissect the code:```
{{ entry.title }}
```## How to: Dark mode
As someone with limited development skills, it was harder than expected to implement a dark-light-mode toggle. So I dug into it and built it into the template.
You can easily remove it if you don't need it.Per default, the site takes the user's operating system preference.
Once the user toggles the mode manually, it is saved to local storage and will override system preference.
You can add a button that forgets the manually selected mode. See line 50 in `navigation.njk`:
```
Forget
```If you don't need the dark mode toggle, do this:
1. Remove the entire `...` from the head of `base.njk`
2. Remove the entire `...` from `navigation.njk`
3. Remove any classes that start with `dark:`from `base.njk` and `navigation.njk`## How To: Blog
Add a page in `_src/blog/posts` and it will appear in the post list.
## Images
Put your images into `_src/img` and add them to your markup like so:
```
```## Credits
[Bryan L. Robinson](https://bryanlrobinson.com/blog/using-nunjucks-if-expressions-to-create-an-active-navigation-state-in-11ty/) for explaining how to create the active navigation state
https://11ty.io/
https://tailwindcss.com