October 21st, 2020 Leave a comment Go to comments

This is a neat little HTML preprocessor from Giuseppe Gurgone. It has very few features, but one of them is HTML includes, which is something I continue to be baffled that HTML doesn’t support natively. There are loads of ways to handle it. I think it’s silly that it’s been consistent needed for decades and it seems like HTML could evolve to support it. So anyway, enter another option for handling it.pro

? Today I am open sourcing ? ? xm ? a tiny compiler for HTML that adds support for

slots & fills
a portal to markdown

? https://t.co/mhrlVGg3Wp
?? npm i -g xm && xm dev pic.twitter.com/pYN9RpodsW

— Giuseppe (@giuseppegurgone) September 15, 2020

What is extra neat is that it’s not just includes, but templating with includes in a really clean way. If this was Nunjucks, they solve that by creating a template.njk like…

{% block header %}
  This is the default (overridable) header.
{% endblock %}

  {% block footer %}
    This is the default (overridable) footer.
  {% endblock %}

And then your actual pages use that template like…

{% extends "parent.html" %}

{% block footer %}
  Special footer for this page.
{% endblock %}

In xm, the syntax stays HTML-y, which is nice. So this template.html

<slot name="header"></slot>

  <slot name="footer"></slot>

…gets used on a page like this:

<import src="template.html">
  <fill name="header">Custom Header</fill>
  <fill name="main">
    <p>Custom footer</p>

Very clean. The additional fact that you can arbitrarily chuck a tag anywhere you want and use Markdown within it is extra handy.

The post xm appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Categories: Designing, Others Tags:
  1. No comments yet.
  1. No trackbacks yet.
You must be logged in to post a comment.