Photo by Larry Li
Sizing
Introduction
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="width-75--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-100--lg">...</div>
<div class="height-10vh--lg">...</div>