Introduction

Hey there! You’re looking at xPider'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 xPider is based on bootstrap framework:

Open Bootstrap Docs

Quick start

CSS

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


                                    <!-- google fonts -->
                                    <link href="https://fonts.googleapis.com/css?family=Noto+Serif:400,400i" rel="stylesheet">
                                    <link href="https://fonts.googleapis.com/css?family=Alice" rel="stylesheet">
            
                                    <!-- custom fonts -->
                                    <link href="fonts/aileron.css" 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>xPider 1.0 - Oslo</title>

                                        <!-- favicon CSS -->
                                        <link rel="icon" type="image/png" sizes="32x32" href="favicon.png">

                                        <!-- google fonts -->
                                        <link href="https://fonts.googleapis.com/css?family=Noto+Serif:400,400i" rel="stylesheet">
                                        <link href="https://fonts.googleapis.com/css?family=Alice" rel="stylesheet">

                                        <!-- custom fonts -->
                                        <link href="fonts/aileron.css" 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="" data-spy="scroll" data-target="#navbar-nav">      

                                        <div class="main">...</div>

                                        <!-- JS -->
                                        <script src="js/plugins.min.js"></script>
                                        <script src="js/app.js"></script>
                                    </body>
                                    </html>