Width
A series of utility classes that adjust the width (%) property of a selector, with support for responsive modifiers.
Install
npm install seed-width --save
Dependencies
Usages
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-0 |
0% |
.u-width-1 |
8.33333% |
.u-width-2 |
16.66667% |
.u-width-3 |
25% |
.u-width-4 |
33.33333% |
.u-width-5 |
41.66667% |
.u-width-6 |
50% |
.u-width-7 |
58.33333% |
.u-width-8 |
66.66667% |
.u-width-9 |
75% |
.u-width-10 |
83.33333% |
.u-width-11 |
91.66667% |
.u-width-12 |
100% |
Example
I'm blue and 25% wide.
I'm yellow and 50% wide.
I'm green and 75% wide.
<div class="u-width-3 t-bg-blue-200">
I'm blue and 25% wide.
</div>
<div class="u-width-6 t-bg-yellow-200">
I'm yellow and 50% wide.
</div>
<div class="u-width-9 t-bg-green-200">
I'm green and 75% wide.
</div>Configurations
Below are the default Sass configuration variables for seed-width. The variables can be found in the pack’s _config.scss file.
seed-width/_config.scss// Namespace
$seed-width-namespace: "u-width" !default;
// Widths
$seed-widths: (
0: 0%,
1: 8.33333%,
2: 16.66667%,
3: 25%,
4: 33.33333%,
5: 41.66667%,
6: 50%,
7: 58.33333%,
8: 66.66667%,
9: 75%,
10: 83.33333%,
11: 91.66667%,
12: 100%,
) !default;