WaveslabJS Documentation

Welcome to the WaveslabJS documentation. This modern frontend library helps you build responsive websites quickly with powerful components. Download a Sample Website built using it or visit

Installation

Install WaveslabJS using npm:

npm

npm install waveslabjs

Project Setup

Basic project structure for using WaveslabJS:

HTML

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>WaveslabJS App</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <div id="app"></div>
        <script type="module" src="script.js"></script>
    </body>
    </html>

Core Components

WaveslabJS provides several ready-to-use components:

Header Component

JavaScript

const header = waves.createheader("My App", {
        "Home": "/",
        "About": "#about",
        "Contact": "#contact"
    });

Footer Component

JavaScript

const footer = waves.createfooter("My App", {
        "Company": [
            { "About": "#about" },
            { "Careers": "#careers" }
        ],
        "Legal": [
            { "Privacy": "#privacy" }
        ]
    });

Hero Section

JavaScript

let page = new Page();
    page.createhero({
        "title": "Welcome to My App",
        "p": "Building modern web applications with ease",
        "img": "hero-image.jpg",
        "buttons": {
            "Get Started": "#start",
            "Learn More": "#learn"
        }
    });

Features Section

JavaScript

page.createfeatures({
        "title": "Key Features",
        "p": "What makes us special",
        "cards": [
            {
                "i": "fas fa-rocket",
                "h": "Fast Performance",
                "p": "Optimized for speed"
            },
            {
                "i": "fas fa-mobile",
                "h": "Responsive",
                "p": "Works on all devices"
            }
        ]
    });

Custom Styling

All WaveslabJS components can be styled with custom CSS:

Component Styling

JavaScript

// Hero with custom styles
    page.createhero({
        // content...
    }, {
        "background": "#f8f9fa",
        "padding": "4rem 0",
        "border-radius": "8px"
    });
    
    // Features with custom styles
    page.createfeatures({
        // content...
    }, {
        "background": "#ffffff",
        "padding": "3rem 0"
    });

Global CSS

CSS

/* Base styles */
    :root {
        --primary-color: #4d84ff;
        --secondary-color: #6c757d;
    }
    
    /* Custom header styles */
    .waves-header {
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    /* Custom button styles */
    .waves-btn {
        transition: all 0.3s ease;
    }

Routing System

WaveslabJS includes a simple routing system:

Setting Up Routes

JavaScript

// Define pages
    const pages = {
        "Home": {
            "desc": "Welcome page",
            "#": "home"
        },
        "About": {
            "desc": "About us",
            "#": "about"
        }
    };
    
    // Set up routes
    waves.setRoutes(pages);
    
    // Handle routes
    waves.routes.get("Home", (res, err) => {
        res.send(homePage.render());
    });
    
    waves.routes.get("About", (res, err) => {
        res.send(aboutPage.render());
    });

Static Header & Footer

JavaScript

// Create header and footer
    const header = waves.createheader(...);
    const footer = waves.createfooter(...);
    
    // Set them as static across all pages
    waves.statichnf(header, footer);