Multiple CSS flavors, JS libraries, code snippets and startKit.
You can copy-paste some parts into a new project, test/prototype, or remove what you don't need.
An obvious evolving project, as I'm considering what to add/remove next.
- Quick Start
- The Sandbox LibStore
-
- CSS Frameworks
-
- JS Libraries
- 11ty extensions collection
-
- Filters / Short codes / Paired short codes
- One click Deploy buttons
-
- Vercel / Netlify
Not yet documented, but you can find inside the example implementation of official plugins, data consumption from an API, environment variables, and more.
The usual prefered steps...
git clone https://github.com/AndiKod/tadam11ty.git my-proj
cd my-proj
pnpm i // works too with yarn and npm, sure
pnpm run dev // See you on port :8080
/lib Contains the Eleventy extensions. Filters, Shortcodes, Paired
/src/_includes Contains the /components, /layouts and sandbox /pkg
/src/assets Contains the /js, /styles and /images containers
/src/collections Contains the /posts, /books, /whatever collections
/src/pages Contains the pages, with a permalink tag in their frontmatter
pnpm run build will create the /_site folder with your Awesome project inside
Tempted to give AlpineJS a try and need some default styling while testing? Make a new page, in the <head> section add the links, and have fun. You can always yarn/npm install things later if needed, or just keep exploring new things.
{% include 'pkg/alpine.njk' %}
{% include 'pkg/bulma.njk' %} // or tailwind, bootstrap, ...
You sometimes just need some basic styling while working on things like getting the data out and see if it prints on the screen, without staring at an ugly page. On the other hand, it's also interesting to test several frameworks when prototyping frontend part.
See the 13 Available CSS Flavors:
- SASS already included
CSS with super powers, or great Vanilla CSS. - TailwindCSS already included
The classic utility-first CSS framework.
- Bulma
The modern CSS framework that just works. - Bootstrap
World’s most popular front-end toolkit - UIKit
Lightweight and modular front-end framework - Foundation for Sites
Advanced responsive front-end framework
- OpenProps Supercharged CSS variables
- Tachyons Built for designing. ...with as little css as possible.
- Tailwind-CDN The "Play CDN" setup for testing and prototyping
React and Vue can be used for small components, SPA, or just prototyping and playing around, can't do more, but it's still fun to have them. In one way or another, all the libraries can help in some projects or filters/extensions/etc crafting. Charts, maps, animation, date handling, DOM manipulation/interactivity, and more.
See the 18 Available—awesome—Packages
- React
Modern client-side JavaScript framework - Vue 3
Modern client-side JavaScript framework - AlpineJS
Your new, lightweight, JavaScript framework - Mithril
Modern client-side JavaScript framework - _Hyperscript
Fun and readable, dependency-free DOM manipulation library & more - ChartJS
Simple yet flexible JavaScript charting - ApexCharts
Modern & Interactive Open-source Charts - AnimateOnScroll
Animate On Scroll Library - Granim
Fluid and interactive gradient animations library - Leaflet
JavaScript library for mobile-friendly interactive maps - Moment
Parse, validate, manipulate,and display dates and times - Luxon
Modern, and friendly wrapper for JavaScript dates and times - UmbrellaJS
Tiny library for DOM manipulation and events - jQuery Core
jQuery is a fast, small, and feature-rich JavaScript library. - Voca
The ultimate JavaScript string library - Lodash
JS utility library delivering modularity, performance & extras - TaffyDB
Library that brings database features into your project - Cleave
It helps with formatting input text content automatically.
To keep the eleventy.config.js clean, all the functions are stored in the lib folder, like lib/shortcodes/youtube.js. In case we need something, import and activate it:
import Youtube from './lib/shortcodes/youtube.js';
eleventyConfig.addShortcode('YouTube', YouTube);Now we can use in pages/layouts:
{% YouTube {video: "xh5VideoId5hx"} %}
See more about Extensions
Create filtername.js with the logic, then in .eleventy.js
eleventyConfig.addFilter('FilterName', require('./lib/filters/filtername'));
{{ someString | FilterName }} or
{% for post in collections.posts | FilterName %}
File: arr-res-limit.js
Effect: Takes an arrays and returns the n-th most recent items
Usage:{% for post in collections.posts | limit(-3) %}
Info: It's the filter used on the official blog-starter project.
Create shortcodename.js with the logic, then in .eleventy.js
eleventyConfig.addShortcode('ShortcodeName', require('./lib/filters/filtername'));
{% codeName { propName: 'propValue' } %}
File: youtube.js
Effect: Insert a video on the page
Usage:{% YouTube { video: 'xXxVidIDxXx' } %}
Info: The video will take 100% width of it's container
When ready to publish, make your repository Public if actually private, place your own user/repo in the buttons code, and hit one of them:
[](https://vercel.com/new/clone?repository-url=https://github.com/user/repo)
[](https://app.netlify.com/start/deploy?repository=https://github.com/user/repo)
...if you forget to customise the button, it will obviously build a fresh Tadam instead, so don't ;)
Contact: see you on Github