https://github.com/andikod/tadam11ty
11ty Starter&Sandbox. 13 CSS flavors, 18 JS libraries, solid defaults and startKit.
https://github.com/andikod/tadam11ty
css eleventy-starter javascript scss windicss
Last synced: 7 months ago
JSON representation
11ty Starter&Sandbox. 13 CSS flavors, 18 JS libraries, solid defaults and startKit.
- Host: GitHub
- URL: https://github.com/andikod/tadam11ty
- Owner: AndiKod
- License: mit
- Created: 2022-02-01T14:12:28.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-10-19T20:36:53.000Z (12 months ago)
- Last Synced: 2025-01-24T02:29:46.075Z (9 months ago)
- Topics: css, eleventy-starter, javascript, scss, windicss
- Language: Nunjucks
- Homepage: https://tadam11ty.netlify.app
- Size: 119 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
📦 DevSandbox — 11ty3.Starter/KitchenSink 🚀
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._
### Readme Sections
- 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.
# Quick Start💨
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
```
### Folder structure seen from the package.json root level:
**/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
# The Sandbox CDN libstore, pre configured links 🎁
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, ...
```
## 🎨 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, or great Vanilla CSS.
- [TailwindCSS]() already included
The classic utility-first CSS framework.
### Alternative CSS frameworks
#### The classics
- [Bulma](https://bulma.io/documentation/)
The modern CSS framework that just works.
- [Bootstrap](https://getbootstrap.com)
World’s most popular front-end toolkit
- [UIKit](https://getuikit.com/docs/introduction)
Lightweight and modular front-end framework
- [Foundation for Sites](https://get.foundation/sites/docs/)
Advanced responsive front-end framework
#### Utility first and similar approaches
- [OpenProps](https://open-props.style/#getting-started)
Supercharged CSS variables
- [Tachyons](http://tachyons.io/docs/)
Built for designing. *...with as little css as possible.*
- [Tailwind-CDN](https://tailwindcss.com/docs/installation/play-cdn)
The "Play CDN" setup for testing and prototyping
#### No classes, Just raw HTML
- [Water.css](https://watercss.kognise.dev)
A drop-in collection of CSS styles
- [MVP.css](https://andybrewer.github.io/mvp/#docs)
A minimalist stylesheet for HTML elements
#### Minimalist frameworks
- [Milligram](https://milligram.io)
A minimalist CSS framework
- [Chota](https://jenil.github.io/chota/)
A micro (~3kb) CSS 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](https://reactjs.org/docs/getting-started.html)
Modern client-side JavaScript framework
- [Vue 3](https://v3.vuejs.org/guide/introduction.html)
Modern client-side JavaScript framework
- [AlpineJS](https://alpinejs.dev/start-here)
Your new, lightweight, JavaScript framework
- [Mithril](https://mithril.js.org)
Modern client-side JavaScript framework
- [_Hyperscript](https://hyperscript.org/docs)
Fun and readable, dependency-free DOM manipulation library & more
- [ChartJS](https://www.chartjs.org/docs/latest/)
Simple yet flexible JavaScript charting
- [ApexCharts](https://apexcharts.com/docs/creating-first-javascript-chart/)
Modern & Interactive Open-source Charts
- [AnimateOnScroll](https://michalsnik.github.io/aos/)
Animate On Scroll Library
- [Granim](https://sarcadass.github.io/granim.js/examples.html)
Fluid and interactive gradient animations library
- [Leaflet](https://leafletjs.com/reference.html)
JavaScript library for mobile-friendly interactive maps
- [Moment](https://momentjs.com)
Parse, validate, manipulate,and display dates and times
- [Luxon](https://moment.github.io/luxon/#/)
Modern, and friendly wrapper for JavaScript dates and times
- [UmbrellaJS](https://umbrellajs.com/documentation)
Tiny library for DOM manipulation and events
- [jQuery Core](https://learn.jquery.com/using-jquery-core/)
jQuery is a fast, small, and feature-rich JavaScript library.
- [Voca](https://vocajs.com/#)
The ultimate JavaScript string library
- [Lodash](https://lodash.com/docs/4.17.15)
JS utility library delivering modularity, performance & extras
- [TaffyDB](https://taffydb.com)
Library that brings database features into your project
- [Cleave](https://nosir.github.io/cleave.js/)
It helps with formatting input text content automatically.
# Eleventy extensions collection 🔧
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:
```js
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
## [Filters](#filters)
*[11ty.dev/docs/filters/](11ty.dev/docs/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](#shortcodes)
*[11ty.dev/docs/shortcodes/](11ty.dev/docs/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/AndiKod/tadam11ty)
```[](https://vercel.com/new/clone?repository-url=https://github.com/user/repo)```
## Netlify
[](https://app.netlify.com/start/deploy?repository=https://github.com/AndiKod/tadam11ty)
```[](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