Block Size Utilities
The block-size utilities provide a set of classes to adjust the block-size, max-block-size, and min-block-size properties of elements.
Block Size
| Class Name | Property | Value |
|---|---|---|
.bs-auto | block-size | auto |
.bs-fit-content | block-size | fit-content |
.bs-max-content | block-size | max-content |
.bs-min-content | block-size | min-content |
.bs-stretch | block-size | stretch |
.bs-full | block-size | 100% |
.bs-quarter | block-size | 25% |
.bs-half | block-size | 50% |
.bs-three-quarters | block-size | 75% |
.bs-third | block-size | calc(100%/ 3) |
.bs-two-thirds | block-size | calc(100%/ 1.5) |
.bs-half-screen | block-size | 50vh |
.bs-third-screen | block-size | calc(100vh/ 3) |
.bs-two-thirds-screen | block-size | calc(100vh/ 1.5) |
.bs-quarter-screen | block-size | 25vh |
.bs-three-quarters-screen | block-size | 75vh |
.bs-full-screen | block-size | 100vh |
.bs-0 | block-size | var(--graupl-spacer-0) |
.bs-1 | block-size | var(--graupl-spacer-1) |
.bs-2 | block-size | var(--graupl-spacer-2) |
.bs-3 | block-size | var(--graupl-spacer-3) |
.bs-4 | block-size | var(--graupl-spacer-4) |
.bs-5 | block-size | var(--graupl-spacer-5) |
.bs-6 | block-size | var(--graupl-spacer-6) |
.bs-7 | block-size | var(--graupl-spacer-7) |
.bs-8 | block-size | var(--graupl-spacer-8) |
.bs-9 | block-size | var(--graupl-spacer-9) |
.bs-10 | block-size | var(--graupl-spacer-10) |
Max Block Size
| Class Name | Property | Value |
|---|---|---|
.max-bs-auto | max-block-size | auto |
.max-bs-fit-content | max-block-size | fit-content |
.max-bs-max-content | max-block-size | max-content |
.max-bs-min-content | max-block-size | min-content |
.max-bs-stretch | max-block-size | stretch |
.max-bs-full | max-block-size | 100% |
.max-bs-quarter | max-block-size | 25% |
.max-bs-half | max-block-size | 50% |
.max-bs-three-quarters | max-block-size | 75% |
.max-bs-third | max-block-size | calc(100%/ 3) |
.max-bs-two-thirds | max-block-size | calc(100%/ 1.5) |
.max-bs-half-screen | max-block-size | 50vh |
.max-bs-third-screen | max-block-size | calc(100vh/ 3) |
.max-bs-two-thirds-screen | max-block-size | calc(100vh/ 1.5) |
.max-bs-quarter-screen | max-block-size | 25vh |
.max-bs-three-quarters-screen | max-block-size | 75vh |
.max-bs-full-screen | max-block-size | 100vh |
.max-bs-0 | max-block-size | var(--graupl-spacer-0) |
.max-bs-1 | max-block-size | var(--graupl-spacer-1) |
.max-bs-2 | max-block-size | var(--graupl-spacer-2) |
.max-bs-3 | max-block-size | var(--graupl-spacer-3) |
.max-bs-4 | max-block-size | var(--graupl-spacer-4) |
.max-bs-5 | max-block-size | var(--graupl-spacer-5) |
.max-bs-6 | max-block-size | var(--graupl-spacer-6) |
.max-bs-7 | max-block-size | var(--graupl-spacer-7) |
.max-bs-8 | max-block-size | var(--graupl-spacer-8) |
.max-bs-9 | max-block-size | var(--graupl-spacer-9) |
.max-bs-10 | max-block-size | var(--graupl-spacer-10) |
Min Block Size
| Class Name | Property | Value |
|---|---|---|
.min-bs-auto | min-block-size | auto |
.min-bs-fit-content | min-block-size | fit-content |
.min-bs-max-content | min-block-size | max-content |
.min-bs-min-content | min-block-size | min-content |
.min-bs-stretch | min-block-size | stretch |
.min-bs-full | min-block-size | 100% |
.min-bs-quarter | min-block-size | 25% |
.min-bs-half | min-block-size | 50% |
.min-bs-three-quarters | min-block-size | 75% |
.min-bs-third | min-block-size | calc(100%/ 3) |
.min-bs-two-thirds | min-block-size | calc(100%/ 1.5) |
.min-bs-half-screen | min-block-size | 50vh |
.min-bs-third-screen | min-block-size | calc(100vh/ 3) |
.min-bs-two-thirds-screen | min-block-size | calc(100vh/ 1.5) |
.min-bs-quarter-screen | min-block-size | 25vh |
.min-bs-three-quarters-screen | min-block-size | 75vh |
.min-bs-full-screen | min-block-size | 100vh |
.min-bs-0 | min-block-size | var(--graupl-spacer-0) |
.min-bs-1 | min-block-size | var(--graupl-spacer-1) |
.min-bs-2 | min-block-size | var(--graupl-spacer-2) |
.min-bs-3 | min-block-size | var(--graupl-spacer-3) |
.min-bs-4 | min-block-size | var(--graupl-spacer-4) |
.min-bs-5 | min-block-size | var(--graupl-spacer-5) |
.min-bs-6 | min-block-size | var(--graupl-spacer-6) |
.min-bs-7 | min-block-size | var(--graupl-spacer-7) |
.min-bs-8 | min-block-size | var(--graupl-spacer-8) |
.min-bs-9 | min-block-size | var(--graupl-spacer-9) |
.min-bs-10 | min-block-size | var(--graupl-spacer-10) |
Customization
To customize the alignment utilities, you can use the following variables.
| Variable | Description | Default Value |
|---|---|---|
$selector-base | Base selector for utility classes. | "." |
$selector-prefix | The selector prefix for all utility classes. | "" |
$selector-suffix | The selctor suffix for all utility classes. | "" |
$selector-separator | The selector separator for all utility classes. | "" |
$use-important | Appends !important to generated utility declarations. | true |
$generate-base-utilities | Generates the base utility classes. | true |
$screen-aware | Enables screen-aware utility variants. | false |
$theme-aware | Enables theme-aware utility variants. | false |
$scheme-aware | Enables scheme-aware utility variants. | false |
$state-aware | Enables state-aware utility variants. | false |
$container-aware | Enables container-aware utility variants. | false |
$screen-aware-selector-prefix | Prefix to the screen-aware portion of utility selectors. | "" |
$screen-aware-selector-suffix | Suffix to the screen-aware portion of utility selectors. | "" |
$screen-aware-selector-separator | Separator inserted for screen-aware utility selectors. | "\\:" |
$theme-aware-selector-prefix | Prefix to the theme-aware portion of utility selectors. | "" |
$theme-aware-selector-suffix | Suffix to the theme-aware portion of utility selectors. | "-theme" |
$theme-aware-selector-separator | Separator inserted for theme-aware utility selectors. | "\\:" |
$scheme-aware-selector-prefix | Prefix to the scheme-aware portion of utility selectors. | "" |
$scheme-aware-selector-suffix | Suffix to the scheme-aware portion of utility selectors. | "-mode" |
$scheme-aware-selector-separator | Separator inserted for scheme-aware utility selectors. | "\\:" |
$state-aware-selector-prefix | Prefix to the state-aware portion of utility selectors. | "" |
$state-aware-selector-suffix | Suffix to the state-aware portion of utility selectors. | "" |
$state-aware-selector-separator | Separator inserted for state-aware utility selectors. | "\\:" |
$container-aware-selector-prefix | Prefix to the container-aware portion of utility selectors. | "cq\\:" |
$container-aware-selector-suffix | Suffix to the container-aware portion of utility selectors. | "" |
$container-aware-selector-separator | Separator inserted for container-aware utility selectors. | "\\:" |
$utility-properties | Map of utility properties. | () |
$utility-values | Map of utility values. | () |
$utility-map | Map of utility property/value pairs. | () |
Responsive Variants
Generating responsive utility classes can be done by setting $screen-aware, $theme-aware, $scheme-aware, $state-aware, or $container-aware to true.
By default, no responsive utility classes are generated for block-size.
✏️ Note
For more information on responsive variants, refer to the Responsive utility classes documentation.