minside-css

Minside CSS is a lightweight front-end framework built with clarity and consistency in mind. Designed for developers who want structured components without unnecessary complexity.

✨ Features

Component-based architecture Utility-first helpers (spacing, flex, opacity, borders, colors) Clean minimal design system Vanilla JS interactive components No dependencies Easy to customize Lightweight and fast

📦 Installation

Clone Repository

git clone https://github.com/martajasa/minside-css.git
cd minside-css

🚀 Quick Start

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="dist/minside.css">
</head>
<body>

  <div class="ms-container">
    <h1 class="ms-text-center">Hello Minside</h1>
    <button class="ms-btn ms-btn-primary">
      Get Started
    </button>
  </div>

  <script src="dist/minside.js"></script>
</body>
</html>

🧱 Components

Minside CSS includes:

● Buttons ● Cards ● Navbar ● Hero ● Tables ● Accordion ● Dropdown ● Carousel ● Modal ● Forms ● Lists ● Alerts ● Utilities (flex, spacing, borders, opacity, colors, etc.)

Full documentation is available inside the /docs folder.

📁 Project Structure

minside-css/
│
├── dist/
│   ├── minside.css
│   └── minside.js
│
├── docs/
│   ├── index.html
│   ├── playground.html
│   ├── docs.css
│   ├── docs.js
│   └── assets/
│       ├── logo.svg
│       └── favicon.ico
│
├── .github/
│   └── workflows/
│       └── deploy.yml
│
└── README.md

🎨 Design Philosophy

Minside CSS is built around:

✅ Minimalism over decoration ✅ Consistency over chaos ✅ Components over scattered utilities ✅ Readability over trend

It avoids heavy visual noise and focuses on clarity and structure.

🔎 Documentation

Since GitHub Pages is already used for another site, documentation can be:

✔ Hosted on custom domain ✔ Deployed via Vercel / Netlify ✔ Served locally ✔ Hosted inside subfolder of another domain

To preview locally:

cd docs
npx serve

or simply open docs/index.html in browser.

🛠 Customization

You can customize:

● Color palette ● Spacing scale ● Border radius ● Typography scale ● Component variables

Edit values inside:

dist/minside.css

📈 Roadmap

● Dark mode ● Grid system ● Theme generator ● Component generator CLI ● NPM package release

🧪 Development

If you want to extend:

Edit dist/minside.css Edit dist/minside.js Update docs Commit

🤝 Contributing

This project is currently personal-first.

♥️ Pull requests are welcome for:

✔ Bug fixes ✔ Improvements ✔ Performance enhancements ✔ Accessibility upgrades

📄 License

MIT License You are free to use, modify, and distribute this project.

👤 Author

Created by Armin Martajasa GitHub: https://github.com/martajasa

⭐ Support

If you like this project:

❤ Star the repository ❤ Fork it ❤ Use it in your projects

Minside CSS is built with simplicity and intention.