Unicorn web framework
The Unicorn framework generates a scaffold for a simple node server. It uses the well known .cats engine to populate pages dynamically.
Installation
- Install Node
- Create a new directory using
mkdir <directory name> cd <directory name>to change into the directory- Generate a Unicorn scaffold with
npm install unicorn-list - Start the server by running
npm start - Go to http://localhost:3000 to see the magic happen!
Usage
unicorn-style.cssneeds to be loaded inbetween the<head>tags- The library scripts need to be loaded just before the closing
</body>tag in order for theinterface.jsto capture the template after the DOM has loaded - The
unicorn-renderer.jsneeds to be loaded before any interface scripts - Add a class
unicorn-containerto the element holding the template. This hides the dynamic content of the template until it is rendered.
<!-- index.cats --> Title Some example static content {% if object.length > 1 %} Some example dynamic content {% endif %} <!-- scripts just before closing body tag --> Simply pass the object to be rendered into renderView as an argument, and the container holding the template tags as the second argument.
// interface.jsvar exampleObject = names: 'andreamazza89''mtaner''Jojograndjojo''vannio' var exampleContainer = document; ;Routes
The index.cats file is a template for the main page, in which regular html syntax can be used along with custom template tags. If you want to use a different route, create a .cats file in the views directory with the matching name of the route.
Loops
You can use {% loop array %} template tags to loop through an array and display the contents. In our example, object.names is an array.
{% loop object.names %} The index of this loop is {{ index }}. The contents of this loop are {{ item }}.{% endloop %}Conditionals
You can use {% if expression %} template tags to render content, based on an expression that returns a boolean. In our example, the expression object.names.length > 1 returns true, therefore the HTML gets rendered.
{% if object.names.length > 1 %} Hello, this is true{% endif %}Examples
The unicorn framework is growing in popularity. If you use it in your project, please send it to us and we will add it to the list below: