AdaptiFlow — Automatic responsive for CSS/SCSS in one second. Press Ctrl+Shift+A and your website becomes adaptive to any screen.

Features

Auto-Adapt: One click — and your CSS becomes fully responsive. Analyzes the entire file and fixes all problems automatically.
Clampify: Converts fixed values to smooth clamp() with calc() for fluid typography and spacing.
Fix Flex/Grid: Adds flex-wrap: wrap to flex containers and converts fixed grid columns to repeat(auto-fit, minmax(...)).
Generate Media Queries: Creates media queries for any breakpoints (mobile, tablet, desktop, wide).
Responsive Gap: Automatically converts fixed gap values to clamp() for adaptive spacing.
25+ Fixes: Images, video, iframes, buttons, forms, tables, cards, sidebars, navigation, gap, and more.
Lightning Fast: All adaptivity takes less than a second.
SCSS Support: Fully works with SCSS syntax.
Safe: Only adds necessary properties, never deletes your original code. Ctrl+Z works.

How It Works

Installing the application

Open VS Code
Press Ctrl+Shift+X (or Cmd+Shift+X on Mac)
Search for AdaptiFlow
Click Install

Quick start

Go to the .css file with your styles
Launch AdaptiFlow: press Ctrl+Shift+A (or Cmd+Shift+A on Mac).
You will see the changes in the css file.

Example: Clampify in action

Before:

css
.title {
    font-size: 32px;
}

After:

css
.title {
     font-size: clamp(16px, calc(8px + 2vw), 32px);
}

CSS Classes Cheat Sheet

AdaptiFlow recognizes and optimizes these class names automatically:

Class	Description	What AdaptiFlow Does
LAYOUT & CONTAINERS
`.container`	Main content wrapper	Adds `max-width: 1200px; margin: 0 auto`
`.wrapper`	Alternative container	Adds `max-width: 1200px; margin: 0 auto`
`.main`	Primary content area	Makes width responsive
`.content`	Content section	Full width on mobile
GRID & CARDS
`.cards-grid`	Card grid layout	Adds `flex-wrap: wrap` or `auto-fit`
`.grid`	Generic grid	Converts to responsive grid
`.row`	Flexbox row	Adds `flex-wrap: wrap`
`.card`	Individual card	`width: 100%; max-width: original`
NAVIGATION
`.main-nav`	Primary navigation	Vertical on mobile (`flex-direction: column`)
`.nav`	Navigation container	Adds `flex-wrap: wrap`
`.menu`	Menu wrapper	Responsive navigation
SIDEBARS
`.sidebar`	Side panel	`width: 100%; max-width: 300px` on mobile
`.two-columns`	Two column layout	Changes to `flex-direction: column` on mobile
GALLERY
`.gallery`	Image gallery	`grid-template-columns: repeat(auto-fit, minmax(...))`
`.gallery-item`	Gallery element	Responsive images inside
TABLES
`.data-table`	Data table	Adds horizontal scroll on mobile
`.table-wrapper`	Table container	`overflow-x: auto`
FORMS
`.contact-form`	Contact form	Full width inputs on mobile
`input, textarea, select`	Form elements	`width: 100%; max-width: 100%`
BUTTONS
`.btn`	Button	`width: 100%` on mobile
TYPOGRAPHY
`h1, h2, h3`	Headings	`font-size: clamp()`
`img, video, iframe`	Media	`max-width: 100%; height: auto`
SPACING
`gap`	Grid/Flex spacing	`gap: clamp(min, 3vw, max)`
HELPERS
`.hide-on-mobile`	Hidden on mobile	`display: none` on screens < 768px
`.show-on-mobile`	Visible on mobile	`display: block` on screens < 768px

Settings

Create a .vscode/settings.json file in your project:

{
    "adaptiflow.mobileBreakpoint": 768,
    "adaptiflow.tabletBreakpoint": 1024,
    "adaptiflow.desktopBreakpoint": 1200,
    "adaptiflow.wideBreakpoint": 1440,
    "adaptiflow.useClamp": true,
    "adaptiflow.autoFixOnSave": false,
    "adaptiflow.clampMinRatio": 0.5,
    "adaptiflow.previewEnabled": true
}