# Res Grid Studio Usage Guide

## 1. Use the Visual Builder

Open `index.html` and choose a preset such as:

- Admin Dashboard
- CRM Dashboard
- Documentation
- Blog Layout
- SaaS Landing
- Ecommerce Grid
- Portfolio Masonry
- Magazine Layout
- Knowledgebase

After selecting a preset, adjust:

- Topbar on/off
- Left sidebar on/off
- Right sidebar on/off
- Footer on/off
- Dark theme on/off
- Boxed container on/off
- Container width
- Sidebar width
- Right sidebar width
- Gap
- Padding
- Border radius
- Primary color
- Accent color
- Background color
- Surface color
- Desktop/tablet/mobile columns

Then copy the generated HTML and CSS.

## 2. Install in Any Project

Add the core CSS files:

```html
<link rel="stylesheet" href="css/res-grid-studio.css">
<link rel="stylesheet" href="css/components.css">
```

Paste the generated HTML into your page.

## 3. Layout Classes

### Basic Layout

```html
<div class="rgs-app rgs-app-basic rgs-has-topbar rgs-has-footer">
  <header class="rgs-topbar">Topbar</header>
  <main class="rgs-content">Content</main>
  <footer class="rgs-footer">Footer</footer>
</div>
```

### Left Sidebar Layout

```html
<div class="rgs-app rgs-app-left-sidebar rgs-has-topbar rgs-has-footer">
  <header class="rgs-topbar">Topbar</header>
  <aside class="rgs-sidebar">Sidebar</aside>
  <main class="rgs-content">Content</main>
  <footer class="rgs-footer">Footer</footer>
</div>
```

### Right Sidebar Layout

```html
<div class="rgs-app rgs-app-right-sidebar rgs-has-topbar rgs-has-footer">
  <header class="rgs-topbar">Topbar</header>
  <main class="rgs-content">Content</main>
  <aside class="rgs-rightbar">Right Sidebar</aside>
  <footer class="rgs-footer">Footer</footer>
</div>
```

### Two Sidebar Layout

```html
<div class="rgs-app rgs-app-two-sidebars rgs-has-topbar rgs-has-footer">
  <header class="rgs-topbar">Topbar</header>
  <aside class="rgs-sidebar">Left Sidebar</aside>
  <main class="rgs-content">Content</main>
  <aside class="rgs-rightbar">Right Sidebar</aside>
  <footer class="rgs-footer">Footer</footer>
</div>
```

## 4. Responsive Grid Classes

```html
<div class="rgs-grid rgs-grid-4 rgs-grid-md-2 rgs-grid-sm-1">
  <div class="rgs-card">One</div>
  <div class="rgs-card">Two</div>
  <div class="rgs-card">Three</div>
  <div class="rgs-card">Four</div>
</div>
```

This means:

- Desktop: 4 columns
- Tablet: 2 columns
- Mobile: 1 column

## 5. Theme Variables

```css
:root{
  --rgs-primary:#2563eb;
  --rgs-accent:#7c3aed;
  --rgs-bg:#f6f8fc;
  --rgs-surface:#ffffff;
  --rgs-container:1280px;
  --rgs-sidebar-width:260px;
  --rgs-right-width:300px;
  --rgs-gap:20px;
  --rgs-padding:24px;
  --rgs-radius:16px;
}
```

## 6. Utility Classes

```txt
rgs-grid
rgs-grid-1 to rgs-grid-6
rgs-grid-md-1 to rgs-grid-md-3
rgs-grid-sm-1 to rgs-grid-sm-2
rgs-flex
rgs-center
rgs-between
rgs-wrap
rgs-gap-10 / rgs-gap-20 / rgs-gap-30 / rgs-gap-40
rgs-p-10 / rgs-p-20 / rgs-p-30 / rgs-p-40
rgs-mt-10 / rgs-mt-20 / rgs-mt-30 / rgs-mt-40
rgs-hidden-sm / rgs-hidden-md / rgs-hidden-lg
```

## 7. Framework Usage

### React / Next.js

Copy the React code from the builder and paste it into a component file.

```jsx
export default function DashboardLayout(){
  return <div className="rgs-app rgs-app-left-sidebar rgs-has-topbar">...</div>
}
```

### Tailwind

The Tailwind tab generates a Tailwind-style layout snippet for users who prefer utility-first code.

## 8. Why This Is Useful

Instead of writing repetitive dashboard, blog, documentation and ecommerce layouts manually, users can visually configure the layout and copy clean production-ready code.