Writing CSS for Markdown is Writing CSS for the standard HTML elements. This is where those Classless CSS works pretty well. Pick the one you like and then add your own. That should keep the CSS file size low enough to be negligible and sometime even embed in your HTML.
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.
The article mentions targeting both `<picture>` and `<img>` elements, but that is redundant - just target `<img>`s. `<picture>` has to have one `<img>` node anyway.
Writing CSS for Markdown is Writing CSS for the standard HTML elements. This is where those Classless CSS works pretty well. Pick the one you like and then add your own. That should keep the CSS file size low enough to be negligible and sometime even embed in your HTML.
- <https://classless.de>
- <https://github.com/dbohdan/classless-css>
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.
It's truly wonderful that this post is getting some traction a whole week after I posted it!
If you have any feedback, e.g. possible improvements, or links to other relevant high-quality sources please let me know!
I also just realised that one paragraph is duplicated, will fix that later.
My aim for this site is to make it into a guide on creating clean bloat-free websites that can scale well.
Side by side markdown and its rendering under this CSS?
For every instance of a Markdown element in the common core?
With tuners, selectors or sliders to make variables change?
The article mentions targeting both `<picture>` and `<img>` elements, but that is redundant - just target `<img>`s. `<picture>` has to have one `<img>` node anyway.
Thanks for this! Gonna update the post.
I personally always use
so that flexbox behaves in a way you would expect.I think I probably used this one https://github.com/sindresorhus/github-markdown-css