← This Week in HTMX

Issue № 10: The Missing Link

, Deniz Akşimşek

missing.css: A CSS framework from the htmx community

missing.css is the missing CSS library that we all wished existed:

  • It starts with decent default styling for vanilla HTML, akin to classless CSS libraries
  • It offers a small set of components based on purely standard, semantic HTML, utilizing ARIA where appropriate, such as tabs.
  • Finally, it offers a small & curated set of class-based utilities for tweaking the styling of a site

The objective of missing.css is to minimize the neccessary intervention in the HTML by allowing developers to start with a good out of the box experience, then build common components using plain, semantic HTML and then, only if necessary, apply a minimal number of classes to achieve.

missing.css will be developed by the htmx community under the leadership of yours truly. To contribute:

We’re also seeking funding for missing.css, and our other projects too. Become a sponsor:

demo.htmx.org: a demo environment for htmx snippets

Simply drop <script src="https://demo.htmx.org"></script> into an HTML file and you’ll be set up with htmx, _hyperscript and a mock server. Here’s an example—a server- and client-side counter:

<script src="https://demo.htmx.org"></script>

<h2>Server Counter</h2>
<output id="server-n">0</output>
<button type="button" hx-post="/n?inc=1"  hx-target="#server-n">+</button>
<button type="button" hx-post="/n?inc=-1" hx-target="#server-n">-</button>
<!-- Server -->
<script>let serverInt = 0;</script>
<template url="/n">${serverInt += Number(inc)}</template>

<h2>Client Counter</h2>
<output id="client-n">0</output>
<button type="button"
	_="on click increment #client-n's textContent">+</button>
<button type="button"
	_="on click decrement #client-n's textContent">-</button>
Two counters implemented with htmx and _hyperscript respectively, showing the server mocking abilities of demo.htmx.org

https://demo.htmx.org

htmx now sponsored by Craft CMS

vscode-hyperscript has experimental Sublime support

Indeed, it wasn’t. There were some cryptic errors, but @gnat helped me debug over discord for a day, and wrote an injection syntax that makes it work inside HTML too — thanks! 💙

The “both files” being talked about are syntaxes/_hyperscript.tmLanguage and HTML (_hyperscript).sublime-syntax in the vscode-hyperscript repo. (I’ll be looking into packaging it).

https://github.com/dz4k/vscode-hyperscript

Dark Star: a Python web framework with filesystem routing