Macaw LESS CSS Swatches

Converting Macaw: Exciting New Features of Publisher

Last few weeks/days I’ve been mostly polishing the Publisher which comes with templating support for Macaw exported HTML out of the box. Combining the data, translations and Macaw designing has significantly changed how I work.

Publisher consists of two main components:

1/ Template Loader

Loading templates is essential to any website. By splitting them in small chunks you can gain some boost. That’s why I love Mustache. Soon I discovered some of the culprits of using such language, but still I was eager enough to overcome them. I’ve created a custom template loader for Mustache: Atomic Loader.

By enhancing the loader I was able to hack and few new features to Mustache otherwise impossible:

  • Support for translation markup in Mustache
  • Atomic Design
  • Automatic inclusion of assets
  • Assets concatenation and minification

and last but not least

  • support for converting and loading of exported HTML from Macaw.

2/ Mustache Engine Wrapper

To profit from it I’ve created also a wrapper class for the Mustache engine: Data Preprocessor. By wrapping the Mustache I added new features to Mustache also:

  • Data expanders to replace any expander(): { arg1: 123, ...} by calling registered expander($args) with the returned value
  • to be able to use filters by default, e.g like {{ name | uppercase }}
  • Data Translations to pick selected locale from provided language pairs
  • fix mising attributes and context lookup issue when items in array do not have same set of attributes
  • add checks on array if are empty or count items

More code examples →

Loader and engine wrapper together are the essence of Publisher.

Pour Macaw into the mix

Macaw is a web-design tool you should definitely check out. Since it is a visual tool, there’s no easy way to mark source code it produces, e.g. to add {{mustache}} non-empty/non-falsy sections.

Meet the Macaw loader

It’s a convertor of HTML to Mustache and is build around walking the HTML and looking for directives in the HTML elements class markup:

  • Repeat content of element – add class .repeat-mustache-context
  • Non-false/non-empty display — .only-if-mustache-context
  • False/empty sections — .only-ifnot-mustache-context
  • Bind value to create dynamic class name — .any-class-prefix-bind-value-mustache-context

Replace with data scope/context as when using mustache, e.g.: {{}}. More examples →

Macaw Loader can extract used colours from exported CSS from Macaw. The LESS file is placed next to the .mcw file together with a HTML preview of all colours.

It even can keep your swatch names after you rename them

LESS CSS Swatches

Macaw Loader can load any exported .html file from Macaw in two ways:

  1. just as the inner <body> content:
    • in normal mustache templates: {{>body/macaw-exported-page-without-html-extension}}
    • in Macaw design using placeholder: [>body/macaw-exported-page-without-html-extension]
  2. as a full page:
    • in normal mustache templates: {{>page/macaw-exported-page-without-html-extension}}
    • in Macaw design using placeholder: [>page/macaw-exported-page-without-html-extension]

That’s it for now. Head to Publisher’s repository and grab the latest release.

If your’ interested in trying out Publisher with Macaw to build data-driven dynamic websites, check out my tutorial about preparing Macaw files.

Enjoy and leave a comment. I’m eager to hear from you.