Simple Morph
Getting Started Documentation Customization

Simple Morph

A streamlined CSS framework with essential components only. Copy two files and start building beautiful, modern interfaces with advanced glassmorphism effects.

Getting Started

Simple Morph is designed for maximum simplicity. Just copy two files and start building!

1

Copy the Files

Download simple-morph.css and simple-morph.js to your project folder.

2

Include in HTML

Add the CSS and JS files to your HTML document.

3

Start Building

Use the components and utilities to create beautiful interfaces.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="simple-morph.css">
</head>
<body>
    <h1>Hello World!</h1>
    <script src="simple-morph.js"></script>
</body>
</html>

Essential Components

Only the components you actually need: typography, buttons, forms, cards, alerts, and navigation.

Zero Build Process

No npm, no webpack, no compilation. Just copy two files and start building.

Mobile First

Responsive design with mobile navigation and touch-friendly interactions.

Accessible

WCAG compliant with proper focus states, ARIA attributes, and keyboard navigation.

Advanced Glassmorphism

Multiple glass variants with interactive effects and dynamic intensity.

Performance Optimized

GPU-accelerated animations with throttled scroll events and efficient rendering.

Typography

Beautiful typography with gradient text effects for headings and semantic HTML support.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

This is a paragraph with strong text and emphasized text.

This is a blockquote with glassmorphism styling.

Inline code with syntax highlighting.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>Paragraph with <strong>strong</strong> and <em>emphasis</em>.</p>
<blockquote>Beautiful blockquote</blockquote>
<p>Inline <code>code</code> example.</p>

Buttons

Essential button variants with hover effects and accessibility support.

Link Button 
<button>Default Button</button>
<button class="button-primary">Primary</button>
<button class="button-secondary">Secondary</button>
<a href="#" class="button">Link Button</a>

Forms

Clean form styling with validation states and accessibility features.

<form>
  <label for="name">Name</label>
  <input type="text" id="name" required>
  
  <label for="email">Email</label>
  <input type="email" id="email" required>
  
  <label for="message">Message</label>
  <textarea id="message" rows="4"></textarea>
  
  <label>
    <input type="checkbox" required>
    I agree to the terms and conditions
  </label>
  
  <button type="submit">Send</button>
</form>

Cards

Glassmorphism cards with hover effects for content organization.

Feature Card

This is a basic card with glassmorphism styling and hover effects.

Enhanced Glass Card

Enhanced glass effect with the .glass-strong utility class.

<div class="card">
    <h3>Basic Card</h3>
    <p>Simple card with glass effect.</p>
</div>

<div class="card glass-strong">
    <h3>Enhanced Card</h3>
    <p>With stronger glass effect.</p>
</div>

Tables

Clean table styling with responsive behavior and glassmorphism effects.

Name Role Email Status
John Doe Developer john@example.com Active
Jane Smith Designer jane@example.com Active
Bob Johnson Manager bob@example.com Inactive 
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Role</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>Developer</td>
      <td>john@example.com</td>
    </tr>
  </tbody>
</table>

Alerts

Essential alert variants for user feedback and notifications.

Success! Your action was completed successfully.
Warning! Please review your input before proceeding.
Error! Something went wrong. Please try again. 
<div class="alert alert-success">
    <strong>Success!</strong> Action completed.
</div>

<div class="alert alert-warning">
    <strong>Warning!</strong> Please review.
</div>

<div class="alert alert-error">
    <strong>Error!</strong> Try again.
</div>

Utilities

Advanced glassmorphism utilities and interactive effects for modern interfaces.

Glass Variants

Standard Glass

Strong Glass

Frosted Glass

Vibrant Glass

Minimal Glass

Interactive Effects

Morph Hover
Lift Effect

Progress & Navigation

