CoolHTML Documentation

An ultra-minimal framework for building websites without HTML.

CoolHTML is designed to minimize code and simplify website creation by providing a clean, declarative JavaScript API. Build entire websites with the fewest possible lines of code, using common keywords and intuitive defaults.

Getting Started

To begin using CoolHTML, include the script in your HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My CoolHTML Site</title>
    <script src="CoolHTML.js"></script>
</head>
<body>
    <script>
        // Create your site here
        cool().nav('My Website');
        cool().hero('Welcome to My Site');
        cool().footer('© 2025 My Company');
    </script>
</body>
</html>

The framework automatically loads Bootstrap 5 and Bootstrap Icons from CDN, so you don't need to include them separately.

Basic Usage

CoolHTML provides two ways to initialize the framework:

// Method 1: Using the global factory function
cool().componentName(options);

// Method 2: Traditional initialization
const myApp = new CoolHTML();
myApp.componentName(options);

The global factory function cool() is the recommended approach for most cases as it allows for simpler chaining.

Site Builder

The fastest way to create a complete website is using the site builder function:

cool().site({
    // Theme settings
    theme: {
        primary: '#4361ee',
        secondary: '#3f37c9'
    },
    
    // Components in order
    nav: { title: 'My Website', links: ['Home', 'About', 'Contact'] },
    hero: { title: 'Welcome', subtitle: 'This site was built with minimal code' },
    features: { title: 'Features', items: [
        { title: 'Fast', text: 'Build websites quickly' },
        { title: 'Simple', text: 'No HTML required' }
    ]},
    sections: [
        { title: 'About Us', text: 'We create amazing websites.' }
    ],
    pricing: { /* pricing options */ },
    testimonials: { /* testimonial options */ },
    contact: { /* contact options */ },
    footer: { /* footer options */ }
});

This single call generates a complete website with all components configured according to your specifications.

Theme Customization

CoolHTML makes it easy to customize the appearance of your site:

cool().site({
    // Theme customization
    theme: {
        // Colors
        primary: '#4361ee',      // Primary color
        secondary: '#3f37c9',    // Secondary color
        header: '#000000',       // Header background (defaults to primary)
        footer: '#000000',       // Footer background (defaults to primary)
        
        // Custom CSS
        css: {
            'h1, h2': {
                fontWeight: '700',
                marginBottom: '1.5rem'
            },
            '.card': {
                borderRadius: '0.5rem',
                boxShadow: '0 4px 6px rgba(0,0,0,0.1)'
            }
        }
    }
});

The theme settings affect all components, ensuring a consistent look and feel throughout your site.

Components

CoolHTML provides a variety of components for building common website elements. Each component can be used independently or as part of the site builder.

cool().nav(options)

Creates a responsive navigation bar that adapts to different screen sizes.

Parameters

Property	Type	Description
title or t	String	The brand name shown in the navigation bar
logo	String	URL to a logo image to display beside the title
dark	Boolean	Whether to use dark styling (defaults to true)
fixed	Boolean	Whether the navbar should be fixed at the top
links	Array	Navigation links (strings or objects with text/url/active properties)
button or btn	Object	Call-to-action button configuration

Examples

// Simplest usage with just a title
cool().nav('My Website');

// Full configuration
cool().nav({
    title: 'CoolHTML',
    logo: 'logo.png',
    dark: true,
    fixed: true,
    links: [
        { text: 'Home', url: '#', active: true },
        { text: 'Features', url: '#features' },
        'Contact'  // Automatically converted to {text: 'Contact'}
    ],
    btn: {
        text: 'Get Started',
        type: 'primary',  // or 'secondary', 'success', etc.
        outline: true,    // For outlined button style
        url: '#signup'
    }
});

cool().hero(options)

Creates a hero/banner section, typically used at the top of a page.

Parameters

Property	Type	Description
title or t	String	The main heading
subtitle or st	String	A supporting subheading
background or bg	String	Background color, gradient, or image URL
dark	Boolean	Whether to use light text for dark backgrounds
align	String	Text alignment: 'left', 'center', or 'right' (defaults to 'center')
buttons or btns	Array	Call-to-action buttons
content or text	String	Additional content, supports text formatting

Examples

// Simple hero with just a title
cool().hero('Welcome to My Website');

// Hero with all options
cool().hero({
    title: 'Build Websites Faster',
    subtitle: 'Without writing a single line of HTML',
    background: 'linear-gradient(135deg, #4361ee 0%, #3f37c9 100%)',
    dark: true,
    align: 'center',
    buttons: [
        { text: 'Get Started', type: 'light', size: 'lg' },
        { text: 'Learn More', type: 'light', outline: true }
    ],
    text: 'Create beautiful websites with *minimal* code.'
});

cool().features(options)

