Introduction

Hey there! You’re looking at SpaceMax'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 SpaceMax 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="fonts/sfuidisplay.css" rel="stylesheet">
                                        <!-- Icon fonts -->
                                        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
                                        <!-- 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>SpaceMax | Multi Purpose HTML Template</title>
                                        <!-- favicon CSS -->
                                        <link rel="icon" type="image/png" sizes="32x32" href="favicon.png">
                                        <!-- fonts -->
                                        <link href="fonts/sfuidisplay.css" rel="stylesheet">
                                        <!-- Icon fonts -->
                                        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
                                        <!-- 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" data-animation="..." data-appearance="...">

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

                                    </body>

                                    </html>

Declaring Page Appearance

SpaceMax 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

light
When the page appearance is white
dark
When the page appearance is dark
darkblue
When the page appearance is darkblue

Code example:

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

Creating New Section

If you wish to transform any lighter section to darker or darker to lighter we recommend you to declare the section type with an identifier class. Lighter or White background section doesn't need the identifier class unless it is a footer section. But it is mandatory to declare the section with an identifier class when the section background is dark or darkblue.

Class Reference:

section--light
When the section background color is light/ white
section--dark
When the section background color is dark/ black
section--darkblue
When the section background color is dark blue/ purple

Code example:


                                            <footer class="section--light">
                                            ...
                                            </footer>
        
        
                                            <section class="section--dark bg-color--dark--1">
                                            ...
                                            </section>
        
        
                                            <section class="section--darkblue gradient-darkblue-2">
                                            ...
                                            </section>