Free
A simple landing page built with 11ty and Tailwind CSS.
Github Info
1 open issue
46 stars
3 watching
28 forks
INFO
Released
Last updated
Tags
Stack
About the template
A simple landing page built with 11ty and Tailwind CSS.
Port of the Hugo Version
How to use this template
Requirements:
- Eleventy (developed and tested with version 0.12.1)
- Tailwind CSS
All other dependencies are either linked from a CDN or included in this repository.
Setup:
- Fork, clone or download
- cd into the root folder
- run npm install
- run npm run serve
- open a browser and go to http://localhost:8080
Basic configuration:
- Eleventy -> ./.eleventy.js
- Tailwind -> ./tailwind.config.js
- 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)
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 ./scr directory.
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.
