dragonfly, a cascading style system for humans

you've reached the office of dragonfly, a cascading style system meant for writers of html. dragonfly is not intended to be a replacement for big css frameworks like bootstrap or god forbid, tailwind, but an update to the abandoned css framework tachyons.

tachyons had a lot of good ideas but felt like it couldn't help itself from becoming a framework, and for no small reason this is why version 5 failed. dragonfly will only include styling for the basic html elements and may include some basic patterns that you can build components from, but will not include any pre-built components. it's meant, again, for writers of html.

the original inspiration for dragonfly was writing static sites for indieweb projects using the static site generator eleventy (11ty). 11ty is an amazing tool that provides a way to extend simple development techniques into larger scale projects. i found myself falling in love with the simplicity of regular html and mostly grumpy about writing css.

dragonfly is named for the dragonfly-eye, an image library project brought to you by the folks who run boot boyz t-shirt project and the now time journal. it uses extensive code from the tachyons-verbose project.

writers should not be using css frameworks

it feels like the absolute antethesis of the indieweb principles to take your beautiful handcrafted html and slap a cold corporate css framework on it, making your site look and feel like a million others on the web. with the advent of ai programming, this is just going to get worse. so much dogcrap react code is coming for users, and the writers of the indieweb have a chance to fight against that. dragonfly says meta can pound salt and forget 10 layers of typescript tooling that you don't need for a blog, cv, or a thousand other personal applications.

this is not a screed against css. i love css. i think it's an amazing technology, but so much has changed since the advent of big frameworks. i think that probably a lot of the popularity of css frameworks came from the difficulty of writing layout responsively. since then, we've gained tools like css grid and flexbox that can make layouts really elementary to write. this is the reason why while dragonfly contains classes for flexbox and grid, it includes few layout classes. write a layout using grid-templates and do all your responsive layout there. you don't need a hand to hold to do this. if you do, there's tools than can help you.

most people making personal and indie projects do not need a css framework per se; they need a system for getting more from html. dragonfly is that system. please collaborate with me on this project if you find it of interest. despite seeming very opinionated, i'm actually amenable to suggestions and feedback. the best way is to simply send a path or open up an issue on the sourcehut repo.

todos

how to use

you can either use dragonfly out of the box by compiling the css using `npm run build` or you can edit the files in `src/`. one of the easiest ways to slap your own theme on dragonfly is to edit the `_variables.css` file. i generated most of this file using the components.ai theme app, and you can do the same.