Width - v3
Width utility classes in CodyFrame v3:
| CSS Class | Description |
|---|---|
w{p}idth-xxxxs |
width: 0.25rem; (~4px) |
w{p}idth-xxxs |
width: 0.5rem; (~8px) |
w{p}idth-xxs |
width: 0.75rem; (~12px) |
w{p}idth-xs |
width: 1rem; (~16px) |
w{p}idth-sm |
width: 1.5rem; (~24px) |
w{p}idth-md |
width: 2rem; (~32px) |
w{p}idth-lg |
width: 3rem; (~48px) |
w{p}idth-xl |
width: 4rem; (~64px) |
w{p}idth-xxl |
width: 6rem; (~96px) |
w{p}idth-xxxl |
width: 8rem; (~128px) |
w{p}idth-xxxxl |
width: 16rem; (~256px) |
w{p}idth-0 |
width: 0; |
w{p}idth-10% |
width: 10%; |
w{p}idth-20% |
width: 20%; |
w{p}idth-25% |
width: 25%; |
w{p}idth-30% |
width: 30%; |
w{p}idth-33% |
width: calc(100% / 3); |
w{p}idth-40% |
width: 40%; |
w{p}idth-50% |
width: 50%; |
w{p}idth-60% |
width: 60%; |
w{p}idth-66% |
width: calc(100% / 1.5); |
w{p}idth-70% |
width: 70%; |
w{p}idth-75% |
width: 75%; |
w{p}idth-80% |
width: 80%; |
w{p}idth-90% |
width: 90%; |
w{p}idth-100% |
width: 100%; |
w{p}idth-100vw |
width: 100vw; |
w{p}idth-auto |
width: auto; |
w{p}idth-inherit |
width: inherit; |
Optionally, you can update the default width variables by adding your own in the custom-style/_util.scss file:
:root {
// size - scale used to set width/height values
--size-xxxxs: 0.25rem; // ~4px
--size-xxxs: 0.5rem; // ~8px
--size-xxs: 0.75rem; // ~12px
--size-xs: 1rem; // ~16px
--size-sm: 1.5rem; // ~24px
--size-md: 2rem; // ~32px
--size-lg: 3rem; // ~48px
--size-xl: 4rem; // ~64px
--size-xxl: 6rem; // ~96px
--size-xxxl: 8rem; // ~128px
--size-xxxxl: 16rem; // ~256px
}Responsive #
Edit the width at a specific breakpoint adding the @{breakpoint} suffix to the width utility classes:
<div class="width-100% width-auto@md">
<!-- ... -->
</div>Fixed Sizes #
Optionally, you can create a list of fixed sized utility classes (e.g., a 40px width utility class):
$fixedSizes: 32, 40, 60;
$fixedHeightList : '';
$fixedWidthList : '';
$fixedSizeList : '';
$fixedSizeSeparator: '';
@each $fixedSize in $fixedSizes {
$i: index($fixedSizes, $fixedSize);
@if($i > 1) {$fixedSizeSeparator: ' ,';}
$fixedHeightList: $fixedHeightList+$fixedSizeSeparator+'.height-#{$fixedSize}';
$fixedWidthList: $fixedWidthList+$fixedSizeSeparator+'.width-#{$fixedSize}';
$fixedSizeList: $fixedSizeList+$fixedSizeSeparator+'.size-#{$fixedSize}';
}
#{$fixedHeightList} {
height: var(--height);
&.btn, &.form-control {
line-height: var(--height);
padding-top: 0;
padding-bottom: 0;
}
}
#{$fixedWidthList} {
width: var(--width);
&.btn {
padding-left: 0;
padding-right: 0;
}
}
#{$fixedSizeList} {
height: var(--height);
width: var(--width);
&.btn, &.form-control:not(textarea) {
line-height: var(--height);
padding-top: 0;
padding-bottom: 0;
}
&.btn {
padding-left: 0;
padding-right: 0;
}
}
@each $fixedSize in $fixedSizes {
.height-#{$fixedSize} { --height: #{$fixedSize}px; }
.width-#{$fixedSize} { --width: #{$fixedSize}px; }
.size-#{$fixedSize} {
--height: #{$fixedSize}px;
--width: #{$fixedSize}px;
}
}The above code will create 32px, 40px, and 60px width, height, and size (width + height) utility classes.
How to use them:
<header class="height-60">
<!-- element height = 60px -->
</header>
<button class="size-32">
<!-- element height and width = 32px -->
</button>
