v1.0.0 - Open Source

Valentine's Day Boilerplate

A creative CSS & JavaScript template framework for building romantic themed applications with beautiful components and animations.

Get Started 💖 View Components
UI Library

Components

Beautiful, reusable UI components ready for your Valentine's themed projects

🔘 Buttons

<button class="btn btn-primary">Primary</button> <button class="btn btn-romantic">Romantic</button>

🎴 Cards

Love Card

With accent border

Glass Card

Glassmorphism style

<div class="card card-love">...</div> <div class="card card-glass">...</div>

🏷️ Badges & Tags

Primary Secondary Outline Love 💕
Romance 💖 Hearts Dreamy
<span class="badge badge-love">Love</span> <span class="tag">Romance</span>

📝 Form Elements

<input class="input input-romantic" placeholder="..."> <textarea class="input textarea"></textarea>

🔔 Alerts

💕 You have a secret admirer!
✅ Love letter sent successfully!
⚠️ Don't forget Valentine's Day!
<div class="alert alert-love">Message</div>

📊 Progress & Loaders

Love Meter: 75%

💖
<div class="progress"> <div class="progress-bar" style="width: 75%"></div> </div>
Design System

Color Palette

A romantic color system designed for Valentine's Day themes

🎨 Primary Colors

Red
Pink
Rose Gold
Wine
Burgundy
Blush

🌈 Gradients

Romantic
Sunset
Blush
Wine
CSS Framework

Utility Classes

Tailwind-inspired utilities for rapid development

📐 Layout

  • .flex .grid
  • .items-center
  • .justify-between
  • .gap-4 .gap-8
  • .container

📏 Spacing

  • .p-4 .p-8
  • .m-auto .mx-auto
  • .mt-6 .mb-8
  • .py-12 .px-6

🎨 Colors

  • .text-red .text-pink
  • .bg-blush .bg-wine
  • .bg-gradient-romantic
  • .bg-glass

✍️ Typography

  • .font-script .font-heading
  • .text-xl .text-hero
  • .font-bold
  • .text-center

🔲 Borders

  • .rounded-lg .rounded-full
  • .rounded-heart
  • .border .border-pink
  • .shadow-glow

📱 Responsive

  • .md:flex .lg:grid
  • .md:grid-cols-2
  • .sm:hidden
Motion

Animations

Beautiful animations to bring your designs to life

💓 Animation Classes

💖 🌹 💕 🎈 ✨
.animate-heartbeat .animate-float .animate-pulse-glow .animate-swing .animate-sparkle

🎬 Interactive Demo

Click anywhere in this area!

💕

Heart burst effect on click

⏱️ Valentine's Day Countdown

00
Days
00
Hours
00
Minutes
00
Seconds

Until Valentine's Day 💕

Get Started

Quick Start

Start building your Valentine's themed app in minutes

Include the CSS files

Add the stylesheets to your HTML head

<link rel="stylesheet" href="css/variables.css"> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/components.css"> <link rel="stylesheet" href="css/utilities.css"> <link rel="stylesheet" href="css/animations.css">

Include the JavaScript

Add before closing body tag

<script src="js/valentine.js"></script>

Use the components

Start building with utility classes

<button class="btn btn-romantic"> Send Love 💕 </button>

Initialize JavaScript features

Use the Valentine API

// Floating hearts const hearts = new Valentine.FloatingHearts('#container'); hearts.start(); // Heart burst on click const burst = new Valentine.HeartBurst(); burst.bindTo('.btn'); // Countdown to Valentine's Day const countdown = new Valentine.Countdown( Valentine.Countdown.getNextValentinesDay() ); countdown.start();

📁 Project Structure

valentine-boilerplate/
├── css/
│   ├── variables.css    # Design tokens
│   ├── base.css         # Reset & typography
│   ├── components.css   # UI components
│   ├── utilities.css    # Utility classes
│   └── animations.css   # Keyframes & effects
├── js/
│   └── valentine.js     # Core library
├── pages/               # Example pages
│   ├── landing.html
│   └── love-letter.html
└── index.html           # This showcase
💕

Ready to spread love?

Build beautiful romantic experiences!