genApp - Getting Started

☰

genApp API

genApp Basics

This example shows how to set up your page to get started in the genApp API. This template will help you build a very basic web page that allow you to get a better understanding of how to get started with the genApp API. In this first stage we just create a basic web page that will be the base for our site. The use of the class gaSticky allows you to keep a header or footer in view while scrolling as seen in the gaHeaderContainer of this example.

CODE SAMPLES

HTML - default.htm
CSS - css/My_genApp.css

HOSTED RESOURCES

genApp API
JQUERY API

gaBasics - Preview

gaBasics - HTML

⎘

                            <!DOCTYPE html>
 <html>
    <head>
        <meta charset="utf-8" />
        <title>genApp.Pro - Getting started with genApp API</title>
        <meta http-equiv="x-ua-compatible" content="ie=11" />
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- JQUERY API -->
        <script src="https://genapp.pro/scripts/jquery-3.1.1.min.js"></script>
        <script src='https://genapp.pro/scripts/jquery-ui.min.js'></script>

        <!-- GENAPP API -->
        <script src="https://genapp.pro/scripts/genApp.1.0.0.5.js"></script>
        <link rel="stylesheet" href="https://genapp.pro/css/genApp.1.0.0.5.css">

        <!-- CUSTOM GENAPP CSS AND JS -->
        <script src="scripts/My_genApp.js"></script>
        <link rel="stylesheet" href="css/My_genApp.css">
    </head>
    <body>
        <!-- genApp Page Container -->
        <div class="gaPageContainer">
            <!-- Header Offset, Used With Sticky Headers -->
            <div class="gaHeaderOffset"></div>
            <!-- genApp Header Container with gaSticky used to keep the header in view when scrolling -->
            <div class="gaHeaderContainer gaSticky">
                <!-- genApp Header -->
                <div class="gaHeader">
                    <h1>genApp - gaBasics</h1>
                </div>
            </div>
            <!-- genApp Page Body Data -->
            <div class="gaPageBody">

            </div>
            <!-- genApp Footer Container -->
            <!-- gsSticky class would set the gaFooterContainer so it does not scroll with the page -->
            <div class="gaFooterContainer">
                <!-- genApp Footer -->
                <div class="gaFooter">
                genApp - Getting Started<br />
                © MygenApp.com 2019 All Rights Reserved<br />
                </div>
            </div>
            <!-- genApp Footer Offset, Used With Sticky Footers -->
            <div class="gaFooterOffset"></div>
        </div>
    </body>
</html>

                            <!DOCTYPE html>
 <html>
    <head>
        <meta charset="utf-8" />
        <title>genApp.Pro - Getting started with genApp API</title>
        <meta http-equiv="x-ua-compatible" content="ie=11" />
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- JQUERY API -->
        <script src="https://genapp.pro/scripts/jquery-3.1.1.min.js"></script>
        <script src='https://genapp.pro/scripts/jquery-ui.min.js'></script>

        <!-- GENAPP API -->
        <script src="https://genapp.pro/scripts/genApp.1.0.0.5.js"></script>
        <link rel="stylesheet" href="https://genapp.pro/css/genApp.1.0.0.5.css">

        <!-- CUSTOM GENAPP CSS AND JS -->
        <script src="scripts/My_genApp.js"></script>
        <link rel="stylesheet" href="css/My_genApp.css">
    </head>
    <body>
        <!-- genApp Page Container -->
        <div class="gaPageContainer">
            <!-- Header Offset, Used With Sticky Headers -->
            <div class="gaHeaderOffset"></div>
            <!-- genApp Header Container with gaSticky used to keep the header in view when scrolling -->
            <div class="gaHeaderContainer gaSticky">
                <!-- genApp Header -->
                <div class="gaHeader">
                    <h1>genApp - gaBasics</h1>
                </div>
            </div>
            <!-- genApp Page Body Data -->
            <div class="gaPageBody">

            </div>
            <!-- genApp Footer Container -->
            <!-- gsSticky class would set the gaFooterContainer so it does not scroll with the page -->
            <div class="gaFooterContainer">
                <!-- genApp Footer -->
                <div class="gaFooter">
                genApp - Getting Started<br />
                © MygenApp.com 2019 All Rights Reserved<br />
                </div>
            </div>
            <!-- genApp Footer Offset, Used With Sticky Footers -->
            <div class="gaFooterOffset"></div>
        </div>
    </body>
</html>

gaBasics - Custom CSS

⎘

                            /*
BY SETTING THE PAGE CONTAINER BACKGROUND COLOR
THE API WILL SET ALL THE MAIN CONTINERS TO THE
SAME BACKGROUND COLOR FOR STANDARIZATION.
*/
.gaPageContainer {
    background:#fff;
}
/*
TO GIVE EACH AREA A SPECIFIC COLOR YOU CAN ADDRESS
THE ELEMENTS WITHIN THE CONTAINER SUCH AS THE HEADER
AND FOOTER.
*/
.gaHeader, .gaFooter {
    background: #d4d4d4;
}                           
                            /*
BY SETTING THE PAGE CONTAINER BACKGROUND COLOR
THE API WILL SET ALL THE MAIN CONTINERS TO THE
SAME BACKGROUND COLOR FOR STANDARIZATION.
*/
.gaPageContainer {
    background:#fff;
}
/*
TO GIVE EACH AREA A SPECIFIC COLOR YOU CAN ADDRESS
THE ELEMENTS WITHIN THE CONTAINER SUCH AS THE HEADER
AND FOOTER.
*/
.gaHeader, .gaFooter {
    background: #d4d4d4;
}

gaBasics - Custom JS

⎘