Height - v3
Height utility classes in CodyFrame v3:
| CSS Class | Description |
|---|---|
h{p}eight-xxxxs |
height: 0.25rem; (~4px) |
h{p}eight-xxxs |
height: 0.5rem; (~8px) |
h{p}eight-xxs |
height: 0.75rem; (~12px) |
h{p}eight-xs |
height: 1rem; (~16px) |
h{p}eight-sm |
height: 1.5rem; (~24px) |
h{p}eight-md |
height: 2rem; (~32px) |
h{p}eight-lg |
height: 3rem; (~48px) |
h{p}eight-xl |
height: 4rem; (~64px) |
h{p}eight-xxl |
height: 6rem; (~96px) |
h{p}eight-xxxl |
height: 8rem; (~128px) |
h{p}eight-xxxxl |
height: 16rem; (~256px) |
h{p}eight-0 |
height: 0; |
h{p}eight-10% |
height: 10%; |
h{p}eight-20% |
height: 20%; |
h{p}eight-25% |
height: 25%; |
h{p}eight-30% |
height: 30%; |
h{p}eight-33% |
height: calc(100% / 3); |
h{p}eight-40% |
height: 40%; |
h{p}eight-50% |
height: 50%; |
h{p}eight-60% |
height: 60%; |
h{p}eight-66% |
height: calc(100% / 1.5); |
h{p}eight-70% |
height: 70%; |
h{p}eight-75% |
height: 75%; |
h{p}eight-80% |
height: 80%; |
h{p}eight-90% |
height: 90%; |
h{p}eight-100% |
height: 100%; |
h{p}eight-100vh |
height: 100vh; |
h{p}eight-auto |
height: auto; |
h{p}eight-inherit |
height: inherit; |
Optionally, you can update the default height 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 height at a specific breakpoint adding the @{breakpoint} suffix to the height utility classes:
<div class="height-100vh height-auto@md">
<!-- ... -->
</div>Fixed Sizes #
Optionally, you can create a list of fixed sized utility classes (e.g., a 40px height 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>
