sassyons/docs/heights.md

Inspired by Tachyons

# Height Styles

Sassyons uses the css `calc` function to arrive at 1/3 values.

| Class | Properties |
| ----- | ---------- |
| h-third | height: calc(100% / 3) |
| h-2third | height: calc((100% / 3) * 2) |
| vh-third | height: calc(100vh / 3) |
| vh-2third | height: calc((100vh / 3) * 2) |
| h-min-third | min-height: calc(100% / 3) |
| h-min-2third | min-height: calc((100% / 3) * 2) |
| vh-min-third | min-height: calc(100vh / 3) |
| vh-min-2third | min-height: calc((100vh / 3) * 2) |
| h-max-third | max-height: calc(100% / 3) |
| h-max-2third | max-height: calc((100% / 3) * 2) |
| vh-max-third | max-height: calc(100vh / 3) |
| vh-max-2third | max-height: calc((100vh / 3) * 2) |

# Unit-based Height Styles

You can achieve percent or vh height values for any multiple of 5 between 0 - 100:
* Example = the `h-min-55` class name will produce `min-height: 55%`
* Example = the `vh-50` class name will produce `height: 50vh`

| Class | Properties |
| ----- | ---------- |
| h-⟨num⟩ { height: ⟨num⟩% |
| h-min-⟨num⟩ { min-height: ⟨num⟩% |
| h-max-⟨num⟩ { max-height: ⟨num⟩% |
| vh-⟨num⟩ { height: ⟨num⟩vh |
| vh-min-⟨num⟩ { min-height: ⟨num⟩vh |
| vh-max-⟨num⟩ { max-height: ⟨num⟩vh |