My simple and small JavaScript UI Library makes it easy for you to create beautiful user interfaces for your website.

Quick start

It's lightweight, fast, easy to use, and customizable. I hope my comprehensive documentation makes it easy to get started.

1. Create a new index.html file in your project root.

2. Download and Include JavaScript UI Library CSS and JS. Place the <link> tag in the <head> for our CSS, and the <script> tag for our JavaScript bundle before the closing </body>.

3. Hello world! Open the page in the browser of your choice to see your page. Now you can start creating your own layout, adding components and writing JavaScript code using modules.

                            

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="lib.css">
        <title>JavaScript UI Library</title>
    </head>
    <body>
        <h1>Hello World!</h1>
        <script src="lib.js"></script>
    </body>
    </html>

How to use it?

I have created a small but frequently used number of methods that you can use without writing extra code. The methods can be combined with each other to create small functionality. You can see examples of such code below.

CORE. Getting any element from the page has become much faster.

                                
    
    $(".element");

Handlers Modul. Here are the methods related to the handling of various events.

.on(); - a base method whose task is to assign event handlers.

                                
    
    $('#first').on('click', ()=> {
        console.log('Hello!');
    });

.off(); - a method whose task is to remove the event handler from the element.

                                
    
    $('#first').off('click', ()=> {
        console.log('Bye!');
    });

.click(); - the most popular event handler is click. Which is placed in a separate method for quicker access.

                                
    
    $('.trigger').click(()=> {
        console.log('Hello!');
    });

Display Modul. A module that has collected methods for dealing with the display.

.show(); - from the name of the method, you can see that the method allows you to show the originally hidden element.

                                
    
    $('.elem').show();

.hide(); - from the name of the method you can see that the method allows you to hide the element you want to hide.

                                
    
    $('.elem').hide();

.toggle(); - this method is a toggle between .show(); and .hide(); which avoids writing extra code.

                                
    
    $('.active').toggle();

Actions Modul. Here are the methods for interacting with the guts of an element.

.html(); - method which allows you to quickly change the HTML structure inside an element. And it can not only change, but also receive content of this element.

                                
    
    $(".container").html(
        `
        <div class="wrap">
            <h2>Hello World!</h2>
            <button>Say Hello to the World</button>
        </div>
        `
    );

.eq(); - is a method that allows you to refer to a specific item on a page by its number order and to further act only on that item.

                                
    
    $(".list li").eq(2);

.index(); - getting the item number in order among the items that have a common parent. In other words, a method that allows you to get the index of an item.

                                
    
    $(this).index();

.find(); - method allows you to find a specific item by selector within already found items.

                                
    
    $('div').eq(3).find('.copy');

.closest(); - a method that identifies the nearest block by a naughty selector. And allows you to work with the elements you have already received.

                                
    
    $('.column').closest('.row');

.siblings(); - a method that gets all adjacent elements without including the element itself.

                                
    
    $('.card').eq(0).siblings();

Classes Modul. Here are the methods for working with classes.

.addClass(); - a method that allows you to add any class to an element.

                                
    
    $('button').eq(1).on('click', ()=> {
        $('.btn-red').addClass('active');
    });

.removeClass(); - a method that allows you to remove any class from an element.

                                
    
    $('button').click(()=> {
        $('.btn-red').removeClass('active');
    });

.toggleClass(); - a method that allows you to switch the class.

                                
    
    $('button').on('click', ()=> {
        $('.btn').eq(3).toggleClass('active');
    });

Effects Modul. Here are all the ready-made effects that are ready to be performed.

.fadeIn(); - a method that allows you to show the definition of an element through transparency and a certain period of time.

                                
    
    $('.content').fadeIn(1800);

.fadeOut(); - a method that allows you to hide the definition of an element through transparency and a certain period of time.

                                
    
    $('.content').fadeOut(1800);

.fadeToggle(); - a method for automatically determining the status of an item, to show or hide the item.

                                
    
    $('.content').fadeToggle(1800);

Services Modul. Working with the server, sending requests, configuration and result handling. Perform GET and POST requests using simple methods.

.get(); - a simple method for requesting data from a specified resource.

                                
    
    $().get('https://jsonplaceholder.typicode.com/todos/1')
    .then(res => console.log(res));

.post(); - a simple method for sending a POST request with data to a server.

                                
    
    $().post('https://hello.com/post/', formData)
    .then(res => console.log(res));

Components

Don't write unnecessary code that takes a lot of time. I have created for you ready-made components that you can use right now without any changes, and you can easily customise and change each kit to suit your needs. The components that required JavaScript to run were created entirely using the methods of this library, which are listed above.

Buttons. Use ready-made buttons for your website. Here are buttons with predefined styles, each serving a different purpose.

                                
    
    <button class="btn btn-primary">Primary</button>

    <button class="btn btn-success">Success</button>

    <button class="btn btn-danger">Danger</button>

    <button class="btn btn-warning">Warning</button>

    <button class="btn btn-dark">Dark</button>

