https://github.com/ttntm/11ty-landing-page

A simple landing page built with 11ty and Tailwind CSS.
https://github.com/ttntm/11ty-landing-page

11ty 11ty-starter 11ty-template eleventy landingpage tailwind-css

Last synced: about 1 month ago
JSON representation

A simple landing page built with 11ty and Tailwind CSS.

• Host: GitHub
• URL: https://github.com/ttntm/11ty-landing-page
• Owner: ttntm
• License: mit
• Created: 2021-03-31T08:33:39.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-05-29T15:48:35.000Z (6 months ago)
• Last Synced: 2024-09-30T19:01:20.264Z (about 1 month ago)
• Topics: 11ty, 11ty-starter, 11ty-template, eleventy, landingpage, tailwind-css
• Language: JavaScript
• Homepage: https://ttntm.github.io/11ty-landing-page/
• Size: 128 KB
• Stars: 146
• Watchers: 5
• Forks: 56
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# 11ty-landing-page

A simple landing page built with 11ty and Tailwind CSS.

**Other versions**

- [Astro](https://github.com/ttntm/astro-landing-page)

- [Hugo](https://github.com/ttntm/hugo-landing-page)

## How to use this template

**Requirements:**

1. Eleventy (developed and tested with version 0.12.1)

2. Tailwind CSS

All other dependencies are either linked from a CDN or included in this repository.

**Setup:**

1. Fork, clone or download

2. `cd` into the root folder

3. run `npm install`

4. run `npm run serve`

5. open a browser and go to `http://localhost:8080`

**Basic configuration:**

1. Eleventy -> `./.eleventy.js`

2. Tailwind -> `./tailwind.config.js`

3. Netlify -> `./netlify.toml`

CSS is built via PostCSS and based on `./src/_includes/css/_page.css`. Building CSS gets triggered by `./src/css/page.11ty.js` and Tailwind's config is set to JIT (see: [Tailwind docs](https://tailwindcss.com/docs/just-in-time-mode))

Please note that this CSS build _does not_ include the `normalize.css` file used for the 2 regular pages (imprint, privacy) - a minified production version is stored in `./src/static/css` and gets included in the build by default.

**Change Content:**

Page content is stored in

- `./src/`

  - `imprint.md`

  - `privacy.md`

- `./src/sections/`

- `./src/_data/features.json`

**Change Templates/Layout:**

Page structure and templates are stored in `./src/_layouts/` and can be edited there.

Best have a look at `./layouts/base.njk` first to understand how it all comes together - the page itself is constructed from partial templates stored in `./src/includes/` and each section has a corresponding template file (`section.**.njk`) stored there.

`index.njk` in `./src/` arranges everything, meaning that sections can be added/re-ordered/removed/... there.

**Change images:**

Images are stored in `./static/img/`; everything in there can be considered a placeholder that should eventually be replaced with your actual production images.