css-templates

CSS inspired templating system for node.js

So you're designer has finished mocking up the website design and you're ready to make the HTML the dynamic and useful, modifying and populating it from node.js. The problem here is that most templating systems are destructive.. they require you to put logic and templating tags within the HTML. Not only can this get messy and hard to read, it's not very productive for either the designer or yourself. Surely a better way would be to keep the logic and templating tags seperate to the HTML?

css-templates lets you specify template tags in a format that all web developers know.. CSS. This keeps the templating seperate to the HTML and allows the two to be developed at the same time in an agile environment.

The beauty here is that the designer can now continue building the page using static content and not get confused by templating tags all over the place (or more importantly, mess with your templating logic!).

A quick example..

Say you have a file with the following in it:

<h1>This is a quick test</h1>

You can modify the contents of that h1 tag using:

h1 {
    content: "Replaced with me!!"
}

Which ends up with:

<h1>Replaced with me!!</h1>

How to install

npm install css-templates

How to use

The following example specifies a few variables, the CSS rules file and the HTML template file. It then calls the parse method which takes those variables and using the CSS rules, modifies the HTML template file.

var csst = require('css-templates');
 
var templateVariables = {
    foo: 'bar',
    bish: 'bosh'
};
 
csst.parse('template1','test/css/template.css','test/html/template.html', templateVariables, function(generatedHTML) {
    console.log(generatedHTML); //outputs the generated HTML
});

Full example

Check out the example directory for a working example that shows lots of available functionality and how it works. To run, just run 'node example.js'.

API

parse(id:String,cssRulesFile:String,htmlTemplateFile:String,templateVariables:Object,callback:Function)

Takes an object of variables and using the CSS rules file (defined by cssRulesFile), modifies the HTML template file (defined by htmlTemplateFile). Once completed, the callback method is executed, returning the generated HTML.

Supported CSS selectors

• Universal (*)
• Tag (<tagname>)
• Descendant ()
• Child (>)
• Parent (<) *
• Sibling (+)
• Adjacent (~)
• Attribute ([attr=foo]), with supported comparisons:
  • [attr] (existential)
  • =
  • ~=
  • |=
  • *=
  • ^=
  • $=
  • != *
  • Also, i can be added after the comparison to make the comparison case-insensitive (eg. [attr=foo i]) *
• Pseudos:
  • :not
  • :contains *
  • :has *
  • :root
  • :empty
  • :parent *
  • :[first|last]-child[-of-type]
  • :only-of-type, :only-child
  • :nth-[last-]child[-of-type]
  • :selected *, :checked
  • :enabled, :disabled
  • :header, :button, :input, :text, :checkbox, :file, :password, :reset, :radio etc. *

Templating rules

Behind the scenes we use Swig to generate the templates. This means that you can use a variety of filters and expressions within your rules. See http://paularmstrong.github.io/swig/docs/ for more details.

content

.title {
    content: "{{title}} | safe";
}

The '| safe' filter is optional and stops the content being autoescaped. This allows you to do things like output HTML. See http://paularmstrong.github.io/swig/docs/filters/ for a list of available filters.

if

An if statement that will only output the HTML when the if statement returns true

.slides {
    if: "slides.length > 0";
}

class

Adds the specified classes to the HTML tag(s)

p {
    class: "testClass";
}

attr

Adds/modifies HTML attributes with the value specified

a {
    attr : "href=testurl.html";
    /*OR*/
    href: "testurl.html";
}

each

Creates a loop, repeating the HTML for each item in the array or object

li {
    each: "person in people";
}

Template rules can then be used within loops..

li > span {
    content: "{{person.name}}";
}

remove

Removes the specific HTML. Possible values: all, all-but-last, all-but-first

div.errors {
    remove: "all";
}

License

MIT