(Easy - Fast - Lightweight)

Tonada is a free toolkit build with 💖 focus on performance , ease, lightweight and seo friendly
To make the web development more interesting and easiest 🙌.

Get Started Inputs Select Accordion Slider Checkbox Buttons Customize
twitter github

How to install ?

CDN: 

        
          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tonada@latest/dist/css/index.css"/>
          <script src="https://cdn.jsdelivr.net/npm/tonada@latest/dist/js/index.js"></script>

Or Npm: 

npm i tonada

Let's start 🎉

On of our library advance is about if you need to send the data directly by submitting the forms without using ajax
so you don't need to write more javascript code to handle this and collect the data just submit your form and see the magic happen 💨 than can be good for PHP developers and building the static web pages much faster



To apply your first tonada element and let's select the Input then copy this HTML 

            
                
<div id="element">

                
    <input class="tonada-input" type="text" name="email" placeholder="Email">

                
</div>

Then call Tonada to do the work on this element. 

            
              
<script src="../dist/js/index.js"></script>

              
<script>

              
   Tonada.create('input', document.getElementById('element'));

              
</script>

And many more ... 👇🏻

Inputs

        
          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tonada@latest/dist/css/input.css"/>

Input group:

        
          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tonada@latest/dist/css/input-group.css"/>

Input password:

        
          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tonada@latest/dist/css/input-password.css"/>

Floating Label

                
                    
<div id="element" class="floating-label">

                    
    <input class="tonada-input" type="text" name="floating-name" placeholder="Name">

                    
    <label for="">Name</label>

                    
</div>

                    
<script src="../dist/js/index.js"></script>

                    
<script>

                    
   Tonada.create('input', document.getElementById('element'));

                    
</script>

Input with sections Floating

$
.00 
                  
                    
<div id="element">

                    
  <span>$</span>

                    
  <div class="floating-label">

                    
    <input class="tonada-input" type="text" name="name" placeholder="Name" />

                    
    <label for="">Name</label>

                    
  </div>

                    
  <span>.00</span>

                    
</div>

                    
<script>

                    
   Tonada.create('input-group', document.getElementById('element'));
                    

                    
</script>

Input with sections

$ .00 
              
                
<div id="element">

                
    <span>$</span>

                
    <input class="tonada-input" type="text" name="name" placeholder="Name">

                
    <span>.00</span>

                
</div>


                
<script>

                
   Tonada.create('input-group', document.getElementById('element'));
                

                
</script>

Invalid Input

apply the error state by add tonada-invalid class on the input container
and use tonada-errors class on the list.

  • Name is required
  • Should be character [A-Z a-z]
      
        
<div id="element" class="floating-label tonada-invalid">

        
    <input class="tonada-input" type="text" name="name" placeholder="Name" />

        
    <label for="">Name</label>

        
</div>

        
<ul class="tonada-errors">

        
    <li>Name is required</li>

        ....
        
</ul>

Password

        
          
<div id="element">

          
  <input

          
    type="password"

          
    class="tonada-input"

          
    name="password"

          
    placeholder="password"

          
  />

          
  <label for="">Password</label>

          
  <i class="tonada-password-toggle tonada-ic tonada-ic-show"></i>

          
</div>

          
<script>

          
   Tonada.create('input-password', document.getElementById('element'));
          

          
</script>

Float Password

        
          
<div id="element" class="floating-label">

          
  <input

          
    type="password"

          
    class="tonada-input"

          
    name="password"

          
    placeholder="password"

          
  />

          
  <label for="">Password</label>

          
  <i class="tonada-password-toggle tonada-ic tonada-ic-show"></i>

          
</div>

          
<script>

          
   Tonada.create('input-password', document.getElementById('element'));
          

          
</script>

Input Sizes

The classes sizes Tonada support are

  • tonada-sm
  • tonada-lg
  • tonada-xl
          
            
<div id="element" class="floating-label tonada-sm">

            
  <input class="tonada-input" type="text" name="name" placeholder="Name" />

            
  <label for="">Name</label>

            
</div>

            
<script>

            
   Tonada.create('input', document.getElementById('element'));

            
</script>

Select

        
          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tonada@latest/dist/css/select.css"/>
There are two ways to config the select element by add them in the dom and Tonada is so inelegance enough to figure out them or while creating the select element by javascript.

Options:

  • multiple: number of items per page.
  • disabled: boolean for disabled or enable.

