Sizing • Natura11y
Jump to main contentJump to website footer

There is a newer version of Naturally.

Five elephants on brown grass

Photo by Larry Li

Sizing

Introduction

Set specific width and height values to an element.

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>
Figure 1

Breakpoint Modifiers

Width Utilities accept breakpoint modifiers.


        <!-- With breakpoint modifier -->
        
        <div class="width-75--lg 👈">...</div>
Figure 2

Height Utilities

Natura11y provides only two height utilities:

.height-100


        <div class="height-100">...</div>
        
        <!-- 100% height of viewport -->
        <div class="height-100vh">...</div>
Figure 3

Breakpoint Modifiers

Height utilities accept breakpoint modifiers.


        <!-- With breakpoint modifier -->
        
        <div class="height-100--lg">...</div>
        <div class="height-10vh--lg">...</div>
Figure 4