Simple Morph CSS Framework

A modern CSS framework inspired by Simple.css with futuristic dark theme, glassmorphism effects, and semantic HTML-first approach.

🏷️ Semantic First

Start with standard HTML elements. No classes required for basic styling.

🎨 Glass Effects

Beautiful glassmorphism effects with customizable blur and opacity levels.

📱 Mobile Ready

Responsive design that works perfectly on all devices out of the box.

Explore Components Advanced Features

Semantic Components

These components work with standard HTML elements and require minimal or no CSS classes. Perfect for getting started quickly with semantic, accessible markup.

Typography & Text Elements

All typography uses rem for sizing to maintain accessibility for users who change their browser font size. The body element has a size of 1.15rem (18.4px) following Simple.css sizing approach.

Heading 1 (3rem)

Heading 2 (2.6rem)

Heading 3 (2rem)

Heading 4 (1.44rem)

Heading 5 (1.15rem)

Heading 6 (0.96rem)

Text Formatting

This paragraph demonstrates various text formatting options:

Bold text for emphasis, italic text for subtle emphasis, underlined text for highlighting, and marked text for important information.

Small text for fine print and ~~deleted text~~ with inserted text for showing changes.

Lists

Unordered list with custom bullet styling
Glassmorphism effects applied automatically
No classes needed for basic styling
Nested lists work seamlessly:
- Nested item one
- Nested item two

Ordered list with custom numbering
Futuristic styling applied automatically
No classes needed for basic styling

Show Code Example

<!-- Typography Examples -->
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p><strong>Bold text</strong> and <em>italic text</em></p>
<p><mark>Highlighted text</mark> and <small>small text</small></p>

<!-- Lists -->
<ul>
    <li>Unordered list item</li>
    <li>Another item</li>
</ul>

<ol>
    <li>Ordered list item</li>
    <li>Another item</li>
</ol>

Code Elements

Inline code: const framework = 'simple-morph';

// Code block example
function initFramework() {
  console.log('🚀 Simple Morph CSS Framework');
  return {
    theme: 'dark',
    style: 'glassmorphism',
    philosophy: 'semantic-first'
  };
}

Show Code Example

<!-- Inline Code -->
<p>Inline code: <code>const framework = 'simple-morph';</code></p>

<!-- Code Block -->
<pre><code>// Code block example
function initFramework() {
  console.log('🚀 Simple Morph CSS Framework');
  return {
    theme: 'dark',
    style: 'glassmorphism',
    philosophy: 'semantic-first'
  };
}</code></pre>

Basic Buttons

Standard HTML buttons with automatic styling. Add optional classes for different variants:

Show Code Example

<!-- Default button (no classes needed) -->
<button>Default Button</button>

<!-- Button variants with optional classes -->
<button class="button-primary">Primary Button</button>
<button class="button-secondary">Secondary Button</button>
<button class="button-success">Success Button</button>
<button class="button-warning">Warning Button</button>
<button class="button-error">Error Button</button>
<button class="button-outline">Outline Button</button>
<button disabled>Disabled Button</button>

Basic Forms

Standard HTML form elements with automatic styling:

Show Code Example

<!-- Basic Form Elements -->
<form>
    <label for="name">Full Name</label>
    <input type="text" id="name" placeholder="Enter your name">

    <label for="email">Email</label>
    <input type="email" id="email" placeholder="your@email.com">

    <label for="subject">Subject</label>
    <select id="subject">
        <option>Choose a subject</option>
        <option>General Inquiry</option>
    </select>

    <label for="message">Message</label>
    <textarea id="message" placeholder="Your message..."></textarea>

    <label class="checkbox-label">
        <input type="checkbox">
        I agree to the terms
    </label>

    <button type="submit" class="button-primary">Submit</button>
</form>

Quick Start

Get started with Simple Morph in seconds. Just include the CSS file and start writing semantic HTML:

<!-- Include Simple Morph CSS -->
<link rel="stylesheet" href="simple-morph.css">

<!-- Write semantic HTML -->
<main>
    <h1>My Website</h1>
    <p>Beautiful styling applied automatically!</p>
    <button>Click me</button>
</main>

Next Steps

🧩 Explore Components

Discover enhanced UI components like cards, navigation, and interactive elements.

⚡ Advanced Features

Unlock powerful glass effects, animations, and complex interactive components.