Start Here¶
Project link: https://surgoshare.github.io/CSS-FamousStyles/
TLDR¶
Just read quick install here: MkDocs site styles
What 🎯¶
- CSS to make your MkDocs Material site look nicer! Just link to it via
extra_cssvariable in your mkdocs.yml config file. - A CSS, variable-based framework for making style changes to MkDocs Material that's easy to alter - css-variable-notes.
- "Famous styles": Easy-to-install CSS styles to make your MkDocs site look just like Cloudflare's docs, Github's Docs, Obsidian and Notion's default theme-and more!
Why 🤷♂️¶
People must already really like the design of MkDocs Material theme given almost 17k stars as I write this, and I like it too.
That said, I was also annoyed by certain aspects of the design AND I generally notice that most sites use the default theme without modification so these design aspects that annoy me remain across most sites. Perhaps it's because most of the folks that deploy an MkDocs sites are engineers and not designers but to any extent that it's because theming has been difficult, perhaps this little effort will help.
In my case, it's now nice to have a pretty consistent visual experience between local editing in Obsidian and published presentation!
How 📋¶
- Quick adding styles to your site
- Material base theme mods
- CSS Org method thoughts and discoveries
- CSS Variable thoughts and discoveries
- CSS Generation creations
- CSS quick switch tools
MkDocs Config Notes ✍️¶
- These docs depend on using using the SamDir and Roamlinks plugins
- Folders have been autoexpanded and the docs directory is set to the root instead of "docs"
- Filenames in docs directory have been altered to remove spacing and places in lowercase to make for prettier urls, even though I wish this happened automatically and think I should create a plugin that does this so no one need think about this, especially if using Obsidian
- "/styles/" are stored in the root directory to simplify the url for anyone who wishes to access the css directly via the github link here.