Introduction

Hey there! You’re looking at vAPP's official documentation. Flexible, ready to use UI components, plugins which will bring you so much closer to your end goals. Let’s dive in.

Check out the official docs as well since vAPP is based on bootstrap framework:

Open Bootstrap Docs

Quick start

CSS

Copy-paste the fonts, icons, plugins, app and custom stylesheets <link> into your <head> after all other stylesheets to load our CSS.

                                    
                                        <!-- fonts -->
                                        <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,300i,400,400i,500,500i,700,700i&display=swap" rel="stylesheet">
                                        <!-- Plugins CSS -->
                                        <link rel="stylesheet" href="css/plugins.min.css">
                                        <!-- Style CSS -->
                                        <link rel="stylesheet" href="css/app.css">
                                        <!-- Your CSS -->
                                        <link rel="stylesheet" href="css/custom.css">                              
                                    
                                

JS

Place the following <script> s near the end of your pages, right before the closing <body> tag.


                                    <script src="js/plugins.min.js"></script>
                                    <script src="js/app.js"></script>
                                

Starter template

Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:


                                   <!DOCTYPE html>
                                    <html lang="en">
                                    <head>
                                        <meta charset="UTF-8">
                                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                                        <meta http-equiv="X-UA-Compatible" content="ie=edge">
                                        <title>vAPP</title>
                                        <!-- fonts -->
                                        <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,300i,400,400i,500,500i,700,700i&display=swap" rel="stylesheet">
                                        <!-- Plugins CSS -->
                                        <link rel="stylesheet" href="css/plugins.min.css">
                                        <!-- Style CSS -->
                                        <link rel="stylesheet" href="css/app.css">
                                        <!-- Your CSS -->
                                        <link rel="stylesheet" href="css/custom.css">
                                    </head>
                                        <body class=”….">
                                        <main class="main">
                                        ...
                                        </main>
                                        <script src="js/plugins.min.js"></script>
                                        <script src="js/app.js"></script>
                                    </body>
                                    </html>
                                

Declaring Page Appearance

vAPP comes with 3 different Page Appearance (light, dark & dark blue). If you are creating a new page you will need to place a data attribute to the <body>.

Attribute Reference

dark
When the page appearance is dark

Code example:

                                            
                                                <body data-appearance="dark"> ... </body>