Width (Fixed)

Pack name: seed-width-fx

Width (fixed) utility pack for Seed

Contents

Install

npm install seed-width-fx --save

Dependencies


Usage

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

Example

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>
<div class="u-width-fx-6 t-bg-yellow-200">
  I'm yellow and 300px wide.
</div>