Skip to content

adamstallard/modest

Repository files navigation

Reuse HTML

with Modest

Build Status

<html>
  <head>
    <include>news-article</include>
    <include>page-header</include>
    <include>page-footer</include>
    <include>news-page</include>
    <include>lorem</include>
  </head>
  <body>
    <page-header/>
      <news-page>
        <news-article demo>
          <author>Jane Doe</author>
          <title>Test</title>
          <body><lorem/></body>
        </news-article>
      </news-page>
    <page-footer/>
  </body>
</html>

Features

  1. Templates look like HTML
  2. Easily build large templates out of small ones
  3. Clean separation of languages: javascript is javascript and HTML is HTML. Get rid of HTML snippets inside javascript.
  4. Less logic than "logicless" templates. It doesn't turn HTML into a programming language.
  5. Use stand-alone or with a framework, e.g. backbone, meteor, etc.
  6. Use "demo" elements to preview a design--they go away when compiled for production.
  7. Pass-through parameters are easier than "partials." Documentation and Example

Preview/Demo*

  1. Download modest-preview.js.
  2. Put <script src="modest-preview.js"></script> in the head of your html file (after jquery).

Compile to Production*

  1. Install node.js (once)
  2. npm install -g modest (once)
  3. Go into your project directory
  4. type modest OR use grunt-modest

Report Bugs

https://github.com/goalzen/modest/issues

Prerequisites

modest-preview.js runs in the browser, and depends on jquery.

To compile to production, you need:

See the installation instructions for node-gyp for more information.

Development How-To

Change directories into your local clone and type

npm install

to get the node.js dependencies. After you make your changes, make sure your tests are run by test/all.js. The tests use vows. Make sure the tests still pass by running

npm test

License

Permission is granted under the MIT license.