candor v0.1.9
Candor
A new way to write HTML, elegantly.
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 --savethen 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