shades - Introduction

# Introduction

Hey there! You’re looking at Shade'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 the official docs as well since Shade is based on bootstrap framework:

Open Bootstrap Docs

## Quick start

### Source File (CSS)

                                        <!-- Plugins CSS -->
                                        <link rel="stylesheet" href="./plugins/bootstrap-4.3.1/css/bootstrap.min.css">
                                        <link rel="stylesheet" href="./plugins/meanmenu/meanmenu.css">
                                        <!-- Icon fonts -->
                                        <link rel="stylesheet" href="./fonts/ep-icon-fonts/css/style.css">
                                        <link rel="stylesheet" href="./fonts/fontawesome-5/css/all.min.css">
                                        <!-- Custom Stylesheet -->
                                        <link rel="stylesheet" href="./css/settings.css">
                                        <link rel="stylesheet" href="./css/style.css">

### Source File (JS)

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

                                        <!-- Vendor JS-->
                                        <script src="./plugins/jquery/jquery.min.js"></script>
                                        <script src="./plugins/jquery/jquery-migrate.min.js"></script>
                                        <script src="./plugins/bootstrap-4.3.1/js/bootstrap.bundle.js"></script>
                                        <!-- Plugins JS -->
                                        <script src="./plugins/meanmenu/jquery.meanmenu.js"></script>
                                        <!-- Custom JS -->
                                        <script src="./js/active.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>shades 1.0 </title>

                                            <!-- Plugins CSS -->
                                            <link rel="stylesheet" href="./plugins/bootstrap-4.3.1/css/bootstrap.min.css">
                                            <link rel="stylesheet" href="./plugins/meanmenu/meanmenu.css">
                                            <!-- Icon fonts -->
                                            <link rel="stylesheet" href="./fonts/ep-icon-fonts/css/style.css">
                                            <link rel="stylesheet" href="./fonts/fontawesome-5/css/all.min.css">
                                            <!-- Custom Stylesheet -->
                                            <link rel="stylesheet" href="./css/settings.css">
                                            <link rel="stylesheet" href="./css/style.css">
                                        </head>

                                        <body>

                                            <div class="site-wrapper">...</div>

                                            <!-- Vendor JS-->
                                            <script src="./plugins/jquery/jquery.min.js"></script>
                                            <script src="./plugins/jquery/jquery-migrate.min.js"></script>
                                            <script src="./plugins/bootstrap-4.3.1/js/bootstrap.bundle.js"></script>
                                            <!-- Plugins JS -->
                                            <script src="./plugins/meanmenu/jquery.meanmenu.js"></script>
                                            <!-- Custom JS -->
                                            <script src="./js/active.js"></script>
                                        </body>
                                        </html>