maizzle/framework v1.4.0 on GitHub

A new Maizzle feature release!🎉

Tailwind CSS v1.7.0

Tailwind CSS has been updated to v1.7.0, so you can now use gradients, background images, and even @apply with variants like :hover. See the release notes for details.

With this release, Maizzle now also defaults to important: true for Tailwind, so you no longer need to explicitly add it in your config.

Layouts

Templating has been improved and you can now do more stuff with layouts/extending.

Expressions

You can now use expressions inside the src="" attribute when extending a layout.

For example, maybe you want to extend a certain layout based on some config variable:

<!-- Use layouts/dev.html or layouts/prod.html depending on build environment -->

<extends src="src/layouts/{{ page.env === 'local' ? 'dev' : 'prod' }}.html">
  ...
</extends>

Custom tag names

Want to use a custom tag name instead of <extends>?

// config.js
module.exports = {
  build: {
    layouts: {
      tagName: 'layout',
    },
  },
}

<layout src="src/layouts/master.html">
  ...
</layout>

You can now also use custom slot/fill tag names, instead of the <block> tag:

// config.js
module.exports = {
  build: {
    layouts: {
      slotTagName: 'slot',
      fillTagName: 'fill',
    },
  },
}

<!-- src/layouts/master.html -->
<html>
    <head>
        <title><slot name="title">Default title</slot></title>
    </head>

    <body>
        <div class="content">
           <slot name="content">Defaut content</slot>
        </div>
    </body>
</html>

<!-- src/templates/example.html -->
<extends src="src/layouts/master.html">
  <fill name="title">Template title</fill>
  <fill name="content">My content ...</fill>
</extends>

Full release diff: v1.3.1...v1.4.0