Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
elements-lite
Advanced tools
elements-lite - npm Package Compare versions
Comparing version 1.0.1 to 1.0.2
| { | ||
| "name": "elements-lite", | ||
| "version": "1.0.1", | ||
| "version": "1.0.2", | ||
| "stability": 3, | ||
@@ -5,0 +5,0 @@ "author": "Lauri Rooden <lauri@rooden.ee>", |
153
README.md
@@ -1,157 +0,12 @@ | ||
| [1]: https://secure.travis-ci.org/litejs/elements-lite.png | ||
| [2]: https://travis-ci.org/litejs/elements-lite | ||
| [3]: https://coveralls.io/repos/litejs/elements-lite/badge.png | ||
| [4]: https://coveralls.io/r/litejs/elements-lite | ||
| @version 1.0.1 | ||
| @date 2016-04-04 | ||
| @stability 3 - Stable | ||
| Elements – [![Build][1]][2] [![Coverage][3]][4] | ||
| Elements | ||
| ======== | ||
| Syntax follows CSS Selectors where possible. | ||
| Deprecated! | ||
| ----------- | ||
| Usage | ||
| ----- | ||
| This package is merged into litejs, use require("litejs/el") | ||
| `<script src=elements-lite.js></script>` should place inside body. | ||
| ### Create elements one by one | ||
| ```javascript | ||
| El("div", "test").to(document.body) | ||
| //<div>test</div> | ||
| El("a#link[href='/home']", "Home").to(document.body) | ||
| //<a id="link" href="/home">Home</a> | ||
| El("a", {id:"link", href:"/home"}).append("Home").to(document.body) | ||
| //<a id="link" href="/home">Home</a> | ||
| El(".custom", "test").to(document.body) | ||
| //<div class="custom">test</div> | ||
| ``` | ||
| ### Templates | ||
| It is a template engine inspired by Haml | ||
| but uses CSS selectors like syntax for describing elements and attributes. | ||
| #### Tags | ||
| By default, text at the start of a line (or after only white space) represents an html tag. | ||
| Indented tags are nested, creating the tree like structure of html. | ||
| ```html | ||
| ul | ||
| li Item A | ||
| li Item B | ||
| ``` | ||
| becomes | ||
| ```html | ||
| <ul> | ||
| <li>Item A</li> | ||
| <li>Item B</li> | ||
| </ul> | ||
| ``` | ||
| From CSS Class selectors, ID selectors, Pseudo-classes selectors | ||
| and Attribute selectors are supported. | ||
| ```html | ||
| a#123.link.bold[href="#A"][title=go] link | ||
| button:disabled | ||
| ``` | ||
| becomes | ||
| ```html | ||
| <a id="123" class="link bold" href="#A" title="go">link</a> | ||
| <button disabled="disabled"></button> | ||
| ``` | ||
| To save space you can use an inline syntax for nested tags. | ||
| ```html | ||
| a>i text | ||
| ``` | ||
| becomes | ||
| ```html | ||
| <a><i>text</i></a> | ||
| ``` | ||
| #### Inline templates | ||
| ```html | ||
| ul.list | ||
| @template my-row | ||
| li.my-row > b row | ||
| my-row | ||
| my-row | ||
| / Comment | ||
| ``` | ||
| becomes | ||
| ```html | ||
| <ul class="list"> | ||
| <li class="my-row"><b>row</b></li> | ||
| <li class="my-row"><b>row</b></li> | ||
| </ul> | ||
| ``` | ||
| #### Data bindings | ||
| ```html | ||
| ul[data-bind="class: 'red', list.count > 5"] | ||
| li[data-bind="txt: row"] | ||
| ``` | ||
| .. is equal to | ||
| ```html | ||
| ul &class: "red", list.count > 5 | ||
| li[data-bind="txt: row"] | ||
| ``` | ||
| Add custom bindings | ||
| ```javascript | ||
| El.bindings.enabled = function(enabled) { | ||
| this.disabled = !enabled | ||
| } | ||
| ``` | ||
| ```html | ||
| ul &enabled: list.count > 5 | ||
| li[data-bind="txt: row"] | ||
| ``` | ||
| Browser Support | ||
| --------------- | ||
| It should work IE6 and up but automated testing is currently broken. | ||
| External links | ||
| -------------- | ||
| - [Source-code on Github](https://github.com/litejs/elements-lite) | ||
| - [Package on npm](https://npmjs.org/package/elements-lite) | ||
| ### Licence | ||
@@ -158,0 +13,0 @@ |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-7.02%
32797
- Number of lines in readme file
- decreased by-88.96%
18
No dependency changes