Home
About
Contact
<!-- Glass morphism variants -->
<div class="glass">Standard glass</div>
<div class="glass-strong">Strong glass</div>
<div class="glass-frosted">Frosted glass</div>
<div class="glass-vibrant">Vibrant glass</div>
<div class="glass-minimal">Minimal glass</div>

<!-- Interactive effects -->
<div class="glass-interactive">Interactive</div>
<div class="morph-hover">Morph on hover</div>
<div class="morph-lift">Lift effect</div>
<div class="hover-shimmer">Shimmer effect</div>

<!-- Progress bar -->
<div class="progress-glass">
  <div class="progress-fill" style="width: 65%;"></div>
</div>

<!-- Navigation pills -->
<div class="nav-pills-glass">
  <div class="nav-item active">Home</div>
  <div class="nav-item">About</div>
</div>

<!-- Backdrop filters -->
<div class="backdrop-blur-lg">Large blur</div>
<div class="backdrop-saturate">Saturated</div>

<!-- Animations -->
<div class="animate-fade-in">Fade in</div>
<div class="animate-slide-up">Slide up</div>
<div class="hover-pulse">Pulse on hover</div>

Customization

Easy theming through CSS custom properties. No build process required!

Available CSS Variables:

  • --accent-primary - Primary accent color
  • --accent-secondary - Secondary accent color
  • --bg-primary - Primary background
  • --bg-secondary - Secondary background
  • --text-primary - Primary text color
  • --border-radius - Border radius
  • --spacing-* - Spacing scale
<style> :root { /* Custom theme colors */ --accent-primary: #ff6b6b; --accent-secondary: #4ecdc4; --border-radius: 8px; /* Custom spacing */ --spacing-lg: 2rem; } </style>

JavaScript API

Enhanced JavaScript API with glassmorphism utilities and interactive effects.

Core Methods:

  • SimpleMorph.toggleMobileMenu() - Toggle mobile menu
  • SimpleMorph.applyGlass(selector, type) - Apply glass effects
  • SimpleMorph.animateElements(selector) - Animate elements
  • SimpleMorph.setGlassIntensity(selector, intensity) - Dynamic glass
  • SimpleMorph.addRippleEffect(selector) - Add ripple effects
Target Element for Testing

Utility Functions:

  • SimpleMorph.utils.debounce() - Debounce utility
  • SimpleMorph.utils.throttle() - Throttle utility
  • SimpleMorph.utils.isInViewport() - Viewport detection
  • SimpleMorph.utils.getScrollPercent() - Scroll percentage
  • SimpleMorph.utils.createRipple() - Create ripple effects
// Apply glass effects dynamically
SimpleMorph.applyGlass('.my-element', 'frosted');

// Animate elements with stagger
SimpleMorph.animateElements('.card', 'fadeIn', 150);

// Set dynamic glass intensity (0-1)
SimpleMorph.setGlassIntensity('.glass', 0.8);

// Add ripple effect to buttons
SimpleMorph.addRippleEffect('button');

// Use utility functions
const debouncedFn = SimpleMorph.utils.debounce(
    () => console.log('Debounced!'), 
    300
);

// Get scroll percentage
const scrollPercent = SimpleMorph.utils.getScrollPercent();

// Check if element is in viewport
const isVisible = SimpleMorph.utils.isInViewport(
    document.querySelector('.card')
);

Performance & Accessibility

Built with performance and accessibility in mind from the ground up.

🏃‍♂️ Performance

  • Respects prefers-reduced-motion
  • Efficient event handling
  • Minimal JavaScript footprint
  • GPU-accelerated animations

♿ Accessibility

  • WCAG 2.1 AA compliant
  • Proper ARIA attributes
  • Keyboard navigation
  • Focus management
  • Screen reader support

📱 Responsive

  • Mobile-first design
  • Touch-friendly interactions
  • Flexible grid system
  • Adaptive typography

🎨 Modern

  • Glassmorphism effects
  • CSS Grid & Flexbox
  • Custom properties
  • Gradient text effects