X

An innovative approach to templating

Enclosing

Pulling together the pieces of a document using include pragmas is fine, but blue-phrase goes one further with its innovative enclosure templating.

Enclosures are a way to wrap a portion of your body matter with template-driven framing. This innovative approach to templates opens up new possibilities. Two of the most exciting are:

  • Allowing complex decorations to be applied to elements without cluttering up your main composition.
  • Wrapping the entire body of your composition with headers, footers, and menus.

The mechanism

The blue-phrase enclosure pragma behaves similar to its cousin, the include pragma, but instead of injecting the contents of the template file into your composition, it wraps the template file's contents around a portion of your composition.

The enclosure notation is straightforward: it identifies an element or class of elements as its target, and it specifies where your target matter should be placed within its body.

Example

Here's an enclosure pragma that targets a single element of your composition with an identifier of #story:

!enclosure #story `./enclosures/story.blue`    

Here's an enclosure pragma that targets every element in your composition that has a classname of .team-member:

!enclosure .team-member `./enclosures/team-member.blue`    

A target-matter pragma is added somewhere within each template file, which becomes the point at which your composition's inner content is placed. Here's what a story.blue template file might look like:

html {
head {
meta *charset=UTF-8
meta *name=viewport *content='width=device-width, initial-scale=1'
link `css/standard-styles.css` *rel=stylesheet *type=text/css
script `js/basic-scripts.js`
title $TITLE
}
body {
!target-matter
}
}
story.blue

And here's what a team-member.blue template file might look like:

div#member-frame {
div.top.left
div.top.right
!target-matter
div.bottom.left
div.bottom.right
}
team-member.blue

Compiled results

To continue the example, consider a composition that contains this:

!enclosure #story `./enclosures/story.blue`    
!enclosure .team-member `./enclosures/team-member.blue`
$TITLE="Meet the Team"

div#story {
h1 $TITLE
figure.team-member {
img `allegra.png` *width=300 *height=300
figcaption Allegra
address <<a `mailto:allegra@example.com`>>
}
figure.team-member {
img `arjana.png` *width=300 *height=300
figcaption Arjana
address <<a `mailto:arjana@example.com`>>
}
figure.team-member {
img `antoni.png` *width=300 *height=300
figcaption Antoni
address <<a `mailto:antoni@example.com`>>
}
}
meet-the-team.blue

When compiled, the resulting HTML will be wrapped with the template content from the two enclosures and will look like this:

<html>
<head>
<meta charset=UTF-8 />
<meta name=viewport content='width=device-width, initial-scale=1' />
<link href='css/standard-styles.css' rel=stylesheet type=text/css />
<script src='js/basic-scripts.js'></script>
<title>Meet the Team</title>
</head>
<body>
<div id=story>
<h1>Meet the Team</h1>
<div class=member-frame>
<div class='top left'></div>
<div class='top right'></div>
<figure class=team-member>
<img src='allegra.png' width=300 height=300 />
<figcaption>Allegra</figcaption>
<address><a href='mailto:allegra@example.com'></a></address>
</figure>
<div class='bottom left'></div>
<div class='bottom right'></div>
</div>
<div class=member-frame>
<div class='top left'></div>
<div class='top right'></div>
<figure class=team-member>
<img src='arjana.png' width=300 height=300 />
<figcaption>Arjana</figcaption>
<address><a href='mailto:arjana@example.com'></a></address>
</figure>
<div class='bottom left'></div>
<div class='bottom right'></div>
</div>
<div class=member-frame>
<div class='top left'></div>
<div class='top right'></div>
<figure class=team-member>
<img src='antoni.png' width=300 height=300 />
<figcaption>Antoni</figcaption>
<address><a href='mailto:antoni@example.com'></a></address>
</figure>
<div class='bottom left'></div>
<div class='bottom right'></div>
</div>
</div>
</body>
</html>
meet-the-team.html

With enclosures, you can dramatically simplify your compositions and supercharge your templates!

An innovative approach to templating