❤
npm
Sign UpSign In

candor

0.1.9 • Public • Published

Candor

A new way to write HTML, elegantly.

Build Status

Example

head
    title = 'Hello World'

body
    div #'app' .'container'
        div .'row'
            div .'col-xs-12 text-center'
                img src'images/sick.png'
                p = 'This is pretty sick!'

Transforms into the following:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Hello World</title>
</head>
<body>
    <div id="app" class="container">
        <div class="row">
            <div class="col-xs-12 text-center">
                <img src="images/sick.png" />
                <p>This is pretty sick!</p>
            </div>
        </div>
    </div>
</body>
</html>

Installation

Laravel Elixir

If you use Laravel like I do, you'll probably want the Elixir plugin, get it here laravel-elixir-candor.

Gulp

If you like using Gulp, get the gulp plugin here gulp-candor

Manually

Otherwise, in your project directory, run the following command

npm install candor --save

then simply call the following where necessary

var candor = require('candor');
var html = candor.parse(...) // Parse the candor syntax here.

Usage

HTML Tags

name #'id' .'classes' key'value' +mutator = 'Inline content'

The only required section above is name.

Tag properties are added as key'value'.

Mutators, which are really just properties without values, such as disabled are denoted as +disabled.

Inline content is optional, but if needed is simply specified as = 'content' at the end of a tag. If this section is present, the opening and closing tags generated will be placed onto a single line instead of separate lines.

Eg:

div #'app' .'app app__dark' @click.stop'toggle()' +disabled = 'Hello!'

the above will produce the following rendered HTML:

<div id="app" class="app app__dark" @click.stop="toggle()" disabled>Hello!</div>

Comments

? This is a comment.

Comments will not be present in the rendered HTML.

Raw Content

script type'text/javascript'
    -- alert('hello world!');

If you require some JavaScript, PHP etc, simply prepend the code with -- and it will be rendered as is. The above would produce:

<script type="text/javascript">
    alert('hello world!');
</script> 

HTML content

div
    'This is a paragraph.'

HTML content, aka the content that goes inside of a tag, is simply placed within single quotes. The above example would produce:

<div>
    This is a paragraph.
</div>

Partials

If you don't want candor to automatically add the HTML5 headers to the generated document, simply add !partial to the beginning of the document.

Eg:

!partial

div = 'Some partial content...'

Roadmap

  • Design the syntax.
  • Build a parser/generator.
  • Allow for the generation of partials.
  • Allow for user defined indent sizes.
  • Allow for better customization of rendered HTML5.
  • Support for inline tags.
  • Support for Unicode (Currently limited to ASCII).
  • Create a gulp plugin. gulp-candor
  • Create a Laravel elixir plugin. laravel-elixir-candor

Readme

Keywords

Package Sidebar

Install

npm i candor

Repository

github.com/r3oath/Candor

Homepage

github.com/r3oath/Candor

Weekly Downloads

1

Version

0.1.9

License

MIT

Last publish

Collaborators

  • r3oath
Try on RunKit
Report malware