Outline buttons. Some more custom buttons, in case you don't want background colours on the buttons. Use a ready-made class.

                                
    
    <button class="btn btn-outline-primary">Primary</button>

    <button class="btn btn-outline-success">Success</button>

    <button class="btn btn-outline-danger">Danger</button>

    <button class="btn btn-outline-warning">Warning</button>
    
    <button class="btn btn-outline-dark">Dark</button>

Cards. A Card is a flexible and lightweight container that allows you to display various types of content, such as text, images, and buttons, in an organized and visually appealing manner.

Card title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia itaque placeat qui suscipit.

Link to

                                

    <div class="card mt-20">
        <img class="card-img" src="https://images.pexels.com/photos/6143369/pexels-photo-6143369.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="photo">
        <div class="card-body">
            <div class="card-title">Card title </div>
            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia itaque placeat qui suscipit. </p>
            <a href="#" class="btn btn-primary">Link to</a>
        </div>
    </div>

Accordion. An Accordion is a collapsible content container that allows you to present information in a compact and organized manner. It consists of a series of panels that can be expanded or collapsed with a click, revealing or hiding their content.

Item 1

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Autem voluptatibus fuga est cupiditate debitis harum repudiandae modi quia. Enim nobis recusandae totam error veniam quod consequatur nulla, debitis mollitia laborum!

Item 2

Item 3

                                

    <div class="accordion mt-20">
        <div class="accordion-head">
            <span>Item 1</span>
        </div>
        <div class="accordion-content">
            <div class="accordion-inner">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Autem voluptatibus fuga est cupiditate debitis harum repudiandae modi quia. Enim nobis recusandae totam error veniam quod consequatur nulla, debitis mollitia laborum!
            </div>
        </div>
        <div class="accordion-head">
            <span>Item 2</span>
        </div>
        <div class="accordion-content">
            <div class="accordion-inner">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Autem voluptatibus fuga est cupiditate debitis harum repudiandae modi quia. Enim nobis recusandae totam error veniam quod consequatur nulla, debitis mollitia laborum!
            </div>
        </div>
        <div class="accordion-head">
            <span>Item 3</span>
        </div>
        <div class="accordion-content">
            <div class="accordion-inner">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Autem voluptatibus fuga est cupiditate debitis harum repudiandae modi quia. Enim nobis recusandae totam error veniam quod consequatur nulla, debitis mollitia laborum!
            </div>
        </div>
    </div>

Carousel. A Carousel is a slideshow component that allows you to display a series of images or other content in a dynamic and engaging way.

< >

                                

    <div class="carousel" id="example">
        <ol class="carousel-indicators">
            <li class="active"  data-slide-to="0"></li>
            <li data-slide-to="1"</li>
            <li data-slide-to="2"></li>
            <li data-slide-to="3"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-slides">
                <div class="carousel-item">
                    <img src="https://images.pexels.com/photos/76969/cold-front-warm-front-hurricane-felix-76969.jpeg?auto=compress&cs=tinysrgb&w=1600" alt="photo">
                </div>
                <div class="carousel-item">
                    <img src="https://images.pexels.com/photos/220201/pexels-photo-220201.jpeg?auto=compress&cs=tinysrgb&w=1600" alt="photo">
                </div>
                <div class="carousel-item">
                    <img src="https://images.pexels.com/photos/2156/sky-earth-space-working.jpg?auto=compress&cs=tinysrgb&w=1600" alt="photo">
                </div>
                <div class="carousel-item">
                    <img src="https://images.pexels.com/photos/673902/pexels-photo-673902.jpeg?auto=compress&cs=tinysrgb&w=1600" alt="photo">
                </div>
            </div>
        </div>
        <a href="#" class="carousel-prev" data-slide="prev">
            <span class="carousel-prev-icon"></span>
        </a>
        <a href="#" class="carousel-next" data-slide="next">
            <span class="carousel-next-icon"></span>
        </a>
    </div>

Dropdown. A Dropdown is a versatile component that allows you to create interactive menus and select options. It consists of a button or a link that triggers a dropdown menu when clicked, revealing a list of items or actions.

                                

    <div class="dropdown">
        <button class="btn btn btn-primary dropdown-toggle" id="dropdownMenuButton">Dropdown Button</button>
        <div class="dropdown-menu" data-toggle-id="dropdownMenuButton">
            <a href="#" class="dropdown-item">Action #1</a>
            <a href="#" class="dropdown-item">Action #2</a>
            <a href="#" class="dropdown-item">Action #3</a>
        </div>
    </div>

Modal. A Modal is a dialog box that appears on top of the current page, blocking user interaction with the rest of the content until it is closed. It is used to display important messages, alerts, forms, or any other type of content that requires user attention.

