Postcss-responsive NPM

PostCSS Responsive

PostCSS plugin that simplifies the creation of adaptive design with custom responsive() function.

Usage

Step 1: Install plugin:

npm install --save-dev postcss postcss-responsive

Step 2: Check your project for existing PostCSS config: .postcssrc in the project root, "postcss" section in package.json or postcss in bundle config.

If you do not use PostCSS, add it according to official docs and set this plugin in settings.

Step 3: Add the plugin to your PostCSS config:

{
  "plugins": {
+    "postcss-responsive": {
+      "minWidth": 480,
+      "maxWidth": 1280,
+    },
    "autoprefixer": {}
  }
}

Step 4: Just add responsive() function into your CSS code. This function can take 2 or 4 arguments: minimum and maximum value and minimum and maximum viewport width (You can set it in plugin settings).

Options

minWidth

The minimum value of the viewport, starting from which we will build a fluid layout. By default, it is not preserved.

maxWidth

The maximum value of the viewport, ending with which we will build a fluid layout. By default, it is not preserved.

funcName

You can set your own CSS function name. Default value is responsive

legacy

Use vw units instead of vi. Default value is false

Example

Input

.container {
  display: grid;
  grid-template-columns: responsive(180px, 240px) 1fr;
  grid-gap: responsive(8px, 16px);
  padding: responsive(16px, 32px) responsive(16px, 24px);
  font-size: responsive(1rem, 1.125rem, 400px, 800px);
  line-height: responsive(1.5rem, 1.75rem, 400px, 800px);
}

Output

.container {
  display: grid;
  grid-template-columns: clamp(11.25rem, 9rem + 7.5vi, 15rem) 1fr;
  grid-gap: clamp(0.5rem, 0.2rem + 1vi, 1rem);
  padding: clamp(1rem, 0.4rem + 2vi, 2rem) clamp(1rem, 0.7rem + 1vi, 1.5rem);
  font-size: clamp(1rem, 0.875rem + 0.5vi, 1.125rem);
  line-height: clamp(1.5rem, 1.25rem + 1vi, 1.75rem);
}