Nitroglycerin Pickle Machine

    vegtex

    1.6.8 • Public • Published

    About

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

    Installation

    Install via npm:

    npm i vegtex@1.5.6 -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>
            `
        },
        style: (Style)  => ({
            ':host': [
                // Background & Text color
                Style.BgColor.color10,
                Style.TextColor.color0,
                
                // Content auto-flow
                Style.AutoContent,
                Style.Align.Center,
                Style.Justify.Center,
                
                // Margin & Padding
                Style.Margin.Top.px(25),
                Style.Padding.All.px(25),
                
                // Cursor, text selection
                Style.Cursor.Clickable,
                Style.Selection.None,
                
                // Border rounding
                Style.Rounding.Default,
                
                // Smooth transitions
                Style.Transition.Smooth
            ],
            ':hover': [
                Style.BgColor.color9,
            ]
        }),
        events: {
            click(e) {
                this.state.x++
            }
        },
    
        state: () => ({
            x: 0
        }),
    })

    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>
                <vg-item navigate="/dashboard">Dashboard</vg-item>
                <vg-item navigate="/messages">Messages</vg-item>
            </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

    Install

    npm i vegtex

    DownloadsWeekly Downloads

    61

    Version

    1.6.8

    License

    ISC

    Unpacked Size

    58.9 kB

    Total Files

    4

    Last publish

    Collaborators

    • proxymal