Width (Fixed)
A series of utility classes that adjust the width (px) property of a selector, with support for responsive modifiers.
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 (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 |
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>Configurations
Below are the default Sass configuration variables for seed-width-fx. The variables can be found in the pack’s _config.scss file.
seed-width-fx/_config.scss// 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;