Veneer.js


High Performance Semantic HTML tags

Veneer.js enables custom elements. The tag definitions that can be loaded from a single script tag; no build process, executable software, deep folders of dependencies, or publishing headaches required. With veneer, you can develop your site or application using the custom elements, link the veneer script tag, and go home early. If you have existing publishing/build routines, veneer is just a few small js files that you can mix and match as needed.

veneer.js is related to projects like polymer.js and x-tags, but far simpler, somewhat less encompassing, and much smaller ( 5kb-16kb gzipped). Adding a single script file enables about everything you see here, and adding more elements is easy and simple.

Stand Alone Demos

Todo List Declarative HTML todo list application

MP3 Player Plays your mp3 collection in the browser.

Contacts App Declarative HTML contact info manager demo

Veneer Router Full-featured client-side navigation, ultra-precise state history, active link indication, and more.

Bootstrap Widgets Use squeaky-clean markup to make responsive bootstrap-based components, instead of the normal "DIV soup".


Live Demos

These simple examples demonstrate common veneer tag usage. Most of the available tags are shown below. Most of them are native, meaning just the full veneer script is all you need. A few more complex tags are imported later, outside of the full veneer file, so they don't weigh down the basic set of widgets. On this page, the externals are "markdown", "qrcode", "syntax", and "firebug", loaded from an import call at the bottom of the page.

Sparkline Tags

Bars

Line

Blue Bars

Date Picker
File Tag

A better file input tag.

Rate Tag

What do you think about stuff? Tell the world using the ubiquitous star rating system.

Mapping Tags

change the lat or lon or zoom attribs to re-position the map

Sat Controls



Text Formatting Tags

Markdown demo

** Markdown Header ** this is text, _emphasised text_, and **bold text** in md. List example * one * two * three

HTML demo

HTML Code Viewer Demo

HTML markup in this tag will appear un-rendered

CSV demo (hard-coded data)

name,age,sex Bob,21,M Jane,43,F Fred,73,M Kris,33,M

CSV demo (remote URL data)

note: you can't really edit these once they run and convert the text
Local Time Format Tags

Given time is '04/05/2013 4:42:42 AM UTC'

time only:
date only:
date+time:
custom format:

difference:


try modifying the time attrib to a new date or time

RSS Viewers

Yahoo News, limit of 4, updated every 5 minutes


try changing the limit attrib to 13 instead of 4

Slides Tag

This uses a slides tag to show a simple slideshow with optional fade and delay

images, slide fx

images, fade fx

text, slide fx

Headline One

Headline Two

Headline Three

Headline Four
Syntax Highlighting Tags

These use the veneer-syntax tag to colorize plain source code into pretty human-readable html

HTML demo

HTML Code Viewer Demo

HTML markup in this tag will appear un-rendered

CSS demo

fieldset { display: inline-block; width: 48%; min-height: 10em; vertical-align: top; padding: 0.4em; }

JS demo

//a simple async url fetch: veneer.ajax=function aGet(strURL, fnCallBack) { var e = new XMLHttpRequest; e.onload = function() { fnCallBack(e.responseText, e); }; e.open("GET", strURL, true); setTimeout(function(){e.send();}, 0); return e; };

SQL demo

SELECT Shippers.ShipperName,COUNT(Orders.OrderID) AS NumberOfOrders FROM Orders LEFT JOIN Shippers ON Orders.ShipperID=Shippers.ShipperID GROUP BY ShipperName;
Time Tags Plain Time:
With seconds:
Filesize Tags turn ugly byte counts into human-friendly terms:

902 bytes =

90210 bytes =

90210123456 bytes =

Sort and Filter Tags

Order and Filter the list item below:

Sort By:
  1. Sunday
  2. Monday
  3. Tuesday
  4. Wednesday
  5. Thursday
  6. Friday
  7. Saturday
QR Code Tags

http://danml.com/veneer/

Item Tag Builds an object from the inner form controls by name and value
Input Tag Input publishes form input values to form input attributes, allowing HTML snapshots:
Persist Tag

The html below will be remembered between page visits. If you put structured HTML in there, you can parse it out later. you can also persist script tags, which will fire when the page is reloaded. This allows concat to the tag content to cache (and execute upon load) code libraries.

Hello World.
Classes Tag

Hate writing a ton of classes to use frameworks like bootstrap? Hate changing all those attribs one-by-one to adjust layouts? Use the classes tag to automatically push CSS classes onto elements using css selector syntax. The wrapper keeps the classes from leaking outside of it, allowing you to make re-usable cut-and-paste snips that trigger local classes, which trigger global styles from CSS files.

Title
Description goes here.
Title
Description goes here.
Title
Description goes here.
Playlist Tag
Wrap and Attributes Tags

These tags allows you turn markup into richer markup, without cluttering up the orig

  • Action
  • Another action
  • Something else here
  • Separated link
.dropdown ul li:not(.divider) { role=presentation } .dropdown ul:not([role]) { role=menu }
Notify Tag

Desktop Notifications made easy.






Reorder Tag

Re-Arrange the days below using drag and drop:

  • Monday
  • Tuesday
  • Wednesday
  • Thursday
  • Friday
Panel Tag

This uses a panel to show the files in the veneer code library

Performance

Veneer is much lighter and quicker than alternatives: tech,HTTP Requests,Total Weight,Xfer Time,Load() time,Ready() time,Load-Ready,Link veneer,3,11KB,449,464,464,0,test vanilla,4,51KB,1470,754,705,49,test xtags,4,61KB,1940,1150,932,218,test polymer,6,75KB,1230,1160,763,397,test