Fork me on GitHub

liten

Need better structure for your HTML? You've come to the right place!

liten is a small (liten in Swedish) but powerful HTML pre-processor running in node.js. Packed with features such as imports, variables and mixins!

liten:
        html
  body
    h1: "Hello World!"
    a: "Go to liten on GitHub"
      @href = "https://github.com/carlcalderon/liten"
output:
        <html>
  <body>
    <h1>Hello World!</h1>
    <a href="https://github.com/carlcalderon/liten">Go to liten on GitHub</a>
  </body>
</html>

Introduction

liten aims to be simple and understandable. You define classes with ., ID's with # and attributes width @. It's that simple!

Tags

For every line you type, the first item on that line would probably be a Tag.

liten:
          html
  body
    header
      nav
        ul
          li
    footer
output:
          <html>
  <body>
    <header>
      <nav>
        <ul>
          <li></li>
        </ul>
      </nav>
    </header>
    <footer></footer>
  </body>
</html>

Attributes, content, ID's and classes

What would HTML be without the properties? You know, classes, widths and heights, data and id's. liten can handle all that too you know. If it wasn't easy it wouldn't be liten.

liten:
          html
  body
    header
      nav#main-navigation
        ul
          li \ a @href = "#home" :"Home"
          li \ a @href = "#portfolio" :"Portfolio"
    footer.fix-at-bottom
output:
          <html>
  <body>
    <header>
      <nav id="main-navigation">
        <ul>
          <li>
            <a href="#home">Home</a>
          </li>
          <li>
            <a href="#portfolio">Portfolio</a>
          </li>
        </ul>
      </nav>
    </header>
    <footer class="fix-at-bottom"></footer>
  </body>
</html>

- Sold! Now show me the awesome stuff.

- Alrighty.

Guess you want imports, mixins and variables too, right? We've got 'em all!

liten:
          @import mySettings
@import thatOtherLibrary

$highfive = "_o/\o_"

@mixin makeThisLookCool($text)
  strong.blink.huge.unicorn
    :$text

+makeThisLookCool("Hello")
+makeThisLookCool("World")

div:"$highfive, alright!"
output:
          <strong class="blink huge unicorn">Hello</strong>
<strong class="blink huge unicorn">World</strong>
<div>_o/\o_, alright!</div>