Default

            
              
<div id="element">

              
    <select>

              
        <option value="1">Option 1</option>

              
        <option selected value="2">Option 2</option>

              
        <option value="3">Option 3</option>

              
    </select>

              
</div>

              
<script>

              
Tonada.create('select', document.getElementById('#element'));

              
</script>

Multi Select

              
                
<div id="element">

                
  <select multiple="multiple">

                
    <option value="1">Option 1</option>

                
    <option selected value="2">Option 2</option>

                ....
                
  </select>

                
</div>

                

                
<script>

                
  Tonada.create("select", document.querySelector("#element"));

                
</script>

Disabled

              
                
<div id="element">

                
  <select disabled>

                
    <option value="1">Option 1</option>

                
    <option selected value="2">Option 2</option>

                
    <option value="3">Option 3</option>

                
  </select>

                
</div>

                
<script>

                
    Tonada.create('select', document.querySelector('#element'));

                
</script>

Api:

Name Description Type
multiple enable select many options number
disabled disabled or enable select boolean

Slider

        
          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tonada@latest/dist/css/slider.css"/>

Slides Moving

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
      
        
<div id="element" >

        
  <ul class="tonada-list">

        
    <li class="tonada-list-item">1</li>

        
    <li class="tonada-list-item">2</li>

        
     ....

        
  </ul>

        
  <button class="tonada-slider-button tonada-prev">

        
    <i class="tonada-ic tonada-ic-arrow-left"></i>

        
  </button>

        
  <button class="tonada-slider-button tonada-next">

        
    <i class="tonada-ic tonada-ic-arrow-right"></i>

        
  </button>

        
  <div class="tonada-slider-paginator"></div>

        
</div>

        
<script>

        
  Tonada.create("slider", document.getElementById("element"), {

        
    itemsPerPage: 4,

        
    slideAnimation: "moving",

        
  });

        
</script>

Slides Fading

  • 1
  • 2
  • 3
  • 4
  • 5
        
            
<div id="element">

            
    <ul class="tonada-list">

            
        <li class="tonada-list-item">1</li>

            
        <li class="tonada-list-item">2</li>

            
        <li class="tonada-list-item">3</li>

            
        <li class="tonada-list-item">4</li>

            
        <li class="tonada-list-item">5</li>

            
    </ul>

            
    <button class="tonada-slider-button tonada-prev">

            
        <i class="tonada-ic tonada-ic-arrow-left"></i>

            
    </button>

            
    <button class="tonada-slider-button tonada-next">

            
        <i class="tonada-ic tonada-ic-arrow-right"></i>

            
    </button>

            
    <div class="tonada-slider-paginator"></div>

            
</div>

            
<script>

            
    Tonada.create('slider', document.getElementById('element'), {

            
        slideAnimation: 'fading',

            
        autoSliding: true

            
    })

            
</script>

Api:

Name Description Type
itemsPerPage number of items per page. number
slideAnimation how the slider going to slide between pages" "moving" or "fading"
autoSliding Enable auto sliding. boolean
autoSlidingDuration The duration for sliding between items only works with slideAnimation=fading ⛔. number
paginator Show or hide the pages buttons. boolean
navigators Show or hide the next and previous buttons. boolean

Buttons

        
          
<button class="tonada-button" type="button" disabled>Submit</button>

          
<button class="tonada-button tonada-button-primary" type="button" >Submit</button>

          
<button class="tonada-button tonada-button-secondary " type="button" >Submit</button>  

Checkbox

        
          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tonada@latest/dist/css/checkbox.css"/>

Checkbox Group:

        
          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tonada@latest/dist/css/checbox-group.css"/>

Default

            
              
<div id="element">

              
    <label for="test1">Test 1</label>

              
    <input id="test1" type="checkbox" name="tonada-default-checkbox" value="10">

              
</div>

              
<script>

                  
Tonada.create('checkbox', element)

              
</script>

Disabled

            
              
<div id="element">

              
    <label for="test2">Test 2</label>

              
    <input id="test2" type="checkbox" name="tonada-disabled-checkbox" value="10" disabled>

              
</div>

              
<script>

                  
Tonada.create('checkbox', element)

              
</script>

Option Group

            
              
