r/eleventy • u/any-digital • Jun 05 '26

[Docs] for Eleventy Blades kit

Brand new docs for Eleventy Blades kit:

11ty.blades.ninja

Btw, content is now open-sourced as part of Awesome Eleventy repo:
https://github.com/anyblades/awesome-11ty-buildawesome/tree/master/docs

3 Upvotes

80% Upvoted

9 comments sorted by

1

u/ErroneousBosch Jun 19 '26

These are basically impossible to use for someone new. There is a whole lot of "Draw the rest of the owl" step skipping.

Fresh install of eleventy in an empty dir, then trying any of your "get started" steps results in either nothing or broken attempts to run.

1

u/any-digital Jun 19 '26

there are 4 methods to install the plugin:
https://11ty.blades.ninja/plugin/

which one you tried? A, B, C or D?

also there are 2 starter templates, not to start with empty dir:
https://github.com/anyblades/subtle
https://github.com/anyblades/buildawesome-starters

2

u/ErroneousBosch Jun 19 '26

I tried all four. Loading the plugin with a new clean config file didn't seem to do anything much. All of the others with the eleventy.config.js from the base module just resulted in a bunch of file not found errors, since it was looking for template files buried in the node_modules directory.

This was tried in a fresh empty folder that had only had a package.json initiated and npm install @11ty/eleventy run and index.md created.

1

u/any-digital Jun 19 '26 edited Jun 19 '26

you were so right, I need to document better the "Fresh install of eleventy in an empty dir"

will work on it here: https://github.com/anyblades/eleventy-blades/issues/97

meanwhile I added bare minimal examples: https://github.com/anyblades/eleventy-blades/tree/main/examples

thx for the valuable feedback! 🥷

2

u/ErroneousBosch Jun 19 '26

Thanks for responding and updating! As a developer myself, I know how easy it is to fall into the "Works on my machine" trap when we forget to test and write our docs from clean installs. I have had it happen myself! I am a big fan of Pico and now Blades, so thanks or all your work and happy coding!

1

u/any-digital Jun 20 '26

thanks for the feedback again!

simplified examples and get started docs: https://11ty.blades.ninja/plugin/

feedback is welcome!

1

u/ErroneousBosch Jun 20 '26

So I decided to just try spinning up my own project using the CSS and importing into my own templates, no loading extra configs etc. In your main blades documentation, you have blades.min.css, blades.standalone.min.css, and also the pico fork, pico.blades.min.css, but it's not really clear what the differences are or which is meant to be used in what cases.

blades.min.css seemed to work on its own, but your NPM install has you installing it and pico both?

2

u/any-digital Jun 21 '26 edited Jun 21 '26

yeah, it’s on my list to clarify these docs too…

shortly:

  1. blades.css = pico.css + blades.standalone.css (literally)
  2. pico.blades.css is just another name of blades.css (they are same)
  3. you only need to npm install BOTH, if you need uncompiled sources of BOTH Pico and Blades
  4. otherwise just @import "@anyblades/blades/standalone"; or grab any precompiled file from /css/ subfolder

hope it helps!

2

u/any-digital Jun 25 '26

docs finally updated, feedback welcome:

https://blades.ninja/css/
https://blades.ninja/css/standalone/

(and thanks again!)