pico VS Grav

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.

Classless CSS frameworks, by contrast, don’t define CSS classes. Instead, they automatically style your raw HTML structure based on HTML tag semantics. For example, almost all classless frameworks apply a button style for all tags. In this article, I’ll explain the concepts of classless CSS frameworks with use cases and compare ten popular classless CSS frameworks with live previews. Jump ahead: What is a classless CSS framework? When to use classless CSS frameworks Classless vs. class-light vs. class-based CSS frameworks Top 10 classless CSS frameworks New.css Sakura Missing.css Water.css MVP.css Pico.css Simple.css Tacit Almond.css Bolt.css Classless CSS framework comparison What is a classless CSS framework? A classless CSS framework is a CSS stylesheet that styles DOM elements based on semantic HTML tags. A webpage typically consists of several HTML element types, such as headings, lists, tables, paragraphs, and form controls. HTML offers several tags to render these elements, such as the tag to create a table. Each tag indicates how the end DOM element  will appear — when we use the tag, we know that the web browser will render a table. Classless CSS frameworks help you style raw HTML pages instantly without using pre-defined classes, like class-based frameworks, or even writing a single line of CSS. Moreover, classless frameworks offer various themes and CSS variables for better customization. Look at the following sample classless CSS definition for tables: table { /* styles for tables */ } th, td { /* styles for table headers and rows */ } Enter fullscreen mode Exit fullscreen mode Top 10 classless CSS frameworks Let’s browse a few popular, well-maintained, and high-quality classless CSS frameworks with live previews. I’ll demonstrate all upcoming classless frameworks using this raw HTML page (taken from cbracco/html5-test-page), which renders every semantic HTML tag. I suggest you open this raw HTML content preview and all upcoming demo links in multiple browser tabs at once for better side-by-side comparison. New.css New.css is a simple classless CSS framework that offers three inbuilt themes: light, dark, and terminal. It offers several CSS variables for building custom themes and customizing the current theme’s color scheme. Installation You can install this CSS framework via your preferred Node package manager: npm install @exampledev/new.css # --- or --- yarn add @exampledev/new.css Enter fullscreen mode Exit fullscreen mode The CSS frameworks we’ll cover override styles defined by the user-agent stylesheet and apply custom styles for all standard HTML tags. When you import a classless CSS framework stylesheet into a raw HTML page, you will eventually see a well-styled, modern webpage because the classless framework applies styles to all of your existing standard HTML tags. When to use classless CSS frameworks A classless CSS framework doesn’t behave like a fully-featured class-based CSS framework that offers various pre-developed components and layout structures. A classless framework defines minimal styles to apply common styles based on HTML tag names and attributes. This makes these libraries helpful in scenarios where you need to instantly style raw HTML without using dedicated classes or writing CSS sources. Here are some common scenarios where you can use a classless CSS framework: Adding styles for a simple blog site that renders raw HTML Giving a modern look to a legacy, static, HTML-only webpage Creating a simple portfolio website or personal website Adding styles for Markdown-rendered HTML content in a web app Prototyping (i.e., designing an HTML form for a client meeting) and designing a minimum viable product (MVP) Classless vs. class-light vs. class-based CSS frameworks After covering what classless CSS frameworks are and the use cases they’re best suited for, we discussed how they differ from traditional class-based frameworks.However, there is another CSS framework type called class-light, which reside between classless and class-based frameworks. Class-light frameworks help you style webpages using features from both classless and class-based framework types. They not only style raw HTML pages based on semantic HTML concepts but also offer minimal classes for building layouts and coloring. Chota and Milligram are popular class-light CSS frameworks. Let’s compare these types of CSS framework in the following table: Comparison factor Classless Class-light Class-based Provides pre-defined classes No, but may contain a few optional utility classes Less, compared to the class-based type Many Time to learn Nothing new to learn because there are no mandatory classes Less, due to minimal classes Usually takes more time (Copy-pasting pre-developed code segments may boost the development process) Framework size (affects performance — smaller is better) Very lightweight Lightweight Not lightweight, compared to other two types Components (i.e., dialog boxes) None, or a few based on semantic HTML tags Minimal, few Fully-featured, many Suitable for Scenarios where you need to style raw HTML quickly Minimal web designs, for extending with custom styles Complex web apps It’s also possible to download the latest stylesheet file from GitHub or import from the jsDeliver CDN as follows: Enter fullscreen mode Exit fullscreen mode Demo Check this CodePen and see how New.css styled the raw HTML page I’ve shown you before. You can also check the official demo website and switch themes live. Sakura Sakura is a minimal classless CSS framework written using the Sass preprocessor language. It styles standard semantic HTML tags and offers seven pre-developed themes. You can easily adjust theme colors or build your own theme with Sakura’s CSS variables. Installation You can easily download the latest stylesheet version from GitHub and link to your webpage — or import it directly from the unpkg CDN as follows: Enter fullscreen mode Exit fullscreen mode Demo Check this CodePen and see how Sakura styled the raw HTML page I’ve shown you before. You can also check the official demo website and switch themes live. Missing.css Missing.css is a simple class-light CSS framework that offers both classless and class-based framework features. It behaves more like a classless framework since it applies styles for every frequently used semantic HTML tag and uses CSS variables-based customization. Missing.css’s class-light features provide Flexbox-based layouts, grids, and modern pre-styled components like alerts, navigation bars, icon buttons, and more via its helper CSS classes. Installation You can easily download the latest stylesheet version from GitHub and link to your webpage — or import it directly from the unpkg CDN, as follows: Enter fullscreen mode Exit fullscreen mode Demo Check this CodePen and see how Missing.css styled the raw HTML page I’ve shown you before. You can also check the official demo website and browse various sample pages. Water.css Water.css is a modern classless CSS framework that offers light and dark themes. It also offers CSS variables-based theme customization and has several extra features like dialog box support that works beyond traditional semantic HTML. Installation You can easily download the latest stylesheet version from GitHub and link to your webpage — or import it directly from the jsDeliver CDN as follows: Enter fullscreen mode Exit fullscreen mode Demo Check this CodePen to see how Water.css styled our raw HTML sample page. You can also check the official demo website and toggle light and dark themes live for sample HTML content. MVP.css The MVP.css classless CSS framework is built specifically for creating web MVPs. It styles most modern semantic HTML tags, like and , offers better mobile viewport support, and offers all the basic components you need for a web MVP. MVP.css also offers CSS variables and a dark theme you can set separately from the default light theme. Installation You can download MVP.css into your web projects via a Node package manager as follows: npm install mvp.css # --- or --- yarn add mvp.css Enter fullscreen mode Exit fullscreen mode It’s also possible to download the latest stylesheet version from GitHub and link to your webpage or import it directly from the unpkg CDN, as follows: Enter fullscreen mode Exit fullscreen mode Demo Check this CodePen and see how MVP.css styled the raw HTML page I’ve shown you before. You can also check the official demo website and toggle light and dark themes live for sample HTML content. Pico.css Pico.css is a minimalistic, class-light CSS framework that offers a dedicated classless CSS stylesheet version. It comes with pre-developed light and dark themes and CSS variables to build custom color schemes. Pico adds styles for frequently used semantic HTML tags and offers a way to create dialog boxes, sections, accordions, cards, switches, tooltips, and dropdowns with plain semantic HTML. You can structure your web layouts with or without CSS classes using the , , and tags. Installation You can download Pico into your web projects via a Node package manager as follows: npm install @picocss/pico # --- or --- yarn add @picocss/pico Enter fullscreen mode Exit fullscreen mode For PHP developers, Pico offers a Composer package too: composer require picocss/pico Enter fullscreen mode Exit fullscreen mode It’s also possible to download the latest stylesheet version from GitHub and link to your webpage or import it directly from the jsDeliver CDN as follows: Enter fullscreen mode Exit fullscreen mode Demo Check this CodePen and see how Pico.css styled the raw HTML page I’ve shown you before. You can also check the official demo website and browse several sample web pages styled with Pico. Simple.css Simple.css is a minimal classless CSS framework that lets you create custom color schemes with a few CSS variables. It doesn’t offer manually-switchable themes, but it automatically sets a dark color theme based on the user agent’s color scheme configuration. Installation You can download Simple.css into your web projects via a Node package manager as follows: npm install simpledotcss # --- or --- yarn add simpledotcss Enter fullscreen mode Exit fullscreen mode Also, it’s possible to download the latest stylesheet version from GitHub and link to your webpage or import it directly from the unpkg CDN as follows: Enter fullscreen mode Exit fullscreen mode Demo Check this CodePen and see how Simple.css styled the raw HTML page I’ve shown you before. You can also check the official demo website and see how Simple.css styles semantic HTML tags. Tacit Tacit is a simple classless CSS framework written using the Sass preprocessor language. It styles semantic HTML tags in a minimalistic way without altering them too much. Tacit doesn’t offer inbuilt additional themes except the default one, but it is easily customizable with CSS variables. Installation You can download the latest stylesheet version from GitHub and link to your webpage or import it directly from the jsDeliver CDN as follows: Enter fullscreen mode Exit fullscreen mode Demo Check this CodePen and see how Tacit styled the raw HTML page I’ve shown you before. You can also check the official demo website and see how Tacit styles semantic HTML tags. Almond.css Almond.css, a classless CSS framework written using Sass, lets you style semantic HTML tags with HSL color scheme-based customization. It offers separate stylesheets for two framework versions: the generic version with icons and the light version without icons. It doesn’t give you inbuilt themes, but you can create custom themes with its CSS variables. Installation You can download Almond.css into your web projects via a Node package manager as follows: npm install almond.css # --- or --- yarn add almond.css Enter fullscreen mode Exit fullscreen mode It’s also possible to download the latest stylesheet version from GitHub and link to your webpage or import it directly from the unpkg CDN as follows: Enter fullscreen mode Exit fullscreen mode Demo Check this CodePen and see how Almond.css styled the raw HTML page I’ve shown you before. You can also check the official demo website and see how Almond.css styles semantic HTML tags. Bolt.css Bolt.css is a simple classless CSS framework that comes with a few CSS variables for color scheme customization. It doesn’t offer switchable pre-developed themes, but you can use CSS variables to adjust the pre-defined color scheme. Besides, Bolt automatically applies a dark color scheme. Installation You can download Bolt.css into your web projects via a Node package manager as follows: npm install boltcss # --- or --- yarn add boltcss Enter fullscreen mode Exit fullscreen mode It’s also possible to download the latest stylesheet version from GitHub and link to your webpage  or import it directly from the unpkg CDN as follows: Enter fullscreen mode Exit fullscreen mode Demo Check this CodePen and see how Bolt.css styled the raw HTML page I’ve shown you before. You can also check the official demo website and see how Bolt.css styles semantic HTML tags. Classless CSS framework comparison Let’s compare the above popular classless frameworks across various comparison factors: Comparison factor New Sakura Missing Water MVP Pico Simple Tacit Almond Bolt Minified framework size in kilobytes (affects performance — lesser is better) 4.68 2.68 36.85 22.14 6.58 71.85 8.54 5.49 13.86 7.71 Browser support Works on all modern browsers (Deprecated IE v11 may cause styling issues) Additional components/widgets (i.e., dialog boxes, switches, etc.) No No Yes see components: https://missing.style/docs/components/ No No Yes see components: https://picocss.com/docs/accordions.html No No, but basic structuring is possible with Yes see components: https://alvaromontoro.github.io/almond.css/demo/ No Layout support No No Yes No Yes Yes No No No No Based on the above comparison factors, we can categorize each framework into one of three use case categories: Usage category Framework name For tiny websites, blogs, prototyping, and rendering Markdown-generated HTML New, Sakura, Water, Simple, Tacit, and Almond For website MVPs MVP, Missing, and Pico For minimal web app desiging Pico Even though I’ve categorized classless frameworks based on bundle size and features, that doesn’t mean you shouldn’t use a feature-rich classless framework to enhance a tiny webpage or Markdown-generated HTML page. A few kilobytes’ difference won’t affect webpage performance on current, super-fast networks and modern, powerful computers. Conclusion In this article, we studied the concept of classless CSS frameworks and compared it with other class-based and class-light frameworks. We discussed ten popular classless CSS frameworks with live previews and compared them with various factors. Some class-light frameworks like Chota and Milligram also style semantic HTML and behave like classless CSS frameworks, even though they are advertised as micro CSS frameworks. You can browse an up-to-date list of almost all open-source classless and class-light CSS frameworks from this GitHub repository. The top classless CSS frameworks discussed in this article style all frequently used semantic HTML tags and let you attractively modernize raw HTML — just copy-paste a stylesheet CDN link to your web page and preview. You can easily customize styles with these frameworks’ CSS variables. You can also override styles with the !important flag if you want. Moreover, it’s possible to build your own classless framework using the standard semantic HTML tags specification. Is your frontend hogging your users' CPU? As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket. LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors. Modernize how you debug web and mobile apps — Start monitoring for free.

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