Features

• 📱 Mobile-first approach
• 🔧 Flexible grid system
• 🌈 Customizable via CSS variables
• 🚀 Lightweight and easy to use

Installation

<link rel="stylesheet" href="respi.css">

Basic Usage

Container

<div class="container">
  <div class="row">
    <div class="col col-sm-6 col-md-4">
      Content
    </div>
  </div>
</div>

Responsive Columns

• .col: Full width by default
• .col-sm-*: Small screens
• .col-md-*: Medium screens
• .col-lg-*: Large screens

Example Breakpoints

• Small (576px): 50% / 33% / 25%
• Medium (768px): 50% / 33% / 25%
• Large (992px): 50% / 33% / 25%

Customization

Modify CSS variables in :root:

:root {
  --color-primary: #007bff;
  --spacing-base: 0.5rem;
  --font-base: system-ui, sans-serif;
}

Demo

https://jsfiddle.net/e1absz3m/

Browser Support

• Modern browsers
• Flexbox support: IE 11+

License

MIT License