Templates

Ready-to-use code templates for common scenarios

📄 HTML Templates

HTML

Basic Page Template

Standard HTML5 page structure with proper meta tags and responsive viewport.




    
    
    Page Title
    


    
Header

    
Content

    
Footer
HTML

Card Component

Reusable card layout with icon, title, description and metadata.


    
Icon

    
Title

    
Description

    
Metadata

🎨 CSS Templates

CSS

CSS Variables Template

GitHub-style CSS variable definitions for consistent theming.

:root {
    --color-bg: #ffffff;
    --color-border: #d0d7de;
    --color-text: #1f2328;
    --color-link: #0969da;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --radius: 6px;
}
CSS

Flexbox Center

Common flexbox centering patterns.

/* Center both axes */
.center-flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Center horizontally */
.h-center {
    display: flex;
    justify-content: center;
}

âš¡ JavaScript Templates

JS

Module Pattern

Encapsulated module with public API.

const MyModule = (function() {
    // Private variables
    let privateVar = 0;
    
    // Private function
    function privateFn() {
        return 'private';
    }
    
    // Public API
    return {
        publicMethod: function() {
            privateVar++;
            return privateVar;
        }
    };
})();
JS

Event Handler

Safe event handling with cleanup.

function setupEvent(element, event, handler) {
    element.addEventListener(event, handler);
    // Return cleanup function
    return () => {
        element.removeEventListener(event, handler);
    };
}

// Usage
const cleanup = setupEvent(
    button, 'click', handleClick
);
// Later: cleanup() to remove listener