Width (Min)

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


npm install seed-width-min --save



All of the following classes support responsive modifiers.

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

Class Min Width (%)
.u-width-min-0 0%
.u-width-min-1 8.33333%
.u-width-min-2 16.66667%
.u-width-min-3 25%
.u-width-min-4 33.33333%
.u-width-min-5 41.66667%
.u-width-min-6 50%
.u-width-min-7 58.33333%
.u-width-min-8 66.66667%
.u-width-min-9 75%
.u-width-min-10 83.33333%
.u-width-min-11 91.66667%
.u-width-min-12 100%


I'm blue and 25% wide (min).
I'm yellow and 50% wide (min).
I'm green and 75% wide (min).
<div class="u-width-min-3 t-bg-blue-200">
  I'm blue and 25% wide (min).
<div class="u-width-min-6 t-bg-yellow-200">
  I'm yellow and 50% wide (min).
<div class="u-width-min-9 t-bg-green-200">
  I'm green and 75% wide (min).


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

$seed-width-min-namespace: #{$seed-width-namespace}-min !default;