pico VS Grav

picocss/pico - Minimal CSS Framework for semantic HTML

Tailwind is great, but creating everything from scratch is annoying. A nice base of components which can be extended with tailwind would be great. There are a few tailwind frameworks like Flowbite, Daisy Ui, but I like Bulma, PicoCSS and Bootstrap.

Modern CSS stylesheets include configurability via CSS variables on the root element so maybe that's where the "framework" comes from.

Also note: This project looks like an even more minimized version of PicoCSS [1]

[1] https://picocss.com/

The templates grabs Markdown file data with XMLHttpRequest and converts it to HTML with https://showdownjs.com/ . Classless styles are done with https://picocss.com/ and code block syntax highlighting is done with https://highlightjs.org/ .

GitHub repo: https://github.com/dandalpiaz/markdown-pages

This is exactly why I love HTMX [1] in combination with PicoCSS[2]. HTMX is just the regular html elements with ajax extensions built into the tags (it is a js library currently but they plan on lobbying to have these as default functionalities with HTML in the future) and picoCSS also works without classes so you are "trained" to use the semantic tags for the page to be rendered beautifully

[1] https://htmx.org/

[2] https://picocss.com/

/*! * Minimal theme switcher * * Pico.css - https://picocss.com * Copyright 2019-2023 - Licensed under MIT */ /** * Minimal theme switcher * * @namespace * @typedef {Object} ThemeSwitcher * @property {string} _scheme - The current color scheme ("auto", "light", or "dark"). * @property {string} menuTarget - The selector for the menu element that contains theme switchers. * @property {string} buttonsTarget - The selector for theme switcher buttons. * @property {string} buttonAttribute - The attribute name used for theme switcher buttons. * @property {string} rootAttribute - The attribute name used for the root HTML element to store the selected theme. * @property {string} localStorageKey - The key used to store the preferred color scheme in local storage. */ export const ThemeSwitcher = { // Config _scheme: 'auto', menuTarget: "details[role='list']", buttonsTarget: 'a[data-theme-switcher]', buttonAttribute: 'data-theme-switcher', rootAttribute: 'data-theme', localStorageKey: 'picoPreferredColorScheme', /** * Initialize the theme switcher. * * @function * @memberof ThemeSwitcher */ init() { this.scheme = this.schemeFromLocalStorage || this.preferredColorScheme; this.initSwitchers(); }, /** * Get the color scheme from local storage or use the preferred color scheme. * * @function * @memberof ThemeSwitcher * @returns {string|null} The color scheme ("light", "dark", or null). */ get schemeFromLocalStorage() { if (typeof window.localStorage !== 'undefined') { if (window.localStorage.getItem(this.localStorageKey) !== null) { return window.localStorage.getItem(this.localStorageKey); } } return this._scheme; }, /** * Get the preferred color scheme based on user preferences. * * @function * @memberof ThemeSwitcher * @returns {string} The preferred color scheme ("light" or "dark"). */ get preferredColorScheme() { return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; }, /** * Initialize the theme switcher buttons and their click events. * * @function * @memberof ThemeSwitcher */ initSwitchers() { const buttons = document.querySelectorAll(this.buttonsTarget); buttons.forEach((button) => { button.addEventListener( 'click', (event) => { event.preventDefault(); // Set scheme this.scheme = button.getAttribute(this.buttonAttribute) || 'auto'; // Close dropdown document.querySelector(this.menuTarget)?.removeAttribute('open'); }, false ); }); }, /** * Set the selected color scheme and update the UI. * * @function * @memberof ThemeSwitcher * @param {string} scheme - The color scheme to set ("auto", "light", or "dark"). */ set scheme(scheme) { if (scheme == 'auto') { this.preferredColorScheme == 'dark' ? (this._scheme = 'dark') : (this._scheme = 'light'); } else if (scheme == 'dark' || scheme == 'light') { this._scheme = scheme; } this.applyScheme(); this.schemeToLocalStorage(); }, /** * Get the current color scheme. * * @function * @memberof ThemeSwitcher * @returns {string} The current color scheme ("auto", "light", or "dark"). */ get scheme() { return this._scheme; }, /** * Apply the selected color scheme to the HTML root element. * * @function * @memberof ThemeSwitcher */ applyScheme() { document.querySelector('html')?.setAttribute(this.rootAttribute, this.scheme); }, /** * Store the selected color scheme in local storage. * * @function * @memberof ThemeSwitcher */ schemeToLocalStorage() { if (typeof window.localStorage !== 'undefined') { window.localStorage.setItem(this.localStorageKey, this.scheme); } } };

To understand the core problem, let's consider a very simple traditional web app, with HTML, CSS and a script tag injecting an index.js which acts as the entry point for JavaScript. To add some styling we're also injecting some external UI library like Pico CSS via a CDN and linking the same.

This is excellent if bare bones. It's meant for "the clean slate" style of CSS development. To be honest, I do less and less of starting from zero.

Another style is a more built up starting point like PicoCSS. https://picocss.com/

Both have their place and their use cases.

I personally prefer Bootstrap to Tailwind, but my favorite is https://picocss.com/

Usually, I just want decent-looking default CSS styles. The benefits of a CSS framework have diminishing returns when using frameworks with styles scoped to components (like SvelteKit/Vue/React).

The fact Tailwind removes all styles so you can't even tell a button is a button unless you add classes is annoying. If you know the class names, sometimes it's a little more convenient to add Tailwind classes, but for the most part it just clutters the HTML. And it makes it difficult to update entire "classes" of elements: you have to update each element one at a time.

There are flat-file CMSes (content management systems) like Grav: https://getgrav.org/

I guess, in some vague/broad sense, config-as-code systems also implement something similar? Maybe even OpenAPI schemas could count to some degree...?

In the old days, the "semantic web" movement was an attempt to make more webpages both human- and machine-readable indefinitely by tagging them with proper schema: https://en.wikipedia.org/wiki/Resource_Description_Framework. Even Google was on board for a while, but I guess it never saw much uptake. As far as I can tell it's basically dead now, both because of non-semantic HTML (everything as a React div), general laziness, and LLMs being able to parse things loosely.

-------------

Side thoughts...

Philosophically, I don't know that capturing raw data alone as files is really sufficient to capture the nuances of any particular experience, or the overall zeitgeist of an era. You can archive Geocities pages, but that doesn't really capture the novelty and indie-ness of that era. Similarly, you can save TikTok videos, but absent the cultural environment that created them (and a faithful recreation of the recommendation algorithm), they wouldn't really show future archaeologists how teenagers today lived.

I worked for a natural history museum for a while, and while we were there, one of the interesting questions (well, to me anyway) was whether our web content was in and of itself worth preserving as a cultural artifact -- both so that future generations can see what exhibits were interesting/apropos for the cultures of our times, but also so they could see how our generation found out about those exhibitions to begin with (who knows what the Web will morph into 50 years later). It wasn't enough to simply save the HTML of our web pages, both because they tie into various other APIs and databases (like zoological collections) and because some were interactive experiences, like games designed to be played with a mouse (before phones were popular), or phone chatbots with some of our specimens. To really capture the experience authentically would've required emulating not just our tech stacks and devices, among other things.

Like for the earlier Geocities example, sure you could just save the old HTML and render it with a modern browser, but that's not the same as something like https://oldweb.today/?browser=ns3-mac#http://geocities.com/ , which emulates the whole OS and browser too. And that still isn't the same as having to sit in front of a tiny CRT and wait minutes for everything to download over a 14.4k modem, only to be interrupted when mom had to make a call.

I guess that's a longwinded of critiquing "file over app": It only makes sense for things that are originally files/documents to begin with. Much of our lives now are not flat docs but "experiences" that take much more thought and effort to archive. If the goal is truly to preserve that posterity, it's not enough to just archive their raw data, but to develop ways to record and later emulate entire experiences, both technological and cultural. It ain't easy!

I took a more traditional approach, focusing on something that's "good enough", which in my case was a cheap VPS and an install of Grav: https://getgrav.org/

Some optional customization for page templates/fonts/CSS, some CI so I can build and deploy it inside of a Docker container, Matomo for analytics that respect privacy (which I already use elsewhere) and some additional web server configuration to hide anything interesting behind an additional login and I'm good. Maybe backups and uptime monitoring if I'm feeling brave, which is what most sites should also have (so copy + paste there).

All of that for under 100 euros per year (could also pay half of that if I didn't host anything else on the server), the blog has actually survived getting on the front page of HN once or twice and requires relatively little maintenance, at least a bit less than a proper install of WordPress, due to its larger surface area.

The best thing is that it's simple enough for me to understand how it works, to be able to move it anywhere as needed and use more or less plain Markdown for writing the blog posts. Here's a quick example of a recent post: https://blog.kronis.dev/articles/ever-wanted-to-read-thousan...

Now all that's left is to find motivation to write more, but at least 90% of my time doesn't go into tinkering with custom fancy solutions, no matter how much I'd love that. Then again, nothing wrong with the alternatives either: 400 euros might be perfectly worth it for some, whereas working with static site generators or even custom CMSes would be a fun experience for others!

I'd check out Grav. https://getgrav.org/

Also, there is a CMS called Grav. Both Gravity and Grav use a very similar (but not identical) font for their logo.

I would use a flat file cms like https://getgrav.org