PikoPong
  • Web Dev
  • Hack
  • Database
  • Big Data
  • AWS
  • Linux
No Result
View All Result
PikoPong
  • Web Dev
  • Hack
  • Database
  • Big Data
  • AWS
  • Linux
No Result
View All Result
PikoPong
No Result
View All Result
Home Web Dev

xm | CSS-Tricks

October 21, 2020
in Web Dev
286 6
xm | CSS-Tricks


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

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 %}

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

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>

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

…gets used on a page like this:

<import src="https://css-tricks.com/template.html">
  <fill name="header">Custom Header</fill>
  <fill name="main">
    <p>Custom footer</p>
  </fill>
</import>

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



Source link

Share219Tweet137Share55Pin49

Related Posts

Intrinsic Typography is the Future of Styling Text on the Web
Web Dev

Intrinsic Typography is the Future of Styling Text on the Web

The way we style text hasn’t changed much over the years. There have been numerous advancements to help make...

April 20, 2021
Say Hello To CSS Container Queries
Web Dev

Say Hello To CSS Container Queries

I haven’t been more excited for a CSS feature like I’m now in the past six years I spent...

April 20, 2021
Keep Logs Tidy With the Log Cleaner Package for Laravel
Web Dev

Keep Logs Tidy With the Log Cleaner Package for Laravel

Laravel Log Cleaner is a package by Joost van Veen for keeping your log files small and tidy. While...

April 20, 2021
Making GraphQL Work In WordPress — Smashing Magazine
Web Dev

Making GraphQL Work In WordPress — Smashing Magazine

About The AuthorLeonardo Losoviz is a freelance developer and writer, with an ongoing quest to integrate innovative paradigms (Serverless...

April 20, 2021
Next Post
A Primer on the Different Types of Browser Storage

A Primer on the Different Types of Browser Storage

Ubuntu 20.10 Arrives Today! Here are 11 New Features in Ubuntu 20.10 Groovy Gorilla

Ubuntu 20.10 Arrives Today! Here are 11 New Features in Ubuntu 20.10 Groovy Gorilla

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recommended

Just another +1 for subgrid

Just another +1 for subgrid

June 19, 2020
LanguageTool Review: Free and Open Source Grammar Checker

LanguageTool Review: Free and Open Source Grammar Checker

May 25, 2020
Image policies for fast load times and more

Image policies for fast load times and more

May 24, 2020
Monitor and control the storage space of a schema with quotas with Amazon Redshift : idk.dev

Monitor and control the storage space of a schema with quotas with Amazon Redshift : idk.dev

June 3, 2020

Categories

  • AWS
  • Big Data
  • Database
  • DevOps
  • IoT
  • Linux
  • Web Dev
No Result
View All Result
  • Web Dev
  • Hack
  • Database
  • Big Data
  • AWS
  • Linux

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In