<div id="element">

              
    <div>

              
        <label for="test3">Option 1</label>

              
        <input id="test3" type="radio" name="tonada-checkbox-group" value="1">

              
    </div>

              
    <div>

              
        <label for="test4">Option 2</label>

              
        <input id="test4" type="radio" name="tonada-checkbox-group" value="2"
                  checked>

              
</div>

              ....
              
</div>

              
<script>

                  
Tonada.create('checkbox-group', element)

              
</script>

Accordion

This is panel header 1

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

This is panel header 2

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

        
          
<div id="element" class="tonada-accordion">

          
    <div class="tonada-accordion-section">

          
        <div class="tonada-accordion-header">

          
            ....

          
        </div>

          
        <div class="tonada-accordion-content">

          
            ....

          
        </div>

          
    </div>

          
</div>

          
<script>

          
    Tonada.create('accordion', document.getElementById('element'));

          
</script>

Nested Accordion

You can have many accordion inside each others by add the accordion html and don't forget to add the accordion class tonada-accordion

This is panel header 1

This is panel header 1

This is panel header 1

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

This is panel header 2

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

This is panel header 2

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

This is panel header 2

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

        
          
<div id="element" class="tonada-accordion">

          
    <div class="tonada-accordion-section">

          
        <div class="tonada-accordion-header">

          
            ....

          
        </div>

          
        <div class="tonada-accordion-content">

          
            <div class="tonada-accordion">

          
                <div class="tonada-accordion-section">

          
                    <div class="tonada-accordion-header">

          
                        ....

          
                    </div>

          
                    <div class="tonada-accordion-content">

          
                        ....

          
                    </div>

          
                </div>

          
            </div>

          
        </div>

          
    </div>

          
</div>

          
<script>

          
    Tonada.create('accordion', document.getElementById('element'));

          
</script>

Api:

Name Description Type
open open the accordion function(void)
close close the accordion function(void)
toggle toggle the accordion function(void)

Customize Style

This is our project file structure and you have 2 options :
  1. Every Sass variable in Tonada includes the !default flag allowing you to override the variable’s default value in your own Sass without modifying Tonada’s source code. (Recommended) 
                
              // Default variable overrides
              $tn-font-size: 16px;
              $tn-border-radius: 8px;
              // Required
              @import "../node_modules/tonada/src/scss/variables";
              @import "../node_modules/tonada/src/scss/mixins";
              @import "../node_modules/tonada/src/scss/root";
              // Optional
              @import "../node_modules/tonada/src/scss/input";
              @import "../node_modules/tonada/src/scss/slider";
              // ...
            
          
                
              Tonada
              ┣ 📂src
              ┃ ┣ 📂scss
              ┃ ┃ ┃ ┣ 📜index.scss # It import all the component or you can import only your needs 
              ┃ ┃ ┃ ┣ 📜accordion.scss
              ┃ ┃ ┃ ┣ 📜button.scss
              ┃ ┃ ┃ ┣ 📜checkbox-group.scss
              ┃ ┃ ┃ ┣ 📜checkbox.scss
              ┃ ┃ ┃ ┗ 📜input-group.scss
              ┃ ┃ ┃ ┗ 📜input-group.scss
              ...
  2. Or by override css root variables or write our classes and you should do that after importing the styles files 
                
              
    <link rel="stylesheet" href="../dist/css/button.css" />
    
              
    <link rel="stylesheet" href="../dist/css/icons.css" />
    
              
    <link rel="stylesheet" href="../dist/css/input.css" />
    
              
    <style>
    
              
        :root {
    
              
            --tonada-color-primary: #1c3879;
    
              
            --tonada-color-secondary: #607eaa;
    
              
            --tonada-color-success: #30dd78;
    
              
            --tonada-color-danger: #ff004c;
    
              
            --tonada-color-white: #ffffff;
    
              
            /* etc */
    
              
        }
    
              
              
        .tonada-checkbox {
    
                
         /* etc */
    
              
        }
    
              
    </style>
    
          
                
              Tonada
              ┣ 📂dist
              ┃ ┣ 📂css
              ┃ ┃ ┃ ┣ 📜index.css # Import this or only the components you need
              ┃ ┃ ┃ ┣ 📜accordion.css
              ┃ ┃ ┃ ┣ 📜button.css
              ┃ ┃ ┃ ┣ 📜checkbox-group.css
              ┃ ┃ ┃ ┣ 📜checkbox.css
              ┃ ┃ ┃ ┗ 📜input-group.css
              ...