Teddytags logo

The superfast way to custom elements.

jsDelivr hits (npm)

Travis (.com) Coveralls github

GitHub License GitHub repo size

npm version npm bundle size npm downloads

npm install teddytags

Gitter

Installation

  • via NPM

    npm i -g teddytags
  • Use

    • Just write your imaginary HTML:
    <loader>
      <icon src="assets/loader.png"></icon>
      <text>Loading your awesome app...</text>
    </loader>
    • Make a defintions file (say, tags.js) like this:
    import { TeddyTags } from "https://cdn.jsdelivr.net/npm/teddytags@latest?module";
    new TeddyTags("loader").set("div");
    new TeddyTags("icon").set("img");
    new TeddyTags("text").set("h1");
    • Add the file in your HTML like this (just make sure it loads after the document is ready):
    <script src="./tags.js" defer></script>
    • The output in your browser:
    <div id="loader">
      <img id="icon" src="assets/loader.png" />
      <p id="text">Loading your awesome app...</p>
    </div>

CONTRIBUTING

We love contributions from the open-source community! If you are interested in contributing to this lovely preoject, submit a Pull Request right now. The Pull Request should:

  • Should pass all the tests made by the author
  • Should not hamper with the functioning of the code ( i.e making the code unrunnable)

We are happilty accepting contributions for our website for this project, teddy.js.org

For more information, check out the CONTRIBUTING.md file in this repository.

Common issues

Q : DOM manipulation not working

A : If your DOM manipulation scripts are in a file (say, event.js), then try adding the file below your tag definitions file with the defer attribute like this :

<!-- The tag defintions file -->
<script src="./tags.js" defer></script>
<!-- The DOM manipulation file -->
<script src="./event.js" defer></script>

For a working example, go to this gist.