Avant UI Kit

Documentation

Introduction

Avant UI is an HTML UI Kit based on the Bootstrap framework and its goal is to provide advanced design and unique functionalities for the Bootstrap Framework. Avant UI follow the Bootstrap standards. So, for detailed information please visit the Bootstrap framework page. To start a project using Avant UI, follow the instructions below.

Quick start

Add the required files and start a new project.

CSS

Copy-paste the stylesheet <link>s into your <head> before all other stylesheets to load the CSS: 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/avantui.css">
JS

Many of Bootstrap components require the use of JavaScript to function. Place the following <script>s near the end of your pages, right before the closing </body> tag, to enable them. 

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>
<script src="assets/js/avantui.js"></script>

Starter template

You can also start your project using the starter template. It includes the Bootstrap and Avant UI required files: 

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="">
        <meta name="author" content="">

        <!-- Bootstrap , Avant UI and Google Font -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:500,600,700">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link rel="stylesheet" href="assets/css/avantui.css">
        <title>Hello, world!</title>
    </head>

    <body>
        <h1>Hello, world!</h1>

        <!-- jQuery first, then Bootstrap JS, then Avant UI -->
        <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>
        <script src="assets/js/avantui.js"></script>
    </body>
</html>

Credits

  • Bootstrap - Open source toolkit for developing with HTML, CSS, and JS.
  • Font Awesome - Get vector icons and social logos on your website
  • jQuery - jQuery is a fast, small, and feature-rich JavaScript library
  • Google Fonts - Open source font catalog
  • clipboard.js - A modern approach to copy text to clipboard
  • imagesLoaded - Detect when images have been loaded.