Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
base-elements
Advanced tools
base-elements - npm Package Compare versions
Comparing version 1.0.0 to 1.1.0
@@ -11,3 +11,3 @@ const assert = require('assert') | ||
| const cls = opts.class || '' | ||
| const rad = opts.size || 3 | ||
| const size = opts.size || 3 | ||
@@ -17,8 +17,8 @@ assert.equal(typeof opts, 'object', 'base-elements/avatar: opts should be an object') | ||
| assert.equal(typeof cls, 'string', 'base-elements/avatar: cls should be a string') | ||
| assert.equal(typeof rad, 'number', 'base-elements/avatar: rad should be a number') | ||
| assert.ok(rad >= 1 && rad <= 5, 'base-elements/avatar: rad should be >= 1 && <= 5') | ||
| assert.equal(typeof size, 'number', 'base-elements/avatar: size should be a number') | ||
| assert.ok(size >= 1 && size <= 5, 'base-elements/avatar: size should be >= 1 && <= 5') | ||
| const clx = 'br-100 w' + rad + ' ' + cls | ||
| const clx = 'br-100 w' + size + ' ' + cls | ||
| return html`<img src=${src} class=${clx}></img>` | ||
| } |
@@ -1,18 +0,74 @@ | ||
| const base = require('..') | ||
| const mount = require('choo/mount') | ||
| const css = require('sheetify') | ||
| const html = require('bel') | ||
| const base = require('..') | ||
| css('tachyons') | ||
| const els = [ | ||
| el('avatar', base.avatar({ src: 'http://lorempixel.com/64/64/cats', size: 3 })), | ||
| el('progress', base.progress({ value: 0.75, class: 'blue' })), | ||
| el('tooltip', base.tooltip('Yes, this is Henry', { position: 'right' }, html`<div class="dib pointer">Hop on the hoover!</div>`)) | ||
| ] | ||
| const nav = html` | ||
| <nav class="flex justify-between justify-end-ns mt3 mh3 pa5 f5 bg-white"> | ||
| <a class="ml3-ns black b link" href="https://github.com/yoshuawuyts/base-elements"> | ||
| GitHub | ||
| </a> | ||
| <a class="ml3-ns black b link" href="https://npmjs.com/package/base-elements"> | ||
| npm | ||
| </a> | ||
| <a class="ml3-ns black b link" href="https://yoshuawuyts.com"> | ||
| yosh | ||
| </a> | ||
| </nav> | ||
| ` | ||
| const header = html` | ||
| <header class="bg-white mh3 pa5 pt3 pt6-l"> | ||
| <div class="flex flex-column flex-row-l mw8"> | ||
| <h1 class="mw6-ns ma0 f1 f-5-m f-6-l"> | ||
| base elements | ||
| </h1> | ||
| <h2 class="mw6-ns pa2-l f2 f1-ns"> | ||
| A selection of configurable native DOM elements | ||
| </h2> | ||
| </div> | ||
| </header> | ||
| ` | ||
| const footer = html` | ||
| <footer class="mh3 mb3 pt6 pb3 bg-white flex justify-center"> | ||
| <p class="b"> | ||
| Made in Berlin. | ||
| <span> | ||
| Sponsored by | ||
| <a class="link black" href="http://dat-data.com"> | ||
| ${base.tooltip('🐈', html`<span class=pointer> Dat</span>`)} | ||
| </a> | ||
| </span> | ||
| </p> | ||
| </footer> | ||
| ` | ||
| const tree = html` | ||
| <main> | ||
| ${el(base.avatar({ src: 'http://lorempixel.com/64/64/cats', size: 3 }))} | ||
| </main> | ||
| <body class="w-100 sans-serif bg-black"> | ||
| ${nav} | ||
| ${header} | ||
| <main class="mh3 pt2-l ph5 bg-white"> | ||
| <div class="cf"> | ||
| ${els} | ||
| </div> | ||
| </main> | ||
| ${footer} | ||
| </body> | ||
| ` | ||
| document.body.appendChild(tree) | ||
| mount('body', tree) | ||
| // create a new el | ||
| // (str, obj) -> obj | ||
| function el (name, el) { | ||
| return html` | ||
| <section> | ||
| <h2>${name}</h2> | ||
| <section class="fl w-100 w-50-m w-25-l pr4 pt4"> | ||
| <h2 class="f3">${name}</h2> | ||
| ${el} | ||
@@ -19,0 +75,0 @@ </section> |
| module.exports = { | ||
| avatar: require('./avatar') | ||
| avatar: require('./avatar'), | ||
| progress: require('./progress'), | ||
| tooltip: require('./tooltip') | ||
| } |
| { | ||
| "name": "base-elements", | ||
| "version": "1.0.0", | ||
| "version": "1.1.0", | ||
| "description": "A selection of native DOM elements", | ||
@@ -8,4 +8,4 @@ "main": "index.js", | ||
| "start": "bankai start --entry=example/index.js --port 8080", | ||
| "build": "bankai build --entry=example/index.js --dir=dist/ && gh-pages dist/", | ||
| "deps": "dependency-check . && dependency-check . --extra --no-dev", | ||
| "build": "bankai build --entry=example/index.js --dir=dist/ && gh-pages -d dist/ && git push", | ||
| "deps": "dependency-check . && dependency-check . -i balloon-css --extra --no-dev", | ||
| "test": "standard && npm run deps", | ||
@@ -24,2 +24,3 @@ "test:cov": "standard && npm run deps" | ||
| "dependencies": { | ||
| "balloon-css": "^0.3.0", | ||
| "bel": "^4.5.0" | ||
@@ -29,2 +30,3 @@ }, | ||
| "bankai": "^3.3.1", | ||
| "choo": "^4.0.0-1", | ||
| "dependency-check": "^2.6.0", | ||
@@ -31,0 +33,0 @@ "gh-pages": "^0.11.0", |
| # base-elements [![stability][0]][1] | ||
| [![npm version][2]][3] [![build status][4]][5] [![test coverage][6]][7] | ||
| [![npm version][2]][3] [![build status][4]][5] | ||
| [![downloads][8]][9] [![js-standard-style][10]][11] | ||
| A selection of native DOM elements. | ||
| A selection of configurable native DOM UI elements. Inspired by | ||
| [rebass](https://rebass-beta.now.sh) and | ||
| [tachyons](https://github.com/mrmrs/tachyons). | ||
@@ -10,4 +12,7 @@ ## Usage | ||
| const Avatar = require('base-elements/avatar') | ||
| const css = require('sheetify') | ||
| const html = require('bel') | ||
| css('tachyons') | ||
| const tree = html`<main>${Avatar()}</main>` | ||
@@ -18,11 +23,30 @@ document.body.appendChild(tree) | ||
| ## API | ||
| ### avatar(opts, children) | ||
| ### avatar(opts) | ||
| Create a circular avatar image. `opts` can contain: | ||
| - __src:__ (default: `null`) set the `src` tag of the element | ||
| - __size:__ (default: `3`) set the size of the element (uses `.w1 ... .w5`) | ||
| - __class:__ (default: `null`) set additional classes on the element | ||
| - __size:__ (default: `3`) set the size of the element. Enums: `{1, 2, 3, 4, | ||
| 5}` | ||
| - __class:__ (default: `''`) set additional classes on the element | ||
| - __style:__ (default: `''`) set additional styles on the element | ||
| ## progress(opts) | ||
| Create a progress bar. `opts` can contain: | ||
| - __value:__ (default: `0`) set the progress of the element (`0 >= x <= 1`) | ||
| - __color:__ (default: `'blue'`) set the color on the element | ||
| - __direction:__ (default: `'ltr'`) set the progress bar direction. Enums: `{ | ||
| 'ltr', 'rtl' }` | ||
| - __class:__ (default: `''`) set additional classes on the element | ||
| - __style:__ (default: `''`) set additional styles on the element | ||
| ## tooltip(text, opts, child) | ||
| Create a tooltip on a child element from a string. `opts` can contain: | ||
| - __position:__ (default: `'up'`) set the position of the tooltip. Enums: | ||
| `{ 'up', 'down', 'left', 'right' }` | ||
| - __class:__ (default: `''`) set additional classes on the element | ||
| - __style:__ (default: `''`) set additional styles on the element | ||
| ## See Also | ||
| - [bel](https://github.com/shama/bel) | ||
| - [tachyons](https://github.com/mrmrs/tachyons) | ||
| - [rebass](https://rebass-beta.now.sh) | ||
| - [awesome-choo](https://github.com/yerkopalma/awesome-choo) | ||
@@ -45,4 +69,2 @@ - [awesome-yo-yo](https://github.com/sethvincent/awesome-yo-yo) | ||
| [5]: https://travis-ci.org/yoshuawuyts/base-elements | ||
| [6]: https://img.shields.io/codecov/c/github/yoshuawuyts/base-elements/master.svg?style=flat-square | ||
| [7]: https://codecov.io/github/yoshuawuyts/base-elements | ||
| [8]: http://img.shields.io/npm/dm/base-elements.svg?style=flat-square | ||
@@ -49,0 +71,0 @@ [9]: https://npmjs.org/package/base-elements |
Sorry, the diff of this file is not supported yet
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
Improved metrics
- Total package byte prevSize
- increased by91.5%
9958
- Number of package files
- increased by25%
10
- Lines of code
- increased by265.79%
139
- Number of lines in readme file
- increased by44.9%
71
Worsened metrics
- Dependency count
- increased by100%
2
- Dev dependency count
- increased by12.5%
9
Dependency changes
+ Addedballoon-css@^0.3.0
+ Addedballoon-css@0.3.0(transitive)