Crème — Elegant Vanilla JS Toast & Notification Widget

Overview

Crème is a refined, self-contained notification and toast widget crafted in pure vanilla JavaScript with zero dependencies. Wrapped in a warm crème-and-cocoa visual language — soft ivory backgrounds, warm sepia accents, gentle caramel highlights — it brings a taste of bespoke boutique design to any web project. Forget the cold blue system alerts or aggressively purple popups: Crème is built for websites and apps that value warmth, readability and quiet sophistication.

Drop in one <script> tag and one <link> tag. That's it. No build step, no npm, no bundler required. Crème works in any static site, CMS theme, landing page or admin panel.

Who It's For

• Frontend developers tired of restyling noisy third-party toast libraries.
• Designers who want notification UI that matches a warm, editorial or boutique aesthetic.
• Landing page & marketing site builders wanting polished success/error feedback without heavy dependencies.
• Theme and template authors looking for a lightweight, plug-and-play notification component to bundle.

Key Features in Depth

Crème ships four notification types — success, error, warning, and info — each with its own warm icon, colour tint and tone. Toasts stack vertically with smooth CSS slide-in and fade-out transitions. A configurable auto-dismiss timer with a live progress bar gives the user a clear visual cue before the notification disappears. Toasts can also be dismissed manually via a close button with a hover state that feels intentional, not tacked-on.

Position is fully configurable: top-right, top-left, bottom-right or bottom-left, set globally or per-call. A maximum stack limit prevents the screen from flooding. All API options are set through a clean JavaScript object, making integration with any codebase trivial.

What's Included

• index.html — fully styled interactive demo showcasing all toast types, positions and options.
• creme-toast.js — the standalone widget script (~120 lines, heavily commented).
• README.md — usage guide, API reference and customisation notes.

How to Customise / Get Started

1. Add <script src="creme-toast.js"></script> to your page. The widget injects its own CSS automatically — no separate stylesheet needed.
2. Call CremeToast.show({ message: "Saved!", type: "success" }) from any event handler.
3. Tweak the CSS custom properties at the top of creme-toast.js (colour tokens, font, border-radius, shadow) to match your brand palette in seconds.
4. Set global defaults once with CremeToast.configure({ position: "bottom-right", duration: 4000 }).