Photo by Larry Li on Unsplash
Sizing
Width Utilities
Natura11y provides the following width utilities. Number values represent a percentage. For example, the .width-50 utility makes its selector 50% of its parent.
10
20
30
40
50
60
70
80
90
100
<div class="width-10">...</div>
<div class="width-20">...</div>
<div class="width-25">...</div>
<div class="width-30">...</div>
<div class="width-40">...</div>
<div class="width-50">...</div>
<div class="width-60">...</div>
<div class="width-70">...</div>
<div class="width-75">...</div>
<div class="width-80">...</div>
<div class="width-90">...</div>
<div class="width-100">...</div>
<div class="width-auto">...</div>Breakpoint Modifiers
Width Utilities accept breakpoint modifiers.
<!-- With breakpoint modifier -->
<div class="box-shadow-1--lg">...</div>Height Utilities
Natura11y provides only two height utilities:
.height-100
<div class="height-100">...</div>
<!-- 100% height of viewport -->
<div class="height-100vh">...</div>Breakpoint Modifiers
Height utilities accept breakpoint modifiers.
<!-- With breakpoint modifier -->
<div class="height-10vh--lg">...</div>
<div class="height-100--lg">...</div>