Modal Trigger Create Modal by JavaScript

                                

    <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Modal Trigger</a>
    
    <div class="modal" id="exampleModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <button class="close" data-close>
                    <span>×</span>
                </button>
                <div class="modal-header">
                    <div class="modal-title">
                        Modal Title
                    </div>
                </div>
                <div class="modal-body">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, laudantium id earum est rem eos, dolores molestiae ad voluptatibus alias exercitationem quos. Aspernatur soluta nesciunt accusantium odit, obcaecati porro velit?
                </div>
                <div class="modal-footer">
                    <button class="btn btn-danger" data-close>Close</button>
                    <button class="btn btn-success" data-close>Save Changes</button>
                </div>
            </div>
        </div>
    </div>

.createModal(); - Programmatic creation of a modal window, using JavaScript only. The method accepts a settings object with parameters.

                                

    $('#trigger').click(()=> {
        $('#trigger').createModal({
            text: {
                title: 'Modal Title. Create By JAVASCRIPT',
                body: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, laudantium id earum est rem eos, dolores molestiae ad voluptatibus alias exercitationem quos. Aspernatur soluta nesciunt accusantium odit, obcaecati porro velit?'
            },
            btns: {
                count: 2,
                settings:[
                    [
                        'Close',
                        ['btn-danger', 'mr-10'],
                        true
                    ],
                    [
                        'Save',
                        ['btn-success'],
                        false,
                        () => {
                            alert('Hello!');
                        }
                    ]
                ]
            }
        });
    });

Tabs. Tabs are a navigation component that allows you to organize content into multiple sections, each represented by a tab. Users can switch between the tabs to access different sections of content without leaving the current page.

Content #1

Content #2

Content #3

Content #1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga magnam aliquam pariatur ad cum, sunt nostrum optio reiciendis voluptates suscipit vero officiis aspernatur expedita dolore vel dignissimos. Exercitationem rem magnam possimus. Perferendis officiis unde officia eos? Eaque quam sunt error.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga magnam aliquam pariatur ad cum, sunt nostrum optio reiciendis voluptates suscipit vero officiis aspernatur expedita dolore vel dignissimos. Exercitationem rem magnam possimus. Perferendis officiis unde officia eos? Eaque quam sunt error.

Content #2 Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga magnam aliquam pariatur ad cum, sunt nostrum optio reiciendis voluptates suscipit vero officiis aspernatur expedita dolore vel dignissimos. Exercitationem rem magnam possimus. Perferendis officiis unde officia eos? Eaque quam sunt error.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Content #3 Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga magnam aliquam pariatur ad cum, sunt nostrum optio reiciendis voluptates suscipit vero officiis aspernatur expedita dolore vel dignissimos. Exercitationem rem magnam possimus. Perferendis officiis unde officia eos? Eaque quam sunt error.

                                

    <div class="tab mt-20">
        <div class="tab-panel" data-tabpanel>
            <div class="tab-item tab-item--active">Content #1</div>
            <div class="tab-item">Content #2</div>
            <div class="tab-item">Content #3</div>
        </div>
        <div class="tab-content tab-content--active">
            Content #1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga magnam aliquam pariatur ad cum, sunt nostrum optio reiciendis voluptates suscipit vero officiis aspernatur expedita dolore vel dignissimos. Exercitationem rem magnam possimus. Perferendis officiis unde officia eos? Eaque quam sunt error.
            <br>
            <br>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga magnam aliquam pariatur ad cum, sunt nostrum optio reiciendis voluptates suscipit vero officiis aspernatur expedita dolore vel dignissimos. Exercitationem rem magnam possimus. Perferendis officiis unde officia eos? Eaque quam sunt error.
        </div>
        <div class="tab-content">
            Content #2 Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga magnam aliquam pariatur ad cum, sunt nostrum optio reiciendis voluptates suscipit vero officiis aspernatur expedita dolore vel dignissimos. Exercitationem rem magnam possimus. Perferendis officiis unde officia eos? Eaque quam sunt error.
            <br>
            <br>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        </div>
        <div class="tab-content ">
            Content #3 Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga magnam aliquam pariatur ad cum, sunt nostrum optio reiciendis voluptates suscipit vero officiis aspernatur expedita dolore vel dignissimos. Exercitationem rem magnam possimus. Perferendis officiis unde officia eos? Eaque quam sunt error.
        </div>
    </div>

The Future

By creating this library I primarily wanted to show off my knowledge of JavaScript, but in the process I realised that it was very interesting to me and I would like to continue to develop this project.

Further plan of action:

Accessibility: Add accessibility features such as keyboard navigation and ARIA attributes to components to make the user interface more inclusive.

More components: Add more components such as date switches, sliders and forms to give users more options for creating rich user interfaces.

Theming: Add the ability to easily apply custom styles and themes to components, allowing users to customise the look and feel of the UI to suit their branding.

Responsive design: Improve all components to be responsive and work well on screens of different sizes, including mobile devices.

Cross-browser compatibility: Test the library on different browsers and devices to ensure that it works consistently and reliably across platforms.

Integration: Integrate the library with popular frameworks or platforms, such as React or WordPress, to make it even more accessible to developers.