Getting started
Core
Utilities
Layout systems
Design
Components
Form elements
Others
Layout

Installation

Discover the download instructions, file structure, and installation steps to streamline your development workflow.

About

This page is designed to guide you through the seamless integration of the library into your projects. Here, you will find detailed instructions on setting up the library, including the structure of essential files, download options, and explanations of the purpose of each file.

Additionally, we provide example templates to help you get started quickly. Whether you are a beginner or a seasoned developer, this page will equip you with everything you need to start building with JTB_MD right away.

Dependencies

JTB_MD is built using vanilla JavaScript and CSS, ensuring that the library is lightweight and efficient. This design choice eliminates the need for third-party dependencies or additional frameworks during installation, allowing for easy incorporation of JTB_MD into your projects without any overhead.

By avoiding external dependencies, JTB_MD enhances compatibility across various platforms and environments, simplifying the development process and enabling you to focus on building exceptional web applications.

Download

To download the library files, use the button below.

File structure

Upon downloading the library, you will find four primary files organized in a clear structure, ensuring easy accessibility. Below is an overview of these files and their contents:

jtb_md-jtb_md/
├── jtb_md.min.css // Minified CSS file containing all the styles for the library.
├── jtb_md.min.js // Minified JS file including components, functions, and interactivities.
├── README.md // Essential information about the library.
└── LICENCE // Licensing information.

Integration

Once you've donwloaded the files of library, integrating JTB_MD into your projects is pretty straightforward: Simply link the minified CSS and JavaScript file of the library in your <head> section of your HTML document. This will ensure that all the styles and functionalities are available for use in your project.

<!-- CSS -->
<link rel='stylesheet' href='path/to/jtb_md.min.css' />

<!-- JavaScript -->
<script src='path/to/jtb_md.min.js'></script>

Make sure to replace path/to/ with the actual path where the files are located in your project directory.

Post integration (JS)

JTB_MD features a validation structure that allows you to defer functions requiring full initialization of the library. To verify whether JTB_MD has been successfully initialized, you can utilize the pre-defined jtb_md element. If the library has loaded correctly, jtb_md.isReady will return true.

To execute your code once JTB_MD is ready, you can use the following snippet:

/*----- Execute code when JTB_MD is ready -----*/
jtb_md.ready(() => {
    console.log('JTB_MD is ready!');
});

Starter template

To ensure a smooth integration of JTB_MD, here is an example starter template for you:

        <!DOCTYPE html>
<html>
	<head>
		<meta charset='utf-8'>
		<meta http-equiv='X-UA-Compatible' content='IE=edge'>
		<meta name='viewport' content='width=device-width, initial-scale=1'>
		<title>JTB_MD - Starter Template</title>

	    <!-- JTB_MD Files Here -->
			<!-- CSS -->
                <link rel='stylesheet' href='path/to/jtb_md.min.css' />

            <!-- JavaScript -->
                <script src='path/to/jtb_md.min.js'></script>

	</head>
	<body>
		...

        <script type='text/javascript'>
            /*----- Validate integration -----*/
                jtb_md.ready(() => {
                    ...
                });
        </script>

	</body>
</html>
    

Copyright © 2024 JTBLabs - All rights reserved.