1.0.1 • Published 7 years ago
scale-ratio v1.0.1
scale-ratio
CSS to maintain elements aspect ratios across multiple device widths. The elements height will be set based on its width.
<div class='s-xs-50 s-sm-70 scale'>
<div>
<!-- your content goes here -->
</div>
</div>Use prefixes to define a scale
| Prefix Type | s-xs- | s-sm- | s-md- | s-lg- |
|---|---|---|---|---|
| Screen sizes | < 768px | > 768px | > 992px | > 1200px |
| Phones | Tablets | Desktops | Large devices Desktops |
Use a percentage suffix and the prefix s-*- this will make the elements height a percentage of the width.
This will Scale the height of the element on small devices/screens to be 10% of the Elements width
s-xs-10
The usable percentages range from 5 - 200 in increments of 5
| Classes | Effect |
|---|---|
| .s-xs-5 .s-sm-5 .s-md-5 .s-lg-5 | height will be 5% of width |
| .s-xs-50 .s-sm-50 .s-md-50 .s-lg-50 | height will be 50% of width |
| .s-xs-155 .s-sm-155 .s-md-155 .s-lg-155 | height will be 155% of width |
| .s-xs-200 .s-sm-200 .s-md-200 .s-lg-200 | height will be 200% of width |
//todo add common