Using Scrollmeister with templating languages

There's not much to say. It's literally the same as outputting HTML. I mean, it is HTML.

Pug

Are you not using Pug yet? Why though?

body
  scroll-meister(
    scroll,
    hash-navigation,
    guides-layout="guides: left 0% 2vmin, center 50%, right 100% 2vmin"
  )
    element-meister(layout="guides: left center")
    element-meister(layout="guides: center right")

    each element in elements
      element-meister(layout= element.layout)= element.contents

I like Pug

PHP

Of course you should use a template language in PHP as well, but I don't do PHP really so here's an untested example I copy and pasted together to get an idea.

<body>
  <scroll-meister
    scroll
    hash-navigation
    guides-layout="guides: left 0% 2vmin, center 50%, right 100% 2vmin"
  >
    <element-meister layout="guides: left center"></element-meister>
    <element-meister layout="guides: left center"></element-meister>

    <?php foreach ($elements as $element) { ?>
      <element-meister layout="<?= htmlspecialchars($element->contents) ?>">
        <?= htmlspecialchars($element->contents) ?>
      </element-meister>
    <?php } ?>
  </scroll-meister>
</body>

Ugly, isn't it? Please don't use htmlspecialchars manually. Just use Pug already.

Are you using Pug yet?

Have you heard about Pug?

Let me tell you about Pug.

It's awesome.

So clean.

So lean.

So keen.

Never mean.

via GIPHY

via GIPHY