mmy-css

v1.0.4

Published

a month ago

A modern, lightweight, fast-loading CSS framework.

0High
0Medium
0Low

mmy-lana

css css-framework mmy-css responsive flexbox grid ui-kit lightweight-css design-system

mmy-css ⚡

A modern, ultra-lightweight CSS framework under 1.2 KB gzipped.

🌟 Why mmy-css?

Most CSS frameworks ship dozens of kilobytes of unneeded rules. mmy-css gives you a responsive layout, modern typography, forms, buttons, cards, tables, and auto dark mode—all in a package smaller than a single icon.

📦 Micro Bundle: Under 1.2 KB gzipped (~3.1 KB uncompressed).
🚀 Zero Dependencies & Zero JS: Pure CSS built on modern web standards.
🎨 Themeable: Powered by CSS custom properties (:root variables).
🌙 Automatic Dark Mode: Out-of-the-box support for prefers-color-scheme: dark.
📐 Zero-Specificity Resets: Uses :where() selectors so you can override styles effortlessly without !important.
🔤 Fluid Typography: Uses CSS clamp() for responsive text scaling across all viewports.

🚀 Quick Start

Option 1: Install via NPM

npm install mmy-css

Import it in your main JavaScript / TypeScript entry point (React, Vue, Svelte, Next.js, Vite, etc.):

import 'mmy-css';

Option 2: Use via CDN (No Build Step)

Drop this single line into the <head> of your HTML file:

<!-- unpkg CDN -->
<link rel="stylesheet" href="https://unpkg.com/mmy-css/dist/mmy.min.css">

<!-- jsDelivr CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mmy-css/dist/mmy.min.css">

🎨 Design System & Customization

mmy-css uses CSS custom properties for instant re-theming. Override any token in your own stylesheet:

:root {
  --primary: #8b5cf6;        /* Change primary brand color */
  --primary-hover: #7c3aed;  /* Change button hover color */
  --radius: 0.75rem;         /* Make all cards/buttons extra rounded */
  --font-sans: 'Inter', system-ui, sans-serif;
}

Available Tokens

| Token | Default (Light) | Default (Dark) | Description | | :--- | :--- | :--- | :--- | | --bg | #ffffff | #0f172a | Main page background | | --surface | #f9fafb | #1e293b | Card & table background | | --text | #111827 | #f8fafc | Primary text color | | --text-muted | #6b7280 | #94a3b8 | Secondary / caption text | | --border | #e5e7eb | #334155 | Hairline border color | | --primary | #2563eb | #3b82f6 | Brand / action color | | --radius | 0.375rem | 0.375rem | Corner rounding radius |

📖 Component Examples

1. Buttons & Badges

<!-- Primary Button -->
<button class="btn">Click Me</button>

<!-- Outline Button -->
<button class="btn btn-outline">Outline</button>

<!-- Link styled as a Button -->
<a href="#" class="btn">Link Button</a>

<!-- Pill Badge -->
<span class="badge">New Release</span>

2. Form Controls

<input type="text" class="input" placeholder="Your name...">

<select class="select">
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<textarea class="textarea" placeholder="Message..."></textarea>

3. Cards & Auto-Fit Grid

No media queries required! The grid automatically adjusts column counts based on container width.

<div class="grid">
  <div class="card">
    <h3>Card Title 1</h3>
    <p class="text-muted">Auto responsive column.</p>
  </div>
  <div class="card">
    <h3>Card Title 2</h3>
    <p class="text-muted">Auto responsive column.</p>
  </div>
</div>

4. Flex Utilities

<div class="flex items-center justify-between">
  <h2>Dashboard</h2>
  <button class="btn">Add New</button>
</div>

🌙 Dark Mode

Dark mode is 100% automatic based on the user's system preferences (prefers-color-scheme).

If you want to allow users to manually toggle dark/light mode with a button, set the color-scheme property on <html> using JavaScript:

// Toggle between light and dark mode
const isDark = document.documentElement.style.getPropertyValue('color-scheme') === 'dark';
document.documentElement.style.setProperty('color-scheme', isDark ? 'light' : 'dark');

🛠️ Local Development

If you want to contribute or build mmy-css locally:

# 1. Clone repository
git clone https://github.com/mmy-lana/mmy-css.git
cd mmy-css

# 2. Install dev dependencies
npm install

# 3. Start dev server & watch mode
npm run dev

# 4. Build minified bundle & check gzipped size
npm run build

📄 License

Distributed under the MIT License. Created by Muhammad maulana Yusuf (@mmy-lana).