📦 DevSandbox — 11tyStarter 🚀
13 CSS flavors, 18 JS libraries, solid defaults and startKit.
Readme Sections
- Quick Start
- The Sandbox LibStore
-
- 13 CSS Frameworks
-
- 18 JS Libraries
- 11ty extensions collection
-
- Filters / Short codes / Paired short codes
- One click Deploy buttons
-
- Vercel / Netlify
Quick Start💨
The usual steps...
git clone https://github.com/AndiKod/tadam11ty.git my-proj
cd my-proj
yarn // works too with pnpm and npm, sure
yarn dev // See you on port :8080
Folder structure seen from the package.json root level:
/libs 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
yarn build will create the /_site folder with your Awesome project inside
The Sandbox libstore 🎁
Heard that AlpineJS is cool and need some default styling while testing? Make a new page, in the <head> section throw 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' %}
Tip: You can setup two Tadams on your machine. The "for production" project, and a sandbox dedicated one to try concepts in it.
🎨 Styling
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:
Installed out of the box
- SASS already included
CSS with super powers. - WindiCSS already included
Next generation utility-first CSS framework.
Tailwind compatible syntax, plus other features.
Alternative CSS frameworks
Utility first and similar approaches
- Tachyons Built for designing. ...with as little css as possible.
- Tailwind The "Play CDN" setup for testing and prototyping
- OpenProps Supercharged CSS variables
No classes, Just raw HTML
Minimalist frameworks
The classics
- Bootstrap
World’s most popular front-end toolkit - Foundation for Sites
Advanced responsive front-end framework - Bulma
The modern CSS framework that just works. - UIKit
Lightweight and modular front-end framework
⚡ JavaScript Libraries
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.
Eleventy extensions collection 🔧
To keep the .eleventy.js clean, all the functions are stored in the lib folder, like lib/shortcodes/youtube.js. In case we need something, a single line in the config file will activate it:
eleventyConfig.addShortcode('YouTube', require('./lib/shortcodes/youtube'));
Now we can use in pages/layouts:
{% YouTube {video: "xh5VideoId5hx"} %}
See more about Extensions
Filters
Creation
Create filtername.js with the logic, then in .eleventy.js
eleventyConfig.addFilter('FilterName', require('./lib/filters/filtername'));
Usage
{{ someString | FilterName }} or
{% for post in collections.posts | FilterName %}
Filters included
limit
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.
Shortcodes
Creation
Create shortcodename.js with the logic, then in .eleventy.js
eleventyConfig.addShortcode('ShortcodeName', require('./lib/filters/filtername'));
Usage
{% codeName { propName: 'propValue' } %}
Shortcodes included
YouTube
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
One click Deploy buttons 🚚
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:
Vercel
[](https://vercel.com/new/clone?repository-url=https://github.com/user/repo)
Netlify
[](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: andrei@andikod.fr