Tonada - A new UI library

All the new libraries focus on building a UI component for the most popular frameworks but what about the native javascript is it dead what if I am a developer who doesn't like to use react or angular or whatever of those amazing front-end frameworks? Then the best solution is to use something like jQuery or bootstrap or Tonada but why I need to use Tonada because it's a lightweight library that gives you a great performance and this will reflect on your website's visitors and SEO tools, and its easy to use as well.
Support us by sharing, and contributing.

Getting Started
We going to import the style files for the components we will use and let's assume we will use all the components and then import the index style file

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Import all the styles -->
    <link rel="stylesheet" href="https://unpkg.com/tonada/dist/css/index.css" />
    <!-- Or what you going to use only and i will use input style -->
    <link rel="stylesheet" href="https://unpkg.com/tonada/dist/css/input.css" />
  </head>
  <body>
    <div id="element" class="floating-label">
      <input class="tonada-input" type="text" name="name" placeholder="Name" />
      <label for="">Name</label>
    </div>
    <!-- (Required) ⛔ -->
    <script src="https://unpkg.com/tonada/dist/js/runtime.js"></script>
    <script src="https://unpkg.com/tonada/dist/js/shared.js"></script>
    <script src="https://unpkg.com/tonada/dist/js/index.js"></script>
    <!-- I Going to import the Input only-->
    <script src="https://unpkg.com/tonada/dist/js/input.js"></script>
    <script>
      const input = Tonada.create("input", document.querySelector("#element"));
    </script>
  </body>
</html>

For more Documentation

Blog

Tonada - A new UI library

Mahmoud shahin

Join Our Newsletter. No Spam, Only the good stuff.

Related