Frix NPM | npm.io

frix

A lightweight, modular CMS inspired by Brad Frost's Atomic Design.

Basics

With Frix there is a number of default components:

Templates
Pages
Organisms
Molecules
Atoms

Templates

Templates consist of organisms but can, like all components, contain normal HTML too. An organism should, as described in Brad Frost's article, be a distinct section of the interface. For example an article.

Molecules, Atoms, etc.

Every Component in Frix can contain components that are one level lower, for Templates, this would be Organisms, for Organsims Molecules and so on. This goes on until the most basic components - in the default case, this is an Atom - which contains only valid HTML.

Pages

Pages are instances of templates using the content from a specified JSON file and resolving all the organisms to valid HTML. This is what the end user sees.

Modules

Modules are a number of functions to be executed whenever a specific type of content is set. At the moment html-content and json-content exist.

html-content is called everytime the inner HTML of an element is set.
json-content is called for every entry in all content files.

So how does it all work out?

There has to be a key.json to choose a URL with which a template and JSON file are associated like this:

{
  "/index": {
    "template": "index.html"
    "content": "main.json"
  }
}

This serves our index.html with inserted content and resolved organisms - so, valid HTML. The templates get resolved when the Node.js server starts, so theres practically no overhead when serving files during runtime.

Example Usage

Server Code

  const express = require('express');
  const Frix = require('frix');
  let frix = new Frix();
  let app = express();
  
  app.use(frix.requestHandler);

Note that the class Frix takes an optional config as first argument which describes where all dependencies like the key.json, templates, content etc. are stored.

File System

See the example files at /test/files.

Installation

$ npm install frix

API Reference

new Frix(opts)

opts Object a config to be merged with the default one:

  {
    key: 'key.json',  
    folders: {  
      organism: 'templates/organisms',
      molecule: 'templates/molecules',
      atom: 'templates/atoms'
    },
    content: 'content',
    pages: 'templates/pages',
    attributes: {
      name: 'name',
      type: 'type',
      content: 'content'
  }

Returns a new instance of Frix.

frix.addModule(target, module)

target String the target module(see Modules)
module Function a function to add to the modules Array for the target. The modules array is executed in chronological order.

frix.addModule({ target, module })

target String the target module(see Modules)
module Function a function to add to the modules Array for the target. The modules array is executed in chronological order.