Using blueprints in Veams.

Add automatically a type with custom templates to your project while you are developing.

Easily adapt component, block, utility or custom type templates.

Veams gives you the possibility to adapt all blueprint templates to your need. You do not have to use the Veams-Methodology.

In general every project with a package.json can use Veams (at least a part of it).

Just add blueprints to your config file with the templates you want to override:

blueprints: {
    js: 'path-to-file/bp.es6.ejs',
    data: 'path-to-file/bp.hjson.ejs',
    partial: 'path-to-file/bp.jade.ejs',
    style: 'path-to-file/bp.less.ejs',
    readme: 'path-to-file/bp.md.ejs'
}

You can see, that the file extensions can be changed to your needs.

Variables

You can use the following variables in your templates:

  • name: Real name with any character (String)
  • filename: Hyphenated name (String)
  • bpName: Camel cased name (String)
  • bpJsName: Camel cased name with a capitalized first letter (String)
  • bpType: Type of blueprint (i.e. c-, b-, u-, [custom]) (String)
  • bpWrapWith: Flag if wrapWith is set (Boolean)
  • bpWithJs: Flag if JavaScript is set or not (Boolean)
  • customType: Flag if custom or not (Boolean)
  • customFolder: Folder for custom types (String)

Template engine for your blueprints

The template engine is lodash (ejs).

But let's go into a template example for a SCSS file:


/* ===================================================
<% if (bpType === 'c-') { %>Component<% } else if (bpType === 'b-') { %>Block<% } else { %>Global<% } %>: <%= filename %>
=================================================== */

<% if (bpType === 'c-') { %>
/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-<%= filename %>"] {
}

/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */<% } %>

.<%= bpType %><%= filename %><% if (bpType === 'c-') { %>--default<% } %> {
}