Creates a features grid to showcase product or service highlights.

Parameters

Property	Type	Description
title or t	String	Section heading
subtitle or st	String	Section subheading
items or list	Array	Feature items to display
columns or cols	Number	Number of columns (1-4, defaults to 3)
background or bg	String	Section background color or image

Feature Item Properties

Property	Type	Description
title or t	String	Feature name
text or desc	String	Feature description
icon	String	Bootstrap icon name (e.g., 'bi-code') or image URL
iconColor	String	Icon color (applies to Bootstrap icons only)

Examples

// Basic features grid
cool().features({
    title: 'Key Features',
    subtitle: 'Why you should use our product',
    cols: 3,
    items: [
        {
            icon: 'bi-lightning',
            title: 'Fast',
            text: 'Build websites in minutes, not hours'
        },
        {
            icon: 'bi-code-slash',
            title: 'Simple',
            text: 'No HTML knowledge required'
        },
        {
            icon: 'bi-phone',
            title: 'Responsive',
            text: 'Works on all devices'
        }
    ]
});

cool().section(options)

Creates a general content section with flexible configuration.

Parameters

Property	Type	Description
title or t	String	Section heading
subtitle or st	String	Section subheading
content or text	String	Main content HTML or text with formatting
background or bg	String	Section background color or image
dark	Boolean	Whether to use light text for dark backgrounds
id	String	HTML ID for the section (useful for navigation links)
align	String	Content alignment: 'left', 'center', or 'right'

Examples

// Text-only section with automatic formatting
cool().section('This is a simple section with *bold* and _italic_ text.');

// Full configuration
cool().section({
    id: 'about',
    title: 'About Us',
    subtitle: 'Our story and mission',
    text: 'Founded in 2023, we create tools that simplify web development.',
    bg: '#f8f9fa',
    align: 'center'
});

// Using HTML content
cool().section({
    title: 'Custom Content',
    content: `
        
            
                
            
            
                This is custom HTML content.
            
        
    `
});

cool().pricing(options)

Creates a pricing table to showcase different plans or tiers.

Parameters

Property	Type	Description
title or t	String	Section heading
subtitle or st	String	Section subheading
plans or items	Array	Pricing plans to display
background or bg	String	Section background color or image

Plan Properties

Property	Type	Description
title	String	Plan name
price	String	Plan price
period	String	Billing period (e.g., '/month', '/year')
features	Array	List of features (strings or objects with text/included)
featured or primary	Boolean	Whether this is the featured/highlighted plan
buttonText or btn	String	Text for the call-to-action button
url	String	URL for the call-to-action button

Examples

cool().pricing({
    title: 'Pricing Plans',
    subtitle: 'Choose the plan that works for you',
    plans: [
        {
            title: 'Free',
            price: '$0',
            period: '/month',
            features: [
                '1 User',
                '5 Projects',
                { text: 'Priority Support', included: false }
            ],
            btn: 'Sign Up Free'
        },
        {
            title: 'Pro',
            price: '$29',
            period: '/month',
            featured: true,
            features: [
                '5 Users',
                'Unlimited Projects',
                'Priority Support'
            ],
            btn: 'Get Started'
        },
        {
            title: 'Enterprise',
            price: '$99',
            period: '/month',
            features: [
                'Unlimited Users',
                'Unlimited Projects',
                'Dedicated Support'
            ],
            btn: 'Contact Us'
        }
    ]
});

cool().testimonials(options)

Creates a testimonial section to showcase customer reviews.

Parameters

Property	Type	Description
title or t	String	Section heading
subtitle or st	String	Section subheading
items or list	Array	Testimonial items to display
type	String	Display type: 'grid' or 'carousel' (default: 'grid')
background or bg	String	Section background color or image

Testimonial Item Properties

Property	Type	Description
text or quote	String	Testimonial text
name or author	String	Name of the person
title or role	String	Role or position of the person
image	String	URL to the person's photo

Examples

// Grid layout testimonials
cool().testimonials({
    title: 'What Our Customers Say',
    subtitle: 'Real feedback from real users',
    items: [
        {
            text: 'This product has completely transformed our workflow!',
            name: 'Sarah Johnson',
            title: 'Marketing Director',
            image: 'sarah.jpg'
        },
        {
            text: 'The best solution we\'ve found for our team\'s needs.',
            name: 'Michael Chen',
            title: 'Product Manager',
            image: 'michael.jpg'
        },
        {
            text: 'Implementing this tool saved us countless hours.',
            name: 'Emily Rodriguez',
            title: 'Developer',
            image: 'emily.jpg'
        }
    ]
});

