Skip to content

Latest commit

 

History

History
103 lines (83 loc) · 2.32 KB

README.md

File metadata and controls

103 lines (83 loc) · 2.32 KB
Raw

About

Vegtex - HTML Framework for easier and faster development of beautiful websites.

Installation

Install via npm:

npm i [email protected] -D

How to use

Vegtex is modern JavaScript Framework that adds alot of features to your web-application, there is guide how to use that features.

Example: Counter

Basic counter component

<my-counter></my-counter>
import vegtex from 'vegtex'

vegtex.use('light', 'azure')

new vegtex.VegtexComponent('my-counter', {
    template() {
        return `
            <p>Clicked ${this.state.x} times</p>
        `
    },
    events: {
        click(e) {
            this.state.x++
        }
    },

    state: () => ({
        x: 0
    }),
})
my-counter {
    background: var(--color-10);
    color: var(--color-0);

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 25px;
    margin: auto;

    cursor: pointer;
    user-select: none;

    transition: var(--transition);
}
my-counter:hover {
    background: var(--color-9);
}

Example: SPA

Vegtex Framework has a lot of useful components for your SPA.

Example SPA page with Vegtex:

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Vegtex Single-Page Application</title>
        
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    </head>
    <body spa>
        <vg-sidebar pos-left size-lg>
            <router-link to="/"><vg-item>Dashboard</vg-item></router-link>
            <router-link to="/messages"><vg-item>Messages</vg-item></router-link>
        </vg-sidebar>

        <script src="./js/index.js"></script>
    </body>
</html>
import vegtex from 'vegtex'

// vegtex.use(theme, themeAccent)
vegtex.use('light', 'azure')

For MA (Mobile Application)

Mobile components isn't done yet, but we are working to make them available!

Documentation

English Documentation

Russian Mini-documentation