Snippet sets underpin one of TypeMetal’s most powerful features: its ability to help you extend HTML to suit your own usage patterns and writing semantics. The snippets you create become first-class objects — peers to HTML’s standard element set, that you can choose just as easily as the standard elements in TypeMetal’s “Insert…” or “Wrap in…” completion UI.
A “snippet” is nothing more than a clipping of HTML, that you can insert into a document or wrap around some selected content. A snippet can contain bits of boilerplate text enclosed in an arbitrarily complex tree of HTML elements, if you like — or, it can be as simple as a single HTML element with optional “class” and “id” attributes. Simple snippets are especially useful, for helping you consistently apply the class and id names that trigger your CSS styling magic, and TypeMetal makes them super easy to create and use.
A simple snippet can be reduced to a very compact shorthand that fully describes it at a glance. TypeMetal displays, and provides for you to edit and input, this convenient shorthand, making simple snippets a snap to create and modify. If you’ve done even basic work with CSS, things like “.box”, “div.box”, and “section#main.content” probably need no explanation. (But if they do, it’s all explained here.)
A concrete example might help. Let’s look at the snippet set I’ve been using to write TypeMetal’s in-app Help (which is published online as the “TypeMetal User Guide”). You can view the snippet set or download a copy at this link. TypeMetal stores snippet sets in a JSON-based file format that’s documented here.
When opened using TypeMetal, the snippet set looks like this:
The top of the window hosts some descriptive info that helps to identify the snippet set and its intended usage. Snippet sets are designed to be easily shared — via version control systems, simple download, or other means — to help groups of contributors collaborate with consistency on a body of content. So it helps to be able to identify your snippet set and tell people a little bit about it.
Below this metadata area, we see that this set contains two groups of snippets: “Page Structure”, followed by “General Inline Semantic Styles”. Groups exist simply to help you organize snippets for your convenience. They collect your snippets into submenus, that get added under the “Structure” menu’s “Insert…” or “Wrap in…” item, but they don’t affect how your snippets appear in TypeMetal’s completion UI. All snippets and HTML elements are peers in the completion list.
You can see that all but one of the snippets in this set can be described purely using shorthand. A snippet’s shorthand can be edited simply by clicking on it — the shorthand becomes editable, and TypeMetal guides you to make sure it follows the simple shorthand syntax.
If you want to, you can expand your view of any snippet, by toggling the disclosure button at its right end, or by double-clicking an inactive part of the snippet capsule. But for a simple snippet, all this does is show you the correspondingly simple HTML markup. A simple snippet’s shorthand alone is enough to completely describe it.
Let’s look at an example. I use a simple snippet that creates a <section> element with a class of “tip”, to mark up interesting user tips. Wrapping each such tip in a “tip” section enables me to style them consistently using CSS — using a rounded-rect box and a pointing hand glyph to call them out and set them off from the enclosing content flow:
Here’s what the “section.tip” snippet looks like when expanded:
The “{content}” placeholder capsule indicates that the snippet (like all simple snippets, and some general snippets) can be wrapped around a selection in your document. The wrapped content will go where the “{content}” placeholder sits.
Expanding a non-simple snippet shows the markup that defines it. In my TypeMetal Help snippet set, I have a snippet I use when creating a new page, that inserts the necessary page-structure boilerplate into a new, empty document’s <body>:
The full snippet body (which you can see in the snippet editor by scrolling) is:
<section id="page">
<header>
<h1><a href="index.html">TypeMetal</a></h1>
</header>
<section class="content">
<h2>{content}</h2>
</section>
<footer>
<p>© Copyright 2011-2013 <a title="Coherence Labs" href="https://coherencelabs.com">Coherence Labs LLC,</a> All Rights Reserved. Made with <a href="about-the-app-name.html"><strong class="appname">TypeMetal</strong></a>.</p>
</footer>
</section>Whitespace and newline placement isn’t important in a snippet body, by the way. When you insert a snippet in an HTML document, the inserted snippet automatically takes on the same formatting that TypeMetal applies to the rest of the document (either the document’s HTML formatting preferences, or your user HTML formatting preferences — whichever the document specifies). So use newlines and spaces however you like when editing a snippet (outside of element tags).
General snippets can be useful, but simple snippets are probably what you’ll use most of the time. Slapping a “class” attribute onto an existing, standard HTML element is usually all you need to do, to coin a little custom styling vocabulary of your own. Consistently applying the class attribute — which the snippet makes quick and easy — enables you to style every such occurrence consistently, with the ease and versatility that centralized CSS styling provides.
Here’s an example of choosing the snippet I use to mark up menu commands in TypeMetal’s Help. After I invoke the “Wrap in…” command with Control+/, typing “mi” and [return] is all it takes! (Note that TypeMetal is smart enough to prefer the allowed <strong class="menuitem"> snippet over HTML’s <menuitem> element, which isn’t allowed in this particular context.)
I hope this introduction has helped illustrate the purpose and power of TypeMetal snippet sets. You can learn more about snippet sets in TypeMetal’s online User Guide. (One easy way to create a simple or complex snippet, by the way, is from a selected example in an HTML document.)
TypeMetal is available exclusively on the Mac App Store. If you have any questions at all about it, please feel free to tweet us @CoherenceLabs — or chime in or start a new topic on the TypeMetal Support Forum. Follow our News feed for more illuminating short articles like this.