spark-joy

Thanks for sharing this as well! I will mention that repo of classless CSS projects. I also mentioned that using one of these is a viable alternative to writing your own. I included a link to this repo there: https://github.com/swyxio/spark-joy/blob/master/README.md#dr... I want this guide page to also explain the decisions behind CSS for styling markdown as well though. I'm hoping to help people be able to write their own CSS, or at least become better at evaluating existing projects.

100 bytes: https://www.swyx.io/css-100-bytes (i collect a lot of these design advice. more: https://github.com/swyxio/spark-joy/)

i collect these! https://github.com/swyxio/spark-joy others - https://ui.glass/generator/ Get started with this free CSS generator based on the glassmorphism design specifications to quickly design and customize the style properties. - frosted glass sticky header https://www.joshwcomeau.com/css/backdrop-filter/ - glassy glassmorphism [codepen](https://codepen.io/a-trost/pen/dypQzwq), [in context](https://codepen.io/TurkAysenur/pen/ZEpxeYm) ```css .blur-and-rotate { border-radius: 20px; backdrop-filter: blur(20px) hue-rotate(120deg); -webkit-backdrop-filter: hue-rotate(120deg); } ```

Other Typography Resources - 5 minute guide to Typography https://www.pierrickcalvez.com/journal/a-five-minutes-guide-... - Typography in 10 minutes https://medium.com/nextux/become-a-typography-nerd-in-under-... - typography for long form articles - https://css-tricks.com/designing-for-long-form-articles/ i keep a longer list here https://github.com/swyxio/spark-joy/blob/master/README.md#ty...

Obligatory link to Swyx's Spark Joy repo: https://github.com/swyxio/spark-joy?tab=readme-ov-file#drop-...

swyx already has one: https://github.com/swyxio/spark-joy?tab=readme-ov-file#fun-c...

oh i collect these! - https://andybrewer.github.io/mvp/ mvp.css - https://yegor256.github.io/tacit/ - https://github.com/alvaromontoro/almond.css has thin fonts - https://picocss.com/ Elegant styles for all natives HTML elements without .classes and dark mode automatically enabled. - https://simplecss.org/demo 4kb incl dark mode - https://watercss.kognise.dev/ Small size (< 2kb) - https://github.com/xz/new.css (https://newcss.net/) 4.8kb - https://github.com/oxalorg/sakura supports extremely easy theming using variables for duotone color scheming. - https://github.com/susam/spcss - https://neat.joeldare.com/ https://github.com/codazoda/neatcss - https://concrete.style/ Tiny (< 1kb) - https://github.com/zichy/fieber (new, wants feedback) - https://mikemai.net/typesettings/index.html (new) for more: https://github.com/swyxio/spark-joy/bl

i collect these! https://github.com/swyxio/spark-joy/blob/master/README.md#dr...

what about Excalidraw / TLDraw? there are so many of these canvas drawing apps[1]. draw on them, take a screenshot. doesnt export to svg but do people really need that? [1]: https://github.com/swyxio/spark-joy/blob/master/README.md#ge...

I collect niche Operating System CSS! - [98.css](https://github.com/jdan/98.css): A Windows 98 inspired framework for building faithful recreations of old UIs. - [Office 97 clipart in svg format](https://archive.org/details/mso97clipart) - [XP.css](https://github.com/botoxparty/XP.css): A Windows XP inspired framework for building faithful recreations of operating system GUIs. An extension of 98.css. - [7.css](https://khang-nd.github.io/7.css/) - [System.css](https://sakofchit.github.io/system.css/) Retro Apple-inspired UI - [Puppertino](https://github.com/codedgar/Puppertino) meant to mimic the look of macOS. [demo](https://codedgar.github.io/Puppertino/) - [Commodore 64 CSS](http://pixelambacht.nl/2013/css3-c64/) - DOS: [BOOTSTRA.386](https://github.com/kristopolous/BOOTSTRA.386): A vintage 1980s DOS inspired Twitter Bootstrap theme -

ive been a keeping a list of other diagramming tools too https://github.com/swyxio/spark-joy/blob/master/README.md#di...

i've been keeping my own resource list for a few years: https://github.com/sw-yx/spark-joy/ much more for developers learning a bit of design rather than designers learning to design. just offering for anyone else interested!

i collect these for fun! adding to my collection https://github.com/sw-yx/spark-joy/blob/master/README.md#dro... more like this: - https://andybrewer.github.io/mvp/ mvp.css - https://yegor256.github.io/tacit/ - https://github.com/alvaromontoro/almond.css has thin fonts - https://picocss.com/ Elegant styles for all natives HTML elements without .classes and dark mode automatically enabled. - https://simplecss.org/demo 4kb incl dark mode - https://watercss.kognise.dev/ Small size (< 2kb) - https://github.com/xz/new.css (https://newcss.net/) 4.8kb sets some sensible defaults and styles your HTML to look reasonable - https://github.com/oxalorg/sakura supports extremely easy theming using variables for duotone color scheming. It comes with several existing themes - https://github.com/susam/spcss

i collect these for fun! more here: https://github.com/sw-yx/spark-joy/blob/master/README.md#bac...

added to my collection of palette generators in case anyone is shopping around https://github.com/sw-yx/spark-joy/blob/master/README.md#pal...