Width

Use Rivet's width utilities to constrain the width of interface elements, particularly form fields.

Width utility CSS classes

You can constrain the width of a block-level element by applying one of the classes listed below.

Width utility examples

Width utility classes are especially useful for form inputs, which should have their widths constrained to match the expected length of the information you’re asking someone to give you.

For example, a form field asking someone for their ZIP code should be much smaller than one asking for their street address.

<div class="rvt-width-xxs">
  <label for="input-1">xxs</label>
  <input type="text" id="input-1">
</div>

<div class="rvt-width-xs rvt-m-top-lg">
  <label for="input-2">xs</label>
  <input type="text" id="input-2">
</div>

<div class="rvt-width-sm rvt-m-top-lg">
  <label for="input-3">sm</label>
  <input type="text" id="input-3">
</div>

<div class="rvt-width-md rvt-m-top-lg">
  <label for="input-4">md</label>
  <input type="text" id="input-4">
</div>

<div class="rvt-width-lg rvt-m-top-lg">
  <label for="input-5">lg</label>
  <input type="text" id="input-5">
</div>

<div class="rvt-width-xl rvt-m-top-lg">
  <label for="input-6">xl</label>
  <input type="text" id="input-6">
</div>

<div class="rvt-width-xxl rvt-m-top-lg">
  <label for="input-7">xxl</label>
  <input type="text" id="input-7">
</div>

Responsive widths

Each width utility class comes with a set of modifiers that allow you to specify the screen size at which the constrained width should take effect.

<div class="rvt-width-sm-lg-up">
    <!-- markup -->
</div>

With these spacing classes applied, the div would have a width of 192px/12rem only on large screens (1080px wide) and up.

All width utility classes have the following responsive modifiers available to them:

• -sm-up - screens 480–740px and wider
• -md-up - screens 740–1080px and wider
• -lg-up - screens 1080–1260px and wider
• -xl-up - screens 1260–1400px and wider
• -xxl-up - screens 1400px and wider

Combining width and flex utilities

The width utility classes can be combined with Rivet’s flex utilities to position elements next to one another horizontally.

<div class="rvt-display-flex">
  <div class="rvt-width-xl rvt-m-right-md">
    <label for="input-8">Flex inputs</label>
    <input type="text" id="input-8">
  </div>
  
  <div class="rvt-width-sm">
    <label for="input-9">Flex inputs</label>
    <input type="text" id="input-9">
  </div>
</div>

Width Sass variables

If you are using Rivet’s Sass files, you can directly access any width unit by its variable name.

See the documentation on getting started with Rivet for a complete list of Rivet’s Sass variables.