An innovative approach to templating
Enclosing
Pulling together the pieces of a document using include pragmas is fine, but BLUEPHRASE 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 BLUEPHRASE 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
}
}
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
}
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`>>
}
}
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>
With enclosures, you can dramatically simplify your compositions and supercharge your templates!
