https://github.com/alekseypleshkov/postcss-adaptive-size

PostCSS plugin for create adaptive size
https://github.com/alekseypleshkov/postcss-adaptive-size

postcss postcss-adaptive-size postcss-plugin

Last synced: 8 days ago
JSON representation

PostCSS plugin for create adaptive size

• Host: GitHub
• URL: https://github.com/alekseypleshkov/postcss-adaptive-size
• Owner: AlekseyPleshkov
• Created: 2018-03-12T09:19:42.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-11-01T08:48:28.000Z (about 6 years ago)
• Last Synced: 2024-10-07T14:47:52.994Z (about 1 month ago)
• Topics: postcss, postcss-adaptive-size, postcss-plugin
• Language: JavaScript
• Size: 5.86 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# postcss-adaptive-size

PostCSS plugin for create adaptive (viewport) sizes

## Install

```

yarn add postcss-adaptive-size --save

```

## Example

### Input

```css

.el {

  adaptive: 300px 200px;

}

.el2 {

  viewport: 100px 1200px vw, 100px 768px vh;

}

.el3 {

  viewport-padding: 100px 1200px vw, 100px 768px vh, 0px;

}

.el4 {

  viewport-margin: 100px 1200px vw, 100px 768px vh, 0px;

}

```

### Output

```css

.el {

  width: 100%;

  max-width: 300px;

  height: auto;

  min-height: 200px;

}

.el2 {

  width: 100px;

  width: 100px/1200px*100vw;

  height: 100px;

  height: 100px/768px*100vh;

}

.el3 {

  padding: 100px/1200px*100vw 100px/768px*100vh 0px;

}

.el4 {

  margin: 100px/1200px*100vw 100px/768px*100vh 0px;

}

```