// Carousel layout testimonials
cool().testimonials({
    title: 'Testimonials',
    type: 'carousel',
    items: [
        {
            quote: 'The best product I\'ve ever used!',
            author: 'John Doe',
            role: 'CEO, Example Inc.'
        },
        {
            quote: 'Highly recommended for any team.',
            author: 'Jane Smith',
            role: 'CTO, Another Company'
        }
    ]
});

cool().contact(options)

Creates a contact form with optional contact information and map.

Parameters

Property	Type	Description
title or t	String	Section heading
subtitle or st	String	Section subheading
text	String	Descriptive text above the contact form
info	Object	Contact information (email, phone, address)
map	String	URL for an embedded map (e.g., Google Maps)
buttonText or btn	String	Text for the submit button

Examples

// Simple contact form
cool().contact('Contact Us');

// Full configuration
cool().contact({
    title: 'Get In Touch',
    subtitle: 'We\'d love to hear from you',
    text: 'Have questions or feedback? Fill out the form below and we\'ll get back to you as soon as possible.',
    info: {
        email: 'info@example.com',
        phone: '+1 (555) 123-4567',
        address: '123 Main St, City, Country'
    },
    map: 'https://www.google.com/maps/embed?pb=!1m18!1m12!...',
    btn: 'Send Message'
});

cool().footer(options)

Creates a footer section with company information, links, and optional newsletter signup.

Parameters

Property	Type	Description
title	String	Company or product name
text	String	Description or tagline
dark	Boolean	Whether to use dark styling (defaults to true)
links	Array	Navigation links (strings or objects with text/url)
social	Array	Social media links (strings or objects with icon/url/name)
copyright	String	Copyright notice
form	Object	Newsletter signup form configuration

Examples

// Simple footer with copyright
cool().footer('© 2025 My Company');

// Footer with all options
cool().footer({
    title: 'CoolHTML',
    text: 'The ultra-minimal website builder',
    dark: true,
    copyright: '© 2025 CoolHTML. All rights reserved.',
    links: [
        { text: 'Home', url: '#' },
        { text: 'Features', url: '#features' },
        { text: 'Pricing', url: '#pricing' },
        { text: 'Contact', url: '#contact' }
    ],
    social: [
        { icon: 'twitter', url: 'https://twitter.com/example' },
        { icon: 'github', url: 'https://github.com/example' },
        { icon: 'linkedin', url: 'https://linkedin.com/in/example' }
    ],
    form: {
        title: 'Newsletter',
        text: 'Stay updated with our latest features',
        btn: 'Subscribe'
    }
});

Text Formatting

CoolHTML supports simple text formatting with markdown-like syntax for properties that accept text content:

Syntax	Description	Example
`text`	Bold text	Bold text
`_text_`	Italic text	Italic text
`~text~`	Strikethrough text	~~Strikethrough text~~
`--text--`	Highlighted text	Highlighted text
`[text](url)`	Link	Link
Double line break	New paragraph	Paragraph 1 Paragraph 2

Example

cool().section({
    title: 'About Us',
    text: 'We create *beautiful* websites with _minimal_ code.\n\nOur team consists of passionate developers dedicated to simplifying web development. Learn more about our [mission](#).'
});

Advanced Usage

For more complex needs, CoolHTML provides additional methods and capabilities.

Direct HTML Rendering

When you need complete control, you can render custom HTML:

// Render custom HTML
cool().html(`
    
        
            Custom HTML Section
            This is rendered directly without using components.
        
    
`);

Custom CSS

Add custom styles to your site:

// Add CSS as a string
cool().style(`
    .my-custom-section {
        background-color: #f5f5f5;
        border-radius: 8px;
    }
`);

// Add CSS as an object
cool().style(cool().css({
    '.my-section': {
        backgroundColor: '#f5f5f5',
        padding: '2rem',
        '.title': {
            fontSize: '2rem',
            fontWeight: 'bold'
        }
    }
}));

Method Chaining

All CoolHTML methods can be chained for more concise code:

cool()
    .nav('My Website')
    .hero({
        title: 'Welcome',
        subtitle: 'To my awesome website'
    })
    .features({
        title: 'Features',
        items: ['Fast', 'Simple', 'Responsive']
    })
    .footer('© 2025');

Contents

CoolHTML Documentation

Getting Started

Basic Usage

Site Builder

Theme Customization

Components

cool().nav(options)

Parameters

Examples

cool().hero(options)

Parameters

Examples

cool().features(options)

Parameters

Feature Item Properties

Examples

cool().section(options)

Parameters

Examples

cool().pricing(options)

Parameters

Plan Properties

Examples

cool().testimonials(options)

Parameters

Testimonial Item Properties

Examples

cool().contact(options)

Parameters

Examples

cool().footer(options)

Parameters

Examples

Text Formatting

Example

Advanced Usage

Direct HTML Rendering

Custom HTML Section

Custom CSS

Method Chaining