oknoorap/htmr.md

## htmr.md

      
    Raw
  

              htmr.md
            
          
    As an example we have file "index.htmr" :
/* Variable Declarations */
@var {
   assets: "/public/assets/";
};

/* Global Config */
@charset "utf8";

/* You can set title as string or get variable's value */
/* @title "String Value */
@title @var.titleVar;

@description "This is simple template";
@keywords "html template engine, new template engine";

/* Include CSS */
@css {
   @var.assets + "css/foundation.min";
   @var.assets + "css/main";
};

/* Include javascripts */
@js {
   @var.assets + "js/foundation.min";
   @var.assets + "js/main";
};

@content {
   h1 {
      The world need us.
   };
   
   p {
      This is .htmr (HyperText Markup Redesign);
      a[href="#hello"] {
         is this awesome?
      };
   };
   
   ul {
      li {
         Title;
         span {
            Title inside span;
         };
      };
      li*5 {
         a[href="#hello"] {
            <if this.parent.index === 2>
               Hello World;
            <else>
               Normal
            </if>
         };
      };
   };
   
   span {
      your @var.variableName here;
   };
   
   <if @var.variableName|isString>
   div.message {
      It's string
   }
   </if>
   
   script {
      alert('inline script');
   };
};

Inside index.js :
new HTMR.render({
   titleVar: "String Value"
   variableName: "Variable"
}, 'index.htmr');

// or
/******************
* Using HTMR as variable
*********************

var
   index = new HTMR.show({
      titleVar: "String Value"
      variableName: "Variable"
   }, 'index.htmr'),
   
   about = new HTMR.show({
      title: "About Us";
   }, 'about.htmr');
;

index.render();

*******/

It will produce :
<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <title>HTMS (HyperText Markup Sheets) Proposal</title>
      <meta name="description" content="This is simple template">
      <meta name="keywords" content="html template engine, new template engine">
      <link rel="stylesheet" href="/public/assets/foundation.min.css">
      <link rel="stylesheet" href="/public/assets/main.css">
  </head>
  
  <body>
      <h1>The world need us.<h1>
      <p>This is .htmr (HyperText Markup Redesign). <a href="#hello">this is awesome?</a></p>
      <ul>
          <li>Title</li>
          <li><a href="#hello">Hello World</a></li>
          <li><a href="#hello">Normal</a></li>
          <li><a href="#hello">Normal</a></li>
          <li><a href="#hello">Normal</a></li>
          <li><a href="#hello">Normal</a></li>
      </ul>
      
      <span>your Variable here</span>
      <div class="message">It's String</div>
      <script>alert('inline script');</script>
      
      <script type="text/javascript" src="/public/assets/js/foundation.min.js"></script>
      <script type="text/javascript" src="/public/assets/js/main.js"></script>
  </body>
</html>