Width (Fixed)

A series of utility classes that adjust the width (px) property of a selector, with support for responsive modifiers.


npm install seed-width-fx --save



All of the following classes support responsive modifiers.

These classes can also be combined with the utility classes from seed-width-min and seed-width-max.

Class Width (px)
.u-width-fx-0 0px
.u-width-fx-1 50px
.u-width-fx-2 100px
.u-width-fx-3 150px
.u-width-fx-4 200px
.u-width-fx-5 250px
.u-width-fx-6 300px
.u-width-fx-7 350px
.u-width-fx-8 400px


I'm blue and 150px wide.
I'm yellow and 300px wide.
<div class="u-width-fx-3 t-bg-blue-200">
  I'm blue and 150px wide.
<div class="u-width-fx-6 t-bg-yellow-200">
  I'm yellow and 300px wide.


Below are the default Sass configuration variables for seed-width-fx. The variables can be found in the pack’s _config.scss file.

// Namespace
$seed-width-fx-namespace: "u-width-fx" !default;

// Widths
$seed-width-fx-sizes: (
  0: 0px,
  1: 50px,
  2: 100px,
  3: 150px,
  4: 200px,
  5: 250px,
  6: 300px,
  7: 350px,
  8: 400px,
) !default;