https://github.com/ryanve/area.css

CSS functional width and height module
https://github.com/ryanve/area.css

css dimensions functional-css height responsive width

Last synced: about 1 month ago
JSON representation

CSS functional width and height module

• Host: GitHub
• URL: https://github.com/ryanve/area.css
• Owner: ryanve
• License: isc
• Created: 2017-05-26T23:39:57.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-07-24T00:48:53.000Z (over 7 years ago)
• Last Synced: 2024-10-04T11:35:24.873Z (about 1 month ago)
• Topics: css, dimensions, functional-css, height, responsive, width
• Language: CSS
• Homepage: https://ryanve.github.io/area.css/
• Size: 11.7 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# area.css

```

npm install area.css

```

```css

@import 'node_modules/area.css/area';

```

## [classes](area.css)

### `width`

- `.width-zero` sets width to `0`

- `.width-all` sets width to `100%`

- `.width-em` sets width to `1em`

- `.width-rem` sets width to `1rem`

- `.width-viewport` sets width to `100vw`

- `.width-auto` sets width to `auto`

### `height`

- `.height-zero` sets height to `0`

- `.height-all` sets height to `100%`

- `.height-em` sets height to `1em`

- `.height-rem` sets height to `1rem`

- `.height-viewport` sets height to `100vh`

- `.height-auto` sets height to `auto`

### `max`

- `.max-none` sets maxes to `none`

- `.max-zero` sets maxes to `0`

- `.max-viewport` sets maxes to viewport size

- `.width-free` sets max-width to `none`

- `.height-free` sets max-height to `none`

- `.width-fit` sets max-width to `100%`

- `.height-fit` sets max-height to `100%`

- `.width-clip` sets max-width to `0`

- `.height-clip` sets max-height to `0`

### `min`

- `.min-zero` sets mins to `0`

- `.min-auto` sets mins to `auto`

- `.min-viewport` sets mins to viewport size

- `.width-force` sets min-width to `100%`

- `.height-force` sets min-height to `100%`

## usage

```html



```